/* ========================================================= Patrol One — Site Stylesheet One stylesheet for the whole site: the public homepage (Default.aspx) and the login-protected app pages (Safelisting, Permits, Violation Reporting, Citations, etc. - modals, the ASP:Calendar control, vehicle/plate displays, form controls). Sections 1-12 are the original app stylesheet, reorganized into labeled sections (no colors, sizes, or behavior changed from the original file - a few exact duplicate rules and stale commented-out blocks were removed during that first cleanup pass). Section 13 is the homepage. Its handful of bare-tag overrides (body's own background/type, a, h1-h3, img/svg, section, footer) are written as ".site-chrome ..." rather than as bare tag selectors, so a page that doesn't put class="site-chrome" on is completely unaffected by them. Its component classes (.hero, .action-card, .p1-btn, .nav-pill, .login-*, etc.) are already uniquely named and safe globally - the p1- prefix on its buttons specifically exists so they never collide with this file's own .btn / .btn-primary family in section 7. ========================================================= */ /* --------------------------------------------------------- 1. Fonts --------------------------------------------------------- */ @font-face { font-family: 'DealerplateCalifornia'; src: url('../css/webFonts/DealerplateCalifornia/font.woff2') format('woff2'), url('../fonts/custom-font.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } /* --------------------------------------------------------- 2. Reset & base --------------------------------------------------------- */ /* Homepage design tokens (section 13 reads these). Declaring them here, globally, is harmless on every other page - nothing else references them, so they simply sit unused. */ :root { color-scheme: dark; --bg: #000000; --bg-elevated: #15191e; --bg-sunken: #000000; --ink: #f4f6f8; --ink-muted: #8b96a3; --border: #262d35; --red: #e2202f; --red-soft: #2c0f13; --blue: #2f74d9; --blue-soft: #0f2740; --amber: #ff9d2e; --amber-soft: #3a2408; --grey: #a5a5a5; --grey-soft: #787878; --btn-primary-bg: #173a66; --btn-primary-ink: #ffffff; --shadow: 0 1px 2px rgba(0,0,0,.5), 0 14px 30px -16px rgba(0,0,0,.85); --radius: 14px; --focus: #5b96e6; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html { -webkit-text-size-adjust: 100%; } html, body { margin: 0; padding: 0; height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: #1c1c1c; color: #f5f6fa; } a:link { text-decoration: none; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } .Normal { font-family: Arial; font-size: 14px; color: White; font-weight: normal; letter-spacing: normal; } .Normal-xl { font-size: 16px; line-height: 18px; } .Normal-xxl { font-size: 18px; line-height: 20px; } .InferiorText { font-size: 11px; color: #787878; font-family: Arial; line-height: 11px; } /* --------------------------------------------------------- 3. App shell / layout --------------------------------------------------------- */ .app-container { display: flex; flex-direction: column; min-height: 100vh; } /* Top bar */ .app-header { position: sticky; top: 0; background: #1c1c1c; padding: 16px 20px; font-size: 20px; font-weight: 600; border-bottom: 1px solid #e6e6e6; z-index: 10; } .pre-content-area { max-width: 640px; width: 100%; margin: 0 auto; } /* Main content area, leaves room for fixed bottom nav */ .content-area { flex: 1; padding: 20px 16px calc(84px + env(safe-area-inset-bottom)) 16px; max-width: 640px; width: 100%; margin: 0 auto; } .tab-panel { animation: fadeIn 0.18s ease-in-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .fullWidthPanel { width: 100%; } .card { background: #000000; border-radius: 14px; border: 1px solid #787878; padding: 18px; margin-bottom: 14px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); } .card h2 { margin: 0 0 8px 0; font-size: 17px; color: #eee; } .card p { margin: 0; color: #666; font-size: 14px; line-height: 1.5; } hr.sep-line { border: none; border-top: 1px solid #ccc; margin: 0; } /* --------------------------------------------------------- 4. Bottom navigation --------------------------------------------------------- */ .bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; display: flex; background: #000000; border-top: 1px solid #e6e6e6; padding-bottom: env(safe-area-inset-bottom); z-index: 20; } .nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 10px 0 8px 0; text-decoration: none; color: #8a8f98; font-size: 11px; background: none; border: none; cursor: pointer; transition: color 0.15s ease-in-out; } .nav-item .nav-icon { font-size: 22px; line-height: 1; } .nav-item.active { color: #4361ee; font-weight: 600; } /* Small screens fine-tuning */ @media (max-width: 380px) { .nav-item { font-size: 10px; } .nav-item .nav-icon { font-size: 20px; } } /* --------------------------------------------------------- 5. Modal (flexbox sheet + centered dialog variants) --------------------------------------------------------- */ /* Overlay covers the viewport and centers the dialog with flexbox */ .modal-overlay { display: none; /* hidden by default */ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1000; /* flexbox centering */ align-items: center; justify-content: center; padding: 16px; /* breathing room on small screens */ box-sizing: border-box; } /* This class is toggled on/off from VB code-behind */ .modal-overlay.active { display: flex; } .modal-overlay.no-transition .modal-sheet { animation-duration: 0s !important; animation-delay: 0s !important; } /* Modal sheet: slides up from the bottom, phone-app style */ .modal-sheet { background: #0e0e0e; width: 94%; max-width: 640px; border: 1px solid #787878; border-radius: 18px; /* overflow:hidden on THIS element (not the scrolling element) is what makes the rounded corners clip correctly on iOS/Android — see .modal-sheet-scroll below */ overflow: hidden; box-shadow: 0 -4px 20px rgba(0,0,0,0.15); animation: slideUp 0.22s ease-out; max-height: 80vh; display: flex; flex-direction: column; /* lift the sheet off the physical bottom edge so all four corners stay visible, including on phones with a home-indicator safe area */ margin-bottom: max(12px, env(safe-area-inset-bottom)); } /* Scrolling happens in this INNER element. Mobile browsers (especially iOS Safari) can fail to clip border-radius on an element that also has overflow-y:auto — the scroll content gets promoted to its own layer and ignores the parent's radius. Keeping radius+overflow:hidden on .modal-sheet and scrolling only in here avoids that bug. */ .modal-sheet-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 14px; } @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } .modal-handle { width: 40px; height: 4px; background: #dcdde1; border-radius: 2px; margin: 0 auto 16px auto; } .modal-sheet h2 { margin: 0 0 10px 0; font-size: 19px; } .modal-sheet p { margin: 0 0 20px 0; color: #555; font-size: 14.5px; line-height: 1.6; } .modal-close-btn { display: block; width: 100%; padding: 13px 0; background: #4361ee; color: #ffffff; border: none; border-radius: 12px; font-size: 15px; font-weight: 600; cursor: pointer; } .modal-close-btn:active { background: #3651d4; } /* Centered dialog variant (header / body / footer stack) */ .modal-box { background: #0e0e0e; width: 94%; max-width: 640px; max-height: 90vh; border: 1px solid #787878; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.25); overflow: hidden; /* flex column so header/body/footer stack and body can scroll */ display: flex; flex-direction: column; } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #e5e7eb; flex: 0 0 auto; background-color: #428bca; } .modal-header h3 { margin: 0; font-size: 18px; } .modal-close { background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: #fff; padding: 4px 8px; } .modal-body { padding: 2px; overflow-y: auto; /* scrolls if content is tall, e.g. on short mobile screens */ flex: 1 1 auto; -webkit-overflow-scrolling: touch; /* smooth momentum scrolling on iOS */ } .modal-body .field { margin-bottom: 14px; } .modal-body label { display: block; margin-bottom: 6px; font-size: 14px; color: #374151; } .modal-body input[type=text], .modal-body textarea { width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 15px; } .modal-body-inner { padding: 2px; overflow-y: auto; /* scrolls if content is tall, e.g. on short mobile screens */ overscroll-behavior: contain; flex: 1 1 auto; } .modal-body-inner-content { padding-bottom: 0; } .modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px 4px 10px; border-top: 1px solid #e5e7eb; flex: 0 0 auto; flex-wrap: wrap; /* buttons wrap instead of overflowing on narrow screens */ } .status-msg { margin-top: 14px; padding: 10px 14px; border-radius: 6px; background: #ecfdf3; color: #05603a; font-size: 14px; } /* Mobile tweaks */ @media (max-width: 480px) { .modal-overlay { padding: 0; /* let the box use the full width edge-to-edge */ align-items: flex-end; /* slide up from the bottom like a sheet */ } .modal-box { max-width: 100%; width: 100%; /* vh is calculated against Safari's *largest* possible viewport (toolbar hidden), so a sheet sized with vh alone can end up positioned below what's actually visible on screen. dvh tracks the *current* visible viewport instead. */ height: 80vh; /* fallback for older Safari (< 15.4) that lacks dvh */ height: 80dvh; max-height: 80vh; max-height: 80dvh; border-radius: 12px 12px 0 0; /* leave room for the home-indicator bar on notched iPhones */ padding-bottom: env(safe-area-inset-bottom); box-sizing: border-box; } .modal-footer { justify-content: stretch; } .modal-footer .btn { flex: 1 1 auto; text-align: center; } } /* --------------------------------------------------------- 6. Modal layout helpers (row/column grid used inside modals) --------------------------------------------------------- */ .modal-container { display: flex; flex-direction: column; flex-wrap: nowrap; flex-grow: 1; width: 100%; gap: 10px; } .modal-row { display: flex; flex-flow: row; justify-content: center; align-content: center; align-items: center; font-size: 16px; padding: 4px; flex-grow: 1; margin-top: 5px; margin-bottom: 5px; flex-wrap: wrap; gap: 10px; } .modal-column { display: flex; flex: 1 1; box-sizing: border-box; align-items: center; min-width: 10px; overflow: hidden; height: 100%; } .modal-column-50 { display: flex; flex: 0 0 calc(50% - 10px); box-sizing: border-box; align-items: center; min-width: 0; overflow: hidden; height: 100%; } .modal-column-30 { display: flex; flex: 0 0 calc(30% - 10px); box-sizing: border-box; align-items: center; min-width: 0; overflow: hidden; height: 100%; } .modal-column-20 { display: flex; flex: 0 0 calc(20% - 10px); box-sizing: border-box; align-items: center; min-width: 0; overflow: hidden; height: 100%; } .modal-column-fill { display: flex; flex: 1 1 auto; align-items: center; box-sizing: border-box; min-width: 0; overflow: hidden; height: 100%; } .modal-category { display: flex; flex-flow: column; font-size: 16px; align-items: flex-end; justify-content: center; padding: 4px; height: 100%; width: 50%; flex-grow: 1; } .modal-value { display: flex; flex-flow: column; font-size: 16px; text-align: left; justify-content: flex-start; align-items: center; padding-left: 8px; flex-grow: 1; height: 100%; width: 50%; } .mobile-modal-container { display: flex; flex-direction: column; gap: 4px; } .mobile-modal-category { color: #405d84; align-content: flex-start; padding: 0px 0px 0px 4px; border-bottom: 1px solid #2d2d2d; } .mobile-modal-value { align-content: flex-start; padding: 0px 0px 0px 8px; flex-grow: 1; } .start { justify-content: flex-start; } .end { justify-content: flex-end; } .column img { max-width: 100%; height: auto; } .column p { word-break: break-word; } /* --------------------------------------------------------- 7. Buttons --------------------------------------------------------- */ .btn { border-radius: 8px; text-align: center; padding: 12px; color: white; font-size: 14px; cursor: pointer; font-family: Arial; letter-spacing: normal; border: solid 1px dimgray; line-height: 16px; vertical-align: middle; } .btn-xs { height: 20px; padding: 10px 20px 10px 20px; } .btn-sm { padding: 1px 8px; line-height: 1.0; font-size: 13px; height: 23px; border-radius: 5px; } .btn-default { color: #282828; background-color: #c8c8c8; border-color: #ccc; } .btn-default:focus, .btn-default.focus { color: #333; background-color: #e6e6e6; border-color: #8c8c8c; } .btn-default:hover { color: #333; background-color: #e6e6e6; border-color: #adadad; } .btn-primary { background-color: #428bca; } .btn-primary:hover { background-color: #a0ccf2; } .btn-secondary { background-color: #ed9c28; } .btn-secondary:hover { background-color: #edc080; } .btn-close { background-color: #697579; } .btn-close:hover { background-color: #c8cdcf; } .btn-warning { color: #fff; background-color: #f0ad4e; border-color: #eea236; } .btn-warning:focus, .btn-warning.focus { color: #fff; background-color: #ec971f; border-color: #985f0d; } .btn-warning:hover { color: #fff; background-color: #ec971f; border-color: #d58512; } .btn-success { color: #fff; background-color: #5cb85c; border-color: #4cae4c; } .btn-success:focus, .btn-success.focus { color: #fff; background-color: #449d44; border-color: #255625; } .btn-success:hover { color: #fff; background-color: #449d44; border-color: #398439; } .btn-danger { color: #fff; background-color: #d9534f; border-color: #d43f3a; } .btn-danger:focus, .btn-danger.focus { color: #fff; background-color: #c9302c; border-color: #761c19; } .btn-danger:hover { color: #fff; background-color: #c9302c; border-color: #ac2925; } .btn-round { width: 34px; height: 34px; border-radius: 50%; /* Makes it a circle */ color: white; border: none; cursor: pointer; text-align: center; font-size: 14px; display: flex; /* Helps center text vertically */ align-items: center; justify-content: center; } .btn-round-orange { font-size: 20px; color: white; border: 1px solid #a0a0a0; background-color: #D94414; border-radius: 12px; } .btn-orange { font-size: 14px; color: white; border: 1px solid #a0a0a0; background-color: #D94414; padding: 4px 8px 4px 8px; border-radius: 4px; } .btnTrash { width: 24px; height: 24px; border: none; background: url(IMAGES/close.png) no-repeat center center; } .btnTrash:hover { background: url(IMAGES/trash_red.png) no-repeat center center; } /* --------------------------------------------------------- 8. ASP:Calendar control (Permits date picker) Map each class to the matching Calendar control property. --------------------------------------------------------- */ /* Overall control wrapper -> asp:Calendar CssClass="cal-container" */ .cal-container { width: 100%; max-width: 420px; margin: 0 auto; border-collapse: collapse; table-layout: fixed; font-size: 14px; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.12); } /* Title bar (month/year) -> TitleStyle-CssClass="cal-title" */ .cal-title { background: #2b5fd9; color: #fff; font-weight: 600; font-size: 16px; padding: 12px 4px; text-align: center; } /* Prev/Next nav links -> NextPrevStyle-CssClass="cal-navlink" */ .cal-navlink { color: #fff; text-decoration: none; font-size: 18px; padding: 0 10px; } .cal-navlink:active { opacity: 0.6; } /* Day-of-week header row -> DayHeaderStyle-CssClass="cal-dayheader" */ .cal-dayheader { background: #eef1f8; color: #4a5570; font-weight: 600; font-size: 11px; text-transform: uppercase; text-align: center; padding: 6px 0; } /* Regular day cell -> DayStyle-CssClass="cal-day" */ .cal-day { text-align: center; vertical-align: middle; padding: 0; height: 42px; border: 1px solid #f0f1f5; } /* Make every day number tappable with a comfortable hit-target on mobile */ .cal-day a, .cal-day span { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 40px; text-decoration: none; color: inherit; } .cal-day a { color: #2c3244; } /* Weekend day cell -> WeekendDayStyle-CssClass="cal-weekend" */ .cal-weekend { background: #fafbfd; } /* Days belonging to prev/next month -> OtherMonthDayStyle-CssClass="cal-othermonth" */ .cal-othermonth { color: #c3c8d4; } /* Today -> TodayDayStyle-CssClass="cal-today" */ .cal-today { background: #eaf0ff; font-weight: 700; border-radius: 6px; } /* Selected day -> SelectedDayStyle-CssClass="cal-selected" */ .cal-selected { background: #2b5fd9 !important; color: #fff !important; font-weight: 700; border-radius: 6px; } /* Disabled/out-of-range day text if you use a LinkButton/Label inside cells */ .cal-day-disabled { color: #d8dbe3; } /* Weekend/next-prev/day-header text sizing shrinks gracefully on very small phones */ @media (max-width: 400px) { .cal-container { font-size: 12px; } .cal-title { font-size: 14px; padding: 10px 2px; } .cal-dayheader { font-size: 10px; padding: 4px 0; } .cal-day { height: 36px; } .cal-day a, .cal-day span { min-height: 34px; } } /* Landscape phones / small tablets: allow a touch more breathing room */ @media (min-width: 401px) and (max-width: 600px) { .cal-container { font-size: 13px; } .cal-day { height: 40px; } } /* Larger screens: cap width so the calendar doesn't stretch too wide */ @media (min-width: 601px) { .cal-container { max-width: 380px; } } /* Dark, in-app Safelisting calendar variant (distinct from the light .cal-* set above) */ .SLCalTitle { font-weight: bold; color: #ffffff; background-color: #007bff; font-size: 24px; height: 40px; width: 100%; border: 1px solid white; } .SLCalNextPrev { color: white; } .SLCalDayHeader { background-color: #323232; text-align: center; font-weight: bold; border: 1px solid #444444; height: 30px; } .SLCalDay { text-align: center; padding: 8px; color: white; font-size: 18px; font-weight: normal; background-color: #323232; border: 1px solid #444444; width: 40px !important; height: 60px !important; } .SLCalToday { background-color: #444444; color: #007bff; font-size: 20px; font-weight: bold; } .SLCalToday_Sub { background-color: #444444; color: #007bff; font-size: 14px; font-weight: bold; } .SLCalSelectedDay { background-color: #007bff; color: black; font-weight: bold; } .SLCalSelectedDay a { color: white !important; } .SLCalOtherMonthDay { text-align: center; padding: 8px; color: #161616; font-size: 20px; font-weight: bold; background-color: #323232; border: 1px solid #565656; width: 40px !important; height: 60px !important; } .SLCalOtherMonthDay:hover { cursor: default; } .SLCalPastDay { text-align: center; padding: 8px; color: #161616; font-size: 20px; font-weight: bold; background-color: #161616; border: 1px solid #323232; width: 40px !important; height: 60px !important; cursor: default; } .SLCalPastDay:hover { cursor: default; } .MyCalColorBox { width: 10px; height: 10px; align-self: start; margin: auto; } /* --------------------------------------------------------- 9. Safelisting components --------------------------------------------------------- */ .SLBox { display: flex; flex-flow: column; font-size: 20px; background-color: #323232; padding: 10px 10px 10px 10px; width: 80px; } .SLBoxRow { display: flex; flex-direction: row; align-items: center; height: 40px; } .SLBoxCategory { display: flex; flex-flow: column; font-size: 14px; text-indent: 4px; text-align: right; padding-right: 10px; text-wrap: nowrap; width: 180px; } .SLBoxTop { border-top: 1px solid #dcdcdc; border-left: 1px solid #dcdcdc; border-right: 1px solid #dcdcdc; border-bottom: none; border-top-left-radius: 8px; border-top-right-radius: 8px; height: 100%; } .SLBoxMid { display: flex; flex-direction: row; border-top: none; border-left: 1px solid #dcdcdc; border-right: 1px solid #dcdcdc; border-bottom: none; } .SLBoxBottom { border-top: none; border-left: 1px solid #dcdcdc; border-right: 1px solid #dcdcdc; border-bottom: 1px solid #dcdcdc; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; height: 100%; } .SLBoxSymbol { height: 100%; align-items: center; } .SLBoxNumber { display: flex; flex-grow: 1; height: 100%; justify-content: flex-end; align-items: center; } .SLParkingArea { border: 1px solid #dcdcdc; border-radius: 4px; padding: 4px 8px 4px 8px; background-color: #323232; font-size: 14px; color: white; margin: 4px; } .SafelistSort { display: flex; flex-flow: row wrap; width: 100%; justify-content: center; font-family: Arial; font-size: 14px; padding: 10px 4px 10px 4px; } .SafelistNotReady { font-size: 42px; display: flex; flex-grow: 1; flex-shrink: 1; height: 100px; width: 100%; color: #4e4e4e; } .SafelistTips { display: flex; flex-flow: row; gap: 0px; width: 100%; border-bottom: 1px solid #aaa; background-color: green; } .SafelistTips:hover { text-decoration: none; } .SafelistTips > :not(:last-child) { border-right: 1px solid #aaa; } .SafelistTip { display: flex; flex-flow: column nowrap; background-color: #323232; padding: 10px 10px 4px 10px; justify-content: flex-end; align-items: center; text-align: center; flex-grow: 1; } .SafelistTip:hover { text-decoration: none; background-color: #254760; } .SafelistTipValue { line-height: 20px; font-size: 20px; color: white; text-decoration: none; flex-grow: 1; } .SafelistTipTitle { color: #428bca; line-height: 12px; font-size: 12px; padding: 4px 0px 2px 0px; text-decoration: none; flex-grow: 1; } .SafelistTipComment { font-size: 12px; line-height: 12px; color: #787878; padding: 4px 0px 0px 0px; justify-content: center; flex-grow: 1; } .SafelistTipLink { display: flex; text-decoration: none; margin: 0px; flex-grow: 1; } .SafelistTipLink:hover { text-decoration: none; margin: 0px; } .SLFuture { font-size: 18px; color: white; } .SLActive { font-size: 18px; color: green; } .SLExpired { font-size: 18px; color: #686868; } .SLImminent { font-size: 18px; color: #eae23f; } .added { color: white; } .removed, .added_r, .denied_started { color: #787878; } .MyColorBox { width: 20px; height: 20px; border: 1px solid #dcdcdc; border-radius: 4px; } /* --------------------------------------------------------- 10. Vehicle lists & license-plate display --------------------------------------------------------- */ .datalist { padding-top: 10px; padding-bottom: 10px; margin-top: 10px; margin-bottom: 10px; color: #fff; } .datalistVehicle { display: inline-flex !important; display: -webkit-box; flex-flow: row; font-family: Arial; background-color: #323232; color: white; font-size: 16px; padding: 0px 10px 0px 0px; gap: 4px; border: 1px solid #ccc; cursor: pointer; text-align: left; vertical-align: middle; align-items: center; justify-content: flex-start; width: 100%; border-radius: 8px; height: 45px; } .datalistVehicle2 { display: inline-flex !important; display: -webkit-box; display: flex; flex-flow: row; font-family: Arial; font-size: 16px; gap: 4px; cursor: pointer; text-align: left; vertical-align: middle; align-items: center; justify-content: flex-start; width: 100%; height: 65px; margin: 0px; color: #dcdcdc; padding: 10px 0px 10px 20px; } .CAPlate16 { font-family: DealerplateCalifornia; font-size: 16px; line-height: 18px; border: 2px double #1433a0; font-weight: normal; padding: 0px 3px 0px 5px; border-radius: 4px; text-align: center; color: #1433a0; background-color: #CECDD2; vertical-align: middle; } .CAPlate22 { font-family: DealerplateCalifornia; font-size: 22px; line-height: 24px; border: 3px double #1433a0; font-weight: normal; padding: 0px 5px 0px 5px; border-radius: 6px; text-align: center; color: #1433a0; background-color: #CECDD2; vertical-align: middle; flex: 0 0 auto; } .IsSingleUse { color: #3b5af7; } .IsOverride { color: #4fe544; } /* --------------------------------------------------------- 11. Forms & inputs --------------------------------------------------------- */ .NormalTextBox { background-color: #191919; border-color: #505050; border-width: 1px; border-style: solid; padding-bottom: 1px; padding-left: 1px; padding-right: 1px; padding-top: 1px; font-weight: normal; text-align: left; vertical-align: bottom; font-family: Arial; font-size: 12px; color: #b4b4b4; -webkit-appearance: none; } .PlateTextBox { background-color: #191919 !important; border: 1px solid #505050; border-radius: 4px !important; padding: 1px !important; font-weight: normal !important; text-align: center; vertical-align: middle; font-family: DealerplateCalifornia; font-size: 22px !important; color: #CECDD2 !important; -webkit-appearance: none; } .NormalDropDownList { box-sizing: border-box; background-color: #191919; border: 1px solid #d1d5db; border-radius: 6px; padding: 10px; font-weight: normal; text-align: left; vertical-align: bottom; font-family: Arial; font-size: 15px; color: #b4b4b4; -webkit-appearance: none; } /* Note: originally duplicated further down the file — kept once here. NormalTextBox is a class, not an element, so "NormalTextBox:focus" only ever matches a literal tag; if that was meant to reuse the .NormalTextBox rule, target ".NormalTextBox:focus" instead. */ input[type="text"]:focus, NormalTextBox:focus { border: 1px solid #505050; outline: none; } .CheckboxWrapper { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .CheckboxWrapper input[type="checkbox"] { margin: 0; flex-shrink: 0; } .CheckboxWrapper label { margin: 0; line-height: 1.2; color: #405d84; } .CheckboxWrapper span { display: flex; align-items: center; gap: 8px; color: #405d84; } .NormalCheckbox input[type="checkbox"] { appearance: none; -webkit-appearance: none; vertical-align: middle; border: 1px solid #dcdcdc; border-radius: 4px; height: 14px; width: 14px; background-color: #b4b4b4; margin: 0; padding: 0; cursor: pointer; position: relative; } .NormalCheckbox input[type="checkbox"]:checked { background-color: #428bca; border-color: #428bca; } .NormalCheckbox input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); } /* Native color picker swatch, normalized across browsers */ input[type="color"] { -webkit-appearance: none; /* Removes default Chrome/Safari styles */ -moz-appearance: none; /* Removes default Firefox styles */ appearance: none; width: 20px; height: 20px; border: none; cursor: pointer; background: transparent; /* Prevents background color leakage */ border-radius: 6px; overflow: hidden; /* Forces the internal swatch to clip to the circle/rounded box */ } input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; } input[type="color"]::-webkit-color-swatch { border: 2px solid #ccc; border-radius: 6px; } input[type="color"]::-moz-color-swatch { border: 2px solid #ccc; border-radius: 6px; box-sizing: border-box; } /* --------------------------------------------------------- 12. Misc utilities --------------------------------------------------------- */ .ClampTwoLines { display: -webkit-box; /* Required for WebKit clamping properties */ -webkit-line-clamp: 2; /* Limits the text to exactly 2 lines */ -webkit-box-orient: vertical; /* Stacks the box contents vertically */ overflow: hidden; /* Hides any text exceeding the two lines */ text-overflow: ellipsis; /* Optional: Adds an ellipsis (...) at the end */ } .HomeSign { font-family: Arial; font-size: 18px; padding: 4px 14px 4px 4px; color: white; border-width: 1px; border-color: #c8c8c8; border-style: solid; background-color: #009900; border-radius: 4px; vertical-align: middle; text-align: left; text-wrap: nowrap; flex-shrink: 0; } .SelectorLink { text-decoration: none; } /* --------------------------------------------------------- 13. Site chrome + homepage content (Default.aspx; the header/ footer/base rules here are shared with any other page that carries class="site-chrome", such as InfoPageTemplate.aspx) Everything here is scoped under body.site-chrome wherever it would otherwise be a bare tag selector (body's own look, a, h1-h3, img/svg, section, footer) so a page that doesn't add class="site-chrome" to is unaffected. Component classes (.hero, .action-card, .p1-btn, .nav-pill, .login-*, etc.) are already uniquely named and need no scoping. The homepage-only content rules (.hero, .actions-grid, .service-list, .book-card, etc.) live in this section too, but are unused on other pages that don't include that markup. --------------------------------------------------------- */ body.site-chrome { background: var(--bg); color: var(--ink); font-family: "Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size: 16px; line-height: 1.5; padding-inline: 20px; } .site-chrome a { color: inherit; } .site-chrome img, .site-chrome svg { max-width: 100%; display: block; } .site-chrome h1, .site-chrome h2, .site-chrome h3 { font-family: "Oswald","Arial Narrow",sans-serif; text-transform: uppercase; text-wrap: balance; margin: 0; letter-spacing: .01em; } .eyebrow { font-family: "IBM Plex Mono",ui-monospace,monospace; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); font-variant-numeric: tabular-nums; } .mono { font-family: "IBM Plex Mono",ui-monospace,monospace; font-variant-numeric: tabular-nums; } .wrap { max-width: 1160px; margin-inline: auto; } .site-chrome header.site { position: sticky; top: 0; z-index: 40; margin-inline: -20px; padding-inline: 20px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--border); } .header-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 12px; max-width: 1160px; margin-inline: auto; } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); } .brand-mark { width: 34px; height: 34px; flex: none; } .brand-name { font-family: "Oswald",sans-serif; font-weight: 600; font-size: 1.15rem; letter-spacing: .03em; text-transform: uppercase; line-height: 1; background: linear-gradient(180deg, #ffffff 10%, #c9d1da 55%, #8b96a3 90%); -webkit-background-clip: text; background-clip: text; color: transparent; } .brand-name small { display: block; font-family: "IBM Plex Mono",monospace; font-size: .6rem; letter-spacing: .16em; color: var(--ink-muted); text-transform: uppercase; margin-top: 3px; } .menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--ink); cursor: pointer; } .menu-btn:hover { border-color: var(--blue); background: color-mix(in srgb, var(--bg-elevated) 80%, white 6%); } .menu-btn svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2.4; } .menu-btn svg line { stroke-linecap: round; } .desktop-nav { display: none; } #nav-panel { display: none; border-top: 1px solid var(--border); padding-block: 10px 16px; } #nav-panel.open { display: block; } #nav-panel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } #nav-panel a { display: block; padding: 11px 8px; border-radius: 8px; font-family: "Oswald",sans-serif; text-transform: uppercase; letter-spacing: .03em; font-size: .95rem; text-decoration: none; } #nav-panel a:hover { background: var(--bg-elevated); } #nav-panel .nav-tone-blue { border-left: 3px solid var(--blue); padding-left: 11px; } #nav-panel .nav-tone-red { border-left: 3px solid var(--red); padding-left: 11px; } .hero { padding-block: 36px 30px; position: relative; } .hero-eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; } .pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); flex: none; box-shadow: 0 0 0 0 color-mix(in srgb, var(--amber) 60%, transparent); animation: pulse 2.4s ease-out infinite; } .pulse-dot-grey { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); flex: none; box-shadow: 0 0 0 0 color-mix(in srgb, var(--amber) 60%, transparent); animation: pulse 2.4s ease-out infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--amber) 55%, transparent); } 70% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--amber) 0%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--amber) 0%, transparent); } } .hero h1 { font-size: clamp(2rem,8vw,3.4rem); line-height: 1.02; font-weight: 700; } .hero h1 em { font-style: normal; color: var(--blue); } .hero p.lede { margin-top: 16px; color: var(--ink-muted); font-size: 1.05rem; max-width: 46ch; } .hero-ctas { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; } .p1-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 20px; border-radius: 10px; text-decoration: none; cursor: pointer; font-family: "Oswald",sans-serif; text-transform: uppercase; letter-spacing: .03em; font-size: .95rem; border: none; transition: transform .15s ease, filter .15s ease; } .p1-btn:active { transform: scale(.98); } .p1-btn-primary { background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 65%, white 20%), var(--blue) 48%, #0d2547); color: var(--btn-primary-ink); } .p1-btn-primary:hover { filter: brightness(1.14); } /* box-shadow instead of a real border: a 1px inset ring adds no box-model size, so this variant renders at the exact same size as p1-btn-primary above without needing a matching (and, on gradients, buggy - see below) transparent border on the shared .p1-btn rule. */ .p1-btn-outline { background: var(--bg-elevated); box-shadow: inset 0 0 0 1px var(--border); color: var(--ink); } .p1-btn-outline:hover { background: color-mix(in srgb, var(--bg-elevated) 80%, white 6%); } .nav-pill { border-radius: 8px; padding: 8px 14px; } .nav-pill-blue { background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 65%, white 20%), var(--blue) 48%, #0d2547); color: #fff !important; } .nav-pill-red { background: linear-gradient(180deg, color-mix(in srgb, var(--red) 65%, white 20%), var(--red) 48%, #5c0d14); color: #fff !important; } .hero-strip { margin-top: 28px; display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg-elevated); box-shadow: var(--shadow); } .hero-strip div { padding: 14px 10px; text-align: center; border-right: 1px solid var(--border); } .hero-strip div:last-child { border-right: none; } .hero-strip .stat { display: block; font-family: "IBM Plex Mono",monospace; font-weight: 600; font-size: 1.05rem; color: var(--ink); font-variant-numeric: tabular-nums; } .hero-strip .stat-label { display: block; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); margin-top: 4px; } .site-chrome section { padding-block: 38px; } .section-head { margin-bottom: 20px; } .section-head .eyebrow { margin-bottom: 8px; } .section-head h2 { font-size: clamp(1.5rem,5vw,2.1rem); } .section-head p { color: var(--ink-muted); margin-top: 8px; max-width: 52ch; } .actions-grid { display: grid; grid-template-columns: 1fr; gap: 14px; } .action-card { display: block; text-decoration: none; color: var(--ink); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); } .action-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .action-icon { width: 44px; height: 44px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center; } .action-icon svg { width: 24px; height: 24px; } .action-file { font-family: "IBM Plex Mono",monospace; font-size: .68rem; color: var(--ink-muted); letter-spacing: .08em; } .action-card h3 { font-size: 1.05rem; margin-top: 14px; letter-spacing: .02em; } .action-card p { margin: 8px 0 0; color: var(--ink-muted); font-size: .92rem; } .action-arrow { margin-top: 14px; display: flex; align-items: center; gap: 6px; font-family: "IBM Plex Mono",monospace; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; } .action-arrow svg { width: 14px; height: 14px; } .tone-blue .action-icon { background: var(--blue-soft); color: var(--blue); } .tone-amber .action-icon { background: var(--amber-soft); color: var(--amber); } .tone-red .action-icon { background: var(--red-soft); color: var(--red); } .tone-blue .action-arrow { color: var(--blue); } .tone-amber .action-arrow { color: var(--amber); } .tone-red .action-arrow { color: var(--red); } .service-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--border); } .service-list li { display: flex; align-items: center; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--border); font-family: "Oswald",sans-serif; text-transform: uppercase; letter-spacing: .02em; font-size: .98rem; } .service-list li span.dot { width: 7px; height: 7px; border-radius: 50%; flex: none; } .dot-blue { background: var(--blue); } .dot-amber { background: var(--amber); } .dot-red { background: var(--red); } .dot-grey { background: var(--grey) } .book-card { display: flex; gap: 16px; align-items: center; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); } .book-cover { width: 60px; height: 78px; flex: none; border-radius: 6px; background: linear-gradient(160deg, var(--blue), var(--btn-primary-bg)); display: flex; align-items: center; justify-content: center; color: #fff; font-family: "IBM Plex Mono",monospace; font-size: 1.5rem; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); } .book-card h3 { font-size: 1rem; font-family: "Oswald",sans-serif; text-transform: none; letter-spacing: 0; } .book-card p { margin: 4px 0 10px; color: var(--ink-muted); font-size: .88rem; } .book-card .p1-btn { padding: 9px 14px; font-size: .78rem; } .site-chrome footer { border-top: 1px solid var(--border); padding-block: 34px 26px; margin-top: 10px; } .foot-grid { display: grid; grid-template-columns: 1fr; gap: 22px; } .foot-col h4 { font-family: "IBM Plex Mono",monospace; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 10px; } .foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } .foot-col a { text-decoration: none; font-size: .92rem; color: var(--amber); } .foot-col a:hover { color: color-mix(in srgb, var(--amber) 70%, white 30%); } .foot-bottom { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; color: var(--ink-muted); font-size: .82rem; } .license-badge { display: inline-flex; align-items: center; gap: 6px; font-family: "IBM Plex Mono",monospace; font-size: .72rem; letter-spacing: .06em; color: var(--ink-muted); border: 1px solid var(--border); border-radius: 999px; padding: 5px 10px; width: fit-content; } .license-badge svg { width: 13px; height: 13px; flex: none; } @media (min-width:640px) { .actions-grid { grid-template-columns: 1fr 1fr; } .foot-grid { grid-template-columns: repeat(2,1fr); } .hero-ctas { flex-direction: row; } .p1-btn { flex: none; } } @media (min-width:900px) { body.site-chrome { padding-inline: 32px; } .site-chrome header .header-row { padding-block: 16px; } .menu-btn { display: none; } .desktop-nav { display: flex; align-items: center; gap: 22px; } .desktop-nav a { text-decoration: none; font-family: "Oswald",sans-serif; text-transform: uppercase; letter-spacing: .03em; font-size: .86rem; color: var(--ink); } .desktop-nav a:hover { color: var(--blue); } .desktop-nav a.nav-pill:hover { color: #fff; filter: brightness(1.15); } .desktop-nav .p1-btn { padding: 10px 16px; font-size: .82rem; } #nav-panel { display: none !important; } .hero { padding-block: 64px 48px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; } .hero-ctas { flex-direction: row; } .hero-strip { grid-column: 1 / -1; margin-top: 40px; } .hero-side { border: 1px solid var(--border); border-radius: 20px; background: var(--bg-elevated); box-shadow: var(--shadow); padding: 26px; align-self: stretch; display: flex; flex-direction: column; justify-content: center; } .actions-grid { grid-template-columns: repeat(4,1fr); } .foot-grid { grid-template-columns: repeat(4,1fr); } .foot-bottom { flex-direction: row; align-items: center; justify-content: space-between; } .service-list { display: grid; grid-template-columns: repeat(3,1fr); border-top: none; } .service-list li { border-bottom: 1px solid var(--border); } .book-card { padding: 26px; } } @media (min-width:1180px) { body.site-chrome { padding-inline: 0; } } /* ===== Login dropdown ===== */ .login-menu { position: relative; } .login-trigger { display: inline-flex; align-items: center; gap: 7px; } .login-trigger .caret { width: 13px; height: 13px; transition: transform .15s ease; flex: none; } .login-trigger[aria-expanded="true"] .caret { transform: rotate(180deg); } .login-dropdown { position: absolute; top: calc(100% + 10px); right: 0; min-width: 248px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; display: flex; flex-direction: column; gap: 2px; z-index: 50; } .login-dropdown[hidden] { display: none; } .login-option { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 8px; text-decoration: none; color: var(--ink); } .login-option:hover, .login-option:focus-visible { background: var(--bg-sunken); } .login-option .dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 6px; flex: none; } .login-option-title { display: block; font-family: "Oswald",sans-serif; text-transform: uppercase; letter-spacing: .02em; font-size: .86rem; color: var(--ink); } .login-option-sub { display: block; font-family: "Public Sans",sans-serif; text-transform: none; letter-spacing: 0; font-size: .72rem; color: var(--ink-muted); margin-top: 2px; } /* Mobile: no popover needed, the nav panel already reads as an open menu */ .nav-login-group { padding-top: 6px; margin-top: 6px; border-top: 1px solid var(--border); } .nav-login-group .eyebrow { display: block; padding: 6px 8px 2px; } #nav-panel a.login-option { display: flex; text-transform: none; padding: 10px 8px; } /* --------------------------------------------------------- 14. Informational pages (InfoPageTemplate.aspx and its copies) A narrower reading column inside the same .wrap used by the header/footer, so long-form pages still line up with them on wide screens. Everything here lives under .site-chrome like the homepage does - duplicate InfoPageTemplate.aspx for a new page and this section styles it automatically. --------------------------------------------------------- */ .info-page { max-width: 760px; margin-inline: auto; padding-block: 36px 64px; } .info-crumb { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 24px; font-family: "IBM Plex Mono",monospace; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); text-decoration: none; } .info-crumb:hover { color: var(--blue); } .info-crumb svg { width: 13px; height: 13px; flex: none; } .info-titlebar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .info-titlebar h1 { font-size: clamp(1.7rem,5vw,2.4rem); } .info-home-btn { flex: none; padding: 9px 16px; font-size: .8rem; } .info-subtitle { margin-top: 10px; color: var(--ink-muted); font-size: 1.05rem; line-height: 1.6; max-width: 60ch; } .info-divider { height: 1px; background: var(--border); margin: 20px 0 32px; border: none; } .info-body { font-size: 1.05rem; line-height: 1.75; color: var(--ink); } .info-body p { margin: 0 0 20px; max-width: 65ch; } .info-body h2 { font-size: 1.3rem; margin: 36px 0 14px; text-wrap: balance; } .info-body h3 { font-size: 1.1rem; margin: 28px 0 10px; text-wrap: balance; } .info-body ul, .info-body ol { margin: 0 0 20px; padding-left: 1.3em; max-width: 65ch; } .info-body li { margin-bottom: 8px; } .info-body a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; } .info-body strong { color: var(--ink); } .info-body blockquote { margin: 24px 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--blue); color: var(--ink-muted); font-style: italic; } .info-actions { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--border); } @media (min-width:640px) { .info-titlebar { flex-wrap: nowrap; } } /* JEB Adds */ .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }