/* ============================================================ Added by Abhilash as part of 9562 - JFF TYPOGRAPHY TOKEN LAYER Self-hosted Neue Haas Grotesk + Scale @font-face declarations and the semantic --font-* / --ls-* / --text-* tokens for the Jeppesen ForeFlight rebrand. Merged into this shared stylesheet (rather than a separate jff-tokens.css) per PO direction - this file is already linked site-wide including on the standalone maintenance.html / toomanyrequests.html pages, so the tokens resolve everywhere with no additional linking step (AC-2, AC-5). FONTS: bundled in a single static resource "JFFFonts" (.zip), mirroring the pattern the retired BoeingMesoFont resource used. WHY local() COMES FIRST: if the licensed font is already installed on the user's machine the browser uses it immediately and skips the download. WHY BOLD + ITALIC CUTS ARE INCLUDED: font-synthesis is set to none further down (the guide forbids fake-bolding single-weight families). Without real bold/italic files, every existing font-weight rule in this stylesheet and every / in content would silently render at normal weight. These cuts are declared against the SAME family name using font-weight / font-style descriptors, so font-weight: 700 and italics keep working. ============================================================ */ /* Added by Abhilash as part of 9562 - Display Medium: headlines (H1-H3) and eyebrow/caps labels (AC-3, AC-8) */ @font-face { font-family: "NeueHaasGroteskDisp Pro Md"; src: local("NeueHaasGroteskDisp Pro Md"), local("NHaasGroteskDSPro-65Md"), url("/resource/JFFFonts/NHaasGroteskDSPro-65Md.otf") format("opentype"); font-weight: normal; font-style: normal; font-display: swap; } /* Added by Abhilash as part of 9562 - Display Medium italic companion */ @font-face { font-family: "NeueHaasGroteskDisp Pro Md"; src: local("NHaasGroteskDSPro-66MdIt"), url("/resource/JFFFonts/NHaasGroteskDSPro-66MdIt.otf") format("opentype"); font-weight: normal; font-style: italic; font-display: swap; } /* Added by Abhilash as part of 9562 - Display Roman: subhead role, used by H2 per the ticket's Font Details table */ @font-face { font-family: "NeueHaasGroteskDisp Pro"; src: local("NeueHaasGroteskDisp Pro"), local("NHaasGroteskDSPro-55Rg"), url("/resource/JFFFonts/NHaasGroteskDSPro-55Rg.otf") format("opentype"); font-weight: normal; font-style: normal; font-display: swap; } /* Added by Abhilash as part of 9562 - Display Roman bold companion, so font-weight: 700 on a display element resolves to a real cut */ @font-face { font-family: "NeueHaasGroteskDisp Pro"; src: local("NeueHaasGroteskDisp Pro Bold"), local("NHaasGroteskDSPro-75Bd"), url("/resource/JFFFonts/NHaasGroteskDSPro-75Bd.otf") format("opentype"); font-weight: bold; font-style: normal; font-display: swap; } /* Added by Abhilash as part of 9562 - Display Roman italic companion */ @font-face { font-family: "NeueHaasGroteskDisp Pro"; src: local("NHaasGroteskDSPro-56It"), url("/resource/JFFFonts/NHaasGroteskDSPro-56It.otf") format("opentype"); font-weight: normal; font-style: italic; font-display: swap; } /* Added by Abhilash as part of 9562 - Text Roman: body copy, table cells, form fields (AC-4) */ @font-face { font-family: "NeueHaasGroteskText Pro"; src: local("NeueHaasGroteskText Pro"), local("NHaasGroteskTXPro-55Rg"), url("/resource/JFFFonts/NHaasGroteskTXPro-55Rg.otf") format("opentype"); font-weight: normal; font-style: normal; font-display: swap; } /* Added by Abhilash as part of 9562 - Text Medium mapped onto the Text family at weight 500, so existing font-weight: var(--font-weight-bold) (500) rules resolve to the real Medium cut instead of being ignored */ @font-face { font-family: "NeueHaasGroteskText Pro"; src: local("NHaasGroteskTXPro-65Md"), url("/resource/JFFFonts/NHaasGroteskTXPro-65Md.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; } /* Added by Abhilash as part of 9562 - Text bold companion, so existing font-weight: var(--font-weight-bolder) (700) rules render a real bold */ @font-face { font-family: "NeueHaasGroteskText Pro"; src: local("NHaasGroteskTXPro-75Bd"), url("/resource/JFFFonts/NHaasGroteskTXPro-75Bd.otf") format("opentype"); font-weight: bold; font-style: normal; font-display: swap; } /* Added by Abhilash as part of 9562 - Text italic companion, so / in knowledge articles and rich text render as real italics */ @font-face { font-family: "NeueHaasGroteskText Pro"; src: local("NHaasGroteskTXPro-56It"), url("/resource/JFFFonts/NHaasGroteskTXPro-56It.otf") format("opentype"); font-weight: normal; font-style: italic; font-display: swap; } /* Added by Abhilash as part of 9562 - Text Medium as its own family, for rules that select the Medium cut by family (buttons, links, UI labels) rather than by weight - guide sections 6 and 7 */ @font-face { font-family: "NeueHaasGroteskText Pro Md"; src: local("NeueHaasGroteskText Pro Md"), local("NHaasGroteskTXPro-65Md"), url("/resource/JFFFonts/NHaasGroteskTXPro-65Md.otf") format("opentype"); font-weight: normal; font-style: normal; font-display: swap; } /* Added by Abhilash as part of 9562 - Scale Medium: KPI / stat figures per the ticket's Font Details table ("these should be Scale, not NHG") */ @font-face { font-family: "Scale Medium"; src: local("Scale Medium"), local("Scale-Medium"), url("/resource/JFFFonts/Scale-Medium.otf") format("opentype"); font-weight: normal; font-style: normal; font-display: swap; } /* Added by Abhilash as part of 9562 - Scale Regular: pull-quote text */ @font-face { font-family: "Scale"; src: local("Scale"), local("Scale-Regular"), url("/resource/JFFFonts/Scale-Regular.otf") format("opentype"); font-weight: normal; font-style: normal; font-display: swap; } :root { --color-black: #0A0813; --color-white: #FFFFFF; --color-light-grey: #fafafa; --color-grey-header: #374C5E; --color-text-light: #0C1116BD; --color-border-light: #79747E; --color-border-primary: #1A26314D; --color-text-bold-grey: #474747; /* Commented by Abhilash as part of 9561 - AC-2/AC-3: legacy Jeppesen blue, not one of the ticket's AC-1 brand tokens. All usages below now reference --jff-midnight-blue instead; kept defined (rather than deleted outright) in case an untouched component file outside this stylesheet still references it directly - flagged for a follow-up sitewide sweep. --color-button-brand: #009bdf; */ /* Commented by Abhilash as part of 9561 - AC-2/AC-3: legacy teal-blue, not one of the ticket's AC-1 brand tokens. Usages below now reference --jff-teal instead; same "kept defined, flagged for sweep" reasoning as --color-button-brand above. --color-text-link: #009CBE; */ --color-text-bold-dark:#0c1116bd; /* Commented by Abhilash as part of 9561 - AC-2/AC-3: legacy blue, not one of the ticket's AC-1 brand tokens. Usages below now reference --jff-teal instead; same "kept defined, flagged for sweep" reasoning as --color-button-brand above. --color-action-link:#3456C2; */ --color-text-input:#1B1B1F; --color-border-dark: #23313D; --color-profile-icon: #67798A; --color-icon: #4E6071; --color-success-message: #3FA500; --color-error-message: #BF002F; --color-empty-state: #BDC7D033; --color-filled-state: #8093A526; --color-hover-state: #9EADBB1A; --color-status-open: #3FA5001F; --color-status-In-progress: #009CEB1F; --color-status-pending: #D1A6001F; --color-status-waiting: #EB66001F; --color-status-resolved: #DFD0E8B3; --color-status-closed: #1A26311F; /* Added by Abhilash as part of 9561 - AC-1: JFF brand color tokens per ticket PAT-9561's Font/Color Details, hex values reconciled against the Color Application Guide's palette. Ticket naming used here (not the guide's naming) per PO confirmation - e.g. ticket's "Pumpkin" is the same color as the guide's "Afterburn" (#FF791A). */ --jff-midnight-blue: #001629; --jff-pumpkin: #FF791A; --jff-dark-teal: #006379; --jff-teal: #19A2AE; --jff-cloud-white: #F3EDE2; --jff-electric-blue: #6AF4F9; /* Added by Abhilash as part of 9562 - JFF semantic font-family tokens. Fallback stack is a neutral grotesque per the guide's implementation note. Family names match the fonts' internal names (see @font-face above) rather than filenames. */ --font-display: "NeueHaasGroteskDisp Pro Md", "Helvetica Neue", Arial, sans-serif; --font-display-roman: "NeueHaasGroteskDisp Pro", "Helvetica Neue", Arial, sans-serif; --font-text: "NeueHaasGroteskText Pro", "Helvetica Neue", Arial, sans-serif; --font-text-md: "NeueHaasGroteskText Pro Md", "NeueHaasGroteskText Pro", Arial, sans-serif; /* Added by Abhilash as part of 9562 - Scale is used as originally specified (the files are available), per the ticket's Font Details table: KPI / stat numbers use Scale Medium, pull-quote text uses Scale Regular. Scale is NEVER used for body copy or UI labels - guide section 1. */ --font-accent: "Scale Medium", "NeueHaasGroteskText Pro Md", Arial, sans-serif; --font-accent-regular: "Scale", "NeueHaasGroteskText Pro", Arial, sans-serif; /* Added by Abhilash as part of 9562 - Tracking tokens. --ls-wide is named per AC-8, set to 0.15em which satisfies the AC's "0.06em or wider" and matches the Font Details table + guide section 5. --ls-eyebrow is kept as an alias so either name resolves correctly. */ --ls-wide: 0.15em; --ls-eyebrow: var(--ls-wide); --ls-display: -0.02em; /* AC-3: letter-spacing -0.02em on display headings */ /* Added by Abhilash as part of 9562 - JFF type color tokens, guide section 2 */ --text-heading-color: #001629; /* Midnight - headlines/subheads only */ --text-body-color: #3A4F61; /* N-600 - body copy, softer than Midnight */ /* Added by Abhilash as part of 9562 - JFF type scale tokens, taken from the ticket's Font Details table / AC (H1 60px/lh72, H2 32px/lh48, H3 20px/lh30, body 16px/lh1.55) per PO direction. The legacy --font-size-* variables below are retained so existing components keep rendering; migrating them onto these tokens is a follow-up. */ --text-h1: 60px; --text-h2: 32px; --text-h3: 20px; --text-h4: 18px; --text-h5: 16px; --text-h6: 14px; --text-body: 16px; --text-caption: 13px; /* Added by Abhilash as part of 9562 - Line-height tokens matching the Font Details table (H1 60/72, H2 32/48, H3 20/30, body 16/1.55) */ --lh-h1: 1.2; --lh-h2: 1.5; --lh-h3: 1.5; --lh-body: 1.55; /* font header 64px */ --font-size-x-large: 4rem; --font-size-large: 3.75rem; /* font body 12px to 36px*/ --font-size-36-large: 2.25rem; --font-size-32-large: 2rem; --font-size-28-medium: 1.75rem; --font-size-22-medium: 1.375rem; --font-size-20-medium: 1.25rem; --font-size-18-medium: 1.125rem; --font-size-16-normal: 1rem; --font-size-14-normal: 0.875rem; --font-size-13-small: 0.8125rem; --font-size-12-small: 0.75rem; /* font weight*/ --font-weight-bold: 500; --font-weight-normal: 400; --font-weight-bolder: 700; --font-weight-light: 300; /* profile avatar variables*/ --avatar-width: 200px; --avatar-height: 200px; --border-default: 1px solid var(--color-border); --border-radius: 4px; } /* boeing fonts*/ /* Commented by Abhilash as part of 9562 - BoeingMeso is retired brand-wide per the JFF Typography Application Guide. Superseded by the NHG @font-face declarations at the top of this file (AC-1, AC-2). @font-face { font-family: "BoeingMeso"; src: url("/resource/BoeingMesoFont/BoeingMesoFontFamily/ForWeb/WOFF2/BoeingMeso-Regular.woff2") format("TrueType"); } @font-face{ font-family: "BoeingMesoBold"; src: url("/resource/BoeingMesoFont/BoeingMesoFontFamily/ForWeb/WOFF2/BoeingMeso-Bold.woff2") format("TrueType"); } */ body { /* Commented by Abhilash as part of 9562 - Boeing Meso replaced with the body text token (NHG Text Roman), per AC-4. font-family: 'BoeingMeso',Helvetica,Arial; */ /* Added by Abhilash as part of 9562 - Body copy now resolves to NHG Text Roman, with the neutral Arial/Helvetica fallback baked into the token (AC-4, AC-6). */ font-family: var(--font-text); /* Added by Abhilash as part of 9562 - Prevents the browser from fake-bolding or fake-italicizing these single-weight "Pro" families. Per the guide, weight comes from choosing the correct family/token (--font-text vs --font-text-md), never from font-weight on one family. */ font-synthesis: none; font-weight: var(--font-weight-bold); background: radial-gradient(circle at center, #ACD7F5 4%, #fcfaf812 38%); } .gradient-background { background: radial-gradient(circle at top right, #D7EAF7 4%, #fcfaf812 39%), radial-gradient(circle at center, #ACD7F5 4%, #fcfaf812 38%), radial-gradient(circle at bottom left, #ACD7F5 10%, #fcfaf812 33%); /* Example gradient from left to right */ } /* Commented by Abhilash as part of 9561 - AC-2: button fill referenced the legacy --color-button-brand token instead of an AC-1 brand token. .brand-button { background: var(--color-button-brand); color: var(--color-white) !important; font-size: var(--font-size-14-normal); text-align: center; padding: 20px; border-radius: 20px; cursor: pointer; text-transform: unset !important; font-family: var(--font-text-md); font-weight: var(--font-weight-bold); letter-spacing: normal; } */ /* Commented by Abhilash as part of 9561 - AC-2: initial pass mapped .brand-button to Midnight Blue, but .brand-button is used sitewide as the single primary-CTA button class (e.g. "Next" on Sign In). Per the Color Application Guide section 3, the single primary CTA per view should be Pumpkin/Afterburn, not Midnight - Midnight is the guide's separate "primary/workhorse" variant. Swapped to Pumpkin below so existing .brand-button usages render correctly without a markup change. NOTE: the guide also says Pumpkin should appear only once per view - since .brand-button is one class covering both the guide's "accent" and "primary" roles, a page with multiple .brand-button instances would violate that rule. Splitting into .brand-button-accent (Pumpkin) and .brand-button-primary (Midnight) is the correct long-term fix; flagged as a follow-up story rather than done here to stay within this ticket's AC scope. .brand-button { background: var(--jff-midnight-blue); color: var(--color-white) !important; font-size: var(--font-size-14-normal); text-align: center; padding: 20px; border-radius: 20px; cursor: pointer; text-transform: unset !important; font-family: var(--font-text-md); font-weight: var(--font-weight-bold); letter-spacing: normal; } */ /* Added by Abhilash as part of 9561 - AC-2: button fill now references the Pumpkin brand token, matching .brand-button's sitewide use as the single primary-CTA button (guide section 3) */ .brand-button { background: var(--jff-pumpkin); color: var(--color-white) !important; font-size: var(--font-size-14-normal); text-align: center; padding: 20px; border-radius: 20px; cursor: pointer; text-transform: unset !important; /* Commented by Abhilash as part of 9562 - Boeing Meso replaced; button labels map to Text Medium per guide section 6 (buttons are always Text Medium, bold, sentence case). font-family: 'BoeingMeso',Helvetica,Arial; */ /* Added by Abhilash as part of 9562 - Button label font per guide section 6 */ font-family: var(--font-text-md); font-weight: var(--font-weight-bold); letter-spacing: normal; } .neutral-button { color: var(--color-icon) !important; font-size: var(--font-size-14-normal); text-align: center; padding: 20px; border-radius: 20px; cursor: pointer; text-transform: unset !important; border: 1px solid var(--color-border-light); /* Commented by Abhilash as part of 9562 - Boeing Meso replaced; same button type rule as .brand-button above (guide section 6). font-family: 'BoeingMeso',Helvetica,Arial; */ /* Added by Abhilash as part of 9562 - Button label font per guide section 6 */ font-family: var(--font-text-md); font-weight: var(--font-weight-bold); letter-spacing: normal; } /* Commented by Abhilash as part of 9561 - AC-2: referenced the legacy --color-button-brand token. .brand-button-outline { color: var(--color-button-brand) !important; } */ /* Added by Abhilash as part of 9561 - AC-2: now references the Midnight Blue brand token */ .brand-button-outline { color: var(--jff-midnight-blue) !important; } button.brand-button[disabled]{ background-color: rgb(212, 209, 209); } /* Commented by Abhilash as part of 9561 - AC-2: focus outline referenced the legacy --color-action-link token instead of an AC-1 brand token. .brand-button:focus-visible, .neutral-button:focus-visible, button:focus-visible { outline: 2px solid var(--color-action-link); } */ /* Added by Abhilash as part of 9561 - AC-2: focus outline now references the Teal brand token */ .brand-button:focus-visible, .neutral-button:focus-visible, button:focus-visible { outline: 2px solid var(--jff-teal); } .global-card-container { background: rgba(255, 255, 255, 0.7); box-shadow: 0px 10px 22.8274px rgba(0, 0, 0, 0.05), inset 0px 0.760912px 6.0873px rgba(255, 255, 255, 0.35), inset -0.760912px 0.760912px 0.760912px -1.52182px rgba(255, 255, 255, 0.35); backdrop-filter: blur(50px); border-radius: 16px; } .main-container { height: 100vh; margin-top: 70px; } .page-container { width: 90%; margin: 0 auto; min-height: 100vh; } .form-container { width: 420px; background: rgba(255, 255, 255, 0.8); height: fit-content; box-shadow: 0px 5px 22.83px rgba(0, 0, 0, 0.05), inset 0px 0.76px 4px rgba(255, 255, 255, 0.35), inset -0.76px 0.76px 0.76px 1.35px rgba(255, 255, 255, 0.35); backdrop-filter: blur(10px); } /* NOTE for reviewers (Abhilash, 9562): .text-body-normal, .text-body-large and .font-BoeingMeso-bold are reused across many components for different semantic roles (body copy vs nav links vs UI labels vs eyebrows), which the JFF guide maps to different font tokens. Per the PO conversation these are left with color/size unchanged here and only the retired font removed; a follow-up story should audit each usage site and split them into role-specific classes rather than one class serving every role. */ .text-body-normal { color: var(--color-text-light); font-size: var(--font-size-14-normal); font-weight: var(--font-weight-bold); } .text-body-x-large { color: var(--color-text-bold-dark); font-size: var(--font-size-22-medium); font-weight: var(--font-weight-bold); } /* Commented by Abhilash as part of 9562 - font-weight was --font-weight-light (300), which predates this ticket, then changed to --font-weight-normal (400) to match the original AC-4 wording. AC-4 was subsequently amended by the PO (Jonathan Russo, Jira comment on PAT-9562): "500 is fine. 400 is too small." This applies to the full AC-4 list, which explicitly includes nav links - .text-body-large powers "Services & Support" in the header nav. .text-body-large { color: var(--color-text-bold-grey); font-size: var(--font-size-16-normal); font-weight: var(--font-weight-light); } */ /* Commented by Abhilash as part of 9562 - superseded by amended AC-4 (500) .text-body-large { color: var(--color-text-bold-grey); font-size: var(--font-size-16-normal); font-weight: var(--font-weight-normal); } */ /* Added by Abhilash as part of 9562 - Text Roman, weight 500 per amended AC-4 */ .text-body-large { color: var(--color-text-bold-grey); font-size: var(--font-size-16-normal); font-weight: var(--font-weight-bold); } .text-body-small { color: var(--color-text-light); font-size: var(--font-size-12-small); font-weight: var(--font-weight-bold); } .text-body-medium { color: var(--color-icon); font-size: var(--font-size-18-medium); font-weight: var(--font-weight-bold); } .text-heading-medium { color: var(--color-text-bold-dark); font-size: var(--font-size-36-large); } .text-heading-small { color: var(--color-text-bold-dark); font-size: var(--font-size-28-medium); font-weight: var(--font-weight-bold); } .text-heading-x-small { color: var(--color-text-bold-dark); font-size: var(--font-size-16-normal); font-weight: var(--font-weight-bolder); } /* Commented by Abhilash as part of 9562 - Weight was --font-weight-bolder (700), predating this ticket. AC-3 specifies headings/section titles at font-weight: 500. Visually this is a no-op - NeueHaasGroteskDisp Pro Md is a single-weight family and font-synthesis:none means no cut is faked, so 700 and 500 render identically - but this aligns the declared weight with AC-3 exactly. .text-sub-heading{ font-size: var(--font-size-20-medium); color: var(--color-text-bold-dark); font-weight: var(--font-weight-bolder); } */ /* Added by Abhilash as part of 9562 - AC-3: section title weight 500 */ .text-sub-heading{ font-size: var(--font-size-20-medium); color: var(--color-text-bold-dark); font-weight: var(--font-weight-bold); } .font-weight-bold { font-weight: var(--font-weight-bolder); -webkit-font-smoothing: antialiased; } /* Commented by Abhilash as part of 9562 - This is the single shared utility class referenced by ~18 component .html files site-wide (via class="text-body-normal font-BoeingMeso-bold"). Fixing it here cascades the font change to every one of those files automatically - no per-component edits required for that usage pattern. .font-BoeingMeso-bold{ font-family: 'BoeingMesoBold'; } */ /* Added by Abhilash as part of 9562 - Bold utility now resolves to NHG Text Medium (the JFF equivalent of a bold UI weight) per guide section 4 emphasis rule. Class name intentionally kept as-is to avoid a mass rename across the ~18 dependent component files; renaming (e.g. to .font-nhg-bold) is a follow-up cleanup. */ .font-BoeingMeso-bold{ font-family: var(--font-text-md); } .text-color-bold { color: var(--color-text-bold-dark); } .header-icon-color { color: var(--color-icon); font-weight: var(--font-weight-light); } .icon-cursor { cursor: pointer !important; } .text-body-bold { color: var(--color-text-bold-grey); font-size: var(--font-size-16-normal); font-weight: var(--font-weight-bolder); } /* Commented by Abhilash as part of 9561 - AC-2: referenced the legacy --color-action-link token. .text-blue-link { color: var(--color-action-link); } */ /* Added by Abhilash as part of 9561 - AC-2: now references the Teal brand token */ .text-blue-link { color: var(--jff-teal); } /* Commented by Abhilash as part of 9561 - AC-2: referenced the legacy --color-text-link token. .text-violet-link { color: var(--color-text-link) !important; } */ /* Added by Abhilash as part of 9561 - AC-2: now references the Teal brand token */ .text-violet-link { color: var(--jff-teal) !important; } /* Commented by Abhilash as part of 9561 - AC-2: hover/focus link color referenced the legacy --color-text-link token instead of an AC-1 token. a:focus:not(.mdc-button), a:hover:not(.mdc-button) { color: var(--color-text-link) !important; } */ /* Commented by Abhilash as part of 9561 - AC-2 follow-up correction: this retokenized the legacy blue to Teal but kept applying it to BOTH hover and focus, which doesn't match guide section 4.1. Per the guide, hover should keep the link's Dark Teal color and only gain an underline (see the a:hover/a:focus underline rule above); Teal/Open Sky is meant to be a FOCUS RING for keyboard navigation, not a text-color swap on hover. Split into separate hover and focus-visible rules below to match the spec. a:focus:not(.mdc-button), a:hover:not(.mdc-button) { color: var(--jff-teal) !important; } */ /* Added by Abhilash as part of 9561 - AC-2 correction: hover keeps the default Dark Teal link color (underline handled separately below); no color change on hover, per guide section 4.1. SCOPE NOTE: neither PAT-9561's ACs nor Color Application Guide section 4.1 explicitly mention primary navigation - the guide's hyperlink spec is written for inline text links. This rule uses a single a:hover selector that applies to every on the site, so nav items (e.g. "Services & Support") inherit the same behavior by default. Not a written requirement for nav specifically - flagging for confirmation with the actual PO before treating this as final. */ a:hover:not(.mdc-button) { color: var(--jff-dark-teal) !important; } /* Added by Abhilash as part of 9561 - AC-2 correction: keyboard focus now gets an Open Sky (Teal) outline ring instead of a text-color change, matching the guide's "Focus (keyboard) - Open Sky focus ring" spec (section 4.1) rather than conflating focus with hover. Same scope note as the hover rule above applies here (nav included by default, not by written requirement). */ a:focus-visible:not(.mdc-button) { outline: 2px solid var(--jff-teal); outline-offset: 2px; } /* Commented by Abhilash as part of 9561 - AC-2: this suppressed the underline on both hover AND focus, which contradicts the Color Application Guide section 4.1 (links have no underline by default, and gain one on hover). Bug fix: removed so the hover underline shows. a:focus, a:hover { text-decoration: none !important; } */ /* Added by Abhilash as part of 9561 - AC-2: default no underline, underline appears on hover/focus, per guide section 4.1 */ a { text-decoration: none; } a:hover, a:focus { text-decoration: underline; } /* Commented by Abhilash as part of 9561 - AC-2: link color referenced the legacy --color-text-light token instead of an AC-1 brand token. a, a:link:not(.slds-button, .slds-dropdown__item > a), a:visited:not(.slds-button, .slds-dropdown__item > a) { color: var(--color-text-light); } */ /* Added by Abhilash as part of 9561 - AC-2: link color now references the Dark Teal brand token */ a, a:link:not(.slds-button, .slds-dropdown__item > a), a:visited:not(.slds-button, .slds-dropdown__item > a) { color: var(--jff-dark-teal); } .horizontal-line { border-bottom: 1px solid #79747E80; } .vertical-line { border-right: 1px solid #79747E80; } .text-caps { text-transform: uppercase; } .letter-spacing { letter-spacing: 2px; } /* Commented by Abhilash as part of 9562 - Hero H1 was using the legacy --font-size-x-large (4rem = 64px), which predates this ticket. Per PO direction the hero now uses the AC's H1 spec: 60px / lh72 (--text-h1 / --lh-h1), matching the ticket's Font Details table. .heading-body-large { font-size: var(--font-size-x-large); color: var(--color-text-light); font-weight: var(--font-weight-bold); } */ /* Added by Abhilash as part of 9562 - Hero H1 at the AC's 60px / lh72 spec */ .heading-body-large { font-size: var(--text-h1); line-height: var(--lh-h1); color: var(--color-text-light); font-weight: var(--font-weight-bold); } .white-text { color: var(--color-white); } .align-content-center { margin: 0 auto; } .flex-align-end { display: flex; justify-content: flex-end; } /* Commented by Abhilash as part of 9562 - Boeing Meso replaced with the body text token. Despite the class name this is used as a generic text font utility, not literally for Arial. .arial-font { font-family: 'BoeingMeso',Helvetica,Arial; } */ .arial-font { /* Added by Abhilash as part of 9562 */ font-family: var(--font-text); } /* Commented by Abhilash as part of 9562 - Boeing Meso replaced with the body text token, same as .arial-font above. .salesforce-font { font-family: 'BoeingMeso',Helvetica,Arial; } */ .salesforce-font { /* Added by Abhilash as part of 9562 */ font-family: var(--font-text); } .custom-avatar { height: var(--avatar-height); width: var(--avatar-width); } .avatar-bg { background-color: var(--color-profile-icon)!important; } .custom-icon { font-size: 20px; color: var(--color-icon); line-height: unset; } .message-container { display: flex; width: 100%; /* Commented by Abhilash as part of 9562 - Boeing Meso replaced with the body text token (AC-4). font-family: 'BoeingMeso',Helvetica,Arial; */ /* Added by Abhilash as part of 9562 */ font-family: var(--font-text); padding: 8px; border-radius: 8px; align-items: center; } .message-content { font-size: var(--font-size-12-small); color: var(--color-white); padding-left: 20px; flex-grow: 1; } .error-message-bg { background: rgba(255, 82, 97, 0.6); } .success-message-bg { background: rgba(63, 165, 0, 0.6); } .error-text{ color: var(--color-error-message); } .success-text{ color: var(--color-success-message); } .menu-absolute-position { position: absolute; z-index: 8; top: 60px; } /*Tabs styling*/ .slds-tabs--default__item.slds-active:after, .slds-tabs--default__item.slds-is-active:after, .slds-tabs_default__item.slds-active:after, .slds-tabs_default__item.slds-is-active:after { background-color: transparent; height: unset; } .slds-tabs_default__nav { border-bottom-color: var(--color-border-primary); padding-bottom: 10px; } .slds-tabs_default__item.slds-is-active { border: 1px solid var(--color-border-primary); border-radius: 22px; background: var(--color-text-bold-dark); padding: 1px 15px; } .slds-tabs_default__item .slds-tabs_default__link { color: var(--color-text-bold-grey) !important; font-weight: 100; } .slds-tabs_default__item.slds-is-active .slds-tabs_default__link { color: var(--color-white) !important; } .slds-tabs_default .slds-tabs_default__item { margin-right: 20px; } .slds-form-element__icon { padding-top: 0; } .slds-popover_tooltip { background: rgba(255, 255, 255, 0.7); box-shadow: 0px 10px 22.8274px rgba(0, 0, 0, 0.05), inset 0px 0.760912px 6.0873px rgba(255, 255, 255, 0.35), inset -0.760912px 0.760912px 0.760912px -1.52182px rgba(255, 255, 255, 0.35); backdrop-filter: blur(50px); border-radius: 16px; } .slds-popover_tooltip .slds-popover__body { color: unset; line-height: 1.8; } .file-name-button .slds-button { color: var(--color-text-light); line-height: 1.3; font-size: var(--font-size-16-normal); } /*lightning rich text css*/ lightning-input-rich-text.slds-form-element { margin-bottom: 0; border-radius: 16px; } .slds-rich-text-editor__toolbar { order: 2; border-bottom: none; border-radius: 16px; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; } .slds-rich-text-editor { border: 1px solid rgba(0, 0, 0, 0.38); border-radius: 16px; background-color: rgba(255, 255, 255, 0.7); } /* Commented by Abhilash as part of 9561 - AC-2: referenced the legacy --color-text-link token. .slds-rich-text-editor.slds-has-focus { border-color: var(--color-text-link); box-shadow: none; } */ /* Added by Abhilash as part of 9561 - AC-2: now references the Teal brand token */ .slds-rich-text-editor.slds-has-focus { border-color: var(--jff-teal); box-shadow: none; } lightning-input-rich-text.slds-form-element.rich-text-error { border: 1px solid var(--color-error-message); } lightning-input-rich-text.slds-form-element.rich-text-error .slds-rich-text-editor { border-color: transparent; } .slds-rich-text-editor:focus-within { outline: none; } c-case-comment-rich-text-area-community lightning-button { float: right; } /* Commented by Abhilash as part of 9561 - AC-2: background referenced the legacy --color-button-brand token. c-case-comment-rich-text-area-community lightning-button button.slds-button_brand { background-color: var(--color-button-brand); border: none; font-size: var(--font-size-14-normal); padding: 7px 20px; border-radius: 20px; font-family: var(--font-text-md); font-weight: var(--font-weight-bolder) } */ /* Added by Abhilash as part of 9561 - AC-2: background now references the Midnight Blue brand token */ c-case-comment-rich-text-area-community lightning-button button.slds-button_brand { background-color: var(--jff-midnight-blue); border: none; font-size: var(--font-size-14-normal); padding: 7px 20px; border-radius: 20px; /* Commented by Abhilash as part of 9562 - Boeing Meso replaced; this is a button label so it maps to Text Medium per guide section 6. font-family: 'BoeingMeso',Helvetica,Arial; */ /* Added by Abhilash as part of 9562 */ font-family: var(--font-text-md); font-weight: var(--font-weight-bolder) } c-case-comment-rich-text-area-community .slds-form-element__label, lightning-file-upload .slds-form-element__label { color: var(--color-text-light); font-size: var(--font-size-14-normal); } c-case-comment-rich-text-area-community .slds-file-selector__text { color: var(--color-text-light); } c-case-comment-rich-text-area-community lightning-input { margin-bottom: 5px !important; } .slds-rich-text-area__content { background-color: unset; } .slds-rich-text-editor__select, lightning-primitive-colorpicker-button { display: none } /* Commented by Abhilash as part of 9561 - AC-2: referenced the legacy --color-text-link token. .slds-button_icon-border-filled, slds-button.slds-button_icon-border-filled.ql-link { border-color: transparent !important; color: var(--color-text-link) !important; } */ /* Added by Abhilash as part of 9561 - AC-2: now references the Teal brand token */ .slds-button_icon-border-filled, slds-button.slds-button_icon-border-filled.ql-link { border-color: transparent !important; color: var(--jff-teal) !important; } .slds-rich-text-editor .slds-button-group-list { background-color: var(--color-white); border-radius: 16px; } .timeline-card .slds-card { background: transparent; } lightning-datepicker input.slds-input { background: var(--color-empty-state); height: 56px; border-color: rgba(0, 0, 0, 0.38); font-size: var(--font-size-14-normal); color: var(--color-text-light); /* Commented by Abhilash as part of 9562 - Boeing Meso replaced with the body text token (form field text, guide section 4). font-family: 'BoeingMeso',Helvetica,Arial; */ /* Added by Abhilash as part of 9562 */ font-family: var(--font-text); } /* Commented by Abhilash as part of 9561 - AC-2: referenced the legacy --color-text-link token. lightning-datepicker:hover input.slds-input{ background: var(--color-hover-state); border-color: var(--color-text-link); } */ /* Added by Abhilash as part of 9561 - AC-2: now references the Teal brand token */ lightning-datepicker:hover input.slds-input{ background: var(--color-hover-state); border-color: var(--jff-teal); } lightning-textarea label.slds-form-element__label, .slds-radio__label .slds-form-element__label, .slds-file-selector__dropzone .slds-file-selector__text.slds-medium-show:after { color: var(--color-text-light); font-size: var(--font-size-14-normal) !important; font-weight: var(--font-weight-bold) !important; } lightning-textarea textarea.slds-textarea{ background: transparent; border-color: rgba(0, 0, 0, 0.38); border-radius : 4px; font-size: var(--font-size-14-normal); color: var(--color-text-light); } /* Commented by Abhilash as part of 9561 - AC-2: focus border referenced the legacy --color-button-brand token. lightning-textarea textarea.slds-textarea:focus{ border-color:var(--color-button-brand); box-shadow: unset; background: transparent; } */ /* Added by Abhilash as part of 9561 - AC-2: focus border now references the Midnight Blue brand token */ lightning-textarea textarea.slds-textarea:focus{ border-color:var(--jff-midnight-blue); box-shadow: unset; background: transparent; } lightning-radio-group[data-id="DateRange"] .slds-radio { display: inline; padding: 12px; } c-boeing-knowledge-article-base-component p img { max-width: 60%; margin: 0 auto; display: flex; box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1); border-radius: 12px; } c-boeing-knowledge-article-base-component p iframe { max-width: 100%; display: flex; margin: 0 auto; } /* Commented by Abhilash as part of 9561 - AC-2: referenced the legacy --color-text-link token. c-product-page-e-learning-das-community a { color: var(--color-text-link) !important; ; } */ /* Added by Abhilash as part of 9561 - AC-2: now references the Teal brand token */ c-product-page-e-learning-das-community a { color: var(--jff-teal) !important; } c-boeing-knowledge-article-base-component .rich-content ol, c-boeing-knowledge-article-base-component .rich-content ul { list-style: revert; margin: revert; padding: revert; } h1, h2, h3, h4, h5, h6 { font-size: revert; } /* Added by Abhilash as part of 9562 - AC-3: any heading element (h1-h4) or section title must resolve to the NHG Display cut with -0.02em letter-spacing. Headings previously carried no font-family of their own and simply inherited body text, so without this rule they render in Text Roman rather than Display. H5/H6 use the Display Roman (subhead) cut per the guide's heading scale. */ h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: var(--ls-display); } h5, h6 { font-family: var(--font-display-roman); letter-spacing: var(--ls-display); } /* Commented by Abhilash as part of 9562 - Boeing Meso replaced with the body text token for data table content (AC-4). .mdc-data-table__content, .mdc-data-table__header-cell, .mdc-data-table__cell { font-family: 'BoeingMeso',Helvetica,Arial; } */ .mdc-data-table__content, .mdc-data-table__header-cell, .mdc-data-table__cell { /* Added by Abhilash as part of 9562 */ font-family: var(--font-text); } input[type="password"]::-ms-reveal { display: none; } /* Commented by Abhilash as part of 9561 - AC-2: accent-color referenced the legacy --color-button-brand token. input[type="radio"], input[type=checkbox] { accent-color: var(--color-button-brand); transform: scale(1.3); } */ /* Added by Abhilash as part of 9561 - AC-2: accent-color now references the Midnight Blue brand token */ input[type="radio"], input[type=checkbox] { accent-color: var(--jff-midnight-blue); transform: scale(1.3); } /* lightning table css*/ .slds-table lightning-primitive-header-factory a, .slds-table lightning-primitive-header-factory a:link:not(.slds-button, .slds-dropdown__item > a), .slds-table .slds-cell-fixed { background-color: var(--color-white); } lightning-primitive-header-actions lightning-button-menu .slds-button_icon-bare { display: none; } lightning-primitive-resize-handler .slds-resizable__divider { display: none; } .slds-table { font-size: var(--font-size-14-normal); background-color: var(--color-white); /* Commented by Abhilash as part of 9562 - Boeing Meso replaced with the body text token for table content (AC-4). font-family: 'BoeingMeso',Helvetica,Arial; */ /* Added by Abhilash as part of 9562 */ font-family: var(--font-text); color: var(--color-text-light); font-weight: var(--font-weight-bold); } .slds-table th { padding: 1rem 0.5rem; } .slds-table .slds-checkbox [type="checkbox"] + .slds-checkbox__label .slds-checkbox_faux { border-radius: 0; } .slds-table_header-fixed_container { padding-top: 4rem; background-color: var(--color-white); } .slds-table .slds-cell-fixed { top: 1rem; background-color: var(--color-white); } /* Multi select lookup css */ c-material-design-components lightning-pill .slds-pill { padding: 5px; margin-top: 10px; /* margin-right: 10px; */ border-radius: 8px; background: transparent; box-shadow: none; } c-material-design-components lightning-pill .slds-pill .slds-pill__label { font-size: var(--font-size-14-normal); /* Commented by Abhilash as part of 9562 - Boeing Meso replaced; this is a UI label (lookup pill) so it maps to Text Medium per guide section 2 ("Emphasis / UI labels"). font-family: 'BoeingMeso',Helvetica,Arial; */ /* Added by Abhilash as part of 9562 */ font-family: var(--font-text-md); color: var(--color-text-light); } c-material-design-components lightning-pill .slds-pill lightning-button-icon.slds-pill__remove { padding-top: 0; } /* responsive media query */ @media only screen and (max-width: 1200px) { .brand-button { font-size: var(--font-size-12-small); } .text-body-normal { font-size: var(--font-size-13-small); } .text-body-large { font-size: var(--font-size-14-normal); } .header-icon-color { font-size: var(--font-size-20-medium); } .text-heading-medium { font-size: var(--font-size-32-large); } .text-body-x-large{ font-size: var(--font-size-18-medium); } .text-body-bold { font-size: var(--font-size-14-normal);; } .heading-body-large { font-size: var(--font-size-large); line-height: 1.2; } lightning-radio-group[data-id="DateRange"] .slds-radio { padding:7px; } .text-heading-small{ font-size: var(--font-size-20-medium); } .neutral-button { font-size: var(--font-size-12-small); } } @media only screen and (max-width: 700px){ .form-container { width: 90% !important; } .text-heading-medium { font-size: var(--font-size-22-medium); } lightning-radio-group[data-id="DateRange"] .slds-radio { padding:0; display: block; } c-boeing-knowledge-article-base-component p img { max-width: 100%; } c-boeing-knowledge-article-base-component p iframe { height: auto; } .heading-body-large { font-size: var(--font-size-36-large); line-height: 1.5; } .text-body-x-large{ font-size: var(--font-size-16-medium); } }