/* ========================================================================== Space for Growth — Design Tokens & Base Brand palette derived from logo (olive, terracotta, mustard, wood, sage) ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Nunito+Sans:wght@400;500;600;700;800&family=Cairo:wght@400;500;600;700;800&display=swap'); :root{ /* Brand colors */ --color-olive-900:#33401f; --color-olive-700:#4c5c30; --color-olive-600:#5f7440; --color-olive-500:#71895a; --color-terracotta-600:#c65a34; --color-terracotta-500:#d97a4d; --color-terracotta-100:#f6e2d5; --color-mustard-500:#e0a83b; --color-mustard-100:#faedcf; --color-coral-500:#e2685c; --color-sage-500:#8fa085; --color-sage-100:#e9efe5; --color-wood-300:#e8cfa0; --color-wood-100:#f4e6c9; --color-cream-50:#fdfaf4; --color-cream-100:#f8f1e4; --color-ink-900:#312d22; --color-ink-700:#544f3f; --color-ink-500:#7a7461; --color-white:#ffffff; /* Semantic tokens */ --color-primary:var(--color-olive-600); --color-primary-dark:var(--color-olive-900); --color-secondary:var(--color-terracotta-500); --color-secondary-dark:var(--color-terracotta-600); --color-accent:var(--color-mustard-500); --color-bg:var(--color-cream-50); --color-bg-alt:var(--color-cream-100); --color-surface:var(--color-white); --color-text:var(--color-ink-900); --color-text-muted:var(--color-ink-700); --color-border:rgba(49,45,34,0.12); --color-focus-ring:var(--color-terracotta-600); /* Typography */ --font-heading:'Fraunces', 'Georgia', serif; --font-body:'Nunito Sans', 'Segoe UI', sans-serif; --font-arabic:'Cairo', 'Segoe UI', sans-serif; /* Spacing scale (8px rhythm) */ --space-1:0.5rem; --space-2:1rem; --space-3:1.5rem; --space-4:2rem; --space-5:3rem; --space-6:4rem; --space-7:6rem; --space-8:8rem; /* Layout */ --container-max:1200px; --radius-sm:10px; --radius-md:18px; --radius-lg:28px; --shadow-sm:0 2px 8px rgba(49,45,34,0.08); --shadow-md:0 8px 24px rgba(49,45,34,0.10); --shadow-lg:0 20px 50px rgba(49,45,34,0.14); --ease-standard:cubic-bezier(.22,.9,.32,1); --dur-fast:150ms; --dur-base:250ms; --dur-slow:450ms; } *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *,*::before,*::after{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important;} } body{ margin:0; background:var(--color-bg); color:var(--color-text); font-family:var(--font-body); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%;display:block;} a{color:inherit;} button{font-family:inherit;} h1,h2,h3,h4{ font-family:var(--font-heading); color:var(--color-primary-dark); line-height:1.15; margin:0 0 var(--space-2); font-weight:600; } h1{font-size:clamp(2.4rem,5vw + 1rem,4.2rem);font-weight:600;} h2{font-size:clamp(1.9rem,3vw + 1rem,2.8rem);} h3{font-size:clamp(1.2rem,1.2vw + 1rem,1.5rem);} p{margin:0 0 var(--space-2);color:var(--color-text-muted);max-width:65ch;} .lead{font-size:1.2rem;color:var(--color-text-muted);} /* ---- Bilingual toggle: dual-markup approach ---- Scoped to "body [lang]" (not bare [lang]) so these rules never match the element itself, which would otherwise hide the whole page. */ body [lang="ar"]{display:none !important;} body.lang-ar{direction:rtl;font-family:var(--font-arabic);} body.lang-ar [lang="ar"]{display:block !important;} body.lang-ar span[lang="ar"], body.lang-ar a[lang="ar"], body.lang-ar li[lang="ar"]{display:inline !important;} body.lang-ar [lang="en"]{display:none !important;} body.lang-ar h1,body.lang-ar h2,body.lang-ar h3,body.lang-ar h4{font-family:var(--font-arabic);} body.lang-ar p,body.lang-ar span,body.lang-ar a,body.lang-ar li,body.lang-ar button{font-family:var(--font-arabic);} body.lang-ar .icon-flip{transform:scaleX(-1);} /* Utility */ .container{max-width:var(--container-max);margin-inline:auto;padding-inline:var(--space-3);} @media (max-width:640px){.container{padding-inline:var(--space-2);}} .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;} .section{padding-block:var(--space-7);} @media (max-width:768px){.section{padding-block:var(--space-6);}} .section-alt{background:var(--color-bg-alt);} .section-sage{background:var(--color-sage-100);} .eyebrow{ display:inline-flex;align-items:center;gap:.5rem; font-family:var(--font-body);font-weight:800;letter-spacing:.08em;text-transform:uppercase; font-size:.78rem;color:var(--color-secondary-dark); background:var(--color-terracotta-100); padding:.4rem .9rem;border-radius:999px;margin-bottom:var(--space-2); } body.lang-ar .eyebrow{font-family:var(--font-arabic);letter-spacing:0;} .section-head{max-width:720px;margin-bottom:var(--space-5);} .section-head.center{margin-inline:auto;text-align:center;} /* Skip link */ .skip-link{ position:absolute;left:1rem;top:-3rem;background:var(--color-primary-dark);color:#fff; padding:.75rem 1.25rem;border-radius:var(--radius-sm);z-index:1000;transition:top var(--dur-base) var(--ease-standard); } .skip-link:focus{top:1rem;} /* Focus states */ a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{ outline:3px solid var(--color-focus-ring);outline-offset:3px;border-radius:6px; } /* ---- Buttons ---- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.6rem; padding:.95rem 1.7rem;border-radius:999px;font-weight:700;font-size:1rem; border:2px solid transparent;cursor:pointer;text-decoration:none; transition:transform var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard),background var(--dur-fast) var(--ease-standard); min-height:48px;white-space:nowrap; } .btn svg{width:1.2em;height:1.2em;flex:none;} .btn:hover{transform:translateY(-2px);} .btn:active{transform:translateY(0);} .btn-primary{background:var(--color-secondary);color:#fff;box-shadow:var(--shadow-sm);} .btn-primary:hover{background:var(--color-secondary-dark);box-shadow:var(--shadow-md);} .btn-outline{background:transparent;border-color:var(--color-primary-dark);color:var(--color-primary-dark);} .btn-outline:hover{background:var(--color-primary-dark);color:#fff;} .btn-ghost{background:var(--color-white);color:var(--color-primary-dark);box-shadow:var(--shadow-sm);} .btn-ghost:hover{box-shadow:var(--shadow-md);} .btn-whatsapp{background:#3a5f42;color:#fff;} .btn-whatsapp:hover{background:#2e4c35;box-shadow:var(--shadow-md);} .btn-block{width:100%;} /* ---- Header / Nav ---- */ .site-header{ position:sticky;top:0;z-index:200;background:rgba(253,250,244,0.98); border-bottom:1px solid var(--color-border);transition:box-shadow var(--dur-base) var(--ease-standard); } /* Note: intentionally no backdrop-filter here — it would make this ancestor a containing block for the position:fixed mobile nav-links panel below, collapsing it to the header's own height instead of the full viewport. */ .site-header.is-scrolled{box-shadow:var(--shadow-sm);} .nav{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding-block:.75rem;} .brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;flex:none;} .brand img{height:72px;width:auto;} .brand-name{font-family:var(--font-heading);font-weight:600;font-size:1.15rem;color:var(--color-primary-dark);} body.lang-ar .brand-name{font-family:var(--font-arabic);} .nav-links{display:flex;align-items:center;gap:1.35rem;list-style:none;margin:0;padding:0;} .nav-links li{flex:none;} .nav-links a{text-decoration:none;font-weight:600;color:var(--color-text);font-size:.92rem;position:relative;padding-block:.25rem;white-space:nowrap;} .nav-links a::after{content:"";position:absolute;left:0;bottom:-3px;width:0;height:2px;background:var(--color-secondary);transition:width var(--dur-base) var(--ease-standard);} .nav-links a:hover::after,.nav-links a:focus-visible::after{width:100%;} .nav-actions{display:flex;align-items:center;gap:.75rem;} .lang-toggle{ display:inline-flex;border:2px solid var(--color-border);border-radius:999px;overflow:hidden;font-weight:800;font-size:.82rem; } .lang-toggle button{border:0;background:transparent;padding:.45rem .8rem;cursor:pointer;color:var(--color-text-muted);} .lang-toggle button.is-active{background:var(--color-primary);color:#fff;} .nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:.5rem;color:var(--color-primary-dark);} .nav-toggle svg{width:28px;height:28px;} @media (max-width:1180px){ .nav-links{ position:fixed;inset:72px 0 0 0;background:var(--color-bg);flex-direction:column;justify-content:flex-start; padding:var(--space-4) var(--space-3);gap:var(--space-3);transform:translateY(-12px);opacity:0;pointer-events:none; transition:opacity var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard); } .nav-links li{flex:none;width:100%;} .nav-links.is-open{transform:translateY(0);opacity:1;pointer-events:auto;} .nav-links a{font-size:1.15rem;white-space:normal;} .nav-toggle{display:inline-flex;} .nav-actions .btn-primary{display:none;} } @media (min-width:1181px) and (max-width:1340px){ .nav-links{gap:1rem;} .nav-links a{font-size:.86rem;} } /* ---- Hero ---- */ .hero{position:relative;overflow:hidden;min-height:88vh;display:flex;align-items:center;} .hero-bg{position:absolute;inset:0;z-index:0;} .hero-bg img{width:100%;height:100%;object-fit:cover;} .hero-bg::after{ content:"";position:absolute;inset:0; background:linear-gradient(100deg, rgba(51,64,31,0.82) 0%, rgba(51,64,31,0.62) 38%, rgba(51,64,31,0.18) 68%, rgba(51,64,31,0.05) 100%); } body.lang-ar .hero-bg::after{background:linear-gradient(260deg, rgba(51,64,31,0.82) 0%, rgba(51,64,31,0.62) 38%, rgba(51,64,31,0.18) 68%, rgba(51,64,31,0.05) 100%);} .hero-content{position:relative;z-index:1;max-width:680px;padding-block:var(--space-7);} .hero h1,.hero .eyebrow-ghost{color:#fff;} .hero h1{color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.15);} .hero p.lead{color:#f1ede2;max-width:52ch;} .hero-actions{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-4);} .hero-badges{display:flex;gap:var(--space-4);margin-top:var(--space-5);flex-wrap:wrap;} .hero-badge{display:flex;align-items:center;gap:.6rem;color:#f4efe4;font-weight:700;font-size:.92rem;} .hero-badge svg{width:22px;height:22px;color:var(--color-mustard-500);flex:none;} /* ---- Cards ---- */ .card{ background:var(--color-surface);border-radius:var(--radius-md);padding:var(--space-4); box-shadow:var(--shadow-sm);border:1px solid var(--color-border); transition:transform var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard); } .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);} /* Grid helpers */ .grid{display:grid;gap:var(--space-4);} .grid-2{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(3,1fr);} .grid-4{grid-template-columns:repeat(4,1fr);} .grid-6{grid-template-columns:repeat(6,1fr);} @media (max-width:960px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}.grid-6{grid-template-columns:repeat(3,1fr);}} @media (max-width:640px){.grid-2,.grid-3,.grid-4,.grid-6{grid-template-columns:1fr;}} /* ---- About ---- */ .about-grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:var(--space-6);align-items:center;} @media (max-width:860px){.about-grid{grid-template-columns:1fr;gap:var(--space-4);}} .about-photo-wrap{position:relative;} .about-photo-wrap img{ border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);aspect-ratio:4/5;width:100%; object-fit:cover;object-position:39% top; } .about-photo-tag{ position:absolute;bottom:-1.25rem;inset-inline-start:-1.25rem;background:var(--color-white); border-radius:var(--radius-md);padding:1rem 1.4rem;box-shadow:var(--shadow-md);display:flex;align-items:center;gap:.75rem; font-weight:800;color:var(--color-primary-dark); } .about-photo-tag svg{width:28px;height:28px;color:var(--color-secondary);flex:none;} .placeholder-note{ font-size:.82rem;color:var(--color-secondary-dark);background:var(--color-mustard-100); border:1px dashed var(--color-mustard-500);border-radius:var(--radius-sm);padding:.6rem .9rem;margin-top:var(--space-2); } .about-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3);margin-block:var(--space-4);} .about-fact{display:flex;gap:.85rem;align-items:flex-start;} .about-fact svg{width:26px;height:26px;color:var(--color-primary);flex:none;margin-top:2px;} .about-fact h4{margin:0 0 .25rem;font-size:1rem;font-family:var(--font-body);font-weight:800;color:var(--color-primary-dark);} .about-fact p{margin:0;font-size:.92rem;} @media (max-width:520px){.about-facts{grid-template-columns:1fr;}} /* ---- Services ---- */ .service-card{text-align:start;} .service-icon{ width:60px;height:60px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center; margin-bottom:var(--space-2); } .service-icon svg{width:30px;height:30px;color:#fff;} .service-card:nth-child(6n+1) .service-icon{background:var(--color-olive-600);} .service-card:nth-child(6n+2) .service-icon{background:var(--color-terracotta-500);} .service-card:nth-child(6n+3) .service-icon{background:var(--color-sage-500);} .service-card:nth-child(6n+4) .service-icon{background:var(--color-mustard-500);} .service-card:nth-child(6n+5) .service-icon{background:var(--color-coral-500);} .service-card:nth-child(6n+6) .service-icon{background:var(--color-olive-500);} /* ---- How it works ---- */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4);counter-reset:step;position:relative;} @media (max-width:860px){.steps{grid-template-columns:1fr;}} .step{position:relative;text-align:center;padding-inline:var(--space-2);} .step-num{ width:64px;height:64px;border-radius:50%;background:var(--color-primary);color:#fff; display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-size:1.5rem;font-weight:700; margin:0 auto var(--space-2);box-shadow:var(--shadow-sm);position:relative;z-index:1; } .step:nth-child(2) .step-num{background:var(--color-terracotta-500);} .step:nth-child(3) .step-num{background:var(--color-mustard-500);} .step:nth-child(4) .step-num{background:var(--color-sage-500);} .step-connector{ position:absolute;top:32px;left:calc(50% + 40px);width:calc(100% - 80px);height:2px; background:repeating-linear-gradient(90deg,var(--color-border) 0 8px,transparent 8px 16px);z-index:0; } .step:last-child .step-connector{display:none;} @media (max-width:860px){.step-connector{display:none;}} .step h3{margin-bottom:.4rem;} /* ---- Environment gallery ---- */ .env-grid{ display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:1fr 1fr;gap:var(--space-3); aspect-ratio:6/7; } .env-grid img{border-radius:var(--radius-md);box-shadow:var(--shadow-sm);object-fit:cover;width:100%;height:100%;display:block;} .env-grid .env-main{grid-row:span 2;} @media (max-width:760px){ .env-grid{grid-template-columns:1fr;grid-template-rows:none;aspect-ratio:auto;} .env-grid img{height:auto;} .env-grid .env-main{grid-row:auto;aspect-ratio:4/3;} .env-grid .env-sub{aspect-ratio:16/10;} } .env-copy{max-width:520px;} .env-chip-list{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:var(--space-3);} .env-chip{ display:flex;align-items:center;gap:.5rem;background:var(--color-white);border:1px solid var(--color-border); border-radius:999px;padding:.5rem 1rem;font-weight:700;font-size:.88rem;color:var(--color-primary-dark); transition:transform var(--dur-fast) var(--ease-standard),background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard); } .env-chip svg{width:18px;height:18px;color:var(--color-secondary);} /* Chips with a data-tip get a hover/focus popup + lift; plain chips just get the lift */ .env-chip[data-tip]{position:relative;cursor:help;} .env-chip:hover,.env-chip[data-tip]:focus-visible{ transform:translateY(-3px);box-shadow:var(--shadow-sm); } .env-chip[data-tip]:hover,.env-chip[data-tip]:focus-visible{ background:var(--color-primary);color:#fff;border-color:var(--color-primary); } .env-chip[data-tip]:hover svg,.env-chip[data-tip]:focus-visible svg{color:#fff;} .env-chip[data-tip]::after{ content:attr(data-tip); position:absolute;bottom:calc(100% + 12px);left:50%; transform:translateX(-50%) translateY(6px); background:var(--color-primary-dark);color:#fff; font-family:var(--font-body);font-weight:600;font-size:.8rem;line-height:1.4; padding:.65rem .9rem;border-radius:var(--radius-sm); width:max-content;max-width:220px;text-align:center;white-space:normal; opacity:0;pointer-events:none;z-index:20;box-shadow:var(--shadow-md); transition:opacity var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard); } .env-chip[data-tip]::before{ content:"";position:absolute;bottom:calc(100% + 5px);left:50%; transform:translateX(-50%); border:6px solid transparent;border-top-color:var(--color-primary-dark); opacity:0;pointer-events:none;z-index:20; transition:opacity var(--dur-base) var(--ease-standard); } .env-chip[data-tip]:hover::after,.env-chip[data-tip]:focus-visible::after{ opacity:1;transform:translateX(-50%) translateY(0); } .env-chip[data-tip]:hover::before,.env-chip[data-tip]:focus-visible::before{opacity:1;} @media (prefers-reduced-motion:reduce){ .env-chip,.env-chip[data-tip]::after,.env-chip[data-tip]::before{transition:none;} } /* ---- Testimonials ---- */ .testimonial-track{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);} @media (max-width:900px){.testimonial-track{grid-template-columns:1fr;}} .testimonial-card{position:relative;background:var(--color-white);} .testimonial-quote-mark{font-family:var(--font-heading);font-size:3.5rem;color:var(--color-terracotta-100);line-height:1;position:absolute;top:.5rem;inset-inline-start:1rem;} .testimonial-text{position:relative;font-family:var(--font-heading);font-size:1.12rem;color:var(--color-primary-dark);font-weight:500;font-style:italic;margin-top:1.5rem;} .testimonial-stars{display:flex;gap:.2rem;margin-bottom:.5rem;} .testimonial-stars svg{width:18px;height:18px;color:var(--color-mustard-500);} .testimonial-attr{display:flex;align-items:center;gap:.6rem;margin-top:var(--space-3);font-weight:700;font-size:.88rem;color:var(--color-text-muted);} .testimonial-attr svg{width:20px;height:20px;color:var(--color-primary);} /* ---- Why choose us ---- */ .why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);} @media (max-width:760px){.why-grid{grid-template-columns:1fr;}} .why-item{display:flex;gap:1rem;align-items:flex-start;padding:var(--space-3);} .why-check{ flex:none;width:36px;height:36px;border-radius:50%;background:var(--color-sage-100); display:flex;align-items:center;justify-content:center; } .why-check svg{width:20px;height:20px;color:var(--color-olive-700);} .why-item h4{margin:0 0 .25rem;font-family:var(--font-body);font-weight:800;font-size:1.02rem;color:var(--color-primary-dark);} .why-item p{margin:0;font-size:.92rem;} /* ---- FAQ ---- */ .faq-list{max-width:820px;margin-inline:auto;} .faq-item{border-bottom:1px solid var(--color-border);} .faq-question{ width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--space-2); background:none;border:0;padding:var(--space-3) .5rem;text-align:start;cursor:pointer; font-family:var(--font-heading);font-size:1.1rem;font-weight:600;color:var(--color-primary-dark); } .faq-question .plus{ flex:none;width:34px;height:34px;border-radius:50%;border:2px solid var(--color-border); display:flex;align-items:center;justify-content:center;transition:transform var(--dur-base) var(--ease-standard),background var(--dur-base) var(--ease-standard); } .faq-question .plus svg{width:16px;height:16px;color:var(--color-primary-dark);} .faq-question[aria-expanded="true"] .plus{transform:rotate(45deg);background:var(--color-terracotta-500);} .faq-question[aria-expanded="true"] .plus svg{color:#fff;} .faq-answer{overflow:hidden;max-height:0;transition:max-height var(--dur-slow) var(--ease-standard);} .faq-answer-inner{padding:0 .5rem var(--space-3);} .faq-answer-inner p{margin:0;} /* ---- CTA banner ---- */ .cta-banner{ position:relative;border-radius:var(--radius-lg);overflow:hidden;padding:var(--space-7) var(--space-4); text-align:center;background:linear-gradient(135deg,var(--color-olive-700),var(--color-olive-900)); color:#fff; } .cta-banner h2{color:#fff;} .cta-banner p{color:#e7e6d8;margin-inline:auto;} .cta-banner .btn-primary{background:var(--color-mustard-500);color:var(--color-ink-900);} .cta-banner .btn-primary:hover{background:#eab749;} .cta-decor{position:absolute;border-radius:50%;opacity:.15;pointer-events:none;} .cta-decor.d1{width:260px;height:260px;background:var(--color-mustard-500);top:-90px;inset-inline-start:-70px;} .cta-decor.d2{width:200px;height:200px;background:var(--color-terracotta-500);bottom:-80px;inset-inline-end:-50px;} /* ---- Resources ---- */ .resource-card{display:flex;flex-direction:column;height:100%;text-decoration:none;} .resource-tag{ display:inline-flex;align-self:flex-start;font-size:.76rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase; color:var(--color-secondary-dark);background:var(--color-terracotta-100);padding:.3rem .7rem;border-radius:999px;margin-bottom:var(--space-2); } .resource-card h3{margin-bottom:.5rem;} .resource-read{display:inline-flex;align-items:center;gap:.4rem;font-weight:800;color:var(--color-primary);margin-top:auto;padding-top:var(--space-2);} .resource-read svg{width:18px;height:18px;transition:transform var(--dur-fast) var(--ease-standard);} .resource-card:hover .resource-read svg{transform:translateX(4px);} body.lang-ar .resource-card:hover .resource-read svg{transform:translateX(-4px) scaleX(-1);} /* ---- Footer ---- */ .site-footer{background:var(--color-olive-900);color:#e9e6da;padding-block:var(--space-6) var(--space-4);} .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:var(--space-4);} @media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr;}} @media (max-width:560px){.footer-grid{grid-template-columns:1fr;}} .footer-brand{display:flex;align-items:center;gap:.6rem;margin-bottom:var(--space-2);} .footer-brand img{height:42px;width:auto;filter:brightness(0) invert(1);opacity:.92;} .footer-brand span{font-family:var(--font-heading);font-weight:600;font-size:1.05rem;color:#fff;} .site-footer h4{color:#fff;font-family:var(--font-body);font-weight:800;font-size:.92rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-2);} .site-footer p{color:#c9c6b8;font-size:.92rem;} .footer-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem;} .footer-links a{text-decoration:none;color:#c9c6b8;font-size:.92rem;transition:color var(--dur-fast);} .footer-links a:hover{color:#fff;} .footer-contact{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.75rem;} .footer-contact li{display:flex;gap:.6rem;align-items:flex-start;font-size:.92rem;color:#c9c6b8;} .footer-contact svg{width:19px;height:19px;color:var(--color-mustard-500);flex:none;margin-top:2px;} .footer-social{display:flex;gap:.6rem;margin-top:var(--space-2);} .footer-social a{ width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center; transition:background var(--dur-fast); } .footer-social a:hover{background:var(--color-terracotta-500);} .footer-social svg{width:18px;height:18px;color:#fff;} .footer-bottom{ border-top:1px solid rgba(255,255,255,0.12);margin-top:var(--space-5);padding-top:var(--space-3); display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-2);font-size:.82rem;color:#b1ad9d; } .footer-disclaimer{font-size:.8rem;color:#a9a693;max-width:900px;margin-top:var(--space-3);line-height:1.6;} /* ---- WhatsApp floating button ---- */ .whatsapp-float{ position:fixed;bottom:1.5rem;inset-inline-end:1.5rem;z-index:150; width:60px;height:60px;border-radius:50%;background:#3a5f42;color:#fff;display:flex;align-items:center;justify-content:center; box-shadow:var(--shadow-lg);transition:transform var(--dur-base) var(--ease-standard);text-decoration:none; } .whatsapp-float:hover{transform:scale(1.08);} .whatsapp-float svg{width:30px;height:30px;} /* ---- Reveal on scroll ---- */ .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease-standard),transform .7s var(--ease-standard);} .reveal.is-visible{opacity:1;transform:translateY(0);} @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;}} /* ---- Blog article page ---- */ .article-hero{padding-block:var(--space-6) var(--space-4);background:var(--color-bg-alt);} .article-hero img{border-radius:var(--radius-lg);box-shadow:var(--shadow-md);width:100%;aspect-ratio:16/7;object-fit:cover;margin-top:var(--space-4);} .article-meta{display:flex;gap:var(--space-3);flex-wrap:wrap;color:var(--color-text-muted);font-size:.9rem;font-weight:700;margin-bottom:var(--space-2);} .article-meta span{display:inline-flex;align-items:center;gap:.4rem;} .article-meta svg{width:17px;height:17px;color:var(--color-secondary);} .article-body{max-width:760px;margin-inline:auto;padding-block:var(--space-6);} .article-body h2{margin-top:var(--space-5);} .article-body p{max-width:none;font-size:1.05rem;} .article-body ul{color:var(--color-text-muted);padding-inline-start:1.4rem;font-size:1.05rem;} .article-body li{margin-bottom:.5rem;} .article-callout{ background:var(--color-sage-100);border-inline-start:4px solid var(--color-olive-600);border-radius:var(--radius-sm); padding:var(--space-3);margin-block:var(--space-4); } body.lang-ar .article-callout{border-inline-start:0;border-inline-end:4px solid var(--color-olive-600);} .article-callout p{margin:0;color:var(--color-primary-dark);font-weight:600;} .back-link{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;color:var(--color-primary);text-decoration:none;margin-bottom:var(--space-3);} .back-link svg{width:18px;height:18px;} body.lang-ar .back-link svg{transform:scaleX(-1);} .article-cta{background:var(--color-bg-alt);border-radius:var(--radius-md);padding:var(--space-4);text-align:center;margin-top:var(--space-6);}