/* ============================================================ SPECTRONICS INDIA — MAIN CSS Design System: Tokens · Reset · Base · Layout · Utilities ============================================================ */ @layer reset, tokens, base, layout, utilities; /* ============================================================ GOOGLE FONTS IMPORT (handled in for preconnect) Syne 700/800 · Plus Jakarta Sans 400/500/600 JetBrains Mono 400/500 · Bebas Neue 400 ============================================================ */ /* ============================================================ LAYER: RESET ============================================================ */ @layer reset { *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; tab-size: 4; } body { min-height: 100vh; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; text-wrap: pretty; } h1, h2, h3 { text-wrap: balance; line-height: 1.1; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button { cursor: pointer; border: none; background: none; } } /* ============================================================ LAYER: TOKENS (CSS Custom Properties — Design System) ============================================================ */ @layer tokens { :root { /* --- BACKGROUNDS (Classic Industrial) --- */ --bg-void: #f0f0f0; /* Traditional light gray body bg */ --bg-base: #ffffff; --bg-elevated: #f9f9f9; --bg-card: #ffffff; --bg-header: #ffffff; --bg-glass: rgba(0, 0, 0, 0.03); --bg-glass-hover: rgba(0, 0, 0, 0.06); --bg-hover: #f5f5f5; /* --- BORDERS --- */ --border-dim: #dddddd; --border-mid: #cccccc; --border-bright: #aaaaaa; --border-light: #e0e0e0; --border-glow: transparent; /* --- TEXT --- */ --text-primary: #333333; /* Classic dark gray */ --text-secondary: #555555; --text-tertiary: #777777; --text-muted: #999999; --text-inverse: #ffffff; /* --- ACCENT COLORS (Ultra-Premium Tech) --- */ --accent-sky: #0D47A1; /* Deep Tech Blue */ --accent-amber: #E53935; /* Sharp Tech Red */ --accent-blue: #1565C0; /* Medium Blue for hovers/accents */ /* --- PRIMARY ACCENT --- */ --accent: var(--accent-sky); --accent-rgb: 13, 71, 161; --accent-glow: rgba(var(--accent-rgb), 0.1); --accent-glow-strong: rgba(var(--accent-rgb), 0.2); /* --- GRADIENTS (Sleek Surfaces) --- */ --gradient-hero: radial-gradient(circle at top right, #111827 0%, #000000 100%); /* Deep dark void */ --gradient-amber: linear-gradient(135deg, #E53935 0%, #B71C1C 100%); --gradient-subtle: linear-gradient(to bottom, #ffffff, #f8f9fa); --gradient-card: linear-gradient(145deg, #ffffff, #f5f5f5); /* --- NOISE --- */ --noise-opacity: 0.02; /* --- TYPOGRAPHY (Ultra-Modern) --- */ --font-display: 'Outfit', 'Syne', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'Fira Code', 'Roboto Mono', monospace; --font-stamp: 'Outfit', sans-serif; /* --- TYPE SCALE (Massive Impact) --- */ --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px; --text-3xl: 36px; --text-4xl: 48px; --text-5xl: 64px; --text-6xl: 80px; --text-hero: 72px; --text-stamp: 64px; /* --- SPACING (Tighter padding) --- */ --space-1: 2px; --space-2: 5px; --space-3: 8px; --space-4: 12px; --space-5: 15px; --space-6: 20px; --space-8: 30px; --space-10: 40px; --space-12: 50px; --space-16: 60px; --space-20: 80px; --space-24: 100px; --space-32: 120px; /* --- BORDERS / RADIUS (Showroom) --- */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 24px; --radius-xl: 32px; --radius-full: 9999px; /* --- SHADOWS (Floating Effects) --- */ --shadow-sm: 0 4px 12px rgba(0,0,0,0.05); --shadow-md: 0 10px 30px rgba(0,0,0,0.08); --shadow-lg: 0 20px 50px rgba(0,0,0,0.12); --shadow-glow: 0 0 40px rgba(13, 71, 161, 0.3); /* --- TRANSITIONS --- */ --ease-out: ease-out; --ease-in: ease-in; --ease-spring: ease; --duration-fast: 100ms; --duration-base: 150ms; --duration-slow: 250ms; --duration-xslow: 300ms; /* --- LAYOUT --- */ --container-max: 1440px; --container-pad: 24px; --section-gap: 40px; --nav-height: 80px; /* Actual height of the premium header */ /* --- Z-INDEX SCALE --- */ --z-base: 1; --z-card: 10; --z-sticky: 100; --z-nav: 200; --z-modal: 300; --z-noise: -1; } /* --- MOBILE RESPONSIVE SCALING --- */ @media (max-width: 768px) { :root { --text-hero: 42px; --text-6xl: 48px; --text-5xl: 38px; --text-4xl: 32px; --text-3xl: 26px; --text-2xl: 22px; --text-xl: 18px; --text-lg: 16px; --text-base: 15px; --container-pad: 16px; --section-gap: 40px; --nav-height: 70px; --space-24: 60px; --space-32: 80px; } } @media (max-width: 480px) { :root { --text-hero: 36px; --text-6xl: 40px; --text-5xl: 32px; --text-4xl: 28px; --text-3xl: 24px; --text-2xl: 20px; --text-xl: 16px; --text-lg: 15px; --container-pad: 12px; --section-gap: 32px; --nav-height: 64px; --space-16: 32px; --space-24: 48px; --space-32: 64px; } } } /* ============================================================ LAYER: BASE ============================================================ */ @layer base { *, *::before, *::after { box-sizing: border-box; } /* Grain texture overlay */ body::before { content: ''; position: fixed; inset: 0; width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); pointer-events: none; z-index: var(--z-noise); opacity: var(--noise-opacity); mix-blend-mode: screen; } html { font-size: 16px; max-width: 100vw; overflow-x: hidden; } body { font-family: var(--font-body); font-size: var(--text-base); color: var(--text-primary); background-color: var(--bg-void); max-width: 100vw; overflow-x: hidden; } /* Selection */ ::selection { background: rgba(56, 189, 248, 0.25); color: #fff; } /* Scrollbar */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--bg-void); } ::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: var(--radius-full); } ::-webkit-scrollbar-thumb:hover { background: var(--border-bright); } /* Typography */ h1, h2, h3, h4 { overflow-wrap: break-word; word-break: break-word; } h1 { font-family: var(--font-display); font-size: var(--text-hero); font-weight: 800; letter-spacing: -0.03em; line-height: 0.95; color: var(--text-primary); } h2 { font-family: var(--font-display); font-size: var(--text-5xl); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; color: var(--text-primary); } h3 { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 700; letter-spacing: -0.015em; line-height: 1.1; } h4 { font-family: var(--font-body); font-size: var(--text-xl); font-weight: 600; line-height: 1.3; } p { line-height: 1.75; color: var(--text-secondary); } strong { color: var(--text-primary); font-weight: 600; } a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-sm); } /* Model number — apply this class everywhere a model number appears */ .model-num { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.05em; color: var(--accent); } /* Gradient text */ .gradient-text { background: var(--gradient-hero); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Category color override — set by JS/build on parent elements */ [data-category-color="sky"] { --accent: var(--accent-sky); --accent-rgb: 56,189,248; } [data-category-color="violet"] { --accent: var(--accent-violet); --accent-rgb: 167,139,250; } [data-category-color="green"] { --accent: var(--accent-green); --accent-rgb: 74,222,128; } [data-category-color="emerald"] { --accent: var(--accent-emerald); --accent-rgb: 52,211,153; } [data-category-color="amber"] { --accent: var(--accent-amber); --accent-rgb: 251,146,60; } [data-category-color="purple"] { --accent: var(--accent-purple); --accent-rgb: 192,132,252; } [data-category-color="pink"] { --accent: var(--accent-pink); --accent-rgb: 244,114,182; } [data-category-color="cyan"] { --accent: var(--accent-cyan); --accent-rgb: 103,232,249; } [data-category-color="coral"] { --accent: var(--accent-coral); --accent-rgb: 248,113,113; } [data-category-color="teal"] { --accent: var(--accent-teal); --accent-rgb: 110,231,183; } [data-category-color="blue"] { --accent: #93c5fd; --accent-rgb: 147,197,253; } [data-category-color="yellow"] { --accent: #fbbf24; --accent-rgb: 251,191,36; } [data-category-color="lime"] { --accent: #86efac; --accent-rgb: 134,239,172; } [data-category-color="red"] { --accent: #fca5a5; --accent-rgb: 252,165,165; } [data-category-color="lightblue"] { --accent: #7dd3fc; --accent-rgb: 125,211,252; } } /* ============================================================ LAYER: LAYOUT ============================================================ */ @layer layout { /* Container */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); } .container--narrow { max-width: 860px; } .container--wide { max-width: 96%; } /* Section */ .section { padding-block: var(--section-gap); position: relative; } .section--flush-top { padding-top: 0; } .section--flush-bottom { padding-bottom: 0; } .section--dark { background: var(--bg-base); } /* Grid systems */ .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: var(--space-6); } .grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--space-6); } .grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--space-5); } /* Responsive fixed-ratio grids that collapse on mobile */ .grid-responsive-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); } .grid-responsive-1-2 { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-8); } .grid-responsive-2-1 { display: grid; grid-template-columns: 2.5fr 1fr; gap: var(--space-8); } @media (max-width: 992px) { .grid-responsive-2, .grid-responsive-1-2, .grid-responsive-2-1 { grid-template-columns: 1fr; gap: var(--space-6); } } /* Flex helpers */ .flex { display: flex; } .flex-center { display: flex; align-items: center; justify-content: center; } .flex-between{ display: flex; align-items: center; justify-content: space-between; } .flex-col { display: flex; flex-direction: column; } .gap-2 { gap: var(--space-2); } .gap-4 { gap: var(--space-4); } .gap-6 { gap: var(--space-6); } .gap-8 { gap: var(--space-8); } /* Clip-path dividers */ .clip-diagonal-bottom { clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%); padding-bottom: 8vw; } .clip-diagonal-top { clip-path: polygon(0 4%, 100% 0, 100% 100%, 0 100%); margin-top: -4vw; padding-top: 8vw; } } /* ============================================================ CATALOG LAYOUT (Sticky Sidebar) ============================================================ */ .catalog-layout { display: grid; grid-template-columns: 280px 1fr; gap: 60px; align-items: start; } .catalog-sidebar { position: sticky; top: calc(var(--nav-height) + 120px); max-height: calc(100vh - var(--nav-height) - 160px); overflow-y: auto; padding-right: 20px; background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--border-light); padding: 24px; } @media (max-width: 992px) { .catalog-layout { grid-template-columns: 1fr; gap: 32px; } .catalog-sidebar { position: relative; top: auto; max-height: none; padding: 20px; margin-bottom: 24px; } } .catalog-sidebar::-webkit-scrollbar { width: 4px; } .catalog-sidebar::-webkit-scrollbar-track { background: transparent; } .catalog-sidebar::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 4px; } .catalog-sidebar-link { display: block; padding: 12px 16px; color: var(--text-secondary); text-decoration: none; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; border-radius: var(--radius-sm); transition: all 0.2s; margin-bottom: 4px; } .catalog-sidebar-link:hover { background: var(--bg-hover); color: var(--accent-sky); padding-left: 20px; } .catalog-sidebar-group { margin-bottom: 4px; } .catalog-sidebar-products { display: none; padding-left: 20px; padding-top: 4px; padding-bottom: 8px; border-left: 1px solid var(--border-light); margin-left: 16px; margin-bottom: 8px; } .catalog-sidebar-group:hover .catalog-sidebar-products, .catalog-sidebar-group:focus-within .catalog-sidebar-products { display: block; } .catalog-sidebar-product-link { display: block; font-size: 13px; color: var(--text-tertiary); text-decoration: none; padding: 6px 12px; font-family: 'Inter', sans-serif; transition: all 0.2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: var(--radius-sm); } .catalog-sidebar-product-link:hover { color: var(--accent-sky); background: var(--bg-hover); } @media (max-width: 900px) { .catalog-layout { grid-template-columns: 1fr; } .catalog-sidebar { position: relative; top: 0; max-height: none; margin-bottom: 40px; } } /* ============================================================ LAYER: UTILITIES ============================================================ */ @layer utilities { .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; } .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .text-muted { color: var(--text-secondary); } .text-accent { color: var(--accent); } .text-mono { font-family: var(--font-mono); } .text-display { font-family: var(--font-display); } .text-stamp { font-family: var(--font-stamp); } .font-400 { font-weight: 400; } .font-500 { font-weight: 500; } .font-600 { font-weight: 600; } .font-700 { font-weight: 700; } .font-800 { font-weight: 800; } .uppercase { text-transform: uppercase; letter-spacing: 0.1em; } .tracking-wide { letter-spacing: 0.08em; } .mt-auto { margin-top: auto; } .mb-4 { margin-bottom: var(--space-4); } .mb-6 { margin-bottom: var(--space-6); } .mb-8 { margin-bottom: var(--space-8); } .mt-4 { margin-top: var(--space-4); } .mt-8 { margin-top: var(--space-8); } .relative { position: relative; } .overflow-hidden { overflow: hidden; } /* Reveal animation classes (set by IntersectionObserver) */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--duration-xslow) var(--ease-out), transform var(--duration-xslow) var(--ease-out); } .reveal.is-visible { opacity: 1; transform: translateY(0); } .reveal-left { opacity: 0; transform: translateX(-30px); transition: opacity var(--duration-xslow) var(--ease-out), transform var(--duration-xslow) var(--ease-out); } .reveal-left.is-visible { opacity: 1; transform: translateX(0); } /* Stagger delay helpers */ .delay-1 { transition-delay: 80ms !important; } .delay-2 { transition-delay: 160ms !important; } .delay-3 { transition-delay: 240ms !important; } .delay-4 { transition-delay: 320ms !important; } .delay-5 { transition-delay: 400ms !important; } .delay-6 { transition-delay: 480ms !important; } /* Divider */ .divider { width: 100%; height: 1px; background: var(--border-dim); margin-block: var(--space-8); } /* Pill / badge */ .pill { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 500; font-family: var(--font-mono); letter-spacing: 0.06em; border: 1px solid var(--border-dim); background: var(--bg-glass); color: var(--text-secondary); } .pill--accent { border-color: rgba(var(--accent-rgb), 0.4); background: rgba(var(--accent-rgb), 0.08); color: var(--accent); } /* Section header block */ .section-header { margin-bottom: var(--space-12); } .section-eyebrow { display: inline-block; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-3); padding: var(--space-1) var(--space-3); border: 1px solid rgba(var(--accent-rgb), 0.35); border-radius: var(--radius-full); background: rgba(var(--accent-rgb), 0.06); } /* Background stamp text */ .bg-stamp { font-family: var(--font-stamp); font-size: var(--text-stamp); line-height: 0.9; color: var(--text-primary); opacity: 0.032; pointer-events: none; user-select: none; white-space: nowrap; position: absolute; z-index: 0; } /* Page content wrapper */ .page-content { /* padding-top removed because header is now position: sticky and naturally occupies space */ } /* Responsive Utilities */ .hide-on-mobile { display: none; } .show-on-mobile-inline { display: inline-flex; } @media (min-width: 1024px) { .hide-on-mobile { display: block; } .hide-on-mobile-flex { display: flex; } .show-on-mobile-inline { display: none; } } .mobile-menu-btn { background: transparent; border: none; color: var(--text-primary); cursor: pointer; padding: 8px; display: flex; align-items: center; justify-content: center; transition: color 0.2s; } .mobile-menu-btn:hover { color: var(--accent-sky); } } /* ============================================================ PRODUCT CARD HOVER INFO OVERLAY ============================================================ */ .product-card-link { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; } .product-card-link:hover { box-shadow: var(--shadow-lg) !important; transform: translateY(-6px) scale(1.01) !important; } .product-card-link:hover img { transform: scale(1.08) !important; } .product-card-link:hover .arrow { transform: translateX(4px) !important; } .product-card-link:hover .product-hover-info { opacity: 1 !important; transform: translateY(0) !important; } /* ============================================================ REDUCED MOTION (accessibility) ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .reveal, .reveal-left { opacity: 1 !important; transform: none !important; } }