From 3065a0adcef486636c757814177308c17b08458a Mon Sep 17 00:00:00 2001 From: Kshitij <160704796+kshitij-ka@users.noreply.github.com> Date: Tue, 28 Apr 2026 23:55:22 +0530 Subject: [PATCH] chore: add legacy UI templates. --- ui/index.html | 232 +++++++++++++ ui/style.css | 889 ++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 1121 insertions(+) create mode 100644 ui/index.html create mode 100644 ui/style.css diff --git a/ui/index.html b/ui/index.html new file mode 100644 index 0000000..b97b98c --- /dev/null +++ b/ui/index.html @@ -0,0 +1,232 @@ + + + + + + BIS SP-21 — Bureau of Indian Standards + + + + + + + + + + + +
+
+

Special Publication 21 · 2005

+

+ Handbook of
Building Materials +

+

+ 573 Indian Standards across 25 material categories —
+ searchable, categorised, and ready to reference. +

+
+ Search Standards + Browse Categories +
+
+
+ 573 + IS Standards +
+ +
+ 25 + Material Categories +
+ +
+ 929 + Pages Indexed +
+
+
+
+ + +
+
+

Find an IS Standard

+

Search by standard number, title, material, or keyword.

+ + + +
+ +
+ +
+

Start typing to search, or browse by category.

+
+
+
+
+ + +
+
+
+

25 Material Categories

+

Every building material section from SP‑21, indexed and searchable.

+
+
+
+
+ + +
+
+
+
+

About SP‑21

+

India's Reference for Building Material Standards

+

+ BIS Special Publication 21 consolidates all Indian Standards relevant to building and construction + materials — from Portland cement to wire ropes, sanitary fittings to structural steels. Published + by the Bureau of Indian Standards, it is the authoritative handbook used by architects, structural + engineers, contractors, and quality inspectors across the country. +

+

+ This portal indexes the 2005 edition (929 pages) into 573 discrete IS standards with full-text + search, keyword extraction, and section-level retrieval — making the handbook accessible without + manual page-turning. +

+ + Visit BIS Portal ↗ + +
+
+
+ +

Instant Retrieval

+

Full-text search across all 573 standards with ranked results.

+
+
+ +

Section-Level Detail

+

Scope, requirements, delivery conditions — all structured fields.

+
+
+ +

25 Categories

+

Organised by BIS material sections, mirroring SP‑21's own structure.

+
+
+ +

Official Source

+

Parsed directly from the BIS SP‑21 : 2005 authoritative edition.

