/* Theme Name: Salient Child Theme Description: This is a custom child theme for Salient Theme URI: https://themeforest.net/item/salient-responsive-multipurpose-theme/4363266 Author: ThemeNectar Author URI: https://themeforest.net/user/themenectar Template: salient Version: 1.0 */ /* ============================================================ Unified typography ------------------------------------------------------------ The site previously mixed four faces: Dosis, Lato, Open Sans and a Helvetica Neue stack. We now use exactly two: Dosis -> headings, nav, buttons, product titles (brand face) Lato -> body copy, forms, tables, everything else Open Sans is dequeued in functions.php so it is no longer requested at all. Icon fonts (FontAwesome, Iconsmind, Linecons) are deliberately NOT selected here -- they set font-family on themselves, and inheritance must not override that. ============================================================ */ :root { --uni-font-heading: 'Dosis', 'Trebuchet MS', sans-serif; --uni-font-body: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif; } body, p, li, dd, dt, td, th, label, blockquote, figcaption, address, button, input, select, textarea, .woocommerce, .woocommerce-page, .woocommerce table.shop_table, .woocommerce-cart-form, #header-outer .sf-menu li ul li a, .wpb_text_column, .nectar-post-grid-item__excerpt { font-family: var(--uni-font-body) !important; } h1, h2, h3, h4, h5, h6, .nectar-button, .unicase-btn, #header-outer #top nav > ul > li > a, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .product_title, .woocommerce-loop-product__title, .woocommerce ul.products li.product h2, .nectar-fancy-title, .vc_custom_heading, .widget h4, .widgettitle, #footer-outer h4 { font-family: var(--uni-font-heading) !important; } /* Product-card images become links (see acue-card-image-links.js) */ .tigertech-prod-card a.card-img-link, .unicase-prod-card a.card-img-link { display: block; line-height: 0; } .tigertech-prod-card a.card-img-link img, .unicase-prod-card a.card-img-link img { transition: transform .3s ease; } .tigertech-prod-card a.card-img-link:hover img, .unicase-prod-card a.card-img-link:hover img { transform: scale(1.04); } @media (prefers-reduced-motion: reduce) { .tigertech-prod-card a.card-img-link img, .unicase-prod-card a.card-img-link img { transition: none; } .tigertech-prod-card a.card-img-link:hover img, .unicase-prod-card a.card-img-link:hover img { transform: none; } } /* ============================================================ Category landing pages (Standard Racks / Shock Proof / Specialty Cases) — post-WooCommerce-conversion corrections. ============================================================ */ /* 1. These pages are a dark design, but splitting the page-builder blocks left white gaps between sections, and the section headings are white text -> invisible. Make the page itself dark so any gap is dark, rather than chasing each one. */ body.page-id-255, body.page-id-280, body.page-id-282, body.page-id-255 #ajax-content-wrap, body.page-id-280 #ajax-content-wrap, body.page-id-282 #ajax-content-wrap, body.page-id-255 .container-wrap, body.page-id-280 .container-wrap, body.page-id-282 .container-wrap, body.page-id-255 .main-content, body.page-id-280 .main-content, body.page-id-282 .main-content, body.page-id-255 .wpb_row, body.page-id-280 .wpb_row, body.page-id-282 .wpb_row { background-color: #0a0a0a !important; } .usc-section-title, .usr-section-title { color: #ffffff !important; } .usc-section-subtitle, .usr-section-subtitle { color: #9a9a9a !important; } /* 2. Product photos are shot on white. Give the image well a white background so the shot blends instead of sitting in a grey box, and never crop (the Acue logo sits near the edge). */ .usc-prod-img, .usr-prod-img, .tigertech-prod-image-wrapper { background: #ffffff !important; } .usc-prod-img img, .usr-prod-img img, .tigertech-prod-image-wrapper img { object-fit: contain !important; /* !important is load-bearing. Salient ships `.row .col img { height: auto }` (specificity 0,2,1) which outranks this rule, so a 1024x1024 photo resolved to 328px tall inside the 300px well and overflow:hidden sliced ~14px off the top and bottom of every card image. */ width: 100% !important; height: 100% !important; opacity: 1 !important; padding: 10px; box-sizing: border-box; } .usc-prod-img a.card-img-link, .usr-prod-img a.card-img-link, .tigertech-prod-image-wrapper a.card-img-link { display: block; width: 100%; height: 100%; line-height: 0; } /* 3. Cards were sometimes invisible: the page's scroll-reveal script sets .usc-anim-hidden{opacity:0} and only reveals via IntersectionObserver. Shortcode-rendered cards can miss that observer, leaving products permanently blank. Never let a product card depend on JS to be visible. Section headings and the spec table are in the same boat: they sit outside the observer's reach in the shortcode-rendered markup, so on first paint "Specialty Configurations", "General Specifications" and the whole spec table are white text at opacity 0. Nothing on these pages should need JS to be readable. */ .usc-prod-card.usc-anim-hidden, .usr-prod-card.usr-anim-hidden, .usc-products-grid .usc-anim-hidden, .usr-products-grid .usr-anim-hidden, .usc-section-header, .usr-section-header, .usc-specs-wrapper, .usr-specs-wrapper, .tigertech-prod-card { opacity: 1 !important; transform: none !important; } /* 4. Card text colours pinned so nothing inherits onto a matching bg. */ .usc-prod-card, .usr-prod-card { color: #e8e8e8; } .usc-prod-title, .usr-prod-title { color: #ffffff !important; } .usc-prod-sku, .usr-prod-sku { color: #8a8a8a !important; } .usc-spec-val, .usr-spec-val { color: #eeeeee !important; } .usc-spec-label, .usr-spec-label { color: #8a8a8a !important; } .usc-prod-btn, .usr-prod-btn { color: #ffffff !important; } /* 5. The spec table, de-scoped. The page CSS styles this table as `#unicase-specialty-cases .usc-specs-wrapper table th`, but a stray pair of closing divs in the page content ends #unicase-* before the grid, so the table is a sibling of that wrapper rather than a descendant and NONE of those rules match. The table fell back to Salient's default -- a light slab on a black page, with the "white" heading text the design intends rendering as #383838. These repeat the intended styling without the ID, so the table is right whether or not the markup is nested correctly. */ .usc-specs-wrapper table, .usr-specs-wrapper table { width: 100%; border-collapse: separate !important; border-spacing: 0; background: transparent !important; border: none !important; margin: 0; border-radius: 8px; overflow: hidden; } .usc-specs-wrapper table th, .usr-specs-wrapper table th, .usc-specs-wrapper table td, .usr-specs-wrapper table td { background-color: #0f0f0f !important; color: #d4d4d4 !important; border: none !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; padding: 2rem !important; text-align: left; font-size: 1.1rem; vertical-align: middle !important; line-height: 1.6; } .usc-specs-wrapper table th, .usr-specs-wrapper table th { background-color: #181818 !important; color: #ffffff !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.05em; } .usc-specs-wrapper table tr:last-child td, .usr-specs-wrapper table tr:last-child td { border-bottom: none !important; } .usc-specs-wrapper table tr:hover td, .usr-specs-wrapper table tr:hover td, .usc-specs-wrapper table tr:hover th, .usr-specs-wrapper table tr:hover th { background-color: #0f0f0f !important; color: #ffffff !important; } .usc-specs-wrapper table strong, .usr-specs-wrapper table strong { color: #ffffff; } @media (max-width: 768px) { .usc-specs-wrapper, .usr-specs-wrapper { padding: 1.5rem !important; } .usc-specs-wrapper table th, .usr-specs-wrapper table th, .usc-specs-wrapper table td, .usr-specs-wrapper table td { padding: 1.15rem 1rem !important; font-size: 1rem; background-color: #111111 !important; color: #dddddd !important; } } /* 6. Same fallout: the grid and the spec table sit outside .usc-container in a type="full_width_content" row, so they lost its max-width and side padding and ran flush to the viewport edge. Re-apply that geometry. */ .usc-products-grid, .usr-products-grid, .usc-specs-wrapper, .usr-specs-wrapper { max-width: 1600px; margin-left: auto; margin-right: auto; box-sizing: border-box; } .usc-products-grid, .usr-products-grid { padding: 0 3rem; } @media (max-width: 768px) { .usc-products-grid, .usr-products-grid { padding: 0 1rem; } .usc-specs-wrapper, .usr-specs-wrapper { margin-left: 1rem; margin-right: 1rem; } } /* 7. Hero fallbacks. Every hero on this site is white text over a background IMAGE with no background COLOUR behind it, and the category heroes pull that image from tch1.com -- a third-party host that intermittently answers 403. Whenever one of those requests fails the headline is white on the theme's white page. Give each hero an opaque dark base so the copy stays readable no matter what the image does. */ .unicase-hero-wrapper, .usc-hero, .usr-hero { background-color: #0a0a0a; } /* 8. Vertical rhythm. Salient ships `.wpb_wrapper > div { margin-bottom: 24px }` (0,1,1), which outranks the page's own `.usc-products-grid { margin-bottom: 10rem }` and `.usc-section-header { margin-bottom: 6rem }` (both 0,1,0). The grid, the "General Specifications" heading and the spec table are all direct children of .wpb_wrapper (see note 5), so all three collapsed to 24px and the heading ended up wedged between the last row of cards and the table with no air on either side. The first heading is nested one level deeper, which is why only the bottom of the page looked crushed. Restore the intended spacing at a weight that actually wins. */ .usc-products-grid, .usr-products-grid { margin-bottom: 8rem !important; } .usc-section-header, .usr-section-header { margin-bottom: 6rem !important; } .usc-specs-wrapper, .usr-specs-wrapper { margin-bottom: 7rem !important; } @media (max-width: 768px) { .usc-products-grid, .usr-products-grid { margin-bottom: 4.5rem !important; } .usc-section-header, .usr-section-header { margin-bottom: 3rem !important; } .usc-specs-wrapper, .usr-specs-wrapper { margin-bottom: 4.5rem !important; } } /* 9. The social row was drawn from two different typefaces. Salient remaps .fa-facebook onto its own `icomoon` set (content "\e60d") while .fa-youtube-play / .fa-instagram / .fa-yelp fall through to FontAwesome 4.7, so the Facebook "f" rendered visibly heavier and larger than the three icons beside it and the row didn't read as one set. Put Facebook back on FontAwesome with the others. */ .fa-facebook:before, .fa-facebook-f:before { font-family: 'FontAwesome' !important; content: "\f09a" !important; }