/* ========================================================================== United Way Online — static login landing (shared layout) Reproduces the Drupal user login page. Button-only (no form). Brand is switched via . ========================================================================== */ :root { --font-heading: "Antonio", sans-serif; --font-body: "Palanquin", sans-serif; /* Global (blue) brand — default */ --brand: #0044b5; --brand-hover: #003a9c; --brand-accent: #0044b5; --link: #003ecc; --text-dark: #232429; --text-medium: #4d4d4d; --border: #e6e6e6; } body[data-brand="ca"] { /* Canadian (red) brand */ --brand: #da291c; --brand-hover: #b71f14; --brand-accent: #ea4a3a; /* .text-red subheading */ --link: #da291c; --text-dark: #2c2a29; --text-medium: #54585a; --border: #e6e6e6; } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-body); color: var(--text-medium); background: #ffffff; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; } a { color: var(--link); } /* Accessibility helpers */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -100px; left: 0; background: var(--brand); color: #fff; padding: 12px 16px; z-index: 100; text-decoration: none; } .skip-link:focus { top: 0; } /* Layout — full-bleed two columns, matching the Drupal .page--login row. Drupal clips the page to the viewport at lg and up (height: 100vh + overflow: hidden), so the hero is cropped rather than scaled. */ .page--login { display: block; position: relative; /* anchor for the page-level language selector */ } @media (min-width: 992px) { .page--login { height: 100vh; overflow: hidden; } } .row { display: flex; flex-wrap: wrap; } .login-left, .login-right { flex: 0 0 50%; max-width: 50%; } /* Bootstrap's 24px row gutter sits between the columns on the Drupal page: the text block stops 12px short of the halfway line and the hero starts 12px past it, still bleeding to the right edge. */ @media (min-width: 992px) { .login-left { padding-right: 12px; } .login-right { padding-left: 12px; } } .login-left__inner { display: flex; flex-direction: column; padding: 80px; } .site-logo { align-self: flex-start; } .site-logo img { display: block; width: 104px; height: 48px; } body[data-brand="ca"] .site-logo img { width: auto; height: 60px; } /* Headline — the theme's h1 is a fixed 2.027rem / 1.3 at every breakpoint. */ h1 { font-family: var(--font-heading); font-weight: 700; font-size: 2.027rem; line-height: 1.3; text-transform: uppercase; color: var(--text-dark); margin: 48px 0 20px; } /* Optional red/accent subheading (Canadian variant) */ .subheading { font-family: var(--font-heading); font-weight: 700; font-size: 1.802rem; line-height: 1.3; color: var(--brand-accent); margin: 0 0 20px; } h1:has(+ .subheading) { margin-bottom: 6px; } /* Intro copy — full column width, like the Drupal body block. */ .intro { font-size: 14px; line-height: 21px; color: var(--text-medium); margin-bottom: 20px; } /* 14px top and bottom, as Drupal renders them; the flex column keeps the outer ones from collapsing away, so the block sits 14px off its neighbours. */ .intro p { margin: 14px 0; } /* Primary login button (replaces the form) */ .btn-primary { display: inline-block; font-family: var(--font-body); font-size: 16px; font-weight: 700; line-height: 16px; color: #fff; background: var(--brand); border: 1px solid transparent; border-radius: 6px; padding: 16px 32px; text-decoration: none; cursor: pointer; transition: background-color 0.15s ease; } .btn-primary:hover { background: var(--brand-hover); color: #fff; } .btn-primary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } /* Secondary (Entra) button: same shape as primary, inverted colors. Pair with .btn-primary on the element so it inherits the layout and mobile full-width. */ .btn-secondary { color: var(--brand); background: #fff; } .btn-secondary:hover { background: var(--brand); color: #fff; } .login-action { margin: 0 0 20px; display: flex; flex-wrap: wrap; gap: 12px; } /* Help text */ .help-text { font-size: 14px; line-height: 21px; color: var(--text-medium); } .help-text p { margin: 0; } .help-text a { color: var(--link); } /* Right column */ .login-right { position: relative; } /* Language selector — anchored to the page container so it stays visible even when the right column (hero) is hidden on tablet/mobile. */ .lang-dropdown { position: absolute; top: 24px; right: 32px; z-index: 5; } .lang-dropdown-select-element { width: 100px; min-height: 48px; padding: 8px 36px 8px 16px; font-family: var(--font-body); font-size: 16px; color: rgba(0, 0, 0, 0.6); background-color: rgba(255, 255, 255, 0.8); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3e%3cpath fill='none' stroke-width='1.5' d='M1 1l6 6 6-6' stroke='%23545560'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px; } /* The hero keeps its natural aspect ratio and is cropped by the page's 100vh clip, exactly as the Drupal image block renders it. */ .login-image { display: block; width: 100%; height: auto; } /* Responsive */ /* Tablet / mobile: single column, hero hidden (matches the Drupal lg break). */ @media (max-width: 991.98px) { .login-left, .login-right { flex: 0 0 100%; max-width: 100%; } .login-right { display: none; } .login-left__inner { padding: 80px 48px; } /* solid selector background (no hero behind it now) */ .lang-dropdown-select-element { background-color: #ffffff; } /* with the hero removed, the CTA spans the full content width */ .btn-primary { display: block; width: 100%; text-align: center; } }