/* Theme Name: Kuzina Guadalupe (Astra Child) Theme URI: https://kuzinaguadalupe.com Description: Child theme for Astra, styled with Kuzina Guadalupe's brand colors (pulled from the shop sign and logo). Light header so the black logo stays visible, dark footer with gold accents so the widget area echoes the sign. Author: Kuzina Guadalupe Template: astra Version: 1.12.0 Text Domain: kg-astra-child */ /* --------------------------------------------------------- 0. Global font — Montserrat everywhere, overriding Astra's own font settings (headings, body, buttons, form fields, the Places autocomplete dropdown, everything) so no other typeface shows up anywhere. --------------------------------------------------------- */ html body, html body * { font-family: 'Montserrat', sans-serif !important; } /* Exception: icon fonts must keep their own font-family or the glyphs break and show as boxes/letters instead of icons (nav arrow, social icons). */ html body .dashicons, html body .dashicons-before::before, html body [class*="dashicons-"]::before { font-family: dashicons !important; } /* Exception: the WordPress admin toolbar (visible at the top of the front end when logged in) uses dashicons for all of its menu icons too — the blanket rule above was breaking them into empty boxes. Excluding the whole toolbar restores its icons and its own default font. */ html body #wpadminbar, html body #wpadminbar * { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; } html body #wpadminbar .ab-icon::before, html body #wpadminbar .ab-item::before, html body #wpadminbar .dashicons::before { font-family: dashicons !important; } /* --------------------------------------------------------- 1. Brand palette — change these once, everything updates --------------------------------------------------------- */ :root { --kg-black: #141414; /* sign background / ink color */ --kg-gold: #c9a227; /* sign lettering gold */ --kg-gold-light: #e0bc4c; /* hover / lighter gold */ --kg-amber: #e0ac1f; /* header background — bold, not white/cream, still light enough for the black logo */ --kg-red: #9c2b2b; /* appetite-red accent used for buttons/CTAs */ --kg-white: #ffffff; --kg-muted: #cfcfcf; /* muted text on dark backgrounds */ --kg-cream: #f6f1e6; /* light page background — same tone as the plugin's homepage menu section */ } /* Horizontal-scroll guard for the full-bleed (100vw breakout) sections used on the homepage, About page, and menu page — deliberately set on rather than . overflow-x:hidden on forces the browser to treat as its own scrolling container (per the CSS overflow spec, setting only one axis to non-visible forces the other to "auto"), which silently breaks position:sticky on the header below (sticky positioning is relative to the nearest *scrolling* ancestor — with body scrolling instead of the viewport, "stuck to the top" stops working in several browsers). Clipping at the level avoids creating that container. */ html { overflow-x: hidden; } /* --------------------------------------------------------- 2. Header & primary menu (bold amber, not white/cream — logo stays visible) --------------------------------------------------------- */ .ast-header-break-point .main-header-bar, .main-header-bar { background-color: var(--kg-amber) !important; border-bottom-color: var(--kg-black) !important; } /* Sticky header — logo + menu stay pinned to the top of the screen once you scroll past them, instead of scrolling away with the rest of the page. Targets the whole header element (not just the menu row) so the logo sticks along with it, on both desktop and the mobile breakpoint. */ #masthead, .ast-header-break-point#masthead { position: sticky; top: 0; z-index: 99; } .site-title a, .ast-header-break-point .site-title a { color: var(--kg-black) !important; } .site-description { color: var(--kg-black); opacity: 0.7; } /* Extra-high specificity + several selector variants: Astra's own dynamic Customizer CSS can otherwise out-rank a single class selector even with !important, since ties go to whichever rule is more specific. */ html body .main-header-bar .main-header-bar-navigation ul li > a, html body .main-header-bar .main-header-bar-navigation ul li > a span, html body.ast-header-break-point .main-header-bar .main-header-bar-navigation ul li > a, html body .ast-header-break-point .main-header-bar .main-header-bar-navigation ul li > a, html body #primary-menu > li > a, html body .main-navigation ul li > a { color: var(--kg-black) !important; opacity: 1 !important; } /* Hover: switch to the brand red — reads clearly against the amber header, unlike gold-on-amber which was nearly the same hue/lightness. */ html body .main-header-bar .main-header-bar-navigation ul li > a:hover, html body .main-header-bar .main-header-bar-navigation ul li > a:hover span { color: var(--kg-red) !important; } /* Current/selected page: a solid black pill with white text — unmistakably different from both the resting state and the hover state. */ html body .main-header-bar .main-header-bar-navigation ul li.current-menu-item > a, html body .main-header-bar .main-header-bar-navigation ul li.current_page_item > a, html body .main-header-bar .main-header-bar-navigation ul li.current-menu-item > a span, html body .main-header-bar .main-header-bar-navigation ul li.current_page_item > a span { color: var(--kg-white) !important; } html body .main-header-bar .main-header-bar-navigation ul li.current-menu-item > a, html body .main-header-bar .main-header-bar-navigation ul li.current_page_item > a { background-color: var(--kg-black) !important; border-radius: 4px; } /* Dropdown submenus */ .main-header-bar .main-header-bar-navigation ul.sub-menu { background-color: var(--kg-black) !important; } .main-header-bar .main-header-bar-navigation ul.sub-menu li > a { color: var(--kg-white) !important; } .main-header-bar .main-header-bar-navigation ul.sub-menu li > a:hover { color: var(--kg-gold-light) !important; } /* Mobile menu toggle + panel */ .ast-mobile-header-wrap, .ast-header-break-point .ast-mobile-header-wrap { background-color: var(--kg-amber) !important; } .astra-mobile-menu-wrapper, .ast-header-break-point .main-header-bar-navigation { background-color: var(--kg-amber) !important; } .ast-mobile-menu-buttons-minimal svg, button.menu-toggle .menu-toggle-icon svg { fill: var(--kg-black); } /* --------------------------------------------------------- 3. Footer widget area (dark, gold accents, matches the sign) One continuous black band, edge-to-edge (breaks out of Astra's centered max-width container the same way the homepage hero does), text left-aligned throughout, no per-column "boxed" look. --------------------------------------------------------- */ footer.site-footer, .site-footer, #colophon { background-color: var(--kg-black) !important; } /* IMPORTANT: these builder-row classes are scoped under .site-footer/#colophon only. Astra reuses ".ast-builder-grid-row-container" for the HEADER's own rows too — an earlier unscoped version of this rule painted the header black and broke its layout (same class-name collision as the .ast-container bug above). Never target ".ast-builder-grid-row-container" on its own. */ .site-footer .ast-builder-footer-row-container, .site-footer .ast-builder-footer-row-container-1, .site-footer .ast-builder-footer-row-container-2, .site-footer .ast-builder-grid-row-container, #colophon .ast-builder-footer-row-container, #colophon .ast-builder-footer-row-container-1, #colophon .ast-builder-footer-row-container-2, #colophon .ast-builder-grid-row-container { background-color: var(--kg-black) !important; width: 100vw; box-sizing: border-box; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: max(20px, calc((100vw - 1200px) / 2)); padding-right: max(20px, calc((100vw - 1200px) / 2)); padding-top: 50px; padding-bottom: 30px; } .footer-widget-area { background-color: transparent !important; color: var(--kg-muted); } /* Wildcard + !important: Astra ships its own dynamic Customizer CSS for widget text alignment that otherwise keeps winning against a plain text-align:left here. */ .footer-widget-area, .footer-widget-area * { text-align: left !important; } .footer-widget-area .widget-title, .footer-widget-area h2, .footer-widget-area h3 { color: var(--kg-gold); font-size: 18px; letter-spacing: 0.5px; margin-bottom: 18px; } .footer-widget-area a { color: var(--kg-muted); text-decoration: none; } .footer-widget-area a:hover { color: var(--kg-gold-light); } /* Social icon circles are flex-centered, not text-aligned — the wildcard left-align above doesn't affect their layout, only text nodes. */ .footer-widget-area input, .footer-widget-area textarea { background-color: #1f1f1f; border: 1px solid #333; color: var(--kg-white); } /* Bottom copyright / footer bar */ .ast-small-footer, .site-below-footer-wrap { background-color: #0d0d0d !important; border-top: 1px solid #2a2a2a; } .ast-small-footer .footer-sm-column, .ast-small-footer p, .site-below-footer-wrap p { color: var(--kg-muted); } .ast-small-footer a, .site-below-footer-wrap a { color: var(--kg-gold); } /* --------------------------------------------------------- 4. Homepage — hide the default "Page Title" bar so the full-page [kg_menu_scroll] layout isn't interrupted by it, and let its full-bleed sections scroll without a horizontal scrollbar appearing. --------------------------------------------------------- */ body.home .entry-header, body.home .page-header, body.home .ast-single-header, body.home .ast-archive-title { display: none; } /* --------------------------------------------------------- 4b. Every plugin-built page — Menu, Locations, Contact, About, and individual Menu Item (product) pages — shares the same light/cream page background (#f6f1e6) with dark text, so there's no seam or "dark bar" between the header and the plugin's own content, and no leftover white/black title box above it either. ("kg-dark-page" is a holdover class name from an earlier all-dark design — it just means "one of the plugin's shortcode-built pages" now, same as single-kg_product for product pages.) IMPORTANT: this only ever targets #primary / .site-content — never .ast-container on its own, because Astra reuses that class inside the HEADER too. An earlier version of this rule accidentally painted the header black and hid the logo/menu — this scoping fixes that. --------------------------------------------------------- */ body.kg-dark-page .entry-header, body.kg-dark-page .ast-single-header, body.kg-dark-page #primary, body.kg-dark-page .site-content, body.kg-dark-page #primary .ast-container, body.kg-dark-page .ast-article-single, body.kg-dark-page .inside-article, body.kg-dark-page .entry-content, body.kg-dark-page article, body.single-kg_product .entry-header, body.single-kg_product .ast-single-header, body.single-kg_product #primary, body.single-kg_product .site-content, body.single-kg_product #primary .ast-container, body.single-kg_product .ast-article-single, body.single-kg_product .inside-article, body.single-kg_product .entry-content, body.single-kg_product article { background-color: var(--kg-cream) !important; } body.kg-dark-page .entry-title, body.single-kg_product .entry-title { color: var(--kg-black) !important; } /* Product pages specifically: Astra's default title-bar spacing left a very large gap before the "Available in / Order X before" line underneath — tighten it down. */ body.single-kg_product .entry-header, body.single-kg_product .ast-single-header, body.single-kg_product .page-header { padding-bottom: 0 !important; margin-bottom: 0 !important; } body.single-kg_product .entry-title { margin: 0 0 6px !important; padding-bottom: 0 !important; } body.kg-dark-page .entry-content, body.kg-dark-page .entry-content p, body.single-kg_product .entry-content, body.single-kg_product .entry-content p { color: var(--kg-black); } body.kg-dark-page .entry-content a, body.single-kg_product .entry-content a { color: var(--kg-red); } body.kg-dark-page .ast-separate-container, body.single-kg_product .ast-separate-container { overflow-x: hidden; } /* Product pages only: hide the author/date byline and the previous/next post navigation links — not useful on a food menu item. */ body.single-kg_product .entry-meta, body.single-kg_product .ast-author-details, body.single-kg_product .posted-on, body.single-kg_product .byline, body.single-kg_product .post-navigation, body.single-kg_product nav.navigation { display: none !important; } /* --------------------------------------------------------- 5. Small helpers --------------------------------------------------------- */ a { transition: color 0.15s ease; } /* Buttons never get an underline (only genuine text links do). Covers Astra's own header "button" menu item/widget in addition to the plugin's own buttons (which are also handled in kg-products.css). */ .button, a.button, .ast-button, .ast-header-button a, .main-header-bar-navigation .menu-item.ast-header-button > a, .main-header-bar-navigation ul li.ast-header-button > a { text-decoration: none !important; } .button:hover, a.button:hover, .ast-button:hover, .ast-header-button a:hover { text-decoration: none !important; } /* Header "Order Now" button: matches the site's red CTA color instead of Astra's default blue, which clashed with the amber/black/gold palette. The real markup is Astra's "Custom Button" header element — an wrapping a

(NOT the menu-item-as-button ".ast-header-button" markup, which is a different Astra feature — kept below too in case that's ever used instead). */ .ast-builder-button-wrap .ast-custom-button-link .ast-custom-button, .ast-custom-button-link .ast-custom-button, a.ast-custom-button-link, .ast-header-button .button, .ast-header-button a, .main-header-bar-navigation .menu-item.ast-header-button > a { background-color: var(--kg-red) !important; border-color: var(--kg-red) !important; color: var(--kg-white) !important; } .ast-builder-button-wrap .ast-custom-button-link:hover .ast-custom-button, .ast-custom-button-link:hover .ast-custom-button, a.ast-custom-button-link:hover, .ast-header-button .button:hover, .ast-header-button a:hover, .main-header-bar-navigation .menu-item.ast-header-button > a:hover { background-color: var(--kg-black) !important; border-color: var(--kg-black) !important; color: var(--kg-white) !important; } ::selection { background: var(--kg-gold); color: var(--kg-black); }