/* ============================================================================ SADEEM CLEAN — سديم كلين · Design System Arabic-first · RTL · Mobile-first · single brand light theme Palette derived from the logo: deep navy, royal blue, azure, gold, cool paper ============================================================================ */ /* ---- Fonts (Google Fonts — CSP-allowed host) --------------------------- */ /* linked in : El Messiri (display), Tajawal (body), Cormorant (en accent) */ /* ---- Design tokens ----------------------------------------------------- */ :root{ /* brand */ --navy:#0B1E3F; --navy-700:#122F5A; --navy-600:#17396B; --navy-500:#204a86; --royal:#1B5FB0; --royal-600:#174e96; --azure:#3E92D6; --azure-200:#bcdcf3; --gold:#C8A24C; --gold-600:#B08A34; --gold-soft:#E7CB86; --gold-100:#f4ead1; /* neutrals — cool, blue-biased so gold reads as a chosen warm accent */ --white:#FFFFFF; --paper:#F3F7FC; /* main light section ground */ --mist:#E9F0F9; /* alternate ground / subtle fills */ --line:#DCE6F2; /* hairlines & borders */ --ink:#0C2140; /* headings */ --text:#31435D; /* body */ --muted:#66788F; /* secondary text */ /* semantic */ --wa:#25D366; --wa-600:#1Fb457; /* gradients */ --grad-navy:linear-gradient(135deg,#0B1E3F 0%,#143c76 60%,#1B5FB0 130%); --grad-navy-soft:linear-gradient(150deg,#0d244c 0%,#153a72 100%); --grad-blue:linear-gradient(135deg,#1B5FB0,#3E92D6); --grad-gold:linear-gradient(90deg,#B08A34,#E7CB86 45%,#C8A24C 100%); /* brand sparkle motif (echoes the logo) — used as a subtle background field */ --pattern-gold:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100'%20height='100'%20viewBox='0%200%20100%20100'%3E%3Cg%20fill='%23E7CB86'%3E%3Cpath%20d='M28%2017%20L30.6%2027.4%20L41%2030%20L30.6%2032.6%20L28%2043%20L25.4%2032.6%20L15%2030%20L25.4%2027.4%20Z'/%3E%3Cpath%20d='M72%2066%20L73.6%2072.4%20L80%2074%20L73.6%2075.6%20L72%2082%20L70.4%2075.6%20L64%2074%20L70.4%2072.4%20Z'/%3E%3Ccircle%20cx='74'%20cy='26'%20r='2'/%3E%3Ccircle%20cx='26'%20cy='74'%20r='1.4'/%3E%3C/g%3E%3C/svg%3E"); /* elevation */ --sh-xs:0 1px 3px rgba(11,30,63,.06); --sh-sm:0 6px 18px -8px rgba(11,30,63,.14); --sh-md:0 18px 40px -18px rgba(11,30,63,.22); --sh-lg:0 34px 70px -26px rgba(11,30,63,.30); --sh-gold:0 16px 40px -18px rgba(176,138,52,.45); /* radii — controlled */ --r-sm:10px; --r:16px; --r-lg:22px; --r-xl:28px; --r-pill:999px; /* layout */ --container:1200px; --pad-x:clamp(20px,5vw,48px); --section-y:clamp(60px,8.5vw,116px); /* type */ --f-display:"El Messiri","Tajawal","Segoe UI",Tahoma,sans-serif; --f-body:"Tajawal","Segoe UI",Tahoma,Arial,sans-serif; --f-en:"Cormorant Garamond",Georgia,"Times New Roman",serif; --fs-hero:clamp(2.5rem,6.2vw,4.7rem); --fs-h2:clamp(1.85rem,3.9vw,2.95rem); --fs-h3:clamp(1.18rem,2.3vw,1.5rem); --fs-lead:clamp(1.06rem,1.9vw,1.28rem); --fs-body:1.04rem; --fs-sm:.92rem; --fs-xs:.8rem; } /* ---- Reset / base ------------------------------------------------------ */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } } body{ margin:0; font-family:var(--f-body); font-size:var(--fs-body); line-height:1.85; color:var(--text); background:var(--white); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img,svg{ display:block; max-width:100%; } img{ height:auto; } /* default icon size — large decorative SVGs override this via their own class */ svg{ width:1.2em; height:1.2em; } [hidden]{ display:none !important; } a{ color:inherit; text-decoration:none; } button{ font-family:inherit; cursor:pointer; } h1,h2,h3,h4{ font-family:var(--f-display); color:var(--ink); line-height:1.25; margin:0; font-weight:700; text-wrap:balance; } p{ margin:0; } ul{ margin:0; padding:0; list-style:none; } :focus-visible{ outline:3px solid var(--azure); outline-offset:3px; border-radius:6px; } /* ---- Layout helpers ---------------------------------------------------- */ .container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--pad-x); } .section{ padding-block:var(--section-y); position:relative; } .section--paper{ background:var(--paper); } .section--mist{ background:var(--mist); } .section--navy{ background:var(--navy); color:#dfe8f5; } .section--navy h2,.section--navy h3{ color:#fff; } .narrow{ max-width:720px; } /* section header */ .eyebrow{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--f-body); font-weight:700; font-size:var(--fs-sm); letter-spacing:.02em; color:var(--gold-600); text-transform:none; margin-bottom:1rem; } .section--navy .eyebrow{ color:var(--gold-soft); } .eyebrow::before{ content:""; width:28px; height:2px; background:var(--grad-gold); border-radius:2px; } .sec-head{ margin-bottom:clamp(2rem,4vw,3.2rem); } .sec-head .lead{ color:var(--muted); font-size:var(--fs-lead); max-width:640px; margin-top:.9rem; } .section--navy .sec-head .lead{ color:#b9cae0; } .center{ text-align:center; } .center .eyebrow{ justify-content:center; } .center .lead{ margin-inline:auto; } .lead{ font-size:var(--fs-lead); color:var(--muted); line-height:1.9; } /* ---- Buttons ----------------------------------------------------------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6rem; font-family:var(--f-body); font-weight:700; font-size:1rem; line-height:1; padding:.95rem 1.55rem; border-radius:var(--r-pill); border:1.5px solid transparent; transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, background .25s, color .25s; white-space:nowrap; } .btn svg{ width:1.15em; height:1.15em; } .btn:hover{ transform:translateY(-2px); } .btn:active{ transform:translateY(0); } .btn--primary{ background:var(--grad-navy); color:#fff; box-shadow:var(--sh-md); } .btn--primary:hover{ box-shadow:var(--sh-lg); } .btn--wa{ background:var(--wa); color:#fff; box-shadow:0 14px 30px -12px rgba(37,211,102,.55); } .btn--wa:hover{ background:var(--wa-600); } .btn--gold{ background:transparent; color:var(--gold-600); border-color:var(--gold); } .btn--gold:hover{ background:var(--gold); color:#fff; } .btn--light{ background:#fff; color:var(--navy); box-shadow:var(--sh-md); } .btn--outline{ background:transparent; color:var(--navy); border-color:var(--line); } .btn--outline:hover{ border-color:var(--navy); } .btn--ghost-light{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.35); } .btn--ghost-light:hover{ background:rgba(255,255,255,.16); } .btn--lg{ padding:1.1rem 1.9rem; font-size:1.06rem; } .btn--block{ width:100%; } .textlink{ display:inline-flex; align-items:center; gap:.4rem; font-weight:700; color:var(--royal); } .textlink svg{ width:1em; height:1em; transition:transform .25s; } .textlink:hover svg{ transform:translateX(-4px); } /* RTL: arrow points left */ /* ---- Header ------------------------------------------------------------ */ .header{ position:fixed; inset-block-start:0; inset-inline:0; z-index:60; transition:background .3s, box-shadow .3s, padding .3s; padding-block:.85rem; } .header::before{ content:""; position:absolute; inset:0; background:rgba(255,255,255,.86); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); opacity:0; transition:opacity .3s; border-bottom:1px solid transparent; } .header.scrolled{ padding-block:.55rem; } .header.scrolled::before{ opacity:1; box-shadow:var(--sh-sm); border-bottom-color:var(--line); } .header .container{ display:flex; align-items:center; justify-content:space-between; gap:1rem; position:relative; } .brand{ display:flex; align-items:center; gap:.7rem; } .brand img{ width:46px; height:auto; transition:width .3s; } .header.scrolled .brand img{ width:40px; } .brand-txt{ display:flex; flex-direction:column; line-height:1.05; } .brand-txt b{ font-family:var(--f-display); font-size:1.3rem; color:var(--navy); font-weight:700; } .brand-txt span{ font-size:.66rem; letter-spacing:.28em; color:var(--gold-600); font-family:var(--f-en); font-weight:600; } .header:not(.scrolled) .brand-txt b{ color:var(--navy); } .nav{ display:flex; align-items:center; gap:.4rem; } .nav a{ padding:.5rem .8rem; border-radius:var(--r-pill); font-weight:500; color:var(--ink); font-size:.98rem; transition:color .2s, background .2s; position:relative; } .nav a:hover{ color:var(--royal); } /* header sits over the dark hero until scrolled — keep text light up top */ .header:not(.scrolled) .nav a{ color:#e7effb; } .header:not(.scrolled) .nav a:hover{ color:#fff; } .header:not(.scrolled) .brand-txt b{ color:#fff; } .header:not(.scrolled) .brand-txt span{ color:var(--gold-soft); } .header-cta{ display:flex; align-items:center; gap:.6rem; } .nav-toggle{ display:none; width:46px; height:46px; border:1px solid var(--line); border-radius:12px; background:#fff; align-items:center; justify-content:center; color:var(--navy); } .nav-toggle svg{ width:22px; height:22px; } /* mobile drawer */ .drawer{ position:fixed; inset:0; z-index:70; visibility:hidden; } .drawer[aria-hidden="false"]{ visibility:visible; } .drawer__scrim{ position:absolute; inset:0; background:rgba(8,20,40,.5); opacity:0; transition:opacity .3s; } .drawer[aria-hidden="false"] .drawer__scrim{ opacity:1; } .drawer__panel{ position:absolute; inset-block:0; inset-inline-end:0; width:min(86vw,340px); background:#fff; box-shadow:var(--sh-lg); transform:translateX(100%); transition:transform .35s cubic-bezier(.2,.7,.3,1); display:flex; flex-direction:column; padding:1.3rem; overflow-y:auto; } .drawer[aria-hidden="false"] .drawer__panel{ transform:translateX(0); } .drawer__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; } .drawer__close{ width:44px; height:44px; border-radius:12px; border:1px solid var(--line); background:#fff; color:var(--navy); } .drawer nav{ display:flex; flex-direction:column; } .drawer nav a{ padding:.95rem .4rem; font-size:1.1rem; font-weight:500; color:var(--ink); border-bottom:1px solid var(--line); } .drawer .btn{ margin-top:1rem; } /* ---- Hero (full-bleed photography) ------------------------------------ */ .hero{ position:relative; min-height:clamp(560px,90vh,780px); display:flex; align-items:center; overflow:hidden; background:var(--navy); color:#eaf1fb; } .hero__bg{ position:absolute; inset:0; z-index:0; } .hero__bg img{ width:100%; height:100%; object-fit:cover; object-position:52% 42%; } .hero__scrim{ position:absolute; inset:0; z-index:1; background: linear-gradient(180deg, rgba(9,20,44,.62) 0%, rgba(9,20,44,.12) 16%, transparent 32%), linear-gradient(270deg, rgba(9,20,44,.95) 0%, rgba(9,20,44,.74) 34%, rgba(9,20,44,.32) 64%, rgba(9,20,44,.10) 100%); } .hero .container{ position:relative; z-index:2; } .hero__copy{ max-width:560px; } .hero__eyebrow{ color:var(--gold-soft); } .hero__eyebrow::before{ background:var(--gold-soft); } .hero h1{ color:#fff; font-size:var(--fs-hero); line-height:1.12; margin-bottom:1.1rem; font-weight:700; text-shadow:0 2px 26px rgba(0,0,0,.38); } .hero h1 .accent{ color:transparent; background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; } .hero__lead{ color:#dce7f6; font-size:var(--fs-lead); max-width:33em; margin-bottom:2rem; text-shadow:0 1px 14px rgba(0,0,0,.32); } .hero__cta{ display:flex; flex-wrap:wrap; gap:.9rem; align-items:center; } .hero__trust{ display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; margin-top:2.1rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.18); } .hero__trust span{ display:inline-flex; align-items:center; gap:.5rem; font-size:.92rem; color:#d6e1f2; } .hero__trust svg{ width:18px; height:18px; color:var(--gold-soft); } /* ---- Service cards (photo-led, whole card clickable) ------------------- */ .grid-services{ display:grid; grid-template-columns:repeat(auto-fit,minmax(288px,1fr)); gap:1.4rem; } .scard{ position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; transition:transform .3s, box-shadow .3s, border-color .3s; } .scard:hover{ transform:translateY(-6px); box-shadow:var(--sh-md); border-color:transparent; } .scard__media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--mist); } .scard__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.3,1); } .scard:hover .scard__media img{ transform:scale(1.06); } .scard__body{ display:flex; flex-direction:column; flex:1; padding:1.15rem 1.3rem 1.3rem; } .scard__head{ display:flex; align-items:center; gap:.65rem; margin-bottom:.5rem; } .scard__ic{ flex:none; width:40px; height:40px; border-radius:11px; display:grid; place-items:center; background:linear-gradient(150deg,#e9f1fb,#f6faff); color:var(--royal); border:1px solid #e2ecf8; } .scard__ic svg{ width:22px; height:22px; } .scard h3{ font-size:1.2rem; margin:0; } .scard__link{ color:var(--ink); } .scard__link::after{ content:""; position:absolute; inset:0; z-index:1; } /* stretched link → whole card */ .scard:hover .scard__link{ color:var(--royal); } .scard p{ color:var(--muted); font-size:.96rem; margin:0 0 1.1rem; flex:1; } .scard__foot{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-top:auto; } .scard__more{ display:inline-flex; align-items:center; gap:.35rem; font-weight:700; font-size:.92rem; color:var(--royal); } .scard__more svg{ width:1em; height:1em; transition:transform .25s; } .scard:hover .scard__more svg{ transform:translateX(-4px); } .wa-mini{ position:relative; z-index:2; display:inline-flex; align-items:center; gap:.35rem; font-weight:700; font-size:.86rem; color:var(--wa-600); padding:.42rem .75rem; border-radius:var(--r-pill); background:rgba(37,211,102,.10); transition:background .25s; } .wa-mini svg{ width:1.05em; height:1.05em; color:var(--wa); } .wa-mini:hover{ background:rgba(37,211,102,.2); } /* ---- Why us (navy) ----------------------------------------------------- */ .why{ position:relative; overflow:hidden; } .why__pattern{ position:absolute; inset:0; opacity:.06; background-size:150px; background-image:var(--pattern-gold); pointer-events:none; } .grid-why{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.1rem 2rem; position:relative; z-index:2; } .why-item{ display:flex; gap:1rem; padding:1.3rem; border-radius:var(--r); background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.08); transition:background .3s, transform .3s; } .why-item:hover{ background:rgba(255,255,255,.07); transform:translateY(-3px); } .why-item__ic{ flex:none; width:52px; height:52px; border-radius:14px; display:grid; place-items:center; background:rgba(231,203,134,.12); color:var(--gold-soft); border:1px solid rgba(231,203,134,.25); } .why-item__ic svg{ width:27px; height:27px; } .why-item h3{ font-size:1.16rem; margin-bottom:.35rem; color:#fff; } .why-item p{ color:#adc0d9; font-size:.96rem; line-height:1.75; } /* ---- How it works ------------------------------------------------------ */ .steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; position:relative; } .steps::before{ content:""; position:absolute; inset-block-start:46px; inset-inline:12%; height:2px; background:repeating-linear-gradient(90deg,var(--gold) 0 10px,transparent 10px 20px); opacity:.5; z-index:0; } .step{ position:relative; z-index:1; text-align:center; padding:0 .6rem; } .step__n{ width:92px; height:92px; margin:0 auto 1.2rem; border-radius:50%; background:#fff; border:1px solid var(--line); box-shadow:var(--sh-sm); display:grid; place-items:center; position:relative; } .step__n b{ font-family:var(--f-display); font-size:2.1rem; color:transparent; background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; font-weight:700; } .step__n::after{ content:""; position:absolute; inset:-6px; border-radius:50%; border:1px dashed var(--gold); opacity:.5; } .step h3{ font-size:var(--fs-h3); margin-bottom:.5rem; } .step p{ color:var(--muted); font-size:.98rem; max-width:30ch; margin-inline:auto; } /* ---- Featured / storytelling split ------------------------------------- */ .split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; } .split--reverse{ direction:ltr; } /* flips only the grid order; children reset below */ .split--reverse > *{ direction:rtl; } .split__media{ position:relative; margin:0; } .split__img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r-xl); box-shadow:var(--sh-lg); } .split__body h2{ margin-bottom:1.1rem; } .split__body .lead{ margin-bottom:1.6rem; } .feature-list{ display:grid; gap:.85rem; margin-bottom:1.9rem; } .feature-list li{ display:flex; gap:.7rem; align-items:flex-start; color:var(--text); } .feature-list svg{ flex:none; width:22px; height:22px; color:var(--gold-600); margin-top:.15rem; } /* branded media panel (photo slot) — replace .media-panel bg with a real later */ .media-panel{ position:relative; border-radius:var(--r-xl); overflow:hidden; aspect-ratio:4/3; background:var(--grad-navy); box-shadow:var(--sh-lg); isolation:isolate; } .media-panel__pattern{ position:absolute; inset:0; opacity:.12; background-size:120px; background-image:var(--pattern-gold); } .media-panel__art{ position:absolute; inset:0; display:grid; place-items:center; } .media-panel__art svg{ width:62%; height:auto; color:rgba(231,203,134,.9); } .media-panel__glow{ position:absolute; width:60%; aspect-ratio:1; border-radius:50%; inset-block-start:-15%; inset-inline-end:-10%; background:radial-gradient(circle,rgba(62,146,214,.5),transparent 65%); } .media-panel__tag{ position:absolute; inset-block-end:14px; inset-inline-start:14px; z-index:3; font-size:.76rem; color:#cdd9ea; background:rgba(6,16,34,.55); padding:.35rem .7rem; border-radius:var(--r-pill); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(4px); } .media-panel img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2; } /* ---- Before / After slider -------------------------------------------- */ .ba{ position:relative; border-radius:var(--r-xl); overflow:hidden; aspect-ratio:16/10; box-shadow:var(--sh-lg); user-select:none; touch-action:pan-y; max-width:920px; margin-inline:auto; } .ba__layer{ position:absolute; inset:0; } .ba__layer svg,.ba__layer img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } /* physical coords: "before" fills; "after" reveals the right portion */ .ba__before .scene{ filter:grayscale(.85) brightness(.8) contrast(.92); } .ba__dust{ position:absolute; inset:0; background-color:rgba(90,80,60,.14); background-image:radial-gradient(rgba(120,110,90,.5) 1px,transparent 1.5px),radial-gradient(rgba(120,110,90,.35) 1px,transparent 1.5px); background-size:26px 26px,17px 17px; background-position:0 0,9px 11px; } .ba__after{ clip-path:inset(0 0 0 var(--pos,50%)); } .ba__lbl{ position:absolute; top:14px; z-index:4; font-weight:700; font-size:.85rem; color:#fff; background:rgba(6,16,34,.6); padding:.35rem .8rem; border-radius:var(--r-pill); backdrop-filter:blur(4px); } .ba__lbl--before{ left:14px; } .ba__lbl--after{ right:14px; background:rgba(27,95,176,.8); } .ba__handle{ position:absolute; top:0; bottom:0; left:var(--pos,50%); width:3px; background:#fff; transform:translateX(-50%); z-index:5; box-shadow:0 0 0 1px rgba(0,0,0,.06); } .ba__grip{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:52px; height:52px; border-radius:50%; background:#fff; box-shadow:var(--sh-md); display:grid; place-items:center; z-index:6; cursor:ew-resize; color:var(--navy); } .ba__grip svg{ width:26px; height:26px; } .ba input[type=range]{ position:absolute; bottom:0; left:0; right:0; width:100%; opacity:0; height:100%; margin:0; cursor:ew-resize; z-index:7; } /* ---- Offers ------------------------------------------------------------ */ .offers{ position:relative; } .offers__note{ display:inline-flex; align-items:center; gap:.5rem; color:var(--gold-600); font-weight:700; font-size:.95rem; } .grid-offers{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:1.3rem; } .offer{ position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:1.7rem; display:flex; flex-direction:column; overflow:hidden; transition:transform .3s, box-shadow .3s; } .offer:hover{ transform:translateY(-5px); box-shadow:var(--sh-md); } .offer--featured{ grid-column:span 2; background:var(--grad-navy); color:#e8f0fb; border-color:transparent; } .offer--featured h3{ color:#fff; } .offer--featured .offer__desc{ color:#c2d2e8; } .offer__pattern{ position:absolute; inset:0; opacity:.1; background-size:110px; background-image:var(--pattern-gold); pointer-events:none; } .offer__tag{ align-self:flex-start; font-size:.8rem; font-weight:700; padding:.35rem .85rem; border-radius:var(--r-pill); background:var(--gold-100); color:var(--gold-600); margin-bottom:1rem; position:relative; z-index:2; } .offer--featured .offer__tag{ background:rgba(231,203,134,.16); color:var(--gold-soft); border:1px solid rgba(231,203,134,.3); } .offer h3{ font-size:1.35rem; margin-bottom:.6rem; position:relative; z-index:2; } .offer__desc{ color:var(--muted); font-size:.99rem; margin-bottom:1.1rem; position:relative; z-index:2; flex:1; } .offer__hl{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--f-display); font-weight:700; color:var(--gold-600); font-size:1.1rem; margin-bottom:1.3rem; position:relative; z-index:2; } .offer--featured .offer__hl{ color:var(--gold-soft); } .offer .btn{ position:relative; z-index:2; } .offer__empty{ grid-column:1/-1; text-align:center; color:var(--muted); padding:2rem; } /* ---- Service areas ----------------------------------------------------- */ .grid-cities{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1rem; } .city{ display:flex; align-items:center; gap:.85rem; padding:1.1rem 1.2rem; background:#fff; border:1px solid var(--line); border-radius:var(--r); transition:transform .25s, box-shadow .25s, border-color .25s; } .city:hover{ transform:translateY(-3px); box-shadow:var(--sh-sm); border-color:var(--azure-200); } .city__ic{ flex:none; width:42px; height:42px; border-radius:12px; background:var(--mist); color:var(--royal); display:grid; place-items:center; } .city__ic svg{ width:22px; height:22px; } .city b{ font-family:var(--f-display); color:var(--ink); font-size:1.08rem; display:block; } .city span{ font-size:.82rem; color:var(--muted); } .city__hot{ margin-inline-start:auto; font-size:.68rem; font-weight:700; color:var(--gold-600); background:var(--gold-100); padding:.2rem .5rem; border-radius:var(--r-pill); } /* ---- Testimonials ------------------------------------------------------ */ .grid-tst{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.3rem; } .tst{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:1.7rem; position:relative; } .tst__q{ position:absolute; inset-block-start:1rem; inset-inline-end:1.4rem; font-family:var(--f-en); font-size:4rem; line-height:1; color:var(--gold-100); } .tst__stars{ display:flex; gap:.15rem; color:var(--gold); margin-bottom:.9rem; } .tst__stars svg{ width:18px; height:18px; } .tst p{ color:var(--text); font-size:1rem; line-height:1.8; margin-bottom:1.2rem; position:relative; z-index:2; } .tst__who{ display:flex; align-items:center; gap:.7rem; } .tst__av{ width:42px; height:42px; border-radius:50%; background:var(--grad-navy); color:var(--gold-soft); display:grid; place-items:center; font-family:var(--f-display); font-weight:700; } .tst__who b{ display:block; color:var(--ink); font-size:.98rem; font-family:var(--f-body); } .tst__who span{ font-size:.82rem; color:var(--muted); } /* ---- Contact / quote --------------------------------------------------- */ .contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:start; } .contact-side .lead{ margin-bottom:1.8rem; } .contact-points{ display:grid; gap:1.1rem; margin-bottom:1.9rem; } .contact-point{ display:flex; gap:.9rem; align-items:flex-start; } .contact-point__ic{ flex:none; width:46px; height:46px; border-radius:12px; background:var(--mist); color:var(--royal); display:grid; place-items:center; } .contact-point__ic svg{ width:23px; height:23px; } .contact-point b{ color:var(--ink); display:block; font-family:var(--f-display); } .contact-point span{ color:var(--muted); font-size:.94rem; } .form{ background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); padding:clamp(1.4rem,3vw,2.2rem); box-shadow:var(--sh-md); } .field{ margin-bottom:1.05rem; } .field label{ display:block; font-weight:700; color:var(--ink); font-size:.92rem; margin-bottom:.45rem; } .field label .req{ color:var(--gold-600); } .field input,.field select,.field textarea{ width:100%; font-family:inherit; font-size:1rem; color:var(--ink); padding:.85rem 1rem; border:1.5px solid var(--line); border-radius:var(--r-sm); background:var(--paper); transition:border-color .2s, box-shadow .2s; } .field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--royal); box-shadow:0 0 0 4px rgba(27,95,176,.12); background:#fff; } .field textarea{ resize:vertical; min-height:96px; } .field--row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; } .form__hint{ font-size:.82rem; color:var(--muted); margin-top:.9rem; text-align:center; } .form .error-msg{ color:#c0392b; font-size:.82rem; margin-top:.3rem; display:none; } .field.invalid input,.field.invalid select{ border-color:#c0392b; } .field.invalid .error-msg{ display:block; } /* ---- Final CTA --------------------------------------------------------- */ .finalcta{ position:relative; overflow:hidden; text-align:center; } .finalcta__pattern{ position:absolute; inset:0; opacity:.07; background-size:150px; background-image:var(--pattern-gold); } .finalcta h2{ color:#fff; font-size:var(--fs-h2); margin-bottom:1rem; position:relative; z-index:2; } .finalcta p{ color:#c2d2e8; font-size:var(--fs-lead); max-width:44ch; margin:0 auto 2rem; position:relative; z-index:2; } .finalcta__cta{ display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; position:relative; z-index:2; } /* ---- Footer ------------------------------------------------------------ */ .footer{ background:#081a35; color:#a9bcd6; padding-block:clamp(3rem,6vw,4.5rem) 1.5rem; } .footer__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2.2rem; } .footer__brand b{ font-family:var(--f-display); color:#fff; font-size:1.5rem; display:block; } .footer__brand span{ font-family:var(--f-en); letter-spacing:.26em; color:var(--gold-soft); font-size:.7rem; } .footer__brand p{ margin:1rem 0 1.3rem; font-size:.95rem; color:#94a9c6; max-width:34ch; } .footer__phone{ display:flex !important; align-items:center; gap:.55rem; margin:0 0 1.3rem !important; font-size:1rem; color:#a9bcd6; } .footer__phone svg{ width:19px; height:19px; color:var(--gold-soft); flex:none; } .footer__phone a{ color:#d3e1f4; direction:ltr; letter-spacing:.02em; } .footer__phone a:hover{ color:#fff; } .footer h4{ color:#fff; font-size:1.05rem; margin-bottom:1.1rem; font-family:var(--f-display); } .footer ul{ display:grid; gap:.6rem; } .footer ul a{ color:#a9bcd6; font-size:.95rem; transition:color .2s; } .footer ul a:hover{ color:var(--gold-soft); } .social{ display:flex; gap:.6rem; } .social a{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:rgba(255,255,255,.06); color:#cfe; transition:background .25s, transform .25s, color .25s; } .social a:hover{ background:var(--grad-gold); color:#0b1e3f; transform:translateY(-3px); } .social a svg{ width:22px; height:22px; } .footer__bar{ margin-top:2.5rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.1); display:flex; flex-wrap:wrap; gap:.8rem 1.4rem; align-items:center; justify-content:space-between; font-size:.86rem; } .footer__bar nav{ display:flex; gap:1.2rem; flex-wrap:wrap; } .footer__bar a:hover{ color:#fff; } /* ---- Floating WhatsApp + mobile bar ------------------------------------ */ .fab{ position:fixed; inset-block-end:22px; inset-inline-start:22px; z-index:55; width:60px; height:60px; border-radius:50%; background:var(--wa); color:#fff; display:grid; place-items:center; box-shadow:0 14px 30px -8px rgba(37,211,102,.6); transition:transform .3s; } .fab svg{ width:30px; height:30px; } .fab:hover{ transform:scale(1.08); } .fab::before{ content:""; position:absolute; inset:0; border-radius:50%; background:var(--wa); z-index:-1; animation:pulse 2.4s ease-out infinite; } @keyframes pulse{ 0%{ transform:scale(1); opacity:.55; } 80%,100%{ transform:scale(1.9); opacity:0; } } @media (prefers-reduced-motion:reduce){ .fab::before{ animation:none; } } .mobar{ display:none; position:fixed; inset-block-end:0; inset-inline:0; z-index:55; padding:.6rem; gap:.6rem; background:rgba(255,255,255,.94); backdrop-filter:blur(10px); border-top:1px solid var(--line); box-shadow:0 -8px 24px -12px rgba(11,30,63,.2); } .mobar .btn{ flex:1; padding:.85rem .5rem; font-size:.98rem; } /* ---- Toast ------------------------------------------------------------- */ .toast{ position:fixed; inset-block-end:26px; inset-inline:0; margin-inline:auto; width:max-content; max-width:90vw; background:var(--navy); color:#fff; padding:.85rem 1.3rem; border-radius:var(--r-pill); box-shadow:var(--sh-lg); font-size:.94rem; z-index:90; opacity:0; transform:translateY(14px); transition:opacity .3s, transform .3s; pointer-events:none; } .toast.show{ opacity:1; transform:translateY(0); } /* ---- Scroll reveal ----------------------------------------------------- */ .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); } .reveal.in{ opacity:1; transform:none; } .reveal[data-d="1"]{ transition-delay:.08s; } .reveal[data-d="2"]{ transition-delay:.16s; } .reveal[data-d="3"]{ transition-delay:.24s; } .reveal[data-d="4"]{ transition-delay:.32s; } @media (prefers-reduced-motion:reduce){ .reveal{ opacity:1 !important; transform:none !important; transition:none; } .hero__spark{ animation:none; } } /* ---- Sub-page hero + templates ----------------------------------------- */ .subhero{ background:var(--grad-navy); color:#eaf1fb; position:relative; overflow:hidden; padding-block:clamp(120px,15vh,168px) clamp(48px,7vw,86px); } .subhero__pattern{ position:absolute; inset:0; opacity:.09; background-size:170px; background-image:var(--pattern-gold); } .subhero__glow{ position:absolute; width:520px; height:520px; border-radius:50%; inset-block-start:-220px; inset-inline-start:-120px; background:radial-gradient(circle,rgba(62,146,214,.45),transparent 62%); pointer-events:none; } .subhero .container{ position:relative; z-index:2; max-width:900px; } .crumb{ display:flex; gap:.55rem; align-items:center; font-size:.9rem; color:#a9c0dd; margin-bottom:1.1rem; flex-wrap:wrap; } .crumb a{ color:#c9d9ee; } .crumb a:hover{ color:#fff; } .crumb span[aria-hidden]{ opacity:.5; } .subhero h1{ color:#fff; font-size:clamp(2rem,4.6vw,3.4rem); line-height:1.2; margin-bottom:1.1rem; } .subhero__lead{ color:#c6d5ea; font-size:var(--fs-lead); max-width:46em; margin-bottom:1.8rem; } .subhero__cta{ display:flex; flex-wrap:wrap; gap:.8rem; } /* prominent service-page image, overlapping the navy sub-hero */ .service-banner{ position:relative; z-index:3; margin:clamp(-96px,-6vw,-64px) auto 0; max-width:1080px; aspect-ratio:16/8; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-lg); background:var(--mist); } .service-banner img{ width:100%; height:100%; object-fit:cover; } /* contact-point links (whatsapp/phone show the real number) */ .contact-point a{ color:var(--royal); font-weight:700; } .contact-point a:hover{ color:var(--navy); } .included{ display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:1rem; } .inc-item{ display:flex; gap:.85rem; padding:1.2rem 1.3rem; background:#fff; border:1px solid var(--line); border-radius:var(--r); transition:transform .25s,box-shadow .25s; } .inc-item:hover{ transform:translateY(-3px); box-shadow:var(--sh-sm); } .inc-item svg{ flex:none; width:24px; height:24px; color:var(--gold-600); margin-top:.15rem; } .inc-item b{ color:var(--ink); display:block; font-family:var(--f-display); margin-bottom:.2rem; } .inc-item span{ color:var(--muted); font-size:.94rem; line-height:1.7; } .hoods{ display:flex; flex-wrap:wrap; gap:.6rem; } .hood{ padding:.55rem 1.1rem; background:#fff; border:1px solid var(--line); border-radius:var(--r-pill); font-weight:500; color:var(--ink); font-size:.95rem; transition:border-color .2s,color .2s; } .hood:hover{ border-color:var(--azure-200); color:var(--royal); } /* ---- Legal / prose pages ---------------------------------------------- */ .prose{ max-width:760px; } .prose h2{ font-size:var(--fs-h3); margin:2rem 0 .7rem; } .prose h2:first-child{ margin-top:0; } .prose p{ color:var(--text); margin-bottom:1rem; line-height:1.9; } .prose ul.bullets{ list-style:disc; padding-inline-start:1.4rem; margin-bottom:1rem; color:var(--text); } .prose ul.bullets li{ margin-bottom:.5rem; } /* ---- Responsive -------------------------------------------------------- */ @media (max-width:960px){ .hero{ min-height:clamp(520px,80vh,660px); } .hero__copy{ max-width:none; } .split{ grid-template-columns:1fr; } .split--reverse{ direction:rtl; } .split__media{ order:-1; } .split__img{ aspect-ratio:16/10; } .contact-grid{ grid-template-columns:1fr; } .footer__top{ grid-template-columns:1fr 1fr; gap:1.8rem; } .offer--featured{ grid-column:auto; } .service-banner{ aspect-ratio:16/10; margin-top:clamp(-56px,-9vw,-40px); } } @media (max-width:760px){ .nav,.header-cta .btn{ display:none; } .nav-toggle{ display:inline-flex; } .hero{ min-height:82vh; align-items:flex-end; } .hero .container{ padding-block-end:1.6rem; } .hero__bg img{ object-position:30% 42%; } .hero__scrim{ background: linear-gradient(180deg, rgba(9,20,44,.5) 0%, rgba(9,20,44,.12) 26%, rgba(9,20,44,.52) 66%, rgba(9,20,44,.92) 100%); } .steps{ grid-template-columns:1fr; gap:2rem; } .steps::before{ display:none; } .fab{ display:none; } .mobar{ display:flex; } body{ padding-block-end:76px; } /* room for mobile action bar */ .field--row{ grid-template-columns:1fr; } .footer__top{ grid-template-columns:1fr; } .footer__bar{ justify-content:center; text-align:center; } } @media (min-width:761px) and (max-width:960px){ .header-cta .btn{ display:inline-flex; } }