/* ============================================================ GL-CHROME — single source of truth for site header & footer (nav, logo, navbar search, categories dropdown, theme toggle, brandbar, footer). Loaded LAST in on every page. Edit HERE, nowhere else. Cache-bust via ?v= on the link tags. ============================================================ */ /* ---- NAVIGATION ---- */ nav { background: var(--bg-nav); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; align-items: center; gap: 1rem; flex-wrap: nowrap; padding: 0 clamp(0.9rem, 2.5vw, 2rem); position: sticky; top: 0; z-index: 100; max-width: 100%; border-bottom: 1px solid var(--border-color); box-shadow: 0 4px 20px rgba(0,0,0,0.02); transition: background 0.3s ease, border-color 0.3s ease; } .nav-logo { line-height: 0; flex: 0 0 auto; } .nav-logo img { height: 46px; width: auto; max-width: 150px; object-fit: contain; display: block; } .nav-right { display: flex; align-items: center; gap: 0.9rem; margin-left: auto; flex: 0 0 auto; } .nav-links { display: flex; gap: 1.15rem; list-style: none; align-items: center; margin: 0; padding: 0; } .nav-links a { color: var(--nav-link); font-size: 0.95rem; font-weight: 500; text-decoration: none; transition: color 0.2s; } .nav-links a:hover { color: var(--primary-yellow); } .nav-links a.active { color: var(--primary-yellow); font-weight: 700; } .nav-cta { background: var(--nav-cta-bg); color: var(--nav-cta-text); font-size: 0.95rem; font-weight: 600; padding: 10px 20px; border-radius: 50px; text-decoration: none; transition: transform 0.2s, background 0.2s; white-space: nowrap; } .nav-cta:hover { transform: translateY(-2px); } /* ---- Unified navbar search (compact, on every page) ---- */ .nav-search { display: flex; align-items: center; flex: 1 1 180px; min-width: 0; max-width: 460px; margin: 0; background: var(--bg-card); border: 1.5px solid var(--border-color); border-radius: 50px; overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s; } .nav-search:focus-within { border-color: var(--primary-yellow); box-shadow: 0 0 0 3px rgba(255,193,7,0.18); } .nav-search input { flex: 1; min-width: 0; width: 100%; border: 0; background: transparent; outline: none; -webkit-appearance: none; appearance: none; padding: 8px 14px; font-size: 0.88rem; color: var(--text-main); font-family: inherit; } .nav-search input::placeholder { color: var(--text-muted); opacity: 1; } .nav-search button { flex: 0 0 auto; border: 0; background: transparent; cursor: pointer; padding: 0 13px 0 2px; font-size: 0.92rem; line-height: 1; color: var(--text-muted); } /* ---- Categories dropdown ---- */ .nav-dropdown { position: relative; } .nav-dropdown-toggle { cursor: pointer; } .nav-dropdown-menu { display: none; position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); margin: 0; padding: 6px; list-style: none; min-width: 190px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,0.14); z-index: 200; } .nav-dropdown.open .nav-dropdown-menu { display: block; } .nav-dropdown-menu li a { display: block; padding: 9px 12px; border-radius: 8px; font-size: 0.9rem; font-weight: 500; color: var(--text-main); white-space: nowrap; } .nav-dropdown-menu li a:hover { background: var(--bg-page); color: var(--primary-yellow); } .nav-dropdown-close-li { list-style: none; padding: 0; margin: 0 0 2px; text-align: right; } .nav-dropdown-close { background: none; border: 0; color: var(--text-muted); cursor: pointer; font-size: 1.15rem; line-height: 1; padding: 2px 6px; border-radius: 6px; } .nav-dropdown-close:hover { color: var(--primary-yellow); background: var(--bg-page); } @media (max-width: 1024px) { .nav-links { gap: 0.8rem; } .nav-links a { font-size: 0.88rem; } .nav-cta { padding: 9px 16px; } } @media (max-width: 880px) { .nav-links { display: none; } .nav-search { max-width: none; } } /* small phones: keep logo + search + toggle inside the viewport */ @media (max-width: 480px) { nav { gap: 0.5rem; padding: 0 10px; } nav a.nav-logo { max-width: 122px; overflow: hidden; flex: 0 0 auto; } nav a.nav-logo img, nav .nav-logo img.logo-l, nav .nav-logo img.logo-d { height: 34px; max-width: 122px; width: auto; object-fit: contain; } .nav-right { gap: 0.5rem; } nav .theme-toggle { width: 56px; flex: 0 0 56px; } } /* ---- THEME TOGGLE ---- */ .theme-toggle { background: transparent; border: 1px solid var(--border-color); border-radius: 50px; width: 64px; height: 32px; cursor: pointer; position: relative; transition: border-color 0.3s ease; flex-shrink: 0; padding: 0; } .theme-toggle:hover { border-color: var(--primary-yellow); } .theme-toggle .tt-ico { position: absolute; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--nav-link); opacity: .5; pointer-events: none; } .theme-toggle .tt-sun { left: 8px; } .theme-toggle .tt-moon { right: 8px; } .theme-toggle .knob { position: absolute; top: 2px; left: 2px; width: 26px; height: 26px; border-radius: 50%; background: var(--primary-yellow, #FFC107); color: #141414; box-shadow: 0 1px 6px rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; transition: transform 0.3s cubic-bezier(.4,1.4,.6,1); } .theme-toggle .knob svg { width: 15px; height: 15px; } .theme-toggle .k-moon { display: none; } [data-theme="dark"] .theme-toggle .knob { transform: translateX(32px); } [data-theme="dark"] .theme-toggle .k-sun { display: none; } [data-theme="dark"] .theme-toggle .k-moon { display: block; } /* ===== homepage theme + nav + brandbar (CANONICAL) ===== */ /* ---- nav (unchanged) ---- */ nav{background:var(--bg-nav,#fff);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:flex;justify-content:space-between;align-items:center;padding:11px 5%;position:relative;border-bottom:1px solid var(--border-color,#EAEAEA);box-shadow:0 4px 20px rgba(0,0,0,.02);transition:background .3s,border-color .3s} .nav-logo{line-height:0}.nav-logo img{height:40px;width:auto;max-width:none;display:block}.nav-logo .logo-d{display:none} [data-theme="dark"] .nav-logo .logo-l{display:none}[data-theme="dark"] .nav-logo .logo-d{display:block} .nav-right{display:flex;align-items:center;gap:1.5rem} .nav-search-form{display:flex;align-items:center;border:1px solid transparent;border-radius:50px;overflow:hidden;transition:border-color .2s,background .2s,box-shadow .2s} .nav-search-form input{width:0;min-width:0;opacity:0;border:0;outline:0;background:transparent;font-family:inherit;font-size:.92rem;color:var(--heading,#1A1A1A);padding:0;transition:width .22s,opacity .18s,padding .22s} .nav-search-wrap.open .nav-search-form{background:var(--bg-card,#fff);border-color:var(--border-color,#EAEAEA);box-shadow:0 1px 6px rgba(0,0,0,.12)} .nav-search-wrap.open .nav-search-form input{width:200px;opacity:1;padding:9px 4px 9px 16px} [data-theme="dark"] .nav-search-wrap.open .nav-search-form{background:var(--bg-card,#17181c);border-color:var(--border-color,#2a2c32)} [data-theme="dark"] .nav-search-form input{color:var(--heading,#fff)} .nav-search-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0;border:0;background:transparent;color:var(--nav-link,var(--text-main,#333));cursor:pointer;border-radius:50%;transition:background .15s,color .15s} .nav-search-btn:hover{color:var(--primary-yellow,#FFC107)}.nav-search-btn svg{width:20px;height:20px} /* theme toggle unified in main block */ html,body{overflow-x:hidden;max-width:100%} .brandbar{background:#0a0a0a;border-bottom:1px solid #1e2024;transition:background .3s,border-color .3s} /* brand.php etc: in-content brandbars keep theme background, not the black nav bar */ .ph .brandbar,.wrap .brandbar{background:var(--bg-nav,#fff);border-bottom-color:var(--border-color,#EAEAEA)} [data-theme="dark"] .ph .brandbar,[data-theme="dark"] .wrap .brandbar{background:#0a0a0a;border-bottom-color:#1e2024} .brandbar-inner{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;padding:10px 5%} .brandbar .brand{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:#f0f0f2;font-size:.9rem;font-weight:600;padding:7px 16px;border:1px solid rgba(255,255,255,.2);background:transparent;border-radius:8px;transition:color .2s,border-color .2s,background .2s,transform .12s,box-shadow .2s} .brandbar .brand:hover{color:#FFC107;border-color:#FFC107;transform:translateY(-1px)} .brandbar .brand svg{width:17px;height:17px;flex-shrink:0} .brandbar .brand-all{font-weight:700;color:#f0f0f2} .brandbar .wm-samsung{font-weight:800;letter-spacing:.5px;color:#6c84e8} .brandbar .brand:hover .wm-samsung{color:#FFC107} [data-theme="light"] .brandbar .brand{background:#fff;color:#1a1a1a;border-color:transparent} [data-theme="light"] .brandbar .brand-all{color:#1A1A1A} [data-theme="light"] .brandbar .wm-samsung{color:#1428A0} [data-theme="light"] .brandbar .brand:hover{color:#0a0a0a;border-color:#FFC107;box-shadow:0 0 0 2px rgba(255,193,7,.35)} [data-theme="light"] .brandbar .brand:hover .wm-samsung{color:#c88b00} /* ---- FOOTER ---- */ footer { background: var(--bg-footer); color: var(--text-muted); text-align: center; padding: 2rem 5%; font-size: 0.9rem; border-top: 1px solid var(--border-color); font-weight: 500; transition: background 0.3s ease; } footer a { color: var(--footer-link); text-decoration: none; font-weight: 600; } footer a:hover { color: var(--primary-yellow); } footer .tm-notice { font-size: .62rem; line-height: 1.45; max-width: 780px; margin: 8px auto 0; padding: 0 16px; text-align: center; opacity: .55; } @media (max-width: 768px) { .nav-links { display: none; } }