/* Site-specific CSS variables - generated per site */ :root { --primary: #fef3c7; --primary-dark: #00000c; --secondary: #fef3c7; --accent: #f59e0b; --dark: #111827; --light: #f8fafc; } /* Animations — Progressive Enhancement: Elements are VISIBLE by default. Only hidden when JS adds .js-animate-ready to . If JS fails or is blocked, all content stays visible. */ [data-animate] { transition: opacity 0.6s ease, transform 0.6s ease; } /* Only hide when JS confirms IntersectionObserver is available */ html.js-animate-ready [data-animate] { opacity: 0; transform: translateY(30px); } [data-animate].animate-in { opacity: 1 !important; transform: translateY(0) !important; } /* Smooth scroll */ html { scroll-behavior: smooth; } /* Custom scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--dark); } ::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 4px; } /* Section spacing consistency */ .section-padding { padding: 5rem 0; } @media (max-width: 768px) { .section-padding { padding: 3rem 0; } } /* ========== CONTRAST & READABILITY FIXES ========== */ /* ── Header contrast contract ────────────────────────────────────────────── * The rule below used to promise "always has solid background for contrast" * in a comment and set no background at all, while main.js made the header * transparent on load and cleared the link colour. Dark nav text ended up over * a dark hero scrim at 1.08:1 measured — invisible (demo-fb1e, 2026-07-27). * * The invariant is not "never transparent"; it is that text must contrast with * whatever is behind it in EVERY state. So background and foreground are one * inseparable pair of variables, and there are exactly two legal states: * * solid (default) opaque bar, dark text — 17.7:1 * over-hero scrim over the hero, light text — >= 4.5:1 vs ANY backdrop * * The over-hero alpha is not a taste knob. For white text to clear 4.5:1 even * over a pure white backdrop, the scrim needs alpha >= 0.54; 0.62 leaves * headroom. Lowering it silently breaks the invariant. * * Keyed on BOTH the attribute (current main.js) and .bg-transparent (the class * older deployed copies of main.js toggle), so the contract holds either way. * * COLOURS ARE WRITTEN IN DECIMAL ON PURPOSE. At generation, assembler.ts * replaceAll-s this file's palette hex literals (primary, primary-dark, * secondary, accent, dark, light) with the site's own colours — the dark one * included, which is exactly the foreground below. A guarantee that a per-site * colour can silently invalidate is not a guarantee, so rgb() notation keeps * these two values out of that substitution. Branding is expressed through the * palette variables at the top of this file; legibility is fixed here. */ header { --hgai-header-bg: #ffffff; --hgai-header-fg: rgb(17, 24, 39); position: sticky; top: 0; z-index: 50; box-shadow: 0 1px 3px rgba(0,0,0,0.08); } /* Beats the block's own bg-white/95 utility class on specificity, so ONE layer * owns the background in both states. */ header:not(.bg-transparent):not([data-hgai-header="over-hero"]) { background-color: var(--hgai-header-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } header.bg-transparent, header[data-hgai-header="over-hero"] { --hgai-header-bg: rgba(17, 24, 39, 0.62); --hgai-header-fg: #ffffff; background-color: var(--hgai-header-bg); /* Blur only means something once there is a background to blur. */ backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: none; } /* Foreground follows the background automatically. Elements carrying their own * RESTING background (the "Rezervă" CTA) keep their own colour pair. * * The exclusion is anchored to a token boundary, not a bare substring. The old * main.js used a:not([class*="bg-"]) and so skipped every link carrying * `after:bg-primary` — a pseudo-element underline, not a background — which is * why three of five nav links on demo-fb1e were never recoloured in either * state. `hover:bg-gray-50` is likewise a hover background and must not exempt * a link from the contract. */ header.bg-transparent :is(a, button):not([class^="bg-"]):not([class*=" bg-"]), header.bg-transparent :is(a, button):not([class^="bg-"]):not([class*=" bg-"]):hover, header[data-hgai-header="over-hero"] :is(a, button):not([class^="bg-"]):not([class*=" bg-"]), header[data-hgai-header="over-hero"] :is(a, button):not([class^="bg-"]):not([class*=" bg-"]):hover { color: var(--hgai-header-fg); } /* Nested panels ship their own opaque background (the mobile menu is * bg-white/95 in every header block), so they need the solid pair back — * inheriting the over-hero foreground would put white text on white. * * Anchored to the start of the class attribute or to a space before it, NOT a * bare substring: [class*="bg-gray-100"] also matches `hover:bg-gray-100`, which * is a background that only exists on hover. That turned three of five nav links * dark on the scrim in testing — the same substring-matching mistake this whole * batch is about. */ header #mobileMenu, header [class^="bg-white"], header [class*=" bg-white"], header [class^="bg-gray-5"], header [class*=" bg-gray-5"], header [class^="bg-gray-1"], header [class*=" bg-gray-1"], header [class^="bg-neutral-1"], header [class*=" bg-neutral-1"], header [class^="bg-slate-1"], header [class*=" bg-slate-1"] { --hgai-header-fg: rgb(17, 24, 39); } /* Hero sections: dark overlay for text readability on background images */ [data-gjs-type="hero"], section[class*="hero"], .hero-section { position: relative; } /* Auto-overlay on hero sections with background images */ [data-gjs-type="hero"][style*="background-image"]::before, section[class*="hero"][style*="background-image"]::before, [data-gjs-type="hero"] .bg-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.5) 100% ); z-index: 1; pointer-events: none; } /* Ensure hero content sits above overlay (target only content containers, not decorative orbs) */ [data-gjs-type="hero"] > [data-animate], [data-gjs-type="hero"] > .relative:not(.absolute), [data-gjs-type="hero"] > section, section[class*="hero"] > [data-animate], section[class*="hero"] > .relative:not(.absolute) { position: relative; z-index: 2; } /* Text shadow for hero headings - extra readability */ [data-gjs-type="hero"] h1, [data-gjs-type="hero"] h2, [data-gjs-type="hero"] p, section[class*="hero"] h1, section[class*="hero"] h2, section[class*="hero"] p { text-shadow: 0 2px 8px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.3); } /* CAPTCHA styles */ .captcha-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; } .captcha-row label { font-size: 0.875rem; font-weight: 500; white-space: nowrap; } .captcha-row input { width: 80px; text-align: center; padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 0.375rem; } .captcha-error { color: #ef4444; font-size: 0.8rem; margin-top: -0.5rem; margin-bottom: 0.5rem; display: none; } /* ========== ACCORDION (details/summary) FIXES ========== */ /* Remove transitions that interfere with native toggle */ details, summary, details > * { transition-property: none !important; } summary { cursor: pointer; list-style: none; -webkit-appearance: none; } summary::-webkit-details-marker { display: none; } summary::marker { display: none; } /* Ensure content is visible when open */ details[open] > *:not(summary) { display: block !important; opacity: 1 !important; visibility: visible !important; } /* ========== HERO MOBILE RESPONSIVE FIX ========== */ @media (max-width: 1023px) { [data-gjs-type="hero"] .grid { grid-template-columns: 1fr !important; gap: 2rem !important; } [data-gjs-type="hero"] .grid > div:first-child { text-align: center; width: 100%; display: flex; flex-direction: column; align-items: center; } [data-gjs-type="hero"] h1 { font-size: 2rem !important; line-height: 1.2 !important; } [data-gjs-type="hero"] p { max-width: 100% !important; } [data-gjs-type="hero"] .flex-wrap, [data-gjs-type="hero"] .flex { justify-content: center; } } @media (max-width: 640px) { [data-gjs-type="hero"] h1 { font-size: 1.75rem !important; } }