/* ============================================================ Lamsa — shared stylesheet Type scale: all font sizes are in rem against the root size set on below. Change that one value to scale the whole site; don't reintroduce px font sizes, or they'll stop scaling with it. ============================================================ */ :root{ --black:#131313; --ivory:#FAF8F4; --ivory-deep:#F3EEE4; --gold:#C9A13B; --gold-bright:#D4AF37; --gold-ink:#8a6a28; --text:#2b2620; --muted:#7a715e; --line:#E9E2D3; --wa:#25D366; --shell:5vw; } *{margin:0;padding:0;box-sizing:border-box;} /* 109.375% of the browser default = 17.5px when the default is 16px. Kept as a percentage so a user's own font-size setting still applies. */ html{scroll-behavior:smooth;font-size:109.375%;} body{font-family:'Tajawal',sans-serif;background:var(--ivory);color:var(--text); -webkit-font-smoothing:antialiased;} img{max-width:100%;} a{color:inherit;} /* Icon sprite holder — symbols are referenced via , never shown directly */ .sprite{display:none;} /* ---------- Loading screen ---------- */ #loader{position:fixed;inset:0;background:#fff;z-index:100;display:flex; align-items:center;justify-content:center;transition:opacity .7s ease;} #loader.done{opacity:0;pointer-events:none;} #loader img{width:min(300px,60vw);animation:breathe 2s ease-in-out infinite;} @keyframes breathe{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.05);opacity:1}} /* ---------- Header ---------- */ header{position:sticky;top:0;z-index:50;background:rgba(250,248,244,.92); backdrop-filter:blur(8px);border-bottom:.5px solid var(--line); display:flex;justify-content:space-between;align-items:center; padding:14px var(--shell);transition:padding .3s ease,box-shadow .3s ease;} header.shrunk{padding:7px var(--shell);box-shadow:0 1px 14px rgba(19,19,19,.05);} header .logo img{height:76px;transition:height .3s ease;display:block;} header.shrunk .logo img{height:52px;} nav{display:flex;align-items:center;gap:26px;font-size:.9375rem;} nav a{color:var(--muted);text-decoration:none;position:relative;padding:4px 0; transition:color .2s;} nav a:hover{color:var(--gold-ink);} nav a.active{color:var(--text);font-weight:500;} nav a.active::after{content:"";position:absolute;inset-inline:0;bottom:-2px; height:2px;background:var(--gold);border-radius:2px;} #langBtn{background:transparent;border:1px solid var(--gold);color:var(--gold-ink); border-radius:20px;padding:.375rem 1.125rem;font-size:.8125rem;cursor:pointer; font-family:inherit;transition:background .2s,color .2s;} #langBtn:hover{background:var(--gold);color:var(--black);} /* ---------- Buttons ---------- */ .btn-gold{display:inline-block;background:var(--gold);color:var(--black); border:none;border-radius:26px;padding:.875rem 2.5rem;font-size:.9375rem;font-weight:500; cursor:pointer;font-family:inherit;text-decoration:none;transition:background .2s,transform .2s;} .btn-gold:hover{background:var(--gold-bright);transform:translateY(-1px);} .btn-gold:disabled{opacity:.55;cursor:not-allowed;transform:none;} .btn-ghost{display:inline-block;background:transparent;border:1px solid var(--gold); color:var(--gold-ink);border-radius:26px;padding:.8125rem 2.125rem;font-size:.9375rem; text-decoration:none;font-family:inherit;cursor:pointer;transition:background .2s,color .2s;} .btn-ghost:hover{background:var(--gold);color:var(--black);} .btn-wa{display:inline-flex;align-items:center;justify-content:center;gap:9px; background:var(--wa);color:#0b2b16;border-radius:26px;padding:.8125rem 1.875rem; font-size:.9375rem;font-weight:500;text-decoration:none;transition:filter .2s;} .btn-wa:hover{filter:brightness(1.06);} .btn-wa svg{width:1.25rem;height:1.25rem;fill:currentColor;flex:none;} /* ---------- Hero (home) ---------- */ .hero{background:var(--ivory);padding:64px var(--shell) 72px;} .hero-inner{max-width:1180px;margin:0 auto;display:grid; grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center;} .hero-copy .eyebrow{color:var(--gold-ink);font-size:.8125rem;letter-spacing:.14em; text-transform:uppercase;margin-bottom:18px;} .hero-copy h1{font-size:clamp(1.75rem,4.2vw,2.875rem);line-height:1.5;font-weight:700; letter-spacing:-.01em;margin-bottom:20px;} .hero-copy .sub{color:var(--muted);font-size:1rem;line-height:2;max-width:46ch; margin-bottom:32px;} .hero-actions{display:flex;gap:12px;flex-wrap:wrap;} .hero-visual{aspect-ratio:4/5;border-radius:18px;overflow:hidden; background:linear-gradient(150deg,#FFFDF8 0%,var(--ivory-deep) 48%,#EADFC6 100%); border:.5px solid var(--line);display:flex;align-items:center;justify-content:center; box-shadow:0 20px 50px -28px rgba(19,19,19,.35);} .hero-visual img.photo{width:100%;height:100%;object-fit:cover;} .hero-visual img.mark{width:min(56%,260px);opacity:.9;} /* ---------- Brand slider (home) ---------- */ .slider{overflow:hidden;border-block:.5px solid var(--line);padding:22px 0; direction:ltr;background:var(--ivory);} .track{display:flex;width:max-content;animation:slide 38s linear infinite;} .track:hover{animation-play-state:paused;} .track .set{display:flex;align-items:center;} @keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ---------- Brand tiles (shared: slider + grids) ---------- */ .tile{background:#fff;border:.5px solid var(--line);border-radius:12px; display:flex;align-items:center;justify-content:center;flex:none; width:168px;height:104px;padding:20px;} .tile img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain; mix-blend-mode:multiply;} .track .tile{margin:0 12px;width:150px;height:88px;} /* ---------- Sections ---------- */ section{padding:66px var(--shell);} .wrap{max-width:1060px;margin:0 auto;} .wrap-narrow{max-width:620px;margin:0 auto;} h2{font-size:clamp(1.375rem,2.6vw,1.75rem);font-weight:700;margin-bottom:14px;} .section-head{text-align:center;margin-bottom:34px;} .section-head p{color:var(--muted);font-size:.9375rem;line-height:2;max-width:56ch; margin:0 auto;} .center-text{text-align:center;color:var(--muted);font-size:.9375rem;line-height:2.1;} /* Muted intro paragraph under a heading */ .lede{color:var(--muted);font-size:.875rem;line-height:1.9;margin:8px 0 24px;} /* ---------- Supply cards ---------- */ .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px;} .card{background:#fff;border:.5px solid var(--line);border-radius:14px; padding:32px 26px;text-align:center;transition:transform .25s,box-shadow .25s;} .card:hover{transform:translateY(-3px);box-shadow:0 14px 34px -22px rgba(19,19,19,.4);} .card .icon{font-size:1.625rem;color:var(--gold);} .card h3{font-size:1.0625rem;margin:12px 0 8px;} .card p{font-size:.875rem;color:var(--muted);line-height:1.9;} /* ---------- Filters ---------- */ .filters{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:30px;} .fbtn{background:transparent;border:1px solid #D8CFBB;color:var(--muted); border-radius:20px;padding:.5rem 1.375rem;font-size:.8125rem;cursor:pointer; font-family:inherit;transition:background .2s,color .2s,border-color .2s;} .fbtn:hover{border-color:var(--gold);color:var(--gold-ink);} .fbtn.on{background:var(--gold);border-color:var(--gold);color:var(--black);} /* ---------- Brand detail cards (brands.html) ---------- */ .brand-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:18px;} .brand-card{background:#fff;border:.5px solid var(--line);border-radius:14px; padding:22px;display:flex;flex-direction:column;align-items:center;gap:14px; text-align:center;transition:transform .25s,box-shadow .25s;} .brand-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px -22px rgba(19,19,19,.4);} .brand-card .tile{width:100%;height:96px;border:none;padding:8px;} .brand-card h3{font-size:1rem;font-weight:500;} .brand-card p{font-size:.8125rem;color:var(--muted);line-height:1.8;} .tag{display:inline-block;font-size:.6875rem;letter-spacing:.06em;border-radius:20px; padding:4px 13px;border:.5px solid var(--line);color:var(--gold-ink); background:var(--ivory);} /* ---------- Page banner (inner pages) ---------- */ .banner{background:var(--ivory-deep);border-bottom:.5px solid var(--line); padding:52px var(--shell);text-align:center;} .banner h1{font-size:clamp(1.5rem,3.4vw,2.125rem);font-weight:700;margin-bottom:12px;} .banner p{color:var(--muted);font-size:.9375rem;line-height:2;max-width:56ch;margin:0 auto;} /* ---------- About page ---------- */ .about-body{font-size:1rem;line-height:2.2;color:var(--muted);} .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px;margin-top:44px;} .stat{background:#fff;border:.5px solid var(--line);border-radius:14px; padding:26px 18px;text-align:center;} .stat .n{font-size:1.625rem;font-weight:700;color:var(--gold-ink);} .stat .l{font-size:.8125rem;color:var(--muted);margin-top:6px;} /* ---------- Contact page ---------- */ .contact-cols{display:grid;grid-template-columns:1.1fr .9fr; gap:clamp(28px,4vw,56px);align-items:start;} /* The enquiry form sits in a white panel so it matches the card language used by .info-list and .map-embed in the column beside it. */ .form-panel{background:#fff;border:.5px solid var(--line);border-radius:14px; padding:clamp(20px,3vw,32px);} .field{margin-bottom:18px;} .field label{display:block;font-size:.8125rem;color:var(--muted);margin-bottom:7px;} .field input,.field select,.field textarea{width:100%;font-family:inherit;font-size:.9375rem; color:var(--text);background:#fff;border:.5px solid var(--line);border-radius:10px; padding:.75rem .875rem;transition:border-color .2s,box-shadow .2s;} .form-panel .field input,.form-panel .field select,.form-panel .field textarea{ background:var(--ivory);} .field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,161,59,.14);} .field textarea{min-height:8rem;resize:vertical;} .field select{appearance:none;cursor:pointer;} #formNote{margin-top:14px;font-size:.875rem;line-height:1.9;display:none;} #formNote.ok{display:block;color:#1f6b3a;} #formNote.err{display:block;color:#a33;} .info-list{list-style:none;display:grid;gap:2px;} .info-list li{background:#fff;border:.5px solid var(--line);padding:16px 18px; display:flex;flex-direction:column;gap:4px;} .info-list li:first-child{border-start-start-radius:14px;border-start-end-radius:14px;} .info-list li:last-child{border-end-start-radius:14px;border-end-end-radius:14px;} .info-list .k{font-size:.75rem;color:var(--muted);letter-spacing:.05em;} .info-list .v{font-size:.9375rem;color:var(--text);text-decoration:none;} .info-list a.v:hover{color:var(--gold-ink);} .contact-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px;} .map-embed{margin-top:18px;border-radius:14px;overflow:hidden; border:.5px solid var(--line);background:#fff;} .map-embed iframe{width:100%;height:clamp(260px,38vh,380px);border:0;display:block;} /* ---------- CTA strip ---------- */ .cta-strip{background:var(--black);color:#c9c1b2;text-align:center;} .cta-strip h2{color:#F0E6CE;} .cta-strip p{color:#9c9384;font-size:.9375rem;line-height:2;max-width:52ch; margin:0 auto 26px;} /* Ghost button needs the brighter gold to stay legible on the black strip */ .cta-strip .btn-ghost{border-color:#C9A13B;color:#C9A13B;} .cta-strip .btn-ghost:hover{background:var(--gold);color:var(--black);} .cta-btns{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;} /* ---------- Footer ---------- */ footer{background:var(--black);color:#5f584c;font-size:.8125rem; padding:34px var(--shell);border-top:.5px solid #242424;} .foot-inner{max-width:1060px;margin:0 auto;display:flex;justify-content:space-between; align-items:center;gap:18px;flex-wrap:wrap;} .foot-nav{display:flex;gap:20px;flex-wrap:wrap;} .foot-nav a{color:#8c8474;text-decoration:none;transition:color .2s;} .foot-nav a:hover{color:var(--gold);} /* ---------- Floating WhatsApp ---------- */ #waFloat{position:fixed;bottom:22px;inset-inline-start:22px;z-index:60; width:54px;height:54px;border-radius:50%;background:var(--wa); display:flex;align-items:center;justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,.25);text-decoration:none; transition:transform .2s;} #waFloat:hover{transform:scale(1.06);} #waFloat svg{width:28px;height:28px;fill:#fff;} /* ---------- Scroll reveal ---------- */ .reveal{opacity:0;transform:translateY(24px); transition:opacity .7s ease,transform .7s ease;} .reveal.visible{opacity:1;transform:none;} @media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none;} .track{animation:none;} #loader img{animation:none;} html{scroll-behavior:auto;} } /* ---------- Responsive ---------- */ @media (max-width:860px){ .hero-inner{grid-template-columns:1fr;gap:34px;} .hero-visual{aspect-ratio:16/11;order:-1;} .hero-visual img.mark{width:min(38%,190px);} .contact-cols{grid-template-columns:1fr;} } @media (max-width:640px){ nav{gap:14px;font-size:.8125rem;} nav a.hide-mobile{display:none;} header .logo img{height:54px;} header.shrunk .logo img{height:42px;} section{padding:48px var(--shell);} .hero{padding:40px var(--shell) 52px;} .foot-inner{justify-content:center;text-align:center;} }