/* ============================================================================= SEA FOOD KINGS — LUX (global layer) Night (default) / Day themes · skeuomorphic buttons · 3D cards · cinematic product + nutrition sheet · announcement ticker · logout dialog. Loaded AFTER every existing theme stylesheet. Overrides use the `html[data-sfk-theme]` prefix for specificity instead of editing old files. Remove the and the site returns to its previous look. ============================================================================= */ /* ---------- 1. DESIGN TOKENS ---------------------------------------------- */ html[data-sfk-theme="night"] { color-scheme: dark; --sfk-bg: #0a0709; --sfk-bg-2: #120c0f; --sfk-surface: #171014; --sfk-surface-2: #21171c; --sfk-text: #f6efe6; /* soft cream */ --sfk-muted: #b9aaa2; --sfk-line: rgba(255, 232, 214, .12); --sfk-red: #dc143c; /* crimson */ --sfk-red-hi: #ff4d6a; /* crimson for text on dark (AA) */ --sfk-red-deep: #7a0a1f; --sfk-cream: #f6efe6; --sfk-on-red: #fff6f2; --sfk-glass: rgba(20, 12, 16, .55); --sfk-glass-edge: rgba(255, 255, 255, .16); --sfk-shadow: rgba(0, 0, 0, .55); --sfk-glow: rgba(220, 20, 60, .38); --sfk-btn-top: #f0365a; --sfk-btn-bot: #b30f2e; --sfk-btn-lip: #5e0717; --sfk-btn-edge: #7a0a1f; --sfk-btn-text: #fff6f2; --sfk-btn2-top: #2c2026; --sfk-btn2-bot: #171014; --sfk-btn2-lip: #050304; --sfk-btn2-edge: rgba(255, 232, 214, .2); --sfk-btn2-text: #f6efe6; --sfk-m-protein: #ff4d6a; --sfk-m-carbs: #f6efe6; --sfk-m-fat: #9a7f86; --sfk-ticker-bg-1: #2a0a12; --sfk-ticker-bg-2: #13060a; --sfk-ticker-text: #f6efe6; } html[data-sfk-theme="day"] { color-scheme: light; --sfk-bg: #f7efe2; /* soft cream */ --sfk-bg-2: #efe3d0; --sfk-surface: #fffaf1; --sfk-surface-2: #f8eddb; --sfk-text: #1d1416; /* charcoal-black */ --sfk-muted: #6b5b57; --sfk-line: rgba(60, 30, 30, .14); --sfk-red: #c0102f; --sfk-red-hi: #b00d2b; /* readable on cream */ --sfk-red-deep: #7d0a1e; --sfk-cream: #fffaf1; --sfk-on-red: #fffaf1; --sfk-glass: rgba(255, 250, 241, .62); --sfk-glass-edge: rgba(255, 255, 255, .9); --sfk-shadow: rgba(70, 30, 30, .22); --sfk-glow: rgba(192, 16, 47, .28); --sfk-btn-top: #dd2a4a; --sfk-btn-bot: #a80d28; --sfk-btn-lip: #6d0618; --sfk-btn-edge: #7d0a1e; --sfk-btn-text: #fffaf1; --sfk-btn2-top: #fffdf7; --sfk-btn2-bot: #f1e4cf; --sfk-btn2-lip: #cdb894; --sfk-btn2-edge: rgba(125, 10, 30, .35); --sfk-btn2-text: #1d1416; --sfk-m-protein: #b00d2b; --sfk-m-carbs: #1d1416; --sfk-m-fat: #b9a79b; --sfk-ticker-bg-1: #fffaf1; --sfk-ticker-bg-2: #efe0c8; --sfk-ticker-text: #1d1416; } /* ---------- 2. PAGE CHROME ------------------------------------------------- */ html[data-sfk-theme] body { background: radial-gradient(1200px 600px at 85% -10%, var(--sfk-glow), transparent 60%), var(--sfk-bg); background-attachment: fixed, scroll; color: var(--sfk-text); transition: background-color .35s ease, color .35s ease; } html[data-sfk-theme] body.sfk-lux a { transition: color .2s ease; } .sfk-skip-link { position: absolute; left: 12px; top: -60px; z-index: 1000003; padding: 10px 16px; border-radius: 10px; font-weight: 700; background: var(--sfk-red, #dc143c); color: #fff; text-decoration: none; transition: top .2s ease; } .sfk-skip-link:focus { top: 12px; } html[data-sfk-theme] .container .page-title, html[data-sfk-theme] .category-title, html[data-sfk-theme] h1, html[data-sfk-theme] h2, html[data-sfk-theme] h3 { color: var(--sfk-text); } html[data-sfk-theme] .page-content, html[data-sfk-theme] .default-page p { color: var(--sfk-text); } html[data-sfk-theme] a { color: inherit; } /* Header */ html[data-sfk-theme] .gs-header { background: color-mix(in srgb, var(--sfk-bg) 78%, transparent); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); border-bottom: 1px solid var(--sfk-line); box-shadow: 0 1px 0 var(--sfk-red-deep), 0 10px 30px -12px var(--sfk-shadow); } html[data-sfk-theme] .gs-menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; } html[data-sfk-theme] .gs-menu li a { color: var(--sfk-text); position: relative; letter-spacing: .06em; } html[data-sfk-theme] .gs-menu li a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; background: var(--sfk-red); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; } html[data-sfk-theme] .gs-menu li a:hover { color: var(--sfk-red-hi); } html[data-sfk-theme] .gs-menu li a:hover::after, html[data-sfk-theme] .gs-menu li.current-menu-item a::after { transform: scaleX(1); } html[data-sfk-theme] .gs-cart-link span { color: var(--sfk-text); } html[data-sfk-theme] #header-cart-count { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; display: inline-grid; place-items: center; background: linear-gradient(180deg, var(--sfk-btn-top), var(--sfk-btn-bot)); color: var(--sfk-btn-text) !important; font-size: 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 6px var(--sfk-glow); } .gs-header-right { display: flex; align-items: center; gap: 12px; } .sfk-tools { display: flex; align-items: center; gap: 8px; } html[data-sfk-theme] .gs-logo img { filter: drop-shadow(0 4px 10px var(--sfk-shadow)); } /* Footer + bottom nav + floating cart + mini cart */ html[data-sfk-theme] .gs-footer { background: var(--sfk-bg-2); color: var(--sfk-text); border-top: 1px solid var(--sfk-line); } html[data-sfk-theme] .gs-footer a, html[data-sfk-theme] .footer-links a { color: var(--sfk-text); } html[data-sfk-theme] .gs-footer a:hover { color: var(--sfk-red-hi); } html[data-sfk-theme] .mobile-bottom-nav { background: color-mix(in srgb, var(--sfk-surface) 92%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--sfk-line); } html[data-sfk-theme] .mobile-bottom-nav .nav-item { color: var(--sfk-text); } html[data-sfk-theme] .mobile-bottom-nav .nav-item.active, html[data-sfk-theme] .mobile-bottom-nav .nav-item:hover { color: var(--sfk-red-hi); } html[data-sfk-theme] .gs-floating-cart { background: linear-gradient(180deg, var(--sfk-surface-2), var(--sfk-surface)); border: 1px solid var(--sfk-line); box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 12px 28px var(--sfk-shadow); } html[data-sfk-theme] .gs-floating-cart .badge { background: var(--sfk-red); color: #fff; } html[data-sfk-theme] .mini-cart { background: linear-gradient(180deg, var(--sfk-surface-2), var(--sfk-surface)); color: var(--sfk-text); border: 1px solid var(--sfk-line); box-shadow: 0 24px 60px var(--sfk-shadow); } html[data-sfk-theme] .mini-cart-header { border-bottom: 1px solid var(--sfk-line); } html[data-sfk-theme] .mini-cart-summary { border-top: 1px solid var(--sfk-line); } html[data-sfk-theme] .mini-cart-item .meta { color: var(--sfk-muted); } html[data-sfk-theme] .mini-cart-item .subtotal { color: var(--sfk-red-hi); } html[data-sfk-theme] .close-mini-cart { color: var(--sfk-text); background: transparent; box-shadow: none; border: 0; } /* Forms (checkout, login modal, generic) */ html[data-sfk-theme] #checkout-form input:not([type="radio"]):not([type="checkbox"]), html[data-sfk-theme] #checkout-form select, html[data-sfk-theme] #checkout-form textarea, html[data-sfk-theme] .sfk-login-card input { background: var(--sfk-surface); color: var(--sfk-text); border: 1px solid var(--sfk-line); border-radius: 12px; box-shadow: inset 0 2px 4px rgba(0,0,0,.18); } html[data-sfk-theme] #checkout-form input:focus, html[data-sfk-theme] #checkout-form select:focus, html[data-sfk-theme] #checkout-form textarea:focus { outline: 2px solid var(--sfk-red); outline-offset: 1px; border-color: var(--sfk-red); } html[data-sfk-theme] #checkout-form label, html[data-sfk-theme] #checkout-form strong { color: var(--sfk-text); } html[data-sfk-theme] .bill-summary, html[data-sfk-theme] .checkout-bill-table, html[data-sfk-theme] .gs-cart-row { background: var(--sfk-surface); color: var(--sfk-text); border-color: var(--sfk-line); } html[data-sfk-theme] .checkout-bill-table th, html[data-sfk-theme] .checkout-bill-table td { border-color: var(--sfk-line); color: var(--sfk-text); } html[data-sfk-theme] .cod-glass-card { background: var(--sfk-glass); color: var(--sfk-text); border: 1px solid var(--sfk-glass-edge); } /* Orders widget (styles injected by auth-orders.js use white text) */ html[data-sfk-theme] .sfk-order-card, html[data-sfk-theme] .sfk-login-card { background: var(--sfk-surface) !important; color: var(--sfk-text) !important; border: 1px solid var(--sfk-line) !important; } html[data-sfk-theme] .sfk-step.active { color: var(--sfk-red-hi) !important; text-shadow: none !important; } html[data-sfk-theme] .sfk-login-card .sfk-login-submit { background: var(--sfk-red) !important; color: #fff !important; } html[data-sfk-theme] .sfk-close-btn { color: var(--sfk-text) !important; } /* Existing promo popup: gold -> crimson */ html[data-sfk-theme] .sfk-promo-card { background: linear-gradient(145deg, var(--sfk-surface-2), var(--sfk-bg)); color: var(--sfk-text); border-color: var(--sfk-red); box-shadow: 0 20px 50px var(--sfk-shadow), inset 0 0 18px var(--sfk-glow); } html[data-sfk-theme] .sfk-promo-tag { color: var(--sfk-red-hi); background: transparent; border-color: var(--sfk-red); } /* SFK Visual Polish Only — append to the END of assets/css/sfk-lux.css Does not alter logout, cart, checkout calculations, API, or routing. */ /* Night-mode ambient particles: lightweight CSS-only, no canvas or extra JS. */ html[data-sfk-theme="night"] body { isolation: isolate; } html[data-sfk-theme="night"] body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .34; background-image: radial-gradient(circle at 12% 18%, rgba(255,45,82,.62) 0 1px, transparent 2px), radial-gradient(circle at 72% 32%, rgba(255,70,95,.42) 0 1px, transparent 2px), radial-gradient(circle at 38% 76%, rgba(220,20,60,.55) 0 1.5px, transparent 2.5px), radial-gradient(circle at 88% 82%, rgba(255,100,115,.4) 0 1px, transparent 2px), radial-gradient(ellipse at 20% 10%, rgba(220,20,60,.10), transparent 48%); background-size: 240px 260px, 310px 340px, 270px 300px, 360px 380px, 100% 100%; animation: sfkAmbientDrift 28s linear infinite; } @keyframes sfkAmbientDrift { 0% { background-position: 0 0, 0 0, 0 0, 0 0, center; } 100% { background-position: 120px -260px, -160px -340px, 130px -300px, -180px -380px, center; } } /* Crimson light sweep across product/category cards, NIGHT MODE only. */ html[data-sfk-theme="night"] .product-item, html[data-sfk-theme="night"] .category-item, html[data-sfk-theme="night"] .shop-card { position: relative; overflow: hidden; border-color: rgba(220,20,60,.34); box-shadow: 0 0 0 1px rgba(220,20,60,.06), 0 10px 28px rgba(0,0,0,.28); } html[data-sfk-theme="night"] .product-item::after, html[data-sfk-theme="night"] .category-item::after, html[data-sfk-theme="night"] .shop-card::after { content: ""; position: absolute; inset: -40% auto -40% -65%; width: 42%; pointer-events: none; z-index: 3; background: linear-gradient(105deg, transparent 0%, rgba(255,35,75,.025) 25%, rgba(255,55,85,.15) 48%, rgba(255,20,60,.045) 70%, transparent 100%); transform: skewX(-16deg); animation: sfkCardRedSweep 8.5s ease-in-out infinite; } html[data-sfk-theme="night"] .product-item:hover, html[data-sfk-theme="night"] .category-item:hover, html[data-sfk-theme="night"] .shop-card:hover { border-color: rgba(255,45,82,.78); box-shadow: 0 0 0 1px rgba(255,35,75,.14), 0 0 24px rgba(220,20,60,.18), 0 18px 36px rgba(0,0,0,.34); } @keyframes sfkCardRedSweep { 0%, 58% { left: -65%; opacity: 0; } 64% { opacity: .85; } 82% { left: 125%; opacity: .65; } 83%, 100% { left: 125%; opacity: 0; } } /* My Orders: unify buttons with SFK's crimson tactile button system. */ html[data-sfk-theme="night"] #sfk-my-orders-app button, html[data-sfk-theme="night"] #sfk-my-orders-app .button, html[data-sfk-theme="night"] #sfk-my-orders-app a.button, html[data-sfk-theme="night"] #sfk-my-orders-app input[type="button"], html[data-sfk-theme="night"] #sfk-my-orders-app input[type="submit"], html[data-sfk-theme="night"] .sfk-my-orders-app button, html[data-sfk-theme="night"] .sfk-my-orders-app .button { color: #fff7f5 !important; background: linear-gradient(180deg, #f0365a 0%, #b30f2e 100%) !important; border: 1px solid #7a0a1f !important; border-radius: 11px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 3px 0 #5e0717, 0 7px 16px rgba(220,20,60,.16) !important; text-decoration: none !important; } html[data-sfk-theme="night"] #sfk-my-orders-app button:hover, html[data-sfk-theme="night"] #sfk-my-orders-app .button:hover, html[data-sfk-theme="night"] .sfk-my-orders-app button:hover { filter: brightness(1.12); transform: translateY(-1px); } html[data-sfk-theme="night"] #sfk-my-orders-app, html[data-sfk-theme="night"] .sfk-my-orders-app { color: var(--sfk-text, #f6efe6); } /* Legal/contact pages: premium centered reading column and typography. */ html[data-sfk-theme] .default-page, html[data-sfk-theme] .page-content, html[data-sfk-theme] .entry-content, html[data-sfk-theme] main .container:has(.default-page), html[data-sfk-theme] main .container:has(.entry-content) { color: var(--sfk-text); } html[data-sfk-theme] .default-page, html[data-sfk-theme] .page-content, html[data-sfk-theme] .entry-content { width: min(100% - 32px, 880px); margin-inline: auto; line-height: 1.8; font-size: clamp(15px, 1.4vw, 17px); } html[data-sfk-theme] .default-page h1, html[data-sfk-theme] .page-content h1, html[data-sfk-theme] .entry-content h1, html[data-sfk-theme] .default-page h2, html[data-sfk-theme] .page-content h2, html[data-sfk-theme] .entry-content h2 { text-align: center; line-height: 1.2; letter-spacing: -.025em; margin: 0 auto 1.1em; max-width: 22ch; } html[data-sfk-theme] .default-page h1, html[data-sfk-theme] .page-content h1, html[data-sfk-theme] .entry-content h1 { font-size: clamp(1.8rem, 4vw, 2.65rem); padding-bottom: .55em; border-bottom: 2px solid var(--sfk-red, #dc143c); text-shadow: 0 8px 28px var(--sfk-glow, rgba(220,20,60,.2)); } html[data-sfk-theme] .default-page h2, html[data-sfk-theme] .page-content h2, html[data-sfk-theme] .entry-content h2 { margin-top: 1.8em; font-size: clamp(1.2rem, 2.4vw, 1.55rem); } html[data-sfk-theme] .default-page p, html[data-sfk-theme] .page-content p, html[data-sfk-theme] .entry-content p, html[data-sfk-theme] .default-page li, html[data-sfk-theme] .page-content li, html[data-sfk-theme] .entry-content li { line-height: 1.8; color: var(--sfk-text); } html[data-sfk-theme] .default-page a, html[data-sfk-theme] .page-content a, html[data-sfk-theme] .entry-content a { color: var(--sfk-red-hi); text-underline-offset: 3px; } html[data-sfk-theme="night"] .default-page, html[data-sfk-theme="night"] .page-content, html[data-sfk-theme="night"] .entry-content { background: linear-gradient(145deg, rgba(255,255,255,.018), rgba(220,20,60,.025)); border: 1px solid rgba(220,20,60,.14); border-radius: 18px; padding: clamp(20px, 4vw, 42px); box-shadow: 0 18px 48px rgba(0,0,0,.16); } @media (max-width: 640px) { html[data-sfk-theme] .default-page, html[data-sfk-theme] .page-content, html[data-sfk-theme] .entry-content { width: auto; margin: 16px; padding: 20px 17px; } html[data-sfk-theme="night"] .product-item::after, html[data-sfk-theme="night"] .category-item::after, html[data-sfk-theme="night"] .shop-card::after { animation-duration: 11s; } } @media (prefers-reduced-motion: reduce) { html[data-sfk-theme="night"] body::before, html[data-sfk-theme="night"] .product-item::after, html[data-sfk-theme="night"] .category-item::after, html[data-sfk-theme="night"] .shop-card::after { animation: none !important; } } html[data-sfk-theme] .sfk-promo-heading { background: linear-gradient(135deg, var(--sfk-text), var(--sfk-red-hi)); -webkit-background-clip: text; background-clip: text; } html[data-sfk-theme] .sfk-promo-desc { color: var(--sfk-muted); } html[data-sfk-theme] .sfk-promo-close:hover { background: var(--sfk-red); color: #fff; } /* ---------- 3. SKEUOMORPHIC BUTTONS --------------------------------------- */ .sfk-btn, html[data-sfk-theme] .add-to-cart, html[data-sfk-theme] .proceed-to-pay, html[data-sfk-theme] .proceed-link, html[data-sfk-theme] .mini-cart-checkout, html[data-sfk-theme] #placeOrderBtn, html[data-sfk-theme] .glowing-btn, html[data-sfk-theme] .sfk-promo-btn, html[data-sfk-theme] .sfk-login-submit { --lip: 5px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6em; padding: .8em 1.4em; border: 1px solid var(--sfk-btn-edge); border-radius: 14px; background: linear-gradient(180deg, var(--sfk-btn-top) 0%, var(--sfk-btn-bot) 100%); color: var(--sfk-btn-text); font: 700 .82rem/1.1 'Inter', 'Poppins', system-ui, sans-serif; letter-spacing: .09em; text-transform: uppercase; text-decoration: none; text-shadow: 0 1px 1px rgba(0,0,0,.35); cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.42), /* glossy top edge */ inset 0 -2px 3px rgba(0,0,0,.28), /* inner bottom shade */ 0 var(--lip) 0 var(--sfk-btn-lip), /* tactile lip */ 0 calc(var(--lip) + 8px) 18px -4px var(--sfk-shadow); transform: translateY(0); transition: transform .16s cubic-bezier(.3,.7,.3,1), box-shadow .16s ease, filter .2s ease; overflow: hidden; } .sfk-btn::before, html[data-sfk-theme] .add-to-cart::before, html[data-sfk-theme] .proceed-to-pay::before, html[data-sfk-theme] .mini-cart-checkout::before, html[data-sfk-theme] .glowing-btn::before { /* soft gloss sweep */ content: ""; position: absolute; inset: 0 0 52% 0; pointer-events: none; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0)); } .sfk-btn::after { content: ""; position: absolute; top: 0; bottom: 0; width: 38%; left: -60%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-18deg); transition: left .6s ease; } .sfk-btn:hover::after { left: 130%; } .sfk-btn:hover, html[data-sfk-theme] .add-to-cart:hover, html[data-sfk-theme] .proceed-to-pay:hover, html[data-sfk-theme] .proceed-link:hover, html[data-sfk-theme] .mini-cart-checkout:hover, html[data-sfk-theme] #placeOrderBtn:hover, html[data-sfk-theme] .glowing-btn:hover, html[data-sfk-theme] .sfk-promo-btn:hover { transform: translateY(-2px); filter: brightness(1.08) saturate(1.05); color: var(--sfk-btn-text); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 3px rgba(0,0,0,.28), 0 calc(var(--lip) + 2px) 0 var(--sfk-btn-lip), 0 calc(var(--lip) + 14px) 26px -4px var(--sfk-glow); } .sfk-btn:active, html[data-sfk-theme] .add-to-cart:active, html[data-sfk-theme] .proceed-to-pay:active, html[data-sfk-theme] .proceed-link:active, html[data-sfk-theme] .mini-cart-checkout:active, html[data-sfk-theme] #placeOrderBtn:active, html[data-sfk-theme] .glowing-btn:active, html[data-sfk-theme] .sfk-promo-btn:active { transform: translateY(calc(var(--lip) - 1px)); filter: brightness(.96); box-shadow: inset 0 3px 7px rgba(0,0,0,.4), inset 0 -1px 0 rgba(255,255,255,.12), 0 1px 0 var(--sfk-btn-lip); } .sfk-btn:focus-visible, html[data-sfk-theme] .add-to-cart:focus-visible, html[data-sfk-theme] .glowing-btn:focus-visible, html[data-sfk-theme] .proceed-to-pay:focus-visible, html[data-sfk-theme] .mini-cart-checkout:focus-visible, html[data-sfk-theme] #placeOrderBtn:focus-visible { outline: 3px solid var(--sfk-text); outline-offset: 3px; } .sfk-btn:disabled, .sfk-btn.is-loading, html[data-sfk-theme] #placeOrderBtn:disabled { opacity: .65; cursor: progress; transform: translateY(2px); filter: grayscale(.2); } /* secondary / ghost variants */ .sfk-btn--ghost, html[data-sfk-theme] .glowing-btn:not(.active), html[data-sfk-theme] .sfk-tools .sfk-btn { background: linear-gradient(180deg, var(--sfk-btn2-top), var(--sfk-btn2-bot)); color: var(--sfk-btn2-text); border-color: var(--sfk-btn2-edge); text-shadow: none; --sfk-btn-lip: var(--sfk-btn2-lip); } html[data-sfk-theme] .glowing-btn:not(.active):hover, .sfk-btn--ghost:hover, html[data-sfk-theme] .sfk-tools .sfk-btn:hover { color: var(--sfk-red-hi); filter: none; } .sfk-btn--ghost::before, html[data-sfk-theme] .glowing-btn:not(.active)::before { background: linear-gradient(180deg, rgba(255,255,255,.12), transparent); } html[data-sfk-theme] .glowing-btn.active { background: linear-gradient(180deg, var(--sfk-btn-top), var(--sfk-btn-bot)); color: var(--sfk-btn-text); } html[data-sfk-theme] .glowing-btn .txt { position: relative; z-index: 2; } .sfk-btn--sm { --lip: 3px; padding: .55em 1em; font-size: .72rem; border-radius: 11px; } .sfk-btn--lg { padding: 1.05em 2em; font-size: .92rem; border-radius: 16px; } .sfk-btn--block { width: 100%; } .sfk-btn--icon { --lip: 3px; width: 46px; height: 38px; padding: 0; border-radius: 12px; } .sfk-btn__arrow { transition: transform .25s ease; font-size: 1.15em; } .sfk-btn:hover .sfk-btn__arrow { transform: translateX(4px); } /* quantity keys: smaller, lighter lip */ html[data-sfk-theme] .quantity-btn { --lip: 3px; border-radius: 10px; font-weight: 800; cursor: pointer; background: linear-gradient(180deg, var(--sfk-btn2-top), var(--sfk-btn2-bot)); color: var(--sfk-btn2-text); border: 1px solid var(--sfk-btn2-edge); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 3px 0 var(--sfk-btn2-lip), 0 8px 12px -4px var(--sfk-shadow); transition: transform .14s ease, box-shadow .14s ease; } html[data-sfk-theme] .quantity-btn:hover { color: var(--sfk-red-hi); transform: translateY(-1px); } html[data-sfk-theme] .quantity-btn:active { transform: translateY(2px); box-shadow: inset 0 2px 5px rgba(0,0,0,.35), 0 1px 0 var(--sfk-btn2-lip); } html[data-sfk-theme] .quantity-btn:focus-visible { outline: 3px solid var(--sfk-red); outline-offset: 2px; } html[data-sfk-theme] .quantity-input { background: var(--sfk-surface); color: var(--sfk-text); border: 1px solid var(--sfk-line); border-radius: 10px; box-shadow: inset 0 2px 4px rgba(0,0,0,.2); text-align: center; } html[data-sfk-theme] .product-item.out-of-stock .add-to-cart { opacity: .5; } /* Theme toggle (skeuomorphic switch) */ .sfk-theme-toggle { overflow: visible; } .sfk-theme-toggle__track { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 9px; border-radius: inherit; color: var(--sfk-muted); } .sfk-theme-toggle .sfk-ico { position: relative; z-index: 2; transition: color .25s ease, opacity .25s ease; } .sfk-theme-toggle__knob { position: absolute; z-index: 1; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(180deg, var(--sfk-btn-top), var(--sfk-btn-bot)); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 2px 5px var(--sfk-shadow), 0 0 12px var(--sfk-glow); transition: transform .35s cubic-bezier(.3,1.4,.5,1); } html[data-sfk-theme="day"] .sfk-theme-toggle__knob { transform: translateX(20px); } html[data-sfk-theme="night"] .sfk-ico--moon, html[data-sfk-theme="day"] .sfk-ico--sun { color: #fff; } .sfk-theme-toggle::before, .sfk-theme-toggle::after { display: none; } .sfk-theme-toggle { width: 52px; } /* Header login / logout */ .sfk-login-link__short { display: none; } .sfk-btn[hidden] { display: none !important; } .sfk-logout-btn { gap: .5em; } .sfk-logout-btn svg { flex: none; } html.sfk-session .sfk-login-link { display: none !important; } /* Visually hidden helper */ .sfk-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; } /* ---------- 4. 3D CATEGORY + PRODUCT CARDS -------------------------------- */ html[data-sfk-theme] .product-item, html[data-sfk-theme] .category-item, html[data-sfk-theme] .shop-card { --rx: 0deg; --ry: 0deg; --lift: 0px; background: linear-gradient(160deg, var(--sfk-surface-2) 0%, var(--sfk-surface) 60%); color: var(--sfk-text); border: 1px solid var(--sfk-line); border-radius: 20px; box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -2px 0 rgba(0,0,0,.25), 0 2px 4px rgba(0,0,0,.25), 0 18px 34px -14px var(--sfk-shadow); transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) translate3d(0, var(--lift), 0); transform-style: preserve-3d; transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .3s ease; will-change: auto; } html[data-sfk-theme="day"] .product-item, html[data-sfk-theme="day"] .category-item, html[data-sfk-theme="day"] .shop-card { box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(120,70,50,.10), 0 2px 4px rgba(90,40,40,.10), 0 18px 34px -14px var(--sfk-shadow); } html[data-sfk-theme] .product-item:hover, html[data-sfk-theme] .category-item:hover, html[data-sfk-theme] .shop-card:hover, html[data-sfk-theme] .product-item:focus-within { --lift: -8px; border-color: var(--sfk-red); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -2px 0 rgba(0,0,0,.25), 0 0 0 1px color-mix(in srgb, var(--sfk-red) 55%, transparent), 0 28px 46px -16px var(--sfk-glow); transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) translate3d(0, var(--lift), 0); } html[data-sfk-theme] .product-item.is-tilting, html[data-sfk-theme] .category-item.is-tilting, html[data-sfk-theme] .shop-card.is-tilting { transition: transform .06s linear, box-shadow .3s ease, border-color .3s ease; will-change: transform; } html[data-sfk-theme] .product-image, html[data-sfk-theme] .category-item img { transform: translateZ(18px); } html[data-sfk-theme] .product-image img { transition: transform .6s cubic-bezier(.2,.7,.2,1); } html[data-sfk-theme] .product-item:hover .product-image img, html[data-sfk-theme] .category-item:hover img, html[data-sfk-theme] .shop-card:hover img { transform: scale(1.08); } html[data-sfk-theme] .product-item .product-details, html[data-sfk-theme] .category-item h3 { transform: translateZ(10px); } html[data-sfk-theme] .category-item h3, html[data-sfk-theme] .shop-card h3 { color: var(--sfk-text); } html[data-sfk-theme] .product-name { color: var(--sfk-text); } html[data-sfk-theme] .product-price, html[data-sfk-theme] .product-price .selling-price { color: var(--sfk-red-hi); } html[data-sfk-theme] .product-price .original-price { color: var(--sfk-muted); } html[data-sfk-theme] .discount-pill, html[data-sfk-theme] .product-price .discount-badge { background: linear-gradient(180deg, var(--sfk-btn-top), var(--sfk-btn-bot)); color: var(--sfk-btn-text); border-radius: 99px; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 3px 8px var(--sfk-glow); } html[data-sfk-theme] .product-image { cursor: zoom-in; border-radius: 14px; } html[data-sfk-theme] .product-image:focus-visible { outline: 3px solid var(--sfk-red); outline-offset: 2px; } html[data-sfk-theme] .product-name { cursor: pointer; } /* category tabs row */ html[data-sfk-theme] .category-nav { background: transparent !important; border: 0 !important; box-shadow: none !important; display: flex; flex-wrap: wrap; gap: 12px 14px; justify-content: center; margin: 22px 0; } html[data-sfk-theme] .stock-overlay { background-color: color-mix(in srgb, var(--sfk-bg) 62%, transparent) !important; border-radius: inherit; } /* existing hover nutrition glass + mobile drawer — make theme-aware */ html[data-sfk-theme] .sfk-hover-glass-overlay, html[data-sfk-theme] .sfk-mobile-dropdown { background: color-mix(in srgb, var(--sfk-bg) 78%, transparent); color: var(--sfk-text); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } html[data-sfk-theme] .sfk-glass-desc, html[data-sfk-theme] .nutri-col .lbl, html[data-sfk-theme] .sfk-glass-header, html[data-sfk-theme] .sfk-mobile-nutri-head { color: var(--sfk-muted); } html[data-sfk-theme] .sfk-glass-benefit { color: var(--sfk-red-hi); } html[data-sfk-theme] .nutri-col .val { color: var(--sfk-text); } html[data-sfk-theme] .sfk-mobile-info-trigger { color: var(--sfk-text); background: var(--sfk-surface); border: 1px solid var(--sfk-line); } /* ---------- 5. CINEMATIC PRODUCT + NUTRITION SHEET ------------------------ */ html.sfk-lock { overflow: hidden; } .sfk-pm { position: fixed; inset: 0; z-index: 1000002; display: grid; place-items: center; padding: clamp(0px, 3vw, 32px); visibility: hidden; } .sfk-pm.is-open, .sfk-pm.is-closing { visibility: visible; } .sfk-pm__backdrop { position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease; background: radial-gradient(900px 600px at 30% 30%, rgba(220,20,60,.28), transparent 60%), rgba(6,3,5,.82); -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%); } html[data-sfk-theme="day"] .sfk-pm__backdrop { background: radial-gradient(900px 600px at 30% 30%, rgba(192,16,47,.2), transparent 60%), rgba(40,20,20,.55); } .sfk-pm.is-open .sfk-pm__backdrop { opacity: 1; } .sfk-pm__sheet { position: relative; width: min(1080px, 100%); max-height: min(780px, 100%); overflow: auto; overscroll-behavior: contain; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); border-radius: 28px; border: 1px solid var(--sfk-glass-edge); background: linear-gradient(150deg, var(--sfk-surface-2), var(--sfk-bg) 70%); color: var(--sfk-text); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 40px 90px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(220,20,60,.18); opacity: 0; transform: translateY(40px) scale(.96); transition: opacity .45s ease, transform .6s cubic-bezier(.16,1,.3,1); font-family: 'Inter', 'Poppins', system-ui, sans-serif; } .sfk-pm.is-open .sfk-pm__sheet { opacity: 1; transform: none; } .sfk-pm.is-closing .sfk-pm__sheet { opacity: 0; transform: translateY(24px) scale(.98); transition-duration: .28s; } .sfk-pm.is-closing .sfk-pm__backdrop { opacity: 0; transition-duration: .28s; } .sfk-pm__close { position: absolute; top: 14px; right: 14px; z-index: 5; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; line-height: 1; cursor: pointer; padding: 0; color: var(--sfk-text); border: 1px solid var(--sfk-line); background: linear-gradient(180deg, var(--sfk-btn2-top), var(--sfk-btn2-bot)); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 3px 0 var(--sfk-btn2-lip), 0 10px 18px -6px var(--sfk-shadow); transition: transform .15s ease, color .2s ease; } .sfk-pm__close:hover { color: var(--sfk-red-hi); transform: rotate(90deg); } .sfk-pm__close:focus-visible { outline: 3px solid var(--sfk-red); outline-offset: 2px; } .sfk-pm__media { position: relative; min-height: 340px; display: grid; place-items: center; overflow: hidden; border-radius: 28px 0 0 28px; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--sfk-red) 22%, transparent), transparent 62%), var(--sfk-bg-2); } .sfk-pm__halo { position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--sfk-line); box-shadow: 0 0 0 28px color-mix(in srgb, var(--sfk-red) 6%, transparent), 0 0 80px var(--sfk-glow); animation: sfkPmPulse 6s ease-in-out infinite; } .sfk-pm__img { position: relative; z-index: 2; width: 100%; height: 100%; max-height: 640px; object-fit: contain; padding: clamp(14px, 3vw, 36px); filter: drop-shadow(0 28px 34px rgba(0,0,0,.55)); transform-origin: center; } .sfk-pm__media.is-photo .sfk-pm__img { object-fit: cover; padding: 0; filter: none; } .sfk-pm__pill { position: absolute; z-index: 3; top: 18px; left: 18px; padding: .45em .9em; border-radius: 99px; font-weight: 800; font-size: .72rem; letter-spacing: .1em; background: linear-gradient(180deg, var(--sfk-btn-top), var(--sfk-btn-bot)); color: var(--sfk-btn-text); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 10px var(--sfk-glow); } .sfk-pm__body { padding: clamp(22px, 3.4vw, 44px); display: flex; flex-direction: column; gap: 16px; min-width: 0; } .sfk-pm__body > * { opacity: 0; transform: translateY(18px); } .sfk-pm.is-open .sfk-pm__body > * { animation: sfkPmRise .7s cubic-bezier(.16,1,.3,1) forwards; animation-delay: calc(.18s + var(--s, 0) * .07s); } .sfk-pm__cat { margin: 0; font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; font-weight: 700; color: var(--sfk-red-hi); } .sfk-pm__title { margin: 0; font: 600 clamp(1.7rem, 3.4vw, 2.6rem)/1.05 'Cormorant Garamond', Georgia, serif; color: var(--sfk-text); letter-spacing: .005em; } .sfk-pm__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 12px; font-weight: 800; font-size: 1.5rem; color: var(--sfk-red-hi); } .sfk-pm__price .original-price { color: var(--sfk-muted); font-size: 1rem; text-decoration: line-through; font-weight: 600; } .sfk-pm__price .discount-badge { font-size: .7rem; padding: .3em .7em; border-radius: 99px; color: var(--sfk-btn-text); background: linear-gradient(180deg, var(--sfk-btn-top), var(--sfk-btn-bot)); } .sfk-pm__price small { color: var(--sfk-muted); font-weight: 600; font-size: .8rem; } .sfk-nutri { border: 1px solid var(--sfk-line); border-radius: 20px; padding: 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--sfk-surface) 85%, transparent), transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.07); } .sfk-nutri__head { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 14px; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--sfk-muted); } .sfk-nutri__main { display: grid; grid-template-columns: 128px 1fr; gap: 18px; align-items: center; } .sfk-ring { --p: 0; --c: 0; position: absolute; inset: 0; width: 128px; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(var(--sfk-m-protein) 0 calc(var(--p) * 1%), var(--sfk-m-carbs) 0 calc((var(--p) + var(--c)) * 1%), var(--sfk-m-fat) 0 100%); -webkit-mask: radial-gradient(circle, transparent 54%, #000 55%); mask: radial-gradient(circle, transparent 54%, #000 55%); transform: rotate(-90deg); animation: sfkRingIn 1.1s cubic-bezier(.16,1,.3,1) both .45s; } .sfk-ring-wrap { position: relative; width: 128px; height: 128px; } .sfk-ring-wrap__c { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; line-height: 1; } .sfk-ring-wrap__c b { display: block; font: 700 1.7rem/1 'Oswald', 'Inter', sans-serif; color: var(--sfk-text); } .sfk-ring-wrap__c span { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sfk-muted); margin-top: 4px; display: block; } .sfk-macros { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .sfk-macro__top { display: flex; justify-content: space-between; align-items: center; font-size: .85rem; font-weight: 600; margin-bottom: 6px; } .sfk-macro__top i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; background: var(--dot); box-shadow: 0 0 0 2px color-mix(in srgb, var(--dot) 30%, transparent); } .sfk-macro__top b { font-variant-numeric: tabular-nums; } .sfk-macro__bar { height: 8px; border-radius: 99px; overflow: hidden; background: color-mix(in srgb, var(--sfk-text) 10%, transparent); box-shadow: inset 0 1px 2px rgba(0,0,0,.35); } .sfk-macro__bar span { display: block; height: 100%; width: calc(var(--w) * 1%); border-radius: inherit; background: linear-gradient(90deg, var(--dot), color-mix(in srgb, var(--dot) 70%, #fff)); transform-origin: left; animation: sfkBar 1s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(.55s + var(--n) * .12s); } .sfk-nutri__desc { margin: 16px 0 0; color: var(--sfk-muted); font-size: .92rem; line-height: 1.6; } .sfk-nutri__benefit { margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; font-weight: 600; font-size: .88rem; color: var(--sfk-text); background: color-mix(in srgb, var(--sfk-red) 14%, transparent); border: 1px solid color-mix(in srgb, var(--sfk-red) 35%, transparent); } .sfk-pm__buy { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: auto; padding-top: 6px; } .sfk-qty { display: inline-flex; align-items: center; gap: 8px; } .sfk-qty output { min-width: 64px; text-align: center; font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums; } .sfk-qty .quantity-btn { width: 40px; height: 40px; font-size: 1.2rem; } .sfk-pm__buy .sfk-btn { flex: 1 1 200px; } .sfk-pm__note { font-size: .78rem; color: var(--sfk-muted); } @keyframes sfkPmRise { to { opacity: 1; transform: none; } } @keyframes sfkPmPulse { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.05); opacity: .6; } } @keyframes sfkBar { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes sfkRingIn { from { clip-path: inset(0 100% 0 0); opacity: 0; } to { clip-path: inset(0 0 0 0); opacity: 1; } } @media (max-width: 820px) { .sfk-pm { padding: 0; align-items: end; } .sfk-pm__sheet { grid-template-columns: 1fr; width: 100%; max-height: 94svh; border-radius: 26px 26px 0 0; border-bottom: 0; } .sfk-pm__media { min-height: 0; height: 36svh; border-radius: 26px 26px 0 0; } .sfk-pm__img { max-height: 36svh; } .sfk-nutri__main { grid-template-columns: 104px 1fr; gap: 14px; } .sfk-ring, .sfk-ring-wrap { width: 104px; height: 104px; } .sfk-pm__buy { position: sticky; bottom: 0; margin: 0 -4px; padding: 12px 4px calc(12px + env(safe-area-inset-bottom)); background: var(--sfk-surface); border-top: 1px solid var(--sfk-line); box-shadow: 0 -14px 24px -12px var(--sfk-shadow); } } /* ---------- 6. LOGOUT CONFIRM DIALOG -------------------------------------- */ .sfk-dlg { position: fixed; inset: 0; z-index: 1000004; display: grid; place-items: center; padding: 20px; visibility: hidden; font-family: 'Inter', 'Poppins', system-ui, sans-serif; } .sfk-dlg.is-open { visibility: visible; } .sfk-dlg__backdrop { position: absolute; inset: 0; background: rgba(6,3,5,.7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .3s ease; } .sfk-dlg.is-open .sfk-dlg__backdrop { opacity: 1; } .sfk-dlg__card { position: relative; width: min(420px, 100%); padding: 28px 24px 22px; text-align: center; border-radius: 24px; color: var(--sfk-text); border: 1px solid var(--sfk-glass-edge); background: linear-gradient(160deg, var(--sfk-surface-2), var(--sfk-surface)); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 30px 70px -10px rgba(0,0,0,.65), 0 0 0 1px rgba(220,20,60,.2); opacity: 0; transform: translateY(18px) scale(.95); transition: opacity .3s ease, transform .45s cubic-bezier(.16,1,.3,1); } .sfk-dlg.is-open .sfk-dlg__card { opacity: 1; transform: none; } .sfk-dlg__icon { width: 56px; height: 56px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 18px; color: var(--sfk-btn-text); background: linear-gradient(180deg, var(--sfk-btn-top), var(--sfk-btn-bot)); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 0 var(--sfk-btn-lip), 0 14px 26px -8px var(--sfk-glow); } .sfk-dlg__title { margin: 0 0 8px; font: 600 1.7rem/1.1 'Cormorant Garamond', Georgia, serif; } .sfk-dlg__text { margin: 0 0 20px; color: var(--sfk-muted); font-size: .92rem; line-height: 1.55; } .sfk-dlg__actions { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; } /* ---------- 7. ANNOUNCEMENT TICKER --------------------------------------- */ html[data-sfk-theme] .gs-ticker-pro, html[data-sfk-theme] .sfk-ticker { position: relative; overflow: hidden; margin: 0 !important; padding: 0 !important; z-index: 1; background: linear-gradient(180deg, var(--sfk-ticker-bg-1), var(--sfk-ticker-bg-2)) !important; border: 0 !important; border-bottom: 1px solid var(--sfk-red-deep) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -3px 6px rgba(0,0,0,.25), 0 6px 14px -8px var(--sfk-shadow) !important; font-family: 'Inter', 'Poppins', system-ui, sans-serif; } html[data-sfk-theme="day"] .gs-ticker-pro, html[data-sfk-theme="day"] .sfk-ticker { box-shadow: inset 0 1px 0 #fff, inset 0 -3px 6px rgba(120,70,50,.12), 0 6px 14px -8px var(--sfk-shadow) !important; } html[data-sfk-theme] .gs-ticker-pro::before, html[data-sfk-theme] .gs-ticker-pro::after { display: none !important; } html[data-sfk-theme] .sfk-ticker::before { /* crimson edge fades so text never collides with the button */ display: block !important; content: ""; position: absolute; z-index: 3; top: 0; bottom: 0; left: 0; width: 28px; pointer-events: none; animation: none !important; background: linear-gradient(90deg, var(--sfk-ticker-bg-1), transparent); transform: none !important; height: 100% !important; } html[data-sfk-theme] .sfk-ticker::after { display: block !important; content: ""; position: absolute; z-index: 3; top: 0; bottom: 0; right: 0; width: 70px; pointer-events: none; animation: none !important; left: auto !important; background: linear-gradient(270deg, var(--sfk-ticker-bg-1) 35%, transparent); transform: none !important; height: 100% !important; } html[data-sfk-theme] .sfk-ticker .ticker-wrapper { display: flex; width: max-content; position: relative; z-index: 2; animation: sfkTicker var(--sfk-ticker-speed, 38s) linear infinite !important; will-change: transform; } html[data-sfk-theme] .sfk-ticker .ticker-wrapper:hover, html[data-sfk-theme] .sfk-ticker .ticker-wrapper:focus-within, html[data-sfk-theme] .sfk-ticker.is-paused .ticker-wrapper { animation-play-state: paused !important; } html[data-sfk-theme] .sfk-ticker .ticker-content { display: flex !important; align-items: center; justify-content: space-around; gap: 0 !important; flex: none; min-width: 100vw; margin: 0 !important; padding: 0 !important; list-style: none; white-space: nowrap; } html[data-sfk-theme] .sfk-ticker .ticker-content li { display: inline-flex; align-items: center; gap: 14px; padding: 10px 28px !important; font: 700 .8rem/1.2 'Inter', 'Poppins', sans-serif !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: var(--sfk-ticker-text) !important; background: none !important; -webkit-text-fill-color: currentColor !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; text-shadow: 0 1px 0 rgba(0,0,0,.4) !important; animation: none !important; transform: none !important; } html[data-sfk-theme="day"] .sfk-ticker .ticker-content li { text-shadow: 0 1px 0 rgba(255,255,255,.8) !important; } html[data-sfk-theme] .sfk-ticker .ticker-content li::before { content: ""; width: 9px; height: 9px; transform: rotate(45deg) !important; flex: none; background: linear-gradient(135deg, var(--sfk-btn-top), var(--sfk-btn-bot)); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 0 8px var(--sfk-glow); } .sfk-ticker__toggle { position: absolute; z-index: 4; top: 50%; right: 8px; width: 30px; height: 30px; margin-top: -15px; padding: 0; border-radius: 50%; cursor: pointer; border: 1px solid var(--sfk-btn2-edge); color: var(--sfk-btn2-text); background: linear-gradient(180deg, var(--sfk-btn2-top), var(--sfk-btn2-bot)); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 0 var(--sfk-btn2-lip), 0 6px 10px -4px var(--sfk-shadow); display: grid; place-items: center; } .sfk-ticker__toggle:active { transform: translateY(1px); } .sfk-ticker__toggle:focus-visible { outline: 2px solid var(--sfk-red); outline-offset: 2px; } .sfk-ticker__ico { width: 10px; height: 10px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; box-sizing: border-box; } .sfk-ticker.is-paused .sfk-ticker__ico { border: 0; width: 0; height: 0; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 2px; } @keyframes sfkTicker { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } /* ---------- 8. RESPONSIVE + MOTION --------------------------------------- */ @media (max-width: 768px) { .sfk-login-link__long { display: none; } .sfk-login-link__short { display: inline; } .sfk-logout-btn__label { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); } .sfk-logout-btn { padding: .55em .7em; } .gs-header-right { gap: 8px; } .sfk-tools { gap: 6px; } html[data-sfk-theme] .gs-logo img { height: 52px; } html[data-sfk-theme] .sfk-ticker .ticker-content li { font-size: .7rem !important; padding: 9px 20px !important; } html[data-sfk-theme] .product-item:hover, html[data-sfk-theme] .category-item:hover, html[data-sfk-theme] .shop-card:hover { --lift: -3px; } html[data-sfk-theme] .product-image, html[data-sfk-theme] .category-item img, html[data-sfk-theme] .product-item .product-details { transform: none; } html[data-sfk-theme] .product-item, html[data-sfk-theme] .category-item, html[data-sfk-theme] .shop-card { transform-style: flat; } } @media (hover: none), (pointer: coarse) { html[data-sfk-theme] .product-item, html[data-sfk-theme] .category-item, html[data-sfk-theme] .shop-card { transform: translate3d(0, var(--lift), 0); } html[data-sfk-theme] .product-item:hover, html[data-sfk-theme] .category-item:hover, html[data-sfk-theme] .shop-card:hover { transform: translate3d(0, var(--lift), 0); } } @media (prefers-reduced-motion: reduce) { html[data-sfk-theme] .sfk-ticker .ticker-wrapper { animation: none !important; width: auto; flex-wrap: wrap; } html[data-sfk-theme] .sfk-ticker .ticker-content[aria-hidden="true"] { display: none !important; } .sfk-ticker__toggle { display: none; } .sfk-pm__sheet, .sfk-pm__backdrop, .sfk-dlg__card, .sfk-dlg__backdrop { transition-duration: .01s !important; } .sfk-pm.is-open .sfk-pm__body > * { animation-duration: .01s !important; animation-delay: 0s !important; } .sfk-macro__bar span, .sfk-ring, .sfk-pm__halo { animation: none !important; } .sfk-btn, .sfk-btn::after { transition: none !important; } html[data-sfk-theme] .product-item, html[data-sfk-theme] .category-item, html[data-sfk-theme] .shop-card { transition: none; --rx: 0deg !important; --ry: 0deg !important; } } /* ---------- AUDIT FIX: legacy shop/category card internals ----------------- The original shop template referenced seafood.png/mutton.png/chicken.png/ frozen.png, which are absent from the supplied working-theme archive. The audited page-shop.php now uses the existing hero_*.png photos. These rules keep legacy inner elements aligned with the active Night/Day theme. */ html[data-sfk-theme] .shop-grid .shop-card.category-item { padding: 0; overflow: hidden; text-align: center; background: linear-gradient(160deg, var(--sfk-surface-2), var(--sfk-surface) 68%); color: var(--sfk-text); } html[data-sfk-theme] .shop-grid .shop-card.category-item img { display: block; width: 100%; height: clamp(170px, 22vw, 240px); object-fit: cover; object-position: center; background: var(--sfk-bg-2); border: 0; } html[data-sfk-theme] .shop-grid .shop-card.category-item h3 { margin: 0; padding: 18px 14px 20px; color: var(--sfk-text); background: linear-gradient(180deg, var(--sfk-surface-2), var(--sfk-surface)); font-weight: 700; } html[data-sfk-theme="day"] .shop-grid .shop-card.category-item h3 { color: var(--sfk-text); } html[data-sfk-theme] .product-item .product-details { color: var(--sfk-text); background: transparent; } html[data-sfk-theme] .product-item .quantity-controls, html[data-sfk-theme] .product-item .product-price { color: var(--sfk-text); } /* ---------- SFK MOBILE POLISH: compact cards, animated categories, header ---------- */ html[data-sfk-theme] .gs-header{background:rgba(10,7,9,.94)!important;border-bottom:1px solid rgba(255,60,90,.28)!important;color:#f8f0ea!important} html[data-sfk-theme] .gs-header-inner{gap:12px;min-height:68px;padding:6px 14px!important} html[data-sfk-theme] .gs-logo img{height:48px!important;width:auto;max-width:112px;object-fit:contain} html[data-sfk-theme] .gs-nav{flex:1;min-width:0} html[data-sfk-theme] .gs-menu{display:flex;align-items:center;justify-content:center;gap:clamp(2px,1vw,12px);list-style:none;margin:0;padding:0;flex-wrap:wrap} html[data-sfk-theme] .gs-menu li{margin:0;padding:0} html[data-sfk-theme] .gs-menu li a{color:var(--sfk-text)!important;font-size:clamp(10px,.85vw,13px);padding:8px 9px;text-decoration:none;white-space:nowrap} html[data-sfk-theme] .gs-menu li a:hover{color:var(--sfk-red-hi)!important} html[data-sfk-theme] .gs-header-right{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-shrink:0} .sfk-header-clock{display:inline-flex;align-items:center;gap:6px;padding:7px 9px;border:1px solid rgba(255,70,100,.34);border-radius:999px;background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.015));box-shadow:0 0 14px rgba(220,20,60,.12);font:700 11px/1.1 system-ui,sans-serif;color:#fff0f1;white-space:nowrap;font-variant-numeric:tabular-nums} .sfk-header-clock__dot{width:6px;height:6px;border-radius:50%;background:#ff3459;box-shadow:0 0 8px #ff3459;animation:sfkClockPulse 1.8s ease-in-out infinite} .sfk-header-clock__label{color:#ff8b9e;letter-spacing:.08em;font-size:9px} @keyframes sfkClockPulse{50%{opacity:.35;box-shadow:0 0 2px #ff3459}} .sfk-mobile-menu-toggle{display:none} /* Product cards: trim oversized vertical rhythm without hiding controls. */ html[data-sfk-theme] .product-item{padding:9px!important;border-radius:17px!important;margin-bottom:13px!important} html[data-sfk-theme] .product-item .product-image{height:clamp(112px,25vw,185px)!important;min-height:0!important;overflow:hidden;border-radius:12px!important} html[data-sfk-theme] .product-item .product-image img{width:100%;height:100%!important;object-fit:cover!important;display:block} html[data-sfk-theme] .product-item .product-details{padding:8px 3px 2px!important;gap:5px!important} html[data-sfk-theme] .product-item .product-details h3,html[data-sfk-theme] .product-item h3{margin:3px 0!important;font-size:clamp(13px,1.2vw,16px)!important;line-height:1.3!important} html[data-sfk-theme] .product-item .price,html[data-sfk-theme] .product-item .product-price{margin:3px 0!important;font-size:14px!important} html[data-sfk-theme] .product-item .quantity-controls,html[data-sfk-theme] .product-item .qty-controls{margin:5px auto!important;gap:6px!important} html[data-sfk-theme] .product-item .add-to-cart{min-height:37px!important;padding:9px 12px!important;margin-top:5px!important;font-size:10px!important;letter-spacing:.08em} /* Category tiles: no white slab, with a moving red specular shine. */ html[data-sfk-theme] .shop-categories,html[data-sfk-theme] .categories-grid,html[data-sfk-theme] .shop-category-section,html[data-sfk-theme] .category-grid{background:transparent!important} html[data-sfk-theme] .category-item,html[data-sfk-theme] .shop-card.category-item{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(145deg,#21161b 0%,#100b0e 68%,#240812 100%)!important;border:1px solid rgba(255,70,100,.42)!important;box-shadow:0 10px 24px rgba(0,0,0,.35),0 0 0 1px rgba(255,20,60,.06),inset 0 1px rgba(255,255,255,.08)!important} html[data-sfk-theme] .category-item:before,html[data-sfk-theme] .shop-card.category-item:before{content:"";position:absolute;z-index:3;inset:-40% auto -40% -70%;width:42%;pointer-events:none;background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.04) 25%,rgba(255,65,95,.32) 48%,rgba(255,255,255,.16) 53%,transparent 75%);transform:skewX(-18deg);animation:sfkCategoryShine 5.8s ease-in-out infinite} html[data-sfk-theme] .category-item:after{content:"";position:absolute;z-index:2;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,70,100,.12)} html[data-sfk-theme] .category-item img{height:clamp(105px,17vw,175px)!important;object-fit:cover!important} html[data-sfk-theme] .category-item h3{position:relative;z-index:4;background:linear-gradient(180deg,#20151a,#100b0e)!important;color:#fff0f0!important;margin:0!important;padding:12px 8px!important;text-decoration:none!important} @keyframes sfkCategoryShine{0%,15%{left:-75%;opacity:0}28%{opacity:1}55%{left:135%;opacity:.8}56%,100%{left:135%;opacity:0}} /* Checkout: unify white form surfaces with the selected theme and improve contrast. */ html[data-sfk-theme="night"] #checkout-form,html[data-sfk-theme="night"] .checkout-form,html[data-sfk-theme="night"] .checkout-container{background:linear-gradient(145deg,#1b1217,#100b0e)!important;color:#f8f0ea!important;border:1px solid rgba(255,70,100,.22)!important;border-radius:18px!important;box-shadow:0 14px 35px rgba(0,0,0,.28)!important;padding:clamp(14px,3vw,24px)!important} html[data-sfk-theme="night"] #checkout-form input:not([type=radio]):not([type=checkbox]),html[data-sfk-theme="night"] #checkout-form select,html[data-sfk-theme="night"] #checkout-form textarea{background:#21171c!important;color:#fff!important;border:1px solid #49313a!important;min-height:43px;padding:10px 12px!important} html[data-sfk-theme="night"] #checkout-form input::placeholder,html[data-sfk-theme="night"] #checkout-form textarea::placeholder{color:#b9a8af!important;opacity:1} html[data-sfk-theme="night"] #checkout-form label,html[data-sfk-theme="night"] #checkout-form legend{color:#f4dfe5!important;font-weight:600} html[data-sfk-theme="night"] .bill-summary,html[data-sfk-theme="night"] .checkout-bill-table{background:#171014!important;color:#fff!important;border:1px solid #38242c!important;border-radius:14px;overflow:hidden} html[data-sfk-theme="night"] .checkout-bill-table th{background:#28151d!important;color:#ffdce3!important} html[data-sfk-theme="night"] .checkout-bill-table td{background:#171014!important;color:#f8edf0!important} html[data-sfk-theme="night"] .gs-cart-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:10px!important;border-radius:12px!important;margin-bottom:8px!important} @media(max-width:760px){ html[data-sfk-theme] .gs-header{position:sticky;top:0} html[data-sfk-theme] .gs-header-inner{min-height:58px;padding:5px 9px!important;gap:7px} html[data-sfk-theme] .gs-logo img{height:42px!important;max-width:82px} .sfk-mobile-menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:4px;align-items:center;flex:0 0 34px;width:34px;height:34px;padding:6px;border-radius:9px;border:1px solid rgba(255,70,100,.35);background:#1b1116;cursor:pointer} .sfk-mobile-menu-toggle span{display:block;width:17px;height:2px;background:#fff;border-radius:2px;transition:transform .2s,opacity .2s} .sfk-mobile-menu-toggle[aria-expanded=true] span:first-child{transform:translateY(6px) rotate(45deg)}.sfk-mobile-menu-toggle[aria-expanded=true] span:nth-child(2){opacity:0}.sfk-mobile-menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-6px) rotate(-45deg)} html[data-sfk-theme] .gs-nav{display:none;position:absolute;top:100%;left:8px;right:8px;z-index:10000;padding:10px!important;border:1px solid rgba(255,70,100,.4);border-radius:14px;background:rgba(16,10,13,.98)!important;box-shadow:0 15px 35px rgba(0,0,0,.55)} html[data-sfk-theme] .gs-nav.sfk-nav-open{display:block} html[data-sfk-theme] .gs-menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px} html[data-sfk-theme] .gs-menu li a{display:block;padding:11px 10px;font-size:11px;border-radius:8px;white-space:normal} html[data-sfk-theme] .gs-menu li a:hover{background:rgba(220,20,60,.12)} html[data-sfk-theme] .gs-header-right{gap:5px} .sfk-header-clock{gap:4px;padding:6px 7px;font-size:9px}.sfk-header-clock__label{font-size:8px} html[data-sfk-theme] .sfk-tools .sfk-btn{padding:7px!important;font-size:10px!important} html[data-sfk-theme] .product-item{padding:8px!important;margin-bottom:10px!important} html[data-sfk-theme] .product-item .product-image{height:clamp(105px,31vw,155px)!important} html[data-sfk-theme] .category-item img{height:clamp(95px,24vw,135px)!important} html[data-sfk-theme] #checkout-form,html[data-sfk-theme] .checkout-form,html[data-sfk-theme] .checkout-container{padding:13px!important} } @media(prefers-reduced-motion:reduce){.sfk-header-clock__dot,html[data-sfk-theme] .category-item:before{animation:none!important}html[data-sfk-theme] .category-item:before{display:none}}