/* ============================================================ SENTRA — Design System Foundations Colors + Typography tokens ------------------------------------------------------------ Brand: Dubai-HQ trade, procurement & logistics company connecting GCC and Central Asia. Voice: measured, corporate, "engineered precision". Light canvas base, deep-navy hero bands, single steel-blue action color, chrome "horizon" accent echoing the logo sheen. Typeface substitute: Saira (nearest Google match to the wide, geometric SENTRA wordmark). Logo face is custom. ============================================================ */ /* ---- Webfont (Google Fonts substitute) ---- Display: Archivo Expanded — wide, engineered, premium; echoes the SENTRA wordmark's wide cut-corner proportions. Body: Archivo — the neutral grotesque companion. */ @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;600;700&family=Archivo+Expanded:wght@500;600;700&display=swap'); :root { /* ============ COLORS ============ */ /* Brand & Action — steel-blue is the single primary action color */ --primary: #155EAB; /* Corridor Blue — all primary CTAs, active links */ --primary-active: #11497F; /* pressed state */ --primary-soft: #e7f0fa; /* tinted fill behind selected/info states */ /* Brand navy (drawn from the logo) */ --brand-navy: #0E2A47; /* the SENTRA navy */ --brand-navy-deep: #081b30; /* Steel / chrome — echoes the logo's metallic horizon band. Used for the steel-line divider + utility accents, never as a CTA fill. */ --steel-1: #d7dfe8; /* light chrome */ --steel-2: #9aabbd; /* mid steel */ --steel-3: #54677d; /* deep steel */ /* Surfaces */ --canvas: #ffffff; /* default page surface */ --surface-soft: #f4f6f9; /* footer + sub-nav bands (cool grey) */ --surface-card: #f8fafc; /* plate behind a card photo */ --surface-strong: #e7ecf2; /* heavier grey section divider */ --surface-dark: #0E2A47; /* navy hero bands + large dark CTAs */ --surface-dark-elevated: #15355a;/* nested cards on the dark hero */ /* Hairlines */ --hairline: #e3e8ee; /* 1px dividers, input outline */ --hairline-strong: #c6ceda; /* emphasized outline, secondary button */ /* Text */ --ink: #14263d; /* display + primary text (not pure black) */ --body: #3c4654; /* default running text */ --body-strong: #16202e; /* lead / emphasized paragraphs */ --muted: #6a7585; /* footer links, breadcrumbs, captions */ --muted-soft: #9aa4b2; /* disabled, fine-print legal */ --on-primary: #ffffff; /* text on a blue button */ --on-dark: #ffffff; /* text on a navy band */ --on-dark-soft: #b6c2d2; /* secondary text on navy bands */ /* Semantic */ --success: #1f9d57; --warning: #d98a0b; --error: #cf3232; /* ============ TYPOGRAPHY ============ */ --font-display: 'Archivo Expanded', 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-body: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* Weights — heavy 700 display vs light 300 body is the signature. 500 is reserved for mid-weight UI labels only. */ --w-light: 300; --w-regular: 400; --w-medium: 500; --w-semibold:600; --w-bold: 700; /* Type scale (px) */ --display-xl: 64px; /* hero h1 */ --display-lg: 48px; /* section heads */ --display-md: 32px; /* sub-section heads */ --display-sm: 24px; /* CTA-band headlines, spec values */ --title-lg: 20px; /* card group titles */ --title-md: 18px; /* card title, intro paragraphs */ --title-sm: 16px; /* list label, dense card title */ --body-md: 16px; /* default body (Light 300) */ --body-sm: 14px; /* footer body, fine-print */ --caption: 12px; /* meta, photo captions */ --label: 13px; /* UPPERCASE inline links / tabs */ --button: 14px; /* CTA label */ --nav-link: 14px; /* top-nav items */ /* ============ SPACING (8px base) ============ */ --space-xxs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; /* card internal padding */ --space-xl: 32px; --space-xxl: 48px; --space-section: 80px; /* major editorial band rhythm */ /* ============ RADIUS — rectangular is the brand ============ */ --radius-none: 0px; /* buttons, cards, inputs, chips */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; /* modals only, rare */ --radius-full: 9999px; /* circular icon buttons, avatars only */ /* ============ LAYOUT ============ */ --container-max: 1440px; } /* ============================================================ SEMANTIC TYPE CLASSES ============================================================ */ .t-display-xl { font-family: var(--font-display); font-weight: var(--w-bold); font-size: var(--display-xl); line-height: 1.05; letter-spacing: 0; color: var(--ink); } .t-display-lg { font-family: var(--font-display); font-weight: var(--w-bold); font-size: var(--display-lg); line-height: 1.1; letter-spacing: 0; color: var(--ink); } .t-display-md { font-family: var(--font-display); font-weight: var(--w-bold); font-size: var(--display-md); line-height: 1.15; letter-spacing: 0; color: var(--ink); } .t-display-sm { font-family: var(--font-display); font-weight: var(--w-bold); font-size: var(--display-sm); line-height: 1.25; letter-spacing: 0; color: var(--ink); } .t-title-lg { font-family: var(--font-body); font-weight: var(--w-bold); font-size: var(--title-lg); line-height: 1.3; color: var(--ink); } .t-title-md { font-family: var(--font-body); font-weight: var(--w-bold); font-size: var(--title-md); line-height: 1.4; color: var(--ink); } .t-title-sm { font-family: var(--font-body); font-weight: var(--w-bold); font-size: var(--title-sm); line-height: 1.4; color: var(--ink); } .t-body-md { font-family: var(--font-body); font-weight: var(--w-light); font-size: var(--body-md); line-height: 1.55; color: var(--body); } .t-body-sm { font-family: var(--font-body); font-weight: var(--w-light); font-size: var(--body-sm); line-height: 1.55; color: var(--body); } .t-caption { font-family: var(--font-body); font-weight: var(--w-regular); font-size: var(--caption); line-height: 1.4; letter-spacing: 0.5px; color: var(--muted); } .t-label { font-family: var(--font-body); font-weight: var(--w-bold); font-size: var(--label); line-height: 1.3; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink); } .t-nav-link { font-family: var(--font-body); font-weight: var(--w-regular); font-size: var(--nav-link); line-height: 1.4; letter-spacing: 0.3px; color: var(--ink); } /* ============================================================ STEEL-LINE DIVIDER — the SENTRA signature accent. A thin metallic gradient line echoing the logo's chrome horizon band. Use as a section divider or under a kicker. Accent / divider role only — never a CTA fill. ============================================================ */ .steel-divider { height: 3px; border: 0; background: linear-gradient(90deg, var(--steel-3) 0%, var(--steel-1) 45%, #ffffff 50%, var(--steel-1) 55%, var(--steel-3) 100%); } .steel-divider--short { width: 64px; }