/* ============================================================================ LOGIQ Trinity Device Certificate Portal GE HealthCare Ethos Design System (EDS 2.0) Every colour below is a literal EDS design-token value read from the live token set published at https://eds.gehealthcare.com (the EDS theme is applied as ~1,300 `--eds-*` custom properties on ). The EDS token that supplies each value is named in the comment beside it, so this file can be diffed against a future EDS release. Geometry also follows EDS: the root font-size is 62.5% (10px) so that `rem` units map 1:1 onto the EDS spec (button height 4.4rem, radius 0.3rem, ...). ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } /* ─── Design tokens — light (EDS "enterprise" light theme) ─────────────────── */ :root { /* Brand / primary action ------------------------------------------------ */ --color-primary: #7252BC; /* --eds-primary-button-background-color */ --color-primary-hover: #6348A3; /* --eds-primary-button-hover-background-color */ --color-primary-active: #554087; /* --eds-links-active */ --color-primary-text: #FAFBFD; /* --eds-primary-button-text-color */ --color-focus-ring: #B39CF1; /* --eds-primary-button-focus-outline-color */ /* Secondary / tertiary action ------------------------------------------ */ --color-secondary-bg: #C5BFD9; /* --eds-secondary-button-background-color */ --color-secondary-text: #2B2D2E; /* --eds-secondary-button-text-color */ --color-secondary-hover: #A9A0C5; /* --eds-secondary-button-hover-background-color */ --color-secondary-active: #A09AB7; /* --eds-secondary-button-pressed-background-color */ --color-secondary-border: #746A95; /* --eds-secondary-button-border-color */ --color-tertiary-text: #7252BC; /* --eds-tertiary-button-text-color */ --color-tertiary-border: #7252BC; /* --eds-tertiary-button-border-color */ --color-tertiary-hover-bg: #E7E5F0; /* --eds-tertiary-button-hover-background-color */ --color-group-active-bg: #746A95; /* --eds-button-group-active-background-color */ --color-group-active-text: #FAFBFD; /* --eds-button-group-active-text-color */ /* Status ---------------------------------------------------------------- */ --color-success: #26842F; /* --eds-system-notification-success-border-color */ --color-success-bg: #97C69B; /* --eds-system-notification-success-background-color */ --color-success-text: #2B2D2E; /* --eds-system-notification-text-color */ --color-error: #DF4661; /* --eds-textbox-error-border-color */ --color-error-bg: #FCEEF0; /* --eds-textbox-error-background-color */ --color-error-text: #2B2D2E; /* --eds-system-notification-text-color */ --color-error-strong: #A80925; /* --eds-system-notification-high-severity-primary-background-color */ --color-info: #929498; /* --eds-system-notification-info-general-border-color */ --color-info-bg: #F4F5F8; /* --eds-system-notification-info-general-background-color */ --color-info-text: #2B2D2E; /* --eds-system-notification-info-general-text-color */ --color-warning: #B05F09; /* --eds-card-status-moderate-severity-color */ /* Surfaces -------------------------------------------------------------- */ --color-body-bg: #ECECF0; /* --eds-home-page-welcome-container-background-color */ --color-hero-bg: #FAFBFD; /* --eds-home-page-hero-background-color */ --color-brand-wash: rgba(114, 82, 188, 0.07); --color-surface: #FFFFFF; /* --eds-card-background-color */ --color-surface-sunken: #F4F5F8; /* --eds-card-fill-color */ --color-masthead-bg: #FAFBFD; /* --eds-masthead-background */ --color-footer-bg: #FAFBFD; /* --eds-footer-background */ --color-border: #D7D8DB; /* --eds-card-border-color */ --color-border-strong: #7F8185; /* --eds-textbox-border-color */ --color-divider: #D7D8DB; /* --eds-masthead-divider-color */ --color-overlay: rgba(255, 255, 255, 0.72); /* Text ------------------------------------------------------------------ */ --color-text: #2B2D2E; /* --eds-card-title-color */ --color-body-text: #525457; /* --eds-body-text-color */ --color-text-light: #63666A; /* --eds-card-body-color / --eds-card-key-color */ --color-label: #525457; /* --eds-textbox-label-color */ --color-placeholder: #63666A; /* --eds-textbox-placeholder-color */ --color-disabled-text: #B8B9BB; /* --eds-primary-button-disabled-text-color */ --color-disabled-bg: #F4F5F8; /* --eds-primary-button-disabled-background-color */ --color-link: #7252BC; /* --eds-links */ --color-link-hover: #6348A3; /* --eds-links-hover */ --color-footer-text: #2B2D2E; /* --eds-footer-text-color */ /* Form controls --------------------------------------------------------- */ --color-field-bg: #ECECF0; /* --eds-textbox-background-color */ --color-field-border: #7F8185; /* --eds-textbox-border-color */ --color-field-text: #2B2D2E; /* --eds-textbox-text-color */ --color-field-focus: #7252BC; /* --eds-textbox-border-focused-color */ --color-selection-bg: #746A95; /* --eds-textbox-text-selection-bg */ --color-selection-text: #FAFBFD; /* --eds-textbox-text-selection-text */ /* Icons ----------------------------------------------------------------- */ --color-icon: #2B2D2E; /* --eds-button-icon-color */ --color-icon-hover: #7252BC; /* --eds-button-icon-color-hover */ --color-masthead-icon: #7252BC; /* --eds-masthead-icon-color */ /* Elevation (EDS shadow tokens) ----------------------------------------- */ --shadow-card: 0 0.2rem 0.4rem 0 rgba(184, 185, 187, 0.9); /* --eds-card-box-shadow */ --shadow-nav: 0 0.2rem 0.4rem 0 rgba(0, 0, 0, 0.2); /* --eds-navigation-box-shadow */ --shadow-menu: 0 0.7rem 0.8rem -0.4rem rgba(0, 0, 0, 0.2), 0 0.5rem 2.2rem 0.4rem rgba(0, 0, 0, 0.12), 0 1.2rem 1.7rem 0.2rem rgba(0, 0, 0, 0.14); /* --eds-modal-shadow-modeless */ /* Select chevron (recoloured per theme) --------------------------------- */ --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%232B2D2E' d='M8 11.2 1.9 5.1a.7.7 0 0 1 1-1L8 9.2l5.1-5.1a.7.7 0 0 1 1 1z'/%3E%3C/svg%3E"); /* Type & metrics -------------------------------------------------------- */ --font-family: "Source Sans 3", "GE Inspira Sans", "ge-inspira-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --border-radius: 0.3rem; /* EDS .button border-radius */ --border-radius-sm: 0.1rem;/* EDS .textbox border-radius */ --border-radius-lg: 0.8rem; --space-2xs: 0.4rem; --space-xs: 0.8rem; --space-sm: 1.2rem; --space-md: 1.6rem; --space-lg: 2.4rem; --space-xl: 3.2rem; --space-2xl: 4.8rem; --control-height: 4.4rem; /* --eds-textbox-height-small / --eds-button-height-small */ --masthead-height: 6rem; } /* ─── Design tokens — dark (EDS "enterprise" dark theme) ───────────────────── */ :root[data-theme="dark"] { --color-primary: #B39CF1; /* --eds-primary-button-background-color (dark) */ --color-primary-hover: #A28ED8; /* --eds-primary-button-hover-background-color (dark) */ --color-primary-active: #907FBF; /* --eds-primary-button-active-background-color (dark) */ --color-primary-text: #2B2D2E; /* --eds-primary-button-text-color (dark) */ --color-focus-ring: #B39CF1; --color-secondary-bg: #61587F; /* --eds-secondary-button-background-color (dark) */ --color-secondary-text: #FAFBFD; /* --eds-secondary-button-text-color (dark) */ --color-secondary-hover: #746A95; /* --eds-secondary-button-hover-background-color (dark) */ --color-secondary-active: #61587F; --color-secondary-border: #A9A0C5; /* --eds-secondary-button-border-color (dark) */ --color-tertiary-text: #B39CF1; /* --eds-tertiary-button-text-color (dark) */ --color-tertiary-border: #B39CF1; /* --eds-tertiary-button-border-color (dark) */ --color-tertiary-hover-bg: #373149; /* --eds-tertiary-button-hover-background-color (dark) */ --color-group-active-bg: #A9A0C5; /* --eds-button-group-active-background-color (dark) */ --color-group-active-text: #2B2D2E; /* --eds-button-group-active-text-color (dark) */ --color-error-bg: #432D31; /* --eds-textbox-error-background-color (dark) */ --color-error-text: #FAFBFD; /* --eds-textbox-error-text (dark) */ --color-info-bg: #373B3D; /* --eds-system-notification-info-general-background-color (dark) */ --color-info-text: #FAFBFD; --color-body-bg: #18181A; /* --eds-body-background-color (dark) */ --color-hero-bg: #1D1F20; /* --eds-home-page-hero-background-color (dark) */ --color-brand-wash: rgba(179, 156, 241, 0.09); --color-surface: #2B2D2E; /* --eds-card-background-color (dark) */ --color-surface-sunken: #202324; /* --eds-card-fill-color (dark) */ --color-masthead-bg: #2B2D2E; /* --eds-masthead-background (dark) */ --color-footer-bg: #2B2D2E; /* --eds-footer-background (dark) */ --color-border: #525457; /* --eds-card-border-color (dark) */ --color-border-strong: #929498; /* --eds-textbox-border-color (dark) */ --color-divider: #525457; /* --eds-masthead-divider-color (dark) */ --color-overlay: rgba(29, 31, 32, 0.72); --color-text: #FAFBFD; /* --eds-card-title-color (dark) */ --color-body-text: #F4F5F8; /* --eds-card-body-color (dark) */ --color-text-light: #C5C7C9; --color-label: #C5C7C9; /* --eds-textbox-label-color (dark) */ --color-placeholder: #929498; /* --eds-textbox-placeholder-color (dark) */ --color-disabled-text: #63666A; /* --eds-primary-button-disabled-text-color (dark) */ --color-disabled-bg: #2B2D2E; /* --eds-primary-button-disabled-background-color (dark) */ --color-link: #B39CF1; /* --eds-links (dark) */ --color-link-hover: #A28ED8; /* --eds-links-hover (dark) */ --color-footer-text: #FAFBFD; /* --eds-footer-text-color (dark) */ --color-field-bg: #373B3D; /* --eds-textbox-background-color (dark) */ --color-field-border: #929498; /* --eds-textbox-border-color (dark) */ --color-field-text: #FAFBFD; /* --eds-textbox-text-color (dark) */ --color-field-focus: #B39CF1; /* --eds-textbox-border-focused-color (dark) */ --color-icon: #FAFBFD; /* --eds-button-icon-color-dark */ --color-icon-hover: #B39CF1; /* --eds-button-icon-color-dark-hover */ --color-masthead-icon: #B39CF1; /* --eds-masthead-icon-color (dark) */ --shadow-card: 0 0.2rem 0.4rem 0 rgba(0, 0, 0, 0.45); --shadow-nav: 0 0.2rem 0.4rem 0 rgba(0, 0, 0, 0.5); --shadow-menu: 0 0.7rem 0.8rem -0.4rem rgba(0, 0, 0, 0.45), 0 0.5rem 2.2rem 0.4rem rgba(0, 0, 0, 0.3), 0 1.2rem 1.7rem 0.2rem rgba(0, 0, 0, 0.35); --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23FAFBFD' d='M8 11.2 1.9 5.1a.7.7 0 0 1 1-1L8 9.2l5.1-5.1a.7.7 0 0 1 1 1z'/%3E%3C/svg%3E"); } /* ─── Base ─────────────────────────────────────────────────────────────────── */ /* 62.5% root so 1rem = 10px, matching the EDS spec's rem values. */ html { font-size: 62.5%; -webkit-text-size-adjust: 100%; } html, body { margin: 0 !important; padding: 0 !important; } body { font-family: var(--font-family); font-size: 1.6rem; line-height: 2.2rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: var(--color-body-text); background-color: var(--color-body-bg); } ::selection { background: var(--color-selection-bg); color: var(--color-selection-text); } h1, h2, h3, h4, h5, h6 { font-weight: 400; color: var(--color-text); } /* Single, consistent focus treatment across every interactive element. */ :focus-visible { outline: 0.2rem solid var(--color-focus-ring); outline-offset: 0.2rem; border-radius: var(--border-radius-sm); } .eds-icon { display: inline-block; flex: none; fill: currentColor; vertical-align: middle; } .skip-link { position: absolute; left: var(--space-md); top: -6rem; z-index: 200; padding: var(--space-xs) var(--space-md); background: var(--color-primary); color: var(--color-primary-text); border-radius: var(--border-radius); font-size: 1.4rem; text-decoration: none; transition: top 0.15s ease; } .skip-link:focus { top: var(--space-xs); } /* ─── Layout ───────────────────────────────────────────────────────────────── */ .container-outer { background-color: var(--color-body-bg); background-image: radial-gradient(90rem 40rem at 50% -6%, var(--color-brand-wash), transparent 62%), linear-gradient(180deg, var(--color-hero-bg) 0%, var(--color-body-bg) 38rem); background-repeat: no-repeat; background-attachment: fixed; color: var(--color-body-text); min-height: 100vh; display: flex; flex-direction: column; } .body { flex: 1; display: flex; flex-direction: column; } .container-inner { width: 100%; max-width: 76rem; margin: 0 auto; padding: var(--space-xl) var(--space-lg) var(--space-2xl); } /* ─── Page header ──────────────────────────────────────────────────────────── */ .page-header { margin-bottom: var(--space-lg); } .page-header__eyebrow { display: inline-flex; align-items: center; gap: var(--space-2xs); margin-bottom: var(--space-xs); font-size: 1.2rem; line-height: 1.6rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-primary); } .page-header__title { margin: 0 0 var(--space-xs); font-size: 3rem; line-height: 3.6rem; font-weight: 700; color: var(--color-text); } .page-header__lead { margin: 0; max-width: 60ch; font-size: 1.6rem; line-height: 2.4rem; color: var(--color-text-light); } /* ─── Card ─────────────────────────────────────────────────────────────────── */ .content-card { position: relative; background: var(--color-surface); border: 0.1rem solid var(--color-border); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-card); overflow: hidden; } .card__header { display: flex; align-items: flex-start; gap: var(--space-sm); padding: var(--space-lg); border-bottom: 0.1rem solid var(--color-divider); background: var(--color-surface-sunken); } .card__header-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 4rem; height: 4rem; border-radius: 50%; background: var(--color-tertiary-hover-bg); color: var(--color-primary); } .card__body { padding: var(--space-lg); } .section-heading { margin: 0; font-size: 2rem; line-height: 2.6rem; font-weight: 700; color: var(--color-text); } .section-subheading { margin: var(--space-2xs) 0 0; font-size: 1.4rem; line-height: 2rem; color: var(--color-text-light); } /* ─── Masthead ─────────────────────────────────────────────────────────────── */ .masthead { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); height: var(--masthead-height); padding: 0 var(--space-lg); background: var(--color-masthead-bg); border-bottom: 0.1rem solid var(--color-divider); box-shadow: var(--shadow-nav); position: sticky; top: 0; z-index: 100; } .masthead__brand { display: flex; align-items: center; gap: var(--space-md); min-width: 0; } .masthead__logo { color: var(--color-masthead-icon); height: 2.4rem; width: auto; } .masthead__divider { flex: none; width: 0.1rem; height: 2.4rem; background: var(--color-divider); } .masthead__product { color: var(--color-text); font-size: 1.6rem; line-height: 2.2rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .masthead__actions { display: flex; align-items: center; gap: var(--space-md); } /* ─── Theme toggle (EDS button-group) ──────────────────────────────────────── */ .theme-toggle { display: inline-flex; border: 0.1rem solid var(--color-secondary-border); border-radius: var(--border-radius); overflow: hidden; } .theme-toggle__btn { display: inline-flex; align-items: center; justify-content: center; width: 3.6rem; height: 3rem; padding: 0; border: none; background: transparent; color: var(--color-icon); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .theme-toggle__btn + .theme-toggle__btn { border-left: 0.1rem solid var(--color-secondary-border); } .theme-toggle__btn:hover { background: var(--color-tertiary-hover-bg); color: var(--color-icon-hover); } .theme-toggle__btn--active, .theme-toggle__btn--active:hover { background: var(--color-group-active-bg); color: var(--color-group-active-text); } /* ─── User menu ────────────────────────────────────────────────────────────── */ .user-menu { position: relative; } .user-avatar { display: inline-flex; align-items: center; justify-content: center; width: 3.8rem; height: 3.8rem; padding: 0; border: none; border-radius: 50%; background: transparent; color: var(--color-masthead-icon); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .user-avatar:hover, .user-avatar[aria-expanded="true"] { background: var(--color-tertiary-hover-bg); color: var(--color-icon-hover); } .user-menu__dropdown { position: absolute; top: calc(100% + 0.8rem); right: 0; min-width: 24rem; border: 0.1rem solid var(--color-border); border-radius: var(--border-radius-lg); background: var(--color-surface); box-shadow: var(--shadow-menu); overflow: hidden; z-index: 50; display: none; } .user-menu__dropdown--open { display: block; } .user-menu__title { padding: var(--space-sm) var(--space-md); font-weight: 700; font-size: 1.6rem; line-height: 2.2rem; color: var(--color-text); word-break: break-word; } .user-menu__subtitle { padding: 0 var(--space-md) var(--space-sm); font-size: 1.3rem; line-height: 1.8rem; color: var(--color-text-light); word-break: break-word; } .user-menu__divider { border-top: 0.1rem solid var(--color-divider); } .user-menu__item { width: 100%; padding: var(--space-sm) var(--space-md); border: none; background: transparent; color: var(--color-text); text-align: left; font-family: var(--font-family); font-size: 1.6rem; line-height: 2.2rem; cursor: pointer; display: flex; align-items: center; gap: var(--space-xs); transition: background-color 0.15s ease, color 0.15s ease; } .user-menu__item:hover { background: var(--color-group-active-bg); color: var(--color-group-active-text); } /* ─── Forms ────────────────────────────────────────────────────────────────── */ .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-md); } .form-group { margin-bottom: var(--space-md); min-width: 0; } .form-group--full { grid-column: 1 / -1; } .form-group label { display: block; margin-bottom: var(--space-2xs); font-size: 1.4rem; line-height: 2rem; font-weight: 700; color: var(--color-label); } .required-marker { color: var(--color-error); margin-left: 0.2rem; } .form-group input, .form-group select { width: 100%; height: var(--control-height); padding: 0 var(--space-sm); border: 0.1rem solid var(--color-field-border); border-radius: var(--border-radius-sm); font-size: 1.6rem; line-height: 2.2rem; font-family: var(--font-family); color: var(--color-field-text); background-color: var(--color-field-bg); transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; } .form-group input::placeholder { color: var(--color-placeholder); opacity: 1; } .form-group select { appearance: none; -webkit-appearance: none; padding-right: 4rem; background-image: var(--select-chevron); background-repeat: no-repeat; background-position: right var(--space-sm) center; background-size: 1.6rem 1.6rem; cursor: pointer; } .form-group input:hover:not(:disabled), .form-group select:hover:not(:disabled) { border-color: var(--color-field-focus); } .form-group input:focus, .form-group select:focus { outline: none; border-color: var(--color-field-focus); box-shadow: 0 0 0 0.2rem var(--color-focus-ring); } /* EDS: an invalid textbox takes the error background *and* border. */ .form-group input[aria-invalid="true"], .form-group select[aria-invalid="true"] { background-color: var(--color-error-bg); border-color: var(--color-error); } .form-group input[aria-invalid="true"]:focus, .form-group select[aria-invalid="true"]:focus { box-shadow: 0 0 0 0.2rem rgba(223, 70, 97, 0.4); } /* Password field with a reveal toggle */ .input-with-action { position: relative; } .input-with-action input { padding-right: 4.8rem; } .input-action-btn { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; justify-content: center; width: 4.4rem; height: var(--control-height); padding: 0; border: none; background: transparent; color: var(--color-text-light); cursor: pointer; transition: color 0.15s ease; } .input-action-btn:hover { color: var(--color-icon-hover); } .form-group .field-hint { margin-top: var(--space-2xs); font-size: 1.3rem; line-height: 1.8rem; color: var(--color-text-light); } .form-group .error-message { color: var(--color-error); font-size: 1.3rem; line-height: 1.8rem; } .form-group .error-message:not(:empty) { display: flex; align-items: flex-start; gap: var(--space-2xs); margin-top: var(--space-2xs); } .form-group .error-message:not(:empty)::before { content: ""; flex: none; width: 1.6rem; height: 1.6rem; background-color: var(--color-error); -webkit-mask: var(--icon-alert) center / contain no-repeat; mask: var(--icon-alert) center / contain no-repeat; } .form-actions { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 0.1rem solid var(--color-divider); } .form-actions__note { font-size: 1.3rem; line-height: 1.8rem; color: var(--color-text-light); } /* ─── Buttons (EDS) ────────────────────────────────────────────────────────── */ .eds-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); height: var(--control-height); padding: 0 var(--space-lg); border: none; border-radius: var(--border-radius); font-family: var(--font-family); font-size: 1.6rem; line-height: 2.2rem; font-weight: 700; white-space: nowrap; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .eds-btn--primary { background-color: var(--color-primary); color: var(--color-primary-text); } .eds-btn--primary:hover:not(:disabled) { background-color: var(--color-primary-hover); } .eds-btn--primary:active:not(:disabled) { background-color: var(--color-primary-active); } .eds-btn--secondary { background-color: var(--color-secondary-bg); color: var(--color-secondary-text); box-shadow: inset 0 0 0 0.1rem var(--color-secondary-border); } .eds-btn--secondary:hover:not(:disabled) { background-color: var(--color-secondary-hover); } .eds-btn--secondary:active:not(:disabled) { background-color: var(--color-secondary-active); } .eds-btn--tertiary { background-color: transparent; color: var(--color-tertiary-text); box-shadow: inset 0 0 0 0.1rem var(--color-tertiary-border); } .eds-btn--tertiary:hover:not(:disabled) { background-color: var(--color-tertiary-hover-bg); } .eds-btn:disabled, .eds-btn[aria-disabled="true"] { background-color: var(--color-disabled-bg); color: var(--color-disabled-text); box-shadow: none; cursor: not-allowed; } /* Backwards-compatible hooks for older markup */ button.primary { background-color: var(--color-primary); color: var(--color-primary-text); border: none; border-radius: var(--border-radius); padding: 0 var(--space-lg); height: var(--control-height); font-size: 1.6rem; font-weight: 700; font-family: var(--font-family); cursor: pointer; } button.primary:hover:not(:disabled) { background-color: var(--color-primary-hover); } button:disabled { cursor: not-allowed; } /* ─── Messages (EDS system notification) ───────────────────────────────────── */ :root { --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 0 8 8 8 8 0 0 0-8-8zm4.35 5.85-5 5a.5.5 0 0 1-.7 0l-2.5-2.5a.5.5 0 0 1 .7-.7L7 9.79l4.65-4.64a.49.49 0 0 1 .7.7z'/%3E%3C/svg%3E"); --icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 0 8 8 8 8 0 0 0-8-8zm-.5 3.5a.5.5 0 0 1 1 0v5a.5.5 0 0 1-1 0zM8 12.6a.8.8 0 1 1 .8-.8.8.8 0 0 1-.8.8z'/%3E%3C/svg%3E"); --icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 0 8 8 8 8 0 0 0-8-8zm.5 12.5a.5.5 0 0 1-1 0v-5a.5.5 0 0 1 1 0zM8 5.3a.8.8 0 1 1 .8-.8.8.8 0 0 1-.8.8z'/%3E%3C/svg%3E"); } #message-container:not(:empty) { margin-bottom: var(--space-md); } .message { display: flex; align-items: flex-start; gap: var(--space-xs); padding: var(--space-sm) var(--space-md); border: 0.1rem solid transparent; border-radius: var(--border-radius); font-size: 1.4rem; line-height: 2rem; } .message::before { content: ""; flex: none; width: 1.8rem; height: 1.8rem; margin-top: 0.1rem; background-color: currentColor; -webkit-mask: var(--icon-info) center / contain no-repeat; mask: var(--icon-info) center / contain no-repeat; } .message--success { background-color: var(--color-success-bg); border-color: var(--color-success); color: var(--color-success-text); } .message--success::before { -webkit-mask-image: var(--icon-check); mask-image: var(--icon-check); } .message--error { background-color: var(--color-error-bg); border-color: var(--color-error); color: var(--color-error-text); } .message--error::before { -webkit-mask-image: var(--icon-alert); mask-image: var(--icon-alert); } .message--info { background-color: var(--color-info-bg); border-color: var(--color-info); color: var(--color-info-text); } /* ─── Spinner ──────────────────────────────────────────────────────────────── */ .spinner { display: none; width: 2.4rem; height: 2.4rem; border: 0.3rem solid var(--color-border); border-top-color: var(--color-primary); border-radius: 50%; animation: spin 0.8s linear infinite; margin: var(--space-md) auto; } .spinner--visible { display: block; } @keyframes spin { to { transform: rotate(360deg); } } /* ─── Download / success panel ─────────────────────────────────────────────── */ #download-section { margin-top: var(--space-lg); padding: var(--space-lg); border: 0.1rem solid var(--color-success); border-left-width: 0.4rem; border-radius: var(--border-radius); background: var(--color-surface-sunken); } .download-panel__title { display: flex; align-items: center; gap: var(--space-xs); margin: 0 0 var(--space-2xs); font-size: 1.8rem; line-height: 2.4rem; font-weight: 700; color: var(--color-text); } .download-panel__title .eds-icon { color: var(--color-success); } .download-panel__text { margin: 0 0 var(--space-md); font-size: 1.4rem; line-height: 2rem; color: var(--color-text-light); } /* ─── Status indicator ─────────────────────────────────────────────────────── */ .status-indicator { padding: var(--space-md); text-align: center; color: var(--color-text-light); } /* ─── Authorizing / redirecting view ───────────────────────────────────────── */ .authorizing-wrapper { flex: 1; min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-md); padding: var(--space-xl) var(--space-lg); font-size: 1.6rem; color: var(--color-body-text); } .authorizing-spinner { width: 4rem; height: 4rem; border: 0.3rem solid var(--color-border); border-top-color: var(--color-primary); border-radius: 50%; animation: spin 0.8s linear infinite; } .authorizing-message { max-width: 44rem; text-align: center; color: var(--color-error); } /* ─── Footer ───────────────────────────────────────────────────────────────── */ .footer { display: flex; width: 100%; flex-direction: column; align-items: flex-start; margin-top: auto; } .footer__copyright { display: flex; align-self: stretch; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); padding: var(--space-sm) var(--space-md); font-size: 1.3rem; line-height: 1.8rem; border-top: 0.1rem solid var(--color-divider); background: var(--color-footer-bg); } .footer__copyright-content { color: var(--color-footer-text); } .footer__utility-navigation { display: flex; align-items: center; gap: var(--space-lg); margin: 0; padding: 0; list-style-type: none; flex-wrap: wrap; color: var(--color-text-light); } .footer_link { color: var(--color-link); text-decoration: underline; cursor: pointer; } .footer_link:hover { color: var(--color-link-hover); } /* ─── Accessibility ────────────────────────────────────────────────────────── */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ─── Responsive ───────────────────────────────────────────────────────────── */ @media (max-width: 640px) { .form-grid { grid-template-columns: minmax(0, 1fr); } .masthead { padding: 0 var(--space-md); } .masthead__product { font-size: 1.4rem; } .masthead__actions { gap: var(--space-xs); } .container-inner { padding: var(--space-lg) var(--space-md) var(--space-xl); } .card__header, .card__body { padding: var(--space-md); } .page-header__title { font-size: 2.4rem; line-height: 3rem; } .form-actions .eds-btn, #download-section .eds-btn { width: 100%; } } /* On the narrowest screens the page

already carries the product name, so the masthead keeps only the GE HealthCare wordmark rather than truncating. */ @media (max-width: 480px) { .masthead__divider, .masthead__product { display: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }