/* ============================================================ YDL GROUP — Responsive layer (tablet + mobile) Base stylesheet (style.css / pages.css) is desktop-first, designed around a ~1304px container. This file adapts the same design to tablet and phone without changing direction. Breakpoints: tablet : <= 1024px nav-menu : <= 900px (hamburger takes over) phone : <= 640px ============================================================ */ /* ---------- Mobile nav: hidden on desktop ---------- */ .nav-toggle{ display:none; flex-direction:column;justify-content:center;align-items:center;gap:5px; width:44px;height:44px;border-radius:12px;background:transparent;cursor:pointer;flex:none; -webkit-tap-highlight-color:transparent; } .nav-toggle span{display:block;width:23px;height:2px;border-radius:2px;background:currentColor;color:#fff; transition:transform .32s var(--ease),opacity .2s var(--ease);} .site-header.is-scrolled .nav-toggle span, .site-header--solid .nav-toggle span{background:#fff;} .mobile-nav{ position:fixed;left:0;right:0;top:var(--header-h);bottom:0;z-index:250; background:#3382C4;box-shadow:0 24px 44px -22px rgba(1,49,98,.55); /* Full-height overlay with the links centred on both axes (per the header SVGs). */ display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px; padding:24px;overflow-y:auto; /* Reveal with clip-path, not transform: the glass/blur layer stays put and is simply unveiled top-to-bottom, so there's no smear or flicker. The negative side/bottom insets keep the drop shadow visible. */ clip-path:inset(0 -60px 100% -60px);-webkit-clip-path:inset(0 -60px 100% -60px); pointer-events:none; will-change:clip-path; } /* The reveal transition is opt-in: it is active only once script.js adds `nav-ready` to — after the menu is wired and the page has painted, and again after a back/forward-cache restore. Off by default, the panel can never animate or flash into view on its own (on first paint, or when iOS Safari restores a frozen page with the menu marked open); a deliberate open/close still animates. */ html.nav-ready .mobile-nav{ transition:clip-path .42s cubic-bezier(.22,1,.36,1),-webkit-clip-path .42s cubic-bezier(.22,1,.36,1); } /* the links/button glide in just behind the unveil for a soft, layered feel */ .mobile-nav > *{opacity:0;transform:translateY(-8px);} html.nav-ready .mobile-nav > *{transition:opacity .28s var(--ease),transform .28s var(--ease);} /* Home hero (overlay header, before scroll): translucent glass panel over the hero — per "Site header Glass" reference (white 8% + blur + hairline). */ .site-header--overlay:not(.is-scrolled) + .mobile-nav{ background:rgba(255,255,255,.08); -webkit-backdrop-filter:blur(20px) saturate(1.3); backdrop-filter:blur(20px) saturate(1.3); border-bottom:1px solid rgba(255,255,255,.22); box-shadow:0 30px 50px -26px rgba(3,20,40,.55); } .mobile-nav a{ color:#fff;font-family:var(--font-display);font-weight:500;font-size:26px;line-height:1.15; text-align:center;padding:9px 16px; transition:color .2s var(--ease); } .mobile-nav a:hover,.mobile-nav a:focus-visible{color:rgba(255,255,255,.72);} /* Centered full-screen menu: the booking CTA isn't shown in the overlay (per the new design). It stays wired via data-open-booking; delete this line to restore it. */ .mobile-nav .btn{display:none;} body.nav-open .mobile-nav{clip-path:inset(0 -60px -60px -60px);-webkit-clip-path:inset(0 -60px -60px -60px);pointer-events:auto;} body.nav-open .mobile-nav > *{opacity:1;transform:none;transition-delay:.12s;} /* Lock the page while the menu is open — must close it before scrolling. */ body.nav-open{overflow:hidden;} body.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);} body.nav-open .nav-toggle span:nth-child(2){opacity:0;} body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} /* ============================================================ TABLET (<= 1024px) Preserve the desktop feel: keep two-column content side-by-side where it still reads well; collapse dense 3–4 col grids to 2. ============================================================ */ @media (max-width:1024px){ :root{--pad:28px;} .hero h1{font-size:50px;} .approach-head h2{font-size:27px;} .portfolio-head h2,.testi-head h2,.about-story h2{font-size:34px;} .svc-hero h1{font-size:44px;} .prop-hero h1,.contact-hero h1,.about-hero h1{font-size:44px;} /* dense grids -> 2 columns */ .svc-grid{grid-template-columns:1fr 1fr;gap:30px 40px;} .promise-grid{grid-template-columns:1fr 1fr;} .values-grid{grid-template-columns:1fr 1fr;} .prop-grid{grid-template-columns:1fr 1fr;} .process-grid{grid-template-columns:1fr 1fr;} .stats{grid-template-columns:1fr 1fr;row-gap:8px;} /* footer: 3 columns, contact spans full width */ .footer-top{grid-template-columns:1.5fr 1fr 1fr;gap:34px 28px;} .footer-contact{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;} .footer-contact h2{grid-column:1 / -1;} /* keep the big two-col content but tighten */ .about-story,.trusted,.resp,.invest,.prop-hero,.contact-grid{gap:40px;} /* booking modal: stack the three steps */ .modal{max-width:560px;} .modal-grid{grid-template-columns:1fr;gap:22px;} } /* ============================================================ NAV -> hamburger (<= 900px) Also stack the big image/text two-column layouts. ============================================================ */ @media (max-width:900px){ .nav,.header-cta{display:none;} .nav-toggle{display:inline-flex;} .about-story,.trusted,.resp,.invest,.prop-hero,.contact-grid{ grid-template-columns:1fr;gap:34px; } /* image-first sections read better with the visual up top on the hero-style ones */ .prop-hero-media{order:-1;} .search-row{grid-template-columns:1fr 1fr;} } /* ============================================================ PHONE (<= 640px) — single column, mobile type + spacing ============================================================ */ @media (max-width:640px){ :root{--pad:20px;--header-h:72px;} /* rhythm */ .section{padding:52px 0;} .section--tight{padding:38px 0;} /* type scale */ h2{line-height:1.16;} .eyebrow{font-size:11px;} /* ---- header ---- */ .logo-svg{height:34px;} /* ---- hero ---- */ .hero{min-height:auto;height:auto;padding:calc(var(--header-h) + 40px) 0 44px;align-items:flex-start;} .hero .container{padding-bottom:0;} .hero-bg::after{background:linear-gradient(180deg,rgba(11,26,44,.62) 0%,rgba(11,26,44,.72) 100%);} .hero-inner{max-width:100%;} .hero-pills{margin-bottom:20px;} .hero h1{font-size:38px;line-height:1.08;} .hero-sub{font-size:15px;margin:16px 0 24px;max-width:100%;} .hero-actions{flex-wrap:wrap;gap:12px;} .hero-actions .btn{flex:1 1 100%;justify-content:center;} .scroll-down{display:none;} /* ---- section heads / type ---- */ .approach-head h2{font-size:23px;line-height:1.34;} .portfolio-head h2,.testi-head h2,.about-story h2,.p-head h2, .services-head h2,.faq-head h2,.values-head h2,.process-head h2, .resp h2,.testi-head h2{font-size:28px;} .svc-hero h1,.prop-hero h1,.contact-hero h1,.about-hero h1{font-size:34px;line-height:1.1;} .about-hero .lead,.svc-hero .lead,.prop-hero p{font-size:15px;} /* section hero top padding trimmed */ .page-hero,.svc-hero,.about-hero,.contact-hero{padding-top:calc(var(--header-h) + 34px);} /* ---- consistent centered section headers on mobile ---- Every section's intro (eyebrow + heading + lead paragraph) is centered so all headers share one rhythm. Structured / accented detail content (vision & mission blocks, checklists, cards, forms, the founder credit) stays left-aligned so it reads naturally and its accents look right. */ .about-hero .container, .svc-hero .container, .contact-hero .container, .legal-hero .container, .approach-head, .p-head, .testi-head, .trusted > div:not(.trusted-media), .about-story > div:not(.about-media), .resp-body, .invest > div:not(.invest-media), .prop-hero > div:not(.prop-hero-media){ text-align:center; } .testi-head, .p-head{ margin-left:auto; margin-right:auto; } /* re-anchor detail / accented content to the left */ .vm-block, .rblock, .inv-item, .search-card, .founder, .founder *{ text-align:left; } /* constrain + center the intro paragraphs */ .about-hero .lead, .svc-hero .lead, .contact-hero .lead, .legal-hero .lead, .approach-head p, .trusted .t-sub, .about-story .as-p, .invest > div > p, .prop-hero > div > p{ margin-left:auto; margin-right:auto; } /* centre standalone buttons that sit under a centered header */ .approach-head .btn, .resp-body > .btn{ margin-left:auto; margin-right:auto; } .legal-updated{ text-align:center; } /* ---- everything single column ---- */ .stats{grid-template-columns:1fr 1fr;gap:14px 0;margin-top:32px;} .stat{padding:14px 12px;text-align:center;} .stat .num{font-size:40px;justify-content:center;} .stat .lbl{margin-top:8px;} .promise-grid,.svc-grid,.values-grid,.prop-grid,.process-grid{grid-template-columns:1fr;gap:16px;} .svc-grid{gap:26px;} .svc-cards{grid-template-columns:1fr;gap:16px;} .search-row{grid-template-columns:1fr;} .cf-row{grid-template-columns:1fr;gap:0;} /* two-col content already stacked at 900; tighten gaps */ .about-story,.trusted,.resp,.invest,.prop-hero,.contact-grid{gap:28px;} /* approach: stats divider lines off (they were vertical) */ .stat + .stat::before{display:none;} /* ---- promise / service / value cards ---- */ .promise-card{padding:26px 24px;} .svc-big{padding:26px 24px;} /* ---- testimonial: stack photo above text; no watermark on mobile ---- */ .testi-card{grid-template-columns:1fr;gap:20px;padding:26px 22px;text-align:left;} .testi-photo{width:112px;height:124px;border-radius:16px;object-position:50% 22%;} .testi-quote{font-size:18px;} .testi-wm{display:none;} /* ---- inline CTA / newsletter stack (centered) ---- */ .inline-cta{flex-direction:column;align-items:center;text-align:center;gap:18px;} .inline-cta .btn{width:100%;justify-content:center;} .newsletter{flex-direction:column;align-items:center;text-align:center;gap:20px;padding:34px 22px;} .newsletter h3{font-size:26px;} .newsletter p{max-width:100%;} .newsletter .nl-left,.newsletter .nl-right{width:100%;} .nl-form{min-width:0;width:100%;flex-direction:column;align-items:stretch;gap:10px;padding:12px;border-radius:20px;} .nl-form input{width:100%;padding:13px 16px;background:var(--panel);border-radius:var(--r-pill);} .nl-form .btn{width:100%;justify-content:center;} /* ---- responsibility / resp chip ---- */ .resp-chip{left:14px;bottom:14px;} /* ---- cta actions (about / properties bottom) ---- */ .cta-actions{flex-direction:column;align-items:stretch;gap:12px;} .cta-actions .btn{width:100%;justify-content:center;} /* ---- footer: stack ---- */ .footer-top{grid-template-columns:1fr 1fr;gap:30px 24px;padding:52px 0 40px;} .footer-brand{grid-column:1 / -1;} .footer-contact{grid-column:1 / -1;display:block;} .footer-bottom{flex-direction:column;align-items:flex-start;gap:14px;text-align:left;} .footer-bottom .fb-links{flex-wrap:wrap;gap:8px 18px;} /* ---- booking modal: contained centered card (per Booking modal2.svg) ---- Not a full-bleed sheet — a rounded card with margins around it, the dimmed page showing through, scrolling internally when tall. */ .modal-overlay{padding:16px;align-items:center;} .modal{width:100%;max-width:none;border-radius:22px;min-height:0;max-height:calc(100dvh - 32px);} .modal-head{padding:22px 22px 4px;} .modal-head .eyebrow{margin-bottom:12px;} .modal-head h3{font-size:22px;line-height:1.16;} .modal-head p{display:block;font-size:12.5px;margin-top:8px;line-height:1.5;} .modal-close{top:16px;right:16px;width:34px;height:34px;background:#fff;border:1px solid var(--line-2);} .modal-grid{padding:14px 22px 24px;gap:22px;} .mcol-head{margin-bottom:12px;} /* calendar — circular days, hatched weekends; both arrows share one subtle style */ .cal-nav{margin-bottom:10px;} .cal-arrow{width:34px;height:34px;border-radius:50%;} .cal-grid{gap:4px;} .cal-grid .dow{font-size:9.5px;padding-bottom:3px;} .cal-day{aspect-ratio:1;height:auto;border-radius:50%;font-size:12.5px;} .cal-day.avail{background:#fff;border:1px solid var(--line-2);} .cal-day.avail:hover{background:var(--panel-blue);border-color:var(--panel-blue-line);color:var(--blue);} .cal-day.sel{background:var(--blue);color:#fff;border-color:var(--blue);} .cal-day.off{color:var(--muted-2);border:1px solid var(--line-2); background-image:repeating-linear-gradient(-45deg,rgba(133,149,164,.3) 0 1px,transparent 1px 5px);} .cal-legend{gap:8px 14px;margin-top:12px;} .cal-legend span{font-size:10.5px;} .cal-legend i{border-radius:50%;} /* time slots — pills; selected = solid blue fill, white text (per reference) */ .time-grid{grid-template-columns:repeat(3,1fr);gap:8px;} .time-slot{padding:11px 4px;font-size:12.5px;border-radius:999px;background:#fff;border:1px solid var(--line-2);} .time-slot:hover{background:var(--panel-blue);color:var(--blue);border-color:var(--panel-blue-line);} .time-slot.sel,.time-slot.sel:hover{background:var(--blue);color:#fff;border-color:transparent;box-shadow:0 10px 22px -12px rgba(51,130,196,.7);} /* pill inputs, summary, and confirm button (per reference) */ .mfield{margin-bottom:12px;} .mfield input{border-radius:999px;padding:12px 18px;} .mphone{border-radius:999px;} .mphone .mphone-num{padding:13px 18px;} .ccselect .cc{padding:13px 6px 13px 18px;} /* iOS zooms the page when a focused field is < 16px — keep form text 16px */ .mfield input,.mphone .mphone-num,.ccselect .cc,.cc-search-input, .cf-field input,.cf-field select,.cf-field textarea, .search-row input,.search-row select,.nl-form input{font-size:16px;} .msummary{border-radius:999px;padding:13px 20px;margin:4px 0 14px;} .modal .btn--primary{border-radius:999px;} .msecure{margin-top:12px;} /* success modal stays a compact centered card (not a full sheet) */ #success-modal{align-items:center;padding:24px;} .modal--success{width:100%;max-width:340px;min-height:0;max-height:none; border-radius:var(--r-lg);padding:34px 26px 30px;} /* ---- privacy / legal ---- */ .legal-hero h1{font-size:32px;} .legal-body h2{font-size:20px;} /* ---- 404 ---- */ .err-code{font-size:96px;} .err-title{font-size:26px;} .err-actions{flex-direction:column;width:100%;} .err-actions .btn{width:100%;justify-content:center;} /* ---- cookie banner: full-width bottom sheet already handled, ensure it clears mobile safe area ---- */ .cookie-consent{left:12px;right:12px;bottom:12px;width:auto;} } /* very small phones */ @media (max-width:380px){ .hero h1{font-size:33px;} .stats{grid-template-columns:1fr;} .stat + .stat::before{display:none;} } /* ============================================================ Prevent focus zoom on touch devices Mobile/tablet browsers zoom the page whenever a focused field's text is smaller than 16px. Force 16px on touch devices only, so desktop keeps its intended sizing and the visual design is unchanged. ============================================================ */ @media (hover:none) and (pointer:coarse){ input, select, textarea, .cc-search-input{ font-size:16px !important; } }