- WP Customizer → Site Identity Logo:

We hit both so it works regardless of how the logo was uploaded. */ body.theme-uncode.has-svg-logo #main-logo .navbar-brand { background: transparent; box-shadow: none; padding: 0; } body.theme-uncode.has-svg-logo #main-logo .navbar-brand::before { display: none; } /* Customizer path (current case for ReefDudes — transparent PNG with the illustrated reef artwork). The PNG is already transparent so no white-knockout is needed. A tiny saturation/contrast boost makes the corals and fish read better at small header sizes without flattening the artwork. */ body.theme-uncode.has-svg-logo #main-logo .logo-customizer img, body.theme-uncode.has-svg-logo #main-logo .navbar-brand .logo-customizer img { filter: saturate(1.10) contrast(1.05) drop-shadow(0 1px 2px rgba(8,28,55,0.35)); transition: filter 160ms ease, transform 160ms ease; } body.theme-uncode.has-svg-logo #main-logo .navbar-brand:hover .logo-customizer img { filter: saturate(1.20) contrast(1.08) drop-shadow(0 2px 4px rgba(8,28,55,0.45)); transform: translateY(-1px); } /* Theme-Options path (legacy; still works as a knockout fallback if a future logo with a white background gets uploaded that way). */ body.theme-uncode.has-svg-logo #main-logo .navbar-brand .logo-image img { mix-blend-mode: multiply; filter: brightness(1.45) saturate(1.6) contrast(1.15); } body.theme-uncode.has-svg-logo #main-logo .navbar-brand:hover .logo-image img { filter: brightness(1.6) saturate(1.7) contrast(1.15); } /* Bump the logo size — the new illustrated logo carries fish and coral details that get lost at the default 50px cap. 64px is the sweet spot: details readable, header band still feels compact. */ body.theme-uncode.has-svg-logo #main-logo .logo-customizer, body.theme-uncode.has-svg-logo #main-logo .navbar-brand .logo-customizer { max-height: 64px; } body.theme-uncode.has-svg-logo #main-logo .logo-customizer img { max-height: 64px; width: auto; height: auto; } @media (max-width: 600px) { body.theme-uncode.has-svg-logo #main-logo .logo-customizer, body.theme-uncode.has-svg-logo #main-logo .navbar-brand .logo-customizer { max-height: 48px; } body.theme-uncode.has-svg-logo #main-logo .logo-customizer img { max-height: 48px; } } /* Mobile: tighten plate padding so the touch target stays compact */ @media (max-width: 600px) { body.theme-uncode #main-logo .navbar-brand { padding: 4px 10px; border-radius: 6px; } } /* Menu links — white on blue, with the soft hover lift */ body.theme-uncode .menu-container .menu-primary-inner > li > a, body.theme-uncode .menu-container .navbar-extra-icons > ul > li > a { color: var(--header-text); transition: background-color 140ms ease, color 140ms ease; } body.theme-uncode .menu-container .menu-primary-inner > li:hover > a, body.theme-uncode .menu-container .menu-primary-inner > li.dropdown.show > a, body.theme-uncode .menu-container .menu-primary-inner > li > a:focus, body.theme-uncode .menu-container .navbar-extra-icons > ul > li:hover > a { color: #ffffff; background-color: rgba(255,255,255,0.10); } body.theme-uncode .menu-container .menu-primary-inner > li.current-menu-item > a, body.theme-uncode .menu-container .menu-primary-inner > li.current-menu-ancestor > a { color: #ffffff; box-shadow: inset 0 -2px 0 var(--actinic); } /* Search and cart icons in the header */ body.theme-uncode .menu-container .navbar-extra-icons .fa, body.theme-uncode .menu-container .navbar-extra-icons i { color: var(--header-text); } /* Mobile menu toggle bars */ body.theme-uncode .mobile-menu-button-light .lines, body.theme-uncode .mobile-menu-button-light .lines::before, body.theme-uncode .mobile-menu-button-light .lines::after { background: var(--header-text); } /* Dropdown submenus drop on white (legible against the blue header) */ body.theme-uncode .menu-container .drop-menu, body.theme-uncode .menu-container .un-submenu { background: var(--panel); border: 1px solid var(--border); border-top: 2px solid var(--accent); box-shadow: var(--shadow-card); border-radius: 0 0 6px 6px; } body.theme-uncode .menu-container .drop-menu li > a { color: var(--text); } body.theme-uncode .menu-container .drop-menu li > a:hover, body.theme-uncode .menu-container .drop-menu li.current-menu-item > a { background: var(--accent-soft); color: var(--accent); } /* Menu sticky shadow when scrolled */ body.theme-uncode .menu-sticky-fix .menu-sticky.scrolled .menu-container { box-shadow: 0 2px 16px rgba(28,75,130,0.18); } /* ------------------------------------------------------- Buttons — primary CTA gradient, secondary outline, ghost ------------------------------------------------------- */ body.theme-uncode .btn:not(.btn-link):not(.btn-text-skin), body.theme-uncode .vc_btn3:not(.vc_btn3-style-text):not(.vc_btn3-style-outline), body.theme-uncode button[type="submit"]:not(.btn-link), body.theme-uncode input[type="submit"]:not(.btn-link), body.theme-uncode .wp-block-button__link, body.theme-uncode .woocommerce a.button, body.theme-uncode .woocommerce button.button, body.theme-uncode .woocommerce input.button { background: var(--grad-button); background-color: var(--accent); color: #ffffff; border: 1px solid #2872c0; border-radius: 4px; box-shadow: var(--shadow-button); transition: filter 120ms ease, transform 120ms ease, box-shadow 120ms ease; } body.theme-uncode .btn:not(.btn-link):not(.btn-text-skin):hover, body.theme-uncode .vc_btn3:not(.vc_btn3-style-text):not(.vc_btn3-style-outline):hover, body.theme-uncode button[type="submit"]:not(.btn-link):hover, body.theme-uncode input[type="submit"]:not(.btn-link):hover, body.theme-uncode .wp-block-button__link:hover, body.theme-uncode .woocommerce a.button:hover, body.theme-uncode .woocommerce button.button:hover, body.theme-uncode .woocommerce input.button:hover { filter: brightness(1.06); color: #ffffff; box-shadow: 0 2px 6px rgba(28,75,130,0.24); } body.theme-uncode .btn:not(.btn-link):not(.btn-text-skin):active, body.theme-uncode .vc_btn3:not(.vc_btn3-style-text):not(.vc_btn3-style-outline):active { transform: translateY(1px); filter: brightness(0.96); } /* Outlined / secondary — ghost on white, fills with soft tint on hover */ body.theme-uncode .btn-outline, body.theme-uncode .vc_btn3-style-outline { background: transparent; color: var(--accent); border: 1px solid var(--accent); box-shadow: none; } body.theme-uncode .btn-outline:hover, body.theme-uncode .vc_btn3-style-outline:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); } /* WooCommerce add-to-cart inherits the primary treatment automatically */ /* ------------------------------------------------------- Form controls ------------------------------------------------------- */ body.theme-uncode input[type="text"], body.theme-uncode input[type="email"], body.theme-uncode input[type="number"], body.theme-uncode input[type="search"], body.theme-uncode input[type="tel"], body.theme-uncode input[type="url"], body.theme-uncode input[type="password"], body.theme-uncode textarea, body.theme-uncode .form-control { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 4px; transition: border-color 120ms ease, box-shadow 120ms ease; } body.theme-uncode input[type="text"]:focus, body.theme-uncode input[type="email"]:focus, body.theme-uncode input[type="number"]:focus, body.theme-uncode input[type="search"]:focus, body.theme-uncode input[type="tel"]:focus, body.theme-uncode input[type="url"]:focus, body.theme-uncode input[type="password"]:focus, body.theme-uncode textarea:focus, body.theme-uncode .form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); outline: none; } /* Search overlay (the full-screen search) — keep the brand on the input */ body.theme-uncode .overlay-search .search-field { color: #ffffff; border-color: rgba(255,255,255,0.40); } body.theme-uncode .overlay-search .search-field:focus { border-color: var(--actinic); box-shadow: 0 0 0 3px rgba(90,166,232,0.40); } /* ------------------------------------------------------- Surfaces & cards Uncode renders panels via .vc_row / .uncol / .uncell containers. We add a subtle card style for any container marked .style-light-bg that's also tagged with our .rd-card helper class. ------------------------------------------------------- */ body.theme-uncode .rd-card, body.theme-uncode .vc_row.rd-card .row-inner, body.theme-uncode .uncode-info-panel { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-card); } /* Soft "info" panel — for educational callouts, tips, notes */ body.theme-uncode .rd-panel-info { background: var(--accent-soft); border: 1px solid rgba(58,142,224,0.30); border-left: 3px solid var(--accent); border-radius: 6px; color: var(--text); padding: 14px 18px; } /* ------------------------------------------------------- Segmented toggles (active = blue, inactive = white) Use class .rd-toggle on any group of buttons. ------------------------------------------------------- */ .rd-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--panel); } .rd-toggle > button, .rd-toggle > .rd-toggle__item { background: var(--panel); color: var(--text); border: none; padding: 6px 14px; font-weight: 500; cursor: pointer; transition: background-color 120ms ease, color 120ms ease; } .rd-toggle > button:not(:last-child), .rd-toggle > .rd-toggle__item:not(:last-child) { border-right: 1px solid var(--border); } .rd-toggle > button:hover, .rd-toggle > .rd-toggle__item:hover { background: var(--accent-soft); color: var(--accent); } .rd-toggle > button.is-active, .rd-toggle > .rd-toggle__item.is-active, .rd-toggle > [aria-pressed="true"] { background: var(--accent); color: #ffffff; } /* ------------------------------------------------------- WooCommerce surfaces ------------------------------------------------------- */ body.theme-uncode .woocommerce span.onsale { background: var(--coral); color: #ffffff; border-radius: 999px; font-weight: 600; padding: 2px 10px; min-height: 0; min-width: 0; line-height: 1.6; } body.theme-uncode .woocommerce-info, body.theme-uncode .woocommerce-message { background: var(--accent-soft); border-top-color: var(--accent); color: var(--text); } body.theme-uncode .woocommerce-info::before, body.theme-uncode .woocommerce-message::before { color: var(--accent); } body.theme-uncode .woocommerce-error { background: rgba(196,74,74,0.10); border-top-color: var(--error); color: var(--text); } body.theme-uncode .woocommerce-error::before { color: var(--error); } /* Cart badge in the header — coral accent for "you have items" */ body.theme-uncode .uncode-cart .badge { background: var(--coral); color: #ffffff; border: 1.5px solid #ffffff; } /* ------------------------------------------------------- Misc — borders, dividers, code, tables ------------------------------------------------------- */ body.theme-uncode hr, body.theme-uncode .vc_separator .vc_sep_holder .vc_sep_line { border-color: var(--border); } body.theme-uncode code, body.theme-uncode pre { background: #f6f9fc; color: #2c4256; border: 1px solid var(--border); border-radius: 4px; } body.theme-uncode table th { background: var(--accent-soft); color: var(--accent); } /* Text muted utility — matches "Dudes" in the wordmark */ body.theme-uncode .text-muted, body.theme-uncode .post-meta, body.theme-uncode .meta { color: var(--muted); } /* Override the legacy `.post-info{color:white}` hack in wp-custom-css — only force white inside dark-skin sections where it makes sense. */ body.theme-uncode .post-info { color: var(--muted); } body.theme-uncode .style-dark .post-info, body.theme-uncode .style-dark-bg .post-info { color: rgba(255,255,255,0.85); } body.theme-uncode .post-info a:link, body.theme-uncode .post-info a:visited { color: var(--accent); } body.theme-uncode .style-dark .post-info a:link, body.theme-uncode .style-dark .post-info a:visited { color: var(--actinic); }