@charset "UTF-8"; /* UENI Design System — Colors & Type * Source: main-web-app-next/src/shared/theme/{colors.js,fonts.js,textStyles.js,global.js} * and main-web-app-next/src/@packages/hub_v2/src/theme/mui.ts */ /* ============================================================ * Fonts (self-hosted, copied from src/static/fonts) * ============================================================ */ @font-face { font-family: "Lato"; src: url("./fonts/Lato-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Lato"; src: url("./fonts/Lato-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Lato"; src: url("./fonts/Lato-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* Codebase calls this family "MontserratUENI" — kept as an alias. * The 600/800/bold weights all resolve to Montserrat-Black in production, * which is why display type reads very heavy. */ @font-face { font-family: "MontserratUENI"; src: url("./fonts/Montserrat-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "MontserratUENI"; src: url("./fonts/Montserrat-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "MontserratUENI"; src: url("./fonts/Montserrat-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "MontserratUENI"; src: url("./fonts/Montserrat-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "MontserratUENI"; src: url("./fonts/Montserrat-Black.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: "MontserratUENI"; src: url("./fonts/Montserrat-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } /* Icon font used by .uenicon-* class names. See assets/fontello-config.json * for the full glyph map. */ @font-face { font-family: "UENIcons"; src: url("./fonts/uenicons.ttf") format("truetype"), url("./fonts/uenicons.woff2") format("woff2"); font-weight: normal; font-style: normal; font-display: block; } /* Base class — apply icon-font styling */ .uenicon { font-family: "UENIcons" !important; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; speak: none; display: inline-block; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Force icon font on pseudo — inheritance gets beaten by UA italic styling in some browsers */ [class^="uenicon-"]::before, [class*=" uenicon-"]::before { font-family: "UENIcons" !important; font-style: normal !important; font-weight: normal !important; speak: none; display: inline-block; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1; } /* Glyph codepoints — extracted from assets/fontello-config.json. * Use as etc. */ .uenicon-account::before { content: "\f2fe"; } .uenicon-back::before { content: "\f077"; } .uenicon-forward::before { content: "\f078"; } .uenicon-building::before { content: "\f0ad"; } .uenicon-call::before { content: "\e813"; } .uenicon-credit-card::before { content: "\e814"; } .uenicon-profile::before { content: "\f303"; } .uenicon-x::before { content: "\e80e"; } .uenicon-clock::before { content: "\e817"; } .uenicon-email-outline::before { content: "\e808"; } .uenicon-email::before { content: "\f0e0"; } .uenicon-facebook::before { content: "\f09a"; } .uenicon-whatsapp::before { content: "\f232"; } .uenicon-file::before { content: "\f0f6"; } .uenicon-frown::before { content: "\f119"; } .uenicon-invalid::before { content: "\f12a"; } .uenicon-location::before { content: "\e80b"; } .uenicon-menu::before { content: "\f0c9"; } .uenicon-business-card-1::before { content: "\f2fc"; } .uenicon-send::before { content: "\f1d8"; } .uenicon-send-outline::before { content: "\f1d9"; } .uenicon-star-empty::before { content: "\e811"; } .uenicon-star-full::before { content: "\e810"; } .uenicon-star-half::before { content: "\f123"; } .uenicon-trash::before { content: "\e80d"; } .uenicon-valid::before { content: "\e80f"; } .uenicon-website::before { content: "\e815"; } .uenicon-down::before { content: "\e803"; } .uenicon-left::before { content: "\e800"; } .uenicon-up::before { content: "\e802"; } .uenicon-right::before { content: "\e801"; } .uenicon-instagram::before { content: "\f16d"; } .uenicon-plus::before { content: "\e809"; } .uenicon-plus-circled::before { content: "\e818"; } .uenicon-x-thin::before { content: "\e80a"; } .uenicon-twitter::before { content: "\f099"; } .uenicon-arrow-down::before { content: "\e804"; } .uenicon-arrow-left::before { content: "\e805"; } .uenicon-arrow-right::before { content: "\e807"; } .uenicon-arrow-up::before { content: "\e806"; } .uenicon-desktop::before { content: "\f108"; } .uenicon-facebook-filled::before { content: "\f230"; } .uenicon-bell::before { content: "\e80c"; } .uenicon-edit::before { content: "\e812"; } .uenicon-copy::before { content: "\e816"; } .uenicon-search::before { content: "\e819"; } .uenicon-zoom-in::before { content: "\e820"; } .uenicon-eye::before { content: "\e7ff"; } .uenicon-login::before { content: "\e81a"; } .uenicon-smile::before { content: "\f118"; } .uenicon-mouse-pointer::before { content: "\f245"; } .uenicon-megaphone::before { content: "\e81d"; } .uenicon-down-1::before { content: "\f0d7"; } .uenicon-up-1::before { content: "\f0d8"; } .uenicon-calendar-empty::before { content: "\f133"; } .uenicon-angle-left::before { content: "\f104"; } .uenicon-angle-right::before { content: "\f105"; } .uenicon-angle-up::before { content: "\f106"; } .uenicon-angle-down::before { content: "\f107"; } .uenicon-home::before { content: "\e81e"; } .uenicon-google::before { content: "\f1a0"; } .uenicon-cog-alt::before { content: "\e822"; } .uenicon-chat::before { content: "\e825"; } .uenicon-dollar::before { content: "\f155"; } .uenicon-basket::before { content: "\e828"; } .uenicon-linkedin::before { content: "\f0e1"; } .uenicon-linkedin-squared::before { content: "\f30c"; } .uenicon-picture::before { content: "\e81b"; } .uenicon-eye-off::before { content: "\e81c"; } .uenicon-youtube-play::before { content: "\f16a"; } /* ============================================================ * Design tokens * ============================================================ */ :root { /* -------- Font families -------- */ --font-body: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-display: "MontserratUENI", "Montserrat", -apple-system, sans-serif; --font-icon: "UENIcons"; /* -------- Brand colour -------- * * UENI's single brand accent is a warm orange ("secondary" in code). * Historical palettes (purple / blue / teal) also live in the codebase * but the current product surfaces the orange everywhere CTAs appear. */ --brand-orange: #FF4A00; /* button-secondary / primary CTA */ --brand-orange-hover: #CE3D02; /* button-secondary-hover (press/hover) */ --brand-orange-soft: #FF6900; /* alt hover used in colors.js */ --brand-connect: #FF933A; /* "connect" orange (inline links) */ /* -------- Neutrals (the workhorses) -------- */ --ink: #000000; --ink-1: #333333; /* body text / primary dark */ --ink-2: #454545; /* "gray" */ --ink-3: #4A4A4A; /* descText */ --ink-placeholder: #555555; --muted-1: #666666; /* menuGray */ --muted-2: #6C6C6C; /* greyDarkest */ --muted-3: #727272; /* fadedText */ --grey-dark: #999999; --grey-mid: #ADADAD; /* greyDarker */ --grey: #C2C2C2; --grey-light: #D6D6D6; --grey-lighter: #EAEAEA; --grey-lightest: #F5F5F5; /* sticky bg, page tint */ --line: #E4E4E4; /* colorBorder */ --line-soft: #EEEEEE; --line-strong: #C0C0C0; --input-border: #C6C6C6; --surface: #FFFFFF; --surface-faint: #FCFCFC; /* lightBackground */ --surface-off: #FAFAFA; /* offWhite — main app bg */ --surface-clear: #FBFBFB; --surface-search: #F9F9F9; --surface-beige: #F5F0ED; /* marketing warm tint */ /* -------- Semantic -------- */ --success: #4BD762; /* input valid */ --success-soft: #24C49E; /* tertiary / teal */ --success-switch: #0FEDB8; /* greenLight / switchOn */ --error: #FF1B1B; --error-2: #FF3B2F; /* input error */ --warning: #FFE5BF; /* progress */ --star: #FDC482; --info: #15B2F7; /* background2 */ /* -------- Legacy / marketing palette (seen in older pages) -------- */ --purple: #4600A5; --purple-light: #EBE5F5; --purple-dark: #24054F; --blue-dark: #240A4E; /* blueDarkest */ --blue-deep: #3D049B; /* "blue" */ --blue-link: #1A0DAB; --blue-text: #0D3973; --default-category: #F71D61; /* magenta category chip */ /* -------- Shadows -------- * * The two signatures that recur: a very soft warm card-shadow * (tiles, section cards) and a tighter header drop-shadow (sticky nav). */ --shadow-card: 0 3px 9px 0 rgba(227, 222, 214, 0.5); --shadow-nav-sm: 0 5px 12px 0 rgba(0, 0, 0, 0.16); --shadow-nav-md: 0 11px 14px 0 rgba(0, 0, 0, 0.09); --shadow-sticky: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12); /* -------- Radii -------- */ --radius-xs: 2px; --radius-sm: 4px; /* inputs, small cards */ --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 50px; /* hub_v2 primary CTA */ --radius-full: 999em; /* -------- Spacing (space scale from theme.js: 0…10rem) -------- */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ /* -------- Breakpoints (hub_v2/theme/breakpoints.ts) -------- */ --bp-xs: 576px; --bp-sm: 768px; --bp-md: 992px; --bp-lg: 1200px; --bp-xl: 1280px; --bp-xxl: 1440px; } /* ============================================================ * Semantic base styles (apply with the tag or a utility class). * * Display (h1–h5) uses MontserratUENI — very bold, tight letter-spacing * at large sizes. Body uses Lato Light (300) for long-form copy, * Regular for UI labels. Sizes follow textStyles.js. * ============================================================ */ html, body { margin: 0; font-family: var(--font-body); font-weight: 400; color: var(--ink-1); background: var(--surface); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, p { margin: 0; } h1, .h1 { font-family: var(--font-display); font-weight: 800; font-size: 46px; line-height: 54px; letter-spacing: -0.26px; color: var(--ink-1); } h2, .h2 { font-family: var(--font-display); font-weight: 800; font-size: 32px; line-height: 40px; letter-spacing: 0.04rem; } h3, .h3 { font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 32px; } h4, .h4 { font-family: var(--font-display); font-weight: 500; font-size: 18px; line-height: 26px; } h5, .h5 { font-family: var(--font-display); font-weight: 500; font-size: 16px; line-height: 24px; } p, .body { font-family: var(--font-body); font-weight: 300; /* Lato Light — the long-form default */ font-size: 18px; line-height: 26px; } .body-md { font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 22px; } .body-sm, small { font-family: var(--font-body); font-weight: 400; font-size: 12px; line-height: 20px; } /* Form / hub-v2 controls use Montserrat at tight sizes */ .label, .ui-label { font-family: var(--font-display); font-weight: 500; font-size: 12px; line-height: 16px; color: var(--input-border); /* matches MUI form label default */ letter-spacing: 0.01rem; } .eyebrow { font-family: var(--font-display); font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-orange); } code, .mono { font-family: "SFMono-Regular", Menlo, Consolas, monospace; font-size: 13px; } a { color: inherit; text-decoration: none; cursor: pointer; } a.link { color: var(--brand-orange); text-decoration: underline; text-underline-offset: 2px; } a.link:hover { color: var(--brand-orange-hover); } /* Icon-font hook — use as */ .uenicon::before { display: inline-block; font-family: var(--font-icon); font-style: normal; font-weight: normal; line-height: 1; text-rendering: auto; text-transform: none; speak: none; } @media (max-width: 768px) { h1, .h1 { font-size: 32px; line-height: 40px; } h2, .h2 { font-size: 24px; line-height: 32px; } h3, .h3 { font-size: 20px; line-height: 28px; } h4, .h4 { font-size: 16px; line-height: 24px; } p, .body { font-size: 16px; line-height: 24px; } .body-md { font-size: 12px; line-height: 20px; } }