/* Theme Name: AutoDak Service Theme URI: https://autodakservice.nl Description: Specialist in panoramadak- en schuifdakreparaties Version: 1.0 Author: AutoDak Service Text Domain: autodakservice */ html { scroll-behavior: smooth; } body { /* overflow-x: clip prevents horizontal scroll without breaking position:sticky (unlike overflow-x: hidden which creates a new stacking context). */ overflow-x: clip; } /* ── FOUC prevention for deferred CSS (RabbitLoader etc.) ── */ /* Cap inline SVG icons so they never flash at native size before Tailwind loads. style.css is loaded synchronously, Tailwind CDN may be deferred by caching plugins. */ header svg, footer svg, section svg, button svg, a svg { max-width: 2rem; max-height: 2rem; } /* Brand logo on merkpagina header — override the 2rem cap */ .brand-logo-large svg { max-width: none; max-height: none; } /* WhatsApp floating button - slightly larger */ .fixed svg { max-width: 1.75rem; max-height: 1.75rem; } /* ── Modal form - compact layout ── */ #serviceModal .wpcf7-form { gap: 0.625rem; } #serviceModal .wpcf7-form label { margin-bottom: 0.125rem; font-size: 0.8125rem; } #serviceModal .wpcf7 input[type="text"], #serviceModal .wpcf7 input[type="email"], #serviceModal .wpcf7 input[type="tel"], #serviceModal .wpcf7 select { padding: 0.5rem 0.75rem !important; font-size: 0.875rem !important; } #serviceModal .wpcf7 textarea { min-height: 60px; height: 60px; font-size: 0.875rem !important; padding: 0.5rem 0.75rem !important; } #serviceModal .wpcf7 input[type="submit"] { padding: 0.625rem 1rem !important; font-size: 0.9375rem !important; } @media (max-width: 767px) { #serviceModal .sticky { position: relative; } #serviceModal .max-h-\[90vh\] { max-height: 95vh; } #serviceModal .px-6 { padding-left: 1rem; padding-right: 1rem; } #serviceModal .py-6 { padding-top: 0.5rem; padding-bottom: 0.75rem; } } /* Hero: op tablet niet fullscreen hoog — content bepaalt de hoogte */ @media (min-width: 640px) and (max-width: 1279px) { #home { min-height: 0 !important; } /* Titel en omschrijving centreren op tablet — !important wint van WordPress stylesheet overrides. max-width: none voorkomt dat de 42rem beperking de centering verstoort. */ #home h1, #home .lcp-text { text-align: center !important; max-width: none !important; } } .text-gradient { background: linear-gradient(135deg, #2563eb, #3b82f6, #60a5fa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* CLS prevention: ALL .reveal elements start invisible before first paint. 'gsap-ready' is added synchronously in (before paint) so this fires before the browser renders anything. GSAP only animates to visible. Removes the need for gsap.set() calls → no forced reflow. Only applies when JS is enabled (gsap-ready class set in head inline script). */ html.gsap-ready .reveal { opacity: 0; transform: translateY(8px); will-change: transform, opacity; } /* Once GSAP animates an element, it sets inline opacity/transform → overrides this. */ /* ── Contact Form 7 ── */ /* Reset CF7 default spacing */ .wpcf7-form p { margin-bottom: 0 !important; } .wpcf7-form { display: flex; flex-direction: column; gap: 1.25rem; } /* Labels */ .wpcf7-form label { display: block; font-size: 0.875rem; font-weight: 600; color: #374151; margin-bottom: 0.375rem; } /* Input fields */ .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 select, .wpcf7 textarea { width: 100% !important; padding: 0.625rem 0.875rem !important; background-color: #f9fafb !important; border: 1.5px solid #e5e7eb !important; border-radius: 0.5rem !important; color: #111827 !important; font-size: 0.9375rem !important; font-family: inherit !important; outline: none !important; box-shadow: none !important; transition: border-color 0.2s, box-shadow 0.2s !important; -webkit-appearance: none; } /* Placeholder styling */ .wpcf7 input::placeholder, .wpcf7 textarea::placeholder { color: #9ca3af; opacity: 1; } /* Focus states */ .wpcf7 input[type="text"]:focus, .wpcf7 input[type="email"]:focus, .wpcf7 input[type="tel"]:focus, .wpcf7 select:focus, .wpcf7 textarea:focus { border-color: #3b82f6 !important; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important; background-color: #fff !important; } /* Textarea */ .wpcf7 textarea { min-height: 120px; resize: vertical; } @media (max-width: 767px) { .wpcf7 textarea { min-height: 44px; height: 44px; } .wpcf7-form { gap: 0.5rem; } .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 select, .wpcf7 textarea { padding: 0.4rem 0.75rem !important; font-size: 0.8125rem !important; } .wpcf7-form label { margin-bottom: 0.125rem; font-size: 0.75rem; } .wpcf7 input[type="submit"] { padding: 0.6rem 1rem !important; font-size: 0.875rem !important; } } /* Select dropdown arrow */ .wpcf7 select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 0.75rem center !important; padding-right: 2.5rem !important; } /* Submit button */ .wpcf7 input[type="submit"] { width: 100% !important; padding: 0.75rem 1.5rem !important; background-color: #2563eb !important; color: #fff !important; font-weight: 600 !important; font-size: 1rem !important; font-family: inherit !important; border-radius: 0.5rem !important; border: none !important; cursor: pointer; transition: background-color 0.2s, transform 0.1s !important; box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3) !important; } .wpcf7 input[type="submit"]:hover { background-color: #1d4ed8 !important; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35) !important; } .wpcf7 input[type="submit"]:active { transform: translateY(1px); } /* Validation */ .wpcf7-not-valid { border-color: #ef4444 !important; } .wpcf7-not-valid-tip { color: #ef4444 !important; font-size: 0.75rem !important; margin-top: 0.25rem !important; display: block; } /* Success / error response messages */ .wpcf7-response-output { margin: 1rem 0 0 0 !important; padding: 0.75rem 1rem !important; border-radius: 0.5rem !important; font-size: 0.875rem !important; } .wpcf7-mail-sent-ok, .wpcf7 form.sent .wpcf7-response-output { border-color: #10b981 !important; background-color: #ecfdf5 !important; color: #065f46 !important; } .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output { border-color: #ef4444 !important; background-color: #fef2f2 !important; color: #991b1b !important; } /* Spinner */ .wpcf7-spinner { display: none !important; }