/* * Orange Elite admin typography * A balanced, accessible type scale for daily business use. * * Screen UI: * - body text: 16px * - controls and table content: 15px * - supporting text: never below 14px * * Mini-program previews, QR artwork and print output are intentionally exempt. */ :root { --orange-ui-font: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans CJK SC", "Helvetica Neue", Arial, sans-serif; --orange-display-font: var(--orange-ui-font); --orange-type-body: max(16px, 1rem); --orange-type-control: max(15px, .9375rem); --orange-type-table: max(15px, .9375rem); --orange-type-caption: max(14px, .875rem); --orange-type-h1: 1.625rem; --orange-type-h2: 1.375rem; --orange-type-h3: 1.125rem; --orange-type-h4: 1rem; /* Backward-compatible tokens used by older feature modules. */ --orange-base-size: var(--orange-type-body); --orange-small-size: var(--orange-type-caption); /* Element Plus typography tokens. */ --el-font-family: var(--orange-ui-font); --el-font-size-extra-small: 14px; --el-font-size-small: 14px; --el-font-size-base: 15px; --el-font-size-medium: 16px; --el-font-size-large: 18px; --el-font-size-extra-large: 20px; --el-font-weight-primary: 500; } html { /* Respect the browser's preferred default text size. */ font-size: 100%; } html, body { font-family: var(--orange-ui-font); font-size: var(--orange-type-body); font-weight: 400; line-height: 1.6; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* * Keep one functional font throughout the admin. The selector deliberately * covers route roots and body-level overlays while leaving icon fonts, * technical fields and embedded visual previews alone. */ :is( #app, .el-overlay-container, #dashboardPro, #frontdeskV3, #productAdminPro, #tableAdminPro, #reservationAdminPro, #workbenchPro, #memberAdmin, #coachAdmin, #orderAdmin, #financeReportPro, #pageDecoration, #operationAudit, #staffPermissionsPro, #storeSettingsOverlay, #storeProfilePro, #marketingAdmin, .coach-admin-pro, .cap-drawer, .marketing-admin, .store-settings-overlay, .store-profile-pro, .frontdesk-theme-settings, .security-center, .staff-permissions-pro, .audit-admin, .orange-ui-overlay, .orange-ui-toast, .secure-login-card, .password-stepup-dialog ) { font-family: var(--orange-ui-font) !important; font-size: var(--orange-type-body); font-weight: 400; line-height: 1.6; font-synthesis: weight style; } :is( #app, .el-overlay-container, #dashboardPro, #frontdeskV3, #productAdminPro, #tableAdminPro, #reservationAdminPro, #workbenchPro, #memberAdmin, #coachAdmin, #orderAdmin, #financeReportPro, #pageDecoration, #operationAudit, #staffPermissionsPro, #storeSettingsOverlay, #storeProfilePro, #marketingAdmin, .coach-admin-pro, .cap-drawer, .marketing-admin, .store-settings-overlay, .store-profile-pro, .frontdesk-theme-settings, .security-center, .staff-permissions-pro, .audit-admin, .orange-ui-overlay, .orange-ui-toast, .secure-login-card, .password-stepup-dialog ) :where( div, section, main, header, footer, nav, aside, article, p, h1, h2, h3, h4, h5, h6, label, small, strong, b, a, button, input, textarea, select, option, table, thead, tbody, tr, th, td, ul, ol, li, dl, dt, dd, legend, summary, em, mark, span:not(.el-icon):not(.iconfont):not([class^="icon-"]):not([class*=" icon-"]) ):not( .orange-print-root *, .pap-live-preview *, .pap-phone-screen *, .pd-phone *, .spp-login-preview *, .spp-home-preview *, .tap-qr-paper *, [data-orange-typography-exempt], [data-orange-typography-exempt] * ) { font-family: var(--orange-ui-font) !important; } @media screen { /* * Primary reading copy. Dense operational surfaces use the control/table * sizes below; normal explanatory copy remains at a comfortable 16px. */ :is( #app, .el-overlay-container, #dashboardPro, #frontdeskV3, #productAdminPro, #tableAdminPro, #reservationAdminPro, #workbenchPro, #memberAdmin, #coachAdmin, #orderAdmin, #financeReportPro, #pageDecoration, #operationAudit, #staffPermissionsPro, #storeSettingsOverlay, #storeProfilePro, #marketingAdmin, .coach-admin-pro, .cap-drawer, .marketing-admin, .store-settings-overlay, .store-profile-pro, .frontdesk-theme-settings, .security-center, .staff-permissions-pro, .audit-admin, .orange-ui-overlay, .orange-ui-toast, .secure-login-card, .password-stepup-dialog ) :is(p, li, dt, dd, summary):not( .orange-print-root *, .pap-live-preview *, .pap-phone-screen *, .pd-phone *, .spp-login-preview *, .spp-home-preview *, .tap-qr-paper *, [data-orange-typography-exempt], [data-orange-typography-exempt] * ) { font-size: var(--orange-type-body) !important; line-height: 1.6 !important; } /* Buttons, fields, navigation and interactive labels. */ :is( #app, .el-overlay-container, #dashboardPro, #frontdeskV3, #productAdminPro, #tableAdminPro, #reservationAdminPro, #workbenchPro, #memberAdmin, #coachAdmin, #orderAdmin, #financeReportPro, #pageDecoration, #operationAudit, #staffPermissionsPro, #storeSettingsOverlay, #storeProfilePro, #marketingAdmin, .coach-admin-pro, .cap-drawer, .marketing-admin, .store-settings-overlay, .store-profile-pro, .frontdesk-theme-settings, .security-center, .staff-permissions-pro, .audit-admin, .orange-ui-overlay, .orange-ui-toast, .secure-login-card, .password-stepup-dialog ) :is( button, input, textarea, select, option, label, .el-button, .el-input, .el-input__inner, .el-textarea__inner, .el-select, .el-select__wrapper, .el-form-item__label, .el-menu-item, .el-sub-menu__title, .el-tabs__item, .el-dropdown-menu__item, [role="button"], [role="tab"] ):not( .orange-print-root *, .pap-live-preview *, .pap-phone-screen *, .pd-phone *, .spp-login-preview *, .spp-home-preview *, .tap-qr-paper *, [data-orange-typography-exempt], [data-orange-typography-exempt] * ) { font-family: var(--orange-ui-font) !important; font-size: var(--orange-type-control) !important; font-weight: 500 !important; line-height: 1.5 !important; } :is( #app, .el-overlay-container, #dashboardPro, #frontdeskV3, #productAdminPro, #tableAdminPro, #reservationAdminPro, #workbenchPro, #memberAdmin, #coachAdmin, #orderAdmin, #financeReportPro, #pageDecoration, #operationAudit, #staffPermissionsPro, #storeSettingsOverlay, #storeProfilePro, #marketingAdmin, .coach-admin-pro, .cap-drawer, .marketing-admin, .store-settings-overlay, .store-profile-pro, .frontdesk-theme-settings, .security-center, .staff-permissions-pro, .audit-admin, .orange-ui-overlay, .orange-ui-toast, .secure-login-card, .password-stepup-dialog ) :is(input, textarea)::placeholder { font-family: var(--orange-ui-font) !important; font-size: var(--orange-type-caption) !important; font-weight: 400 !important; opacity: 1; } /* Tables stay information-dense without becoming small. */ :is( #app, .el-overlay-container, #dashboardPro, #frontdeskV3, #productAdminPro, #tableAdminPro, #reservationAdminPro, #workbenchPro, #memberAdmin, #coachAdmin, #orderAdmin, #financeReportPro, #pageDecoration, #operationAudit, #staffPermissionsPro, #storeSettingsOverlay, #storeProfilePro, #marketingAdmin, .coach-admin-pro, .cap-drawer, .marketing-admin, .store-settings-overlay, .store-profile-pro, .frontdesk-theme-settings, .security-center, .staff-permissions-pro, .audit-admin, .orange-ui-overlay, .orange-ui-toast, .secure-login-card, .password-stepup-dialog ) :is(table, tbody, td, .el-table, .el-table__body, .el-table__cell):not( .orange-print-root *, .pap-live-preview *, .pap-phone-screen *, .pd-phone *, .spp-login-preview *, .spp-home-preview *, .tap-qr-paper *, [data-orange-typography-exempt], [data-orange-typography-exempt] * ) { font-size: var(--orange-type-table) !important; line-height: 1.55 !important; } :is( #app, .el-overlay-container, #dashboardPro, #frontdeskV3, #productAdminPro, #tableAdminPro, #reservationAdminPro, #workbenchPro, #memberAdmin, #coachAdmin, #orderAdmin, #financeReportPro, #pageDecoration, #operationAudit, #staffPermissionsPro, #storeSettingsOverlay, #storeProfilePro, #marketingAdmin, .coach-admin-pro, .cap-drawer, .marketing-admin, .store-settings-overlay, .store-profile-pro, .frontdesk-theme-settings, .security-center, .staff-permissions-pro, .audit-admin, .orange-ui-overlay, .orange-ui-toast, .secure-login-card, .password-stepup-dialog ) :is(th, .el-table__header .el-table__cell):not( .orange-print-root *, .pap-live-preview *, .pap-phone-screen *, .pd-phone *, .spp-login-preview *, .spp-home-preview *, .tap-qr-paper *, [data-orange-typography-exempt], [data-orange-typography-exempt] * ) { font-size: var(--orange-type-caption) !important; font-weight: 600 !important; line-height: 1.5 !important; } /* Supporting text, statuses and pagination: 14px is the hard floor. */ :is( #app, .el-overlay-container, #dashboardPro, #frontdeskV3, #productAdminPro, #tableAdminPro, #reservationAdminPro, #workbenchPro, #memberAdmin, #coachAdmin, #orderAdmin, #financeReportPro, #pageDecoration, #operationAudit, #staffPermissionsPro, #storeSettingsOverlay, #storeProfilePro, #marketingAdmin, .coach-admin-pro, .cap-drawer, .marketing-admin, .store-settings-overlay, .store-profile-pro, .frontdesk-theme-settings, .security-center, .staff-permissions-pro, .audit-admin, .orange-ui-overlay, .orange-ui-toast, .secure-login-card, .password-stepup-dialog ) :is( small, caption, figcaption, [class*="hint"], [class*="meta"], [class*="desc"], [class*="sub"], [class*="note"], [class*="help"], [class*="caption"], [class*="eyebrow"], [class*="kicker"], .el-tag, .el-badge__content, .el-pagination, .el-pagination button, .el-pagination span ):not( .orange-print-root *, .pap-live-preview *, .pap-phone-screen *, .pd-phone *, .spp-login-preview *, .spp-home-preview *, .tap-qr-paper *, [data-orange-typography-exempt], [data-orange-typography-exempt] * ) { font-size: var(--orange-type-caption) !important; line-height: 1.55 !important; } /* Stable title hierarchy across all feature modules. */ :is( #app, .el-overlay-container, #dashboardPro, #frontdeskV3, #productAdminPro, #tableAdminPro, #reservationAdminPro, #workbenchPro, #memberAdmin, #coachAdmin, #orderAdmin, #financeReportPro, #pageDecoration, #operationAudit, #staffPermissionsPro, #storeSettingsOverlay, #storeProfilePro, #marketingAdmin, .coach-admin-pro, .cap-drawer, .marketing-admin, .store-settings-overlay, .store-profile-pro, .frontdesk-theme-settings, .security-center, .staff-permissions-pro, .audit-admin, .orange-ui-overlay, .orange-ui-toast, .secure-login-card, .password-stepup-dialog ) :is(h1, h2, h3, h4, h5, h6):not( .orange-print-root *, .pap-live-preview *, .pap-phone-screen *, .pd-phone *, .spp-login-preview *, .spp-home-preview *, .tap-qr-paper *, [data-orange-typography-exempt], [data-orange-typography-exempt] * ) { font-family: var(--orange-ui-font) !important; font-weight: 600 !important; line-height: 1.35 !important; } :is(#app, .el-overlay-container, .orange-ui-overlay, .secure-login-card) h1:not( .orange-print-root *, .pap-live-preview *, .pap-phone-screen *, .pd-phone *, .spp-login-preview *, .spp-home-preview *, .tap-qr-paper *, [data-orange-typography-exempt], [data-orange-typography-exempt] * ) { font-size: var(--orange-type-h1) !important; } :is(#app, .el-overlay-container, .orange-ui-overlay, .secure-login-card) h2:not( .orange-print-root *, .pap-live-preview *, .pap-phone-screen *, .pd-phone *, .spp-login-preview *, .spp-home-preview *, .tap-qr-paper *, [data-orange-typography-exempt], [data-orange-typography-exempt] * ) { font-size: var(--orange-type-h2) !important; } :is(#app, .el-overlay-container, .orange-ui-overlay, .secure-login-card) h3:not( .orange-print-root *, .pap-live-preview *, .pap-phone-screen *, .pd-phone *, .spp-login-preview *, .spp-home-preview *, .tap-qr-paper *, [data-orange-typography-exempt], [data-orange-typography-exempt] * ) { font-size: var(--orange-type-h3) !important; } :is(#app, .el-overlay-container, .orange-ui-overlay, .secure-login-card) :is(h4, h5, h6):not( .orange-print-root *, .pap-live-preview *, .pap-phone-screen *, .pd-phone *, .spp-login-preview *, .spp-home-preview *, .tap-qr-paper *, [data-orange-typography-exempt], [data-orange-typography-exempt] * ) { font-size: var(--orange-type-h4) !important; } :is( #app, .el-overlay-container, #dashboardPro, #frontdeskV3, #productAdminPro, #tableAdminPro, #reservationAdminPro, #workbenchPro, #memberAdmin, #coachAdmin, #orderAdmin, #financeReportPro, #pageDecoration, #operationAudit, #staffPermissionsPro, #storeSettingsOverlay, #storeProfilePro, #marketingAdmin, .coach-admin-pro, .cap-drawer, .marketing-admin, .store-settings-overlay, .store-profile-pro, .frontdesk-theme-settings, .security-center, .staff-permissions-pro, .audit-admin, .orange-ui-overlay, .orange-ui-toast, .secure-login-card, .password-stepup-dialog ) :is(strong, b):not( .orange-print-root *, .pap-live-preview *, .pap-phone-screen *, .pd-phone *, .spp-login-preview *, .spp-home-preview *, .tap-qr-paper *, [data-orange-typography-exempt], [data-orange-typography-exempt] * ) { font-weight: 600 !important; } /* * Runtime safety classes only appear when a legacy module still computes * below the floor or forces a different functional font. */ :is( #app, .el-overlay-container, #dashboardPro, #frontdeskV3, #productAdminPro, #tableAdminPro, #reservationAdminPro, #workbenchPro, #memberAdmin, #coachAdmin, #orderAdmin, #financeReportPro, #pageDecoration, #operationAudit, #staffPermissionsPro, #storeSettingsOverlay, #storeProfilePro, #marketingAdmin, .coach-admin-pro, .cap-drawer, .marketing-admin, .store-settings-overlay, .store-profile-pro, .frontdesk-theme-settings, .security-center, .staff-permissions-pro, .audit-admin, .orange-ui-overlay, .orange-ui-toast, .secure-login-card, .password-stepup-dialog ) .orange-font-floor-14 { font-size: var(--orange-type-caption) !important; line-height: 1.5 !important; } :is( #app, .el-overlay-container, #dashboardPro, #frontdeskV3, #productAdminPro, #tableAdminPro, #reservationAdminPro, #workbenchPro, #memberAdmin, #coachAdmin, #orderAdmin, #financeReportPro, #pageDecoration, #operationAudit, #staffPermissionsPro, #storeSettingsOverlay, #storeProfilePro, #marketingAdmin, .coach-admin-pro, .cap-drawer, .marketing-admin, .store-settings-overlay, .store-profile-pro, .frontdesk-theme-settings, .security-center, .staff-permissions-pro, .audit-admin, .orange-ui-overlay, .orange-ui-toast, .secure-login-card, .password-stepup-dialog ) .orange-font-family-ui { font-family: var(--orange-ui-font) !important; } /* Preserve large business numbers while aligning their digits. */ :is( #dashboardPro, #frontdeskV3, #productAdminPro, #tableAdminPro, #reservationAdminPro, #workbenchPro, #memberAdmin, #coachAdmin, #orderAdmin, #financeReportPro ) :is( [class*="price"], [class*="amount"], [class*="metric"], [class*="kpi"] b, [class*="stat"] b ) { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; } /* * Technical values remain monospace, but are still large enough to read. * Print output is handled separately below. */ :is( #app, .el-overlay-container, .orange-ui-overlay ) :is( code, pre, kbd, samp, .rap-order-id, .tap-qr-info textarea, .sc-code-grid code, .sc-change-grid pre ):not(.orange-print-root *) { font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace !important; font-size: var(--orange-type-caption) !important; line-height: 1.55 !important; font-synthesis: initial; -webkit-font-smoothing: auto; } } /* Small screens reflow the layout; body copy never gets smaller. */ @media screen and (max-width: 768px) { :root { --orange-type-control: max(16px, 1rem); --orange-type-table: max(15px, .9375rem); --orange-type-h1: 1.375rem; --orange-type-h2: 1.1875rem; --orange-type-h3: 1.0625rem; } } @media print { .orange-print-root, .orange-print-root * { font-family: Arial, "Microsoft YaHei", sans-serif !important; font-weight: revert !important; } }