/* ============================================================ Samani Construction Ltd — Design System Charcoal / Brass / Bone · serif display + grotesque body ============================================================ */ /* Fonts are preloaded in each page (preconnect + stylesheet) for faster first paint. */ :root{ --charcoal:#1A1C1E; --charcoal-2:#232629; --brass:#C8912B; --brass-light:#E0AC46; --bone:#F4F1EA; --bone-2:#EAE5DA; --stone:#8A7A5C; --ink:#14161a; --line:rgba(26,28,30,.12); --line-dk:rgba(244,241,234,.14); --serif:'Fraunces',Georgia,'Times New Roman',serif; --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; --wrap:1200px; --ease:cubic-bezier(.22,.61,.36,1); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:var(--sans); color:var(--charcoal); background:var(--bone); line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img,svg{display:block;max-width:100%} a{color:inherit;text-decoration:none} h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.06;letter-spacing:-.02em} h1{font-size:clamp(2.6rem,6vw,5.2rem)} h2{font-size:clamp(2rem,4vw,3.4rem)} h3{font-size:clamp(1.3rem,2vw,1.7rem)} p{max-width:64ch} .wrap{width:min(var(--wrap),92vw);margin-inline:auto} .eyebrow{ font-family:var(--sans);font-size:.74rem;font-weight:600; letter-spacing:.28em;text-transform:uppercase;color:var(--brass); display:inline-flex;align-items:center;gap:.7rem; } .eyebrow::before{content:"";width:26px;height:1px;background:var(--brass)} .lede{font-size:clamp(1.05rem,1.5vw,1.28rem);color:#3a3d40;max-width:60ch} .muted{color:var(--stone)} /* buttons */ .btn{ display:inline-flex;align-items:center;gap:.6rem; font-weight:600;font-size:.92rem;letter-spacing:.01em; padding:.95rem 1.7rem;border-radius:2px;border:1px solid transparent; cursor:pointer;transition:.35s var(--ease); } .btn-primary{background:var(--brass);color:#1a1206} .btn-primary:hover{background:var(--brass-light);transform:translateY(-2px)} .btn-ghost{border-color:currentColor;color:var(--charcoal)} .btn-ghost:hover{background:var(--charcoal);color:var(--bone)} .btn-ghost.on-dark{color:var(--bone)} .btn-ghost.on-dark:hover{background:var(--bone);color:var(--charcoal)} .btn .arw{transition:transform .35s var(--ease)} .btn:hover .arw{transform:translateX(4px)} /* ---------- header ---------- */ .site-head{ position:fixed;top:0;left:0;right:0;z-index:100; display:flex;align-items:center;justify-content:space-between; padding:1.1rem clamp(1rem,4vw,2.6rem); transition:.4s var(--ease); } .site-head.solid{background:rgba(26,28,30,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line-dk)} .site-head .brand img{height:38px} .nav{display:flex;align-items:center;gap:2rem} .nav a{font-size:.9rem;font-weight:500;color:var(--bone);opacity:.82;transition:.25s;position:relative} .nav a:hover,.nav a.active{opacity:1;color:var(--brass-light)} .nav a.active::after{content:"";position:absolute;left:0;bottom:-6px;width:100%;height:1px;background:var(--brass)} .nav .btn{padding:.6rem 1.2rem} .burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px} .burger span{width:26px;height:2px;background:var(--bone);transition:.3s} /* ---------- hero ---------- */ .hero{ position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end; color:var(--bone); background: radial-gradient(120% 90% at 80% 10%,rgba(200,145,43,.16),transparent 55%), linear-gradient(180deg,#15171a 0%,#1d2023 55%,#14161a 100%); overflow:hidden; } .hero::before{ /* blueprint grid */ content:"";position:absolute;inset:0;opacity:.5; background-image:linear-gradient(var(--line-dk) 1px,transparent 1px),linear-gradient(90deg,var(--line-dk) 1px,transparent 1px); background-size:64px 64px;mask-image:radial-gradient(120% 100% at 70% 30%,#000,transparent 75%); } .hero-inner{position:relative;z-index:2;width:min(var(--wrap),92vw);margin-inline:auto;padding:9rem 0 5rem} .hero h1{max-width:16ch} .hero h1 em{font-style:italic;color:var(--brass-light)} .hero .lede{color:#cfccc4;margin-top:1.6rem} .hero-cta{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2.4rem} .hero-strip{ position:relative;z-index:2;border-top:1px solid var(--line-dk); background:rgba(20,22,26,.4); } .hero-strip .wrap{display:flex;flex-wrap:wrap;gap:2rem 3rem;padding:1.4rem 0} .hero-strip .stat{display:flex;flex-direction:column} .hero-strip .stat b{font-family:var(--serif);font-size:1.7rem;color:var(--brass-light);line-height:1} .hero-strip .stat span{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:#a7a49c;margin-top:.4rem} /* ---------- sections ---------- */ section{padding:clamp(4rem,9vw,8rem) 0} .sec-head{max-width:70ch;margin-bottom:3rem} .sec-head h2{margin-top:1rem} .dark{background:var(--charcoal);color:var(--bone)} .dark .lede{color:#c7c4bc} .dark .sec-head h2{color:var(--bone)} /* services grid */ .grid{display:grid;gap:1.4rem} .cols-3{grid-template-columns:repeat(3,1fr)} .cols-2{grid-template-columns:repeat(2,1fr)} .card{ background:#fff;border:1px solid var(--line);border-radius:4px;padding:2rem; transition:.4s var(--ease);position:relative;overflow:hidden; } .dark .card{background:var(--charcoal-2);border-color:var(--line-dk)} .card:hover{transform:translateY(-5px);border-color:var(--brass);box-shadow:0 24px 50px -30px rgba(0,0,0,.4)} .card .num{font-family:var(--serif);font-size:.9rem;color:var(--brass);font-weight:600} .card h3{margin:.9rem 0 .6rem} .card p{font-size:.95rem;color:#4a4d50} .dark .card p{color:#b7b4ac} .card .ic{width:44px;height:44px;color:var(--brass);margin-bottom:1.1rem} /* project tiles */ .projects-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1.1rem} .ptile{ position:relative;border-radius:4px;overflow:hidden;min-height:300px; display:flex;flex-direction:column;justify-content:flex-end; padding:1.6rem;color:var(--bone);isolation:isolate; border:1px solid var(--line-dk); } .ptile.big{grid-column:span 4;min-height:420px} .ptile.reg{grid-column:span 2} .ptile.half{grid-column:span 3} .ptile::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--pattern),linear-gradient(135deg,#26292c,#15171a);background-size:cover;transition:transform .8s var(--ease)} .ptile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 30%,rgba(15,16,18,.82))} .ptile:hover::before{transform:scale(1.06)} .ptile .tag{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-light);font-weight:600} .ptile h3{margin:.4rem 0 .2rem;color:#fff} .ptile .loc{font-size:.85rem;color:#cfccc4} /* pattern fills for tiles (stand-ins for real photography) */ .p-sirai{--pattern:radial-gradient(circle at 30% 20%,rgba(200,145,43,.35),transparent 60%)} .p-capital{--pattern:linear-gradient(120deg,rgba(200,145,43,.28),transparent 55%)} .p-sankara{--pattern:radial-gradient(circle at 75% 30%,rgba(224,172,70,.32),transparent 60%)} .p-city{--pattern:linear-gradient(60deg,rgba(138,122,92,.4),transparent 60%)} .p-aaa{--pattern:radial-gradient(circle at 50% 80%,rgba(200,145,43,.3),transparent 65%)} .p-sarova{--pattern:linear-gradient(200deg,rgba(224,172,70,.3),transparent 55%)} /* split feature */ .split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,5rem);align-items:center} .split .visual{ aspect-ratio:4/5;border-radius:6px;border:1px solid var(--line-dk); background: radial-gradient(120% 90% at 20% 10%,rgba(200,145,43,.22),transparent 55%), repeating-linear-gradient(90deg,#232629 0 2px,#1c1f22 2px 26px), linear-gradient(180deg,#26292c,#15171a); position:relative;overflow:hidden; } .split .visual .badge{ position:absolute;left:1.6rem;bottom:1.6rem;color:var(--bone); font-family:var(--serif);font-style:italic;font-size:1.1rem; } .feature-list{list-style:none;margin-top:2rem;display:grid;gap:1rem} .feature-list li{display:flex;gap:1rem;align-items:flex-start;padding-bottom:1rem;border-bottom:1px solid var(--line)} .dark .feature-list li{border-color:var(--line-dk)} .feature-list .k{font-family:var(--serif);color:var(--brass);font-size:1.1rem;min-width:2.2rem} /* process steps */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;counter-reset:s} .step{padding-top:1.4rem;border-top:2px solid var(--line-dk)} .step .n{font-family:var(--serif);font-size:2.4rem;color:var(--brass);line-height:1} .step h3{font-size:1.15rem;margin:.6rem 0 .4rem;color:var(--bone)} .step p{font-size:.9rem;color:#b7b4ac} /* logos / trust */ .logos{display:flex;flex-wrap:wrap;gap:1.4rem 2.6rem;align-items:center;opacity:.9} .logos span{font-family:var(--serif);font-size:1.15rem;color:var(--stone);letter-spacing:.02em} /* CTA band */ .cta-band{background:linear-gradient(120deg,var(--brass) 0%,#a8761f 100%);color:#1a1206;text-align:center} .cta-band h2{color:#1a1206;max-width:20ch;margin:0 auto 1.4rem} .cta-band .btn-ghost{border-color:#1a1206;color:#1a1206} .cta-band .btn-ghost:hover{background:#1a1206;color:var(--brass)} /* forms */ .contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2rem,5vw,4.5rem)} .info-row{display:flex;gap:1rem;padding:1.3rem 0;border-bottom:1px solid var(--line-dk)} .info-row .ic{width:22px;color:var(--brass);flex-shrink:0;margin-top:3px} .info-row b{display:block;font-family:var(--serif);font-size:1.1rem;color:var(--bone)} .info-row span{color:#b7b4ac;font-size:.95rem} form{display:grid;gap:1.1rem} .f-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem} label{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--stone);font-weight:600;display:block;margin-bottom:.5rem} input,select,textarea{ width:100%;padding:.9rem 1rem;border:1px solid var(--line-dk);border-radius:3px; background:var(--charcoal-2);color:var(--bone);font-family:inherit;font-size:.95rem;transition:.25s; } input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brass);background:#2b2f33} textarea{resize:vertical;min-height:120px} .form-note{font-size:.82rem;color:var(--stone)} /* page hero (interior pages) */ .page-hero{ padding:11rem 0 4rem;color:var(--bone);position:relative;overflow:hidden; background:radial-gradient(100% 120% at 85% 0%,rgba(200,145,43,.16),transparent 55%),linear-gradient(180deg,#15171a,#1d2023); } .page-hero::before{content:"";position:absolute;inset:0;opacity:.4;background-image:linear-gradient(var(--line-dk) 1px,transparent 1px),linear-gradient(90deg,var(--line-dk) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(120% 100% at 80% 20%,#000,transparent 72%)} .page-hero .wrap{position:relative;z-index:2} .page-hero h1{margin-top:1rem;max-width:16ch} .crumb{font-size:.8rem;color:var(--stone);letter-spacing:.05em} .crumb a:hover{color:var(--brass-light)} /* about values */ .values{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:1rem} .value{padding:1.8rem;border:1px solid var(--line);border-radius:4px;background:#fff} .value .ic{width:38px;color:var(--brass);margin-bottom:1rem} .value h3{font-size:1.15rem;margin-bottom:.5rem} .value p{font-size:.92rem;color:#4a4d50} /* team */ .team{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem} .member{display:flex;gap:1.4rem;align-items:center;padding:1.6rem;border:1px solid var(--line-dk);border-radius:4px;background:var(--charcoal-2)} .member .av{width:76px;height:76px;border-radius:50%;background:linear-gradient(135deg,var(--brass),#7a5615);display:grid;place-items:center;font-family:var(--serif);font-size:1.6rem;color:#1a1206;flex-shrink:0} .member h3{font-size:1.2rem;color:var(--bone)} .member .role{color:var(--brass-light);font-size:.85rem;font-weight:600} .member p{font-size:.88rem;color:#b7b4ac;margin-top:.3rem} /* service detail rows */ .svc-row{display:grid;grid-template-columns:.5fr 1.5fr;gap:2rem;padding:2.4rem 0;border-top:1px solid var(--line)} .svc-row:last-child{border-bottom:1px solid var(--line)} .svc-row .sn{font-family:var(--serif);font-size:2.2rem;color:var(--brass)} .svc-row h3{margin-bottom:.7rem} .svc-row .chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem} .chip{font-size:.78rem;padding:.35rem .8rem;border:1px solid var(--line);border-radius:100px;color:var(--stone)} /* footer */ .site-foot{background:#131517;color:var(--bone);padding:4.5rem 0 2rem} .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2.4rem;padding-bottom:3rem;border-bottom:1px solid var(--line-dk)} .site-foot .brand img{height:44px;margin-bottom:1.2rem} .site-foot p{font-size:.9rem;color:#a7a49c;max-width:34ch} .foot-col h4{font-family:var(--sans);font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);margin-bottom:1.1rem} .foot-col a{display:block;font-size:.92rem;color:#c7c4bc;padding:.32rem 0;transition:.2s} .foot-col a:hover{color:var(--brass-light)} .foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding-top:1.6rem;font-size:.82rem;color:var(--stone)} /* reveal animation */ .reveal{opacity:0;transform:translateY(24px);transition:.8s var(--ease)} .reveal.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ .reveal{opacity:1!important;transform:none!important;transition:none!important} html{scroll-behavior:auto} *{animation-duration:.001ms!important;transition-duration:.001ms!important} } /* accessibility: skip link + focus */ .skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--brass);color:#1a1206;padding:.8rem 1.2rem;font-weight:600;border-radius:0 0 4px 0} .skip:focus{left:0} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--brass-light);outline-offset:3px} /* floating WhatsApp CTA */ .wa-float{ position:fixed;right:clamp(1rem,3vw,1.6rem);bottom:clamp(1rem,3vw,1.6rem);z-index:90; display:inline-flex;align-items:center;gap:.6rem; background:#25D366;color:#0a2e17;font-weight:700;font-size:.9rem; padding:.85rem 1.2rem;border-radius:100px;box-shadow:0 12px 30px -8px rgba(0,0,0,.45); transition:.3s var(--ease); } .wa-float:hover{transform:translateY(-3px);box-shadow:0 16px 36px -8px rgba(0,0,0,.5)} .wa-float svg{width:22px;height:22px;fill:currentColor} .wa-float .lbl{white-space:nowrap} @media(max-width:560px){.wa-float .lbl{display:none}.wa-float{padding:.9rem}} /* ---------- responsive ---------- */ @media(max-width:900px){ .nav{position:fixed;inset:0 0 0 auto;width:min(78vw,340px);background:var(--charcoal);flex-direction:column;justify-content:center;gap:1.6rem;transform:translateX(100%);transition:.4s var(--ease);border-left:1px solid var(--line-dk)} .nav.open{transform:none} .burger{display:flex;z-index:120} .cols-3,.cols-2,.steps,.values,.team{grid-template-columns:1fr} .split,.contact-grid{grid-template-columns:1fr} .projects-grid{grid-template-columns:1fr} .ptile.big,.ptile.reg,.ptile.half{grid-column:span 1} .f-row{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr 1fr} .svc-row{grid-template-columns:1fr;gap:.6rem} } @media(max-width:560px){ .foot-grid{grid-template-columns:1fr} .hero-strip .wrap{gap:1.4rem 2rem} }