/* ========================================================================== MECAS Techsolutions - Design Tokens -------------------------------------------------------------------------- Every value here is derived from design.pdf. Colours were pixel-sampled from the mockups in design/reference/; type and spacing were measured proportionally. Nothing in this file is invented. Source of truth: docs/01-design-system.md Do not add a token here without a reference in the design. ========================================================================== */ :root { /* --------------------------------------------------------------------- BRAND - from the supplied logo.png (decision D-007) Used for the mark itself. The site chrome uses the navy/blue scale below. --------------------------------------------------------------------- */ --brand-blue: #1478D4; --brand-blue-deep: #0B3FA6; --brand-navy-ink: #152B5E; --brand-green: #5A9E1E; --brand-red: #E8281B; --brand-slate: #3C444F; /* --------------------------------------------------------------------- NAVY SCALE - dark hero grounds, footer, dark bands Sampled: hero left edge #000E25, hero mid #00102A, footer #002047 --------------------------------------------------------------------- */ --navy-900: #000E25; /* hero gradient start, deepest */ --navy-800: #00102A; --navy-700: #002047; /* footer, dark closing strips */ --navy-600: #0E2749; --navy-500: #1B3A63; /* --------------------------------------------------------------------- BLUE SCALE - primary action colour Sampled: primary button #0044A3, services CTA bar #003680, accent #439BE5 --------------------------------------------------------------------- */ --blue-800: #003680; /* full-width CTA bar */ --blue-700: #0044A3; /* primary button fill */ --blue-600: #0F52B8; --blue-500: #1A6FD4; --blue-400: #439BE5; /* accent rules, dots, hero sub-line */ --blue-200: #9CC8F0; --blue-100: #DFEEFF; /* icon circle fill */ --blue-050: #E7F1FD; /* pale panel, CTA band */ /* Footer only. The column headings on mockup 09 are a distinctly greener cyan than the accent blue used everywhere else. Sampled #48C4E4. */ --cyan-400: #48C4E4; /* --------------------------------------------------------------------- NEUTRALS Sampled: page white #FEFEFE, alt section #F6F9FE, card #FDFDFD --------------------------------------------------------------------- */ --white: #FFFFFF; --surface: #FEFEFE; /* page ground */ --surface-raised: #FDFDFD; /* cards sitting on the alt ground */ --surface-alt: #F6F9FE; /* alternating section ground */ --border: #E3E8F0; --border-strong: #C9D3E0; --ink: #1A1F26; /* body copy on light */ --ink-heading: #0B2A5B; /* navy headings on light */ --ink-muted: #5A6B7F; /* captions, secondary copy */ --ink-inverse: #FFFFFF; /* copy on navy */ --ink-inverse-muted: #C4D2E4; /* secondary copy on navy */ --ink-footer-link: #C1D7F5; /* footer list links, sampled */ --rule-on-dark: rgba(255, 255, 255, 0.13); /* footer dividers */ /* --------------------------------------------------------------------- SEMANTIC ROLES Point components at these, not at the raw scales above. --------------------------------------------------------------------- */ --color-accent: var(--blue-400); --color-action: var(--blue-700); --color-action-hover: var(--blue-800); --color-rule: var(--blue-400); /* the short blue heading rule */ --color-icon: var(--blue-700); --color-icon-bg: var(--blue-100); /* Form state colours. Not present in the mockups, so these are the one INFERRED group in this file - chosen to sit inside the palette. */ --color-error: #C0392B; --color-success: #1E7A4B; /* Hero gradient - the signature navy panel. Sampled left-to-right across mockup heroes. */ --gradient-hero: linear-gradient( 100deg, var(--navy-900) 0%, var(--navy-800) 42%, var(--navy-600) 100% ); /* --------------------------------------------------------------------- TYPOGRAPHY The mockups are raster, so the real families cannot be read from the file. These stacks are the approved match (Q5) and are swapped in one place if MECAS supplies licensed brand fonts. --------------------------------------------------------------------- */ --font-heading: "Archivo", "Helvetica Neue", Arial, sans-serif; --font-body: "Source Sans 3", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; /* Type scale, measured from the mockups at a 1440px canvas. Sizes fluid between the laptop and large-desktop breakpoints. */ --fs-display: clamp(2.25rem, 1.65rem + 2.10vw, 3.50rem); /* 36 -> 56, measured from the Home hero */ /* 36 -> 64. Measured across mockups 02, 04, 06 and 07: the uppercase page title has a 48-50px cap height, which is a ~66px face. 56px was a guess and ran a full size small. */ --fs-title: clamp(2.25rem, 1.40rem + 2.90vw, 4.00rem); --fs-h2: clamp(1.60rem, 1.28rem + 1.10vw, 2.13rem); /* 26 -> 34 section headings */ --fs-h3: clamp(1.25rem, 1.10rem + 0.50vw, 1.38rem); /* 20 -> 22 card headings */ --fs-h4: clamp(1.06rem, 1.00rem + 0.25vw, 1.13rem); /* 17 -> 18 */ --fs-lead: clamp(1.06rem, 1.00rem + 0.25vw, 1.19rem); /* 17 -> 19 hero intro */ --fs-body: 1.0625rem; /* 17 */ --fs-small: 0.9375rem; /* 15 */ --fs-caption: 0.8125rem; /* 13 */ --fs-button: 0.875rem; /* 14 */ --fs-nav: 0.875rem; /* 14, mockup 05: eight items (D-046) */ --lh-display: 1.05; --lh-heading: 1.20; --lh-snug: 1.40; --lh-body: 1.62; --ls-display: -0.01em; --ls-heading: 0em; --ls-button: 0.045em; /* uppercase labels are tracked out */ --ls-nav: 0.03em; /* --------------------------------------------------------------------- SPACING - 4px base --------------------------------------------------------------------- */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ --space-9: 5rem; /* 80 */ --space-10: 6rem; /* 96 */ /* Section rhythm, compressing on small screens */ --section-y: clamp(3rem, 1.75rem + 4.2vw, 6rem); /* 48 -> 96 */ --section-y-sm: clamp(2rem, 1.40rem + 2.1vw, 3.5rem); /* 32 -> 56 */ /* --------------------------------------------------------------------- LAYOUT --------------------------------------------------------------------- */ --container-max: 1200px; --container-wide: 1360px; /* full-bleed hero inner alignment */ --gutter: clamp(1rem, 0.65rem + 1.2vw, 1.5rem); /* 16 -> 24 */ --grid-gap: clamp(1rem, 0.65rem + 1.2vw, 2rem); /* 16 -> 32 */ /* Measured from the mockups at a 1440 canvas: 120px on Home, 112px on Products. The lockup is two lines, which is why it is this tall. */ --header-h: 112px; --header-h-mobile: 72px; /* Eight items since D-046. Mockup 05 spaces them ~34px apart at 1440; the gap narrows linearly to 16px at the 1100 collapse so the row always fits. */ --nav-gap: clamp(1rem, -3.78rem + 6.54vw, 2.125rem); /* 16 -> 34 */ /* --------------------------------------------------------------------- SHAPE - deliberately low radius. The design uses rectangles, not pills. --------------------------------------------------------------------- */ --radius-sm: 2px; --radius: 4px; /* buttons, inputs */ --radius-md: 6px; /* cards, panels */ --radius-lg: 8px; /* large floating panels */ --radius-round: 50%; /* icon badges only */ --border-w: 1px; --rule-w: 4px; /* the short blue heading rule */ --rule-len: 56px; /* --------------------------------------------------------------------- ELEVATION - sparse and soft, per the reference --------------------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(11, 42, 91, 0.06); --shadow-card: 0 2px 10px rgba(11, 42, 91, 0.07); --shadow-float:0 12px 34px rgba(11, 42, 91, 0.13); /* home feature strip */ /* --------------------------------------------------------------------- MOTION - restrained. Respect prefers-reduced-motion in base.css. --------------------------------------------------------------------- */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --duration-fast: 140ms; --duration: 220ms; --focus-ring: 0 0 0 3px rgba(67, 155, 229, 0.55); --z-header: 1000; --z-nav-panel: 1100; --z-modal: 1200; } /* ========================================================================== CONTACT PAGE SCOPE (decision D-009) Mockup 9 uses teal where the rest of the site uses royal blue. That is reproduced as drawn, scoped to this class so it cannot leak site-wide. Sampled: submit button gradient #01586B -> #016B7B. Apply `class="theme-contact"` to
on contact.html only, so the shared header and footer keep the site colours (D-052). ========================================================================== */ .theme-contact { --teal-800: #014655; --teal-700: #01586B; --teal-600: #016B7B; --teal-100: #D9EEF1; --color-action: var(--teal-700); --color-action-hover: var(--teal-800); --color-accent: var(--teal-600); --color-rule: var(--teal-600); --color-icon: var(--teal-700); --gradient-action: linear-gradient( 90deg, var(--teal-700) 0%, var(--teal-600) 100% ); }