/** * Equal Experts Association — Lexend for freelancer dashboard. * Scoped to [theme-color="ee-association"] on . * Base type size: 16px (html root) so rem-based UI scales from that. */ @font-face { font-family: "Lexend"; src: url("../font-lexend/Lexend-Thin.ttf") format("truetype"); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: "Lexend"; src: url("../font-lexend/Lexend-ExtraLight.ttf") format("truetype"); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: "Lexend"; src: url("../font-lexend/Lexend-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Lexend"; src: url("../font-lexend/Lexend-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Lexend"; src: url("../font-lexend/Lexend-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Lexend"; src: url("../font-lexend/Lexend-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Lexend"; src: url("../font-lexend/Lexend-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Lexend"; src: url("../font-lexend/Lexend-ExtraBold.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: "Lexend"; src: url("../font-lexend/Lexend-Black.ttf") format("truetype"); font-weight: 900; font-style: normal; font-display: swap; } /* Prefer variable font when supported (covers all weights). */ @supports (font-variation-settings: normal) { @font-face { font-family: "Lexend"; src: url("../font-lexend/Lexend-VariableFont_wght.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; } } /* Rem root — Bootstrap/app rem sizes scale from 16px */ html:has(body[theme-color="ee-association"]) { font-size: 16px; } [theme-color="ee-association"] { --bs-font-sans-serif: "Lexend", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --bs-font-sans: "Lexend", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --bs-body-font-family: "Lexend", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --bs-body-font-size: 1rem; /* 16px */ --bs-body-font-weight: 300; --bs-headings-font-weight: 500; /* Type scale tokens (relative to 16px root) */ --ee-fs-xs: 0.75rem; /* 12px */ --ee-fs-sm: 0.875rem; /* 14px */ --ee-fs-base: 1rem; /* 16px */ --ee-fs-md: 1.125rem; /* 18px */ --ee-fs-lg: 1.25rem; /* 20px */ --ee-fs-xl: 1.5rem; /* 24px */ --ee-fs-2xl: 1.75rem; /* 28px */ --ee-fs-3xl: 2rem; /* 32px */ --ee-fs-4xl: 2.25rem; /* 36px */ font-family: "Lexend", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important; font-size: var(--ee-fs-base); font-weight: 300; line-height: 1.5; } /* Headings, copy, UI chrome — inherit Lexend via theme tokens / explicit family */ [theme-color="ee-association"] h1, [theme-color="ee-association"] h2, [theme-color="ee-association"] h3, [theme-color="ee-association"] h4, [theme-color="ee-association"] h5, [theme-color="ee-association"] h6, [theme-color="ee-association"] .h1, [theme-color="ee-association"] .h2, [theme-color="ee-association"] .h3, [theme-color="ee-association"] .h4, [theme-color="ee-association"] .h5, [theme-color="ee-association"] .h6, [theme-color="ee-association"] .page-title, [theme-color="ee-association"] .display-1, [theme-color="ee-association"] .display-2, [theme-color="ee-association"] .display-3, [theme-color="ee-association"] .display-4, [theme-color="ee-association"] .display-5, [theme-color="ee-association"] .display-6, [theme-color="ee-association"] p, [theme-color="ee-association"] span:not([class^="bx"]):not([class*=" bx"]):not([class^="ri-"]):not([class*=" ri-"]):not([class^="fa"]):not([class*=" fa-"]), [theme-color="ee-association"] a, [theme-color="ee-association"] li, [theme-color="ee-association"] label, [theme-color="ee-association"] small, [theme-color="ee-association"] em, [theme-color="ee-association"] td, [theme-color="ee-association"] th, [theme-color="ee-association"] dt, [theme-color="ee-association"] dd, [theme-color="ee-association"] input, [theme-color="ee-association"] select, [theme-color="ee-association"] textarea, [theme-color="ee-association"] .form-control, [theme-color="ee-association"] .form-select, [theme-color="ee-association"] .form-label, [theme-color="ee-association"] .nav-link, [theme-color="ee-association"] .dropdown-item, [theme-color="ee-association"] .badge, [theme-color="ee-association"] .card, [theme-color="ee-association"] .card-title, [theme-color="ee-association"] .card-text, [theme-color="ee-association"] .modal, [theme-color="ee-association"] .offcanvas, [theme-color="ee-association"] .table, [theme-color="ee-association"] .breadcrumb, [theme-color="ee-association"] .list-group-item { font-family: "Lexend", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important; } /* Buttons keep Lexend for labels, but do not force it onto icon children */ [theme-color="ee-association"] button, [theme-color="ee-association"] .btn { font-family: "Lexend", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* Body / UI copy — inherit 16px from body; do not override .fs-* utilities */ [theme-color="ee-association"] p:not([class*="fs-"]), [theme-color="ee-association"] li, [theme-color="ee-association"] label, [theme-color="ee-association"] td, [theme-color="ee-association"] dd, [theme-color="ee-association"] .form-label, [theme-color="ee-association"] .nav-link, [theme-color="ee-association"] .dropdown-item, [theme-color="ee-association"] .card-text:not([class*="fs-"]), [theme-color="ee-association"] .breadcrumb, [theme-color="ee-association"] .list-group-item { font-weight: 300; } [theme-color="ee-association"] .form-control:not(.form-control-sm):not(.form-control-lg), [theme-color="ee-association"] .form-select:not(.form-select-sm):not(.form-select-lg) { font-size: var(--ee-fs-base); font-weight: 300; } [theme-color="ee-association"] .btn:not(.btn-sm):not(.btn-lg), [theme-color="ee-association"] button:not(.btn-sm):not(.btn-lg) { font-size: var(--ee-fs-base); font-weight: 400; } [theme-color="ee-association"] .btn-sm { font-size: var(--ee-fs-sm); } [theme-color="ee-association"] .btn-lg { font-size: var(--ee-fs-lg); } [theme-color="ee-association"] small, [theme-color="ee-association"] .small, [theme-color="ee-association"] .form-text, [theme-color="ee-association"] .badge { font-size: var(--ee-fs-sm); } /* Heading scale from 16px base */ [theme-color="ee-association"] h1, [theme-color="ee-association"] .h1, [theme-color="ee-association"] .page-title { font-size: var(--ee-fs-3xl); font-weight: 500 !important; line-height: 1.25; } [theme-color="ee-association"] h2, [theme-color="ee-association"] .h2 { font-size: var(--ee-fs-2xl); font-weight: 500 !important; line-height: 1.3; } [theme-color="ee-association"] h3, [theme-color="ee-association"] .h3, [theme-color="ee-association"] .card-title { font-size: var(--ee-fs-xl); font-weight: 500 !important; line-height: 1.35; } [theme-color="ee-association"] h4, [theme-color="ee-association"] .h4 { font-size: var(--ee-fs-lg); font-weight: 400 !important; line-height: 1.4; } [theme-color="ee-association"] h5, [theme-color="ee-association"] .h5 { font-size: var(--ee-fs-md); font-weight: 400 !important; line-height: 1.4; } [theme-color="ee-association"] h6, [theme-color="ee-association"] .h6 { font-size: var(--ee-fs-base); font-weight: 400 !important; line-height: 1.45; } [theme-color="ee-association"] .display-1 { font-size: 3.2rem; font-weight: 500 !important; } [theme-color="ee-association"] .display-2 { font-size: 2.8rem; font-weight: 500 !important; } [theme-color="ee-association"] .display-3 { font-size: 2.4rem; font-weight: 500 !important; } [theme-color="ee-association"] .display-4 { font-size: var(--ee-fs-4xl); font-weight: 500 !important; } [theme-color="ee-association"] .display-5 { font-size: var(--ee-fs-3xl); font-weight: 500 !important; } [theme-color="ee-association"] .display-6 { font-size: var(--ee-fs-2xl); font-weight: 500 !important; } [theme-color="ee-association"] strong, [theme-color="ee-association"] b, [theme-color="ee-association"] .fw-bold, [theme-color="ee-association"] .fw-bolder { font-weight: 500 !important; } [theme-color="ee-association"] .fw-semi-bold, [theme-color="ee-association"] .fw-semibold, [theme-color="ee-association"] .fw-medium { font-weight: 400 !important; } [theme-color="ee-association"] th { font-weight: 500; } /* Keep icon fonts intact (hamburger uses Boxicons: .bx.bx-menu) */ [theme-color="ee-association"] .bx, [theme-color="ee-association"] [class^="bx"], [theme-color="ee-association"] [class*=" bx"], [theme-color="ee-association"] i.bx, [theme-color="ee-association"] .navbar-toggler .bx, [theme-color="ee-association"] .navbar-toggler i { font-family: "boxicons" !important; font-weight: normal !important; font-style: normal !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } [theme-color="ee-association"] [class^="ri-"], [theme-color="ee-association"] [class*=" ri-"], [theme-color="ee-association"] .ri { font-family: remixicon !important; font-weight: normal !important; } [theme-color="ee-association"] .fa, [theme-color="ee-association"] .fas, [theme-color="ee-association"] .far, [theme-color="ee-association"] .fal, [theme-color="ee-association"] .fab, [theme-color="ee-association"] [class^="fa-"], [theme-color="ee-association"] [class*=" fa-"] { /* FA4 uses FontAwesome; FA5/6 use the named families — keep all so icons render on mixed pages */ font-family: FontAwesome, "Font Awesome 5 Free", "Font Awesome 5 Brands", "Font Awesome 6 Free", "Font Awesome 6 Brands" !important; font-weight: normal !important; font-style: normal !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }