/* ========================================================================== Door Stud — site-wide brand chrome Loaded on every page (see includes/site-styling.php). Two jobs: 1. Keep Divi's accent color readable (below). 2. Brand the footer (further down). Footer *markup* is built in provisioning/setup-footer.php. Page-specific work lives elsewhere: doorstud-woocommerce.css (product page) and doorstud-checkout.css (checkout). ========================================================================== */ :root { --ds-black: #0f0f0f; --ds-white: #ffffff; --ds-yellow: #F5C300; --ds-yellow-dark: #c49a00; --ds-font-display: 'Barlow Condensed', sans-serif; --ds-font-body: 'Barlow', sans-serif; } /* ── De-blue ──────────────────────────────────────────────────────────── Divi's accent color is set to the brand yellow in provisioning, which removes Elegant Themes' blue everywhere Divi generates CSS — links, prices, notices, widget links. But Divi uses the accent as a *text* color in places where the background is white, and yellow text on white is unreadable. So: yellow stays for fills and accents; text links go near-black and warm up on hover. */ #main-content a, #sidebar a, .woocommerce-breadcrumb a, .woocommerce-loop-product__title a { color: var(--ds-black); } #main-content a:hover, #sidebar a:hover, .woocommerce-breadcrumb a:hover, .woocommerce-loop-product__title a:hover { color: var(--ds-yellow-dark); } /* Prices — Divi paints these with the accent color, and its customizer stylesheet is enqueued after this one, so these need the `body` prefix to outrank it (same trick as #main-footer below). */ body .woocommerce div.product span.price, body .woocommerce div.product p.price, body .woocommerce ul.products li.product .price, body .woocommerce div.product span.price ins, body .woocommerce ul.products li.product .price ins { color: var(--ds-black); } /* Struck-through "was" prices stay muted rather than black. */ body .woocommerce div.product span.price del, body .woocommerce ul.products li.product .price del { color: #9a9690; } /* The stock "Sale!" badge ships salmon-pink — the one off-brand splash left in the store. Lives here rather than in doorstud-woocommerce.css because it appears on shop and category pages too, not just the product page. Divi sets the salmon with `.woocommerce span.onsale { ... !important }`, so we need !important back on the two properties it fights us on, AND enough specificity to outrank it. Hence body.woocommerce rather than the wrapper — on shop and category pages the `woocommerce` class sits on , not on any element around the badge, so a descendant selector never matched. */ body.woocommerce span.onsale, body.woocommerce-page span.onsale { background: var(--ds-black) !important; border-radius: 0 !important; color: var(--ds-yellow); font-family: var(--ds-font-display); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; min-height: 0; min-width: 0; line-height: 1; padding: 0.6rem 1rem; } /* Store notices ("Please choose product options", "added to cart", coupon errors). Divi fills these with the accent color and sets white text on top — fine when the accent was blue, illegible now that it's yellow. Black panel, yellow rule, white text. */ .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice { background: var(--ds-black) !important; color: var(--ds-white) !important; border-top: none; border-left: 4px solid var(--ds-yellow); font-family: var(--ds-font-body); } .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { color: var(--ds-yellow) !important; } .woocommerce-message a, .woocommerce-info a, .woocommerce-error a { color: var(--ds-yellow) !important; } /* ========================================================================== HEADER — the "Buy Now" nav button The menu item carries the ds-nav-buy class, set when the item is created in provisioning/setup.sh. ========================================================================== */ /* Divi stretches each nav link to the bottom of the header with `.et_header_style_left #et-top-navigation nav>ul>li>a { padding-bottom: 33px }` (20px once the header shrinks on scroll), which would leave the button with a long tail below its label. Overriding it needs a *second* id — that rule already carries one id plus a class, so no amount of classes on our side wins the tie, and Divi's stylesheet is enqueued after ours. Hence #main-header. With the padding gone the button's own padding pushes its label below the plain links beside it, so the negative top margin (the same size as the padding above the label) pulls it back onto their line — leaving the button box centered on the row. */ #main-header #et-top-navigation nav > ul > li.ds-nav-buy { padding-right: 0; margin-left: 0.75rem; } #main-header #et-top-navigation nav > ul > li.ds-nav-buy > a { display: inline-block; margin-top: -0.6rem; padding: 0.6rem 1.4rem; background: var(--ds-yellow); color: var(--ds-black); font-family: var(--ds-font-display); font-weight: 700; font-size: 1rem; letter-spacing: 0.08em; line-height: 1; text-transform: uppercase; transition: background-color 0.2s ease; } /* Divi fades nav links to 0.7 opacity on hover — that reads as a disabled button. Darken the fill instead. */ #main-header #et-top-navigation nav > ul > li.ds-nav-buy > a:hover { background: var(--ds-yellow-dark); opacity: 1; } /* The mobile menu is a plain stacked list — no header height to align to, so the button is just a filled row. */ .et_mobile_menu li.ds-nav-buy > a { background: var(--ds-yellow); color: var(--ds-black) !important; font-family: var(--ds-font-display); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } /* ========================================================================== FOOTER ========================================================================== */ /* Divi's dynamic stylesheet is enqueued after this one and carries `#main-footer { background-color: #222 }` — identical specificity, so it would win on source order. The `body` prefix outranks it. Everything below is already more specific than Divi's rules and needs no such help. */ body #main-footer { --ds-black: #0f0f0f; --ds-yellow: #F5C300; --ds-font-display: 'Barlow Condensed', sans-serif; --ds-font-body: 'Barlow', sans-serif; background-color: var(--ds-black); border-top: 3px solid var(--ds-yellow); font-family: var(--ds-font-body); } #main-footer #footer-widgets { padding: 4.5rem 0 3rem; } #main-footer .footer-widget { margin-bottom: 2.5rem; color: rgba(255, 255, 255, 0.6); } #main-footer .footer-widget .fwidget { margin-bottom: 0; } /* Divi draws a blue bullet on every footer list item via a :before pseudo, which `list-style: none` can't remove. Kill it — our lists carry their own layout — and reclaim the indent it was reserving. */ #main-footer .footer-widget li:before { display: none; } #main-footer .footer-widget li { padding-left: 0; } /* ── Column headings ───────────────────────────────────────────────── */ #main-footer .footer-widget h4.title { font-family: var(--ds-font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; margin: 0 0 1.5rem; padding-bottom: 0.75rem; position: relative; } #main-footer .footer-widget h4.title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 32px; height: 3px; background: var(--ds-yellow); } /* ── Links (all of them, including Divi's defaults) ────────────────── */ #main-footer a { color: rgba(255, 255, 255, 0.6); text-decoration: none; transition: color 0.2s ease; } #main-footer a:hover { color: var(--ds-yellow); } /* ── Column 1: brand ───────────────────────────────────────────────── */ #main-footer .ds-footer-logo { display: block; width: 200px; max-width: 100%; height: auto; margin: 0 0 1.5rem; } #main-footer .ds-footer-blurb { font-size: 0.9375rem; line-height: 1.8; color: rgba(255, 255, 255, 0.55); margin: 0 0 1.75rem; padding: 0; } /* Five icons have to fit the width of one footer column, so they're sized to land just inside it rather than wrapping onto a second row. */ #main-footer .ds-footer-social { display: flex; gap: 0.5rem; flex-wrap: wrap; } #main-footer .ds-footer-social-link { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.7); transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } #main-footer .ds-footer-social-link:hover { background: var(--ds-yellow); border-color: var(--ds-yellow); color: var(--ds-black); } /* ── Column 2: helpful links ───────────────────────────────────────── */ #main-footer .ds-footer-links { list-style: none; margin: 0; padding: 0; } #main-footer .ds-footer-links li { margin: 0 0 0.625rem; padding: 0; list-style: none; font-size: 0.9375rem; } /* ── Column 3: offices ─────────────────────────────────────────────── */ #main-footer .ds-footer-office + .ds-footer-office { margin-top: 1.5rem; } #main-footer .ds-footer-office-label { display: block; font-family: var(--ds-font-display); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ds-yellow); margin-bottom: 0.375rem; } #main-footer .ds-footer-office p { font-size: 0.9375rem; line-height: 1.8; margin: 0; padding: 0; } /* ── Column 4: government identifiers ──────────────────────────────── */ #main-footer .ds-footer-ids { list-style: none; margin: 0 0 1.5rem; padding: 0; } #main-footer .ds-footer-ids li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; list-style: none; margin: 0; padding: 0.625rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.875rem; } #main-footer .ds-footer-ids span { color: rgba(255, 255, 255, 0.45); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.75rem; line-height: 1.6; } #main-footer .ds-footer-ids strong { color: #fff; font-weight: 600; white-space: nowrap; } /* ── Bottom bar ────────────────────────────────────────────────────── */ #main-footer #footer-bottom { background-color: #080808; border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 1.5rem 0; } #main-footer #footer-info { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; float: none; width: 100%; padding: 0; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.4); } #main-footer .ds-footer-legal { display: flex; gap: 1.5rem; } @media (max-width: 980px) { #main-footer #footer-widgets { padding: 3rem 0 1rem; } #main-footer #footer-info { justify-content: center; text-align: center; } }