@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap'); :root{ /* Rebranded from orange to the real brand blue — variable names kept as --orange/-dark/-light (hundreds of usages throughout this theme) since this is a value swap, not a rename; renaming would touch every rule for no visible benefit. -dark/-light are derived to match the same relationship the orange shades had (dark = hover/richer, light = pale tinted background for badges/icon circles), not just linear lightness shifts, since blue's much darker base lightness (19% vs orange's 52%) made proportional deltas produce near-black/mid-blue instead of a usable hover/tint pair. */ --orange:#14274E; --orange-dark:#0b1a38; --orange-light:#e9edf7; --ink:#14141c; --body:#54545f; --muted:#8b8b96; --line:#ececf0; --bg:#f6f6f8; --white:#fff; --red:#e63a2e; --gold:#ffa800; --navy:#0d0e14; --navy-2:#181a24; --radius:14px; --radius-sm:8px; --shadow:0 10px 30px rgba(20,20,28,.08); --shadow-lg:0 20px 50px rgba(20,20,28,.16); } *{box-sizing:border-box;margin:0;padding:0} body{font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--body);background:var(--bg);line-height:1.55;font-size:15px} h1,h2,h3,h4,.logo,.hero-sub,.tab,.btn,.add-cart,.finder-label{font-family:'Poppins','Inter',sans-serif} a{text-decoration:none;color:inherit} img{max-width:100%;display:block} .container{max-width:1320px;margin:0 auto;padding:0 20px} svg{display:block} /* ===== Page loader ===== Markup: partials-free, injected directly at the top of layout.blade.php's so it's the very first thing painted — covers the page while images/ fonts/the header's own queries finish, instead of a blank white flash. Faded out by a small inline script on window 'load' (adds .is-loaded). */ #creckkLoader{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;transition:opacity .45s ease,visibility .45s ease} #creckkLoader.is-loaded{opacity:0;visibility:hidden;pointer-events:none} .creckk-loader-logo{width:240px;height:auto;animation:creckkLoaderPulse 1.7s ease-in-out infinite} .creckk-loader-bar{position:relative;display:block;width:120px;height:4px;border-radius:4px;background:var(--line);overflow:hidden} .creckk-loader-bar span{position:absolute;top:0;left:0;height:100%;width:40%;border-radius:4px;background:var(--orange);animation:creckkLoaderSweep 1.15s cubic-bezier(.4,0,.2,1) infinite} @keyframes creckkLoaderPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.94)}} @keyframes creckkLoaderSweep{0%{left:-40%}100%{left:100%}} @media(max-width:760px){ .creckk-loader-logo{width:170px} .creckk-loader-bar{width:96px} } /* topbar */ .topbar{background:var(--navy);color:#c7c8d4;font-size:12.5px} .topbar-inner{display:flex;justify-content:space-between;align-items:center;height:38px} /* .offer sits on the dark navy topbar — var(--orange) is now a dark navy blue itself (see :root comment above), so it reads as near-invisible dark-on-dark here; the light tint variant keeps the same brand hue but is actually visible. */ .offer strong{color:var(--orange-light);font-weight:700} .offer a{color:#fff;text-decoration:underline;font-weight:700;margin-left:4px} #creckkOfferTextInner{transition:opacity .25s} /* If the offer text is off, .top-links is the only .topbar-inner child left — space-between would otherwise drop it to the start (left) edge instead of its usual right-aligned spot. */ .top-links{margin-left:auto} .top-links a{margin-left:22px;color:#9fa0ae;font-weight:500;transition:color .15s} .top-links a:hover{color:#fff} /* header */ .header{background:var(--white);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50} .header-inner{display:flex;align-items:center;gap:26px;height:64px} .logo{font-size:28px;font-weight:800;letter-spacing:-.5px;color:var(--ink);line-height:1;display:flex;flex-direction:column} .logo::after{content:"Auto Accessories";font-family:'Inter',sans-serif;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--orange);margin-top:3px} .logo.light{color:#fff} .logo.light::after{color:var(--orange)} .searchbar{position:relative;flex:1;display:flex;align-items:stretch;height:36px;border:2px solid var(--ink);border-radius:10px;max-width:580px;transition:border-color .15s} .searchbar:focus-within{border-color:var(--orange)} .search-cat{position:relative;display:flex;align-items:center;gap:6px;background:#f6f6f8;padding:0 16px;font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;border-right:1px solid var(--line);border-top-left-radius:8px;border-bottom-left-radius:8px;cursor:pointer} .searchbar input{flex:1;min-width:0;border:none;outline:none;padding:0 16px;font-size:14px;font-family:'Inter',sans-serif} /* Clear (×) button — own flex slot between the input and Search button, only shown once the user has typed something (see main.js). */ .search-clear{display:none;align-items:center;justify-content:center;flex-shrink:0;width:34px;border:none;background:none;color:var(--muted);cursor:pointer} .search-clear:hover{color:var(--ink)} .search-clear.is-visible{display:flex} .search-btn{background:var(--orange);color:#fff;border:none;padding:0 22px;font-weight:700;font-size:12px;letter-spacing:.5px;text-transform:uppercase;cursor:pointer;transition:background .15s;border-top-right-radius:8px;border-bottom-right-radius:8px;flex-shrink:0} .search-btn:hover{background:var(--orange-dark)} /* Search suggestions dropdown — creckk-theme's own custom dropdown (see main.js), not jQuery UI's autocomplete widget (whose stock renderer can't show a thumbnail per row). Appended to and positioned via inline top/left/width computed from #itemSearch's real screen position (main.js), NOT position:absolute against .searchbar — .searchbar lives inside .header-inner, which gets a deliberate overflow-x:hidden guard on mobile (see header.blade.php's inline