/* ========================================================================== helpspt.css - Help Spot client portal skin Loaded from include/client/header.inc.php, last in the , so plain overrides beat css/osticket.css and assets/default/css/theme.css on source order. Re-add that after any osTicket upgrade. Written 2026-09-07. Two jobs: 1. Make the 2013-era fixed 840px portal responsive. Mobile-first: the base rules ARE the phone layout; min-width queries only scale up. 2. Turn the landing page into a product router for the 12 desks. SPECIFICITY NOTE - read before editing section 3. The landing body renders inside
, and css/thread.css is a normalize reset scoped to that wrapper. Two of its rules actively fight this design: .thread-body a:not(.button) { color:#428bca !important; text-decoration:underline; } .thread-body p { background:none; border:none; } The first is specificity (0,0,2,1) and pins colour with !important. The second strips background and border off any

, which flattened the callout. Every landing selector below therefore carries the #landing_page id, which outranks both - and `color` additionally needs !important, because only !important beats !important. Do not remove either. ========================================================================== */ :root { --hs-ink: #16181C; --hs-ink-2: #4E565F; --hs-ink-3: #78828C; --hs-paper: #F1F0EC; /* warm off-white, biased away from clinical grey */ --hs-surface: #FFFFFF; --hs-rule: #DFDCD4; --hs-rule-soft: #ECEAE4; --hs-accent: #0F5F57; /* deep teal - the single bold colour */ --hs-accent-dk: #0A4640; --hs-accent-wash:#E2EDEB; --hs-focus: #0F5F57; } /* -------------------------------------------------------------------------- 1. Page shell - was a fixed width:840px -------------------------------------------------------------------------- */ body { background: var(--hs-paper); color: var(--hs-ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; } #container { width: auto; max-width: 1060px; margin: 0 auto; padding: 0 18px 40px; background: transparent; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; } /* header: logo above account links on a phone, side by side once there is room */ #container #header { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 18px 0 14px; margin: 0; height: auto; border-bottom: 1px solid var(--hs-rule); } #container #header .pull-right, #container #header .pull-left, #container #header #logo { float: none; margin: 0; } /* The markup puts the account links BEFORE the logo, which float:right used to correct. Flex respects source order, so re-order explicitly: logo leads. */ #container #header #logo { order: -1; } #container #header .pull-right { order: 2; margin-left: auto; } #container #header #logo img { max-width: 210px; height: auto; display: block; } #container #header .pull-right p { margin: 0; font-size: 0.86rem; color: var(--hs-ink-3); } #container #header a { color: var(--hs-accent); text-decoration: none; } #container #header a:hover { text-decoration: underline; } /* Nav strip - scrolls sideways rather than wrapping. theme.css pins #nav and its links to height:20px with a background image, a border-top and a drop shadow. All of it has to be undone explicitly, or 12px of link padding overflows a 20px bar and the labels get clipped. */ #container ul#nav { display: flex; gap: 2px; height: auto; margin: 0; padding: 0; list-style: none; overflow-x: auto; -webkit-overflow-scrolling: touch; border-top: none; border-bottom: 1px solid var(--hs-rule); background: transparent; background-image: none; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; white-space: nowrap; } #container ul#nav li { float: none; margin: 0; display: block; } #container ul#nav li a { display: block; height: auto; line-height: 1.25; padding: 12px 15px; margin-left: 0; font-size: 0.9rem; font-weight: 500; color: var(--hs-ink-2); text-decoration: none; white-space: nowrap; text-align: left; border-radius: 0; border-bottom: 2px solid transparent; background: transparent; background-image: none; } #container ul#nav li a:hover { color: var(--hs-ink); background: var(--hs-rule-soft); } #container ul#nav li a.active { color: var(--hs-accent); border-bottom-color: var(--hs-accent); background: transparent; } #container #content { width: auto; padding: 26px 0 0; margin: 0; border: none; background: transparent; min-height: 0; } #footer { max-width: 1060px; margin: 0 auto; padding: 22px 18px 40px; border-top: 1px solid var(--hs-rule); text-align: center; font-size: 0.82rem; color: var(--hs-ink-3); } #footer p { margin: 0 0 6px; } #footer a { color: var(--hs-ink-3); } /* -------------------------------------------------------------------------- 2. Landing layout - was two fixed columns (565px + 215px) -------------------------------------------------------------------------- */ #landing_page { display: block; } #landing_page .main-content { width: auto; float: none; margin: 0; } #landing_page .sidebar { width: auto; float: none; margin: 0 0 22px; } /* The rail repeats the two CTAs the hero already carries. */ #landing_page .front-page-button { display: none; } /* -------------------------------------------------------------------------- 3. The router - hero + product grid See the specificity note at the top of this file before changing selectors. -------------------------------------------------------------------------- */ #landing_page .hs-hero { padding: 8px 0 26px; border-bottom: 1px solid var(--hs-rule); margin-bottom: 26px; } #landing_page .hs-eyebrow { margin: 0 0 10px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--hs-accent); } #landing_page .hs-hero h1 { margin: 0 0 12px; font-size: 1.75rem; line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; color: var(--hs-ink); text-wrap: balance; } #landing_page .hs-sub { margin: 0; max-width: 60ch; font-size: 1rem; line-height: 1.55; color: var(--hs-ink-2); } #landing_page .hs-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } #landing_page .hs-btn { display: inline-block; padding: 12px 20px; border: 1px solid var(--hs-rule); border-radius: 3px; background: var(--hs-surface); color: var(--hs-ink) !important; /* only !important beats !important */ font-size: 0.94rem; font-weight: 600; text-decoration: none; transition: background 0.14s ease, border-color 0.14s ease; } #landing_page .hs-btn:hover { background: var(--hs-rule-soft); border-color: var(--hs-ink-3); text-decoration: none; } #landing_page .hs-btn-primary { background: var(--hs-accent); border-color: var(--hs-accent); color: #FFFFFF !important; } #landing_page .hs-btn-primary:hover { background: var(--hs-accent-dk); border-color: var(--hs-accent-dk); } #landing_page .hs-section-label { margin: 0 0 14px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--hs-ink-3); } /* one column on a phone; widens with the viewport in section 5 */ #landing_page .hs-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0 0 26px; } #landing_page .hs-card { display: flex; flex-direction: column; gap: 3px; padding: 15px 17px; background: var(--hs-surface); border: 1px solid var(--hs-rule); border-left: 3px solid var(--hs-rule); border-radius: 3px; text-decoration: none; color: var(--hs-ink) !important; transition: border-color 0.14s ease, transform 0.14s ease, box-shadow 0.14s ease; } #landing_page .hs-card:hover { border-left-color: var(--hs-accent); box-shadow: 0 2px 10px -4px rgba(22, 24, 28, 0.28); text-decoration: none; transform: translateY(-1px); } #landing_page .hs-card-name { font-size: 1rem; font-weight: 650; letter-spacing: -0.01em; line-height: 1.25; color: var(--hs-ink); } #landing_page .hs-card-dom { font-size: 0.78rem; line-height: 1.35; color: var(--hs-ink-3); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* the catch-all should read as a fallback, not a thirteenth product */ #landing_page .hs-card-other { background: transparent; border-style: dashed; } #landing_page .hs-card-other .hs-card-name { color: var(--hs-ink-2); font-weight: 600; } #landing_page .hs-note { margin: 0; padding: 14px 16px; background: var(--hs-accent-wash); border: none; border-left: 3px solid var(--hs-accent); border-radius: 3px; font-size: 0.88rem; line-height: 1.5; color: var(--hs-ink-2); } #landing_page .hs-note strong { color: var(--hs-ink); font-weight: 650; } /* -------------------------------------------------------------------------- 4. Shared chrome, so the rest of the portal matches the landing page -------------------------------------------------------------------------- */ #content .button, #content .button:visited, #content input[type="submit"], #content button[type="submit"] { background: var(--hs-accent); border: 1px solid var(--hs-accent); border-radius: 3px; color: #FFFFFF; font-weight: 600; padding: 10px 18px; text-shadow: none; box-shadow: none; } #content .button:hover, #content input[type="submit"]:hover, #content button[type="submit"]:hover { background: var(--hs-accent-dk); border-color: var(--hs-accent-dk); } #content input[type="text"], #content input[type="email"], #content input[type="password"], #content textarea, #content select { max-width: 100%; border: 1px solid var(--hs-rule); border-radius: 3px; padding: 9px 10px; font-size: 1rem; /* >=16px stops iOS zooming the page on focus */ background: var(--hs-surface); color: var(--hs-ink); } #content table { max-width: 100%; } /* visible keyboard focus - the stock theme has none */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, #landing_page .hs-card:focus-visible, #landing_page .hs-btn:focus-visible { outline: 2px solid var(--hs-focus); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } #landing_page .hs-card:hover { transform: none; } } /* -------------------------------------------------------------------------- 5. Scale up. Mobile is the base above; these only add. -------------------------------------------------------------------------- */ @media (min-width: 600px) { #landing_page .hs-grid { grid-template-columns: repeat(2, 1fr); } #landing_page .hs-hero h1 { font-size: 2.05rem; } #container { padding: 0 26px 48px; } #footer { padding: 22px 26px 48px; } } @media (min-width: 860px) { #container #header { flex-direction: row; align-items: center; justify-content: space-between; padding: 22px 0 16px; } #container #header .pull-right { text-align: right; } /* two columns again, but fluid: content flexes, sidebar is a fixed rail */ #landing_page { display: flex; align-items: flex-start; gap: 30px; } #landing_page .main-content { flex: 1 1 auto; min-width: 0; } #landing_page .sidebar { flex: 0 0 220px; order: 2; margin: 0; } /* The rail only ever carries knowledge-base links and "other resources" pages. With the KB off it renders empty, and theme.css hiding the inner .content still leaves a 220px flex item reserving space. Collapse the whole rail when its content div has no children. Browsers without :has() simply keep the empty rail - no breakage, just the old behaviour. */ #landing_page .sidebar:not(:has(> .content > *)) { display: none; } #landing_page .hs-grid { grid-template-columns: repeat(3, 1fr); } #landing_page .hs-hero h1 { font-size: 2.25rem; } } @media (min-width: 1000px) { #landing_page .hs-grid { grid-template-columns: repeat(4, 1fr); } } /* the portal is a light-only app; print should be plain */ @media print { #container ul#nav, #landing_page .sidebar, #landing_page .hs-actions { display: none; } body { background: #FFFFFF; } }