/* ============================================================================ ITEPL Brand — Web Tokens Indian Transformers and Electricals Pvt. Ltd. The web-specific layer of the design system: spacing, radius, elevation, motion, breakpoints, containers, z-index, and focus. Layers on top of colors.css and typography.css (import those first). Direction: "Engineered Minimal" — light base, near-black text, orange as a precise accent, hairline rules, restrained motion. Reference var(--ite-*) tokens; don't hardcode. Import order in product code: colors.css → typography.css → web.css ============================================================================ */ :root { /* --- Spacing scale (4px base) ---------------------------------------- */ --ite-space-0: 0; --ite-space-1: 0.25rem; /* 4 */ --ite-space-2: 0.5rem; /* 8 */ --ite-space-3: 0.75rem; /* 12 */ --ite-space-4: 1rem; /* 16 */ --ite-space-5: 1.25rem; /* 20 */ --ite-space-6: 1.5rem; /* 24 */ --ite-space-8: 2rem; /* 32 */ --ite-space-10: 2.5rem; /* 40 */ --ite-space-12: 3rem; /* 48 */ --ite-space-16: 4rem; /* 64 */ --ite-space-20: 5rem; /* 80 */ --ite-space-24: 6rem; /* 96 */ --ite-space-32: 8rem; /* 128 */ /* Section rhythm — vertical padding for page sections. */ --ite-section-y: var(--ite-space-24); --ite-section-y-tight: var(--ite-space-16); /* --- Radius scale (P4: dual squircle/fallback system, user-tuned in the squircle playground 2026-06-16) ------------------------------------ Two radius sets ship. These BASE values are the small, plain-rounded corners that browsers WITHOUT corner-shape (Safari, older Chrome) render. The @supports block just below this :root bumps corner-shape browsers (Chrome/Edge 139+) up to the fuller radii AND applies the real squircle (--ite-corner). The grouped `corner-shape: var(--ite-corner)` rule in styles.css reads --ite-corner, which is only defined inside @supports — so non-supporting browsers simply keep these base radii. */ --ite-radius-xs: 2px; --ite-radius-sm: 4px; /* inputs, chips, small controls */ --ite-radius-md: 6px; /* buttons, list items — the default */ --ite-radius-lg: 6px; /* cards */ --ite-radius-xl: 6px; /* large cards / media / banners */ --ite-radius-2xl: 7px; /* feature panels */ --ite-radius-pill: 9999px; /* pills, badges, the round nav cluster */ /* --- Elevation ------------------------------------------------------- Layered, brand-tinted shadows at low opacity (per the frontend ruleset: never a flat single-layer shadow). Each level stacks a tight ink contact shadow with a softer warm orange-tinted ambient layer. Three z-planes: base (no shadow, hairline ring) → elevated (sm/md) → floating (lg/xl). */ --ite-shadow-xs: 0 1px 2px rgba(35, 31, 32, 0.05), 0 1px 1px rgba(242, 101, 34, 0.03); --ite-shadow-sm: 0 1px 3px rgba(35, 31, 32, 0.07), 0 2px 6px rgba(242, 101, 34, 0.04); --ite-shadow-md: 0 2px 4px rgba(35, 31, 32, 0.05), 0 8px 16px rgba(242, 101, 34, 0.06), 0 12px 24px rgba(35, 31, 32, 0.05); --ite-shadow-lg: 0 4px 8px rgba(35, 31, 32, 0.06), 0 16px 32px rgba(242, 101, 34, 0.07), 0 24px 48px rgba(35, 31, 32, 0.07); --ite-shadow-xl: 0 8px 16px rgba(35, 31, 32, 0.06), 0 24px 48px rgba(242, 101, 34, 0.09), 0 40px 80px rgba(35, 31, 32, 0.10); /* Hairline border as a "1px engineered line" elevation alternative. */ --ite-ring-hairline: inset 0 0 0 1px var(--ite-color-border); /* --- Textures & grain (R4) -------------------------------------------- The brand carries feature/specimen surfaces with crisp PATTERN textures, not soft colour washes (the orange radial washes were retired in v3.9). Metals carry their own sheen. Apply a texture as a background-image layer over a base colour: `background: var(--ite-tx-grid), var(--ite-white)`, or via the .ite-grain / .ite-grid / .ite-hatch overlay utilities. Text on a textured surface must still meet AA against the base colour. */ --ite-tx-line: rgba(19, 20, 24, 0.055); /* faint ink — texture line on light grounds */ --ite-tx-line-dark: rgba(255, 255, 255, 0.05); /* faint white — texture line on dark/metal */ --ite-tx-grid: /* blueprint ruled grid (24px cell) — light grounds */ repeating-linear-gradient(0deg, transparent 0 23px, var(--ite-tx-line) 23px 24px), repeating-linear-gradient(90deg, transparent 0 23px, var(--ite-tx-line) 23px 24px); --ite-tx-grid-dark: /* same grid for dark/metal surfaces (etched look) */ repeating-linear-gradient(0deg, transparent 0 23px, var(--ite-tx-line-dark) 23px 24px), repeating-linear-gradient(90deg, transparent 0 23px, var(--ite-tx-line-dark) 23px 24px); --ite-tx-hatch: /* 45° drafting hatch (8px pitch) */ repeating-linear-gradient(45deg, var(--ite-tx-line) 0 1px, transparent 1px 8px); --ite-tx-grid-size: 24px; /* SVG fractal-noise grain tile; overlay at --ite-grain-opacity. */ --ite-grain: url("data:image/svg+xml;utf8,"); --ite-grain-opacity: 0.05; /* --- Data visualization ------------------------------------------------ Series colours alternate orange and neutral steps so adjacent series stay distinguishable without leaving the brand palette. Use in order. */ --ite-chart-1: var(--ite-orange-500); --ite-chart-2: var(--ite-gray-700); --ite-chart-3: var(--ite-orange-300); --ite-chart-4: var(--ite-gray-400); --ite-chart-5: var(--ite-orange-700); --ite-chart-6: var(--ite-gray-200); --ite-chart-grid: var(--ite-gray-200); /* gridlines — hairline */ --ite-chart-axis: var(--ite-gray-500); /* axis lines & ticks */ --ite-chart-label: var(--ite-color-text-muted); /* --- Motion ---------------------------------------------------------- Quick and precise. Keep durations short; reserve longer ones for large surfaces. Always pair with prefers-reduced-motion (see bottom). */ --ite-dur-instant: 80ms; --ite-dur-fast: 140ms; --ite-dur-base: 220ms; --ite-dur-slow: 360ms; --ite-dur-slower: 600ms; /* hero/section reveals only */ --ite-ease-standard: cubic-bezier(0.2, 0, 0, 1); /* most transitions */ --ite-ease-entrance: cubic-bezier(0, 0, 0, 1); /* elements entering */ --ite-ease-exit: cubic-bezier(0.3, 0, 1, 1); /* elements leaving */ --ite-ease-emphasis: cubic-bezier(0.2, 0, 0, 1.2); /* subtle overshoot */ /* --- Breakpoints (reference) ---------------------------------------- CSS can't read vars in @media; these document the scale and mirror the Tailwind `screens` in tailwind.preset.js. */ --ite-screen-sm: 640px; --ite-screen-md: 768px; --ite-screen-lg: 1024px; --ite-screen-xl: 1280px; --ite-screen-2xl: 1536px; /* --- Container -------------------------------------------------------- */ --ite-container-max: 1440px; /* widened from 1280 (2026-06-15, user-approved) so the hero + content fill more of wide screens */ --ite-container-pad: var(--ite-space-6); /* gutter; widen on desktop */ /* --- Z-index scale --------------------------------------------------- */ --ite-z-base: 0; --ite-z-raised: 10; --ite-z-sticky: 20; /* sticky sub-bars */ --ite-z-nav: 50; /* top nav */ --ite-z-megamenu: 40; /* mega-menu panel (below nav bar, above page) */ --ite-z-mobilebar:40; /* mobile Call/Quote bar */ --ite-z-overlay: 60; /* scrims */ --ite-z-drawer: 70; /* mobile menu */ --ite-z-toast: 80; /* --- Focus ---------------------------------------------------------- One visible focus treatment everywhere: 2px brand orange, offset. Never remove focus outlines. */ --ite-focus-width: 2px; --ite-focus-offset: 2px; /* orange-strong #bd4b12 (5.03:1 on white) clears WCAG 2.2 non-text contrast (3:1) with margin; the vivid orange-500 was only ~3.15:1 (marginal). On dark, the override below lifts to orange-400. */ --ite-focus-color: var(--ite-orange-strong); --ite-focus-ring: var(--ite-focus-width) solid var(--ite-focus-color); } /* --- Squircle enhancement (Chrome / Edge 139+) ------------------------------ Browsers that support corner-shape get the fuller radii AND the real superellipse squircle. Everyone else keeps the small base radii above. Tuned in the squircle playground (squircle-lab.html), 2026-06-16. */ @supports (corner-shape: superellipse(4)) { :root { --ite-radius-xs: 5px; --ite-radius-sm: 10px; --ite-radius-md: 14px; --ite-radius-lg: 16px; --ite-radius-xl: 16px; --ite-radius-2xl: 18px; --ite-corner: superellipse(2.5); /* gentle squircle (2 = round … 5 = squarer) */ } } /* Standard focus-visible treatment for interactive elements. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: var(--ite-focus-ring); outline-offset: var(--ite-focus-offset); } /* On dark surfaces, lift the focus colour for contrast (mirrors the accent lift in colors.css). */ [data-ite-theme="dark"] { --ite-focus-color: var(--ite-orange-400); } /* Icon defaults — official set is Material Symbols OUTLINED (Apache 2.0). Full spec: site/iconography.html; vendored SVGs: brand/assets/icons/. Monochrome only: currentColor ink, or brand orange for emphasis. */ .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; font-size: 24px; vertical-align: middle; user-select: none; } /* On dark, pull grade down to offset optical bloom of light-on-dark strokes. */ [data-ite-theme="dark"] .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' -25, 'opsz' 24; } /* Grain overlay utility — apply to a gradient/feature surface. The ::after tile sits above the background but below content (no pointer events). */ .ite-grain { position: relative; isolation: isolate; } .ite-grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--ite-grain); background-size: 160px 160px; opacity: var(--ite-grain-opacity); border-radius: inherit; mix-blend-mode: multiply; } [data-ite-theme="dark"] .ite-grain::after { mix-blend-mode: screen; opacity: 0.07; } .ite-grain > * { position: relative; } /* Texture overlay utilities (R4) — lay a crisp pattern over a coloured surface. .ite-grid = blueprint ruled grid; .ite-hatch = 45° drafting hatch. Both ride above the background but below content, and clip to the host's rounded shape. For a one-line surface, prefer the token form in `background:` instead. */ .ite-grid, .ite-hatch { position: relative; isolation: isolate; } .ite-grid::after, .ite-hatch::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; corner-shape: inherit; } .ite-grid::after { background-image: var(--ite-tx-grid); } .ite-hatch::after { background-image: var(--ite-tx-hatch); } .ite-grid > *, .ite-hatch > * { position: relative; } /* Motion policy: honour reduced-motion globally. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }