/* * VarshaKrishi Design System — base.css * CSS reset + base element styles. * All values reference tokens from tokens.css. * No hardcoded hex, px, or arbitrary values. */ /* ───────────────────────────────────────────────────────────── * GOOGLE FONTS LOAD * font-display: swap prevents invisible text during font load. * Preconnect links must appear in every page before this. * Weights loaded: 400 (regular), 500 (medium), 600 (semibold), 700 (bold) * for Instrument Sans; 400 italic for DM Serif Display; * 400 and 500 for IBM Plex Mono. * ───────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=IBM+Plex+Mono:wght@400;500&family=Instrument+Sans:ital,wdth,wght@0,75..100,400..700;1,75..100,400&family=Noto+Sans+Devanagari:wght@400;500;600;700;800&display=swap'); /* ───────────────────────────────────────────────────────────── * MODERN CSS RESET * Based on Andy Bell's reset, extended for this project. * ───────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Prevent font size inflation on mobile */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Remove list styles on ul, ol elements with a list role */ ul[role='list'], ol[role='list'] { list-style: none; } /* Set core body defaults */ body { min-height: 100vh; line-height: var(--leading-normal); } /* Balance text wrapping on headings */ h1, h2, h3, h4, h5, h6 { text-wrap: balance; } /* Avoid text overflows */ p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } /* Make images easier to work with */ img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } /* Inherit fonts for inputs and buttons */ input, button, textarea, select { font: inherit; } /* Ensure [hidden] attribute always hides elements, even when component CSS sets display:flex or display:block on the class. */ [hidden] { display: none !important; } /* Remove all animations, transitions and smooth scroll for people that prefer not to see them — checked before any animation runs */ @media (prefers-reduced-motion: reduce) { html:focus-within { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ───────────────────────────────────────────────────────────── * DOCUMENT FOUNDATION * ───────────────────────────────────────────────────────────── */ html { font-size: 16px; /* 1rem = 16px — all spacing tokens are rem-based */ scroll-behavior: auto; /* Lenis owns smoothness — native smooth-scroll double-eases and causes lag */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { background-color: var(--color-bg-base); color: var(--color-text-secondary); font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-regular); line-height: var(--leading-normal); letter-spacing: var(--tracking-normal); overflow-x: hidden; /* Offset for fixed nav */ padding-top: var(--nav-height); } /* Subtle film-grain texture overlay — atmospheric, not decorative */ body::before { content: ''; position: fixed; inset: 0; z-index: var(--z-overlay); pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 128px 128px; opacity: 0.025; mix-blend-mode: overlay; } /* ───────────────────────────────────────────────────────────── * HEADING DEFAULTS * All headings use the body font by default. * .display-* classes apply the serif display font. * ───────────────────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-body); font-weight: var(--weight-bold); color: var(--color-text-primary); line-height: var(--leading-tight); letter-spacing: var(--tracking-snug); } h1 { font-size: var(--text-5xl); letter-spacing: var(--tracking-tight); } h2 { font-size: var(--text-4xl); } h3 { font-size: var(--text-3xl); } h4 { font-size: var(--text-2xl); } h5 { font-size: var(--text-xl); font-weight: var(--weight-semibold); } h6 { font-size: var(--text-lg); font-weight: var(--weight-semibold); } /* ───────────────────────────────────────────────────────────── * PARAGRAPH & BODY TEXT * ───────────────────────────────────────────────────────────── */ p { font-size: var(--text-base); line-height: var(--leading-normal); color: var(--color-text-secondary); max-width: var(--measure-body); } /* Lead paragraph — used for page introductions */ p.lead { font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--color-text-secondary); } /* ───────────────────────────────────────────────────────────── * LINKS * ───────────────────────────────────────────────────────────── */ a { color: inherit; text-decoration: none; transition: color var(--duration-fast) var(--ease-out); } a:hover { color: var(--color-text-primary); } /* Accessible focus ring — visible on keyboard navigation only */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 3px; border-radius: var(--radius-sm); } /* Remove focus ring for mouse users */ a:focus:not(:focus-visible), button:focus:not(:focus-visible) { outline: none; } /* ───────────────────────────────────────────────────────────── * LISTS * ───────────────────────────────────────────────────────────── */ ul, ol { padding-left: var(--space-3); } li { line-height: var(--leading-normal); color: var(--color-text-secondary); } /* ───────────────────────────────────────────────────────────── * INLINE ELEMENTS * ───────────────────────────────────────────────────────────── */ strong, b { font-weight: var(--weight-semibold); color: var(--color-text-primary); } em, i { font-style: italic; } code, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); padding: 0.1em 0.4em; color: var(--color-text-primary); } /* ───────────────────────────────────────────────────────────── * BLOCKQUOTE * Used in blog articles for pull quotes. * ───────────────────────────────────────────────────────────── */ blockquote { font-family: var(--font-display); font-style: italic; font-size: var(--text-2xl); line-height: var(--leading-snug); color: var(--color-text-secondary); border-left: 3px solid var(--color-brand-muted); padding: var(--space-3) var(--space-4); margin: var(--space-6) 0; } blockquote cite { display: block; font-family: var(--font-mono); font-style: normal; font-size: var(--text-xs); color: var(--color-text-muted); letter-spacing: var(--tracking-wider); text-transform: uppercase; margin-top: var(--space-2); } /* ───────────────────────────────────────────────────────────── * HORIZONTAL RULE * ───────────────────────────────────────────────────────────── */ hr { border: none; border-top: 1px solid var(--color-border-default); margin: var(--space-6) 0; } /* ───────────────────────────────────────────────────────────── * TABLES (base — component overrides in components.css) * ───────────────────────────────────────────────────────────── */ table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } th { font-family: var(--font-mono); font-weight: var(--weight-medium); font-size: var(--text-xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-text-muted); text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border-default); } td { padding: var(--space-2) var(--space-3); color: var(--color-text-secondary); border-bottom: 1px solid var(--color-border-subtle); vertical-align: top; line-height: var(--leading-normal); } tr:last-child td { border-bottom: none; } tr:hover td { background: var(--color-bg-surface); } /* ───────────────────────────────────────────────────────────── * SELECTION * ───────────────────────────────────────────────────────────── */ ::selection { background: var(--color-brand-glow); color: var(--color-text-primary); } /* ───────────────────────────────────────────────────────────── * SCROLLBAR * ───────────────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--color-bg-base); } ::-webkit-scrollbar-thumb { background: var(--color-bg-overlay); border-radius: var(--radius-full); } ::-webkit-scrollbar-thumb:hover { background: var(--color-text-disabled); } /* Firefox */ * { scrollbar-width: thin; scrollbar-color: var(--color-bg-overlay) var(--color-bg-base); } /* ───────────────────────────────────────────────────────────── * SKIP LINK (accessibility) * Visually hidden until focused — required for keyboard navigation. * ───────────────────────────────────────────────────────────── */ .skip-link { position: absolute; top: calc(-1 * var(--nav-height) - var(--space-2)); left: var(--space-2); z-index: var(--z-toast); background: var(--color-brand-primary); color: var(--color-text-inverse); font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--weight-semibold); padding: var(--space-1) var(--space-3); border-radius: var(--radius-md); text-decoration: none; transition: top var(--duration-fast) var(--ease-out); } .skip-link:focus { top: var(--space-2); } /* ───────────────────────────────────────────────────────────── * PAGE LOADER * Shown during initial load, hidden after DOMContentLoaded. * ───────────────────────────────────────────────────────────── */ .page-loader { position: fixed; inset: 0; z-index: var(--z-toast); background: var(--color-bg-base); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: var(--space-2); transition: opacity var(--duration-slow) var(--ease-out-expo), visibility var(--duration-slow); } .page-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; } .page-loader__wordmark { font-family: var(--font-display); font-style: italic; font-size: var(--text-4xl); color: var(--color-text-primary); letter-spacing: var(--tracking-snug); } .page-loader__bar { width: 120px; height: 1px; background: var(--color-border-default); position: relative; overflow: hidden; } .page-loader__bar::after { content: ''; position: absolute; left: -100%; top: 0; width: 100%; height: 100%; background: var(--color-brand-primary); animation: loader-bar 1.2s var(--ease-out-expo) forwards; } @keyframes loader-bar { to { left: 0; } }