/* /_share/login.css — AIR Kit login overlay for AIR-gated pages. Sits above all page content (z-index high) until auth completes. THEMING: per-page branding can override the CSS variables below by setting `window.SHARE_BRAND` BEFORE login.js runs (see login.js for the contract). The overlay applies the variables to a `
` wrapper at runtime. */ /* While the overlay is mounted, paint with the same cream backdrop so even if Chrome Android's URL-bar transitions briefly expose a strip below the fixed overlay, the user sees the same color rather than a pale flash of the page's `body { background: #fff }` underneath. Partner pages can override via window.SHARE_BRAND.theme.bgColor (the variable below) — this fallback is the Carnegie editorial cream. */ html.share-pre-auth { background: var(--share-login-bg-color, rgba(250, 250, 247, 0.92)) !important; } .share-login-overlay{ /* Themeable tokens — change via inline style on .share-login-overlay * (set by login.js when window.SHARE_BRAND is present). * * Defaults match the Carnegie editorial palette (cream backdrop, white * card, near-black text, black button, warm-gold accents). Partner pages * override via SHARE_BRAND.theme.* — brand-derive.mjs computes those * from each partner's logo + brand colors. */ --share-login-bg-color: rgba(250, 250, 247, 0.92); --share-login-card-bg: #ffffff; --share-login-text: #181b1c; --share-login-text-muted: #535353; --share-login-text-faint: #798b95; --share-login-divider: rgba(13, 28, 36, 0.08); --share-login-btn-bg: #181b1c; --share-login-btn-bg-hover: #000000; --share-login-btn-text: #ffffff; --share-login-slug-bg: rgba(192, 160, 98, 0.16); /* warm gold tint */ --share-login-slug-fg: #8a6a2a; /* readable gold */ --share-login-err-bg: #fef2f2; --share-login-err-fg: #7a1d1d; --share-login-card-radius: 22px; --share-login-btn-radius: 12px; --share-login-heading-font: "Playfair Display", "EB Garamond", Georgia, ui-serif, serif; --share-login-body-font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Logo box size on the login card. Controls both max-width and max-height * on the . The container itself is sized by min-height so the card * layout stays predictable when the logo aspect ratio varies. */ --share-login-logo-size: 64px; position:fixed; inset:0; /* Belt-and-braces against Chrome Android URL-bar collapse leaving a bleed strip at the bottom (Kenneth 2026-05-23: "bottom bleeds white background"). On Android the dynamic viewport (dvh) tracks the visual viewport which includes the area exposed when the URL bar hides; svh would track the smaller initial viewport. Using min-height of 100vh + 100dvh together pins the overlay to whichever is taller. */ min-height: 100vh; min-height: 100dvh; /* Fallback for older browsers that don't support dvh. */ height: 100vh; height: 100dvh; z-index:2147483640; background: var(--share-login-bg-color); backdrop-filter: blur(8px) saturate(1.1); -webkit-backdrop-filter: blur(8px) saturate(1.1); display:grid; place-items:center; font-family: var(--share-login-body-font); color: var(--share-login-text); } .share-login-overlay[hidden]{display:none} .share-login-card{ background: var(--share-login-card-bg); border-radius: var(--share-login-card-radius); padding:34px 36px 30px; max-width:440px; width:calc(100% - 36px); /* Softer shadow + faint border that works on either cream or dark backdrops. Heavy 0.35α shadow was designed for dark; on cream it looked muddy. */ box-shadow: 0 24px 60px rgba(13, 28, 36, 0.10), 0 4px 14px rgba(13, 28, 36, 0.06); border: 1px solid rgba(13, 28, 36, 0.06); /* Default centered text. The default sign-in card uses a logo + product name as its "hero" so left-aligned felt cramped and lopsided on phones (Kenneth flagged 2026-05-23: "texts still not aligned centre"). Editorial pages with a tagline variant already center; this just brings the default in line. */ text-align: center; } .share-login-brand{ display:flex; align-items:center; justify-content:center; /* Sized by the configured logo size — `min-height` matches `max-height` of the * , plus a touch of breathing room so the logo never visually bleeds * into the heading underneath. */ min-height: var(--share-login-logo-size); padding: 4px 0 0; margin: 4px 0 22px; } .share-login-brand img{ max-height: var(--share-login-logo-size); max-width: 100%; width:auto; height:auto; object-fit:contain; display:block; } .share-login-card h1{ margin:0 0 8px; font-size:22px; font-weight:600; letter-spacing:-.01em; font-family: var(--share-login-heading-font); color: var(--share-login-text); } .share-login-card p{ margin:0 0 22px; color: var(--share-login-text-muted); font-size:14px; line-height:1.55; } .share-login-card .share-login-slug{ display:inline-block; padding:2px 8px; border-radius:6px; background: var(--share-login-slug-bg); color: var(--share-login-slug-fg); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; /* Keep the slug pill from getting mid-broken when the paragraph wraps. */ white-space: nowrap; /* But still allow it to shrink if the slug itself is wider than the card. */ max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: baseline; } .share-login-btn{ width:100%; padding:14px 18px; border:0; cursor:pointer; background: var(--share-login-btn-bg); color: var(--share-login-btn-text); border-radius: var(--share-login-btn-radius); font-size:15px; font-weight:600; letter-spacing:.01em; font-family: var(--share-login-body-font); transition:transform .12s ease, background .12s ease; } .share-login-btn:hover{ background: var(--share-login-btn-bg-hover); transform:translateY(-1px) } .share-login-btn[disabled]{opacity:.7; cursor:wait} .share-login-err{ margin-top:14px; padding:12px 14px; border-radius:10px; background: var(--share-login-err-bg); color: var(--share-login-err-fg); font-size:13px; line-height:1.5; } .share-login-status{ margin-top:14px; font-size:13px; color: var(--share-login-text-muted); } .share-login-footer{ margin-top:18px; padding-top:14px; border-top:1px solid var(--share-login-divider); font-size:11px; color: var(--share-login-text-faint); text-align:center; } /* AIR AI wordmark inlined in the footer after "powered by". Sized to match * the surrounding text optical height (~13px) and uses currentColor so it * picks up --share-login-text-faint automatically — themed dark cards * render it light, light cards render it dark, no per-theme rules needed. * vertical-align:-2px nudges the baseline to align with the surrounding * lowercase glyphs (the wordmark's bounding box is taller than its visual * baseline-to-cap-height). Inline-block so margin-left works. */ .share-login-air-logo{ display:inline-block; height:13px; width:auto; vertical-align:-2px; margin-left:4px; } /* ─── Editorial tagline variant ────────────────────────────────────────── Activated when BRAND.tagline is set (login.js adds .share-login-card--tagline). Centers the brand wordmark + tagline and bumps both ~2× so the card reads as an editorial brand splash rather than a utilitarian gate. */ .share-login-card--tagline{ text-align:center; } .share-login-card--tagline .share-login-brand{ /* Center the logo block too (default rules already flex it; this is belt-and-braces in case the surrounding card was left-aligned). */ margin-left:auto; margin-right:auto; } .share-login-card--tagline h1{ font-size:44px; line-height:1.05; margin:8px 0 14px; text-align:center; } .share-login-card--tagline p{ font-size:22px; line-height:1.35; margin:0 0 28px; text-align:center; } @media (max-width: 520px){ /* Scale down a touch on phones so the heading doesn't overflow on narrow viewports while still feeling clearly 2× the default. */ .share-login-card--tagline h1{ font-size:34px; } .share-login-card--tagline p { font-size:18px; } }