/** * OrganicsFood Global CSS — Organic Biophilic 3.7.1 * Override-uri SAFE Shoptimizer + elemente globale * REGULA: Nu atingem navigatia, grid-ul produselor sau culorile din Customizer * Fix: footer link spacing, focus ring, touch targets * v3.3: Elementor CTA color harmony, card title line-height * v3.4: Footer width alignment with .col-full (content-box + matching padding) * v3.5: Removed !important from .elementor-button bg so Elementor per-button colors work * v3.6: Fix green-on-green — body.entry-content (Elementor canvas) polluted all links. * Use :not(body) to scope .entry-content only to actual content wrappers. * v3.7: Single product — constrain tabs/description to container width, center tabs. * v3.7.1: Refined biophilic border on description card — subtle green tint, * soft radius, micro-shadow for organic depth. * @version 3.7.1 */ /* ===================================================== SMOOTH SCROLL + SELECTION ===================================================== */ html { scroll-behavior: smooth; } ::selection { background: var(--color-primary-light); color: var(--color-primary-dark); } /* ===================================================== BASE TYPOGRAPHY ===================================================== */ body, .site { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--color-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6, .entry-title, .product_title, .page-title { font-family: var(--font-heading); font-weight: var(--weight-bold); line-height: var(--leading-tight); color: var(--color-text); } h1 { font-size: var(--text-4xl); } h2 { font-size: var(--text-3xl); } h3 { font-size: var(--text-2xl); } h4 { font-size: var(--text-xl); } h5 { font-size: var(--text-lg); } h6 { font-size: var(--text-base); } p { margin-bottom: var(--space-4); line-height: var(--leading-normal); } /* Links — doar content links, NU navigatie/footer Elementor Canvas pune .entry-content pe , asa ca .entry-content a ar matcha TOATE linkurile. :not(body) limiteaza regula la div.entry-content din articole. */ .entry-content:not(body) a, .woocommerce-product-details__short-description a, .term-description a, .comment-content a { color: var(--color-primary); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); } .entry-content:not(body) a:hover, .woocommerce-product-details__short-description a:hover { color: var(--color-primary-dark); } /* ===================================================== FOCUS STATES — Keyboard accessibility ===================================================== */ :focus-visible { outline: var(--focus-ring-width) solid var(--color-focus-ring); outline-offset: var(--focus-ring-offset); } :focus:not(:focus-visible) { outline: none; } /* ===================================================== HEADER — Doar shadow pe sticky ===================================================== */ .col-full-nav.is_stuck { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .custom-logo { transition: transform var(--duration-normal) var(--ease-out); } .custom-logo:hover { transform: scale(1.02); } /* Search bar enhancement */ .site-search input[type="search"], .dgwt-wcas-search-wrapp input[type="search"] { border-radius: var(--radius-md); font-family: var(--font-body); transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); } .site-search input[type="search"]:focus, .dgwt-wcas-search-wrapp input[type="search"]:focus { box-shadow: 0 0 0 var(--focus-ring-width) var(--color-focus-ring); outline: none; } /* ===================================================== NAVIGATION — Explicit white hover on green nav bar Safety net: body.entry-content no longer leaks, but this ensures nav links always stay white. ===================================================== */ @media (min-width: 993px) { .col-full-nav .menu-primary-menu-container > ul > li > a:hover, .col-full-nav .menu-primary-menu-container > ul > li > a:focus { color: #ffffff; } } /* ===================================================== BUTTONS — radius, cursor, hover lift ===================================================== */ .button, button, input[type="submit"], .wp-element-button { font-family: var(--font-body); font-weight: var(--weight-semibold); letter-spacing: 0.01em; border-radius: var(--radius-md); cursor: pointer; min-height: var(--touch-min); transition: background-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); } .button.alt, .button.checkout, .single_add_to_cart_button { box-shadow: var(--shadow-button); border-radius: var(--radius-md); } .button.alt:hover, .button.checkout:hover, .single_add_to_cart_button:hover { box-shadow: var(--shadow-button-hover); transform: translateY(-1px); } .button.alt:active, .single_add_to_cart_button:active { transform: translateY(0); box-shadow: var(--shadow-sm); } .shoptimizer-sticky-add-to-cart .button, .csuspended-cart-bar .button { border-radius: var(--radius-md); } /* ===================================================== ELEMENTOR CTA BUTTONS — Color Harmony v3.5 Default fallback to --color-primary (no !important) Elementor per-button colors override via higher specificity ===================================================== */ .elementor-button { background-color: var(--color-primary); border-radius: var(--radius-md) !important; font-family: var(--font-body) !important; font-weight: var(--weight-semibold) !important; transition: background-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out) !important; } .elementor-button:hover { background-color: var(--color-primary-dark); transform: translateY(-1px); } /* ===================================================== CURSOR POINTER — Clickable elements ===================================================== */ a, label[for], .woocommerce-tabs .tabs li a, .widget-area .widget li a, .woocommerce-pagination a, select { cursor: pointer; } /* ===================================================== BREADCRUMBS ===================================================== */ .woocommerce-breadcrumb { font-size: var(--text-sm); color: var(--color-text-muted); } .woocommerce-breadcrumb a { color: var(--color-text-secondary); transition: color var(--duration-fast) var(--ease-out); } .woocommerce-breadcrumb a:hover { color: var(--color-primary); } /* ===================================================== SECTION BACKGROUNDS ===================================================== */ .section-cream, .bg-cream { background-color: var(--color-cream); } .section-white, .bg-white { background-color: var(--color-white); } .section-primary-light, .bg-primary-light { background-color: var(--color-primary-light); } /* ===================================================== PRODUCT CARD TITLE — line-height fix v3.3 Shoptimizer default 1.3 too tight for readability ===================================================== */ ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2 { line-height: var(--leading-snug); } /* ===================================================== SINGLE PRODUCT — Tabs & Description container v3.7 product.css sets .woocommerce-tabs.wc-tabs-wrapper to width:100%; max-width:100% — making it full viewport. We constrain it to match .product-details-wrapper which uses calc(5.2325em + 1439px) from Kirki dynamic CSS. Also center the tab navigation links. v3.7.1: Biophilic card treatment — subtle green-tinted border (12% primary opacity), soft 1rem radius, and a micro forest-shadow for organic depth. White background lifts the description off the page canvas. ===================================================== */ .single-product .woocommerce-tabs.wc-tabs-wrapper { max-width: calc(5.2325em + 1439px); margin-left: auto; margin-right: auto; margin-top: var(--space-8); border: 1px solid rgba(21, 128, 61, 0.12); border-radius: var(--radius-lg); box-shadow: 0 2px 8px rgba(26, 43, 37, 0.04); background: var(--color-white); } /* Center tab navigation */ .single-product .woocommerce-tabs ul.tabs.wc-tabs { justify-content: center; } /* ===================================================== TRUST BADGES COMPONENT ===================================================== */ .trust-badges { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-6); padding: var(--space-10) var(--space-4); max-width: var(--container-max); margin: 0 auto; } .trust-badge { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); } .trust-badge__icon { width: 48px; height: 48px; color: var(--color-primary); } .trust-badge__title { font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: var(--text-base); color: var(--color-text); } .trust-badge__text { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-normal); } /* ===================================================== SCROLL REVEAL ANIMATION CLASSES ===================================================== */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out); } .reveal.is-visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 50ms; } .reveal-delay-2 { transition-delay: 100ms; } .reveal-delay-3 { transition-delay: 150ms; } .reveal-delay-4 { transition-delay: 200ms; } /* ===================================================== FOOTER — footer-organics custom v3.4: Aligned with Shoptimizer .col-full box model .col-full computed: content-box, max-width 1439px, padding 2.617924em We mirror these exact values for pixel-perfect alignment ===================================================== */ .footer-organics { background: var(--color-text); color: rgba(255, 255, 255, 0.8); font-family: var(--font-body); font-size: var(--text-sm); line-height: var(--leading-normal); } .footer-organics__inner { box-sizing: content-box; max-width: var(--container-max); margin: 0 auto; padding: var(--space-10) 2.617924em var(--space-6); display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--space-8); } @media (max-width: 992px) { .footer-organics__inner { grid-template-columns: 1fr 1fr; gap: var(--space-6); padding: var(--space-8) 1em var(--space-4); } .footer-organics__bottom { padding-left: 1em; padding-right: 1em; } } @media (max-width: 480px) { .footer-organics__inner { grid-template-columns: 1fr; } } .footer-organics__heading { font-family: var(--font-heading); font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--color-white); margin-bottom: var(--space-3); } .footer-organics a { color: rgba(255, 255, 255, 0.7); transition: color var(--duration-fast) var(--ease-out); } .footer-organics a:hover { color: var(--color-white); } .footer-organics__links { list-style: none; padding: 0; margin: 0; } .footer-organics__links li { margin-bottom: var(--space-1); } .footer-organics__links li a { display: inline-flex; align-items: center; padding: 2px 0; font-size: var(--text-sm); line-height: var(--leading-normal); } /* Touch target pe mobil — min 44px */ @media (max-width: 768px) { .footer-organics__links li a { min-height: var(--touch-min); padding: var(--space-1) 0; } } .footer-organics__bottom { box-sizing: content-box; max-width: var(--container-max); margin: 0 auto; padding: var(--space-4) 2.617924em; border-top: 1px solid rgba(255, 255, 255, 0.1); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-4); } .footer-organics__copyright { font-size: var(--text-xs); color: rgba(255, 255, 255, 0.5); } .footer-organics__payment-icons { display: flex; gap: var(--space-3); align-items: center; } .footer-organics__social { display: flex; gap: var(--space-3); } .footer-organics__social a { display: flex; align-items: center; justify-content: center; width: var(--touch-min); height: var(--touch-min); border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.1); transition: background-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); } .footer-organics__social a:hover { background: var(--color-primary); transform: translateY(-2px); } .footer-organics__social svg { width: 18px; height: 18px; fill: currentColor; } /* ===================================================== UTILITY CLASSES ===================================================== */ .container-max { max-width: var(--container-max); margin-left: auto; margin-right: auto; padding-left: var(--space-4); padding-right: var(--space-4); } .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ===================================================== RESPONSIVE — Mobile adjustments ===================================================== */ @media (max-width: 768px) { h1 { font-size: var(--text-3xl); } h2 { font-size: var(--text-2xl); } h3 { font-size: var(--text-xl); } } /* ===================================================== WooCommerce Notices ===================================================== */ .woocommerce-message, .woocommerce-info { border-radius: var(--radius-sm); font-family: var(--font-body); font-size: var(--text-sm); } .woocommerce-error { border-radius: var(--radius-sm); font-family: var(--font-body); font-size: var(--text-sm); }