/* nix.institute login theme — layered on top of keycloak.v2. Mirrors the structure of oyster's "applicative" theme (wordmark logo, two stacked sign-in sections, prominent social buttons, an "or" divider, font + background overrides) but rebranded for nix.institute customers: nix-blue accent, the Raleway/Bitter brand fonts, and a soft, inviting backdrop. */ /* ── Brand fonts ────────────────────────────────────────────────────────── Raleway is the UI font; Bitter is the brand serif (declared, not currently applied). The TTFs are bundled into this theme from the nix.institute app package (see keycloak.nix) so the login page and the app share one source of truth. This stylesheet is served from resources/css, so `../fonts` reaches the bundled faces. Variable fonts — one face covers the whole weight range. */ @font-face { font-family: "Raleway"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/Raleway-VariableFont_wght.ttf") format("truetype"); } @font-face { font-family: "Raleway"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("../fonts/Raleway-Italic-VariableFont_wght.ttf") format("truetype"); } @font-face { font-family: "Bitter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/Bitter-VariableFont_wght.ttf") format("truetype"); } @font-face { font-family: "Bitter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("../fonts/Bitter-Italic-VariableFont_wght.ttf") format("truetype"); } /* Brand colours (the two nix-blues the app defines) plus a darker shade for hover/active. Make Raleway the default everywhere — PatternFly 5 reads its font from these globals — and tint PatternFly's primary/link colours nix-blue so the stock password button and links match the brand. */ :root { --ni-nixblue: #5277c3; --ni-nixblue-light: #7ebae4; --ni-nixblue-dark: #41619e; --pf-v5-global--FontFamily--text: "Raleway", system-ui, -apple-system, "Segoe UI", sans-serif; --pf-v5-global--FontFamily--heading: "Raleway", system-ui, -apple-system, "Segoe UI", sans-serif; --pf-v5-global--FontFamily--redhatfont--text: "Raleway", system-ui, -apple-system, "Segoe UI", sans-serif; --pf-v5-global--FontFamily--redhatfont--heading: "Raleway", system-ui, -apple-system, "Segoe UI", sans-serif; --pf-v5-global--primary-color--100: var(--ni-nixblue); --pf-v5-global--primary-color--200: var(--ni-nixblue-dark); --pf-v5-global--link--Color: var(--ni-nixblue); --pf-v5-global--link--Color--hover: var(--ni-nixblue-dark); } body { font-family: "Raleway", system-ui, -apple-system, "Segoe UI", sans-serif; } /* Drop keycloak.v2's default polygonal wallpaper (it sets a background image on `.login-pf body`) and replace it with a flat colour, so the only texture is the tile watermark below — same background as oyster's login theme. The `background` shorthand clears the image; this stylesheet loads after the parent's styles.css so it wins. */ .login-pf body { background: #f0f0f0; } /* NB: `login-pf` and `pf-v5-theme-dark` are BOTH classes on , so a descendant selector (`html.pf-v5-theme-dark .login-pf body`) matches nothing. Target the body directly — it's a real descendant of . */ html.pf-v5-theme-dark body { background: #151515; } /* The parent theme prints the realm name as a header line above the card. We brand inside the card with the wordmark instead, so hide that header. */ #kc-header { display: none; } /* ── Tiling brand watermark ─────────────────────────────────────────────── A fixed, full-viewport layer behind the login card, identical to oyster. The source tile is black-on-white, so we composite it against the page background instead of painting its opaque white: • light mode — `multiply` drops the white and leaves the marks; low opacity makes them very light grey. • dark mode — `invert(1)` flips to white marks on a near-black field that matches the page, then a low opacity overlays the faint marks. We do NOT also set a blend mode here: a `filter` isolates the element into its own stacking context, which neutralises `mix-blend-mode`. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: url("../img/tile.png"); background-repeat: repeat; /* Size of one tile (controls how big the pattern is / how often it repeats). */ background-size: 640px; mix-blend-mode: multiply; opacity: 0.05; } html.pf-v5-theme-dark body::before { filter: invert(1); mix-blend-mode: normal; opacity: 0.06; } /* ── Wordmark logo: "Institute of Nix" ───────────────────────────────────── No image asset exists; this is the brand, matching the app header (Institute bold, "of" light, Nix bold + nix-blue). */ .ni-logo { text-align: center; margin: 0 0 1.75rem; font-size: 1.75rem; line-height: 1.1; letter-spacing: 0.01em; } .ni-logo__word { font-weight: 700; } .ni-logo__of { font-weight: 300; margin: 0 0.25em; } .ni-logo__nix { font-weight: 700; color: var(--ni-nixblue); } html.pf-v5-theme-dark .ni-logo__nix { color: var(--ni-nixblue-light); } /* ── Sections (social / email + password) ─────────────────────────────── */ .ni-section { margin: 0 0 1rem; } .ni-section__title { font-size: 1.125rem; font-weight: 600; margin: 0 0 0.25rem; } .ni-section__help { font-size: 0.875rem; margin: 0 0 0.85rem; color: var(--pf-v5-global--Color--200, #6a6e73); } /* The stock social-providers macro prints its own "Or sign in with" band; the section is already labelled, so hide that redundant header. */ .ni-section--sso .pf-v5-c-login__main-footer-band { display: none; } /* ── Social buttons: the easy path, made prominent (filled nix-blue) ───── */ .ni-section--sso #kc-social-providers ul { margin: 0; padding: 0; } .ni-section--sso #kc-social-providers a { background-color: var(--ni-nixblue); color: #fff; border: 1px solid var(--ni-nixblue); min-height: 3rem; font-size: 1rem; font-weight: 600; } .ni-section--sso #kc-social-providers a:hover, .ni-section--sso #kc-social-providers a:focus { background-color: var(--ni-nixblue-dark); color: #fff; border-color: var(--ni-nixblue-dark); } .ni-section--sso #kc-social-providers a svg { width: 1.25rem; height: 1.25rem; } /* In dark mode the light nix-blue reads better as a filled button on slate. */ html.pf-v5-theme-dark .ni-section--sso #kc-social-providers a { background-color: var(--ni-nixblue-light); border-color: var(--ni-nixblue-light); color: #0f172a; } html.pf-v5-theme-dark .ni-section--sso #kc-social-providers a:hover, html.pf-v5-theme-dark .ni-section--sso #kc-social-providers a:focus { background-color: #9fcde8; border-color: #9fcde8; color: #0f172a; } /* ── "or" divider between the two paths ───────────────────────────────── */ .ni-divider { display: flex; align-items: center; text-align: center; margin: 1.5rem 0; color: var(--pf-v5-global--Color--200, #6a6e73); } .ni-divider::before, .ni-divider::after { content: ""; flex: 1; border-bottom: 1px solid var(--pf-v5-global--BorderColor--100, #d2d2d2); } .ni-divider span { padding: 0 0.75rem; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.05em; }