chore: remove outdated /ui directory.
This commit is contained in:
-232
@@ -1,232 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>BIS SP-21 — Bureau of Indian Standards</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- ── Global Nav ── -->
|
||||
<nav class="global-nav" role="navigation" aria-label="Primary navigation">
|
||||
<div class="nav-inner">
|
||||
<a class="nav-emblem" href="#" aria-label="Bureau of Indian Standards home">
|
||||
<svg class="emblem-icon" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<circle cx="18" cy="18" r="16" stroke="#FF9933" stroke-width="2.5"/>
|
||||
<circle cx="18" cy="18" r="6" fill="#FF9933"/>
|
||||
<path d="M18 4v4M18 28v4M4 18h4M28 18h4" stroke="#FF9933" stroke-width="2" stroke-linecap="round"/>
|
||||
<path d="M8.7 8.7l2.8 2.8M24.5 24.5l2.8 2.8M8.7 27.3l2.8-2.8M24.5 11.5l2.8-2.8" stroke="#FF9933" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="nav-brand">BIS SP‑21</span>
|
||||
</a>
|
||||
<div class="nav-links" role="list">
|
||||
<a class="nav-link" href="#standards" role="listitem">Standards</a>
|
||||
<a class="nav-link" href="#categories" role="listitem">Categories</a>
|
||||
<a class="nav-link" href="#about" role="listitem">About</a>
|
||||
<a class="nav-link" href="https://www.bis.gov.in" target="_blank" rel="noopener" role="listitem">BIS Portal ↗</a>
|
||||
</div>
|
||||
<button class="nav-hamburger" aria-label="Open menu" aria-expanded="false" aria-controls="mobile-menu">
|
||||
<span></span><span></span><span></span>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- ── Mobile Menu ── -->
|
||||
<div class="mobile-menu" id="mobile-menu" aria-hidden="true">
|
||||
<a class="mobile-link" href="#standards">Standards</a>
|
||||
<a class="mobile-link" href="#categories">Categories</a>
|
||||
<a class="mobile-link" href="#about">About</a>
|
||||
<a class="mobile-link" href="https://www.bis.gov.in" target="_blank" rel="noopener">BIS Portal ↗</a>
|
||||
</div>
|
||||
|
||||
<!-- ── Hero Tile ── -->
|
||||
<section class="tile tile-dark hero-tile" aria-labelledby="hero-heading">
|
||||
<div class="tile-inner tile-center">
|
||||
<p class="tile-eyebrow">Special Publication 21 · 2005</p>
|
||||
<h1 class="hero-display" id="hero-heading">
|
||||
Handbook of<br>Building Materials
|
||||
</h1>
|
||||
<p class="lead">
|
||||
573 Indian Standards across 25 material categories —<br class="desktop-only">
|
||||
searchable, categorised, and ready to reference.
|
||||
</p>
|
||||
<div class="cta-row">
|
||||
<a class="btn-primary" href="#search-section">Search Standards</a>
|
||||
<a class="btn-ghost-dark" href="#categories">Browse Categories</a>
|
||||
</div>
|
||||
<div class="hero-stats" aria-label="Key statistics">
|
||||
<div class="stat">
|
||||
<span class="stat-num">573</span>
|
||||
<span class="stat-label">IS Standards</span>
|
||||
</div>
|
||||
<div class="stat-divider" aria-hidden="true"></div>
|
||||
<div class="stat">
|
||||
<span class="stat-num">25</span>
|
||||
<span class="stat-label">Material Categories</span>
|
||||
</div>
|
||||
<div class="stat-divider" aria-hidden="true"></div>
|
||||
<div class="stat">
|
||||
<span class="stat-num">929</span>
|
||||
<span class="stat-label">Pages Indexed</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ── Search Tile ── -->
|
||||
<section class="tile tile-parchment" id="search-section" aria-labelledby="search-heading">
|
||||
<div class="tile-inner tile-center">
|
||||
<h2 class="display-lg" id="search-heading">Find an IS Standard</h2>
|
||||
<p class="lead-sub">Search by standard number, title, material, or keyword.</p>
|
||||
<form class="search-form" role="search" aria-label="Standards search" id="search-form">
|
||||
<div class="search-wrap">
|
||||
<svg class="search-icon" viewBox="0 0 20 20" fill="none" aria-hidden="true">
|
||||
<circle cx="9" cy="9" r="6.5" stroke="currentColor" stroke-width="1.6"/>
|
||||
<path d="M14 14l4 4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<input
|
||||
class="search-input"
|
||||
type="search"
|
||||
id="search-input"
|
||||
name="q"
|
||||
placeholder="e.g. Ordinary Portland Cement, IS 269, aggregates…"
|
||||
autocomplete="off"
|
||||
spellcheck="false"
|
||||
aria-label="Search standards"
|
||||
/>
|
||||
<button class="search-clear" type="button" id="search-clear" aria-label="Clear search" hidden>✕</button>
|
||||
</div>
|
||||
<div class="filter-row" role="group" aria-label="Filter by category">
|
||||
<select class="category-filter" id="category-filter" aria-label="Filter by category">
|
||||
<option value="">All Categories</option>
|
||||
</select>
|
||||
<button class="btn-primary search-btn" type="submit">Search</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Results -->
|
||||
<div class="results-shell" id="results-shell" aria-live="polite" aria-atomic="false">
|
||||
<div class="results-meta" id="results-meta" hidden></div>
|
||||
<div class="results-grid" id="results-grid"></div>
|
||||
<div class="results-empty" id="results-empty" hidden>
|
||||
<p class="empty-title">No standards found</p>
|
||||
<p class="empty-sub">Try a different keyword or clear the category filter.</p>
|
||||
</div>
|
||||
<div class="results-initial" id="results-initial">
|
||||
<p>Start typing to search, or <a href="#categories" class="inline-link">browse by category</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ── Category Tile ── -->
|
||||
<section class="tile tile-light" id="categories" aria-labelledby="categories-heading">
|
||||
<div class="tile-inner">
|
||||
<div class="section-header">
|
||||
<h2 class="display-lg" id="categories-heading">25 Material Categories</h2>
|
||||
<p class="lead-sub">Every building material section from SP‑21, indexed and searchable.</p>
|
||||
</div>
|
||||
<div class="category-grid" id="category-grid" role="list" aria-label="Material categories"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ── Feature / About Tile ── -->
|
||||
<section class="tile tile-dark-2" id="about" aria-labelledby="about-heading">
|
||||
<div class="tile-inner">
|
||||
<div class="feature-cols">
|
||||
<div class="feature-text">
|
||||
<p class="tile-eyebrow">About SP‑21</p>
|
||||
<h2 class="display-md" id="about-heading">India's Reference for Building Material Standards</h2>
|
||||
<p class="body-copy">
|
||||
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.
|
||||
</p>
|
||||
<p class="body-copy">
|
||||
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.
|
||||
</p>
|
||||
<a class="btn-primary-on-dark" href="https://www.bis.gov.in" target="_blank" rel="noopener">
|
||||
Visit BIS Portal ↗
|
||||
</a>
|
||||
</div>
|
||||
<div class="feature-pillars" role="list" aria-label="Features">
|
||||
<div class="pillar" role="listitem">
|
||||
<span class="pillar-icon" aria-hidden="true">⚡</span>
|
||||
<h3 class="pillar-title">Instant Retrieval</h3>
|
||||
<p class="pillar-body">Full-text search across all 573 standards with ranked results.</p>
|
||||
</div>
|
||||
<div class="pillar" role="listitem">
|
||||
<span class="pillar-icon" aria-hidden="true">📐</span>
|
||||
<h3 class="pillar-title">Section-Level Detail</h3>
|
||||
<p class="pillar-body">Scope, requirements, delivery conditions — all structured fields.</p>
|
||||
</div>
|
||||
<div class="pillar" role="listitem">
|
||||
<span class="pillar-icon" aria-hidden="true">🗂</span>
|
||||
<h3 class="pillar-title">25 Categories</h3>
|
||||
<p class="pillar-body">Organised by BIS material sections, mirroring SP‑21's own structure.</p>
|
||||
</div>
|
||||
<div class="pillar" role="listitem">
|
||||
<span class="pillar-icon" aria-hidden="true">🔒</span>
|
||||
<h3 class="pillar-title">Official Source</h3>
|
||||
<p class="pillar-body">Parsed directly from the BIS SP‑21 : 2005 authoritative edition.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ── Standard Detail Modal ── -->
|
||||
<div class="modal-backdrop" id="modal-backdrop" hidden aria-hidden="true">
|
||||
<div class="modal" id="modal" role="dialog" aria-modal="true" aria-labelledby="modal-title" tabindex="-1">
|
||||
<div class="modal-header">
|
||||
<div>
|
||||
<span class="modal-eyebrow" id="modal-category"></span>
|
||||
<h2 class="modal-title" id="modal-title"></h2>
|
||||
<span class="modal-id" id="modal-id"></span>
|
||||
</div>
|
||||
<button class="modal-close" id="modal-close" aria-label="Close standard detail">✕</button>
|
||||
</div>
|
||||
<div class="modal-body" id="modal-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Footer ── -->
|
||||
<footer class="footer" role="contentinfo">
|
||||
<div class="footer-inner">
|
||||
<div class="footer-cols">
|
||||
<div class="footer-col">
|
||||
<p class="footer-brand">BIS SP‑21</p>
|
||||
<p class="footer-tagline">Handbook on Building Materials<br>Special Publication 21 : 2005</p>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
<p class="footer-heading">Standards</p>
|
||||
<a class="footer-link" href="#search-section">Search</a>
|
||||
<a class="footer-link" href="#categories">Categories</a>
|
||||
<a class="footer-link" href="#about">About</a>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
<p class="footer-heading">Bureau of Indian Standards</p>
|
||||
<a class="footer-link" href="https://www.bis.gov.in" target="_blank" rel="noopener">BIS Official Website</a>
|
||||
<a class="footer-link" href="https://www.manakonline.in" target="_blank" rel="noopener">Manak Online</a>
|
||||
<a class="footer-link" href="https://standardsbis.bsbedge.com" target="_blank" rel="noopener">Standards Portal</a>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
<p class="footer-heading">Ministry</p>
|
||||
<a class="footer-link" href="https://dpiit.gov.in" target="_blank" rel="noopener">DPIIT</a>
|
||||
<a class="footer-link" href="https://www.india.gov.in" target="_blank" rel="noopener">National Portal</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-legal">
|
||||
<p>© Bureau of Indian Standards, Ministry of Commerce & Industry, Government of India. All rights reserved.</p>
|
||||
<p>Content sourced from BIS Special Publication 21 : 2005. For official standards, refer to <a href="https://www.bis.gov.in" target="_blank" rel="noopener" class="legal-link">bis.gov.in</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
-889
@@ -1,889 +0,0 @@
|
||||
/* ─────────────────────────────────────────────
|
||||
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; }
|
||||
}
|
||||
Reference in New Issue
Block a user