/* * NUMAEX — Colors & Type Foundations * Luxury architectural glass & aluminium. Est. 1930, Hyderabad. * * The system is monochrome-first: ink on bone paper, the barest hint of * champagne gold as a rarely-used accent. Everything else is typography. */ /* ───────────────────────────────────────────────────────── * FONTS — loaded from Google Fonts (SUBSTITUTION FLAG: * the source PDFs embed Lato, Cormorant Garamond and Roboto * Mono; we load the same families from Google Fonts. If you * have licensed foundry files, drop them in /fonts/ and swap * the @font-face rules below.) * ───────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400&family=Roboto+Mono:wght@400;500&display=swap'); :root { /* ── INK / BONE — the core monochrome scale ─────────── * The entire system is painted with these eight values. */ --ink-100: #FFFFFF; /* deepest ink — display type, logo */ --ink-90: #F1ECDF; /* primary body */ --ink-70: #D8D2C2; /* secondary body, captions on bone */ --ink-50: #A6A094; /* tertiary / long metadata */ --ink-30: #7E7869; /* quiet labels, disabled */ --ink-15: #4A4740; /* rule lines on bone */ --ink-08: #2F2D29; /* card borders on bone */ --ink-04: #1F1D1A; /* subtle card fills on bone */ /* ── BONE / CREAM — paper ───────────────────────────── * Never pure white. The brand lives on warm stock. */ --bone-00: #0D0D0C; /* primary paper — the page */ --bone-05: #16140F; /* card surface */ --bone-10: #1F1D16; /* nested card / wash */ --bone-20: #2A2820; /* masthead bands */ /* ── CHAMPAGNE — the one accent ─────────────────────── * Used sparingly: a 1px rule, a chapter number, the * N in "NUMAEX" on special pages. Never fills. */ --champagne: #D4B078; --champagne-deep: #B8986A; --champagne-wash: #3A3120; /* ── FINISH SWATCHES — product finish reference only ── * Shown on finish-swatch cards in the printed guide. * Do NOT use as UI chrome. */ --finish-matt-black: #1F1F1F; --finish-ash-grey: #8A877F; --finish-space-grey: #4A4948; --finish-champagne-gold: #B89566; --finish-brush-gold: #A88149; --finish-satin-nickel: #C9C5BE; --finish-rose-gold: #C69E89; --finish-smoked-teak: #5C4436; --finish-walnut: #6B4A33; --finish-red-wood: #7B2F22; --finish-cedar-brown: #6E4A30; --finish-forest-green: #2E3B2F; --finish-dubai-gold: #9A7A3B; /* ── SEMANTIC COLOR TOKENS ──────────────────────────── */ --page-bg: var(--bone-00); --page-bg-inverse: var(--ink-100); --surface: var(--bone-05); --surface-nested: var(--bone-10); --surface-band: var(--bone-20); --fg-1: var(--ink-100); --fg-2: var(--ink-70); --fg-3: var(--ink-50); --fg-muted: var(--ink-30); --fg-on-inverse: var(--bone-00); --rule-hairline: var(--ink-15); --rule-strong: var(--ink-50); --border-subtle: var(--ink-08); --accent: var(--champagne); --accent-deep: var(--champagne-deep); --link: var(--ink-100); --link-hover: var(--champagne-deep); /* System / status (muted, never bright) */ --success: #7ACB91; --warning: #E3B848; --danger: #E38676; /* ── TYPEFACES ────────────────────────────────────── */ --font-display: 'Roboto', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-sans: 'Roboto', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-mono: 'Roboto Mono', 'SF Mono', 'IBM Plex Mono', Menlo, Consolas, monospace; /* ── TYPE SCALE — generous, print-informed ──────────── */ --fs-display: 64px; /* cover titles: "Project Guide" */ --fs-h1: 44px; /* system name: "LED Mirrors" */ --fs-h2: 32px; /* subtitle / pull quote */ --fs-h3: 22px; /* paragraph-rank heading */ --fs-lead: 18px; /* intro paragraph, italicised */ --fs-body: 15px; /* running body */ --fs-small: 13px; /* captions, metadata values */ --fs-micro: 11px; /* labels, page numbers */ --fs-nano: 9.5px; /* kerned masthead labels, footer chrome */ /* ── LETTER-SPACING — a signature device ────────────── * The brand voice is LETTER-SPACED CAPITALS for every * label, marker, rule and navigational hint. */ --ls-none: 0; --ls-body: 0.01em; --ls-label: 0.14em; /* "I N T H I S D O C U M E N T" */ --ls-marker: 0.32em; /* "— E S T. 1 9 3 0 —" */ --ls-ultra: 0.48em; /* letter-spacing markers w/ single chars */ /* ── LINE-HEIGHT ──────────────────────────────────── */ --lh-tight: 1.1; --lh-snug: 1.25; --lh-body: 1.55; --lh-loose: 1.75; /* ── SPACING — 4-based, print-generous ────────────── */ --sp-0: 0; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; /* ── RADII — crisp, not soft ──────────────────────── * Luxury print has no rounded corners. For the * CRM/admin UI we allow a bare minimum. */ --r-0: 0; --r-1: 2px; --r-2: 4px; --r-3: 8px; /* ── ELEVATION — flat print + near-flat UI ─────────── */ --sh-0: none; --sh-1: 0 1px 0 rgba(11,11,10,0.04); /* card on bone */ --sh-2: 0 2px 8px rgba(11,11,10,0.06), 0 0 0 1px var(--border-subtle); /* raised card */ --sh-3: 0 12px 32px rgba(11,11,10,0.08); /* menus / modals */ --sh-inset: inset 0 0 0 1px var(--ink-08); /* ── RULES / BORDERS ──────────────────────────────── */ --rule-width-hair: 0.5px; --rule-width: 1px; --rule-width-bold: 1.5px; /* ── MOTION — print is stillness; UI is restrained ─── */ --ease-quiet: cubic-bezier(.22, .61, .36, 1); /* default */ --ease-soft-close: cubic-bezier(.33, 1, .68, 1); /* doors do this */ --dur-1: 120ms; --dur-2: 240ms; --dur-3: 360ms; /* ── LAYOUT ───────────────────────────────────────── */ --measure: 64ch; /* ideal text measure */ --page-margin-y: var(--sp-9); --page-margin-x: var(--sp-8); } /* ─── BASE ELEMENTS ─────────────────────────────────── */ html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--page-bg); color: var(--fg-1); font-family: var(--font-sans); font-weight: 300; font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; } *, *::before, *::after { box-sizing: border-box; } /* ─── SEMANTIC TYPE ROLES ───────────────────────────── */ /* Display — serif, light, the hero of every page */ .nmx-display { font-family: var(--font-display); font-weight: 300; font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: -0.01em; color: var(--fg-1); } /* H1 — system name; "LED Mirrors", "Sliding Partitions" */ h1, .nmx-h1 { font-family: var(--font-display); font-weight: 300; font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -0.005em; margin: 0; color: var(--fg-1); } /* H2 — pull quote, subtitle */ h2, .nmx-h2 { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: 0; margin: 0; color: var(--fg-1); } /* H3 — WHAT MAKES IT / MATERIALS / FINISHES */ h3, .nmx-h3 { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-small); line-height: var(--lh-snug); letter-spacing: var(--ls-label); text-transform: uppercase; margin: 0; color: var(--fg-1); } /* Lead — italicised intro paragraph, serif */ .nmx-lead { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--fg-2); } /* Body */ p, .nmx-body { font-family: var(--font-sans); font-weight: 300; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-2); margin: 0 0 1em; text-wrap: pretty; } /* Label — the brand's signature device */ .nmx-label { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-nano); line-height: 1.4; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--fg-3); } /* Marker — kerned ultra-wide, bracketed with em-dashes */ .nmx-marker { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-nano); letter-spacing: var(--ls-marker); text-transform: uppercase; color: var(--fg-3); } .nmx-marker::before { content: "— "; } .nmx-marker::after { content: " —"; } /* Data / numeric — mono, for specs, sizes, quote refs */ .nmx-data, code, kbd, samp, pre { font-family: var(--font-mono); font-weight: 400; font-size: 0.95em; letter-spacing: 0; color: var(--fg-1); } /* Caption */ .nmx-caption { font-family: var(--font-sans); font-weight: 300; font-style: italic; font-size: var(--fs-small); color: var(--fg-3); line-height: var(--lh-body); } /* Quote — the "IN OUR WORDS" block */ blockquote, .nmx-quote { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--fg-1); margin: 0; padding: 0; text-wrap: balance; } blockquote::before, .nmx-quote::before { content: "\201C"; } /* Rule — hairline separator, often with centered marker */ hr, .nmx-rule { border: 0; border-top: var(--rule-width-hair) solid var(--rule-hairline); margin: var(--sp-5) 0; } .nmx-rule--strong { border-top-width: var(--rule-width); border-top-color: var(--rule-strong); } .nmx-rule--gold { border-top-color: var(--accent); } /* Link */ a { color: var(--link); text-decoration: underline; text-decoration-thickness: 0.5px; text-underline-offset: 3px; transition: color var(--dur-1) var(--ease-quiet); } a:hover { color: var(--link-hover); } /* Small caps helper */ .nmx-smallcaps { font-variant: all-small-caps; letter-spacing: var(--ls-label); } /* Utility: kerned letter array — for hand-spaced markers */ .nmx-kerned { letter-spacing: var(--ls-marker); text-transform: uppercase; } .nmx-kerned-ultra { letter-spacing: var(--ls-ultra); text-transform: uppercase; }