/* ============================================================ FONTS — self-hosted, subset to the characters this page uses. The prototype pulled these from fonts.googleapis.com; they are local now, so there is no third-party request on any visit. Montserrat and Hanken Grotesk are VARIABLE (one file covers every weight the design uses). IBM Plex Mono is static, two weights. Mukta is the Devanagari face and is NEW: none of the three faces above covers Devanagari, so the product cards' Hindi names (दूध, पनीर, देसी घी …) were falling back to whatever the device happened to have. unicode-range confines Mukta to Devanagari, so it can sit first in a stack without touching a Latin glyph. ============================================================ */ @font-face{font-family:"Montserrat";font-style:normal;font-weight:600 900;font-display:swap; src:url(../fonts/montserrat-var-latin.woff2) format("woff2")} @font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400 600;font-display:swap; src:url(../fonts/hankengrotesk-var-latin.woff2) format("woff2")} @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap; src:url(../fonts/ibmplexmono-400-latin.woff2) format("woff2")} @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap; src:url(../fonts/ibmplexmono-500-latin.woff2) format("woff2")} @font-face{font-family:"Mukta";font-style:normal;font-weight:600;font-display:swap; src:url(../fonts/mukta-600-devanagari.woff2) format("woff2"); unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FF} /* ============================================================ INDIFRESH — tokens navy/sky/white are the brand book's own palette (p.8). ghee gold is the one warm counterpoint, used exactly twice. ============================================================ */ :root{ --navy:#154A8B; --navy-deep:#0C3163; --sky:#51C8F1; --sky-soft:#9BE0F8; --milk:#FFFFFF; --ghee:#E8B04B; --ground:#F2F6FB; /* off-white, biased toward the navy */ --surface:#FFFFFF; --ink:#0C2540; /* navy-black, never pure black */ --ink-soft:#4A6683; --line:#DCE6F2; --field:var(--navy); /* the dark full-bleed field */ --field-ink:#FFFFFF; --field-soft:#B9D6F2; --field-line:rgba(255,255,255,.18); --logo-ink:var(--navy); --shadow:0 1px 2px rgba(12,37,64,.05), 0 12px 32px -12px rgba(12,37,64,.18); --sm:url(../img/shuddham-mark.png); --maxw:1160px; --gut:clamp(20px,5vw,56px); --radius:14px; /* LIGHT ONLY. A brand site gets to choose; the prototype could not, because an artifact is rendered in the viewer's theme. color-scheme is what stops a dark-mode browser painting the form controls dark. */ color-scheme:light; } /* --------------------------------------------------------------------- DARK THEME — PRESERVED, NOT DELETED. Ship light only (decided 29 Aug 2026). To bring dark back: delete this comment opener and its closer below, and drop `color-scheme:light` from :root above. Nothing else. --------------------------------------------------------------------- @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --ground:#07172B; --surface:#0E2540; --ink:#E6F0FA; --ink-soft:#93B2D1; --line:#1C3A5C; --field:#061323; --field-ink:#FFFFFF; --field-soft:#9DBFE0; --field-line:rgba(255,255,255,.12); --logo-ink:#FFFFFF; --navy-deep:#061323; --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 40px -16px rgba(0,0,0,.6); } } :root[data-theme="dark"]{ --ground:#07172B; --surface:#0E2540; --ink:#E6F0FA; --ink-soft:#93B2D1; --line:#1C3A5C; --field:#061323; --field-ink:#FFFFFF; --field-soft:#9DBFE0; --field-line:rgba(255,255,255,.12); --logo-ink:#FFFFFF; --navy-deep:#061323; --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 40px -16px rgba(0,0,0,.6); } --------------------------------------------------------------------- */ /* ---------- in-page navigation ---------- scroll-behavior animates the jump when a nav link is clicked. scroll-padding-top is not optional decoration: .nav is position:sticky and 70px tall, so without it the browser scrolls the section's TOP EDGE to y=0 and the nav sits ON TOP of the heading. 86px = the 70px bar + 16px of air. It applies to instant jumps too, so it fixes that independently of the animation. Anyone who has asked their OS not to animate things gets the old instant jump -- smooth scrolling is a common motion-sickness trigger, and the rest of this stylesheet already honours that preference. */ html{scroll-behavior:smooth;scroll-padding-top:86px} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}} *{box-sizing:border-box} /* The four inline logo/badge SVGs share ONE set of glyph definitions, hoisted into this sprite at the top of . Without these rules an with no width/height lays out at its default 300x150 and pushes the whole page down by 150px (measured: the built page sat 155px lower than the prototype). display:none is avoided on purpose -- some browsers stop resolving references into a display:none subtree, and visibility is avoided for the same reason -- it is an INHERITED property. */ .glyph-sprite{position:absolute;width:0;height:0;overflow:hidden} body{ margin:0; background:var(--ground); color:var(--ink); font-family:"Hanken Grotesk","Segoe UI",system-ui,sans-serif; font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased; } h1,h2,h3{font-family:Montserrat,"Segoe UI",system-ui,sans-serif;font-weight:800; letter-spacing:-.022em;line-height:1.06;text-wrap:balance;margin:0} p{margin:0} a{color:inherit} :focus-visible{outline:2.5px solid var(--sky);outline-offset:3px;border-radius:3px} img{max-width:100%} .lab{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px; letter-spacing:.14em;text-transform:uppercase;font-weight:500} .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)} .field{background:var(--field);color:var(--field-ink)} /* ---------- the logo ---------- */ .mark{display:block;height:var(--h,34px);width:auto;color:var(--logo-ink)} .field .mark,.foot .mark,.hero .mark{color:#fff} /* ---------- nav ---------- */ .nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--ground) 88%,transparent); backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .nav-in{display:flex;align-items:center;gap:28px;height:70px} .nav-links{display:none;gap:26px;margin-left:auto;font-size:15px;font-weight:500} .nav-links a{text-decoration:none;color:var(--ink-soft);transition:color .15s} .nav-links a:hover{color:var(--ink)} .nav-call{margin-left:auto;display:inline-flex;align-items:center;gap:8px; font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:500; text-decoration:none;color:var(--ink);border:1.5px solid var(--line); padding:9px 14px;border-radius:999px;white-space:nowrap;transition:.18s} .nav-call:hover{border-color:var(--sky);background:color-mix(in srgb,var(--sky) 12%,transparent)} @media(min-width:900px){.nav-links{display:flex}.nav-call{margin-left:0}} /* ---------- hero ---------- */ .hero{background:var(--field);color:var(--field-ink);position:relative;overflow:hidden} .hero-in{position:relative;z-index:1;padding-block:clamp(56px,10vw,104px) clamp(48px,8vw,88px); display:grid;gap:clamp(34px,5vw,64px);align-items:center} .hero-copy{display:grid;gap:28px;max-width:640px} .hero-badge{display:none} @media(min-width:980px){ .hero-in{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)} .hero-badge{display:block;justify-self:end;width:min(300px,100%);animation:rise .9s cubic-bezier(.2,.7,.3,1) both} } @keyframes rise{from{opacity:0;transform:translateY(14px) rotate(-6deg)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){.hero-badge{animation:none}} .hero .mark{--h:clamp(58px,13vw,104px)} .hero h1{font-size:clamp(30px,5.4vw,52px);font-weight:900;max-width:15ch} .hero h1 em{font-style:normal;color:var(--sky)} .hero-sub{font-size:clamp(16px,2.2vw,19px);color:var(--field-soft);max-width:56ch} .eyebrow{color:var(--sky)} .cta-row{display:flex;flex-wrap:wrap;gap:12px} .btn{display:inline-flex;align-items:center;gap:9px;padding:14px 24px;border-radius:999px; font-weight:600;font-size:15.5px;text-decoration:none;border:1.5px solid transparent;transition:.18s} .btn-a{background:var(--sky);color:#08243F} .btn-a:hover{background:#7BD8F6} .btn-b{border-color:var(--field-line);color:var(--field-ink)} .btn-wa{background:#25D366;color:#06301A} .btn-wa:hover{background:#3ee07d} .btn-b:hover{border-color:var(--sky);color:var(--sky)} .hero-districts{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center; padding-top:8px;border-top:1px solid var(--field-line)} .hero-districts .lab{color:var(--field-soft)} .chip{font-family:"IBM Plex Mono",monospace;font-size:12px;padding:4px 11px;border-radius:999px; border:1px solid var(--field-line);color:var(--field-ink)} /* ---------- promise marquee (from the identity, p.2) ---------- */ .marq{background:var(--navy-deep);color:#fff;overflow:hidden;padding:11px 0; border-top:1px solid var(--field-line)} .marq-track{display:flex;gap:0;width:max-content;animation:slide 42s linear infinite} .marq span{display:inline-flex;align-items:center;gap:22px;padding-right:22px; font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.22em; text-transform:uppercase;white-space:nowrap;color:#CFE6F8} .drop{width:9px;height:12px;flex:0 0 auto;fill:var(--sky)} @keyframes slide{to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){.marq-track{animation:none}} /* ---------- section scaffolding: the stream spine ---------- */ .sec{padding:clamp(56px,9vw,104px) 0} .sec-head{display:grid;gap:14px;max-width:62ch;margin-bottom:clamp(30px,5vw,52px)} .sec-head h2{font-size:clamp(25px,4.2vw,40px)} .sec-head p{color:var(--ink-soft);font-size:clamp(16px,2vw,18.5px)} .field .sec-head p{color:var(--field-soft)} @media(min-width:900px){ .sec-head{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px 52px;max-width:none;align-items:start} .sec-head .rule{grid-column:1/-1} .sec-head p{padding-top:5px} } .rule{display:flex;align-items:center;gap:12px;color:var(--sky)} .rule::after{content:"";height:1px;flex:1;background:currentColor;opacity:.4} /* ---------- products ---------- */ .grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(288px,1fr))} .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:22px;display:grid;gap:7px;align-content:start;transition:.2s;position:relative} .card:hover{border-color:var(--sky);transform:translateY(-2px);box-shadow:var(--shadow)} /* Mukta first: unicode-range means it only ever claims the Devanagari, so "छाछ • लस्सी" gets Mukta for the words and Hanken for the bullet. */ .card .hi{font-family:"Mukta","Hanken Grotesk",sans-serif;font-size:14px;color:var(--sky);font-weight:600} .card h3{font-size:19.5px;font-weight:800;letter-spacing:-.01em} .card p{font-size:14.5px;color:var(--ink-soft);line-height:1.5} .card.is-ghee{border-color:color-mix(in srgb,var(--ghee) 55%,var(--line))} .card.is-ghee .hi{color:var(--ghee)} /* ---------- process: a real sequence, so it is numbered ---------- */ .steps{display:grid;gap:1px;background:var(--line);border:1px solid var(--line); border-radius:var(--radius);overflow:hidden} @media(min-width:820px){.steps{grid-template-columns:repeat(4,1fr)}} .step{background:var(--surface);padding:26px 22px;display:grid;gap:9px;align-content:start} .step .n{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--sky);font-weight:500} .step h3{font-size:17px;font-weight:800} .step p{font-size:14.5px;color:var(--ink-soft);line-height:1.5} /* ---------- shifts ---------- */ .shifts{display:grid;gap:14px} @media(min-width:720px){.shifts{grid-template-columns:1fr 1fr}} .shift{border:1px solid var(--field-line);border-radius:var(--radius);padding:26px; display:grid;gap:8px;align-content:start} .shift .t{font-family:"IBM Plex Mono",monospace;font-size:26px;font-weight:500;color:var(--sky); font-variant-numeric:tabular-nums} .shift h3{font-size:18px;font-weight:800;color:var(--field-ink)} .shift p{font-size:14.5px;color:var(--field-soft);line-height:1.5} /* ---------- business door ---------- */ .biz{display:grid;gap:0;border:1px solid var(--field-line);border-radius:var(--radius);overflow:hidden} @media(min-width:880px){.biz{grid-template-columns:300px 1fr}} .biz-mark{background:var(--sky);min-height:235px;position:relative;overflow:hidden} .biz-mark i{position:absolute;inset:0;display:block;background:#fff; -webkit-mask-image:var(--sm);mask-image:var(--sm); -webkit-mask-size:contain;mask-size:contain; -webkit-mask-position:left top;mask-position:left top; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat} .biz-body{padding:clamp(26px,4vw,40px);display:grid;gap:16px;align-content:center} .biz-body h3{font-size:clamp(21px,3vw,28px)} .biz-body p{color:var(--field-soft)} .biz-list{display:grid;gap:8px;padding:0;margin:0;list-style:none} .biz-list li{display:flex;gap:11px;font-size:15px;color:var(--field-soft)} .biz-list b{color:var(--field-ink);font-weight:600} .tick{flex:0 0 auto;width:16px;height:16px;margin-top:5px;fill:none;stroke:var(--sky);stroke-width:2.4} /* ---------- photo slots ---------- */ .why{display:grid;gap:clamp(28px,4vw,52px);align-items:center} @media(min-width:900px){.why{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}} .why .sec-head{margin-bottom:0;max-width:52ch;grid-template-columns:1fr!important} .screen{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:clamp(24px,3.4vw,32px);display:grid;gap:20px;box-shadow:var(--shadow)} .screen>.lab{color:var(--sky)} .screen dl{display:grid;gap:16px;margin:0} .screen dl>div{display:grid;gap:3px;padding-left:16px;border-left:2px solid var(--sky)} .screen dt{font-family:Montserrat,sans-serif;font-weight:800;font-size:15.5px;letter-spacing:-.01em} .screen dd{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink-soft)} /* ---------- contact ---------- */ .contact{display:grid;gap:14px} @media(min-width:820px){.contact{grid-template-columns:1.1fr .9fr}} .cbox{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:clamp(24px,3.5vw,34px);display:grid;gap:20px;align-content:start} .crow{display:grid;gap:3px} .crow .lab{color:var(--ink-soft)} .crow a,.crow strong{font-size:19px;font-weight:600;text-decoration:none;color:var(--ink)} .crow a:hover{color:var(--sky)} .crow span{color:var(--ink-soft);font-size:15px} .hours{display:flex;justify-content:space-between;gap:16px;padding:9px 0; border-bottom:1px solid var(--line);font-size:15px} .hours:last-child{border-bottom:none} .hours b{font-weight:600} .hours span{color:var(--ink-soft);font-family:"IBM Plex Mono",monospace;font-size:13.5px; font-variant-numeric:tabular-nums} /* ---------- footer ---------- */ .foot{background:var(--field);color:var(--field-soft);padding:52px 0 40px;font-size:14.5px} .foot-top{display:grid;gap:26px;padding-bottom:26px;border-bottom:1px solid var(--field-line)} @media(min-width:820px){.foot-top{grid-template-columns:1.2fr 1fr;align-items:end}} /* was .foot h4 -- retagged h3 for a valid heading outline. h3 now also matches the shared h1,h2,h3 rule, so letter-spacing, line-height and text-wrap are restored here to what the h4 was computing. */ .foot h3{font-family:Montserrat,sans-serif;font-size:16px;font-weight:800;color:var(--field-ink);margin:0 0 6px;letter-spacing:normal;line-height:inherit;text-wrap:wrap} .foot-legal{display:flex;flex-wrap:wrap;gap:8px 26px;padding-top:22px; font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.04em} .seal{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--field-line); border-radius:999px;padding:7px 15px;font-family:"IBM Plex Mono",monospace;font-size:11.5px; letter-spacing:.1em;text-transform:uppercase;color:var(--ghee)} .seal b{width:6px;height:6px;border-radius:50%;background:var(--ghee)} /* ---------- enquiry form ---------- An addition to the approved design, not a change to it: it reuses .cbox, .lab, .crow and .btn, and spans the contact grid rather than becoming a third column. Every control is 44px+ so it is thumb-sized at 390px. */ .enq{grid-column:1/-1} .enq form{display:grid;gap:20px} /* The honeypot must be invisible AND take no space. Clipping the wrapper is not enough: an unconstrained in index.html; the pill then measures 147px instead of 186px). ========================================================================= */ /* ========================================================================= ALSO NOT ENABLED — AWAITING ACHAL'S DECISION (29 Aug 2026). Five links are shorter than the 40px minimum tap height at a 390px viewport. All five come from the approved prototype and measure the same there, to the tenth of a pixel: 19.0px footer 19.0px footer 24.0px header (the logo) 30.8px contact 30.8px contact Every control the rebuild ADDED already passes: text inputs 47px, district chips 42px, submit button 51px, textarea 122px. The fix below enlarges the touch area WITHOUT moving a single pixel — it is an invisible overlay, not padding, so the layout is untouched. It is off because it changes behaviour in the approved design and because the footer's two links sit on one line, where the overlays would meet. .crow a, .foot p a, .nav a[href="#top"]{position:relative} .crow a::after, .foot p a::after, .nav a[href="#top"]::after{ content:"";position:absolute;left:0;right:0;top:50%; transform:translateY(-50%);height:44px} ========================================================================= */