/* ========================================================= nitinsaini.in | Brand System v1.0 "Contour" Fonts: Fraunces (display) + Manrope (text) + IBM Plex Mono (data) Load in : ========================================================= */ /* ---------- 1. TOKENS ---------- */ :root{ /* Colour */ --ns-teal:#0F6B63; /* Contour Teal : primary, links, emphasis */ --ns-teal-deep:#0A4D47; --ns-teal-soft:#E2EFEC; --ns-orange:#D9731F; /* Survey Orange : signature dot, index numbers, rules */ --ns-orange-soft:#FBEBDD; --ns-ink:#14202A; /* Ink : text, dark bands */ --ns-slate:#56636D; /* Slate : secondary text */ --ns-paper:#F5F2EA; /* Paper : page background */ --ns-surface:#FFFFFF; --ns-line:#E0DACD; --ns-contour:#0F6B631F; --ns-on-ink:#F5F2EA; --ns-teal-on-ink:#6CCABE; /* Type families */ --ns-display:"Fraunces",Georgia,"Times New Roman",serif; --ns-text:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif; --ns-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace; /* Type scale : 1.25 (major third), base 17px */ --ns-fs-xs:.8125rem; /* 13 */ --ns-fs-sm:.9375rem; /* 15 */ --ns-fs-base:1.0625rem;/* 17 */ --ns-fs-md:1.3125rem; /* 21 */ --ns-fs-lg:1.625rem; /* 26 */ --ns-fs-xl:2.0625rem; /* 33 */ --ns-fs-2xl:2.5625rem; /* 41 */ --ns-fs-3xl:3.25rem; /* 52 */ --ns-fs-display:clamp(2.5rem,6vw,4.5rem); /* 40 to 72 */ /* Spacing : 8pt grid */ --ns-s1:4px; --ns-s2:8px; --ns-s3:12px; --ns-s4:16px; --ns-s5:24px; --ns-s6:32px; --ns-s7:48px; --ns-s8:64px; --ns-s9:96px; /* Shape */ --ns-r-sm:6px; --ns-r-md:12px; --ns-r-lg:20px; --ns-r-pill:999px; --ns-shadow:0 1px 2px rgba(20,32,42,.05),0 10px 30px rgba(20,32,42,.06); --ns-max:1120px; } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --ns-teal:#4FB8AC; --ns-teal-deep:#7FD0C6; --ns-teal-soft:#143330; --ns-orange:#F0A05A; --ns-orange-soft:#3A2717; --ns-ink:#E9EDEF; --ns-slate:#9AA8B1; --ns-paper:#0E1519; --ns-surface:#152026; --ns-line:#25323A; --ns-contour:#4FB8AC1A; --ns-on-ink:#0E1519; --ns-teal-on-ink:#0F6B63; --ns-shadow:none; } } :root[data-theme="dark"]{ --ns-teal:#4FB8AC; --ns-teal-deep:#7FD0C6; --ns-teal-soft:#143330; --ns-orange:#F0A05A; --ns-orange-soft:#3A2717; --ns-ink:#E9EDEF; --ns-slate:#9AA8B1; --ns-paper:#0E1519; --ns-surface:#152026; --ns-line:#25323A; --ns-contour:#4FB8AC1A; --ns-on-ink:#0E1519; --ns-teal-on-ink:#0F6B63; --ns-shadow:none; } /* ---------- 2. BASE ---------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ background:var(--ns-paper);color:var(--ns-ink); font:400 var(--ns-fs-base)/1.65 var(--ns-text); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } a{color:inherit;text-decoration:none} img,svg{display:block;max-width:100%} ::selection{background:var(--ns-orange);color:#fff} :focus-visible{outline:2px solid var(--ns-orange);outline-offset:3px;border-radius:4px} .ns-wrap{max-width:var(--ns-max);margin:0 auto;padding:0 20px} .ns-section{padding:var(--ns-s9) 0} @media (max-width:700px){.ns-section{padding:var(--ns-s8) 0}} /* ---------- 3. HEADING TREATMENT (signature) ---------- Rule: Fraunces, tight tracking, one word in teal italic (), always ends with the orange Survey Dot (.). */ .ns-h1,.ns-h2,.ns-h3,.ns-display{ font-family:var(--ns-display);font-weight:600;letter-spacing:-.022em; font-variation-settings:"SOFT" 30,"WONK" 0;font-optical-sizing:auto;color:var(--ns-ink); } .ns-display{font-size:var(--ns-fs-display);line-height:1.04;font-weight:650} .ns-h1{font-size:var(--ns-fs-3xl);line-height:1.08} .ns-h2{font-size:clamp(1.75rem,3.6vw,var(--ns-fs-2xl));line-height:1.12} .ns-h3{font-size:var(--ns-fs-md);line-height:1.25;letter-spacing:-.012em} .ns-display em,.ns-h1 em,.ns-h2 em,.ns-h3 em{ font-style:italic;font-weight:500;color:var(--ns-teal); font-variation-settings:"SOFT" 100,"WONK" 1; } .ns-dot{font-style:normal;color:var(--ns-orange)} /* Section label : mono index + orange rule + caps name

01Resources

*/ .ns-label{ display:flex;align-items:center;gap:var(--ns-s3); font:500 var(--ns-fs-xs)/1 var(--ns-mono);letter-spacing:.14em;text-transform:uppercase; color:var(--ns-slate);margin-bottom:var(--ns-s4); } .ns-label span{color:var(--ns-orange);font-weight:600;letter-spacing:.04em} .ns-label span::after{content:"";display:inline-block;width:28px;height:2px;background:var(--ns-orange);vertical-align:middle;margin-left:var(--ns-s3)} .ns-lead{font-size:var(--ns-fs-md);line-height:1.55;color:var(--ns-slate);max-width:36em} .ns-muted{color:var(--ns-slate)} /* ---------- 4. NUMERALS (signature) ---------- Big figures : Fraunces lining + tabular, unit in orange mono. Data/coords : Plex Mono with slashed zero. */ .ns-num{ font-family:var(--ns-display);font-weight:600;font-size:var(--ns-fs-2xl);line-height:1; font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.03em; font-variation-settings:"SOFT" 0; } .ns-num sup,.ns-num small{ font:600 .34em/1 var(--ns-mono);color:var(--ns-orange);letter-spacing:.04em; vertical-align:top;margin-left:.2em;position:relative;top:.35em;text-transform:uppercase; } .ns-data,.ns-mono,code{ font-family:var(--ns-mono);font-feature-settings:"zero" 1,"tnum" 1; } .ns-idx{font:600 var(--ns-fs-xs)/1 var(--ns-mono);color:var(--ns-orange);letter-spacing:.06em;font-feature-settings:"zero" 1} /* ---------- 5. HEADER / NAV ---------- */ .ns-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--ns-paper) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--ns-line)} .ns-nav{display:flex;align-items:center;justify-content:space-between;height:68px;gap:var(--ns-s4)} .ns-logo{display:flex;align-items:center;gap:10px} .ns-logo svg{width:34px;height:34px;flex:none} .ns-wordmark{font:650 1.25rem/1 var(--ns-display);letter-spacing:-.03em;font-variation-settings:"SOFT" 50} .ns-wordmark b{font:600 .72em var(--ns-mono);color:var(--ns-orange);letter-spacing:0;margin-left:1px} .ns-menu{display:flex;gap:2px;align-items:center} .ns-menu a{padding:8px 12px;border-radius:var(--ns-r-sm);font-size:var(--ns-fs-sm);font-weight:500;color:var(--ns-slate)} .ns-menu a:hover,.ns-menu a[aria-current]{color:var(--ns-ink);background:var(--ns-teal-soft)} .ns-icon-btn{background:none;border:1px solid var(--ns-line);color:var(--ns-ink);border-radius:var(--ns-r-sm);width:38px;height:38px;cursor:pointer;display:grid;place-items:center} .ns-burger{display:none} @media (max-width:860px){ .ns-burger{display:grid} .ns-menu{position:absolute;top:68px;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--ns-paper);border-bottom:1px solid var(--ns-line);padding:12px 20px 20px;display:none} .ns-menu.open{display:flex} .ns-menu a{padding:12px} } /* ---------- 6. BUTTONS ---------- */ .ns-btns{display:flex;gap:var(--ns-s3);flex-wrap:wrap} .ns-btn{ display:inline-flex;align-items:center;gap:8px;padding:13px 20px;border-radius:var(--ns-r-sm); font:600 var(--ns-fs-sm)/1.2 var(--ns-text);border:1px solid var(--ns-line);background:var(--ns-surface);color:var(--ns-ink); cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s; } .ns-btn:hover{transform:translateY(-1px);box-shadow:var(--ns-shadow)} .ns-btn--primary{background:var(--ns-ink);color:var(--ns-paper);border-color:var(--ns-ink)} .ns-btn--teal{background:var(--ns-teal);color:#fff;border-color:var(--ns-teal)} .ns-btn .arr{font-family:var(--ns-mono);color:var(--ns-orange)} /* ---------- 7. CHIP / TAG ---------- */ .ns-chip{display:inline-flex;align-items:center;gap:8px;font:600 var(--ns-fs-xs)/1 var(--ns-text);color:var(--ns-teal);background:var(--ns-teal-soft);padding:7px 12px;border-radius:var(--ns-r-pill)} .ns-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ns-orange)} .ns-tag{font:600 11px/1 var(--ns-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ns-slate)} /* ---------- 8. CARDS ---------- */ .ns-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ns-s4)} @media (max-width:900px){.ns-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:600px){.ns-grid{grid-template-columns:1fr}} .ns-card{ position:relative;background:var(--ns-surface);border:1px solid var(--ns-line);border-radius:var(--ns-r-md); padding:var(--ns-s5);display:flex;flex-direction:column;gap:10px;transition:border-color .2s,transform .2s; } /* Benchmark tick : orange corner mark on hover */ .ns-card::before{content:"";position:absolute;top:-1px;left:-1px;width:22px;height:22px;border-top:3px solid var(--ns-orange);border-left:3px solid var(--ns-orange);border-top-left-radius:var(--ns-r-md);opacity:0;transition:opacity .2s} .ns-card:hover{border-color:var(--ns-teal);transform:translateY(-3px)} .ns-card:hover::before{opacity:1} .ns-card .ns-idx{position:absolute;top:var(--ns-s5);right:var(--ns-s5)} .ns-card p{font-size:var(--ns-fs-sm);color:var(--ns-slate);flex:1} .ns-card .go{font-size:var(--ns-fs-sm);font-weight:600;color:var(--ns-teal)} .ns-ico{width:44px;height:44px;border-radius:var(--ns-r-md);background:var(--ns-teal-soft);color:var(--ns-teal);display:grid;place-items:center} .ns-ico svg{width:22px;height:22px} /* ---------- 9. CONTOUR BACKGROUND ---------- */ .ns-contours{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} .ns-contours path{fill:none;stroke:var(--ns-contour);stroke-width:1.5} .ns-contours .pt{fill:var(--ns-orange)} /* ---------- 10. BANDS / PANELS ---------- */ .ns-band{background:var(--ns-ink);color:var(--ns-on-ink);border-radius:var(--ns-r-lg);padding:var(--ns-s7)} .ns-band .ns-h2,.ns-band .ns-h3{color:var(--ns-on-ink)} .ns-band em{color:var(--ns-teal-on-ink)} .ns-band .ns-label{color:color-mix(in srgb,var(--ns-on-ink) 65%,transparent)} .ns-panel{background:var(--ns-surface);border:1px solid var(--ns-line);border-radius:var(--ns-r-lg);padding:var(--ns-s6);box-shadow:var(--ns-shadow)} @media (max-width:700px){.ns-band{padding:var(--ns-s6) var(--ns-s5)}} /* ---------- 11. FORM ---------- */ .ns-input{width:100%;min-width:0;padding:10px 12px;border:1px solid var(--ns-line);border-radius:var(--ns-r-sm);background:var(--ns-paper);color:var(--ns-ink);font:500 var(--ns-fs-sm) var(--ns-mono);font-feature-settings:"zero" 1} .ns-input:focus{border-color:var(--ns-teal);outline:none;box-shadow:0 0 0 3px var(--ns-teal-soft)} .ns-readout{padding:12px 14px;border-radius:var(--ns-r-sm);background:var(--ns-teal-soft);color:var(--ns-teal);font:500 var(--ns-fs-md) var(--ns-mono);font-feature-settings:"zero" 1,"tnum" 1;border-left:3px solid var(--ns-orange)} /* ---------- 12. QUOTE ---------- */ .ns-quote{border-left:3px solid var(--ns-orange);padding:4px 0 4px var(--ns-s5);max-width:780px} .ns-quote p{font:italic 500 clamp(1.4rem,2.8vw,1.9rem)/1.35 var(--ns-display);font-variation-settings:"SOFT" 100,"WONK" 1} /* ---------- 13. FOOTER ---------- */ .ns-footer{border-top:1px solid var(--ns-line);padding:var(--ns-s6) 0;font-size:var(--ns-fs-sm);color:var(--ns-slate)} .ns-footer .row{display:flex;justify-content:space-between;gap:var(--ns-s4);flex-wrap:wrap;align-items:center} .ns-footer nav{display:flex;gap:18px;flex-wrap:wrap} .ns-footer a:hover{color:var(--ns-ink)} /* ---------- 14. INNER PAGES ---------- */ .ns-page-hero{position:relative;overflow:hidden;padding:64px 0 56px;border-bottom:1px solid var(--ns-line)} .ns-page-hero .ns-h1{font-size:clamp(2.25rem,5vw,var(--ns-fs-3xl));margin:6px 0 16px} .ns-crumb{display:flex;flex-wrap:wrap;gap:8px;font:500 12px/1 var(--ns-mono);letter-spacing:.06em;color:var(--ns-slate);margin-bottom:28px} .ns-crumb a{color:var(--ns-teal)} .ns-crumb a:hover{text-decoration:underline} .ns-crumb i{font-style:normal;color:var(--ns-orange)} /* Download row list */ .ns-list{display:grid;gap:10px} .ns-row{ display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center; background:var(--ns-surface);border:1px solid var(--ns-line);border-radius:var(--ns-r-md);padding:16px 20px; transition:border-color .2s,transform .2s; } a.ns-row:hover{border-color:var(--ns-teal);transform:translateX(3px)} .ns-row h3{font:600 var(--ns-fs-base)/1.3 var(--ns-text);color:var(--ns-ink)} .ns-row p{font:500 12px/1.4 var(--ns-mono);color:var(--ns-slate);margin-top:3px;letter-spacing:.03em} .ns-dl{display:inline-flex;align-items:center;gap:6px;font:600 13px/1 var(--ns-mono);letter-spacing:.06em;color:var(--ns-teal);padding:9px 12px;border:1px solid var(--ns-line);border-radius:var(--ns-r-sm);white-space:nowrap} a.ns-row:hover .ns-dl,.ns-dl:hover{background:var(--ns-teal);color:#fff;border-color:var(--ns-teal)} .ns-row.is-off{opacity:.6} .ns-row.is-off .ns-dl{color:var(--ns-slate)} @media (max-width:560px){.ns-row{grid-template-columns:auto 1fr;padding:14px 16px}.ns-row .ns-dl{grid-column:1/-1;justify-content:center}} .ns-band .ns-panel .ns-label{color:var(--ns-slate)} .ns-row > .ns-idx{min-width:24px}