/* ============================================================================ ufp.css — the modernization stylesheet This is the foundation the redesign builds on, page by page. It is ADDITIVE and OPT-IN. It does not restyle anything on its own. HOW IT STAYS SAFE NEXT TO THE LEGACY STYLESHEET ----------------------------------------------- /css/css.css is 904 lines of the original site. This file must be able to load alongside it on a half-migrated page without changing how the legacy half looks. Two rules make that true, and breaking either one is how this file starts causing bugs on pages nobody touched: 1. NO BARE ELEMENT SELECTORS. Not body, not table, not input, not a. Every rule is reached through a .ufp- class. A page opts in by adding class="ufp-page" to ; until it does, this file is inert. 2. EVERY custom property is prefixed --ufp-. Nothing here can collide with a variable defined elsewhere, now or later. So a legacy page can link this file today, and we can convert one block of it at a time by giving that block ufp- classes. That is the migration path. CONVENTIONS ----------- - Class prefix is ufp-, matching the existing ufp-home-layout / ufp-season-card / ufp-poll-column classes already in css.css. - Components are generic (.ufp-card, .ufp-field, .ufp-btn). Page-specific rules live in a clearly marked section at the bottom and are named for the page (.ufp-login-logo). - No !important. css.css has 36 of them; this file should stay at zero, because we are not fighting the legacy sheet, we are staying out of its way. - Bump the ?v= on the whenever this file changes, so browsers and any proxy in front of the site pick it up on the next load. ========================================================================= */ /* ============================================================================ 1. TOKENS Defined on :root so they are available anywhere, but defining a variable applies no styling, so this block is safe on a fully legacy page. ========================================================================= */ :root{ /* Brand. --ufp-navy is the site navy the pool has used for years. --ufp-red is the red from the logo bar. */ --ufp-navy:#122f57; --ufp-navy-deep:#0b1f3d; --ufp-navy-ink:#0f2748; --ufp-navy-lift:#1b3f6f; --ufp-red:#c8102e; /* Neutrals, light to dark */ --ufp-white:#ffffff; --ufp-surface:#f4f7fa; --ufp-field:#f6f8fa; --ufp-line:#dde3ea; --ufp-ink3:#8b97a3; --ufp-ink2:#5a6875; --ufp-ink:#16202c; /* Feedback */ --ufp-error:#8d1023; --ufp-error-bg:#fdecee; --ufp-error-line:#f4c3ca; /* Type. System stack on purpose: no webfont request on any page. */ --ufp-font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; /* Shape */ --ufp-radius:8px; --ufp-radius-lg:14px; --ufp-shadow-card:0 1px 2px rgba(5,18,38,.18), 0 18px 48px rgba(5,18,38,.34); --ufp-focus:0 0 0 3px rgba(18,47,87,.14); /* Controls. 46px keeps tap targets comfortable on a phone. */ --ufp-control-h:46px; } /* ============================================================================ 2. PAGE SHELL Applied by putting class="ufp-page" on . ========================================================================= */ .ufp-page{ margin:0; font-family:var(--ufp-font); font-size:16px; line-height:1.45; color:var(--ufp-ink); background:var(--ufp-navy); -webkit-font-smoothing:antialiased; } .ufp-page *, .ufp-page *::before, .ufp-page *::after{box-sizing:border-box} /* Navy field with a soft lift at the top. For full-bleed pages like login. */ .ufp-page-navy{ background:radial-gradient(1200px 700px at 50% -10%, var(--ufp-navy-lift) 0%, var(--ufp-navy) 45%, var(--ufp-navy-deep) 100%); } /* Vertically centred single-column shell. 100dvh rather than height:100% on html+body, which would reach outside .ufp-page and could disturb the legacy full-height table layouts. */ .ufp-page .ufp-center{ min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 20px; } /* ============================================================================ 3. CARD ========================================================================= */ .ufp-page .ufp-card{ width:100%; max-width:420px; background:var(--ufp-white); border-radius:var(--ufp-radius-lg); box-shadow:var(--ufp-shadow-card); overflow:hidden; } /* Thin red-into-navy rule echoing the bar in the logo. */ .ufp-page .ufp-card-rule{ height:4px; background:linear-gradient(90deg,var(--ufp-red) 0 38%,var(--ufp-navy) 38% 100%); } .ufp-page .ufp-card-head{padding:34px 34px 4px;text-align:center} .ufp-page .ufp-card-body{padding:22px 34px 30px} .ufp-page .ufp-card-foot{ padding:17px 34px; text-align:center; font-size:14px; color:var(--ufp-ink2); background:var(--ufp-surface); border-top:1px solid var(--ufp-line); } /* ============================================================================ 4. TYPE HELPERS ========================================================================= */ .ufp-page .ufp-kicker{ margin:18px 0 0; font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ufp-ink3); } /* Small print sitting directly on the navy field, outside a card. NOT named .ufp-note: the legacy dashboard already uses that class. */ .ufp-page .ufp-fineprint{ margin:22px 0 0; text-align:center; font-size:12.5px; letter-spacing:.03em; color:rgba(255,255,255,.5); } /* ============================================================================ 5. FORM CONTROLS Reached through .ufp-field so no bare input/label selector exists. ========================================================================= */ .ufp-page .ufp-field{margin-bottom:16px} .ufp-page .ufp-field label{ display:block; margin-bottom:6px; font-size:13px; font-weight:600; letter-spacing:.02em; color:var(--ufp-ink2); } .ufp-page .ufp-field input{ width:100%; height:var(--ufp-control-h); padding:0 13px; font-family:var(--ufp-font); font-size:16px; /* 16px keeps iOS from zooming the page on focus */ color:var(--ufp-ink); background:var(--ufp-field); border:1px solid var(--ufp-line); border-radius:var(--ufp-radius); outline:none; transition:border-color .12s, box-shadow .12s, background .12s; } .ufp-page .ufp-field input:focus{ background:var(--ufp-white); border-color:var(--ufp-navy); box-shadow:var(--ufp-focus); } /* ============================================================================ 6. BUTTONS ========================================================================= */ .ufp-page .ufp-btn{ display:block; width:100%; height:48px; font-family:var(--ufp-font); font-size:17px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; border:0; border-radius:var(--ufp-radius); cursor:pointer; transition:background .12s, transform .06s; } .ufp-page .ufp-btn:active{transform:translateY(1px)} .ufp-page .ufp-btn:focus-visible{outline:3px solid #6ea8e0;outline-offset:2px} .ufp-page .ufp-btn-primary{color:var(--ufp-white);background:var(--ufp-navy)} .ufp-page .ufp-btn-primary:hover{background:var(--ufp-navy-ink)} /* ============================================================================ 7. LINKS ========================================================================= */ .ufp-page .ufp-link-quiet{ color:var(--ufp-ink2); text-decoration:none; border-bottom:1px solid var(--ufp-line); } .ufp-page .ufp-link-quiet:hover{color:var(--ufp-navy);border-bottom-color:var(--ufp-navy)} .ufp-page .ufp-link-strong{ color:var(--ufp-navy); font-weight:600; text-decoration:none; border-bottom:1px solid rgba(18,47,87,.3); } .ufp-page .ufp-link-strong:hover{border-bottom-color:var(--ufp-navy)} /* ============================================================================ 8. ALERTS ========================================================================= */ .ufp-page .ufp-alert{ display:flex; gap:9px; align-items:flex-start; margin:0 0 20px; padding:11px 13px; font-size:14px; border-radius:7px; } .ufp-page .ufp-alert svg{flex:0 0 auto;margin-top:2px} .ufp-page .ufp-alert-error{ color:var(--ufp-error); background:var(--ufp-error-bg); border:1px solid var(--ufp-error-line); border-left:3px solid var(--ufp-red); } /* ============================================================================ 9. PAGE: LOGIN (main.cfm) ========================================================================= */ .ufp-page .ufp-login-logo{ width:100%; max-width:264px; height:auto; display:block; margin:0 auto; } .ufp-page .ufp-login-forgot{margin:16px 0 0;text-align:center;font-size:14px} /* ============================================================================ 10. RESPONSIVE Narrow-screen overrides live together at the bottom so there is one place to look when something misbehaves on a phone. ========================================================================= */ @media (max-width:480px){ .ufp-page .ufp-center{padding:24px 16px} .ufp-page .ufp-card-head{padding:28px 22px 4px} .ufp-page .ufp-card-body{padding:20px 22px 26px} .ufp-page .ufp-card-foot{padding:16px 22px} .ufp-page .ufp-login-logo{max-width:220px} } /* Short landscape windows: claw back vertical padding so the card still fits. */ @media (max-height:640px) and (min-width:481px){ .ufp-page .ufp-center{padding:24px 20px} .ufp-page .ufp-card-head{padding:26px 34px 2px} }