/* Theme Name: London Wedding Car Hire Child Theme URI: https://londonweddingcarhire.co.uk Description: Custom child theme for London Wedding Car Hire platform. Ultra-Premium Monochrome Design. Author: Costinel Tiribejea Author URI: https://londonweddingcarhire.co.uk Template: hello-elementor Version: 1.0.1 Text Domain: london-wedding-car */ :root{ --black:#000000; --white:#FFFFFF; --gray-1:#F5F5F7; /* Apple-style light gray background */ --gray-2:#E8E8ED; --gray-text:#6E6E73; /* Apple-style secondary text gray */ --ink:#1D1D1F; /* near-black for primary text */ --line:#D2D2D7; --black-2:#2C2C2E; /* hover state for solid black elements */ --shadow-md: 0 20px 45px rgba(0,0,0,.12); --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif; --ease: cubic-bezier(.16,.84,.44,1); } *{box-sizing:border-box;margin:0;padding:0;} body{ font-family:var(--font); background:var(--white); color:var(--ink); line-height:1.5; -webkit-font-smoothing:antialiased; letter-spacing:-0.01em; overflow-x:hidden; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } .wrap{ max-width:1180px; margin:0 auto; padding:0 24px; } @media (max-width:700px){ .wrap{ padding:0 20px; } } section{ padding:110px 0; } /* --- Apple-style scaled type: very large title, thin subtitle, normal body copy --- */ .tag{ font-size:19px; font-weight:600; color:var(--ink); margin-bottom:8px; } h1{ font-family:var(--font); font-weight:600; font-size:clamp(38px,6vw,80px); line-height:1.05; letter-spacing:-0.03em; } h2.display{ font-family:var(--font); font-weight:600; font-size:clamp(32px,5vw,64px); line-height:1.06; letter-spacing:-0.025em; text-align:center; } h3.card-title{ font-weight:600; font-size:21px; letter-spacing:-0.01em; } .subhead{ font-size:clamp(17px,1.6vw,21px); font-weight:400; color:var(--gray-text); line-height:1.45; } .body-copy{ font-size:17px; color:var(--ink); max-width:70ch; } .body-copy.centered{ margin:0 auto; text-align:center; } .small-caption{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--gray-text); } .gs-reveal{ opacity:0; transform:translateY(24px); } /* --- Apple-style buttons: small pill, text-link with chevron --- */ .pill-btn{ display:inline-flex; align-items:center; gap:6px; padding:12px 22px; border-radius:980px; font-size:15px; font-weight:500; transition:transform .2s var(--ease), background .2s var(--ease); } .pill-btn.solid{ background:var(--black); color:var(--white); } .pill-btn.solid:hover{ background:var(--black-2); } .text-link{ display:inline-flex; align-items:center; gap:4px; font-size:16px; font-weight:400; color:var(--ink); } .text-link::after{ content:"\203A"; font-weight:400; } .cta-row{ display:flex; gap:24px; justify-content:center; align-items:center; flex-wrap:wrap; margin-top:22px; } /* ============================================================ HERO ============================================================ */ /* Shimmer sweep pe butoane (clasa .lwch-pill pe butoane) */ .lwch-pill{ position:relative; overflow:hidden; } .lwch-pill::before{ content:""; position:absolute; inset:0; background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform:translateX(-120%); transition:transform .8s cubic-bezier(.16,.84,.44,1); } .lwch-pill:hover::before{ transform:translateX(120%); } /* --- Buton premium cu shimmer la hover (NU nativ Elementor — referință) --- */ .pill-btn{ position:relative; overflow:hidden; display:inline-flex; padding:14px 30px; border-radius:980px; font-size:14px; font-weight:600; letter-spacing:.03em; text-decoration:none; transition:transform .4s var(--ease), box-shadow .4s var(--ease); } .pill-btn.solid{ background:var(--black); color:var(--white); } .pill-btn.solid:hover{ transform:translateY(-2px); box-shadow:0 14px 34px rgba(0,0,0,.25); } .pill-btn.solid::before{ content:""; position:absolute; inset:0; background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform:translateX(-120%); transition:transform .8s var(--ease); } .pill-btn.solid:hover::before{ transform:translateX(120%); } .pill-btn.ghost{ border:1px solid var(--gold); color:var(--ink); background:transparent; } .pill-btn.ghost:hover{ background:var(--gold); color:#fff; } /* --- Reveal la scroll (echivalent vizual pt. "_animation" nativ Elementor) --- */ .reveal{ opacity:0; transform:translateY(38px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease); } .reveal.in{ opacity:1; transform:none; } .reveal.d1.in{ transition-delay:.1s; } .reveal.d2.in{ transition-delay:.22s; } .reveal.d3.in{ transition-delay:.34s; } .reveal.d4.in{ transition-delay:.46s; } /* --- Card premium: lift + umbră la hover (echivalent "hover_animation":"float") --- */ .card-lux{ background:#fff; border-radius:22px; transition:transform .5s cubic-bezier(.16,.84,.44,1), box-shadow .5s cubic-bezier(.16,.84,.44,1); box-shadow:0 10px 30px rgba(0,0,0,.06); } .card-lux:hover{ transform:translateY(-10px); box-shadow:0 30px 70px rgba(0,0,0,.14); } /* --- Zoom lent pe imagine în card (NU nativ, referință) --- */ .img-zoom{ overflow:hidden; border-radius:22px; } .img-zoom img{ display:block; width:100%; transition:transform 1.4s var(--ease); } .img-zoom:hover img{ transform:scale(1.08); } .hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; padding-top: 6rem; overflow: hidden; } .hero h1{ max-width:15ch; margin:0 auto 18px; } .hero .subhead{ max-width:52ch; margin:0 auto; } .hero-media{ margin-top:56px; border-radius:28px; overflow:hidden; aspect-ratio:16/8; max-width:1180px; margin-left:auto; margin-right:auto; } .hero-media img{ width:100%; height:100%; object-fit:cover; } @media (max-width:700px){ .hero-media{ aspect-ratio:4/5; border-radius:18px; } } .intro-copy{ max-width:760px; margin:56px auto 0; text-align:center; } /* ============================================================ ALTERNATING GRAY / WHITE SECTIONS ============================================================ */ .section-gray{ background:var(--gray-1); } .section-head{ text-align:center; max-width:720px; margin:0 auto 50px; } .section-head .small-caption{ display:block; margin-bottom:14px; } /* ============================================================ FLEET ============================================================ */ .fleet-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } @media (max-width:900px){ .fleet-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:560px){ .fleet-grid{ grid-template-columns:1fr; } } .tile{ background:var(--white); border-radius:22px; overflow:hidden; padding-bottom:26px; } .tile .img{ aspect-ratio:1/1; overflow:hidden; } .tile .img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); } .tile:hover .img img{ transform:scale(1.05); } .tile .body{ padding:22px 22px 0; text-align:center; } .tile .kicker{ font-size:13px; color:var(--gray-text); margin-bottom:4px; } .tile p.desc{ font-size:14px; color:var(--gray-text); margin:8px 0 14px; } .section-footer-link{ text-align:center; margin-top:44px; } /* ============================================================ PACKAGES ============================================================ */ .packages-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } @media (max-width:800px){ .packages-grid{ grid-template-columns:1fr; } } .package-tile{ background:var(--white); border-radius:22px; padding:40px 32px; text-align:center; } .package-tile p{ font-size:14.5px; color:var(--gray-text); margin:12px 0 16px; } /* ============================================================ VENUES - dramatic black section, high-contrast ============================================================ */ .section-black{ background:var(--black); color:var(--white); } .section-black .small-caption{ color:rgba(255,255,255,.55); } .section-black .subhead{ color:rgba(255,255,255,.6); } .venues-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:50px; } @media (max-width:900px){ .venues-grid{ grid-template-columns:1fr 1fr; } } .venue-tile{ position:relative; aspect-ratio:3/4; border-radius:20px; overflow:hidden; } .venue-tile img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); } .venue-tile:hover img{ transform:scale(1.06); } .venue-tile .label{ position:absolute; left:0; right:0; bottom:0; padding:20px; background:linear-gradient(0deg, rgba(0,0,0,.8), transparent); font-size:17px; font-weight:600; } /* ============================================================ AREAS WE COVER ============================================================ */ .areas-row{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:36px; } .area-pill{ padding:12px 24px; border:1px solid var(--line); border-radius:980px; font-size:14.5px; font-weight:500; } /* ============================================================ REVIEWS ============================================================ */ .reviews-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } @media (max-width:800px){ .reviews-grid{ grid-template-columns:1fr; } } .review-tile{ background:var(--white); border-radius:22px; padding:32px; } .review-tile blockquote{ font-size:18px; font-weight:500; letter-spacing:-0.01em; margin-bottom:16px; } .review-tile cite{ font-style:normal; font-size:13px; color:var(--gray-text); } /* ============================================================ BLOG TEASER ============================================================ */ .blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } @media (max-width:800px){ .blog-grid{ grid-template-columns:1fr; } } .blog-tile{ border-radius:22px; overflow:hidden; background:var(--white); } .blog-tile .img{ aspect-ratio:16/10; background:var(--gray-2); display:flex; align-items:center; justify-content:center; color:var(--gray-text); font-size:13px; } .blog-tile .body{ padding:22px 24px 28px; } .blog-tile p{ font-size:14px; color:var(--gray-text); margin-top:8px; } /* ============================================================ FAQ ============================================================ */ .faq-list{ max-width:800px; margin:0 auto; } .faq-item{ border-bottom:1px solid var(--line); } .faq-head{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:26px 0; font-size:19px; font-weight:600; letter-spacing:-0.01em; text-align:left; background:none; border:none; cursor:pointer; color:var(--ink); } .faq-head .plus{ font-size:22px; font-weight:300; transition:transform .3s var(--ease); flex-shrink:0; } .faq-item.is-open .plus{ transform:rotate(45deg); } .faq-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s var(--ease); } .faq-item.is-open .faq-body{ grid-template-rows:1fr; } .faq-body-inner{ overflow:hidden; } .faq-body-inner p{ padding-bottom:26px; color:var(--gray-text); font-size:15.5px; max-width:68ch; } /* ============================================================ CLOSING STATEMENT ============================================================ */ .closing{ text-align:center; } .closing h2.display{ max-width:18ch; margin:0 auto; } /* ============================================================ CTA FINAL ============================================================ */ .cta-section{ background:var(--gray-1); } .cta-grid{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; } @media (max-width:900px){ .cta-grid{ grid-template-columns:1fr; } } .form-card{ background:var(--white); border-radius:22px; padding:34px; } .field{ position:relative; margin-bottom:18px; } .field input, .field select{ width:100%; padding:15px 14px 8px; font-size:15px; border:1px solid var(--line); border-radius:10px; background:var(--white); font-family:inherit; color:var(--ink); } .field label{ position:absolute; left:14px; top:14px; font-size:14px; color:var(--gray-text); transition:all .2s var(--ease); pointer-events:none; } .field input:focus + label, .field input:not(:placeholder-shown) + label{ top:5px; font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; } .field input::placeholder{ color:transparent; } .pill-btn.full{ width:100%; justify-content:center; } /* Utility classes to replace inline styles */ .mt-18 { margin-top: 18px; } .m-0 { margin: 0; } .mt-16 { margin-top: 16px; } .mt-22 { margin-top: 22px; } .mt-14 { margin-top: 14px; } .text-left { text-align: left; } /* ============================================================ NAV BAR - glass, narrows on scroll (selectors prefixed with "body" for extra specificity so Elementor's own generated CSS is less likely to win ties) ============================================================ */ /* Stilizare pentru logo-ul imagine din header */ /* Forțăm înălțimea logo-ului crescând specificitatea selectorului */ img.header-logo-image { height: 85px !important; max-height: 85px !important; width: auto !important; min-width: 1px; /* Previne colapsarea în unele browsere */ display: inline-block; object-fit: contain; transition: opacity 0.3s var(--ease); } /* Efectul de hover adaptat la noul selector */ #siteNav .nav-inner .nav-logo:hover img.header-logo-image { opacity: 0.8; } /* Efect subtil de hover, specific site-urilor premium */ #siteNav .nav-logo:hover .header-logo-image { opacity: 0.8; } /* IMPORTANT: everything below is scoped with the #siteNav ID selector (the header.php wrapper has id="siteNav") instead of the plain .site-nav class. An ID selector outranks almost any class-based rule that Elementor or the parent "hello-elementor" theme injects globally (e.g. generic `button`, `a`, `.nav-menu`, `.nav-link` resets/hover colors coming from the Elementor global kit), so our styles win regardless of stylesheet load order. Do not rename this ID. */ #siteNav{ position:fixed; top:0; left:0; right:0; z-index:310; background:#fff; backdrop-filter:none; border-bottom:1px solid transparent; transition: padding .3s var(--ease), background .3s var(--ease), backdrop-filter .3s var(--ease), border-color .3s var(--ease); } #siteNav.is-scrolled{ background:rgba(255,255,255,.94); backdrop-filter:blur(14px) saturate(160%); border-bottom-color:var(--line); } #siteNav .nav-inner{ max-width:1320px; margin:0 auto; padding:10px 32px; display:flex; align-items:center; justify-content:space-between; gap:24px; transition:padding .3s var(--ease); } #siteNav.is-scrolled .nav-inner{ padding:13px 32px; } #siteNav .nav-logo{ font-family:var(--font); font-size:22px; white-space:nowrap; font-weight:600; letter-spacing:-0.02em; } #siteNav .nav-logo em{ color:var(--ink); font-style:normal; } /* --- desktop menu --- */ #siteNav .nav-menu{ display:flex; align-items:center; gap:4px; position:relative; flex:1; justify-content:center; } #siteNav .nav-item{ position:relative; } #siteNav .nav-link, #siteNav .nav-link:link, #siteNav .nav-link:visited{ display:flex; align-items:center; gap:6px; padding:12px 16px; font-size:14px; font-weight:600; color:var(--ink) !important; border-radius:999px; position:relative; z-index:2; /* .nav-link is a real