/* ================================================================= SREE VENKATA SAI BUILDERS & DEVELOPERS Design System — "Located Landmarks" Shared stylesheet for every page: index · projects · nikhilam · about · contact Fonts load per-page via Google Fonts in : Fraunces (display · Heritage) · Inter (body) · Space Mono (data) NOTE: projects.html (filter + lightbox) and nikhilam.html (form) will APPEND their page-specific styles to this same file when built. ================================================================= */ /* ----------------------------------------------------------------- 1. DESIGN TOKENS ----------------------------------------------------------------- */ :root{ /* ---- palette ---- */ --limewash:#E9E8E2; /* base background */ --limewash-2:#F1F0EB; /* raised light panels (about section) */ --bitumen:#1E1B17; /* ink / dark sections */ --bitumen-2:#27231D; --concrete:#8C887F; /* muted grey (locked reference value) */ --concrete-line:#CBC9C0; /* hairline dividers */ --brass:#B08A45; /* accent — fine rules + data marks ONLY */ --brass-2:#CBA75E; /* lighter brass, used on dark grounds */ --brass-ink:#8A6A33; /* deep brass — accents on light grounds */ --oxide:#9E5638; /* RESERVED — "Launching"/Nikhilam only */ --ink-soft:#56524A; /* secondary text */ /* ---- type families ---- */ --display:'Fraunces',Georgia,'Times New Roman',serif; /* signage (Heritage) */ --body:'Inter',system-ui,sans-serif; /* reading */ --mono:'Space Mono','SFMono-Regular',monospace; /* data/annotation */ /* ---- spacing ---- */ --pad:clamp(20px,5vw,72px); --max:1280px; } /* ----------------------------------------------------------------- 2. RESET & BASE ----------------------------------------------------------------- */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ background:var(--limewash); color:var(--bitumen); font-family:var(--body); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; } a{color:inherit;text-decoration:none} img{display:block;max-width:100%} /* accessibility — visible keyboard focus (brief requirement) */ :focus-visible{outline:2px solid var(--brass);outline-offset:3px} /* ----------------------------------------------------------------- 3. LAYOUT ----------------------------------------------------------------- */ .wrap{ max-width:var(--max); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); } /* ----------------------------------------------------------------- 4. SHARED TYPE HELPERS ----------------------------------------------------------------- */ .eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-soft); } .display{ font-family:var(--display); font-weight:800; line-height:1.0; letter-spacing:-.008em; } .rule{height:1px;background:var(--brass);border:0;opacity:.85} /* ----------------------------------------------------------------- 5. SURVEY CROP-MARK PHOTO FRAME 14px rounded corners · brass corner ticks · mono placeholder. When a real photo is present, .frame img covers it and the .ph placeholder span is simply omitted from the markup. ----------------------------------------------------------------- */ .frame{ position:relative; background: repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 46px), repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 46px), linear-gradient(145deg,#2b2722 0%,#403a32 48%,#6f6a60 100%); border-radius:14px; overflow:hidden; } .frame.light{ background: repeating-linear-gradient(0deg,rgba(0,0,0,.03) 0 1px,transparent 1px 44px), repeating-linear-gradient(90deg,rgba(0,0,0,.03) 0 1px,transparent 1px 44px), linear-gradient(145deg,#d6d4cc 0%,#c7c4ba 55%,#b6b2a7 100%); } .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .frame .tick{position:absolute;width:16px;height:16px;border:1.5px solid var(--brass);z-index:3} .frame .tl{top:15px;left:15px;border-right:0;border-bottom:0} .frame .tr{top:15px;right:15px;border-left:0;border-bottom:0} .frame .bl{bottom:15px;left:15px;border-right:0;border-top:0} .frame .br{bottom:15px;right:15px;border-left:0;border-top:0} .frame .ph{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase; color:rgba(255,255,255,.5);text-align:center;z-index:2;padding:0 14px; } .frame.light .ph{color:rgba(30,27,23,.42)} /* ----------------------------------------------------------------- 6. HEADER / NAV (shared shell on every page) ----------------------------------------------------------------- */ header{ position:sticky;top:0;z-index:50; background:rgba(233,232,226,.86); backdrop-filter:blur(8px); border-bottom:1px solid var(--concrete-line); } .nav{display:flex;align-items:center;justify-content:space-between;height:68px} .brand{display:flex;align-items:baseline;gap:12px} .brand .mark{font-family:var(--display);font-weight:900;font-size:22px;letter-spacing:.04em} .brand .full{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)} .nav-links{display:flex;align-items:center;gap:30px} .nav-links a{ font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase; color:var(--ink-soft);transition:color .2s; } .nav-links a:hover{color:var(--bitumen)} .nav-links a.active{color:var(--bitumen)} /* current page (multi-page) */ /* ----------------------------------------------------------------- 7. BUTTONS ----------------------------------------------------------------- */ .btn{ font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase; border:1.5px solid var(--bitumen);padding:11px 18px;color:var(--bitumen); transition:background .2s,color .2s;display:inline-block; } .btn:hover{background:var(--bitumen);color:var(--limewash)} .btn.brass{border-color:var(--brass);color:var(--bitumen)} .btn.brass:hover{background:var(--brass);color:var(--bitumen)} .btn.light{border-color:var(--limewash);color:var(--limewash)} .btn.light:hover{background:var(--limewash);color:var(--bitumen)} /* ----------------------------------------------------------------- 8. HERO (homepage — full-bleed; dark blueprint background) ----------------------------------------------------------------- */ .hero{position:relative;height:88vh;min-height:560px;background:var(--bitumen)} .hero .frame{position:absolute;inset:0;border-radius:0;background:var(--bitumen)} .hero .frame img{object-position:55% center} .hero::after{ content:"";position:absolute;inset:0;z-index:4; background: linear-gradient(180deg,rgba(20,18,15,.45) 0%,rgba(20,18,15,.10) 30%,rgba(20,18,15,.48) 66%,rgba(20,18,15,.92) 100%), linear-gradient(90deg,rgba(20,18,15,.82) 0%,rgba(20,18,15,.50) 30%,rgba(20,18,15,.12) 56%,rgba(20,18,15,0) 74%); } .hero-content{ position:relative;z-index:6;height:100%; display:flex;flex-direction:column;justify-content:space-between; color:var(--limewash); padding-top:clamp(18px,3.5vh,48px);padding-bottom:clamp(28px,5vw,56px); } .hero .eyebrow{color:var(--brass-2);font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.9),0 0 6px rgba(0,0,0,.5)} .hero h1{font-size:clamp(38px,8.2vw,104px);margin:14px 0 0;max-width:14ch} .hero h1 .amp{color:var(--brass-2)} .hero-meta{ display:flex;flex-wrap:wrap;gap:28px;align-items:flex-end; margin-top:clamp(22px,3vw,38px); border-top:1px solid rgba(203,167,94,.5);padding-top:18px; } .stat .n{font-family:var(--display);font-weight:800;font-size:clamp(28px,3.4vw,42px);line-height:1} .stat .l{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(233,232,226,.72);margin-top:6px} .hero-cta{margin-left:auto;display:flex;gap:14px;align-items:center} @media (max-width:860px){ .hero .frame img{object-position:58% center} .hero::after{background:linear-gradient(180deg,rgba(20,18,15,.42) 0%,rgba(20,18,15,.12) 16%,rgba(20,18,15,.62) 40%,rgba(20,18,15,.97) 100%)} } /* ----------------------------------------------------------------- 9. INTRO (single statement line) ----------------------------------------------------------------- */ .intro{padding:clamp(56px,8vw,104px) 0} .intro .wrap{display:grid;grid-template-columns:1fr 1.6fr;gap:clamp(28px,5vw,80px);align-items:start} .intro .label{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);padding-top:10px} .intro p{font-family:var(--display);font-weight:600;font-size:clamp(22px,2.8vw,34px);line-height:1.28;letter-spacing:-.01em} .intro p .soft{color:var(--brass)} /* ----------------------------------------------------------------- 10. SECTION HEADING ----------------------------------------------------------------- */ .sec-head{ display:flex;align-items:flex-end;justify-content:space-between;gap:24px; padding-bottom:clamp(26px,4vw,44px);border-bottom:1px solid var(--concrete-line); } .sec-head h2{font-family:var(--display);font-weight:800;font-size:clamp(26px,4vw,52px);letter-spacing:-.02em;line-height:1} .sec-head .idx{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap;padding-bottom:6px} /* ----------------------------------------------------------------- 11. PROJECTS — record rows + the "located plaque" ----------------------------------------------------------------- */ .record{padding:clamp(48px,7vw,96px) 0} .proj{ display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(24px,4vw,56px); align-items:center;padding:clamp(38px,5vw,64px) 0; border-bottom:1px solid var(--concrete-line); } .proj:nth-child(even){grid-template-columns:1fr 1.25fr} .proj:nth-child(even) .proj-media{order:2} .proj-media{position:relative;aspect-ratio:4/3} .proj-media .frame{position:absolute;inset:0} .proj-name{font-family:var(--display);font-weight:800;font-size:clamp(26px,3.4vw,44px);letter-spacing:-.02em;line-height:1.02} .proj-loc{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--oxide);margin-top:10px} /* the located plaque — brass-ruled mono data line */ .plaque{margin-top:24px;border-top:1px solid var(--brass);border-bottom:1px solid var(--brass)} .plaque .row{display:flex;flex-wrap:wrap} .plaque .cell{flex:1 1 0;min-width:96px;padding:14px 16px 14px 0;border-right:1px dotted var(--concrete-line)} .plaque .cell:last-child{border-right:0} .plaque .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)} .plaque .v{font-family:var(--mono);font-weight:700;font-size:15px;color:var(--bitumen);margin-top:5px} .proj-status{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)} .dot{width:7px;height:7px;border-radius:50%;background:var(--concrete)} .dot.done{background:#5f7a4e} /* ----------------------------------------------------------------- 12. FOOTPRINT (dark section — located localities + stats) ----------------------------------------------------------------- */ .foot{background:var(--bitumen);color:var(--limewash);padding:clamp(56px,8vw,108px) 0} .foot .eyebrow{color:var(--brass-2)} .foot h2{font-family:var(--display);font-weight:800;font-size:clamp(28px,4.4vw,58px);letter-spacing:-.02em;line-height:1.02;margin:14px 0 0;max-width:18ch} .loc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin-top:clamp(34px,5vw,56px);border-top:1px solid rgba(203,167,94,.28);border-left:1px solid rgba(203,167,94,.28)} .loc{background:var(--bitumen);padding:22px 20px;display:flex;align-items:baseline;gap:12px;border-right:1px solid rgba(203,167,94,.28);border-bottom:1px solid rgba(203,167,94,.28)} .loc .pin{font-family:var(--mono);font-size:10px;color:var(--brass-2);letter-spacing:.1em} .loc .nm{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.01em} .foot-stats{display:flex;flex-wrap:wrap;gap:clamp(30px,6vw,80px);margin-top:clamp(40px,6vw,72px);border-top:1px solid rgba(203,167,94,.4);padding-top:30px} .foot-stats .n{font-family:var(--display);font-weight:800;font-size:clamp(34px,4.6vw,60px);line-height:1} .foot-stats .l{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(233,232,226,.7);margin-top:8px} /* ----------------------------------------------------------------- 13. NIKHILAM LAUNCH TEASER (oxide-accented — upcoming state) ----------------------------------------------------------------- */ .launch{padding:clamp(48px,7vw,96px) 0} .launch-card{position:relative;display:grid;grid-template-columns:1.1fr 1fr;gap:0;border:1px solid var(--oxide);border-radius:14px;overflow:hidden} .launch-media{position:relative;min-height:380px} .launch-media .frame{position:absolute;inset:0} .launch-body{padding:clamp(28px,4vw,56px);display:flex;flex-direction:column;justify-content:center} .launch-tag{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--oxide);align-self:flex-start} .launch-tag .dot{background:var(--oxide);animation:pulse 2.4s ease-in-out infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}} .launch-body h3{font-family:var(--display);font-weight:800;font-size:clamp(32px,4.6vw,58px);letter-spacing:-.02em;line-height:.98;margin:16px 0 0} .launch-spec{display:flex;flex-wrap:wrap;gap:26px;margin:24px 0 0;border-top:1px solid var(--concrete-line);padding-top:20px} .launch-spec .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)} .launch-spec .v{font-family:var(--mono);font-weight:700;font-size:17px;margin-top:5px} .launch-body .desc{margin:22px 0 28px;color:var(--ink-soft);max-width:42ch} /* ----------------------------------------------------------------- 14. ABOUT / TRUST ----------------------------------------------------------------- */ .about{background:var(--limewash-2);padding:clamp(56px,8vw,104px) 0;border-top:1px solid var(--concrete-line)} .about-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(30px,5vw,72px);align-items:start} .about h2{font-family:var(--display);font-weight:800;font-size:clamp(26px,3.6vw,46px);letter-spacing:-.02em;line-height:1.04} .about .lead{margin-top:22px;font-size:17px;line-height:1.6;color:var(--ink-soft);max-width:52ch} .vals{display:grid;gap:0;border-top:1px solid var(--concrete-line)} .val{padding:18px 0;border-bottom:1px solid var(--concrete-line);display:flex;gap:18px;align-items:baseline} .val .vi{font-family:var(--mono);font-size:11px;color:var(--brass);letter-spacing:.1em;min-width:34px} .val .vt{font-family:var(--display);font-weight:700;font-size:17px} .val .vd{font-size:14px;color:var(--ink-soft);margin-top:3px} /* ----------------------------------------------------------------- 15. FOOTER ----------------------------------------------------------------- */ footer{background:var(--bitumen);color:var(--limewash);padding:clamp(56px,7vw,96px) 0 40px} .foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(28px,4vw,56px)} footer .lock .mark{font-family:var(--display);font-weight:900;font-size:42px;letter-spacing:.03em} footer .lock .full{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-2);margin-top:10px} footer .lock .tag{font-family:var(--display);font-weight:600;font-size:18px;margin-top:18px;color:rgba(233,232,226,.82)} .fcol h4{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-2);margin-bottom:16px} .fcol a,.fcol p{display:block;font-size:15px;color:rgba(233,232,226,.85);margin-bottom:10px} .fcol a:hover{color:var(--brass-2)} .legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-top:clamp(40px,6vw,72px);border-top:1px solid rgba(203,167,94,.32);padding-top:24px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(233,232,226,.5)} /* ----------------------------------------------------------------- 16. SCROLL REVEAL (subtle fade-up — restrained motion only) ----------------------------------------------------------------- */ .rev{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease} .rev.in{opacity:1;transform:none} /* ----------------------------------------------------------------- 17. RESPONSIVE NOTE: mobile collapses .nav-links here. A proper mobile menu (hamburger toggle) is wired at the script.js step — it needs JS, so it lands with the rest of the interaction layer (step 2). ----------------------------------------------------------------- */ @media (max-width:860px){ .intro .wrap, .proj, .proj:nth-child(even), .launch-card, .about-grid, .foot-top{grid-template-columns:1fr} .proj:nth-child(even) .proj-media{order:0} .hero-cta{margin-left:0;width:100%} .hero-meta{gap:20px} .launch-media{min-height:260px} } @media (prefers-reduced-motion:reduce){ .rev{opacity:1;transform:none;transition:none} .launch-tag .dot{animation:none} html{scroll-behavior:auto} } /* ================================================================= 18. PAGE-SPECIFIC STYLES Added for the multi-page build: mobile nav, projects (filter + cards + lightbox), nikhilam (specs + form), contact (channels + map), shared WhatsApp button + form fields. ================================================================= */ /* ---- header actions + mobile hamburger menu ---- */ .brand{cursor:pointer} .nav-actions{display:flex;align-items:center;gap:14px} .nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:6px;color:var(--bitumen);line-height:0} @media (max-width:860px){ .nav-toggle{display:inline-flex} .nav-links{ position:absolute;top:68px;left:0;right:0; display:flex;flex-direction:column;align-items:stretch;gap:0; background:rgba(241,240,235,.7); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); border-bottom:1px solid var(--concrete-line); padding:6px var(--pad) 14px; transform:translateY(-12px);opacity:0;pointer-events:none; transition:opacity .2s ease,transform .2s ease; box-shadow:0 18px 30px -22px rgba(30,27,23,.5); } .nav-links.open{opacity:1;transform:none;pointer-events:auto} .nav-links a{padding:15px 2px;font-size:13px;border-bottom:1px solid var(--concrete-line)} .nav-links a:last-child{border-bottom:0} } /* ---- interior page header band ---- */ .page-head{padding:clamp(48px,7vw,88px) 0 clamp(28px,4vw,40px)} .page-head .eyebrow{color:var(--brass)} .page-head h1{font-family:var(--display);font-weight:800;font-size:clamp(34px,6vw,72px);letter-spacing:-.02em;line-height:1;margin:14px 0 0} .page-head .sub{margin-top:18px;font-size:17px;line-height:1.6;color:var(--ink-soft);max-width:56ch} /* ---- projects: locality filter ---- */ .filter{display:flex;flex-wrap:wrap;gap:10px;padding:clamp(18px,3vw,26px) 0 clamp(26px,4vw,36px);border-top:1px solid var(--concrete-line);border-bottom:1px solid var(--concrete-line)} .fbtn{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:9px 15px;border:1px solid var(--concrete-line);background:transparent;color:var(--ink-soft);cursor:pointer;transition:all .18s} .fbtn:hover{border-color:var(--bitumen);color:var(--bitumen)} .fbtn.active{background:var(--bitumen);border-color:var(--bitumen);color:var(--limewash)} /* ---- projects: card grid ---- */ .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:clamp(22px,3vw,34px);padding:clamp(34px,5vw,56px) 0} .card{display:flex;flex-direction:column;border:1px solid var(--concrete-line);border-radius:14px;overflow:hidden;background:var(--limewash-2);transition:transform .2s ease,box-shadow .2s ease} .card.has-photo{cursor:pointer} .card.has-photo:hover{transform:translateY(-4px);box-shadow:0 24px 40px -28px rgba(30,27,23,.5)} .card-media{position:relative;aspect-ratio:4/3} .card-media .frame{position:absolute;inset:0;border-radius:0} .card-count{position:absolute;right:12px;bottom:12px;z-index:4;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;background:rgba(30,27,23,.78);color:var(--limewash);padding:5px 9px;border-radius:6px} .card-body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1} .card-name{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.01em;line-height:1.08} .card-name.tbd{color:var(--ink-soft)} .card-loc{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--oxide);margin-top:8px} .card-plaque{margin-top:16px;border-top:1px solid var(--brass);border-bottom:1px solid var(--brass);display:flex;flex-wrap:wrap} .card-plaque .cell{flex:1 1 50%;padding:10px 10px 10px 0} .card-plaque .k{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)} .card-plaque .v{font-family:var(--mono);font-weight:700;font-size:13px;margin-top:3px} .card-status{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:16px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)} /* ---- lightbox ---- */ .lightbox{position:fixed;inset:0;z-index:200;background:rgba(15,13,11,.93);display:none;align-items:center;justify-content:center;padding:24px} .lightbox.open{display:flex} .lightbox img{max-width:92vw;max-height:82vh;border-radius:8px;box-shadow:0 30px 80px -20px rgba(0,0,0,.7)} .lb-close{position:absolute;top:18px;right:22px;background:none;border:0;color:var(--limewash);cursor:pointer;padding:8px;line-height:0} .lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(233,232,226,.12);border:1px solid rgba(233,232,226,.3);color:var(--limewash);cursor:pointer;width:50px;height:50px;font-family:var(--mono);font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center} .lb-nav:hover{background:rgba(233,232,226,.22)} .lb-prev{left:20px} .lb-next{right:20px} .lb-caption{position:absolute;bottom:20px;left:0;right:0;text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(233,232,226,.8)} /* ---- shared WhatsApp button ---- */ .btn-wa{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;background:#1f7a4d;color:#fff;border:1.5px solid #1f7a4d;padding:13px 20px;transition:background .2s,border-color .2s} .btn-wa:hover{background:#176039;border-color:#176039} .btn-wa svg{flex:none} /* ---- nikhilam page ---- */ .nk-hero{position:relative;min-height:460px;background:var(--bitumen);display:flex;align-items:flex-end} .nk-hero .frame{position:absolute;inset:0;border-radius:0} .nk-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,15,.4),rgba(20,18,15,.82));z-index:4} .nk-hero-in{position:relative;z-index:6;color:var(--limewash);padding:clamp(34px,6vw,64px) 0;width:100%} .nk-tag{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-2)} .nk-tag .dot{width:7px;height:7px;border-radius:50%;background:var(--oxide);animation:pulse 2.4s ease-in-out infinite} .nk-hero-in h1{font-family:var(--display);font-weight:800;font-size:clamp(40px,8vw,96px);letter-spacing:-.02em;line-height:.96;margin:14px 0 0} .nk-hero-in .tagline{margin-top:14px;font-family:var(--display);font-weight:600;font-size:clamp(17px,2.2vw,22px);color:rgba(233,232,226,.85);max-width:30ch} .nk-specband{display:flex;flex-wrap:wrap;border:1px solid var(--concrete-line);border-radius:14px;overflow:hidden;margin:clamp(34px,5vw,52px) 0} .nk-specband .cell{flex:1 1 0;min-width:140px;padding:24px 22px;border-right:1px solid var(--concrete-line)} .nk-specband .cell:last-child{border-right:0} .nk-specband .k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)} .nk-specband .v{font-family:var(--display);font-weight:800;font-size:clamp(26px,3vw,38px);margin-top:8px;letter-spacing:-.01em} .nk-form-wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:start;padding:clamp(18px,3vw,30px) 0 clamp(50px,7vw,90px)} .nk-form-wrap h2{font-family:var(--display);font-weight:800;font-size:clamp(24px,3.4vw,40px);letter-spacing:-.02em;line-height:1.05} .nk-form-wrap .lead{margin-top:16px;color:var(--ink-soft);font-size:16px;line-height:1.6;max-width:44ch} /* ---- forms ---- */ .field{margin-bottom:16px} .field label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:7px} .field input,.field textarea{width:100%;font-family:var(--body);font-size:15px;color:var(--bitumen);background:var(--limewash-2);border:1px solid var(--concrete-line);border-radius:8px;padding:13px 14px;transition:border-color .18s} .field input:focus,.field textarea:focus{outline:none;border-color:var(--brass)} .field textarea{min-height:104px;resize:vertical} .form-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:8px} .form-note{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--ink-soft);margin-top:14px;line-height:1.5} /* ---- contact page ---- */ .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px);align-items:start;padding:clamp(18px,3vw,30px) 0 clamp(40px,5vw,64px)} .ch{padding:22px 0;border-bottom:1px solid var(--concrete-line)} .ch.top{border-top:1px solid var(--concrete-line)} .ch .k{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass)} .ch .v{font-family:var(--display);font-weight:700;font-size:clamp(18px,2.2vw,24px);margin-top:8px;letter-spacing:-.01em} .ch .v a{transition:color .18s} .ch .v a:hover{color:var(--oxide)} .ch .meta{font-size:14px;color:var(--ink-soft);margin-top:6px;line-height:1.5} .map-embed{border:1px solid var(--concrete-line);border-radius:14px;overflow:hidden;aspect-ratio:4/3;min-height:320px} .map-embed iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.25) contrast(1.02)} /* ---- responsive page bits ---- */ @media (max-width:860px){ .nk-form-wrap,.contact-grid{grid-template-columns:1fr} .nk-hero{min-height:340px} /* aspect-ratio + min-height:320 was forcing a 427px min-width → sideways scroll on phones */ .map-embed{min-height:0;aspect-ratio:16/10} } /* ---- hero logo (gold mark sits directly on the dark hero) ---- */ .hero-logo{ align-self:flex-start;width:clamp(62px,7vw,90px);height:auto;display:block; filter:drop-shadow(0 8px 22px rgba(0,0,0,.55)); } @media (max-width:860px){ .hero-logo{width:clamp(58px,15vw,78px)} } /* keep the Nikhilam hero placeholder caption out of the headline (same overlap pattern) */ .nk-hero .ph{top:30%} /* ================================================================= 19. HEADER LOGO + TRANSPARENT-HERO HEADER (Jun 2026) Wordmark text replaced by the gold SVS mark in the header. Homepage: header is transparent over the dark hero and the big gold hero logo rises to the top; on scroll it solidifies to the cream bar with a small gold mark on the left. Interior pages keep the solid cream header with the small gold mark on the left. ================================================================= */ .brand{align-items:center;gap:0} .brand-logo{height:40px;width:auto;display:block;transition:opacity .3s ease} header{transition:background .3s ease,border-color .3s ease,backdrop-filter .3s ease} /* homepage only: transparent header floating over the hero */ body.home header{ position:fixed;left:0;right:0;top:0; background:transparent;backdrop-filter:none;border-bottom-color:transparent; } /* at the very top over the dark hero: nav + button LIGHT so they read on dark */ body.home header:not(.scrolled) .brand-logo{opacity:0;pointer-events:none} body.home header:not(.scrolled) .nav-links a{color:rgba(233,232,226,.86)} body.home header:not(.scrolled) .nav-links a:hover{color:#fff} body.home header:not(.scrolled) .nav-links a.active{color:#fff} body.home header:not(.scrolled) .btn{border-color:rgba(233,232,226,.55);color:var(--limewash)} body.home header:not(.scrolled) .btn:hover{background:var(--limewash);color:var(--bitumen)} body.home header:not(.scrolled) .nav-toggle{color:var(--limewash)} /* once scrolled, solidify to the cream bar */ body.home header.scrolled{ background:rgba(233,232,226,.92); backdrop-filter:blur(8px); border-bottom-color:var(--concrete-line); } @media (max-width:860px){ /* mobile menu panel is cream even over the hero -> keep links dark */ body.home header:not(.scrolled) .nav-links.open a{color:var(--ink-soft)} } /* ================================================================= 20. CONTACT — GET DIRECTIONS CARD (replaces the old map embed) ================================================================= */ .map-card{ border:1px solid var(--concrete-line);border-radius:14px; background:var(--limewash-2); min-height:320px;padding:clamp(28px,5vw,44px) 24px; display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;gap:6px; } .map-card .map-pin{color:var(--brass);margin-bottom:8px} .map-card-name{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.01em} .map-card-sub{font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:var(--ink-soft);max-width:34ch;line-height:1.5} .map-card .btn{margin-top:20px} @media (max-width:860px){ .map-card{min-height:0;padding:32px 20px} } /* ================================================================= 21. THANK-YOU PAGE (form success landing) ================================================================= */ .thanks{min-height:60vh;display:flex;align-items:center;padding:clamp(56px,11vh,130px) 0} .thanks .wrap{display:flex;flex-direction:column;align-items:flex-start} .thanks-tick{color:var(--brass);margin-bottom:18px} .thanks .eyebrow{color:var(--brass)} .thanks h1{font-family:var(--display);font-weight:800;font-size:clamp(34px,6vw,68px);letter-spacing:-.02em;line-height:1.02;margin:12px 0 0} .thanks p{font-size:17px;line-height:1.6;color:var(--ink-soft);max-width:46ch;margin:18px 0 30px}