Gotcha. OK. Didn't work...a black bar appeared, but I was trying to turn that gold bar above the nav, to black But whatever. I know this CSS file is getting heavy with stuff overriding other stuff. Here's the whole thing. Can you trim it down to kill all the duplicates so we can start a bit more fresh? /* Theme Name: Pedicure Makeup Store Child Template: pedicure-makeup-store */ /* ===== DESIGN TOKENS ===================================================== */ /* Light theme (default) — Linen & Gold */ :root{ --bg: #ffffff; /* page background */ --surface: #ffffff; /* cards/header/nav */ --surface-2: #fafafa; /* subtle sections */ --ink: #1f1f1f; /* primary text */ --muted: #777777; /* secondary text */ --border: #666666; /* lines, inputs */ --accent: #666666; /* deep gold */ --accent-2: #666666; /* lighter gold (chips, highlights) */ --link: #1f1f1f; --link-hover: var(--accent); } /* Optional Dark theme — Onyx & Gold (enable via .theme-dark on ) */ .theme-dark{ --bg: #0e0e0f; --surface: #141416; --surface-2: #1b1c1f; --ink: #f2f2f2; --muted: #b9b9b9; --border: #2a2a2a; --accent: #999999; --accent-2: #666666; --link: #f2f2f2; --link-hover: var(--accent); } /* Legacy alias so older rules keep working */ :root{ --ccr-gold: var(--accent); --ccr-text: var(--ink); --ccr-muted: var(--muted); } /* ===== GLOBAL ============================================================ */ html, body { background: var(--bg); color: var(--ink); } a { color: var(--link); text-decoration: none; } a:hover { color: var(--link-hover); } /* Inputs */ input, select, textarea { color: var(--ink); background: var(--surface); border: 1px solid var(--border); } input:focus, select:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--accent) 30%, transparent); } /* Dividers & borders (generic) */ hr, .divider, .bordered, .widget, .woocommerce .cart_totals, table, th, td { border-color: var(--border); } /* Buttons (site-wide + Woo) */ button, .button, .wp-element-button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt { background: var(--accent); border: 1px solid var(--accent); color: #fff; border-radius: 999px; padding: .6rem 1rem; } button:hover, .button:hover, .wp-element-button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover { filter: brightness(.95); } /* Notices & badges (Woo) */ .woocommerce-message, .woocommerce-info, .woocommerce-error { border-left: 4px solid var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); } .woocommerce span.onsale { background: var(--accent); color: #fff; border-radius: 999px; } /* Header + nav surfaces */ .site-header { background: var(--surface); border-bottom: 1px solid var(--border); } .primary-nav .ccr-navwrap { border-top: 3px solid var(--accent); margin-top: .6rem; } /* Title & search pill */ .ccr-title { color: var(--muted); } .ccr-search form { border: 1px solid var(--border); background: var(--surface); } .ccr-search select { background: var(--accent-2); } .ccr-search button, .ccr-search input[type="submit"] { background: var(--accent); border-color: var(--accent); color: #fff; } /* Menu colors */ .primary-nav .menu > li > a, header.site-header nav ul > li > a { color: var(--ink) !important; } .primary-nav .menu > li.current-menu-item > a, header.site-header nav ul > li.current-menu-item > a, .primary-nav .menu > li > a:hover, header.site-header nav ul > li > a:hover { color: var(--accent) !important; } /* Footer background & links (replace theme pinks) */ .site-footer, .footer, .footer-widgets { background: var(--surface-2); color: var(--ink); border-top: 1px solid var(--border); } .site-footer a, .footer a { color: var(--link); } .site-footer a:hover, .footer a:hover { color: var(--link-hover); } /* Footer widget titles subtle */ .site-footer .widget-title { color: var(--muted) !important; } h1, h2 { letter-spacing: .02em; font-weight: 700; } /* --- Layout shell -------------------------------------------------------- */ /* Header row layout: logo left, search right */ .ccr-header { display: grid; grid-template-columns: auto 1fr; /* logo takes natural width, search fills the rest */ align-items: center; gap: 1.5rem; padding: 1rem 2rem; } /* Left: logo bigger */ .ccr-left img, .site-branding .custom-logo { max-height: 100px !important; /* adjust up/down */ height: auto; width: auto; } /* Center block: big title above search */ .ccr-center { display: none!important; grid-template-rows: auto auto; justify-items: center; align-items: center; row-gap: .75rem; text-align: center; } .ccr-right { justify-content: flex-end; flex: 1; } .ccr-title { margin: 0; font-size: clamp(1rem, 2vw, 1.75rem); /* smaller min/max */ font-weight: 600; /* slightly lighter weight if you like */ letter-spacing: .02em; /* less spacing, looks more refined */ text-transform: uppercase; opacity: .9; } /* Search row – make forms flex so the input and button behave */ .ccr-search form.search-form, .ccr-search form.woocommerce-product-search { display: flex; align-items: center; gap: .5rem; } .ccr-search input[type="search"] { min-width: min(560px, 70vw); /* wide on desktop, constrained on small screens */ padding: .65rem .9rem; border: 1px solid #ddd; border-radius: 999px; /* pill look to match your mock */ outline: none; } .ccr-search button, .ccr-search input[type="submit"] { padding: .55rem .8rem; border-radius: 999px; border: 1px solid #e7c46a; /* subtle gold edge */ } /* Right column: icons + currency/lang widgets */ .ccr-right { display: flex; justify-content: flex-end; align-items: center; gap: .75rem; } /* Normalize random widget blocks dropped in Header Right */ .ccr-right .widget { margin: 0; } .ccr-right select, .ccr-right .button, .ccr-right .btn { line-height: 1.2; } /* Optional: keep header on top and add subtle divider */ .site-header { position: sticky; top: 0; z-index: 1000; background: #fff; border-bottom: 1px solid #eee; } /* --- Navigation (below header) ------------------------------------------ */ /* If your theme’s menu is immediately under the header, give it some space */ .site-header + .site-navigation, .site-header + nav, .site-header + .primary-nav { border-top: 3px solid #e7c46a; /* thin gold bar like your mock */ margin-top: .5rem; } /* --- Responsive tweaks --------------------------------------------------- */ @media (max-width: 1024px) { .ccr-header { grid-template-columns: 1fr 1.4fr 1fr; } .ccr-search input[type="search"] { min-width: min(420px, 75vw); } } @media (max-width: 782px) { .ccr-header { grid-template-columns: 1fr; /* stack */ row-gap: .75rem; } .ccr-left { justify-self: center; } .ccr-right { justify-content: center; } .ccr-title { font-size: 1.35rem; } .ccr-search input[type="search"] { min-width: 100%; } } /* Layout shell */ .ccr-header{ display:grid; grid-template-columns: 1fr 2fr 1fr; /* left | center | right */ align-items:center; gap:1.25rem; padding:1rem 0 0.75rem; background:#fff; } /* Left: logo */ .ccr-left img{ max-height:76px; height:auto; width:auto; } /* Center block */ .ccr-center{ display:grid; grid-template-rows:auto auto; /* title, search */ justify-items:center; text-align:center; row-gap:.6rem; } /* Big light-grey, uppercase site name */ .ccr-title{ margin:0; text-transform:uppercase; letter-spacing:.06em; font-weight:800; font-size: clamp(1.4rem, 3.2vw, 2.6rem); color: var(--ccr-muted); line-height:1.1; } /* --- Search pill --------------------------------------------------------- */ /* Normalize both default search and Woo product search */ .ccr-search form, .ccr-search form.search-form, .ccr-search form.woocommerce-product-search{ display:flex; align-items:center; gap:0; border:1px solid #e7e7e7; border-radius:999px; padding:.2rem; box-shadow:0 1px 6px rgba(0,0,0,.04); background:#fff; } /* Category select (left pill) */ .ccr-search select{ border:none; outline:none; background:#f4e2a5; /* soft gold like the mock */ padding:.6rem .95rem; border-radius:999px; font-weight:600; appearance:none; } /* Text input (middle) */ .ccr-search input[type="search"]{ border:none; outline:none; background:transparent; padding:.65rem .9rem; min-width: min(560px, 70vw); } /* Submit (right pill) */ .ccr-search button, .ccr-search input[type="submit"]{ margin-left:.35rem; border:1px solid var(--ccr-gold); background:var(--ccr-gold); color:#fff; padding:.55rem .8rem; line-height:1; border-radius:999px; cursor:pointer; } .ccr-search button:hover, .ccr-search input[type="submit"]:hover{ filter:brightness(.95); } /* Remove plugin/theme borders inside the pill */ .ccr-search input, .ccr-search select, .ccr-search button{ box-shadow:none !important; } /* Right column: align widgets/icons */ .ccr-right{ display:flex; justify-content:flex-end; align-items:center; gap:.75rem; } .ccr-right .widget{ margin:0; } .ccr-right select{ line-height:1.2; } /* If your account/cart icons render as circular buttons, keep them tidy */ .ccr-right .button, .ccr-right .btn{ border-radius:999px; padding:.5rem; min-width:auto; } /* Thin gold rule above the nav */ .site-header + .primary-nav, .site-header + nav{ border-top:3px solid var(--ccr-gold); margin-top:.6rem; } /* Menu look (optional; tweak as wanted) */ .primary-nav .menu > li > a{ padding:.9rem 1rem; color:#111; text-decoration:none; } .primary-nav .menu > li.current-menu-item > a, .primary-nav .menu > li > a:hover{ color:#999999; } /* deeper gold */ /* ---- Responsive --------------------------------------------------------- */ @media (max-width: 1024px){ .ccr-header{ grid-template-columns: 1fr 1.6fr 1fr; } .ccr-search input[type="search"]{ min-width:min(420px, 75vw); } } @media (max-width: 820px){ .ccr-header{ grid-template-columns:1fr; row-gap:.75rem; } .ccr-left{ justify-self:center; } .ccr-right{ justify-content:center; } .ccr-title{ font-size:1.35rem; } .ccr-search input[type="search"]{ min-width:100%; } } /* Bigger logo */ .ccr-left img, .site-branding .custom-logo { max-height: 130px !important; /* try 120–140px */ height: auto; width: auto; } @media (max-width: 820px){ .ccr-left img, .site-branding .custom-logo { max-height: 78px !important; } } /* Base typography */ html, body { font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-size: 16px; line-height: 1.6; color: #222; } /* Headings: classy serif */ h1, h2, h3, h4, h5, h6, .ccr-title { font-family: 'Cinzel', serif; } /* Your big header title stays uppercase but uses the serif */ .ccr-title { text-transform: uppercase; letter-spacing: .06em; font-weight: 700; } /* Menus, buttons, inputs stick with the clean sans */ .primary-nav a, button, .button, input, select, textarea { font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; } /* Horizontal primary menu on desktop */ @media (min-width: 821px){ .primary-nav .menu, nav.primary-nav .menu { display: flex; align-items: center; gap: 1rem; /* spacing between items */ list-style: none; margin: 0; padding: 0; flex-wrap: nowrap; /* keep one line; change to wrap if needed */ } .primary-nav .menu > li { display: block; } .primary-nav .menu > li > a { display: block; padding: .9rem 1rem; text-decoration: none; color: #111; white-space: nowrap; /* keep items on one line */ } /* Hover/current styles */ .primary-nav .menu > li.current-menu-item > a, .primary-nav .menu > li > a:hover { color: #999999; /* matches the gold accent family */ } } /* Optional: ensure the gold bar divider remains above the nav */ .site-header + .primary-nav, .site-header + nav { border-top: 3px solid #e7c46a; margin-top: .6rem; } /* Global typeface override */ html, body, .site, .site-content, .entry-content, .widget, .widget-area, .woocommerce, .woocommerce-page, button, .button, input, select, textarea, nav, .menu, .sub-menu, .primary-nav, .footer, .site-footer { font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important; } /* Headings in the serif */ h1, h2, h3, h4, h5, h6, .ccr-title, .entry-title, .widget-title { font-family: 'Cinzel', serif !important; } /* Normalize nav ULs to horizontal on desktop */ @media (min-width: 821px){ /* Common WP wrappers */ .primary-nav .menu, nav .menu, .menu-primary-container > ul, .main-navigation ul, .site-header nav ul, .site-header .menu { display: flex !important; align-items: center; gap: 1rem; list-style: none; margin: 0; padding: 0; flex-wrap: nowrap; } /* LI & anchors */ .primary-nav .menu > li, nav .menu > li, .main-navigation ul > li, .site-header nav ul > li { display: block; } .primary-nav .menu > li > a, nav .menu > li > a, .main-navigation ul > li > a, .site-header nav ul > li > a { display: block; padding: .85rem 1rem; text-decoration: none; color: #111; white-space: nowrap; } /* Active/hover */ .primary-nav .menu > li.current-menu-item > a, nav .menu > li.current-menu-item > a, .main-navigation ul > li.current-menu-item > a, .site-header nav ul > li.current-menu-item > a, .primary-nav .menu > li > a:hover, nav .menu > li > a:hover, .main-navigation ul > li > a:hover, .site-header nav ul > li > a:hover { color: #999999; } } /* Remove bullets everywhere just in case */ nav ul, .menu, .menu ul { list-style: none; } /* Keep the thin gold line above the nav if you like that look */ .site-header + nav, .site-header + .primary-nav, .site-header + .main-navigation { border-top: 3px solid #e7c46a; margin-top: .6rem; } @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Libre+Baskerville:wght@400;700&display=swap'); /* ===== FONT OVERRIDE – strongest, site-wide ================================= */ :root{ --ccr-sans:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; --ccr-serif:"Libre Baskerville", Georgia, "Times New Roman", serif; } /* Nuke theme body fonts */ html, body { font-family: var(--ccr-sans) !important; } /* Headings keep the classy serif (plus your big header title) */ h1,h2,h3,h4,h5,h6, .ccr-title,.entry-title,.widget-title { font-family: var(--ccr-serif) !important; } /* ===== NAV → force horizontal on desktop (classic + block) ================== */ /* CLASSIC MENUS */ @media (min-width: 821px){ .primary-nav .menu, nav.primary-nav .menu, .menu-primary-container > ul, .main-navigation > ul, .main-navigation .menu, .site-header nav > ul, .site-header .menu, .navbar ul, .nav-menu { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 1rem !important; list-style: none; margin: 0; padding: 0; flex-wrap: nowrap; } .primary-nav .menu > li, nav .menu > li, .main-navigation ul > li, .nav-menu > li { display: block; } .primary-nav .menu > li > a, nav .menu > li > a, .main-navigation ul > li > a, .nav-menu > li > a { display: block; padding: .85rem 1rem; text-decoration: none; white-space: nowrap; color: #111; } } /* GUTENBERG / BLOCK NAVIGATION */ @media (min-width: 821px){ .wp-block-navigation__container { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 1rem !important; } .wp-block-navigation-item { margin: 0 !important; } .wp-block-navigation-item__content { padding: .85rem 1rem; text-decoration: none; white-space: nowrap; color: #111; } } /* Hover/current (both systems) */ @media (min-width: 821px){ .primary-nav .menu > li.current-menu-item > a, nav .menu > li.current-menu-item > a, .main-navigation ul > li.current-menu-item > a, .nav-menu > li.current-menu-item > a, .primary-nav .menu > li > a:hover, nav .menu > li > a:hover, .main-navigation ul > li > a:hover, .nav-menu > li > a:hover, .wp-block-navigation-item__content:hover { color: #999999; } } /* Remove bullets and odd spacing everywhere */ nav ul, .menu, .menu ul, .nav-menu, .wp-block-navigation__container { list-style: none; } @media (min-width: 821px){ /* any UL printed by wp_nav_menu inside our header nav */ header.site-header nav ul { display:flex !important; gap:1rem !important; margin:0 !important; padding:0 !important; list-style:none !important; } header.site-header nav ul > li { margin:0 !important; } header.site-header nav ul > li > a { display:block !important; padding:.85rem 1rem !important; white-space:nowrap !important; } } /* Force any