/* ========================================================================== Hussain Sir Packaging — Design Tokens & Base Styles Palette, type, and the "hazard stripe" signature element used sitewide. Tailwind (CDN) handles layout utilities; this file holds brand identity. ========================================================================== */ :root { /* Color */ --hsp-navy: #0F2540; /* primary — trust, industrial */ --hsp-navy-deep: #0A1B30; /* header/footer background */ --hsp-cream: #F7F4EE; /* page background */ --hsp-charcoal: #1C1F24; /* body text */ --hsp-amber: #E8871E; /* primary CTA — order/cart actions */ --hsp-amber-dark: #C96F12; --hsp-protect-blue: #1E5AA8; /* secondary accent — echoes Floor Guard blue */ --hsp-caution: #F2B705; /* signature stripe accent, used sparingly */ --hsp-line: #C9C2AC; /* hairline borders on cream background — darkened for visibility */ --hsp-line-strong: #A69C7F; /* borders on inputs, search box — needs to read clearly */ /* Type */ --font-display: 'Barlow Condensed', sans-serif; --font-body: 'Inter', sans-serif; --font-mono: 'IBM Plex Mono', monospace; /* Text/icon color that needs to flip for dark mode (headings, prices, icon strokes). Equals navy in light mode so nothing visually changes there; only the dark theme below redefines it. Backgrounds that use --hsp-navy directly (buttons, logo mark, footer) are unaffected. */ --hsp-text-strong: var(--hsp-navy); } /* ========================================================================== Dark mode — toggled by adding data-theme="dark" to (see assets/js/site-utils.js). Only variables + the handful of fixed Tailwind utility colors used sitewide (bg-white, text-gray-400/500/600/ 700, hover:bg-gray-100) need redefining; every brand color already runs through the CSS variables above and adapts automatically. ========================================================================== */ html[data-theme="dark"] { --hsp-cream: #0B141F; --hsp-charcoal: #E7ECF2; --hsp-line: #26333F; --hsp-line-strong: #3A4C5C; --hsp-text-strong: #E4ECF5; } html[data-theme="dark"] .bg-white { background-color: #101B29 !important; } html[data-theme="dark"] .text-gray-400 { color: #7C8CA0 !important; } html[data-theme="dark"] .text-gray-500 { color: #93A2B5 !important; } html[data-theme="dark"] .text-gray-600 { color: #A9B7C8 !important; } html[data-theme="dark"] .text-gray-700 { color: #B9C6D4 !important; } html[data-theme="dark"] .hover\:bg-gray-100:hover { background-color: rgba(255, 255, 255, 0.08) !important; } html[data-theme="dark"] .hover\:bg-gray-50:hover { background-color: rgba(255, 255, 255, 0.06) !important; } html[data-theme="dark"] .shadow-lg { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55); } html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: #101B29 !important; color: var(--hsp-charcoal) !important; } html[data-theme="dark"] .hsp-btn-outline { border-color: var(--hsp-text-strong); color: var(--hsp-text-strong); } html[data-theme="dark"] .hsp-btn-outline:hover { background: var(--hsp-text-strong); color: var(--hsp-navy-deep); } html[data-theme="dark"] .hsp-search-group-label { color: #7C8CA0; } html[data-theme="dark"] .hsp-search-empty { color: #93A2B5; } html[data-theme="dark"] .hsp-img-placeholder { background: linear-gradient(135deg, #16222E 0%, #1C2A38 100%); color: #5E6E7F; } html[data-theme="dark"] .hsp-gallery-arrow { background: rgba(16, 27, 41, 0.85); border-color: var(--hsp-line-strong); } html[data-theme="dark"] .hsp-gallery-arrow:hover { background: rgba(16, 27, 41, 1); } body, .bg-white, .hsp-img-placeholder, input, select, textarea { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } @media (prefers-reduced-motion: reduce) { body, .bg-white, .hsp-img-placeholder, input, select, textarea { transition: none; } } /* Phones held sideways (landscape) have very little vertical room — trim the hero and sticky header so the page doesn't feel like it's mostly header before any real content shows. */ @media (orientation: landscape) and (max-height: 500px) { #hsp-hero-slides { min-height: 140px !important; } } body { background: var(--hsp-cream); color: var(--hsp-charcoal); font-family: var(--font-body); } .hsp-display { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.01em; } .hsp-mono { font-family: var(--font-mono); letter-spacing: 0.03em; } /* Signature element: diagonal hazard stripe, used as a thin section divider and behind primary CTAs — a direct nod to the tape/protection product line this business sells (masking tape, hazard tape, floor guard tape). */ .hsp-hazard-stripe { height: 6px; background: repeating-linear-gradient( -45deg, var(--hsp-caution), var(--hsp-caution) 10px, var(--hsp-navy) 10px, var(--hsp-navy) 20px ); } .hsp-hazard-corner { position: absolute; top: 0; right: 0; width: 64px; height: 64px; background: repeating-linear-gradient( -45deg, var(--hsp-caution), var(--hsp-caution) 8px, var(--hsp-navy) 8px, var(--hsp-navy) 16px ); clip-path: polygon(100% 0, 0 0, 100% 100%); } /* Buttons */ .hsp-btn-primary { background: var(--hsp-amber); color: #fff; font-weight: 600; transition: background-color 0.15s ease, transform 0.1s ease; } .hsp-btn-primary:hover { background: var(--hsp-amber-dark); } .hsp-btn-primary:active { transform: scale(0.98); } .hsp-btn-outline { border: 1.5px solid var(--hsp-navy); color: var(--hsp-navy); font-weight: 600; transition: background-color 0.15s ease, color 0.15s ease; } .hsp-btn-outline:hover { background: var(--hsp-navy); color: #fff; } /* Category code chip, e.g. CAT-01 */ .hsp-code-chip { font-family: var(--font-mono); font-size: 0.7rem; color: var(--hsp-protect-blue); border: 1px solid var(--hsp-protect-blue); padding: 1px 8px; border-radius: 999px; display: inline-block; } /* Search dropdown */ .hsp-search-row { display: block; padding: 8px 14px; font-size: 0.9rem; color: var(--hsp-charcoal); } .hsp-search-row:hover { background: var(--hsp-cream); } .hsp-search-group-label { font-family: var(--font-mono); font-size: 0.65rem; text-transform: uppercase; color: #8a8a8a; padding: 8px 14px 2px; } .hsp-search-empty { padding: 14px; font-size: 0.85rem; color: #6b6b6b; } #hsp-mobile-search-results:not(.hidden) { padding: 6px 0 24px; } #hsp-mobile-search-results .hsp-search-row { padding: 12px 16px; font-size: 1rem; } .hsp-link { color: var(--hsp-protect-blue); text-decoration: underline; } .hidden { display: none; } /* Category / product image placeholder — swapped for real photos later */ .hsp-img-placeholder { background: linear-gradient(135deg, #E9E4D8 0%, #DED7C6 100%); display: flex; align-items: center; justify-content: center; color: #9a9382; } /* Hero banner slider */ .hsp-slide { transition: opacity 0.6s ease; } /* Cart badge */ [data-cart-count] { display: none; align-items: center; justify-content: center; } /* Reduced motion respect */ @media (prefers-reduced-motion: reduce) { .hsp-slide, .hsp-btn-primary, .hsp-btn-outline { transition: none; } } /* ========================================================================== Visibility fix — search box, form fields and their containing boxes were too close in tone to the cream background. Force a clearly visible border + a focus ring so customers can always see what they're typing into and where one field/card ends and the next begins. ========================================================================== */ input, select, textarea { border-color: var(--hsp-line-strong) !important; border-width: 1.5px; background: #fff; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--hsp-amber) !important; box-shadow: 0 0 0 3px rgba(232, 135, 30, 0.18); } /* Header search bar wrapper (the div around the search input, not the input itself) */ header .rounded-full:has(#hsp-search-input), header .rounded-full:has(#hsp-form-search) { border-color: var(--hsp-line-strong) !important; border-width: 1.5px; } /* ========================================================================== Product image gallery — swipe on mobile, arrows + thumbnails on desktop. Used on the product detail page (product/product.html). ========================================================================== */ #hsp-gallery-track { display: flex; height: 100%; will-change: transform; } .hsp-gallery-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); border: 1px solid var(--hsp-line-strong); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(15, 37, 64, 0.18); cursor: pointer; transition: background-color 0.15s ease, transform 0.15s ease; z-index: 10; } .hsp-gallery-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.07); } .hsp-gallery-arrow:active { transform: translateY(-50%) scale(0.96); } .hsp-gallery-arrow.hsp-gallery-prev { left: 12px; } .hsp-gallery-arrow.hsp-gallery-next { right: 12px; } .hsp-gallery-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--hsp-line-strong); opacity: 0.55; border: none; padding: 0; transition: opacity 0.15s ease, width 0.15s ease, background-color 0.15s ease; } .hsp-gallery-dot.active { opacity: 1; background: var(--hsp-amber); width: 18px; } .hsp-gallery-thumb { opacity: 0.6; transition: opacity 0.15s ease, border-color 0.15s ease; cursor: pointer; border-width: 1.5px; padding: 0; background: none; } .hsp-gallery-thumb.active, .hsp-gallery-thumb:hover { opacity: 1; border-color: var(--hsp-amber) !important; border-width: 2px; } @media (prefers-reduced-motion: reduce) { #hsp-gallery-track { transition: none !important; } .hsp-gallery-arrow, .hsp-gallery-dot, .hsp-gallery-thumb { transition: none; } } /* ========================================================================== Product video slide — single symbolic play/pause button, no native browser control bar, no third-party branding of any kind. ========================================================================== */ .hsp-video-toggle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; border-radius: 999px; background: rgba(15, 37, 64, 0.72); color: #fff; display: flex; align-items: center; justify-content: center; border: 2px solid rgba(255, 255, 255, 0.85); cursor: pointer; transition: background-color 0.15s ease, transform 0.15s ease, opacity 0.2s ease; z-index: 5; } .hsp-video-toggle:hover { background: rgba(15, 37, 64, 0.9); transform: translate(-50%, -50%) scale(1.06); } .hsp-video-toggle svg { margin-left: 2px; } /* optical centering for the play triangle */ .hsp-video-playing .hsp-video-toggle { width: 44px; height: 44px; top: auto; left: auto; bottom: 14px; right: 14px; transform: none; opacity: 0; } .hsp-video-playing .hsp-video-toggle svg { margin-left: 0; } .hsp-video-playing:hover .hsp-video-toggle, .hsp-video-playing .hsp-video-toggle:focus { opacity: 1; } .hsp-thumb-play-badge { position: absolute; bottom: 4px; right: 4px; width: 20px; height: 20px; border-radius: 999px; background: rgba(15, 37, 64, 0.8); color: #fff; display: flex; align-items: center; justify-content: center; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .hsp-video-toggle { transition: none; } }