/* Theme Name: Grove Theme Theme URI: https://www.grove.sa Version: 2.0.0 Template: Divi Author: Grove Team Author URI: https://www.grove.sa Description: A child theme for Divi 5 Theme, built for Grove\'s website Text Domain: grove-theme License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html */ /* ========================================================== Grove Theme – Child Theme Styles ========================================================== */ /* ---------------------------------------------------------- Liquid Glass Header (Desktop) ---------------------------------------------------------- */ .liquid-glass-sticky { background: none !important; display: flex; justify-content: center; } .liquid-glass-bar { width: 100%; max-width: 1200px; margin: 0 auto; padding: 14px 22px; border-radius: 18px; background: rgba(255,255,255,0.45); backdrop-filter: blur(11px) saturate(110%); -webkit-backdrop-filter: blur(11px) saturate(110%); box-shadow: 0 10px 30px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.4); transition: background .35s ease, box-shadow .35s ease; } /* Sticky header state */ .et_pb_sticky--top .liquid-glass-bar { background: linear-gradient( 180deg, rgba(255,255,255,0.35), rgba(255,255,255,0.45) ); border: 1px solid rgba(255,255,255,0.15); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); box-shadow: 0 4px 18px rgba(0,0,0,0.15); } /* Safe centering for liquid glass header */ .liquid-glass-sticky { display: flex; justify-content: center; } .liquid-glass-bar { width: 100%; max-width: 1200px; } /* ---------------------------------------------------------- Liquid Glass Header (Mobile) ---------------------------------------------------------- */ @media (max-width: 768px) { .liquid-glass-bar { display: flex !important; align-items: center; justify-content: space-between; max-width: calc(100% - 24px); padding: 10px 12px; gap: 8px; border-radius: 14px; background: rgba(255,255,255,0.52); backdrop-filter: blur(8px) saturate(120%); -webkit-backdrop-filter: blur(8px) saturate(120%); box-shadow: 0 6px 18px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.35); } .et_pb_sticky--top .liquid-glass-bar { padding: 8px 12px; background: rgba(255,255,255,0.42); border: 1px solid rgba(255,255,255,0.18); } .et_pb_sticky--top { position: relative !important; } .liquid-glass-bar > .et_pb_column { width: auto !important; flex: 0 0 auto !important; margin: 0 !important; } .liquid-glass-bar .et_pb_image img { height: 28px; width: auto; } .liquid-glass-bar .et_pb_text { padding: 6px 10px; border-radius: 999px; background: rgba(0,0,0,0.85); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; } } /* Extra small devices */ @media (max-width: 390px) { .liquid-glass-bar { gap: 6px; padding: 8px 10px; } .liquid-glass-bar .et_pb_text { font-size: 12px; padding: 5px 8px; } } /* ========================================================== Grove Farmer Form – Correct CF7 Layout (Divi-safe) ========================================================== */ /* Base form layout */ .wpcf7-form { display: flex; flex-wrap: wrap; row-gap: 10px; column-gap: 14px; } /* Reset paragraph wrapper */ .wpcf7-form p { width: 100%; margin: 0; padding-bottom: 0; } /* Labels */ .wpcf7-form label { display: block; width: 100%; color: #ffffff; font-weight: 500; } /* ---------------------------------------------------------- HALF-WIDTH FIELDS (2 per row on desktop) ---------------------------------------------------------- */ /* Mobile default: full width */ .wpcf7-form p .form-half-field { width: 100%; } /* Desktop: split into two columns */ @media (min-width: 768px) { .wpcf7-form p:has(.form-half-field) { width: calc(50% - 7px); } } /* ---------------------------------------------------------- FULL-WIDTH FIELDS ---------------------------------------------------------- */ .wpcf7-form .form-full-field { width: 100%; } /* ---------------------------------------------------------- INPUTS / SELECTS / TEXTAREA ---------------------------------------------------------- */ .wpcf7-form input[type="text"], .wpcf7-form input[type="tel"], .wpcf7-form select, .wpcf7-form textarea { width: 100%; padding: 8px; border-radius: 8px; border: none; background: #F7F7F7; color: #0F0F0F; font-size: 14px; box-sizing: border-box; } /* Focus state */ .wpcf7-form input:focus, .wpcf7-form select:focus, .wpcf7-form textarea:focus { outline: none; background: #ffffff; box-shadow: 0 0 0 2px rgba(0,143,57,0.25); } /* ---------------------------------------------------------- TEXTAREA — FIXED HEIGHT ---------------------------------------------------------- */ .wpcf7-form textarea { height: 108px !important; resize: vertical; } /* ---------------------------------------------------------- SUBMIT BUTTON ---------------------------------------------------------- */ .wpcf7-form input[type="submit"] { width: 100%; padding: 14px; border-radius: 8px; border: none; background: #008F39; color: #ffffff; font-size: 16px; cursor: pointer; transition: background 0.25s ease; font-weight: bold; } .wpcf7-form input[type="submit"]:hover { background: #00CC52; } .wpcf7-response-output { color: #ffffff; font-size: 20px; } /* ---------------------------------------------------------- Floating WhatsApp Button ---------------------------------------------------------- */ #grove-wa-float { position: fixed; left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); width: 56px; height: 56px; border-radius: 999px; background: linear-gradient(135deg, #25D366, #00CC52); backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); display: flex; align-items: center; justify-content: center; z-index: 99999; cursor: pointer !important; pointer-events: auto !important; box-shadow: 0 10px 28px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.35); transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease; } #grove-wa-float img { width: 68%; height: 68%; display: block; object-fit: contain; border-radius: 999px; pointer-events: none; } #grove-wa-float:hover, #grove-wa-float:focus-visible { transform: translateY(-4px) scale(1.06); filter: brightness(1.05); box-shadow: 0 18px 44px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.45); } #grove-wa-float:active { transform: translateY(-1px) scale(1.02); box-shadow: 0 10px 26px rgba(0,0,0,.22); } @media (max-width: 768px){ #grove-wa-float { width: 52px; height: 52px; } } /* ========================================================== Other small stuff ========================================================== */ /* Popup Background */ .dipi-popup-wrapper .et_flex_section { background: none; padding: 5% 10%; }