:root { --pws-navy: #1B3A5C; --pws-steel: #4682B4; --pws-red: #E1251B; --bg: #F5F7FA; --panel: #FFFFFF; --ink: #1A1A1A; --muted: #6B7280; --line: #D8DEE4; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--ink); } body { min-height: 100vh; display: flex; flex-direction: column; } /* Sign-in only. The photograph belongs on the arrival screen, where there is almost no content to compete with; behind the signed-in workspace it would cost legibility on every read and buy nothing after the second visit. The class is added by showSignIn() and removed whenever the hub is shown. The image is an anonymised PWS photograph — no plant is identifiable, which is what makes it safe on every company subdomain. */ body.signin { background: linear-gradient(rgba(12, 26, 43, 0.74), rgba(12, 26, 43, 0.86)), /* The corridor is centred IN THE FILE (cropped 2026-08-03 so its vanishing point is the geometric centre). The original photograph had the axis at ~55% of width, so `center` centred the file while the coil rows sat asymmetrically around the login card. A background-position percentage cannot fix that reliably: at a 2:1 viewport `cover` leaves zero horizontal overflow, so the percentage has no effect at all. */ url("/img/bg-coil-corridor-centered.jpg") center / cover no-repeat fixed, var(--pws-navy); } @media (max-width: 640px) { /* iOS ignores background-attachment: fixed and stretches the image badly. */ body.signin { background-attachment: scroll; } } header { background: #000; color: white; padding: 14px 28px; min-height: 168px; display: flex; align-items: center; justify-content: center; gap: 16px; position: relative; box-sizing: border-box; } header img.cust-logo { height: 116px; max-width: 320px; object-fit: contain; position: absolute; left: 28px; top: 50%; transform: translateY(-50%); } /* Arconic -- left */ header img.logo { height: 120px; position: absolute; right: 28px; top: 50%; transform: translateY(-50%); } /* PWS -- right */ @media (max-width: 640px) { header { min-height: 108px; } header img.logo { height: 66px; right: 14px; } header img.cust-logo { height: 64px; max-width: 130px; left: 14px; } } header .title { line-height: 1.1; text-align: center; padding: 0 260px; } header .title .t1 { display: block; font-family: "Helvetica Neue", "Segoe UI", Arial, sans-serif; font-size: 40px; font-weight: 700; letter-spacing: 0.03em; color: #fff; } header .title .t2 { display: block; font-family: "Helvetica Neue", "Segoe UI", Arial, sans-serif; font-size: 18px; font-weight: 400; letter-spacing: 0.42em; text-transform: uppercase; color: #aeb8c4; margin-top: 8px; padding-left: 0.42em; } /* single-line fallback when a hub name has no separator */ header .title:not(:has(.t1)) { font-weight: 700; font-size: 34px; letter-spacing: 0.03em; color: #fff; } @media (max-width: 640px) { header .title { padding: 0 90px; } header .title .t1 { font-size: 24px; } header .title .t2 { font-size: 13px; letter-spacing: 0.3em; margin-top: 4px; } } main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 32px 20px; } .card { width: min(440px, 100%); background: var(--panel); padding: 28px 32px; border-radius: 8px; border: 1px solid var(--line); box-shadow: 0 4px 16px rgba(27,58,92,0.08); } .card h1 { margin: 0 0 6px; font-size: 28px; color: var(--pws-navy); } .card p { margin: 0 0 16px; color: var(--muted); font-size: 16px; } .card input { width: 100%; padding: 11px 13px; font-size: 15px; border: 1px solid var(--line); border-radius: 5px; outline: none; } .card input:focus { border-color: var(--pws-steel); } .card button.primary { margin-top: 12px; width: 100%; padding: 11px; background: var(--pws-navy); color: white; border: 0; border-radius: 5px; font-size: 15px; font-weight: 600; cursor: pointer; } .card button.primary:hover { background: #14304D; } .card button.primary:disabled { background: #99A8BC; cursor: not-allowed; } .err { margin-top: 10px; color: var(--pws-red); font-size: 13px; min-height: 18px; } .help { margin-top: 16px; font-size: 12px; color: var(--muted); } .help a { color: var(--pws-steel); } #welcome-link { display: inline-block; margin-top: 14px; padding: 10px 16px; background: var(--pws-navy); color: white; border-radius: 5px; text-decoration: none; font-weight: 600; } #welcome-link:hover { background: #14304D; } footer { padding: 18px 20px; text-align: center; font-size: 12px; color: var(--muted); letter-spacing: 0.04em; } /* Admin dashboard */ .admin-wrap { width: 100%; max-width: 1000px; } .admin-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; padding: 0 4px; } .admin-head h1 { margin: 0; font-size: 22px; color: var(--pws-navy); } .admin-sub { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--muted); } button.ghost { background: transparent; border: 1px solid var(--line); color: var(--ink); padding: 6px 12px; border-radius: 4px; font: inherit; font-size: 12px; cursor: pointer; } button.ghost:hover { border-color: var(--pws-navy); color: var(--pws-navy); } .project-section { margin-bottom: 24px; } .section-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted); margin: 0 4px 8px; } .project-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; } .tile { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 20px 24px; text-decoration: none; color: var(--ink); transition: border-color 120ms ease, transform 120ms ease; } .tile:hover { border-color: var(--pws-navy); transform: translateY(-1px); } .tile-name { font-weight: 600; color: var(--pws-navy); font-size: 21px; } .tile-meta { font-size: 13.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; margin-top: 6px; } .tile-desc { font-size: 14px; color: #45505e; margin-top: 8px; line-height: 1.45; } .tile-featured { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-bottom: 16px; padding: 22px 28px; background: linear-gradient(135deg, #eef4fa, #e2edf6); border: 1px solid var(--pws-steel); } .tile-featured .tf-main { flex: 1; min-width: 0; } .tile-featured .tile-name { font-size: 24px; } .tile-featured .tf-label { display: inline-block; margin-left: 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--pws-steel); vertical-align: middle; } .tile-featured .tile-desc { margin-top: 8px; max-width: 660px; font-size: 15px; color: #3f4a57; } .tile-featured .tf-cta { flex: none; background: var(--pws-navy); color: #fff; padding: 13px 24px; border-radius: 6px; font-weight: 700; font-size: 15px; white-space: nowrap; } .tile-featured:hover .tf-cta { background: #14304D; } @media (max-width: 640px) { .tile-featured { flex-direction: column; align-items: flex-start; gap: 14px; } .tile-featured .tf-label { display: block; margin: 4px 0 0; } .tile-featured .tf-cta { width: 100%; text-align: center; box-sizing: border-box; } } .tile-url { font-size: 12px; color: var(--muted); margin-top: 8px; font-family: ui-monospace, "SF Mono", Menlo, monospace; overflow-wrap: anywhere; } .empty { color: var(--muted); padding: 24px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; text-align: center; } /* Shared section nav — a slim strip directly under
on the customer-facing pages (project, bliss-helper, m2-helper, clx-review). Rendered/enhanced by /js/topnav.js. Scoped to .topnav so it never touches header/page styles. NOTE: project/index.html does not load this stylesheet — it carries an in-sync copy of these rules inline. Keep the two copies matched. */ .topnav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; background: #14304D; padding: 0 16px; border-bottom: 1px solid rgba(255,255,255,0.09); } .topnav a { display: inline-block; color: #c7d3e0; text-decoration: none; font: 600 14px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; padding: 13px 15px; border-bottom: 3px solid transparent; transition: color 120ms ease, border-color 120ms ease; } .topnav a:hover { color: #fff; } .topnav a.active { color: #fff; border-bottom-color: var(--pws-steel); } .topnav a.signout { margin-left: auto; color: #93a5b8; } .topnav a.signout:hover { color: #fff; } @media (max-width: 640px) { .topnav { padding: 0 8px; } .topnav a { padding: 12px 11px; font-size: 13px; } } /* --- Login card branding (2026-08-03) ------------------------------------- Customer mark above the sign-in field, ProcessWise signature below it. The customer's brand leads because the hub belongs to them; the provider signs the bottom quietly. Both are constrained by HEIGHT rather than width so that marks with very different aspect ratios sit on the same optical baseline. */ .card-logo[hidden] { display: none !important; } /* see the note on .email-suffix */ .card-logo { display: block; max-height: 46px; max-width: 74%; width: auto; margin: 2px auto 20px; object-fit: contain; } /* Full-bleed black bar at the foot of the card. Negative margins pull it out to the card's edges (the card pads 28px/32px), and .card gets overflow:hidden so the bar's corners follow the card's radius. */ .card-provider { margin: 24px -32px -28px; padding: 16px 20px; background: #000; text-align: center; } .card-provider img { height: 40px; width: auto; display: inline-block; } @media (max-width: 480px) { .card-logo { max-height: 40px; margin-bottom: 16px; } .card-provider { margin: 20px -20px -22px; } .card-provider img { height: 32px; } } /* --- Email field with a fixed domain suffix (2026-08-03) ------------------- The user types only the local part; the hub's domain sits beside it, always visible and not deletable. The WRAPPER carries the border so the two read as one control. Typing an "@" hides the suffix and hands the full address back, so this is a default rather than a lock. */ .email-field { display: flex; align-items: stretch; } .email-field.has-suffix { border: 1px solid var(--line); border-radius: 5px; background: #fff; overflow: hidden; } .email-field.has-suffix:focus-within { border-color: var(--pws-steel); } .email-field.has-suffix input { border: 0; border-radius: 0; width: auto; min-width: 0; flex: 1 1 auto; padding-right: 4px; } .email-field.has-suffix input:focus { border: 0; outline: none; } /* An author `display` declaration BEATS the HTML `hidden` attribute (which the UA stylesheet implements as display:none). Without these two rules the suffix stayed on screen after the user typed "@", reading as "david@@domain". The same trap applies to .card-logo below. */ .email-suffix[hidden], .email-field:not(.has-suffix) .email-suffix { display: none !important; } .email-suffix { display: flex; align-items: center; padding: 0 13px 0 2px; font-size: 15px; color: var(--muted); background: #fff; white-space: nowrap; user-select: none; } @media (max-width: 420px) { .email-suffix { font-size: 13px; padding: 0 9px 0 2px; } } /* --- Sign-in screen: no header band (2026-08-03) --------------------------- The arrival screen carries the customer's mark ON THE CARD, so the black header band above it was a second, competing lockup. Hiding it also fixes the framing: the band is 168px tall, so it pushed the card below the optical centre and made the fixed background photograph look off-centre. With the band gone, `main` fills the viewport and the card centres properly. The band returns the moment the hub renders (showSignIn adds .signin, the hub removes it). */ body.signin > header { display: none; } body.signin > main { min-height: 100vh; padding-top: 24px; padding-bottom: 24px; } body.signin .card { overflow: hidden; }