+
+
+
+
+
+ + + + + + + + + + diff --git a/ui/style.css b/ui/style.css new file mode 100644 index 0000000..4115247 --- /dev/null +++ b/ui/style.css @@ -0,0 +1,889 @@ +/* ───────────────────────────────────────────── + BIS SP-21 Design System + Government adaptation of Apple tile system + ───────────────────────────────────────────── */ + +/* ── Reset & Base ── */ +*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } + +:root { + /* Brand accent — saffron instead of Action Blue */ + --accent: #d4530a; + --accent-hover: #b8460a; + --accent-dark: #ff8c3a; /* brighter on dark tiles */ + --accent-focus: #e05a0f; + + /* Government navy for secondary emphasis */ + --navy: #003380; + --navy-light: #0052cc; + + /* Surfaces */ + --canvas: #ffffff; + --parchment: #f4f4f2; /* gov off-white — slightly warmer than Apple */ + --pearl: #fafaf8; + --tile-dark-1: #1a2230; /* deep navy-charcoal */ + --tile-dark-2: #1e2838; + --tile-dark-3: #161d28; + --surface-black: #0d1117; + + /* Text */ + --ink: #1c1c1e; + --ink-80: #2d2d30; + --ink-48: #6e6e73; + --on-dark: #ffffff; + --on-dark-muted: #b8c0cc; + --body-muted: #8a8a8f; + + /* Borders */ + --hairline: #d8d8dc; + --divider: #ebebed; + + /* Category pill bg on card */ + --chip-bg: rgba(212, 83, 10, 0.08); + --chip-text: #b8460a; + + /* Typography — system-ui resolves to SF Pro on Apple, Segoe on Windows */ + --font-display: "SF Pro Display", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; + --font-text: "SF Pro Text", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; + + /* Radius */ + --r-xs: 4px; + --r-sm: 8px; + --r-md: 12px; + --r-lg: 18px; + --r-pill: 9999px; + + /* Spacing */ + --sp-xxs: 4px; + --sp-xs: 8px; + --sp-sm: 12px; + --sp-md: 18px; + --sp-lg: 24px; + --sp-xl: 32px; + --sp-xxl: 48px; + --sp-sec: 80px; + + /* Nav */ + --nav-h: 48px; + + /* Transitions */ + --ease: cubic-bezier(.4,0,.2,1); +} + +html { scroll-behavior: smooth; } + +body { + font-family: var(--font-text); + font-size: 17px; + font-weight: 400; + line-height: 1.47; + letter-spacing: -0.374px; + color: var(--ink); + background: var(--canvas); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* ─── Tiles ─────────────────────────────── */ +.tile { + width: 100%; + padding: var(--sp-sec) 0; +} +.tile-light { background: var(--canvas); } +.tile-parchment{ background: var(--parchment); } +.tile-dark { background: var(--tile-dark-1); } +.tile-dark-2 { background: var(--tile-dark-2); } +.hero-tile { padding: 96px 0 80px; } + +.tile-inner { + max-width: 1100px; + margin: 0 auto; + padding: 0 40px; +} +.tile-center { text-align: center; } + +/* ─── Global Nav ─────────────────────────── */ +.global-nav { + position: sticky; + top: 0; + z-index: 200; + background: var(--surface-black); + height: var(--nav-h); + display: flex; + align-items: center; + border-bottom: 1px solid rgba(255,255,255,0.07); +} +.nav-inner { + width: 100%; + max-width: 1200px; + margin: 0 auto; + padding: 0 32px; + display: flex; + align-items: center; + gap: var(--sp-lg); +} +.nav-emblem { + display: flex; + align-items: center; + gap: 10px; + text-decoration: none; + flex-shrink: 0; +} +.emblem-icon { width: 28px; height: 28px; } +.nav-brand { + font-family: var(--font-display); + font-size: 15px; + font-weight: 600; + letter-spacing: 0.2px; + color: var(--on-dark); + white-space: nowrap; +} +.nav-links { + display: flex; + align-items: center; + gap: 4px; + margin-left: auto; +} +.nav-link { + font-family: var(--font-text); + font-size: 12px; + font-weight: 400; + letter-spacing: -0.12px; + color: rgba(255,255,255,0.85); + text-decoration: none; + padding: 6px 10px; + border-radius: var(--r-pill); + transition: color .15s var(--ease), background .15s var(--ease); +} +.nav-link:hover { color: #fff; background: rgba(255,255,255,0.08); } +.nav-hamburger { + display: none; + flex-direction: column; + gap: 5px; + background: none; + border: none; + cursor: pointer; + padding: 6px; + margin-left: auto; +} +.nav-hamburger span { + display: block; + width: 22px; + height: 2px; + background: var(--on-dark); + border-radius: 2px; + transition: transform .2s var(--ease), opacity .2s var(--ease); +} +.nav-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } +.nav-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } +.nav-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } + +/* Mobile menu */ +.mobile-menu { + position: sticky; + top: var(--nav-h); + z-index: 190; + background: var(--tile-dark-3); + display: none; + flex-direction: column; + border-bottom: 1px solid rgba(255,255,255,0.08); +} +.mobile-menu.open { display: flex; } +.mobile-link { + display: block; + padding: 14px 32px; + color: rgba(255,255,255,0.87); + text-decoration: none; + font-size: 15px; + border-bottom: 1px solid rgba(255,255,255,0.06); + transition: background .15s; +} +.mobile-link:hover { background: rgba(255,255,255,0.05); } + +/* ─── Typography ─────────────────────────── */ +.hero-display { + font-family: var(--font-display); + font-size: clamp(36px, 6vw, 56px); + font-weight: 600; + line-height: 1.07; + letter-spacing: -0.5px; + color: var(--on-dark); + margin: 12px 0 20px; +} +.tile-eyebrow { + font-family: var(--font-text); + font-size: 12px; + font-weight: 600; + letter-spacing: 0.8px; + text-transform: uppercase; + color: var(--accent-dark); + margin-bottom: 8px; +} +.display-lg { + font-family: var(--font-display); + font-size: clamp(28px, 4vw, 40px); + font-weight: 600; + line-height: 1.1; + letter-spacing: -0.3px; + color: var(--ink); +} +.tile-dark .display-lg, +.tile-dark-2 .display-lg { color: var(--on-dark); } + +.display-md { + font-family: var(--font-text); + font-size: clamp(24px, 3vw, 34px); + font-weight: 600; + line-height: 1.18; + letter-spacing: -0.374px; + color: var(--on-dark); + margin-bottom: 20px; +} +.lead { + font-family: var(--font-display); + font-size: clamp(18px, 2.5vw, 24px); + font-weight: 400; + line-height: 1.4; + letter-spacing: 0; + color: var(--on-dark-muted); + margin-bottom: 32px; +} +.lead-sub { + font-family: var(--font-text); + font-size: 17px; + font-weight: 400; + line-height: 1.47; + letter-spacing: -0.374px; + color: var(--ink-48); + margin: 8px 0 28px; +} +.body-copy { + font-size: 17px; + line-height: 1.6; + letter-spacing: -0.374px; + color: var(--on-dark-muted); + margin-bottom: 16px; +} +.desktop-only { display: inline; } + +/* ─── Buttons ────────────────────────────── */ +.btn-primary { + display: inline-flex; + align-items: center; + gap: 6px; + background: var(--accent); + color: #fff; + font-family: var(--font-text); + font-size: 17px; + font-weight: 400; + line-height: 1; + letter-spacing: -0.374px; + text-decoration: none; + padding: 11px 24px; + border-radius: var(--r-pill); + border: none; + cursor: pointer; + transition: background .15s var(--ease), transform .1s var(--ease), box-shadow .15s var(--ease); + white-space: nowrap; +} +.btn-primary:hover { background: var(--accent-hover); } +.btn-primary:active { transform: scale(.96); } +.btn-primary:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: 2px; } + +.btn-ghost-dark { + display: inline-flex; + align-items: center; + background: transparent; + color: var(--accent-dark); + font-family: var(--font-text); + font-size: 17px; + font-weight: 400; + line-height: 1; + letter-spacing: -0.374px; + text-decoration: none; + padding: 10px 24px; + border-radius: var(--r-pill); + border: 1.5px solid var(--accent-dark); + cursor: pointer; + transition: background .15s var(--ease), transform .1s var(--ease); +} +.btn-ghost-dark:hover { background: rgba(255,140,58,0.1); } +.btn-ghost-dark:active { transform: scale(.96); } + +.btn-primary-on-dark { + display: inline-flex; + align-items: center; + background: var(--accent-dark); + color: var(--surface-black); + font-family: var(--font-text); + font-size: 15px; + font-weight: 600; + text-decoration: none; + padding: 11px 24px; + border-radius: var(--r-pill); + border: none; + cursor: pointer; + transition: background .15s var(--ease), transform .1s var(--ease); + margin-top: 8px; +} +.btn-primary-on-dark:hover { background: #ffaa5c; } +.btn-primary-on-dark:active { transform: scale(.96); } + +.cta-row { + display: flex; + align-items: center; + gap: 12px; + justify-content: center; + flex-wrap: wrap; + margin-bottom: 48px; +} + +/* ─── Hero Stats ─────────────────────────── */ +.hero-stats { + display: inline-flex; + align-items: center; + gap: 32px; + background: rgba(255,255,255,0.05); + border: 1px solid rgba(255,255,255,0.1); + border-radius: var(--r-lg); + padding: 20px 36px; +} +.stat { text-align: center; } +.stat-num { + display: block; + font-family: var(--font-display); + font-size: 28px; + font-weight: 600; + color: var(--accent-dark); + line-height: 1; +} +.stat-label { + display: block; + font-size: 12px; + font-weight: 400; + color: var(--on-dark-muted); + margin-top: 4px; + letter-spacing: 0; +} +.stat-divider { + width: 1px; + height: 36px; + background: rgba(255,255,255,0.12); +} + +/* ─── Search ─────────────────────────────── */ +.search-form { width: 100%; max-width: 700px; margin: 0 auto; } +.search-wrap { + position: relative; + display: flex; + align-items: center; +} +.search-icon { + position: absolute; + left: 16px; + width: 18px; + height: 18px; + color: var(--ink-48); + pointer-events: none; + flex-shrink: 0; +} +.search-input { + width: 100%; + font-family: var(--font-text); + font-size: 17px; + font-weight: 400; + line-height: 1; + letter-spacing: -0.374px; + color: var(--ink); + background: var(--canvas); + border: 1.5px solid var(--hairline); + border-radius: var(--r-pill); + padding: 13px 48px 13px 44px; + outline: none; + transition: border-color .15s var(--ease), box-shadow .15s var(--ease); + -webkit-appearance: none; +} +.search-input:focus { + border-color: var(--accent); + box-shadow: 0 0 0 3px rgba(212,83,10,0.12); +} +.search-input::placeholder { color: var(--body-muted); } +/* hide native clear button */ +.search-input::-webkit-search-cancel-button { -webkit-appearance: none; } + +.search-clear { + position: absolute; + right: 14px; + background: none; + border: none; + cursor: pointer; + color: var(--ink-48); + font-size: 14px; + padding: 4px; + line-height: 1; + border-radius: 50%; + transition: background .15s, color .15s; +} +.search-clear:hover { background: var(--divider); color: var(--ink); } + +.filter-row { + display: flex; + align-items: center; + gap: 12px; + margin-top: 12px; +} +.category-filter { + flex: 1; + font-family: var(--font-text); + font-size: 14px; + font-weight: 400; + color: var(--ink); + background: var(--canvas); + border: 1.5px solid var(--hairline); + border-radius: var(--r-sm); + padding: 10px 14px; + outline: none; + cursor: pointer; + transition: border-color .15s var(--ease); +} +.category-filter:focus { border-color: var(--accent); } +.search-btn { padding: 10px 24px; font-size: 15px; } + +/* ─── Results ────────────────────────────── */ +.results-shell { + margin-top: 40px; + text-align: left; +} +.results-meta { + font-size: 13px; + color: var(--ink-48); + margin-bottom: 16px; + letter-spacing: 0; +} +.results-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 16px; +} +.results-empty, .results-initial { + text-align: center; + padding: 48px 0; + color: var(--ink-48); +} +.empty-title { + font-size: 17px; + font-weight: 600; + color: var(--ink-80); + margin-bottom: 6px; +} +.empty-sub { font-size: 14px; } + +/* Result Card */ +.result-card { + background: var(--canvas); + border: 1px solid var(--hairline); + border-radius: var(--r-lg); + padding: var(--sp-lg); + cursor: pointer; + transition: border-color .15s var(--ease), box-shadow .15s var(--ease), transform .1s var(--ease); + text-align: left; +} +.result-card:hover { + border-color: var(--accent); + box-shadow: 0 4px 24px rgba(212,83,10,0.08); + transform: translateY(-1px); +} +.result-card:active { transform: scale(.98); } +.result-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } +.card-cat { + display: inline-block; + font-size: 11px; + font-weight: 600; + letter-spacing: 0.5px; + text-transform: uppercase; + color: var(--chip-text); + background: var(--chip-bg); + border-radius: var(--r-pill); + padding: 3px 10px; + margin-bottom: 8px; +} +.card-id { + font-family: var(--font-text); + font-size: 12px; + font-weight: 600; + color: var(--ink-48); + margin-bottom: 4px; + letter-spacing: 0; +} +.card-title { + font-family: var(--font-display); + font-size: 16px; + font-weight: 600; + line-height: 1.25; + letter-spacing: -0.2px; + color: var(--ink); + margin-bottom: 8px; +} +.card-summary { + font-size: 13px; + line-height: 1.5; + color: var(--ink-48); + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; +} +.card-keywords { + display: flex; + flex-wrap: wrap; + gap: 4px; + margin-top: 10px; +} +.keyword-chip { + font-size: 11px; + color: var(--ink-80); + background: var(--parchment); + border: 1px solid var(--divider); + border-radius: var(--r-pill); + padding: 2px 8px; +} +.card-footer { + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 14px; + padding-top: 12px; + border-top: 1px solid var(--divider); +} +.card-sections-count { + font-size: 12px; + color: var(--ink-48); +} +.card-arrow { + color: var(--accent); + font-size: 14px; + font-weight: 600; +} + +/* ─── Category Grid ──────────────────────── */ +.section-header { text-align: center; margin-bottom: 48px; } +.section-header .lead-sub { max-width: 540px; margin: 8px auto 0; } + +.category-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); + gap: 12px; +} +.cat-card { + background: var(--parchment); + border: 1px solid var(--divider); + border-radius: var(--r-lg); + padding: 20px var(--sp-lg); + cursor: pointer; + text-decoration: none; + display: flex; + flex-direction: column; + gap: 4px; + transition: border-color .15s var(--ease), box-shadow .15s var(--ease), transform .1s var(--ease); +} +.cat-card:hover { + border-color: var(--accent); + box-shadow: 0 4px 20px rgba(212,83,10,0.06); + transform: translateY(-1px); +} +.cat-card:active { transform: scale(.98); } +.cat-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } +.cat-name { + font-family: var(--font-text); + font-size: 14px; + font-weight: 600; + line-height: 1.3; + letter-spacing: -0.2px; + color: var(--ink); +} +.cat-count { + font-size: 12px; + color: var(--accent); + font-weight: 500; +} + +/* ─── Feature / About ────────────────────── */ +.feature-cols { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 64px; + align-items: start; +} +.feature-text .tile-eyebrow { margin-bottom: 12px; } +.feature-pillars { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 24px; +} +.pillar { + background: rgba(255,255,255,0.04); + border: 1px solid rgba(255,255,255,0.08); + border-radius: var(--r-md); + padding: 20px; +} +.pillar-icon { font-size: 22px; display: block; margin-bottom: 10px; } +.pillar-title { + font-family: var(--font-text); + font-size: 14px; + font-weight: 600; + color: var(--on-dark); + margin-bottom: 6px; +} +.pillar-body { + font-size: 13px; + line-height: 1.5; + color: var(--on-dark-muted); +} + +/* ─── Modal ──────────────────────────────── */ +.modal-backdrop { + position: fixed; + inset: 0; + z-index: 400; + background: rgba(13,17,23,0.7); + backdrop-filter: blur(8px); + display: flex; + align-items: center; + justify-content: center; + padding: 24px; + animation: fadeIn .18s var(--ease); +} +.modal-backdrop[hidden] { display: none; } +@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } + +.modal { + background: var(--canvas); + border-radius: var(--r-lg); + width: 100%; + max-width: 680px; + max-height: 85vh; + overflow-y: auto; + animation: slideUp .2s var(--ease); + box-shadow: 0 20px 60px rgba(0,0,0,0.3); +} +@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } + +.modal-header { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 16px; + padding: 28px 28px 20px; + border-bottom: 1px solid var(--divider); + position: sticky; + top: 0; + background: var(--canvas); + z-index: 1; +} +.modal-eyebrow { + display: block; + font-size: 11px; + font-weight: 600; + letter-spacing: 0.5px; + text-transform: uppercase; + color: var(--chip-text); + background: var(--chip-bg); + border-radius: var(--r-pill); + padding: 3px 10px; + margin-bottom: 8px; + width: fit-content; +} +.modal-title { + font-family: var(--font-display); + font-size: 22px; + font-weight: 600; + line-height: 1.2; + letter-spacing: -0.3px; + color: var(--ink); + margin-bottom: 4px; +} +.modal-id { + font-size: 13px; + font-weight: 600; + color: var(--ink-48); + letter-spacing: 0; +} +.modal-close { + flex-shrink: 0; + background: var(--parchment); + border: none; + border-radius: 50%; + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + color: var(--ink-48); + font-size: 14px; + transition: background .15s, color .15s; +} +.modal-close:hover { background: var(--divider); color: var(--ink); } + +.modal-body { padding: 24px 28px 32px; } +.modal-section { margin-bottom: 24px; } +.modal-section:last-child { margin-bottom: 0; } +.modal-section-title { + font-size: 11px; + font-weight: 600; + letter-spacing: 0.6px; + text-transform: uppercase; + color: var(--ink-48); + margin-bottom: 8px; +} +.modal-section-body { + font-size: 15px; + line-height: 1.6; + letter-spacing: -0.2px; + color: var(--ink-80); +} +.modal-keywords { + display: flex; + flex-wrap: wrap; + gap: 6px; +} +.modal-keyword { + font-size: 12px; + color: var(--ink-80); + background: var(--parchment); + border: 1px solid var(--divider); + border-radius: var(--r-pill); + padding: 4px 12px; +} +.modal-key-sections { display: flex; flex-direction: column; gap: 16px; } +.key-section-item { + background: var(--parchment); + border-radius: var(--r-md); + padding: 16px; + border-left: 3px solid var(--accent); +} +.key-section-name { + font-size: 12px; + font-weight: 600; + letter-spacing: 0.3px; + color: var(--accent); + text-transform: uppercase; + margin-bottom: 6px; +} +.key-section-text { + font-size: 14px; + line-height: 1.6; + color: var(--ink-80); +} + +/* ─── Inline link ────────────────────────── */ +.inline-link { + color: var(--accent); + text-decoration: underline; + text-underline-offset: 2px; +} +.inline-link:hover { color: var(--accent-hover); } + +/* ─── Footer ─────────────────────────────── */ +.footer { + background: var(--parchment); + border-top: 1px solid var(--divider); + padding: 60px 0 32px; +} +.footer-inner { + max-width: 1100px; + margin: 0 auto; + padding: 0 40px; +} +.footer-cols { + display: grid; + grid-template-columns: 1.5fr 1fr 1fr 1fr; + gap: 40px; + margin-bottom: 40px; +} +.footer-brand { + font-family: var(--font-display); + font-size: 17px; + font-weight: 600; + color: var(--ink); + margin-bottom: 6px; +} +.footer-tagline { + font-size: 13px; + color: var(--ink-48); + line-height: 1.5; +} +.footer-heading { + font-size: 13px; + font-weight: 600; + color: var(--ink-80); + margin-bottom: 10px; +} +.footer-link { + display: block; + font-size: 13px; + color: var(--ink-48); + text-decoration: none; + line-height: 2.2; + transition: color .12s; +} +.footer-link:hover { color: var(--accent); } +.footer-legal { + border-top: 1px solid var(--divider); + padding-top: 20px; + font-size: 11px; + color: var(--ink-48); + line-height: 1.7; +} +.footer-legal p + p { margin-top: 4px; } +.legal-link { + color: var(--ink-48); + text-decoration: underline; + text-underline-offset: 2px; +} +.legal-link:hover { color: var(--accent); } + +/* ─── Focus outline ──────────────────────── */ +*:focus-visible { + outline: 2px solid var(--accent); + outline-offset: 2px; +} + +/* ─── Responsive ─────────────────────────── */ +@media (max-width: 1023px) { + .feature-cols { grid-template-columns: 1fr; gap: 40px; } + .footer-cols { grid-template-columns: 1fr 1fr; gap: 28px; } +} + +@media (max-width: 833px) { + :root { --sp-sec: 56px; } + .nav-links { display: none; } + .nav-hamburger { display: flex; } + .hero-display { font-size: 34px; } + .feature-pillars { grid-template-columns: 1fr; } + .hero-stats { gap: 20px; padding: 16px 24px; } + .stat-num { font-size: 22px; } + .desktop-only { display: none; } +} + +@media (max-width: 640px) { + :root { --sp-sec: 48px; } + .tile-inner { padding: 0 20px; } + .nav-inner { padding: 0 20px; } + .hero-display { font-size: 28px; } + .lead { font-size: 17px; } + .hero-stats { flex-direction: column; gap: 12px; padding: 16px 20px; } + .stat-divider { width: 40px; height: 1px; } + .cta-row { flex-direction: column; align-items: stretch; } + .cta-row .btn-primary, .cta-row .btn-ghost-dark { text-align: center; justify-content: center; } + .filter-row { flex-direction: column; align-items: stretch; } + .footer-cols { grid-template-columns: 1fr; gap: 24px; } + .modal { border-radius: var(--r-md) var(--r-md) 0 0; max-height: 90vh; } + .modal-backdrop { align-items: flex-end; padding: 0; } + .footer-inner { padding: 0 20px; } +} + +@media (max-width: 419px) { + .hero-display { font-size: 24px; } + .display-lg { font-size: 22px; } +}