/* UAE Aid landing-page look for the Keycloak login (keycloak.v2 / PatternFly 5). Loaded AFTER the parent theme's css/styles.css — see theme.properties. Palette source: Frontend/shared-ui/src/styles/globals.css (flat white page, bronze #986c2e primary, #0B0C0C text, #2A2E34 muted, #E9EAEC borders). Layout source: the deleted Frontend/landing/src/pages/Index.tsx. */ /* Arabic webfont for RTL typography (kept from shared-ui globals.css). Latin text uses the system stack — no webfont import. */ @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap"); :root { --aid-primary: #986c2e; /* golden bronze */ --aid-primary-hover: #7f5a26; --aid-primary-active: #6a4b20; --aid-text: #0b0c0c; --aid-muted: #2a2e34; --aid-muted-soft: rgba(42, 46, 52, 0.7); --aid-card: #ffffff; --aid-page-bg: #ffffff; /* flat white — the old warm gradient is gone */ --aid-border: #e9eaec; --aid-border-strong: #d8dadd; --aid-shadow: 0 10px 25px -5px rgba(11, 12, 12, 0.1); /* shared-ui --shadow-lg */ --aid-radius-lg: 0.5rem; --aid-radius-md: 0.375rem; --aid-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --aid-font-arabic: "IBM Plex Sans Arabic", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --aid-content-max: 1400px; --pf-v5-global--primary-color--100: var(--aid-primary); --pf-v5-global--primary-color--200: var(--aid-primary-hover); --pf-v5-global--link--Color: var(--aid-primary); --pf-v5-global--link--Color--hover: var(--aid-primary-hover); --pf-v5-global--FontFamily--heading: var(--aid-font); --pf-v5-global--FontFamily--text: var(--aid-font); --pf-v5-global--FontFamily--heading--monospace: ui-monospace, monospace; } /* Arabic: swap the whole page onto the IBM Plex Sans Arabic stack. Everything below reads var(--aid-font), so redefining the token on the RTL root is enough (new layout rules use logical properties and flip on their own). */ html[dir="rtl"] { --aid-font: var(--aid-font-arabic); } /* Keycloak can set dark theme; native controls then paint as dark/black. Force light controls on login. The parent template's dark-mode script adds pf-v5-theme-dark on (disabled via darkMode=false in theme.properties, but kept forced here as a second line of defense). */ html:has(.pf-v5-c-login), html:has(.pf-v5-c-login) body, html.pf-v5-theme-dark, html.pf-v5-theme-dark body, .pf-v5-c-login, .pf-v5-c-login__main { color-scheme: light; } /* Normally-scrolling page (replaces the old one-screen overflow:hidden pinning — the hero column does not fit a pinned viewport). */ html:has(.pf-v5-c-login) { height: auto; overflow-x: hidden; overflow-y: auto; } html:has(.pf-v5-c-login) body { min-height: 100dvh; margin: 0; overflow: visible; color: var(--aid-text); } /* Flat white page. Beats the parent styles.css `.login-pf body` Keycloak background SVG. (The old `body.pf-v5-theme-dark` selector half never matched — the dark class goes on , hence html.pf-v5-theme-dark body.) */ body, body#keycloak-bg, html.login-pf body, html.pf-v5-theme-dark body { background-color: var(--aid-page-bg) !important; background-image: none !important; color: var(--aid-text); } /* Page frame: two-column content / footer band, top to bottom (no header bar). position:relative anchors the .aid-locale pill. */ .pf-v5-c-login { position: relative; display: flex !important; flex-direction: column; align-items: stretch; min-height: 100dvh; height: auto !important; max-height: none !important; overflow: visible !important; padding: 0 !important; background-color: var(--aid-page-bg) !important; background-image: none !important; font-family: var(--aid-font); color: var(--aid-text); -webkit-font-smoothing: antialiased; } /* ---------- Locale pill (template.ftl .aid-locale) ---------- Pinned to the top inline-end corner: top right in LTR, top left in RTL. */ .aid-locale { position: absolute; inset-block-start: 1rem; inset-inline-end: 1.5rem; z-index: 10; display: inline-flex; align-items: center; gap: 0.5rem; /* Fixed width so the pill doesn't grow/shrink with the language label ("English" vs "العربية"); wide enough for both plus icon and caret. */ inline-size: 8.5rem; box-sizing: border-box; padding: 0.4375rem 0.875rem; background: var(--aid-card); border: 1px solid var(--aid-border-strong); border-radius: 9999px; box-shadow: 0 1px 2px rgba(11, 12, 12, 0.06); color: var(--aid-text); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .aid-locale:hover { border-color: var(--aid-primary); } .aid-locale:focus-within { border-color: var(--aid-primary); box-shadow: 0 0 0 1px var(--aid-primary); } .aid-locale__icon, .aid-locale__caret { display: inline-flex; color: var(--aid-muted); pointer-events: none; } .aid-locale__icon svg, .aid-locale__caret svg { width: 1rem; height: 1rem; display: block; } /* Native select stripped bare — the pill supplies chrome, the sibling span the caret (appearance:none removes the platform arrow). */ .aid-locale select { -webkit-appearance: none; appearance: none; border: 0; margin: 0; padding: 0; /* Fill the fixed-width pill between icon and caret. */ flex: 1 1 auto; min-inline-size: 0; text-align: start; background: transparent; font-family: var(--aid-font); font-size: 0.875rem; font-weight: 500; line-height: 1.2; color: var(--aid-text); cursor: pointer; /* base-select renders the closed select as a taller flex box whose text line-box hugs the top — center it so the label lines up with the globe. */ block-size: auto; min-block-size: 0; align-items: center; } .aid-locale select:focus { outline: none; } /* Chromium 135+ customizable select: pull the options popup into the page so it can be themed (rounded card, our fonts, gold selection). Other engines ignore base-select and keep the OS-native picker. */ .aid-locale select, .aid-locale select::picker(select) { appearance: base-select; } /* base-select draws its own caret inside the button — the pill already has .aid-locale__caret. */ .aid-locale select::picker-icon { display: none; } .aid-locale select::picker(select) { margin-block-start: 0.5rem; padding: 0.375rem; min-inline-size: 11rem; background: var(--aid-card); border: 1px solid var(--aid-border); border-radius: var(--aid-radius-md); box-shadow: var(--aid-shadow); } .aid-locale select option { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: calc(var(--aid-radius-md) - 2px); font-family: var(--aid-font); font-size: 0.875rem; font-weight: 500; color: var(--aid-text); cursor: pointer; } .aid-locale select option:hover, .aid-locale select option:focus { background: #f4f4f5; } .aid-locale select option:checked { color: var(--aid-primary); font-weight: 600; } .aid-locale select option::checkmark { color: var(--aid-primary); } /* ---------- Content: two-column grid >=1024px, single column below ---------- (landing: container px-6 py-12 lg:py-20, grid lg:grid-cols-[55fr_45fr] gap-12 items-center). Overrides both PatternFly's login grid and the parent styles.css `grid-template-columns: 34rem`. */ .pf-v5-c-login__container.aid-layout { display: grid !important; grid-template-columns: 1fr !important; grid-template-rows: none !important; grid-template-areas: none !important; justify-items: stretch !important; align-items: center; gap: 3rem; flex: 1 1 auto; width: 100%; max-width: var(--aid-content-max); margin-inline: auto; padding: 3rem 1.5rem; box-sizing: border-box; overflow: visible; background: transparent; color: var(--aid-text); } @media (min-width: 1024px) { .pf-v5-c-login__container.aid-layout { grid-template-columns: 55fr 45fr !important; padding-block: 5rem; } } /* Stacked layout: clear the absolute .aid-locale pill (~3.25rem tall zone). */ @media (max-width: 1023.98px) { .pf-v5-c-login__container.aid-layout { padding-block-start: 4.5rem; } } /* ---------- Hero column (landing left column, max-w-2xl) ---------- */ .aid-hero { max-width: 42rem; display: flex; flex-direction: column; gap: 2rem; color: var(--aid-text); } .aid-hero__intro { display: flex; flex-direction: column; gap: 1rem; } .aid-hero__title { margin: 0; font-size: 2.25rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--aid-text); } @media (min-width: 1024px) { .aid-hero__title { font-size: 3rem; } } .aid-hero__subtitle { margin: 0; font-size: 1.125rem; line-height: 1.6; color: var(--aid-muted); } .aid-features { display: flex; flex-direction: column; gap: 1.5rem; padding-block-start: 1rem; } .aid-feature { display: flex; align-items: flex-start; gap: 1rem; } .aid-feature__icon { display: inline-flex; flex-shrink: 0; margin-block-start: 0.25rem; color: var(--aid-primary); } .aid-feature__icon svg { width: 1.25rem; height: 1.25rem; display: block; } .aid-feature__title { margin: 0 0 0.25rem; font-size: 1rem; font-weight: 600; line-height: 1.4; color: var(--aid-text); } .aid-feature__description { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--aid-muted); } .aid-hero__fineprint { margin: 0; padding-block-start: 1rem; font-size: 0.75rem; color: var(--aid-muted); } /* Phones: the hero would push the sign-in card below the fold — drop it and let the header brand + footer band carry the identity. */ @media (max-width: 639.98px) { .aid-hero { display: none; } } /* ---------- Sign-in card (landing: max-w-md, white, radius 0.5rem, 1px #E9EAEC border, shadow-lg, padding 1.5rem) ---------- */ .pf-v5-c-login__main { width: 100%; max-width: 28rem; margin-inline: auto; min-height: 0; max-height: none !important; overflow: visible !important; background: var(--aid-card); border-radius: var(--aid-radius-lg); border: 1px solid var(--aid-border); box-shadow: var(--aid-shadow); } /* PatternFly pins the card to `grid-area: main; align-self: start` — but the aid-layout container declares no named areas, so without this reset the card resolves into an IMPLICIT grid track at the far right edge instead of the 45fr column (and stacks wrong below 1024px too). grid-area:auto restores normal auto-placement (hero col 1, card col 2 at >=1024px; stacked below); align-self:center matches the landing's items-center. */ .pf-v5-c-login__container.aid-layout > .pf-v5-c-login__main { grid-area: auto; align-self: center; } @media (min-width: 1024px) { /* landing: lg:justify-end */ .pf-v5-c-login__main { margin-inline: auto 0; } } /* Parent styles.css adds a 4px blue brand bar on top of the card — remove. */ .pf-v5-c-login__main-header { border-top: 0 !important; padding: 1.5rem 1.5rem 0 !important; } .pf-v5-c-login__main-body { padding: 1rem 1.5rem 1.5rem !important; } /* In KC 26.4 the social/info footer renders inside the main-body — no extra padding of its own. */ .pf-v5-c-login__main-body .pf-v5-c-login__main-footer { padding: 0; } .pf-v5-c-login__main-header, .pf-v5-c-login__main-body, .pf-v5-c-login__main-footer { color: var(--aid-text) !important; } /* Card title (landing CardTitle: text-2xl semibold) */ .pf-v5-c-login__main-header .pf-v5-c-title, .pf-v5-c-login__main-header h1 { color: var(--aid-text) !important; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; } /* Any remaining selects on other login pages (e.g. select-authenticator). */ .pf-v5-c-login select { color: var(--aid-text); background-color: transparent; font-family: inherit; } /* Audit notice under the form (landing: text-xs muted centered mt-6). */ .pf-v5-c-login__main .aid-audit-notice { margin: 1.5rem 0 0; font-size: 0.75rem; text-align: center; color: var(--aid-muted) !important; } #kc-form input[type="text"], #kc-form input[type="password"], #kc-form input[type="email"] { color: var(--aid-text) !important; } /* Remember me: dark label + real native checkbox (PF5 draws a fake box via label/pseudo). Hard-won rebuild — keep intact. */ .pf-v5-c-login__main .pf-v5-c-check { overflow: visible; } .pf-v5-c-login__main label.pf-v5-c-check { color: var(--aid-text); display: inline-flex !important; flex-direction: row !important; align-items: center !important; gap: 0.5rem; grid-template-columns: none !important; grid-template-areas: none !important; cursor: pointer; } .pf-v5-c-login__main .pf-v5-c-check__label { color: var(--aid-text) !important; font-weight: 400; } /* Hide PatternFly's decorative checkbox (the solid square); only the real input should show. */ .pf-v5-c-login__main label.pf-v5-c-check::before, .pf-v5-c-login__main label.pf-v5-c-check::after, .pf-v5-c-login__main .pf-v5-c-check__label::before, .pf-v5-c-login__main .pf-v5-c-check__label::after { display: none !important; content: none !important; background: none !important; border: none !important; box-shadow: none !important; } /* Classic light checkbox (native + PF dark theme = black fill on some browsers). */ .pf-v5-c-login__main input.pf-v5-c-check__input[type="checkbox"], .pf-v5-c-login__main #rememberMe.pf-v5-c-check__input { -webkit-appearance: none !important; appearance: none !important; box-sizing: border-box !important; margin: 0 !important; margin-inline-end: 0.5rem !important; padding: 0 !important; width: 1.125rem !important; min-width: 1.125rem !important; height: 1.125rem !important; min-height: 1.125rem !important; flex-shrink: 0; cursor: pointer; position: static !important; inset: auto !important; opacity: 1 !important; clip: auto !important; clip-path: none !important; overflow: hidden !important; vertical-align: middle; background-color: #ffffff !important; background-image: none !important; border: 2px solid var(--aid-muted) !important; border-radius: 3px !important; box-shadow: none !important; color-scheme: light; } .pf-v5-c-login__main input.pf-v5-c-check__input[type="checkbox"]:checked, .pf-v5-c-login__main #rememberMe.pf-v5-c-check__input:checked { background-color: var(--aid-primary) !important; border-color: var(--aid-primary) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6l2.5 2.5L9.5 3.5'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 0.65rem !important; } .pf-v5-c-login__main input.pf-v5-c-check__input[type="checkbox"]:focus-visible, .pf-v5-c-login__main #rememberMe.pf-v5-c-check__input:focus-visible { outline: 2px solid var(--aid-primary); outline-offset: 2px; } .pf-v5-c-login__main .pf-v5-c-check__body, .pf-v5-c-login__main .pf-v5-c-check__description { color: var(--aid-text); } /* ---------- Typography inside the card ---------- */ .pf-v5-c-form__label, .pf-v5-c-form__label-text { color: var(--aid-text) !important; font-weight: 500; } /* PatternFly muted / helper copy (forgot password, instructions, info band). */ .pf-v5-c-login__main .pf-v5-c-helper-text, .pf-v5-c-login__main .pf-v5-c-helper-text__item, .pf-v5-c-login__main .pf-v5-c-helper-text__item-text, .pf-v5-c-login__main .pf-v5-c-form__helper-text, .pf-v5-c-login__main .pf-v5-u-color-200, .pf-v5-c-login__main .pf-v5-c-login__main-footer-band-item, .pf-v5-c-login__main .kc-instruction, .pf-v5-c-login__main #kc-info-wrapper, .pf-v5-c-login__main #kc-info, .pf-v5-c-login__main .pf-v5-c-content, .pf-v5-c-login__main .pf-v5-c-empty-state__body, .pf-v5-c-login__main .pf-v5-c-empty-state__content { color: var(--aid-muted) !important; } .pf-v5-c-login__main p { color: var(--aid-text) !important; } /* Inline text links stay branded (not black). */ .pf-v5-c-login__main a:not(.pf-v5-c-button):not([class*="pf-m-primary"]):not([class*="pf-m-secondary"]) { color: var(--aid-primary) !important; } .pf-v5-c-login__main a:not(.pf-v5-c-button):not([class*="pf-m-primary"]):not([class*="pf-m-secondary"]):hover { color: var(--aid-primary-hover) !important; } /* ---------- Form controls and buttons ---------- */ /* PF5 draws inputs as a span wrapper whose ::after paints a dark bottom strip (1px #8a8d90, thicker+colored on focus). Kill the strip and give the wrapper a regular 1px grey border all round instead. The wrapper (not the inner input) holds focus, so :focus-within — :focus never matches here. */ .pf-v5-c-form-control { border: 1px solid var(--aid-border-strong); border-radius: var(--aid-radius-md); background-color: #ffffff; font-family: var(--aid-font); } .pf-v5-c-form-control::after { border: 0 !important; } .pf-v5-c-form-control:hover { border-color: var(--aid-primary); } .pf-v5-c-form-control:focus-within { border-color: var(--aid-primary); box-shadow: 0 0 0 1px var(--aid-primary); } /* Password + visibility toggle read as ONE field: the border moves up onto the input-group; the inner form-control and the eye button go borderless. */ .pf-v5-c-login__main .pf-v5-c-input-group { background-color: #ffffff; border: 1px solid var(--aid-border-strong); border-radius: var(--aid-radius-md); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .pf-v5-c-login__main .pf-v5-c-input-group:hover { border-color: var(--aid-primary); } .pf-v5-c-login__main .pf-v5-c-input-group:focus-within { border-color: var(--aid-primary); box-shadow: 0 0 0 1px var(--aid-primary); } .pf-v5-c-login__main .pf-v5-c-input-group .pf-v5-c-form-control { border: 0; box-shadow: none; } .pf-v5-c-login__main .pf-v5-c-input-group .pf-v5-c-button.pf-m-control { border: 0; background-color: transparent; color: var(--aid-muted); } /* PF control buttons draw their own ::after border — kill it too. */ .pf-v5-c-login__main .pf-v5-c-input-group .pf-v5-c-button.pf-m-control::after { border: 0 !important; } .pf-v5-c-login__main .pf-v5-c-input-group .pf-v5-c-button.pf-m-control:hover { color: var(--aid-text); background-color: transparent; } .pf-v5-c-button.pf-m-primary { --pf-v5-c-button--m-primary--BackgroundColor: var(--aid-primary); --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--aid-primary-hover); --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--aid-primary-active); border-radius: var(--aid-radius-md); font-weight: 600; } .pf-v5-c-button.pf-m-link, .pf-v5-c-login__main-footer .pf-v5-c-button.pf-m-link { color: var(--aid-primary); font-weight: 500; } .pf-v5-c-button.pf-m-link:hover { color: var(--aid-primary-hover); } .pf-v5-c-button.pf-m-control { border-radius: var(--aid-radius-md); border-color: var(--aid-border-strong); color: var(--aid-primary); background-color: #fff; } .pf-v5-c-button.pf-m-control:hover { border-color: var(--aid-primary); background-color: #f4f4f5; } .pf-v5-c-alert.pf-m-success { --pf-v5-c-alert--BackgroundColor: #e8f5ee; --pf-v5-c-alert__title--Color: #1f4d32; border-radius: var(--aid-radius-md); } .pf-v5-c-alert.pf-m-danger { --pf-v5-c-alert--BackgroundColor: #fcecef; --pf-v5-c-alert__title--Color: #7a1e2b; border-radius: var(--aid-radius-md); } .pf-v5-c-alert.pf-m-warning { --pf-v5-c-alert--BackgroundColor: #fff6e8; border-radius: var(--aid-radius-md); } /* ---------- Social IdP links ---------- KC 26.4 renders them as (26.0.8 used main-footer-links-item-link); target the stable anchor id instead of either class. */ #kc-social-providers a[id^="social-"] { display: flex; align-items: center; gap: 0.75rem; border-radius: var(--aid-radius-md); } /* Parent styles.css hue-shifts provider SVGs blue via a filter — neutralize. */ #kc-social-providers svg, #kc-social-providers svg:not(.google) { filter: none !important; } /* UAE Pass provider: use fingerprint icon-only logo. */ #kc-social-providers a[id^="social-uaepass"] > svg, #kc-social-providers a[href*="/broker/uaepass"] > svg { display: none; } /* UAE Pass styled to match the primary Sign in button: gold fill, white label. Overrides PF pf-m-secondary's transparent bg / primary-tinted text; same element covers hover+focus text color. */ #kc-social-providers a[id^="social-uaepass"], #kc-social-providers a[href*="/broker/uaepass"] { position: relative; background-color: var(--aid-primary) !important; border-color: var(--aid-primary) !important; color: #ffffff !important; font-weight: 600; } #kc-social-providers a[id^="social-uaepass"]:hover, #kc-social-providers a[href*="/broker/uaepass"]:hover { background-color: var(--aid-primary-hover) !important; border-color: var(--aid-primary-hover) !important; } #kc-social-providers a[id^="social-uaepass"]:focus-visible, #kc-social-providers a[href*="/broker/uaepass"]:focus-visible { outline: 2px solid var(--aid-primary-active); outline-offset: 2px; } /* The fingerprint sits OUT of the flex flow (absolute at the inline-start edge) so the label centers across the full button width, not just the space left over next to the icon. brightness(0) invert(1) renders the multicolor logo pure white for the black fill. */ #kc-social-providers a[id^="social-uaepass"]::before, #kc-social-providers a[href*="/broker/uaepass"]::before { content: ""; position: absolute; inset-inline-start: 0.75rem; inset-block-start: 50%; transform: translateY(-50%); width: 2rem; height: 2rem; background: url("../img/uae-pass-full-logo.svg") no-repeat center; background-size: contain; filter: brightness(0) invert(1); } #kc-social-providers a[id^="social-uaepass"] > span, #kc-social-providers a[href*="/broker/uaepass"] > span { flex: 1 1 auto; text-align: center; } /* ---------- Footer band (landing: border-t, centered text-xs links separated by bullets) ---------- */ .aid-footer { width: 100%; border-block-start: 1px solid var(--aid-border); background: var(--aid-page-bg); box-sizing: border-box; } .aid-footer__inner { max-width: var(--aid-content-max); margin-inline: auto; padding: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 0.5rem; row-gap: 0.25rem; font-size: 0.75rem; color: var(--aid-muted-soft); box-sizing: border-box; } .aid-footer__link { color: var(--aid-muted-soft); text-decoration: none; transition: color 0.15s ease; } .aid-footer__link:hover { color: var(--aid-text); text-decoration: underline; } .aid-footer__sep { color: var(--aid-muted-soft); } /* ---------- RTL fine-tuning ---------- */ /* Negative tracking is wrong for Arabic script. */ html[dir="rtl"] .aid-hero__title, html[dir="rtl"] .pf-v5-c-login__main-header .pf-v5-c-title, html[dir="rtl"] .pf-v5-c-login__main-header h1 { letter-spacing: 0 !important; }