) ============================================================================================ */ :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) { --navy: #0B2A5B; --navy-mid: #143A73; --navy-deep: #061833; --navy-soft: #E8EEF6; --blue-wash: #F0F5FC; --blue-glow: #1B4F9C; --orange: #F05A28; --orange-hover: #D94A1C; --orange-soft: #FFF0EB; --bg: #FFFFFF; --bg-alt: #F5F7FA; --text: #1A2332; --text-muted: #5A6577; --border: #E2E8F0; --radius: 14px; --radius-sm: 9px; --shadow: 0 4px 20px rgba(11,42,91,0.07); --shadow-md: 0 10px 36px rgba(11,42,91,0.12); --shadow-lg: 0 16px 48px rgba(11,42,91,0.16); --shadow-btn: 0 4px 14px rgba(240,90,40,0.35); --max: 1120px; --font: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; } .sh-page-home { --navy: #0B2A5B; --navy-mid: #143A73; --navy-deep: #061833; --navy-soft: #E8EEF6; --wash: #F3F6FB; --orange: #F05A28; --orange-d: #C9431A; --orange-soft: #FFF1EB; --text: #1A2332; --muted: #556173; --border: #DFE5EE; --r: 16px; --max: 1160px; --sh1: 0 1px 2px rgba(11,42,91,.06),0 4px 14px rgba(11,42,91,.06); --sh2: 0 2px 4px rgba(11,42,91,.06),0 16px 40px rgba(11,42,91,.12); --font: "Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; } /* ===== v2 style alignment ===== */ :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) { --font: "Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --border: #DFE5EE; --muted: #556173; --text-muted: #556173; --orange-d: #C9431A; --sh1: 0 1px 2px rgba(11,42,91,.06),0 4px 14px rgba(11,42,91,.06); --sh2: 0 2px 4px rgba(11,42,91,.06),0 16px 40px rgba(11,42,91,.12); } /* ============================================================================================ 2. RESET: isolates the redesign from Bootstrap 3 (Spacelab), site.css and Kendo The wrapper and the layout footer start from CSS initial values (nothing inherited from the layout's body: font, colour, line-height ...). Then every library declaration that can reach an element inside them is reverted to the browser default with the library selector's own specificity (:where() adds none), so it beats the library but loses to every redesign rule below. ============================================================================================ */ .sh-site { all: initial; display: flow-root; } body > .footer { all: initial; display: block; } :where(.sh-site, body > .footer) article, :where(.sh-site, body > .footer) aside, :where(.sh-site, body > .footer) details, :where(.sh-site, body > .footer) figcaption, :where(.sh-site, body > .footer) footer, :where(.sh-site, body > .footer) header, :where(.sh-site, body > .footer) hgroup, :where(.sh-site, body > .footer) main, :where(.sh-site, body > .footer) menu, :where(.sh-site, body > .footer) nav, :where(.sh-site, body > .footer) section, :where(.sh-site, body > .footer) summary, :where(.sh-site, body > .footer) [hidden], :where(.sh-site, body > .footer) template, :where(.sh-site, body > .footer) input[type="file"] { display: revert; } :where(.sh-site, body > .footer) figure { display: revert; margin: revert; } :where(.sh-site, body > .footer) audio, :where(.sh-site, body > .footer) canvas, :where(.sh-site, body > .footer) progress, :where(.sh-site, body > .footer) video { display: revert; vertical-align: revert; } :where(.sh-site, body > .footer) audio:not([controls]) { display: revert; height: revert; } :where(.sh-site, body > .footer) a { background-color: revert; color: revert; text-decoration: revert; } :where(.sh-site, body > .footer) a:active { outline: revert; } :where(.sh-site, body > .footer) a:hover { color: revert; outline: revert; text-decoration: revert; } :where(.sh-site, body > .footer) abbr[title] { border-bottom: revert; cursor: revert; text-decoration: revert; } :where(.sh-site, body > .footer) b, :where(.sh-site, body > .footer) strong { font-weight: revert; } :where(.sh-site, body > .footer) dfn { font-style: revert; } :where(.sh-site, body > .footer) h1 { color: revert; font-family: revert; font-size: revert; font-weight: revert; line-height: revert; margin: revert; margin-bottom: revert; margin-top: revert; } :where(.sh-site, body > .footer) mark { background: revert; background-color: revert; color: revert; padding: revert; } :where(.sh-site, body > .footer) small { font-size: revert; } :where(.sh-site, body > .footer) sub { bottom: revert; font-size: revert; line-height: revert; position: revert; vertical-align: revert; } :where(.sh-site, body > .footer) sup { font-size: revert; line-height: revert; position: revert; top: revert; vertical-align: revert; } :where(.sh-site, body > .footer) img { border: revert; vertical-align: revert; } :where(.sh-site, body > .footer) svg:not(:root) { overflow: revert; } :where(.sh-site, body > .footer) hr { border: revert; border-top: revert; box-sizing: revert; height: revert; margin-bottom: revert; margin-top: revert; } :where(.sh-site, body > .footer) pre { background-color: revert; border: revert; border-radius: revert; color: revert; display: revert; font-family: revert; font-size: revert; line-height: revert; margin: revert; overflow: revert; padding: revert; word-break: revert; word-wrap: revert; } :where(.sh-site, body > .footer) code { background-color: revert; border-radius: revert; color: revert; font-family: revert; font-size: revert; padding: revert; } :where(.sh-site, body > .footer) kbd { background-color: revert; border-radius: revert; box-shadow: revert; color: revert; font-family: revert; font-size: revert; padding: revert; } :where(.sh-site, body > .footer) samp { font-family: revert; font-size: revert; } :where(.sh-site, body > .footer) button { -webkit-appearance: revert; color: revert; cursor: revert; font: revert; font-family: revert; font-size: revert; line-height: revert; margin: revert; overflow: revert; text-transform: revert; } :where(.sh-site, body > .footer) input { color: revert; font: revert; font-family: revert; font-size: revert; line-height: revert; margin: revert; max-width: revert; } :where(.sh-site, body > .footer) optgroup { color: revert; font: revert; font-weight: revert; margin: revert; } :where(.sh-site, body > .footer) select { color: revert; font: revert; font-family: revert; font-size: revert; line-height: revert; margin: revert; max-width: revert; text-transform: revert; } :where(.sh-site, body > .footer) textarea { color: revert; font: revert; font-family: revert; font-size: revert; height: revert; line-height: revert; margin: revert; overflow: revert; width: revert; } html :where(.sh-site, body > .footer) input[type="button"], :where(.sh-site, body > .footer) input[type="reset"], :where(.sh-site, body > .footer) input[type="submit"] { -webkit-appearance: revert; cursor: revert; } :where(.sh-site, body > .footer) button[disabled], html :where(.sh-site, body > .footer) input[disabled], :where(.sh-site, body > .footer) [role="button"], :where(.sh-site, body > .footer) abbr[data-original-title], :where(.sh-site, body > .footer) input[type="radio"][disabled], :where(.sh-site, body > .footer) input[type="checkbox"][disabled], :where(.sh-site, body > .footer) fieldset[disabled] input[type="radio"], :where(.sh-site, body > .footer) fieldset[disabled] input[type="checkbox"] { cursor: revert; } :where(.sh-site, body > .footer) button::-moz-focus-inner, :where(.sh-site, body > .footer) input::-moz-focus-inner { border: revert; padding: revert; } :where(.sh-site, body > .footer) input[type="checkbox"], :where(.sh-site, body > .footer) input[type="radio"] { box-sizing: revert; line-height: revert; margin: revert; margin-top: revert; padding: revert; } :where(.sh-site, body > .footer) input[type="number"]::-webkit-inner-spin-button, :where(.sh-site, body > .footer) input[type="number"]::-webkit-outer-spin-button, :where(.sh-site, body > .footer) select[multiple], :where(.sh-site, body > .footer) select[size] { height: revert; } :where(.sh-site, body > .footer) input[type="search"] { -webkit-appearance: revert; appearance: revert; box-sizing: revert; } :where(.sh-site, body > .footer) input[type="search"]::-webkit-search-cancel-button, :where(.sh-site, body > .footer) input[type="search"]::-webkit-search-decoration { -webkit-appearance: revert; } :where(.sh-site, body > .footer) fieldset { -moz-border-radius: revert; -webkit-border-radius: revert; border: revert; border-radius: revert; margin: revert; min-width: revert; padding: revert; } :where(.sh-site, body > .footer) legend { border: revert; border-bottom: revert; color: revert; display: revert; font-size: revert; line-height: revert; margin-bottom: revert; padding: revert; width: revert; } :where(.sh-site, body > .footer) table { background-color: revert; border-collapse: revert; border-spacing: revert; } :where(.sh-site, body > .footer) td { padding: revert; } :where(.sh-site, body > .footer) th { padding: revert; text-align: revert; } :where(.sh-site, body > .footer) *, :where(.sh-site, body > .footer) *:before, :where(.sh-site, body > .footer) *:after { box-sizing: revert; } :where(.sh-site, body > .footer) a:focus { color: revert; outline: revert; outline-offset: revert; text-decoration: revert; } :where(.sh-site, body > .footer) h2, :where(.sh-site, body > .footer) h3, :where(.sh-site, body > .footer) h4, :where(.sh-site, body > .footer) h5, :where(.sh-site, body > .footer) h6 { color: revert; font-family: revert; font-size: revert; font-weight: revert; line-height: revert; margin-bottom: revert; margin-top: revert; } :where(.sh-site, body > .footer) h1 small, :where(.sh-site, body > .footer) h2 small, :where(.sh-site, body > .footer) h3 small, :where(.sh-site, body > .footer) h4 small, :where(.sh-site, body > .footer) h5 small, :where(.sh-site, body > .footer) h6 small { color: revert; font-size: revert; font-weight: revert; line-height: revert; } :where(.sh-site, body > .footer) p { margin: revert; } :where(.sh-site, body > .footer) ul, :where(.sh-site, body > .footer) ol, :where(.sh-site, body > .footer) dl { margin-bottom: revert; margin-top: revert; } :where(.sh-site, body > .footer) ul ul, :where(.sh-site, body > .footer) ol ul, :where(.sh-site, body > .footer) ul ol, :where(.sh-site, body > .footer) ol ol, :where(.sh-site, body > .footer) blockquote p:last-child, :where(.sh-site, body > .footer) blockquote ul:last-child, :where(.sh-site, body > .footer) blockquote ol:last-child { margin-bottom: revert; } :where(.sh-site, body > .footer) dt { font-weight: revert; line-height: revert; } :where(.sh-site, body > .footer) dd { line-height: revert; margin-left: revert; } :where(.sh-site, body > .footer) blockquote { border-left: revert; font-size: revert; margin: revert; padding: revert; } :where(.sh-site, body > .footer) blockquote footer, :where(.sh-site, body > .footer) blockquote small { color: revert; display: revert; font-size: revert; line-height: revert; } :where(.sh-site, body > .footer) blockquote footer:before, :where(.sh-site, body > .footer) blockquote small:before { content: revert; } :where(.sh-site, body > .footer) address { font-style: revert; line-height: revert; margin-bottom: revert; } :where(.sh-site, body > .footer) kbd kbd { box-shadow: revert; font-size: revert; font-weight: revert; padding: revert; } :where(.sh-site, body > .footer) pre code { background-color: revert; border-radius: revert; color: revert; font-size: revert; padding: revert; white-space: revert; } :where(.sh-site, body > .footer) .container { margin-left: revert; margin-right: revert; padding-left: revert; padding-right: revert; width: revert; } :where(.sh-site, body > .footer) table col[class*="col-"], :where(.sh-site, body > .footer) table td[class*="col-"], :where(.sh-site, body > .footer) table th[class*="col-"] { display: revert; float: revert; position: revert; } :where(.sh-site, body > .footer) caption { color: revert; padding-bottom: revert; padding-top: revert; text-align: revert; } :where(.sh-site, body > .footer) label { display: revert; font-weight: revert; margin-bottom: revert; margin-left: revert; max-width: revert; } :where(.sh-site, body > .footer) input[type="range"] { display: revert; width: revert; } :where(.sh-site, body > .footer) input[type="file"]:focus, :where(.sh-site, body > .footer) input[type="radio"]:focus, :where(.sh-site, body > .footer) input[type="checkbox"]:focus { outline: revert; outline-offset: revert; } :where(.sh-site, body > .footer) output { color: revert; display: revert; font-size: revert; line-height: revert; padding-top: revert; } :where(.sh-site, body > .footer) .container:before { content: revert; display: revert; } :where(.sh-site, body > .footer) .container:after { clear: revert; content: revert; display: revert; } :where(.sh-site, body > .footer) li { padding-bottom: revert; } :where(.sh-site, body > .footer) div[id=T47Phone], :where(.sh-site, body > .footer) div[id=T47Phone2] { -moz-background-size: revert; -webkit-background-size: revert; background-color: revert; background-image: revert; background-position: revert; background-repeat: revert; background-size: revert; display: revert; height: revert; padding: revert; width: revert; } :where(.sh-site, body > .footer) div[id=safe], :where(.sh-site, body > .footer) div[id=safe2], :where(.sh-site, body > .footer) div[id=CaseManagement], :where(.sh-site, body > .footer) div[id=CaseManagement2], :where(.sh-site, body > .footer) div[id=howmuch] { -moz-background-size: revert; -webkit-background-size: revert; background-color: revert; background-image: revert; background-position: revert; background-repeat: revert; background-size: revert; display: revert; height: revert; width: revert; } /* ============================================================================================ 3. BASE: element defaults for the marketing pages (wrapper = the old rules, headings, links, images) ============================================================================================ */ .sh-site *, .sh-site *::before, .sh-site *::after { box-sizing: border-box; margin: 0; padding: 0; } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) { font-family: var(--font); color: var(--text); background: var(--bg); line-height: 1.6; font-size: 16px; -webkit-font-smoothing: antialiased; } .sh-page-home { font-family: var(--font); color: var(--text); background: #fff; line-height: 1.65; font-size: 17px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .sh-site a { color: inherit; text-decoration: none; } .sh-site img { display: block; max-width: 100%; height: auto; } .sh-site svg { display: block; } :is(.sh-page-home,.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) ul { list-style: none; } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .sh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; font-weight: 600; font-size: 14px; line-height: 1.2; padding: 11px 20px; border-radius: var(--radius-sm); border: 2px solid transparent; cursor: pointer; transition: background 0.18s,color 0.18s,border-color 0.18s,box-shadow 0.18s,transform 0.18s; white-space: nowrap; } /* kept here: must come before a later rule */ :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .sh-btn-primary { background: var(--orange); color: #fff; border-color: var(--orange); box-shadow: var(--shadow-btn); } /* kept here: must come before a later rule */ :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .site-header { background-color: #446e9b; border-bottom: 1px solid #345578; padding: 0; position: relative; z-index: 100; font-family: "Roboto Condensed","Arial Narrow",system-ui,sans-serif; } /* kept here: must come before a later rule */ :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .hero-logo { display: block; height: 80px; width: auto; margin-bottom: 20px; border-radius: 6px; } /* kept here: must come before a later rule */ /* ——— HERO ——— */ .sh-page-casemanagement .hero-photo { border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid rgba(11,42,91,0.08); aspect-ratio: 4 / 3; background: #e8edf4; display: flex; align-items: center; justify-content: center; padding: 12px; } /* kept here: must come before a later rule */ :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .hero-photo { border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid rgba(11,42,91,0.08); aspect-ratio: 4 / 3; background: #e8edf4; } /* kept here: must come before a later rule */ :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) section { padding: 80px 0; position: relative; } /* Audience cards */ .sh-page-navex .audience-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 26px; box-shadow: var(--shadow); } /* kept here: must come before a later rule */ /* Comparison table */ .sh-page-navex .compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow-md); background: #fff; } /* kept here: must come before a later rule */ .sh-page-navex .compare-table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 14.5px; } /* kept here: must come before a later rule */ :is(.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .faq-item { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; transition: box-shadow 0.2s,border-color 0.2s; } /* kept here: must come before a later rule */ .sh-page-reasons .overview-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 24px; box-shadow: var(--shadow); transition: box-shadow 0.22s,transform 0.22s,border-color 0.22s; text-align: left; } /* kept here: must come before a later rule */ .sh-page-reasons .overview-num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(145deg,var(--navy) 0%,var(--blue-glow) 100%); color: #fff; font-weight: 750; font-size: 16px; margin-bottom: 16px; box-shadow: 0 4px 12px rgba(11,42,91,0.22); } /* kept here: must come before a later rule */ .sh-page-reasons .reason-badge { width: 36px; height: 36px; border-radius: 10px; background: var(--orange); color: #fff; font-weight: 750; font-size: 15px; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-btn); flex-shrink: 0; } /* kept here: must come before a later rule */ .sh-page-reasons .benefit-item { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow); } /* kept here: must come before a later rule */ .sh-page-reasons .acfe-banner { background: linear-gradient(135deg,var(--navy) 0%,var(--navy-mid) 55%,var(--blue-glow) 100%); color: #fff; border-radius: var(--radius); padding: 28px 28px; margin-bottom: 28px; box-shadow: var(--shadow-md); position: relative; overflow: hidden; } /* kept here: must come before a later rule */ .sh-page-reasons .stat-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 18px; box-shadow: var(--shadow); text-align: center; } /* kept here: must come before a later rule */ .sh-page-reasons .chart-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); } /* kept here: must come before a later rule */ .sh-page-reasons .compare-track { height: 12px; background: var(--navy-soft); border-radius: 999px; overflow: hidden; } /* kept here: must come before a later rule */ .sh-page-reasons .compare-fill { height: 100%; border-radius: 999px; } /* kept here: must come before a later rule */ .sh-page-reasons .finding-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; background: var(--blue-wash); border-radius: 10px; border: 1px solid rgba(11,42,91,0.06); } /* kept here: must come before a later rule */ /* ——— Capability grid ——— */ .sh-page-casemanagement .cap-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 22px; box-shadow: var(--shadow); transition: box-shadow 0.22s,transform 0.22s,border-color 0.22s; } /* kept here: must come before a later rule */ .sh-page-features .cap-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 22px; box-shadow: var(--shadow); transition: box-shadow 0.22s,transform 0.22s,border-color 0.22s; scroll-margin-top: 24px; } /* kept here: must come before a later rule */ :is(.sh-page-features,.sh-page-casemanagement) .cap-icon { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(145deg,var(--navy) 0%,var(--blue-glow) 100%); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; box-shadow: 0 4px 12px rgba(11,42,91,0.22); } /* kept here: must come before a later rule */ /* ——— How to use steps ——— */ .sh-page-casemanagement .step-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); display: grid; grid-template-columns: 52px 1fr minmax(220px,320px); gap: 18px; align-items: start; transition: box-shadow 0.22s,transform 0.22s,border-color 0.22s; } /* kept here: must come before a later rule */ .sh-page-casemanagement .step-shot { border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--blue-wash); box-shadow: var(--shadow); } /* kept here: must come before a later rule */ .sh-page-casemanagement .step-icon-wrap { width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(145deg,var(--navy) 0%,var(--blue-glow) 100%); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(11,42,91,0.28); position: relative; } /* kept here: must come before a later rule */ .sh-page-casemanagement .step-num { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 50%; background: var(--orange); color: #fff; font-weight: 750; font-size: 11px; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; } /* kept here: must come before a later rule */ .sh-page-casemanagement .step-note { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--orange); background: var(--orange-soft); padding: 4px 10px; border-radius: 999px; } /* kept here: must come before a later rule */ /* Flow steps */ .sh-page-services .flow-band { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 32px 28px; box-shadow: var(--shadow); scroll-margin-top: 24px; } /* kept here: must come before a later rule */ .sh-page-services .flow-num { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(145deg,var(--navy) 0%,var(--blue-glow) 100%); color: #fff; font-weight: 800; font-size: 18px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 12px rgba(11,42,91,0.22); } /* kept here: must come before a later rule */ .sh-page-services .channel-card { background: var(--blue-wash); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px 16px 14px; } /* kept here: must come before a later rule */ /* Poster gallery */ .sh-page-services .poster-item { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 12px; box-shadow: var(--shadow); transition: transform 0.18s,box-shadow 0.18s; } /* kept here: must come before a later rule */ /* CMS split */ .sh-page-services .cms-shot { border-radius: 14px; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-md); background: var(--blue-wash); } /* kept here: must come before a later rule */ /* Story split */ :is(.sh-page-about,.sh-page-nonprofit,.sh-page-policytemplate) .story-photo { border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid rgba(11,42,91,0.08); aspect-ratio: 4 / 3; background: #e8edf4; } /* kept here: must come before a later rule */ /* Serve */ :is(.sh-page-about,.sh-page-nonprofit,.sh-page-policytemplate) .serve-panel { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 36px 32px; box-shadow: var(--shadow); max-width: 820px; margin: 0 auto; text-align: center; } /* kept here: must come before a later rule */ /* Values */ :is(.sh-page-about,.sh-page-nonprofit,.sh-page-policytemplate) .value-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 20px 22px; box-shadow: var(--shadow); transition: box-shadow 0.2s,transform 0.2s; } /* kept here: must come before a later rule */ :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 22px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 13px; opacity: 0.8; } /* kept here: must come before a later rule */ /* ===== v2 style alignment ===== */ :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) { font-family: var(--font); -webkit-font-smoothing: antialiased; } .sh-site :focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 6px; } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) h1, :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) h2, :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) h3 { letter-spacing: -.02em; text-wrap: balance; } .sh-page-home h1, .sh-page-home h2, .sh-page-home h3, .sh-page-home h4 { color: var(--navy); letter-spacing: -.02em; line-height: 1.2; text-wrap: balance; } .sh-page-home h2 { font-size: clamp(1.75rem,3vw,2.4rem); font-weight: 800; } /* ============================================================================================ 4. COMPONENTS: shared by two or more marketing pages (header, buttons, cards, CTA, footer ...) ============================================================================================ */ :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .sh-container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange); margin-bottom: 12px; } :is(.sh-page-services,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq) .eyebrow-light { color: rgba(255,200,160,0.95); } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .sh-btn-primary:hover { background: var(--orange-hover); border-color: var(--orange-hover); box-shadow: 0 6px 20px rgba(240,90,40,0.45); transform: translateY(-1px); } :is(.sh-page-services,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq) .btn-outline { background: rgba(255,255,255,0.75); color: var(--navy); border-color: var(--navy); } :is(.sh-page-services,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq) .btn-outline:hover { background: var(--navy); color: #fff; } :is(.sh-page-services,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq) .btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.55); } :is(.sh-page-services,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq) .btn-outline-light:hover { background: rgba(255,255,255,0.14); border-color: #fff; } :is(.sh-page-services,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq) .btn-lg { padding: 15px 28px; font-size: 16px; } :is(.sh-page-about,.sh-page-services,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) a.inline { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } :is(.sh-page-about,.sh-page-services,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) a.inline:hover { color: var(--orange); } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .site-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 50px; padding: 6px 15px; max-width: 1140px; margin: 0 auto; } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .site-nav-links { display: flex; align-items: center; gap: 0; list-style: none; flex-wrap: wrap; margin: 0; padding: 0; } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .site-nav-links a { display: block; padding: 12px 12px; font-size: 15px; font-weight: 500; color: #dddddd; transition: color 0.15s,background 0.15s; white-space: nowrap; } .sh-page-faq .site-nav-links a:hover, .sh-page-faq .site-nav-links a[aria-current="page"] { color: #fff; background: rgba(0,0,0,0.12); text-decoration: none; } /* kept here: must come before a later rule */ :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .site-nav-links a:hover { color: #fff; background: rgba(0,0,0,0.12); text-decoration: none; } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .site-nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; list-style: none; margin: 0; padding: 0; } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .site-nav-actions a { display: inline-block; font-size: 14px; font-weight: 600; font-family: "Roboto Condensed","Arial Narrow",system-ui,sans-serif; background: #04276b; color: #fff; padding: 7px 12px; border-radius: 3px; border: 0; text-align: center; white-space: nowrap; transition: background 0.2s,border-color 0.2s; line-height: 1.3; } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .site-nav-actions a:hover { background: #446e9b; border: 1px solid #000; color: #fff; } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .hero { position: relative; padding: 64px 0 72px; overflow: hidden; background: radial-gradient(ellipse 80% 70% at 90% 15%,rgba(27,79,156,0.16) 0%,transparent 55%),radial-gradient(ellipse 50% 40% at 5% 90%,rgba(240,90,40,0.06) 0%,transparent 50%),linear-gradient(165deg,#F7FAFE 0%,#EAF0F9 42%,#F5F7FA 100%); } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(11,42,91,0.035) 1px,transparent 1px),linear-gradient(90deg,rgba(11,42,91,0.035) 1px,transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse 70% 80% at 40% 40%,#000 15%,transparent 75%); pointer-events: none; } :is(.sh-page-faq,.sh-page-navex) .hero-layout { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 40px; align-items: center; } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-nonprofit,.sh-page-policytemplate) .hero-layout { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-nonprofit,.sh-page-policytemplate) .hero h1 { font-size: clamp(2rem,3.8vw,2.75rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.03em; color: var(--navy); margin-bottom: 18px; } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .hero h1 .accent-line { background: linear-gradient(transparent 68%,rgba(240,90,40,0.22) 68%); } .sh-page-navex .hero .subhead { font-size: 1.08rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 28px; max-width: 560px; } /* kept here: must come before a later rule */ .sh-page-navex .hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; } /* kept here: must come before a later rule */ :is(.sh-page-features,.sh-page-casemanagement) .hero .subhead { font-size: 1.12rem; color: var(--text-muted); line-height: 1.55; margin-bottom: 28px; max-width: 520px; } :is(.sh-page-about,.sh-page-services,.sh-page-reasons,.sh-page-faq,.sh-page-nonprofit,.sh-page-policytemplate) .hero .subhead { font-size: 1.12rem; color: var(--text-muted); line-height: 1.55; margin-bottom: 28px; max-width: 540px; } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-nonprofit,.sh-page-policytemplate) .hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .hero-photo-wrap { position: relative; } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; } :is(.sh-page-services,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq) .hero-float { position: absolute; z-index: 3; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; box-shadow: var(--shadow-md); display: flex; align-items: center; gap: 10px; max-width: 220px; } :is(.sh-page-services,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq) .hero-float strong { display: block; font-size: 13px; font-weight: 700; color: var(--navy); line-height: 1.25; } :is(.sh-page-services,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq) .hero-float span { font-size: 11.5px; color: var(--text-muted); font-weight: 500; } :is(.sh-page-services,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq) .hero-float.f2 { top: 18px; right: -10px; padding: 10px 14px; max-width: none; } :is(.sh-page-services,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq) .hero-float.f2 .lock-icon { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(145deg,var(--navy),var(--blue-glow)); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } :is(.sh-page-services,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq) .hero-float.f2 .lock-icon svg { width: 16px; height: 16px; } :is(.sh-page-services,.sh-page-casemanagement,.sh-page-faq) .hero-float.f1 { bottom: -16px; left: -12px; } :is(.sh-page-services,.sh-page-casemanagement,.sh-page-faq) .hero-float.f1 .ticon { width: 44px; height: 44px; border-radius: 8px; background: var(--orange-soft); color: var(--orange); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } :is(.sh-page-services,.sh-page-casemanagement,.sh-page-faq) .hero-float.f1 .ticon svg { width: 22px; height: 22px; } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .section-alt { background: var(--bg-alt); } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .section-wash { background: linear-gradient(180deg,var(--blue-wash) 0%,#fff 100%); } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-nonprofit,.sh-page-policytemplate) .section-head { text-align: center; margin-bottom: 52px; } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-nonprofit,.sh-page-policytemplate) .section-head h2 { font-size: clamp(1.6rem,2.6vw,2rem); font-weight: 750; color: var(--navy); letter-spacing: -0.025em; margin-bottom: 12px; } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-nonprofit,.sh-page-policytemplate) .section-head p { font-size: 1.05rem; color: var(--text-muted); max-width: 560px; margin: 0 auto; } :is(.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .faq-accordion { display: flex; flex-direction: column; gap: 12px; max-width: 820px; margin: 0 auto; } :is(.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .faq-item[open] { border-color: rgba(11,42,91,0.18); box-shadow: var(--shadow-md); } :is(.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px; font-size: 1.02rem; font-weight: 700; color: var(--navy); line-height: 1.35; user-select: none; } :is(.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .faq-item summary::-webkit-details-marker { display: none; } :is(.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .faq-item summary::after { content: ""; flex-shrink: 0; width: 22px; height: 22px; margin-top: 2px; background: var(--navy-soft); border-radius: 6px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2A5B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 14px; transition: transform 0.2s,background-color 0.2s; } :is(.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .faq-item[open] summary::after { transform: rotate(180deg); background-color: var(--orange-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F05A28' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); } :is(.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .faq-item summary:hover { color: var(--blue-glow); } :is(.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .faq-answer { padding: 0 20px 20px; font-size: 15px; color: var(--text-muted); line-height: 1.6; } :is(.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .faq-answer p + p { margin-top: 12px; } :is(.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .faq-answer a { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } :is(.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .faq-answer a:hover { color: var(--orange); } .sh-page-reasons .overview-card a { display: inline-block; margin-top: 14px; font-size: 13.5px; font-weight: 600; color: var(--orange); } /* kept here: must come before a later rule */ .sh-page-reasons .benefit-block h3 { font-size: 14px; font-weight: 700; color: var(--navy); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 10px; } /* kept here: must come before a later rule */ .sh-page-reasons .benefit-list { display: flex; flex-direction: column; gap: 10px; } /* kept here: must come before a later rule */ .sh-page-reasons .benefit-item .check { width: 22px; height: 22px; border-radius: 6px; background: var(--orange-soft); color: var(--orange); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; } /* kept here: must come before a later rule */ .sh-page-reasons .benefit-item .check svg { width: 14px; height: 14px; } /* kept here: must come before a later rule */ .sh-page-reasons .benefit-item strong { display: block; font-size: 14.5px; font-weight: 700; color: var(--navy); margin-bottom: 2px; line-height: 1.3; } /* kept here: must come before a later rule */ :is(.sh-page-features,.sh-page-casemanagement) .cap-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; } :is(.sh-page-features,.sh-page-casemanagement) .cap-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: rgba(11,42,91,0.15); } :is(.sh-page-features,.sh-page-casemanagement) .cap-icon svg { width: 20px; height: 20px; } :is(.sh-page-features,.sh-page-casemanagement) .cap-card h3 { font-size: 1.02rem; font-weight: 700; color: var(--navy); margin-bottom: 8px; line-height: 1.3; } :is(.sh-page-features,.sh-page-casemanagement) .cap-card p { font-size: 14.5px; color: var(--text-muted); line-height: 1.5; } /* Values */ :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .soft-cta { background: linear-gradient(135deg,var(--navy) 0%,var(--navy-mid) 55%,var(--blue-glow) 100%); color: #fff; padding: 64px 0; position: relative; overflow: hidden; } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .soft-cta::before { content: ""; position: absolute; top: -30%; right: -5%; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle,rgba(240,90,40,0.25),transparent 70%); pointer-events: none; } /* FAQ */ .sh-page-navex .soft-cta-inner { text-align: center; max-width: 680px; margin: 0 auto; position: relative; z-index: 1; } /* kept here: must come before a later rule */ /* Values */ :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-nonprofit,.sh-page-policytemplate) .soft-cta-inner { text-align: center; max-width: 640px; margin: 0 auto; position: relative; z-index: 1; } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .soft-cta h2 { font-size: clamp(1.45rem,2.4vw,1.85rem); font-weight: 750; letter-spacing: -0.02em; margin-bottom: 12px; } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .soft-cta p { font-size: 15.5px; opacity: 0.88; line-height: 1.55; margin-bottom: 28px; } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .soft-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .footer { background: var(--navy-deep); color: rgba(255,255,255,0.72); padding: 56px 0 28px; font-size: 14px; position: relative; overflow: hidden; } :is(.sh-page-about,.sh-page-services,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-nonprofit,.sh-page-policytemplate) .footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg,var(--navy-mid),var(--orange),var(--navy-mid)); } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .footer-inner { display: grid; grid-template-columns: 1.4fr 1fr 0.8fr; gap: 40px; margin-bottom: 40px; } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .footer-brand .logo { margin-bottom: 14px; } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .footer-brand .logo img { height: 48px; width: auto; border-radius: 6px; } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .footer-brand p { line-height: 1.65; max-width: 300px; } :is(.sh-page-about,.sh-page-services,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-nonprofit,.sh-page-policytemplate) .footer h4 { color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 14px; } :is(.sh-page-about,.sh-page-services,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-nonprofit,.sh-page-policytemplate) .footer-contact p { margin-bottom: 8px; } :is(.sh-page-about,.sh-page-services,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-nonprofit,.sh-page-policytemplate) .footer-contact a:hover { color: #fff; } :is(.sh-page-about,.sh-page-services,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-nonprofit,.sh-page-policytemplate) .footer-links { display: flex; flex-direction: column; gap: 10px; } :is(.sh-page-about,.sh-page-services,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-nonprofit,.sh-page-policytemplate) .footer-links a { font-weight: 500; transition: color 0.15s; } :is(.sh-page-about,.sh-page-services,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-nonprofit,.sh-page-policytemplate) .footer-links a:hover { color: #fff; } @media (max-width: 960px) { :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .footer-inner { grid-template-columns: 1fr; gap: 28px; } /* kept here: must come before a later rule */ } /* ===== v2 style alignment ===== */ :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); } .sh-site .eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px; } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .sh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; font-weight: 700; font-size: 16px; line-height: 1.2; padding: 14px 24px; border-radius: 10px; border: 2px solid transparent; min-height: 48px; white-space: nowrap; transition: background .18s,color .18s,border-color .18s,transform .18s; } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .sh-btn-primary { background: var(--orange); color: #fff; border-color: transparent; box-shadow: 0 6px 18px rgba(240,90,40,.32); } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .sh-btn-primary:hover { background: var(--orange-d); border-color: transparent; transform: translateY(-1px); } .sh-page-home .sh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 700; font-size: 16px; line-height: 1.2; padding: 14px 24px; border-radius: 10px; border: 2px solid transparent; transition: background .18s,color .18s,box-shadow .18s,transform .18s; white-space: nowrap; min-height: 48px; } /* kept here: must come before a later rule */ .sh-site .btn-ghost { background: #fff; color: var(--navy); border-color: rgba(11,42,91,.22); } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .btn-ghost:hover { border-color: var(--navy); background: var(--navy-soft); color: var(--navy); } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .hero-ctas { gap: 14px 22px; } /* cards with v2 accent bars */ :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .overview-card, :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .chart-card, :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .stat-card { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--sh1); } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .overview-card::before, :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .chart-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--navy); } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .overview-card:nth-child(2)::before, :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .chart-card:nth-child(2)::before { background: var(--orange); } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .stat-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--orange); } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .overview-num { width: 44px; height: 44px; border-radius: 12px; background: var(--navy); color: #fff; font-weight: 800; } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .overview-card a { color: var(--orange-d); font-weight: 700; } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .reason-badge { width: 32px; height: 32px; border-radius: 50%; background: var(--orange); color: #fff; font-weight: 800; font-size: 14px; box-shadow: 0 0 0 3px #fff,0 2px 6px rgba(11,42,91,.2); } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .reason-label { gap: 12px; } /* check lists like v2 item lists */ :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .benefit-list { gap: 0; background: #fff; border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--sh1); padding: 6px 20px; } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .benefit-item { background: transparent; border: 0; box-shadow: none; border-radius: 0; padding: 16px 0; } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .benefit-item + .benefit-item { border-top: 1px solid var(--border); } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .benefit-item .check { width: 32px; height: 32px; border-radius: 10px; background: var(--orange-soft,#FFF1EB); color: var(--orange); } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .benefit-item .check svg { width: 16px; height: 16px; } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .benefit-item strong { color: var(--navy); font-size: 15.5px; } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .benefit-block h3 { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--navy); } /* final CTA: navy card on white, separated from footer */ :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .soft-cta { background: #fff; padding: 96px 0 104px; } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .soft-cta::before, :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .soft-cta::after { display: none; } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .soft-cta-inner { background: linear-gradient(135deg,#0B2A5B 0%,#143A73 100%); border-radius: 24px; padding: 52px 56px; box-shadow: var(--sh2); color: #fff; } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .soft-cta-inner h2 { color: #fff; } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .soft-cta-inner p { color: rgba(255,255,255,.82); } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .soft-cta-inner p strong { color: #fff; } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .soft-cta-inner .eyebrow { color: #FFB490; } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .soft-cta-actions { gap: 12px; flex-wrap: wrap; } /* footer like v2 */ :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .footer { background: #04122A; border-top: 0; padding: 64px 0 28px; font-size: 15px; } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .footer::before { display: none; } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .footer-inner { grid-template-columns: 1.4fr 1fr 1fr .7fr; gap: 40px; } /* header */ .sh-page-home .nav-links a:hover, .sh-page-home .nav-links a[aria-current] { color: #fff; background: rgba(0,0,0,.12); } /* kept here: must come before a later rule */ /* footer */ .sh-site .footer .footer-h { font-size: 12.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-bottom: 16px; } /* footer like v2 */ :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .footer ul { list-style: none; margin: 0; padding: 0; } /* footer */ .sh-site .footer li { margin-bottom: 10px; } /* footer like v2 */ :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .footer address { font-style: normal; } /* footer */ .sh-site .footer a:hover { color: #fff; text-decoration: underline; } .sh-site .footer .tel { font-size: 18px; font-weight: 800; color: #fff; } @media (max-width: 640px) { :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .soft-cta-actions { flex-direction: column; align-items: stretch; } /* kept here: must come before a later rule */ } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .reason-label .eyebrow::before { display: none; } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .soft-cta-inner { max-width: none; width: 100%; } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .footer-brand .logo img { margin-bottom: 14px; } @media (max-width: 640px) { :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .soft-cta-inner .eyebrow { justify-content: center; text-align: center; } /* kept here: must come before a later rule */ } /* about-specific v2 alignment */ :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .hero .subhead { margin-bottom: 28px; } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .section-head .eyebrow { justify-content: center; margin-bottom: 12px; } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .soft-cta-inner { text-align: center; } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .soft-cta-actions { justify-content: center; } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .soft-cta-inner .eyebrow { justify-content: center; } /* ============================================================================================ 5. PER-PAGE: rules only one marketing page uses (scoped to that page's wrapper class) ============================================================================================ */ /* ---------- index.html (.sh-page-home) ---------- */ .sh-page-home .skip { position: absolute; left: -999px; top: 8px; background: #fff; color: var(--navy); padding: 10px 16px; border-radius: 8px; z-index: 999; font-weight: 700; } .sh-page-home .skip:focus { left: 12px; } .sh-page-home .sh-container { max-width: var(--max); margin: 0 auto; padding: 0 28px; } .sh-page-home .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); margin-bottom: 14px; } .sh-page-home .sh-lead { font-size: 1.125rem; color: var(--muted); max-width: 620px; } .sh-page-home .sh-btn-primary { background: var(--orange); color: #fff; box-shadow: 0 6px 18px rgba(240,90,40,.32); } .sh-page-home .sh-btn-primary:hover { background: var(--orange-d); transform: translateY(-1px); } .sh-page-home .btn-ghost:hover { border-color: var(--navy); background: var(--navy-soft); } .sh-page-home .btn-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); } .sh-page-home .btn-light:hover { background: rgba(255,255,255,.12); border-color: #fff; } .sh-page-home .sh-btn-block { width: 100%; } .sh-page-home .text-link { font-weight: 700; color: var(--navy); border-bottom: 2px solid rgba(240,90,40,.5); padding-bottom: 2px; } .sh-page-home .text-link:hover { border-color: var(--orange); } /* header */ .sh-page-home .site-header { background: #446e9b; border-bottom: 1px solid #345578; font-family: "Roboto Condensed","Arial Narrow",system-ui,sans-serif; } .sh-page-home .site-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; max-width: 1160px; margin: 0 auto; padding: 6px 20px; } .sh-page-home .nav-links, .sh-page-home .nav-actions { display: flex; align-items: center; flex-wrap: wrap; } .sh-page-home .nav-links a { display: block; padding: 12px; font-size: 15px; font-weight: 500; color: #e6edf5; } .sh-page-home .nav-actions { gap: 8px; } .sh-page-home .nav-actions a { display: inline-block; font-size: 14px; font-weight: 600; background: #04276b; color: #fff; padding: 8px 13px; border-radius: 4px; } .sh-page-home .nav-actions a:hover { background: #0B2A5B; box-shadow: inset 0 0 0 1px #000; } /* hero */ .sh-page-home .hero { padding: 76px 0 88px; background: radial-gradient(ellipse 60% 70% at 100% 0%,rgba(27,79,156,.13),transparent 60%),linear-gradient(180deg,#F7FAFE,#EDF2F9); } .sh-page-home .hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 56px; align-items: center; } .sh-page-home .hero-logo { height: 84px; width: auto; margin-bottom: 28px; } .sh-page-home .hero h1 { font-size: clamp(2.2rem,4.4vw,3.35rem); font-weight: 800; line-height: 1.08; letter-spacing: -.035em; margin-bottom: 22px; } .sh-page-home .hero h1 .hl { background: linear-gradient(transparent 66%,rgba(240,90,40,.25) 66%); padding: 0 2px; } .sh-page-home .hero .sh-lead { font-size: 1.2rem; margin-bottom: 32px; max-width: 520px; } .sh-page-home .hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; } .sh-page-home .hero-ctas .text-link { font-size: 16px; } .sh-page-home .hero-photo { border-radius: 22px; overflow: hidden; box-shadow: var(--sh2); aspect-ratio: 4/3; outline: 1px solid rgba(11,42,91,.08); outline-offset: -1px; } .sh-page-home .hero-photo img { width: 100%; height: 100%; object-fit: cover; } /* trust band */ .sh-page-home .trust { background: var(--navy); color: #fff; padding: 64px 0 72px; position: relative; overflow: hidden; } .sh-page-home .trust::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 0%,rgba(27,79,156,.55),transparent 45%),radial-gradient(circle at 0% 100%,rgba(240,90,40,.12),transparent 40%); pointer-events: none; } .sh-page-home .trust .sh-container { position: relative; } .sh-page-home .pills { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; max-width: 1040px; margin: 0 auto 56px; } .sh-page-home .pill { display: flex; align-items: center; gap: 12px; background: #fff; color: var(--navy); border-radius: 999px; padding: 12px 20px 12px 12px; font-weight: 700; font-size: 15.5px; white-space: nowrap; box-shadow: 0 6px 20px rgba(0,0,0,.2); } .sh-page-home .pi { width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--orange-soft); color: var(--orange); display: grid; place-items: center; } .sh-page-home .pi svg { width: 17px; height: 17px; } .sh-page-home .trust-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; } .sh-page-home .trust h2 { color: #fff; margin-bottom: 16px; } .sh-page-home .trust p.seo { font-size: 1.1rem; line-height: 1.75; color: rgba(255,255,255,.86); } .sh-page-home .quote { background: #fff; color: var(--text); border-radius: var(--r); padding: 30px 30px 26px; box-shadow: 0 20px 50px rgba(0,0,0,.28); position: relative; border-top: 4px solid var(--orange); } .sh-page-home .quote .q-label { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); margin-bottom: 14px; display: block; } .sh-page-home .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; } .sh-page-home .stat { background: var(--wash); border-radius: 12px; padding: 14px; } .sh-page-home .stat b { display: block; font-size: 1.55rem; font-weight: 800; color: var(--navy); letter-spacing: -.02em; line-height: 1.1; } .sh-page-home .stat small { font-size: 13px; color: var(--muted); line-height: 1.35; display: block; margin-top: 4px; } .sh-page-home .quote blockquote p { font-size: 15.5px; line-height: 1.55; font-weight: 500; } .sh-page-home .quote footer { margin-top: 14px; font-size: 14px; } .sh-page-home .quote footer a { font-weight: 700; color: var(--navy); border-bottom: 2px solid rgba(240,90,40,.5); } /* sections */ .sh-page-home section.block { padding: 104px 0; } .sh-page-home .head { max-width: 720px; margin-bottom: 56px; } .sh-page-home .head.center { text-align: center; margin-left: auto; margin-right: auto; } .sh-page-home .head.center .sh-lead { margin: 0 auto; } .sh-page-home .head h2 { margin-bottom: 14px; } .sh-page-home .intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-bottom: 64px; } .sh-page-home .intro-grid .photo { border-radius: 20px; overflow: hidden; box-shadow: var(--sh2); aspect-ratio: 16/10; } .sh-page-home .intro-grid .photo img { width: 100%; height: 100%; object-fit: cover; } .sh-page-home .intro-grid .head { margin-bottom: 0; } .sh-page-home .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } .sh-page-home .sh-panel { background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 40px 36px 36px; box-shadow: var(--sh1); display: flex; flex-direction: column; } .sh-page-home .sh-panel .tag { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--navy-mid); margin-bottom: 10px; } .sh-page-home .sh-panel.f .tag { color: var(--orange); } .sh-page-home .sh-panel h3 { font-size: 1.5rem; font-weight: 800; margin-bottom: 12px; } .sh-page-home .sh-panel > p { color: var(--muted); font-size: 16px; margin-bottom: 28px; } .sh-page-home .items { display: flex; flex-direction: column; gap: 22px; flex: 1; } .sh-page-home .items li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; } .sh-page-home .items li + li { padding-top: 22px; border-top: 1px solid var(--border); } .sh-page-home .li-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--navy-soft); color: var(--navy); } .sh-page-home .sh-panel.f .li-ic { background: var(--orange-soft); color: var(--orange); } .sh-page-home .li-ic svg { width: 20px; height: 20px; } .sh-page-home .items h4 { font-size: 1.05rem; font-weight: 700; margin-bottom: 4px; letter-spacing: -.01em; } .sh-page-home .items p { font-size: 15px; color: var(--muted); line-height: 1.55; } .sh-page-home .inline-link { display: inline-block; margin-top: 8px; font-size: 14px; font-weight: 700; color: var(--orange-d); } .sh-page-home .inline-link:hover { text-decoration: underline; } .sh-page-home .sh-panel .more { margin-top: 32px; } /* how */ .sh-page-home .how { background: var(--wash); } .sh-page-home .how-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; counter-reset: s; } .sh-page-home .step { background: #fff; border-radius: 18px; padding: 32px 28px; box-shadow: var(--sh1); border: 1px solid var(--border); position: relative; } .sh-page-home .step .num { font-size: 14px; font-weight: 800; color: var(--orange); letter-spacing: .1em; margin-bottom: 18px; display: flex; align-items: center; gap: 12px; } .sh-page-home .step .num::after { content: ""; flex: 1; height: 1px; background: var(--border); } .sh-page-home .step .s-ic { width: 52px; height: 52px; border-radius: 14px; background: var(--navy); color: #fff; display: grid; place-items: center; margin-bottom: 18px; } .sh-page-home .step .s-ic svg { width: 24px; height: 24px; } .sh-page-home .step h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 8px; } .sh-page-home .step p { font-size: 15px; color: var(--muted); } .sh-page-home .center-cta { text-align: center; margin-top: 40px; } /* pricing */ .sh-page-home .pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 880px; margin: 0 auto; } .sh-page-home .price-card { background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 40px 36px 32px; box-shadow: var(--sh1); display: flex; flex-direction: column; position: relative; } .sh-page-home .price-card.featured { border: 2px solid var(--navy); box-shadow: var(--sh2); } .sh-page-home .sh-badge { position: absolute; top: -14px; left: 36px; background: var(--navy); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; } .sh-page-home .plan-name { font-size: 1.35rem; font-weight: 800; } .sh-page-home .elig { font-size: 14.5px; color: var(--muted); margin: 2px 0 22px; } .sh-page-home .price { display: flex; align-items: baseline; gap: 6px; } .sh-page-home .amount { font-size: 3.6rem; font-weight: 800; color: var(--navy); letter-spacing: -.04em; line-height: 1; } .sh-page-home .period { font-size: 18px; font-weight: 700; color: var(--muted); } .sh-page-home .monthly { font-size: 15px; color: var(--muted); margin: 10px 0 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; } .sh-page-home .save { font-size: 12.5px; font-weight: 700; color: #166534; background: #ECFDF3; border: 1px solid #BBF7D0; border-radius: 999px; padding: 3px 10px; } .sh-page-home .perks { display: flex; flex-direction: column; gap: 12px; padding-top: 22px; border-top: 1px solid var(--border); margin-bottom: 30px; flex: 1; } .sh-page-home .perks li { display: flex; gap: 10px; font-size: 15.5px; font-weight: 500; } .sh-page-home .perks svg { width: 19px; height: 19px; color: #16A34A; flex: none; margin-top: 3px; } .sh-page-home .helper { font-size: 13.5px; color: var(--muted); text-align: center; margin-top: 12px; } .sh-page-home .custom { max-width: 880px; margin: 28px auto 0; background: var(--navy-soft); border-radius: 18px; padding: 26px 32px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .sh-page-home .custom h3 { font-size: 1.3rem; font-weight: 800; margin-bottom: 2px; } .sh-page-home .custom p { color: var(--muted); font-size: 15.5px; } /* more q */ .sh-page-home .moreq { padding: 0 0 104px; } .sh-page-home .moreq-card { background: linear-gradient(135deg,var(--navy) 0%,var(--navy-mid) 100%); color: #fff; border-radius: 24px; padding: 52px 56px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; box-shadow: var(--sh2); } .sh-page-home .moreq-card h2 { color: #fff; margin-bottom: 8px; } .sh-page-home .moreq-card p { color: rgba(255,255,255,.82); max-width: 520px; } .sh-page-home .ctas { display: flex; gap: 12px; flex-wrap: wrap; } .sh-page-home .moreq-card .btn-ghost { background: #fff; } /* reporter */ .sh-page-home .reporter { background: var(--navy-deep); color: #fff; } .sh-page-home .reporter-grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 340px; } .sh-page-home .reporter-photo { position: relative; min-height: 260px; } .sh-page-home .reporter-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .sh-page-home .reporter-body { padding: 64px 56px; display: flex; flex-direction: column; justify-content: center; } .sh-page-home .reporter-body .eyebrow { color: #FFB490; } .sh-page-home .reporter-body h2 { color: #fff; margin-bottom: 10px; } .sh-page-home .reporter-body p { color: rgba(255,255,255,.82); margin-bottom: 28px; max-width: 440px; } /* footer */ .sh-page-home .footer { background: #04122A; color: rgba(255,255,255,.75); padding: 64px 0 28px; font-size: 15px; border-top: 3px solid var(--orange); } .sh-page-home .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr .7fr; gap: 48px; margin-bottom: 44px; } .sh-page-home .navex-note { text-align: center; margin: 22px auto 0; font-size: 15px; color: var(--muted); } .sh-page-home .navex-note a { color: var(--navy); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(240,90,40,.55); text-decoration-thickness: 2px; text-underline-offset: 3px; } .sh-page-home .navex-note a:hover { color: var(--orange-d,#C9431A); } .sh-page-home .footer-logo { height: 48px; width: auto; margin-bottom: 16px; border-radius: 6px; } .sh-page-home .footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding-top: 22px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 13.5px; color: rgba(255,255,255,.6); } /* responsive */ .sh-page-home .how-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: stretch; } .sh-page-home .how-photo { border-radius: 20px; overflow: hidden; box-shadow: var(--sh2); position: relative; min-height: 420px; } .sh-page-home .how-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .sh-page-home .how-photo-caption { position: absolute; left: 18px; right: 18px; bottom: 18px; background: rgba(6,24,51,.9); color: #fff; border-radius: 14px; padding: 16px 18px; } .sh-page-home .how-photo-caption strong { display: block; font-size: 15px; margin-bottom: 2px; } .sh-page-home .how-photo-caption span { font-size: 13.5px; opacity: .85; } .sh-page-home .steps { display: flex; flex-direction: column; gap: 16px; } .sh-page-home .step-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r); padding: 24px; box-shadow: var(--sh1); display: grid; grid-template-columns: 52px 1fr; gap: 18px; align-items: start; } .sh-page-home .step-icon-wrap { width: 52px; height: 52px; border-radius: 14px; background: var(--navy); color: #fff; display: grid; place-items: center; position: relative; } .sh-page-home .step-icon-wrap svg { width: 24px; height: 24px; } .sh-page-home .step-num { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%; background: var(--orange); color: #fff; font-weight: 800; font-size: 12px; display: grid; place-items: center; border: 2px solid #fff; } .sh-page-home .step-card h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 6px; } .sh-page-home .step-card p { font-size: 15px; color: var(--muted); line-height: 1.55; } .sh-page-home .how-more { margin-top: 8px; } /* panel top accent bars (from v3) */ .sh-page-home .sh-panel { position: relative; overflow: hidden; } .sh-page-home .sh-panel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--navy); } .sh-page-home .sh-panel.f::before { background: var(--orange); } /* custom-quote bar restyle */ .sh-page-home .custom { background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--navy); box-shadow: var(--sh1); } .sh-page-home .custom h3, .sh-page-home .custom p { color: var(--navy); } /* custom bar full border */ .sh-page-home .custom { border: 2px solid var(--navy); border-left: 4px solid var(--navy); } /* ---------- about.html (.sh-page-about) ---------- */ /* Stats band */ :is(.sh-page-about,.sh-page-nonprofit,.sh-page-policytemplate) .stats-band { background: linear-gradient(135deg,var(--navy) 0%,var(--navy-mid) 55%,var(--blue-glow) 100%); color: #fff; padding: 48px 0; position: relative; overflow: hidden; } :is(.sh-page-about,.sh-page-nonprofit,.sh-page-policytemplate) .stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; position: relative; z-index: 1; } :is(.sh-page-about,.sh-page-nonprofit,.sh-page-policytemplate) .stat-item { text-align: center; padding: 12px 8px; } :is(.sh-page-about,.sh-page-nonprofit,.sh-page-policytemplate) .stat-item .stat-value { font-size: clamp(1.75rem,3.2vw,2.35rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 8px; color: #fff; } :is(.sh-page-about,.sh-page-nonprofit,.sh-page-policytemplate) .stat-item .stat-value .accent { color: #FFB089; } :is(.sh-page-about,.sh-page-nonprofit,.sh-page-policytemplate) .stat-item .stat-label { font-size: 14px; opacity: 0.88; line-height: 1.4; font-weight: 500; } /* Story split */ :is(.sh-page-about,.sh-page-nonprofit,.sh-page-policytemplate) .story-split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center; } :is(.sh-page-about,.sh-page-nonprofit,.sh-page-policytemplate) .story-copy h2 { font-size: clamp(1.55rem,2.5vw,1.95rem); font-weight: 750; color: var(--navy); letter-spacing: -0.025em; margin-bottom: 16px; line-height: 1.2; } :is(.sh-page-about,.sh-page-nonprofit,.sh-page-policytemplate) .story-copy p { font-size: 15.5px; color: var(--text-muted); line-height: 1.65; margin-bottom: 14px; max-width: 560px; } :is(.sh-page-about,.sh-page-nonprofit,.sh-page-policytemplate) .story-copy p strong { color: var(--text); font-weight: 650; } :is(.sh-page-about,.sh-page-nonprofit,.sh-page-policytemplate) .story-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Serve */ :is(.sh-page-about,.sh-page-nonprofit,.sh-page-policytemplate) .serve-panel h2 { font-size: clamp(1.45rem,2.4vw,1.85rem); font-weight: 750; color: var(--navy); letter-spacing: -0.025em; margin-bottom: 14px; } :is(.sh-page-about,.sh-page-nonprofit,.sh-page-policytemplate) .serve-panel p { font-size: 15.5px; color: var(--text-muted); line-height: 1.6; margin-bottom: 12px; } :is(.sh-page-about,.sh-page-nonprofit,.sh-page-policytemplate) .serve-panel p:last-of-type { margin-bottom: 22px; } :is(.sh-page-about,.sh-page-nonprofit,.sh-page-policytemplate) .serve-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } /* Values */ :is(.sh-page-about,.sh-page-nonprofit,.sh-page-policytemplate) .values-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; } :is(.sh-page-about,.sh-page-nonprofit,.sh-page-policytemplate) .value-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } :is(.sh-page-about,.sh-page-nonprofit,.sh-page-policytemplate) .value-card .vicon { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(145deg,var(--navy),var(--blue-glow)); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; } :is(.sh-page-about,.sh-page-nonprofit,.sh-page-policytemplate) .value-card .vicon.svg-orange { background: linear-gradient(145deg,var(--orange),var(--orange-hover)); } :is(.sh-page-about,.sh-page-nonprofit,.sh-page-policytemplate) .value-card .vicon svg { width: 20px; height: 20px; } :is(.sh-page-about,.sh-page-nonprofit,.sh-page-policytemplate) .value-card h3 { font-size: 1.05rem; font-weight: 750; color: var(--navy); margin-bottom: 8px; letter-spacing: -0.015em; line-height: 1.25; } :is(.sh-page-about,.sh-page-nonprofit,.sh-page-policytemplate) .value-card p { font-size: 14px; color: var(--text-muted); line-height: 1.5; } /* about-specific v2 alignment */ :is(.sh-page-about,.sh-page-nonprofit,.sh-page-policytemplate) .stats-band { background: linear-gradient(135deg,#0B2A5B 0%,#143A73 100%); padding: 44px 0; } :is(.sh-page-about,.sh-page-nonprofit,.sh-page-policytemplate) .stat-item .stat-value .accent { color: #FFB490; } :is(.sh-page-about,.sh-page-nonprofit,.sh-page-policytemplate) .stat-item .stat-label { font-weight: 600; opacity: .85; } :is(.sh-page-about,.sh-page-nonprofit,.sh-page-policytemplate) .story-split { align-items: start; } :is(.sh-page-about,.sh-page-nonprofit,.sh-page-policytemplate) .story-copy .eyebrow { margin-bottom: 14px; } :is(.sh-page-about,.sh-page-nonprofit,.sh-page-policytemplate) .story-copy p a.inline { color: var(--navy); } :is(.sh-page-about,.sh-page-nonprofit,.sh-page-policytemplate) .serve-panel, :is(.sh-page-about,.sh-page-nonprofit,.sh-page-policytemplate) .value-card { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--sh1); } :is(.sh-page-about,.sh-page-nonprofit,.sh-page-policytemplate) .serve-panel::before, :is(.sh-page-about,.sh-page-nonprofit,.sh-page-policytemplate) .value-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--navy); } :is(.sh-page-about,.sh-page-nonprofit,.sh-page-policytemplate) .value-card:nth-child(even)::before { background: var(--orange); } :is(.sh-page-about,.sh-page-nonprofit,.sh-page-policytemplate) .serve-panel { padding: 40px 32px 34px; } :is(.sh-page-about,.sh-page-nonprofit,.sh-page-policytemplate) .serve-panel .eyebrow { justify-content: center; margin-bottom: 12px; } :is(.sh-page-about,.sh-page-nonprofit,.sh-page-policytemplate) .value-card { padding: 28px 20px 22px; } :is(.sh-page-about,.sh-page-nonprofit,.sh-page-policytemplate) .value-card .vicon { background: var(--navy); box-shadow: none; } :is(.sh-page-about,.sh-page-nonprofit,.sh-page-policytemplate) .value-card .vicon.svg-orange { background: var(--orange); } :is(.sh-page-about,.sh-page-nonprofit,.sh-page-policytemplate) .soft-cta-inner .cta-email { font-size: 15px; margin: 22px 0 0; } :is(.sh-page-about,.sh-page-nonprofit,.sh-page-policytemplate) .soft-cta-inner .cta-email a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } /* ---------- services.html (.sh-page-services) ---------- */ /* Flow steps */ .sh-page-services .flow-steps { display: flex; flex-direction: column; gap: 36px; } .sh-page-services .flow-band-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; } .sh-page-services .flow-band h3 { font-size: 1.25rem; font-weight: 750; color: var(--navy); letter-spacing: -0.02em; margin-bottom: 6px; line-height: 1.25; } .sh-page-services .flow-band .flow-lead { font-size: 15.5px; color: var(--text-muted); line-height: 1.55; max-width: 720px; } .sh-page-services .flow-band .flow-body { font-size: 15.5px; color: var(--text-muted); line-height: 1.6; max-width: 760px; } .sh-page-services .flow-band .flow-body + .flow-body { margin-top: 12px; } .sh-page-services .flow-band .flow-body strong { color: var(--text); font-weight: 650; } .sh-page-services .channel-list { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin: 20px 0 16px; } .sh-page-services .channel-card .ch-icon { width: 36px; height: 36px; border-radius: 9px; background: #fff; border: 1px solid var(--border); color: var(--navy); display: flex; align-items: center; justify-content: center; margin-bottom: 10px; } .sh-page-services .channel-card .ch-icon svg { width: 18px; height: 18px; } .sh-page-services .channel-card h4 { font-size: 14.5px; font-weight: 700; color: var(--navy); margin-bottom: 4px; } .sh-page-services .channel-card p { font-size: 13.5px; color: var(--text-muted); line-height: 1.45; } /* Poster gallery */ .sh-page-services .poster-gallery { margin-top: 24px; } .sh-page-services .poster-gallery-label { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy); margin-bottom: 14px; } .sh-page-services .poster-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 14px; align-items: end; } .sh-page-services .poster-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .sh-page-services .poster-item img { width: 100%; height: auto; display: block; background: #fff; padding: 10px; box-sizing: border-box; } .sh-page-services .poster-item figcaption { font-size: 11.5px; color: var(--text-muted); text-align: center; margin-top: 8px; font-weight: 550; } .sh-page-services .poster-item.wallet { display: flex; flex-direction: column; justify-content: center; } .sh-page-services .poster-item.wallet img { object-fit: contain; max-height: 160px; margin: auto 0; padding: 24px 10px; } .sh-page-services .poster-note { margin-top: 14px; font-size: 14.5px; color: var(--text-muted); } /* CMS split */ .sh-page-services .cms-split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 28px; align-items: center; margin-top: 8px; } .sh-page-services .cms-shot img { width: 100%; height: auto; display: block; } .sh-page-services .cms-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } @media (max-width: 640px) { :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .soft-cta { padding: 64px 0; } /* kept here: must come before a later rule */ } /* services-specific v2 alignment */ .sh-page-services .flow-band { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--sh1); } .sh-page-services .flow-band::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--navy); } .sh-page-services .flow-band:nth-child(even)::before { background: var(--orange); } .sh-page-services .flow-band { padding: 38px 28px 32px; } .sh-page-services .flow-band .flow-num { background: var(--navy); box-shadow: none; } .sh-page-services .reasons-strip { padding: 28px 0 36px; background: #fff; } .sh-page-services .reasons-note { text-align: center; font-size: 16px; color: var(--text-muted); margin: 0; } .sh-page-services .reasons-note a { color: var(--navy); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(240,90,40,.55); text-decoration-thickness: 2px; text-underline-offset: 3px; } .sh-page-services .reasons-note a:hover { color: var(--orange-d); } /* poster gallery: 4 per row, last row centered, equal-height cards */ .sh-page-services .poster-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 14px; } .sh-page-services .poster-item { flex: 0 0 calc((100% - 42px) / 4); display: flex; flex-direction: column; justify-content: space-between; margin: 0; } .sh-page-services .poster-item.wallet { justify-content: space-between; } .sh-page-services .poster-item.wallet img { max-height: none; margin: 0; padding: 10px; object-fit: contain; } .sh-page-services .hero h1 .accent-line { white-space: nowrap; } .sh-page-services #how-it-works { padding-bottom: 24px; } .sh-page-services .soft-cta { padding-top: 64px; } /* case management: copy top-aligned beside the screenshot */ .sh-page-services .cms-split { align-items: start; margin-top: 4px; } /* ACFE 2026 proof point */ .sh-page-services .acfe-proof { position: relative; overflow: hidden; margin-top: 20px; max-width: 760px; background: var(--orange-soft); border: 1px solid rgba(240,90,40,.22); border-radius: 12px; padding: 16px 20px 16px 24px; } .sh-page-services .acfe-proof::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--orange); } .sh-page-services .acfe-proof .acfe-tag { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-d); margin-bottom: 6px; } .sh-page-services .acfe-proof .acfe-stat { font-size: 17px; font-weight: 600; color: var(--navy); line-height: 1.45; margin: 0; } .sh-page-services .acfe-proof .acfe-stat strong { font-weight: 800; } .sh-page-services .acfe-proof .acfe-src { font-size: 13px; color: var(--text-muted); margin: 6px 0 0; } /* ---------- features.html (.sh-page-features) ---------- */ .sh-page-features .group-label { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; } .sh-page-features .group-label:not(:first-child) { margin-top: 48px; } .sh-page-features .group-label h3 { font-size: 13px; font-weight: 750; letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy); white-space: nowrap; } .sh-page-features .group-label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg,var(--border),transparent); } .sh-page-features .cap-card .card-link { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--orange); transition: color 0.15s; } .sh-page-features .cap-card .card-link:hover { color: var(--orange-hover); } .sh-page-features .cap-card a.inline { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .sh-page-features .cap-card a.inline:hover { color: var(--orange); } @media (max-width: 960px) { :is(.sh-page-features,.sh-page-casemanagement) .cap-grid { grid-template-columns: repeat(2,1fr); } /* kept here: must come before a later rule */ } @media (max-width: 640px) { :is(.sh-page-features,.sh-page-casemanagement) .cap-grid { grid-template-columns: 1fr; } /* kept here: must come before a later rule */ } /* features-specific v2 alignment */ .sh-page-features .cap-grid { grid-template-columns: repeat(6,1fr); } .sh-page-features .cap-card { grid-column: span 2; position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--sh1); padding: 28px 22px 24px; display: flex; flex-direction: column; } .sh-page-features .cap-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--navy); } .sh-page-features .cap-card:nth-child(even)::before { background: var(--orange); } .sh-page-features .cap-grid > .cap-card:nth-last-child(2):nth-child(3n+1), .sh-page-features .cap-grid > .cap-card:last-child:nth-child(3n+2) { grid-column: span 3; } .sh-page-features .cap-icon { background: var(--navy); box-shadow: none; } .sh-page-features .cap-card .card-link { margin-top: auto; padding-top: 12px; color: var(--orange-d); } .sh-page-features .cap-card .card-link:hover { color: var(--navy); } /* ---------- reasons.html (.sh-page-reasons) ---------- */ .sh-page-reasons .hero-float.f1 { bottom: -16px; left: -12px; } .sh-page-reasons .hero-float.f1 .ticon { width: 44px; height: 44px; border-radius: 8px; background: var(--orange-soft); color: var(--orange); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sh-page-reasons .hero-float.f1 .ticon svg { width: 22px; height: 22px; } .sh-page-reasons .overview-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; } .sh-page-reasons .overview-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: rgba(11,42,91,0.15); } .sh-page-reasons .overview-card h3 { font-size: 1.08rem; font-weight: 700; color: var(--navy); margin-bottom: 8px; line-height: 1.3; } .sh-page-reasons .overview-card p { font-size: 14.5px; color: var(--text-muted); line-height: 1.5; } .sh-page-reasons .overview-card a:hover { text-decoration: underline; } .sh-page-reasons .reason-band { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .sh-page-reasons .reason-band.reverse { direction: rtl; } .sh-page-reasons .reason-band.reverse > * { direction: ltr; } .sh-page-reasons .reason-media { border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid rgba(11,42,91,0.08); background: #e8edf4; aspect-ratio: 4 / 3; } .sh-page-reasons .reason-media img { width: 100%; height: 100%; object-fit: cover; } .sh-page-reasons .reason-copy .reason-label { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; } .sh-page-reasons .reason-copy h2 { font-size: clamp(1.45rem,2.4vw,1.85rem); font-weight: 750; color: var(--navy); letter-spacing: -0.02em; margin-bottom: 14px; line-height: 1.25; } .sh-page-reasons .reason-copy > p { font-size: 15.5px; color: var(--text-muted); line-height: 1.6; margin-bottom: 22px; } .sh-page-reasons .benefit-block { margin-bottom: 20px; } .sh-page-reasons .benefit-block:last-child { margin-bottom: 0; } .sh-page-reasons .benefit-item span { font-size: 13.5px; color: var(--text-muted); line-height: 1.45; } .sh-page-reasons .acfe-banner::before { content: ""; position: absolute; top: -40%; right: -5%; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle,rgba(240,90,40,0.28),transparent 70%); pointer-events: none; } .sh-page-reasons .acfe-banner .acfe-label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,200,160,0.95); margin-bottom: 10px; position: relative; } .sh-page-reasons .acfe-banner p { font-size: 1.1rem; font-weight: 600; line-height: 1.45; max-width: 720px; position: relative; } .sh-page-reasons .acfe-banner cite { display: block; margin-top: 12px; font-size: 13px; font-style: normal; opacity: 0.8; font-weight: 500; position: relative; } .sh-page-reasons .acfe-banner a { color: #fff; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; } .sh-page-reasons .acfe-banner a:hover { opacity: 0.9; } .sh-page-reasons .stat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 28px; } .sh-page-reasons .stat-card .stat-value { font-size: clamp(1.6rem,2.8vw,2rem); font-weight: 800; color: var(--orange); letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 8px; } .sh-page-reasons .stat-card .stat-label { font-size: 13.5px; color: var(--text-muted); line-height: 1.4; } .sh-page-reasons .chart-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 8px; } .sh-page-reasons .chart-card img { width: 100%; height: auto; border-radius: 8px; background: var(--blue-wash); } .sh-page-reasons .compare-card .compare-title { font-size: 1rem; font-weight: 700; color: var(--navy); margin-bottom: 16px; line-height: 1.3; } .sh-page-reasons .compare-bars { display: flex; flex-direction: column; gap: 14px; } .sh-page-reasons .compare-row { display: grid; grid-template-columns: 90px 1fr 64px; gap: 10px; align-items: center; } .sh-page-reasons .compare-label { font-size: 13px; color: var(--text-muted); font-weight: 600; } .sh-page-reasons .compare-fill.fill-good { background: linear-gradient(90deg,var(--navy),var(--blue-glow)); } .sh-page-reasons .compare-fill.fill-bad { background: linear-gradient(90deg,#c45a3a,var(--orange)); } .sh-page-reasons .compare-row strong { font-size: 14px; color: var(--navy); text-align: right; } .sh-page-reasons .compare-note { margin-top: 14px; font-size: 12.5px; color: var(--text-muted); text-align: center; } .sh-page-reasons .chart-card figcaption { margin-top: 12px; font-size: 13px; color: var(--text-muted); text-align: center; line-height: 1.4; } .sh-page-reasons .findings-list { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; } .sh-page-reasons .finding-row .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); margin-top: 7px; flex-shrink: 0; } .sh-page-reasons .finding-row p { font-size: 14.5px; color: var(--text); line-height: 1.45; margin: 0; } .sh-page-reasons .report-cta { text-align: center; margin-top: 28px; } @media (max-width: 640px) { :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .benefit-list { padding: 4px 16px; } /* kept here: must come before a later rule */ } .sh-page-reasons .more-grid .overview-card:nth-child(even)::before { background: var(--orange); } .sh-page-reasons .more-grid .overview-card:nth-child(odd)::before { background: var(--navy); } .sh-page-reasons .more-faq { text-align: center; margin-top: 36px; color: var(--muted); font-size: 16px; } .sh-page-reasons .more-faq a { font-weight: 700; color: var(--navy); border-bottom: 2px solid rgba(240,90,40,.5); } .sh-page-reasons .emp-head { max-width: 760px; margin: 0 auto 36px; text-align: center; } .sh-page-reasons .emp-head .reason-label { justify-content: center; } .sh-page-reasons .emp-head h2 { margin: 12px 0 12px; } .sh-page-reasons .emp-photo { border-radius: 20px; overflow: hidden; box-shadow: var(--sh2); aspect-ratio: 21/9; margin-bottom: 40px; } .sh-page-reasons .emp-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; } .sh-page-reasons .emp-benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; } .sh-page-reasons .emp-benefits .benefit-block { margin: 0; } @media (max-width: 760px) { .sh-page-reasons .emp-head .reason-label { justify-content: flex-start; } /* kept here: must come before a later rule */ } .sh-page-reasons .emp-head .reason-label { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 14px; } .sh-page-reasons .emp-head h2 { font-size: clamp(1.45rem,2.4vw,1.85rem); font-weight: 750; color: var(--navy); letter-spacing: -.02em; line-height: 1.25; margin: 0 0 14px; } .sh-page-reasons .emp-head > p { font-size: 15.5px; color: var(--text-muted); line-height: 1.6; margin: 0; } .sh-page-reasons .emp-top { display: grid; grid-template-columns: 1fr minmax(0,440px); gap: 48px; align-items: center; margin-bottom: 40px; } .sh-page-reasons .emp-top .emp-head { max-width: none; margin: 0; text-align: left; } .sh-page-reasons .emp-top .emp-head .reason-label { justify-content: flex-start; } .sh-page-reasons .emp-top .emp-photo { aspect-ratio: auto; margin: 0; max-width: 440px; width: 100%; justify-self: end; } .sh-page-reasons .emp-top .emp-photo img { height: auto; } .sh-page-reasons .emp-benefits { align-items: stretch; } .sh-page-reasons .emp-benefits .benefit-block { display: flex; flex-direction: column; height: 100%; } .sh-page-reasons .emp-benefits .benefit-list { flex: 1; } .sh-page-reasons .rep-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; padding: 6px 28px; } .sh-page-reasons .rep-list .benefit-item + .benefit-item { border-top: 0; } .sh-page-reasons .rep-list .benefit-item:nth-child(n+3) { border-top: 1px solid var(--border); } /* ---------- casemanagement.html (.sh-page-casemanagement) ---------- */ /* ——— HERO ——— */ .sh-page-casemanagement .hero-photo img { width: 100%; height: 100%; object-fit: contain; object-position: center; } /* ——— How to use steps ——— */ .sh-page-casemanagement .steps-grid { display: grid; grid-template-columns: 1fr; gap: 28px; max-width: 980px; margin: 0 auto; } .sh-page-casemanagement .step-shot img { display: block; width: 100%; height: auto; } .sh-page-casemanagement .step-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: rgba(11,42,91,0.15); } .sh-page-casemanagement .step-icon-wrap svg { width: 24px; height: 24px; } .sh-page-casemanagement .step-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--navy); margin-bottom: 6px; line-height: 1.3; } .sh-page-casemanagement .step-card p { font-size: 14.5px; color: var(--text-muted); line-height: 1.5; } /* casemanagement-specific v2 alignment */ .sh-page-casemanagement .cap-card, .sh-page-casemanagement .step-card { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--sh1); } .sh-page-casemanagement .cap-card::before, .sh-page-casemanagement .step-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--navy); } .sh-page-casemanagement .cap-card:nth-child(even)::before, .sh-page-casemanagement .step-card:nth-child(even)::before { background: var(--orange); } .sh-page-casemanagement .cap-card { padding: 28px 22px 24px; } .sh-page-casemanagement .step-card { padding: 26px 22px 22px; } .sh-page-casemanagement .cap-icon, .sh-page-casemanagement .step-icon-wrap { background: var(--navy); box-shadow: none; } /* ---------- faq.html (.sh-page-faq) ---------- */ .sh-page-faq .section-head { text-align: center; margin-bottom: 40px; } .sh-page-faq .faq-toc { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 48px; } .sh-page-faq .faq-toc a { display: inline-flex; align-items: center; padding: 8px 14px; font-size: 13px; font-weight: 650; color: var(--navy); background: #fff; border: 1px solid var(--border); border-radius: 999px; box-shadow: var(--shadow); transition: border-color 0.15s,color 0.15s,box-shadow 0.15s; } .sh-page-faq .faq-toc a:hover { border-color: rgba(11,42,91,0.25); color: var(--orange); box-shadow: var(--shadow-md); } .sh-page-faq .faq-group { margin-bottom: 48px; scroll-margin-top: 24px; } .sh-page-faq .faq-group:last-child { margin-bottom: 0; } .sh-page-faq .faq-group-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .sh-page-faq .faq-group-head h2 { font-size: clamp(1.25rem,2vw,1.45rem); font-weight: 750; color: var(--navy); letter-spacing: -0.02em; white-space: nowrap; } .sh-page-faq .faq-group-head::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg,var(--border),transparent); } .sh-page-faq .faq-answer ul.example-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; margin: 14px 0 0; padding: 14px 16px; background: var(--blue-wash); border-radius: var(--radius-sm); border: 1px solid var(--border); } .sh-page-faq .faq-answer ul.example-list li { position: relative; padding-left: 14px; font-size: 14px; color: var(--text); line-height: 1.4; } .sh-page-faq .faq-answer ul.example-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); } .sh-page-faq .faq-answer .price-block { margin-top: 12px; padding: 14px 16px; background: var(--blue-wash); border: 1px solid var(--border); border-radius: var(--radius-sm); } .sh-page-faq .faq-answer .price-block strong { display: block; color: var(--navy); font-size: 14px; margin-bottom: 4px; } .sh-page-faq .faq-answer .price-block p { font-size: 14.5px; margin: 0 0 10px; } .sh-page-faq .faq-answer .price-block p:last-child { margin-bottom: 0; } /* faq-specific v2 alignment */ .sh-page-faq .hero-photo { border-radius: 22px; box-shadow: var(--sh2); border: 0; outline: 1px solid rgba(11,42,91,.08); outline-offset: -1px; } .sh-page-faq .faq-toc a { font-size: 14px; font-weight: 700; padding: 9px 16px; box-shadow: var(--sh1); } .sh-page-faq .faq-toc a:hover { border-color: var(--navy); color: var(--navy); background: var(--navy-soft); box-shadow: var(--sh1); } .sh-page-faq .faq-group { position: relative; overflow: hidden; max-width: 880px; margin: 0 auto 32px; background: #fff; border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--sh1); padding: 30px 28px 10px; scroll-margin-top: 24px; } .sh-page-faq .faq-group:last-of-type { margin-bottom: 0; } .sh-page-faq .faq-group::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--navy); } .sh-page-faq #reporting::before, .sh-page-faq #policies::before { background: var(--orange); } .sh-page-faq #faq { padding-bottom: 24px; } .sh-page-faq .faq-answer .price-block + p, .sh-page-faq .faq-answer .example-list + p { margin-top: 12px; } .sh-page-faq #faq + .soft-cta { padding-top: 56px; } .sh-page-faq .faq-group-head { margin-bottom: 6px; } .sh-page-faq .faq-group-head h2 { font-size: clamp(1.2rem,2vw,1.4rem); font-weight: 800; } .sh-page-faq .faq-group-head::after { display: none; } .sh-page-faq .faq-accordion { gap: 0; max-width: none; } .sh-page-faq .faq-item { background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; } .sh-page-faq .faq-item + .faq-item { border-top: 1px solid var(--border); } .sh-page-faq .faq-item[open] { box-shadow: none; border-color: var(--border); } .sh-page-faq .faq-item summary { padding: 18px 0; font-size: 1.04rem; } .sh-page-faq .faq-item summary:hover { color: var(--orange-d); } .sh-page-faq .faq-answer { padding: 0 0 20px; font-size: 15.5px; } .sh-page-faq .faq-answer a:hover { color: var(--orange-d); } /* ---------- navex-alternative.html (.sh-page-navex) ---------- */ .sh-page-navex .hero h1 { font-size: clamp(1.85rem,3.6vw,2.65rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.03em; color: var(--navy); margin-bottom: 18px; } .sh-page-navex .section-head { text-align: center; margin-bottom: 44px; } .sh-page-navex .section-head h2 { font-size: clamp(1.55rem,2.6vw,2rem); font-weight: 750; color: var(--navy); letter-spacing: -0.025em; margin-bottom: 12px; } .sh-page-navex .section-head p { font-size: 1.05rem; color: var(--text-muted); max-width: 620px; margin: 0 auto; } /* Audience cards */ .sh-page-navex .audience-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .sh-page-navex .audience-card h3 { font-size: 1.15rem; font-weight: 750; color: var(--navy); margin-bottom: 14px; letter-spacing: -0.02em; } .sh-page-navex .audience-card ul { display: flex; flex-direction: column; gap: 10px; } .sh-page-navex .audience-card li { position: relative; padding-left: 22px; font-size: 15px; color: var(--text-muted); line-height: 1.5; } .sh-page-navex .audience-card li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); } .sh-page-navex .audience-card.navex li::before { background: var(--navy-mid); } .sh-page-navex .audience-card .note { margin-top: 16px; font-size: 13.5px; color: var(--text-muted); font-style: italic; line-height: 1.5; } /* Comparison table */ .sh-page-navex .compare-table th, .sh-page-navex .compare-table td { padding: 16px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); line-height: 1.5; } .sh-page-navex .compare-table thead th { background: var(--navy); color: #fff; font-weight: 700; font-size: 14px; letter-spacing: 0.01em; } .sh-page-navex .compare-table thead th:first-child { background: var(--navy-deep); border-radius: 0; } .sh-page-navex .compare-table thead th.safe-col { background: linear-gradient(135deg,var(--orange) 0%,var(--orange-hover) 100%); } .sh-page-navex .compare-table tbody th { position: sticky; left: 0; z-index: 1; background: var(--blue-wash); color: var(--navy); font-weight: 700; font-size: 13.5px; width: 22%; border-right: 1px solid var(--border); white-space: nowrap; } .sh-page-navex .compare-table tbody tr:nth-child(even) td { background: #fafbfd; } .sh-page-navex .compare-table tbody tr:nth-child(even) th { background: #e4ebf5; } .sh-page-navex .compare-table tbody tr:last-child th, .sh-page-navex .compare-table tbody tr:last-child td { border-bottom: 0; } .sh-page-navex .compare-table td.safe-col { font-weight: 550; color: var(--text); } .sh-page-navex .compare-table .hl { color: var(--orange); font-weight: 700; } /* FAQ */ .sh-page-navex .faq-answer strong { color: var(--text); font-weight: 650; } /* navex-specific v2 alignment */ .sh-page-navex .price-lead { max-width: 640px; margin: 10px auto 22px; color: var(--text-muted); font-size: 16px; line-height: 1.6; } .sh-page-navex .hero-proof { margin-top: 18px; font-size: 14.5px; color: var(--text-muted); } .sh-page-navex .hero-proof strong { color: var(--navy); font-weight: 700; } .sh-page-navex .audience-card, .sh-page-navex .why-card, .sh-page-navex .price-card, .sh-page-navex .compare-wrap { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--sh1); } .sh-page-navex .audience-card::before, .sh-page-navex .why-card::before, .sh-page-navex .price-card::before, .sh-page-navex .compare-wrap::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--navy); z-index: 2; } .sh-page-navex .audience-card.safe::before, .sh-page-navex .why-card:nth-child(even)::before { background: var(--orange); } .sh-page-navex .audience-card { padding: 30px 26px 26px; } .sh-page-navex .audience-card.navex li::before { background: var(--navy); } .sh-page-navex .compare-table thead th, .sh-page-navex .compare-table thead th:first-child { background: var(--navy); padding-top: 20px; } .sh-page-navex .compare-table thead th.safe-col { background: var(--orange); } .sh-page-navex .compare-table tbody th { background: #F3F6FB; } .sh-page-navex .compare-table tbody tr:nth-child(even) th { background: #E9EEF6; } .sh-page-navex .enterprise-note { position: relative; overflow: hidden; max-width: 880px; margin: 28px auto 0; background: #fff; border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--sh1); padding: 26px 28px 22px; } .sh-page-navex .enterprise-note::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--orange); } .sh-page-navex .enterprise-note h3 { font-size: 1.05rem; font-weight: 750; color: var(--navy); margin-bottom: 8px; } .sh-page-navex .enterprise-note p { font-size: 15px; color: var(--text-muted); line-height: 1.6; margin: 0; } .sh-page-navex .enterprise-note a { color: var(--navy); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(240,90,40,.55); text-decoration-thickness: 2px; text-underline-offset: 3px; } .sh-page-navex .enterprise-note a:hover { color: var(--orange-d); } .sh-page-navex .why-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; } .sh-page-navex .why-card { background: #fff; padding: 28px 22px 24px; } .sh-page-navex .why-card .bicon { width: 44px; height: 44px; border-radius: 12px; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; } .sh-page-navex .why-card .bicon svg { width: 20px; height: 20px; } .sh-page-navex .why-card h3 { font-size: 1.05rem; font-weight: 750; color: var(--navy); margin-bottom: 8px; line-height: 1.3; } .sh-page-navex .why-card p { font-size: 14.5px; color: var(--text-muted); line-height: 1.55; } .sh-page-navex .subhead a { color: var(--navy); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(240,90,40,.55); text-decoration-thickness: 2px; text-underline-offset: 3px; } .sh-page-navex .included-note { text-align: center; font-size: 16px; color: var(--text-muted); margin: 36px 0 0; } .sh-page-navex .included-note a { color: var(--navy); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(240,90,40,.55); text-decoration-thickness: 2px; text-underline-offset: 3px; } .sh-page-navex .included-note a:hover { color: var(--orange-d); } .sh-page-navex .price-card { background: #fff; max-width: 880px; margin: 0 auto; padding: 40px 36px 32px; text-align: center; } .sh-page-navex .price-card h2 { font-size: clamp(1.45rem,2.4vw,1.85rem); font-weight: 750; color: var(--navy); margin-bottom: 24px; } .sh-page-navex .price-card .eyebrow { justify-content: center; margin-bottom: 12px; } .sh-page-navex .price-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 22px; } .sh-page-navex .price-item { background: var(--blue-wash); border: 1px solid var(--border); border-radius: 14px; padding: 20px 16px; } .sh-page-navex .price-item .plan { display: block; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--navy); margin-bottom: 6px; } .sh-page-navex .price-item .amt { display: block; font-size: 2rem; font-weight: 800; color: var(--navy); letter-spacing: -.02em; line-height: 1.15; } .sh-page-navex .price-item .amt small { font-size: 15px; font-weight: 600; color: var(--text-muted); } .sh-page-navex .price-item .price-btn { margin: 4px auto 0; min-height: 40px; padding: 9px 20px; font-size: 15px; } .sh-page-navex .price-item .sub { display: block; font-size: 14px; color: var(--text-muted); margin-top: 4px; } .sh-page-navex .price-note { font-size: 15px; color: var(--text-muted); line-height: 1.6; max-width: 640px; margin: 0 auto; } .sh-page-navex .faq-item { border-radius: 12px; } /* ============================================================================================ 6. RESPONSIVE: marketing-page media queries (largest breakpoint first) ============================================================================================ */ @media (max-width: 980px) { .sh-page-home .hero-grid, .sh-page-home .trust-grid, .sh-page-home .intro-grid, .sh-page-home .duo, .sh-page-home .reporter-grid, .sh-page-home .footer-grid { grid-template-columns: 1fr; } .sh-page-home .hero-grid { gap: 40px; } .sh-page-home .pills { grid-template-columns: 1fr 1fr; } .sh-page-home .how-grid { grid-template-columns: 1fr; } .sh-page-home .pricing-grid { grid-template-columns: 1fr; max-width: 480px; } .sh-page-home .custom { max-width: 480px; } .sh-page-home section.block { padding: 80px 0; } .sh-page-home .moreq { padding-bottom: 80px; } .sh-page-home .reporter-body { padding: 48px 28px; } .sh-page-home .nav-links a { padding: 10px 8px; font-size: 14px; } .sh-page-home .how-layout { grid-template-columns: 1fr; } .sh-page-home .how-photo { min-height: 280px; } } @media (max-width: 960px) { :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .hero-layout { grid-template-columns: 1fr; } .sh-page-navex .audience-grid { grid-template-columns: 1fr; } .sh-page-reasons .overview-grid { grid-template-columns: 1fr; } .sh-page-reasons .reason-band, .sh-page-reasons .reason-band.reverse { grid-template-columns: 1fr; direction: ltr; gap: 28px; } .sh-page-reasons .stat-grid { grid-template-columns: 1fr 1fr; } .sh-page-reasons .chart-row { grid-template-columns: 1fr; } :is(.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq) .site-nav-links a { padding: 10px 8px; font-size: 13px; } :is(.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq) .site-nav-actions a { font-size: 12px; padding: 6px 8px; } .sh-page-services .hero-float.f2 { right: 8px; } .sh-page-services .hero-float.f1 { left: 8px; bottom: 8px; } .sh-page-services .channel-list { grid-template-columns: 1fr; } .sh-page-services .poster-grid { grid-template-columns: repeat(3,1fr); } .sh-page-services .cms-split { grid-template-columns: 1fr; } :is(.sh-page-about,.sh-page-nonprofit,.sh-page-policytemplate) .stats-grid { grid-template-columns: repeat(2,1fr); } :is(.sh-page-about,.sh-page-nonprofit,.sh-page-policytemplate) .story-split { grid-template-columns: 1fr; } :is(.sh-page-about,.sh-page-nonprofit,.sh-page-policytemplate) .values-grid { grid-template-columns: repeat(2,1fr); } :is(.sh-page-about,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .hero { padding: 48px 0 64px; } :is(.sh-page-about,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) section { padding: 64px 0; } :is(.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq) .hero-float.f2 { right: 8px; } :is(.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq) .hero-float.f1 { left: 8px; } .sh-page-faq .faq-answer ul.example-list { grid-template-columns: 1fr; } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .footer-inner { grid-template-columns: 1fr 1fr; } .sh-page-reasons .reason-band .reason-copy { order: 1; } .sh-page-reasons .reason-band .reason-media { order: 2; } .sh-page-navex .why-grid { grid-template-columns: 1fr; } .sh-page-features .cap-grid { grid-template-columns: repeat(2,1fr); } .sh-page-features .cap-card, .sh-page-features .cap-grid > .cap-card:nth-last-child(2):nth-child(3n+1), .sh-page-features .cap-grid > .cap-card:last-child:nth-child(3n+2) { grid-column: span 1; } .sh-page-features .cap-grid > .cap-card:last-child:nth-child(odd) { grid-column: span 2; } .sh-page-services .poster-item { flex-basis: calc((100% - 28px) / 3); } } @media (max-width: 800px) { .sh-page-casemanagement .step-card { grid-template-columns: 52px 1fr; } .sh-page-casemanagement .step-shot { grid-column: 1 / -1; } } @media (max-width: 760px) { .sh-page-reasons .emp-benefits { grid-template-columns: 1fr; } .sh-page-reasons .emp-photo { aspect-ratio: 16/10; border-radius: 16px; } .sh-page-reasons .emp-head { text-align: left; } .sh-page-reasons .emp-top { grid-template-columns: 1fr; gap: 28px; } .sh-page-reasons .emp-top .emp-photo { justify-self: start; aspect-ratio: auto; } .sh-page-reasons .rep-list { grid-template-columns: 1fr; padding: 4px 16px; } .sh-page-reasons .rep-list .benefit-item + .benefit-item { border-top: 1px solid var(--border); } } @media (max-width: 640px) { .sh-page-services .poster-grid { grid-template-columns: repeat(2,1fr); } .sh-page-reasons .stat-grid { grid-template-columns: 1fr; } :is(.sh-page-about,.sh-page-nonprofit,.sh-page-policytemplate) .stats-grid { grid-template-columns: 1fr; } :is(.sh-page-about,.sh-page-nonprofit,.sh-page-policytemplate) .values-grid { grid-template-columns: 1fr; } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .site-header-inner { flex-wrap: wrap; justify-content: center; } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .site-nav-actions { width: 100%; justify-content: center; padding-bottom: 8px; } .sh-page-navex .hero-ctas .sh-btn, .sh-page-navex .soft-cta-actions .sh-btn { flex: 1; min-width: 140px; } :is(.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq) .hero-ctas .sh-btn { flex: 1; min-width: 140px; } :is(.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq) .soft-cta-actions .sh-btn { flex: 1; min-width: 140px; } .sh-page-faq .faq-group-head h2 { white-space: normal; } .sh-page-services .hero-ctas .sh-btn, .sh-page-services .soft-cta-actions .sh-btn, .sh-page-services .cms-actions .sh-btn { flex: 1; min-width: 140px; } :is(.sh-page-about,.sh-page-nonprofit,.sh-page-policytemplate) .hero-ctas .sh-btn, :is(.sh-page-about,.sh-page-nonprofit,.sh-page-policytemplate) .soft-cta-actions .sh-btn, :is(.sh-page-about,.sh-page-nonprofit,.sh-page-policytemplate) .serve-actions .sh-btn { flex: 1; min-width: 140px; } :is(.sh-page-about,.sh-page-services,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) section { padding: 56px 0; } .sh-page-navex .compare-table tbody th { position: static; } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .hero-ctas { flex-direction: column; align-items: stretch; } .sh-page-home { font-size: 16px; } .sh-page-home .sh-container { padding: 0 20px; } .sh-page-home .site-header-inner { flex-direction: column; gap: 4px; padding: 6px 12px 10px; } .sh-page-home .nav-links { justify-content: center; } .sh-page-home .nav-links a { padding: 8px 7px; font-size: 14px; } .sh-page-home .nav-actions { justify-content: center; } .sh-page-home .nav-actions a { font-size: 13px; padding: 8px 10px; } .sh-page-home .hero { padding: 44px 0 56px; } .sh-page-home .hero-logo { height: 64px; margin-bottom: 22px; } .sh-site .hero-ctas .sh-btn { width: 100%; } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .soft-cta-inner { padding: 36px 22px; border-radius: 20px; } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .soft-cta-actions .sh-btn { width: 100%; } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .footer-inner { grid-template-columns: 1fr; } :is(.sh-page-about,.sh-page-services,.sh-page-features,.sh-page-reasons,.sh-page-casemanagement,.sh-page-faq,.sh-page-navex,.sh-page-nonprofit,.sh-page-policytemplate) .soft-cta-inner .eyebrow::before { display: none; } .sh-page-navex .price-grid { grid-template-columns: 1fr; } .sh-page-navex .price-card { padding: 34px 20px 26px; } .sh-page-faq .faq-group { padding: 24px 18px 6px; border-radius: 14px; } .sh-page-faq .faq-item summary { font-size: 1rem; } .sh-page-faq .faq-toc { gap: 8px; } .sh-page-features .cap-grid { grid-template-columns: 1fr; } .sh-page-features .cap-grid > .cap-card:last-child:nth-child(odd) { grid-column: span 1; } .sh-page-services .poster-item { flex-basis: calc((100% - 14px) / 2); } .sh-page-services .cms-actions .sh-btn { white-space: normal; } :is(.sh-page-about,.sh-page-nonprofit,.sh-page-policytemplate) .serve-actions { flex-direction: column; align-items: stretch; } :is(.sh-page-about,.sh-page-nonprofit,.sh-page-policytemplate) .serve-actions .sh-btn { width: 100%; } :is(.sh-page-about,.sh-page-nonprofit,.sh-page-policytemplate) .stats-grid { grid-template-columns: repeat(2,1fr); gap: 18px 12px; } :is(.sh-page-about,.sh-page-nonprofit,.sh-page-policytemplate) .stats-band { padding: 36px 0; } .sh-page-home .hero-ctas { justify-content: center; } .sh-page-home .pills { grid-template-columns: 1fr; gap: 10px; margin-bottom: 44px; } .sh-page-home .trust { padding: 48px 0 56px; } .sh-page-home .sh-panel { padding: 30px 22px 26px; } .sh-page-home .price-card { padding: 36px 24px 28px; } .sh-page-home .amount { font-size: 3rem; } .sh-page-home .custom { padding: 24px; } .sh-page-home .custom .sh-btn { width: 100%; } .sh-page-home .moreq-card { padding: 36px 24px; border-radius: 20px; } .sh-page-home .ctas { width: 100%; } .sh-page-home .ctas .sh-btn { flex: 1; } .sh-page-home .stats { grid-template-columns: 1fr 1fr; } .sh-page-home .quote { padding: 24px 20px; } .sh-page-home section.block { padding: 64px 0; } .sh-page-home .moreq { padding-bottom: 64px; } .sh-page-home .head { margin-bottom: 40px; } .sh-page-home .intro-grid { gap: 32px; margin-bottom: 40px; } .sh-page-home .pill { white-space: normal; } } @media (min-width: 961px) { .sh-page-reasons .more-grid { display: flex; flex-wrap: wrap; justify-content: center; } .sh-page-reasons .more-grid .overview-card { flex: 0 1 calc((100% - 48px)/3); } .sh-page-reasons .stat-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; } .sh-page-reasons .stat-grid .stat-card { flex: 0 1 calc((100% - 32px)/3); } :is(.sh-page-about,.sh-page-nonprofit,.sh-page-policytemplate) .stat-item + .stat-item { border-left: 1px solid rgba(255,255,255,.14); } } @media (prefers-reduced-motion: reduce) { .sh-page-home * { transition: none!important; } } /* ============================================================================================ 7. LAYOUT FOOTER: the redesigned footer in _Layout.cshtml (body > footer.footer, outside the page wrapper) Same rules as the home page footer, scoped to body > .footer (tokens and base type included). ============================================================================================ */ body > .footer { --navy: #0B2A5B; --navy-mid: #143A73; --navy-deep: #061833; --navy-soft: #E8EEF6; --wash: #F3F6FB; --orange: #F05A28; --orange-d: #C9431A; --orange-soft: #FFF1EB; --text: #1A2332; --muted: #556173; --border: #DFE5EE; --r: 16px; --max: 1160px; --sh1: 0 1px 2px rgba(11,42,91,.06),0 4px 14px rgba(11,42,91,.06); --sh2: 0 2px 4px rgba(11,42,91,.06),0 16px 40px rgba(11,42,91,.12); --font: "Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; } body > .footer *, body > .footer, body > .footer *::before, body > .footer::before, body > .footer *::after, body > .footer::after { box-sizing: border-box; margin: 0; padding: 0; } @media (prefers-reduced-motion: reduce) { body > .footer *, body > .footer { transition: none!important; } } body > .footer { font-family: var(--font); color: var(--text); background: #fff; line-height: 1.65; font-size: 17px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body > .footer a { color: inherit; text-decoration: none; } body > .footer img { display: block; max-width: 100%; height: auto; } body > .footer ul { list-style: none; } body > .footer :focus-visible, body > .footer:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 6px; } body > .footer .container { max-width: var(--max); margin: 0 auto; padding: 0 28px; } body > .footer.footer { background: #04122A; color: rgba(255,255,255,.75); padding: 64px 0 28px; font-size: 15px; border-top: 3px solid var(--orange); } body > .footer .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr .7fr; gap: 48px; margin-bottom: 44px; } body > .footer .footer-logo { height: 48px; width: auto; margin-bottom: 16px; border-radius: 6px; } body > .footer.footer .footer-h { font-size: 12.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-bottom: 16px; } body > .footer.footer li { margin-bottom: 10px; } body > .footer.footer a:hover { color: #fff; text-decoration: underline; } body > .footer.footer .tel { font-size: 18px; font-weight: 800; color: #fff; } body > .footer .footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding-top: 22px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 13.5px; color: rgba(255,255,255,.6); } @media (max-width: 980px) { body > .footer .footer-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { body > .footer { font-size: 16px; } body > .footer .container { padding: 0 20px; } } body > .footer { margin-top: 100px; } /* cancels site.css #wrap { margin: 0 auto -100px } (old sticky-footer rule); the old .footer2 did the same */ /* ============================================================================================ 8. ASP.NET: tokens and page wrappers (.sh-contact, .sh-report) ============================================================================================ */ .sh-contact { --sh-navy: #0B2A5B; --sh-navy-mid: #143A73; --sh-navy-soft: #E8EEF6; --sh-orange: #F05A28; --sh-orange-d: #C9431A; --sh-orange-soft: #FFF1EB; --sh-text: #1A2332; --sh-muted: #556173; --sh-border: #DFE5EE; --sh-wash: #F3F6FB; --sh-error: #B42318; --sh-sh1: 0 1px 2px rgba(11,42,91,.06),0 4px 14px rgba(11,42,91,.06); --sh-sh2: 0 2px 4px rgba(11,42,91,.06),0 16px 40px rgba(11,42,91,.12); --sh-font: "Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; font-family: var(--sh-font); color: var(--sh-text); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; background: linear-gradient(180deg,#F7FAFE 0%,var(--sh-wash) 55%,#FFFFFF 100%); padding: 48px 0 72px; } .sh-report { --sh-navy: #0B2A5B; --sh-navy-mid: #143A73; --sh-navy-soft: #E8EEF6; --sh-orange: #F05A28; --sh-orange-d: #C9431A; --sh-orange-soft: #FFF1EB; --sh-text: #1A2332; --sh-muted: #556173; --sh-border: #DFE5EE; --sh-field: #C9D3E1; --sh-wash: #F3F6FB; --sh-error: #B42318; --sh-sh1: 0 1px 2px rgba(11,42,91,.06),0 4px 14px rgba(11,42,91,.06); --sh-font: "Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; font-family: var(--sh-font); color: var(--sh-text); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; background: linear-gradient(180deg,#F7FAFE 0%,var(--sh-wash) 60%,#FFFFFF 100%); padding: 18px 0 72px; } /* ============================================================================================ 9. ASP.NET: Contact page (.sh-contact) ============================================================================================ */ .sh-contact *, .sh-contact *::before, .sh-contact *::after { box-sizing: border-box; } .sh-contact h1, .sh-contact h2, .sh-contact h3, .sh-contact h4 { font-family: var(--sh-font); color: var(--sh-navy); letter-spacing: -.02em; margin: 0; } .sh-contact a { color: var(--sh-navy); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .sh-contact a:hover, .sh-contact a:focus { color: var(--sh-orange-d); } .sh-contact :focus-visible { outline: 3px solid var(--sh-orange); outline-offset: 3px; } .sh-contact .sh-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; } /* Section label with orange dash */ .sh-contact .sh-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sh-orange); margin-bottom: 10px; } .sh-contact .sh-eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px; } /* Hero / intro */ .sh-contact .sh-hero { max-width: 720px; margin-bottom: 36px; } .sh-contact .sh-h1 { font-size: clamp(2rem,3.6vw,2.6rem); font-weight: 800; line-height: 1.12; letter-spacing: -.03em; margin-bottom: 14px; } .sh-contact .sh-accent { background: linear-gradient(transparent 68%,rgba(240,90,40,.22) 68%); } .sh-contact .sh-lead { font-size: 1.12rem; color: var(--sh-muted); line-height: 1.55; margin: 0; } /* Two-column layout */ .sh-contact .sh-grid { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: 28px; align-items: start; } /* Cards with 4px accent bar */ .sh-contact .sh-card { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--sh-border); border-radius: 16px; box-shadow: var(--sh-sh1); padding: 30px 28px 26px; margin: 0; } .sh-contact .sh-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--sh-navy); } .sh-contact .sh-card--orange::before { background: var(--sh-orange); } .sh-contact .sh-h2 { font-size: 1.5rem; font-weight: 800; line-height: 1.2; } .sh-contact .sh-h3 { font-size: 1.12rem; font-weight: 750; line-height: 1.3; margin-bottom: 12px; } /* ---------- Form card ---------- */ .sh-contact .sh-form-head { margin-bottom: 22px; } .sh-contact .sh-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; margin: 0; } .sh-contact .sh-field { margin: 0; min-width: 0; } .sh-contact .sh-field--full, .sh-contact .sh-form > .validation-summary-errors, .sh-contact .sh-form > .validation-summary-valid { grid-column: 1 / -1; } .sh-contact .sh-field > br, .sh-contact .sh-actions br { display: none; } /* labels (LabelFor renders label.control-label2) */ .sh-contact .sh-form label, .sh-contact .sh-form .control-label2 { display: block; margin: 0 0 6px; padding: 0; font-size: 14px; font-weight: 700; color: var(--sh-navy); line-height: 1.3; } /* required marker for fields that carry data-val-required (Name, Email) */ .sh-contact .sh-field:has(input[data-val-required]) .control-label2::after { content: " *"; color: var(--sh-orange-d); } .sh-contact .sh-form .sh-hint { margin: -2px 0 8px; font-size: 13.5px; line-height: 1.45; color: var(--sh-muted); } /* inputs + textarea (raw inputs .wide-full, EditorFor .form-control) */ .sh-contact .sh-form input:not([type="submit"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), .sh-contact .sh-form textarea, .sh-contact .sh-form select, .sh-contact .sh-form .form-control { display: block; width: 100%; max-width: none; height: auto; min-height: 48px; margin: 0; padding: 12px 14px; font-family: inherit; font-size: 16px; line-height: 1.4; color: var(--sh-text); background: #fff; background-image: none; border: 1.5px solid #C9D3E1; border-radius: 10px; box-shadow: none; transition: border-color .15s,box-shadow .15s; } .sh-contact .sh-form textarea, .sh-contact .sh-form textarea.form-control { min-height: 150px; resize: vertical; } .sh-contact .sh-form input:not([type="submit"]):hover, .sh-contact .sh-form textarea:hover { border-color: #9FB0C7; } .sh-contact .sh-form input:not([type="submit"]):focus, .sh-contact .sh-form textarea:focus, .sh-contact .sh-form .form-control:focus { outline: 0; border-color: var(--sh-navy); box-shadow: 0 0 0 4px rgba(11,42,91,.12); } .sh-contact .sh-form .error, .sh-contact .sh-form .field-validation-error, .sh-contact .sh-form .text-danger { display: block; background: transparent; color: var(--sh-error); font-size: 13.5px; font-weight: 600; margin-top: 6px; padding: 0; } .sh-contact .sh-form .field-validation-valid { display: none; } .sh-contact .sh-form .input-validation-error, .sh-contact .sh-form .input-validation-error:focus { border-color: var(--sh-error)!important; box-shadow: 0 0 0 4px rgba(180,35,24,.10)!important; } .sh-contact .sh-form .validation-summary-errors ul { margin: 0; padding-left: 18px; } /* reCAPTCHA (Google iframe, 304x78; can't be restyled inside) */ .sh-contact .sh-field--captcha { margin-top: 2px; } .sh-contact .sh-field--captcha .g-recaptcha { max-width: 100%; } .sh-contact .sh-actions { margin-top: 4px; } .sh-contact .sh-actions input[type="submit"], .sh-contact .sh-actions input[type="submit"].btn-warning, .sh-contact .sh-actions input[type="submit"].btntxt2 { display: inline-block; width: auto; min-width: 220px; min-height: 52px; margin: 0; padding: 14px 28px; font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1.2; letter-spacing: 0; color: #fff; text-shadow: none; text-align: center; background: var(--sh-orange); background-image: none; border: 2px solid transparent; border-radius: 10px; box-shadow: 0 6px 18px rgba(240,90,40,.32); cursor: pointer; transition: background .18s,transform .18s,box-shadow .18s; } .sh-contact .sh-actions input[type="submit"]:hover, .sh-contact .sh-actions input[type="submit"]:focus, .sh-contact .sh-actions input[type="submit"]:active { color: #fff; background: var(--sh-orange-d); background-image: none; border-color: transparent; transform: translateY(-1px); } .sh-contact .sh-actions input[type="submit"]:focus-visible { outline: 3px solid var(--sh-navy); outline-offset: 3px; } /* ---------- Right column ---------- */ .sh-contact .sh-aside { display: grid; gap: 20px; align-content: start; } .sh-contact .sh-note { border-color: rgba(11,42,91,.18); box-shadow: var(--sh-sh2); } .sh-contact .sh-note::before { height: 5px; } .sh-contact .sh-note p { margin: 0 0 10px; color: var(--sh-muted); font-size: 15px; line-height: 1.6; } .sh-contact .sh-note p:last-child { margin-bottom: 0; } .sh-contact .sh-note p strong { color: var(--sh-navy); font-weight: 700; } .sh-contact .sh-note .sh-note-lead { color: var(--sh-text); font-weight: 600; } .sh-contact .sh-note .sh-note-rule { border: 0; border-top: 1px solid var(--sh-border); margin: 14px 0; height: 0; } /* Navy CTA card */ .sh-contact .sh-cta { border-radius: 16px; padding: 28px 26px; color: #fff; box-shadow: var(--sh-sh2); background: linear-gradient(135deg,var(--sh-navy) 0%,var(--sh-navy-mid) 100%); } .sh-contact .sh-cta .sh-eyebrow { color: #FFB490; } .sh-contact .sh-cta .sh-h3 { color: #fff; font-size: 1.3rem; } .sh-contact .sh-cta p { margin: 0 0 18px; color: rgba(255,255,255,.84); font-size: 15px; line-height: 1.55; } .sh-contact .sh-cta p strong { color: #fff; } .sh-contact .sh-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; } .sh-contact .sh-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 12px 20px; border-radius: 10px; border: 2px solid transparent; font-size: 15px; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: background .18s,color .18s,border-color .18s,transform .18s; } .sh-contact .sh-btn--primary { background: var(--sh-orange); color: #fff; box-shadow: 0 6px 18px rgba(240,90,40,.32); } .sh-contact .sh-btn--primary:hover, .sh-contact .sh-btn--primary:focus { background: var(--sh-orange-d); color: #fff; transform: translateY(-1px); } .sh-contact .sh-btn--ghost { background: #fff; color: var(--sh-navy); border-color: rgba(11,42,91,.22); } .sh-contact .sh-btn--ghost:hover, .sh-contact .sh-btn--ghost:focus { background: var(--sh-navy-soft); color: var(--sh-navy); border-color: var(--sh-navy); } /* ============================================================================================ 10. ASP.NET FORMS: Submit a Report and shared form styles (.sh-report; also used by Report Status and Reporter views) ============================================================================================ */ .sh-report *, .sh-report *::before, .sh-report *::after { box-sizing: border-box; } .sh-report h1, .sh-report h2, .sh-report h3 { font-family: var(--sh-font); color: var(--sh-navy); letter-spacing: -.02em; margin: 0; } .sh-report a { color: var(--sh-navy); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(240,90,40,.55); text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: pointer; } .sh-report a:hover, .sh-report a:focus { color: var(--sh-orange-d); } .sh-report :focus-visible { outline: 3px solid var(--sh-orange); outline-offset: 3px; } .sh-report .sh-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .sh-report .sh-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; } .sh-report form { margin: 0; } .sh-report form > br { display: none; } /* ---------- Intro ---------- */ .sh-report .sh-hero { margin-bottom: 16px; } .sh-report .sh-h1 { font-size: clamp(1.75rem,3vw,2.1rem); font-weight: 800; line-height: 1.12; letter-spacing: -.03em; margin-bottom: 0; } .sh-report .sh-lead { font-size: 1.1rem; color: var(--sh-muted); line-height: 1.6; margin: 0; max-width: 680px; } /* ---------- Steps (numbered rail) ---------- */ .sh-report .sh-steps { display: grid; gap: 28px; } .sh-report .sh-step { position: relative; padding-left: 60px; } .sh-report .sh-step:not(:last-child)::before { content: ""; position: absolute; left: 19px; top: 46px; bottom: -24px; width: 2px; background: linear-gradient(var(--sh-border),var(--sh-border)); } .sh-report .sh-step-head { display: flex; align-items: center; min-height: 40px; margin-bottom: 14px; } .sh-report .sh-step-num { position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--sh-navy); color: #fff; font-weight: 800; font-size: 17px; line-height: 1; box-shadow: 0 0 0 5px #F5F8FC; } .sh-report .sh-step-title { font-size: 1.28rem; font-weight: 750; line-height: 1.3; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; } .sh-report .sh-optional { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sh-muted); background: var(--sh-navy-soft); border-radius: 999px; padding: 3px 10px; line-height: 1.4; } /* ---------- Cards (4px top bar) ---------- */ .sh-report .sh-card { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--sh-border); border-radius: 16px; box-shadow: var(--sh-sh1); padding: 26px 28px 24px; margin: 0; } .sh-report .sh-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--sh-navy); } .sh-report .sh-card--submit::before { background: var(--sh-orange); } .sh-report .sh-card > br { display: none; } .sh-report .sh-card-lead { margin: 0 0 14px; font-size: 15.5px; color: var(--sh-text); line-height: 1.6; } .sh-report .sh-muted { margin: 0 0 18px; font-size: 14.5px; color: var(--sh-muted); line-height: 1.6; } /* Buttons for plain links (Login / Create Account) */ .sh-report .sh-btn-row { display: flex; flex-wrap: wrap; gap: 12px; } .sh-report .sh-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; min-width: 150px; padding: 11px 22px; border-radius: 10px; border: 2px solid transparent; font-size: 15px; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: background .18s,color .18s,border-color .18s; } .sh-report .sh-btn--navy { background: var(--sh-navy); color: #fff; } .sh-report .sh-btn--navy:hover, .sh-report .sh-btn--navy:focus { background: var(--sh-navy-mid); color: #fff; } .sh-report .sh-btn--ghost { background: #fff; color: var(--sh-navy); border-color: rgba(11,42,91,.22); } .sh-report .sh-btn--ghost:hover, .sh-report .sh-btn--ghost:focus { background: var(--sh-navy-soft); color: var(--sh-navy); border-color: var(--sh-navy); } /* Logged-in Reporter: Allow response */ .sh-report .sh-allow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 14px 16px; background: var(--sh-wash); border: 1px solid var(--sh-border); border-radius: 12px; } .sh-report .sh-allow label, .sh-report .sh-allow .control-label, .sh-report .form-horizontal .sh-allow .control-label { float: none; width: auto; padding: 0; margin: 0; text-align: left; font-size: 14px; font-weight: 700; color: var(--sh-navy); line-height: 1.3; } .sh-report .sh-check { display: inline-flex; align-items: center; gap: 10px; } .sh-report .sh-check-text { font-size: 15px; font-weight: 600; color: var(--sh-text); } /* ---------- Form fields ---------- */ .sh-report .sh-form { display: block; } .sh-report .sh-req-note { margin: 0 0 16px; font-size: 13.5px; color: var(--sh-muted); } .sh-report .sh-req-note span { color: var(--sh-orange-d); font-weight: 700; } .sh-report .sh-field { margin: 0 0 20px; min-width: 0; } .sh-report .sh-field > br, .sh-report .sh-label-row br { display: none; } .sh-report .sh-label-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-bottom: 6px; } .sh-report .sh-label-row label { margin: 0; } .sh-report .sh-label-hint { font-size: 13.5px; color: var(--sh-muted); } .sh-report .sh-field label, .sh-report .sh-field label.col-md-12, .sh-report .sh-field .reportlabel2, .sh-report .sh-terms label.control-label, .sh-report .form-horizontal .sh-terms .control-label { display: block; float: none; width: auto; min-height: 0; margin: 0 0 6px; padding: 0; text-align: left; font-size: 14.5px; font-weight: 700; color: var(--sh-navy); line-height: 1.35; } .sh-report .sh-field--req > label::after, .sh-report .sh-field--req .sh-label-row label::after { content: " *"; color: var(--sh-orange-d); } .sh-report .sh-hint { margin: 0 0 10px; font-size: 14px; color: var(--sh-muted); line-height: 1.55; } .sh-report .sh-anon-note { position: relative; margin: 0 0 12px; padding: 12px 14px 12px 44px; background: var(--sh-orange-soft); border: 1px solid rgba(240,90,40,.22); border-radius: 10px; font-size: 14px; line-height: 1.5; color: var(--sh-text); } .sh-report .sh-anon-note strong { font-weight: 650; color: var(--sh-navy); } .sh-report .sh-anon-note::before { content: ""; position: absolute; left: 14px; top: 13px; width: 18px; height: 18px; background: var(--sh-orange-d); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E") center / contain no-repeat; } .sh-report .sh-control input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]):not(.k-input), .sh-report .sh-control select, .sh-report .sh-control select.locationdrop, .sh-report .sh-control textarea, .sh-report .sh-control .form-control, .sh-report .sh-control .nobr { display: block!important; width: 100%; max-width: none; height: auto; min-height: 48px; margin: 0; padding: 11px 14px; font-family: inherit; font-size: 16px; line-height: 1.4; color: var(--sh-text); background-color: #fff; background-image: none; border: 1.5px solid var(--sh-field); border-radius: 10px; box-shadow: none; transition: border-color .15s,box-shadow .15s; } /* kept here: must come before a later rule */ .sh-report .sh-control select, .sh-report .sh-control select.locationdrop, .sh-report .sh-control select.form-control, .sh-report .sh-control select.reportfield, .sh-report .sh-control select.nobr { -webkit-appearance: none; appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2A5B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; cursor: pointer; } .sh-report .sh-control textarea { min-height: 110px; resize: vertical; } .sh-report .sh-control textarea.smallmultiline { height: auto; min-height: 96px; } .sh-report .sh-control textarea.textarealg { width: 100%; height: auto; min-height: 220px; } .sh-report .sh-control input:hover, .sh-report .sh-control select:hover, .sh-report .sh-control textarea:hover { border-color: #9FB0C7; } .sh-report .sh-control input:focus, .sh-report .sh-control select:focus, .sh-report .sh-control textarea:focus { outline: 0; border-color: var(--sh-navy); box-shadow: 0 0 0 4px rgba(11,42,91,.12); } /* Kendo DatePicker (IncidentDate, Bootstrap theme) */ .sh-report .k-widget, .sh-report .k-widget * { box-sizing: border-box; } /* kept here: must come before a later rule */ .sh-report .sh-control .k-datepicker { display: block; width: 100%; max-width: 320px; background: transparent; border: 0; box-shadow: none; } /* kept here: must come before a later rule */ .sh-report .sh-control .k-datepicker .k-picker-wrap { display: flex; align-items: stretch; padding: 0; min-height: 48px; background: #fff; border: 1.5px solid var(--sh-field); border-radius: 10px; box-shadow: none; overflow: hidden; } /* kept here: must come before a later rule */ .sh-report .sh-control .k-datepicker .k-input { flex: 1; height: auto; min-height: 45px; padding: 10px 14px; border: 0; background: transparent; font-family: inherit; font-size: 16px; color: var(--sh-text); box-shadow: none; text-indent: 0; } /* kept here: must come before a later rule */ .sh-report .sh-control .k-datepicker .k-select { position: static; display: flex; align-items: center; justify-content: center; width: 46px; height: auto; min-height: 45px; line-height: 1; background: var(--sh-navy-soft); border: 0; border-left: 1.5px solid var(--sh-field); border-radius: 0; } /* kept here: must come before a later rule */ .sh-report .text-danger, .sh-report .field-validation-error { color: var(--sh-error); font-size: 13.5px; font-weight: 600; margin-top: 6px; } .sh-report .sh-control .field-validation-error, .sh-report .sh-terms .field-validation-error, .sh-report #locerror { display: block; } .sh-report .field-validation-valid { display: none; } .sh-report .input-validation-error, .sh-report .input-validation-error:focus { border-color: var(--sh-error)!important; box-shadow: 0 0 0 4px rgba(180,35,24,.10)!important; } .sh-report .validation-summary-errors ul { margin: 0; padding-left: 18px; } .sh-report .sh-terms { margin-top: 4px; padding: 16px 16px 14px; background: var(--sh-wash); border: 1px solid var(--sh-border); border-radius: 12px; } .sh-report .sh-terms-link { display: inline-block; margin-bottom: 10px; font-size: 14.5px; } .sh-report .sh-terms-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 12px; } .sh-report .sh-terms-row label.control-label, .sh-report .form-horizontal .sh-terms-row .control-label { flex: 1 1 0; min-width: 0; margin: 0; padding: 1px 0 0; font-size: 15px; font-weight: 600; color: var(--sh-text); } .sh-report .sh-terms-row label.control-label::after { content: " *"; color: var(--sh-orange-d); } .sh-report .sh-terms-row input[type="checkbox"] { order: -1; } .sh-report .sh-terms-row .text-danger { flex-basis: 100%; margin-top: 2px; } /* checkboxes (AllowResponse has Bootstrap .checkbox class) */ .sh-report input[type="checkbox"], .sh-report input[type="checkbox"].checkbox { display: inline-block; position: static; flex: none; width: 20px; height: 20px; margin: 1px 0 0; padding: 0; accent-color: var(--sh-navy); cursor: pointer; } .sh-report .sh-upload > label.sh-label { display: block; margin: 0 0 8px; font-size: 14.5px; font-weight: 700; color: var(--sh-navy); } .sh-report .k-upload { display: block; width: 100%; max-width: none; border: 1.5px dashed var(--sh-field); border-radius: 12px; background: #F8FAFD; box-shadow: none; } /* kept here: must come before a later rule */ .sh-report .sh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .sh-report .sh-actions a { text-decoration: none; display: inline-block; } .sh-report .sh-actions input[type="submit"], .sh-report .sh-actions input[type="submit"].btn-primary, .sh-report .sh-actions input[type="button"], .sh-report .sh-actions input[type="button"].btn-primary { display: inline-block; width: auto; min-height: 52px; margin: 0; padding: 14px 28px; font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1.2; letter-spacing: 0; text-shadow: none; text-align: center; background-image: none; border-radius: 10px; cursor: pointer; transition: background .18s,border-color .18s,box-shadow .18s; } .sh-report .sh-actions input[type="submit"], .sh-report .sh-actions input[type="submit"].btn-primary { min-width: 220px; color: #fff; background: var(--sh-orange); border: 2px solid transparent; box-shadow: 0 6px 18px rgba(240,90,40,.30); } .sh-report .sh-actions input[type="submit"]:hover, .sh-report .sh-actions input[type="submit"]:focus, .sh-report .sh-actions input[type="submit"]:active { color: #fff; background: var(--sh-orange-d); border-color: transparent; } .sh-report .sh-actions input[type="button"], .sh-report .sh-actions input[type="button"].btn-primary { min-width: 130px; color: var(--sh-navy); background: #fff; border: 2px solid rgba(11,42,91,.22); box-shadow: none; } .sh-report .sh-actions input[type="button"]:hover, .sh-report .sh-actions input[type="button"]:focus { color: var(--sh-navy); background: var(--sh-navy-soft); border-color: var(--sh-navy); } .sh-report .sh-actions input:focus-visible { outline: 3px solid var(--sh-navy); outline-offset: 3px; } @media (max-width: 640px) { .sh-report .sh-wrap { padding: 0 16px; } /* kept here: must come before a later rule */ .sh-report .sh-hero { margin-bottom: 14px; } /* kept here: must come before a later rule */ .sh-report .sh-step { padding-left: 0; } /* kept here: must come before a later rule */ .sh-report .sh-step-num { position: static; flex: none; width: 34px; height: 34px; font-size: 15px; box-shadow: none; } /* kept here: must come before a later rule */ .sh-report .sh-step-title { font-size: 1.12rem; } /* kept here: must come before a later rule */ .sh-report .sh-card { padding: 22px 18px 20px; border-radius: 14px; } /* kept here: must come before a later rule */ .sh-report .sh-step-title { padding-top: 4px; } /* kept here: must come before a later rule */ } /* Step 1: no-account option */ .sh-report .sh-alt-note { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid #E3E9F2; font-size: .95rem; line-height: 1.6; color: var(--sh-muted); } .sh-report .sh-alt-note strong { color: var(--sh-navy); } /* ============================================================================================ 11. ASP.NET: Report Status views (.sh-report.sh-status, also reused by the Reporter views) ============================================================================================ */ /* checkboxes (AllowResponse has Bootstrap .checkbox class) */ .sh-report .k-upload .k-dropzone { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding: 16px; background: transparent; border: 0; } /* kept here: must come before a later rule */ .sh-report .k-upload .k-upload-button { position: relative; overflow: hidden; display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 10px 18px; border-radius: 10px; border: 2px solid rgba(11,42,91,.22); background: #fff; background-image: none; color: var(--sh-navy); font-family: inherit; font-size: 15px; font-weight: 700; box-shadow: none; text-shadow: none; } /* kept here: must come before a later rule */ .sh-report .k-upload .k-upload-files { margin: 0; padding: 0 16px 12px; border: 0; } /* kept here: must come before a later rule */ .sh-report .k-upload .k-file { position: relative; padding: 10px 12px; margin-top: 8px; background: #fff; border: 1px solid var(--sh-border); border-radius: 10px; font-size: 14px; color: var(--sh-text); } /* kept here: must come before a later rule */ .sh-report .k-upload .k-progress { background-color: var(--sh-orange); height: 3px; top: auto; bottom: 0; border-radius: 0 0 0 10px; } /* kept here: must come before a later rule */ .sh-report .k-upload .k-upload-status { color: var(--sh-navy); } /* kept here: must come before a later rule */ @media (max-width: 640px) { .sh-report .sh-steps { gap: 24px; } /* kept here: must come before a later rule */ .sh-report .sh-step-head { gap: 12px; } /* kept here: must come before a later rule */ .sh-report .sh-step-head { align-items: flex-start; } /* kept here: must come before a later rule */ } .sh-report:where(.sh-status,.sh-reporter) .sh-narrow { max-width: none; } .sh-report:where(.sh-status,.sh-reporter) .sh-cards { display: grid; gap: 22px; } .sh-report:where(.sh-status,.sh-reporter) .sh-card-title { font-size: 1.2rem; font-weight: 750; line-height: 1.3; margin: 0 0 16px; } .sh-report:where(.sh-status,.sh-reporter) .sh-field .sh-hint { margin: -2px 0 8px; font-size: 13.5px; } .sh-report:where(.sh-status,.sh-reporter) .sh-card-lead a { white-space: nowrap; } .sh-report:where(.sh-status,.sh-reporter) .sh-error { position: relative; margin: 0 0 20px; padding: 12px 14px 12px 44px; background: #FEF3F2; border: 1px solid rgba(180,35,24,.25); border-radius: 10px; color: var(--sh-error); font-size: 14.5px; font-weight: 650; line-height: 1.5; } .sh-report:where(.sh-status,.sh-reporter) .sh-error::before { content: ""; position: absolute; left: 14px; top: 13px; width: 18px; height: 18px; background: var(--sh-error); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") center / contain no-repeat; } .sh-report:where(.sh-status,.sh-reporter) .sh-error:empty { display: none; } /* Read-only summary: label/value rows (result page) */ .sh-report:where(.sh-status,.sh-reporter) .sh-summary { display: grid; } .sh-report:where(.sh-status,.sh-reporter) .sh-summary-row { display: grid; grid-template-columns: 200px minmax(0,1fr); gap: 6px 20px; align-items: baseline; padding: 14px 0; border-top: 1px solid #E3E9F2; } .sh-report:where(.sh-status,.sh-reporter) .sh-summary-row:first-child { border-top: 0; padding-top: 2px; } .sh-report:where(.sh-status,.sh-reporter) .sh-summary-row:last-child { padding-bottom: 0; } .sh-report:where(.sh-status,.sh-reporter) .sh-summary-label label, .sh-report:where(.sh-status,.sh-reporter) .sh-summary-label .reportlabel2 { display: block; float: none; width: auto; margin: 0; padding: 0; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sh-muted); line-height: 1.4; } .sh-report:where(.sh-status,.sh-reporter) .sh-summary-value { min-width: 0; font-size: 16px; line-height: 1.6; color: var(--sh-text); overflow-wrap: anywhere; } .sh-report:where(.sh-status,.sh-reporter) .sh-status-value { justify-self: start; display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--sh-navy-soft); color: var(--sh-navy); font-weight: 700; font-size: 15px; line-height: 1.4; } .sh-report:where(.sh-status,.sh-reporter) .sh-status-value:empty { display: none; } /* keep the line breaks the organization typed into its message */ .sh-report:where(.sh-status,.sh-reporter) .sh-msg { white-space: pre-line; } .sh-report:where(.sh-status,.sh-reporter) .sh-msg:empty::before { content: "No message yet."; color: var(--sh-muted); } /* Add-a-message card: reminder sits under the textarea */ .sh-report:where(.sh-status,.sh-reporter) .sh-field .sh-control + .sh-anon-note { margin: 12px 0 0; } .sh-report:where(.sh-status,.sh-reporter) .sh-card-title + .sh-field { margin-top: 0; } /* ============================================================================================ 12. ASP.NET: Reporter views (.sh-report.sh-reporter) ============================================================================================ */ @media (max-width: 640px) { .sh-report:where(.sh-status,.sh-reporter) .sh-card-title { font-size: 1.1rem; } /* kept here: must come before a later rule */ } /* ---------- Grid cards ---------- */ .sh-report:where(.sh-reporter) .sh-grid-card { padding-bottom: 0; } .sh-report:where(.sh-reporter) .sh-grid-card .sh-card-title + .sh-card-lead { margin: -8px 0 16px; } .sh-report:where(.sh-reporter) .sh-grid-scroll { margin: 0 -28px; border-top: 1px solid var(--sh-border); overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } /* ---------- Kendo grid (rendered classes) ---------- */ .sh-report:where(.sh-reporter) .k-grid { border: 0; border-radius: 0; box-shadow: none; background: #fff; font-family: var(--sh-font); font-size: 14.5px; color: var(--sh-text); } /* kept here: must come before a later rule */ .sh-report:where(.sh-reporter) .k-grid-header, .sh-report:where(.sh-reporter) .k-grid-header-wrap { background: var(--sh-wash); border-color: var(--sh-border); } /* kept here: must come before a later rule */ .sh-report:where(.sh-reporter) .k-grid-header-wrap { border-width: 0; } /* kept here: must come before a later rule */ /* filter button + funnel icon */ .sh-report:where(.sh-reporter) .k-header > .k-grid-filter { float: right; margin: -6px -4px -6px 4px; padding: 5px; border-radius: 6px; line-height: 0; background: transparent; } /* kept here: must come before a later rule */ /* Date Created */ .sh-report:where(.sh-reporter) #grid colgroup col:nth-last-child(2) { width: 116px!important; } /* Send Response (Respond button) */ .sh-report:where(.sh-reporter) #grid colgroup col:nth-last-child(1) { width: 130px!important; } /* Created By Name */ .sh-report:where(.sh-reporter) .sh-grid-hint { display: none; } /* page-level action under the grids */ .sh-report:where(.sh-reporter) .sh-page-actions { margin-top: 22px; } /* ---------- Respond page ---------- */ .sh-report:where(.sh-reporter) .sh-quote-card .sh-summary-label { margin-bottom: 8px; } .sh-report:where(.sh-reporter) .sh-quote-card .sh-summary-label label { display: block; float: none; width: auto; margin: 0; padding: 0; text-align: left; } .sh-report:where(.sh-reporter) .sh-quote { margin: 0; padding: 14px 16px; background: var(--sh-wash); border-left: 4px solid var(--sh-navy); border-radius: 0 10px 10px 0; font-size: 16px; line-height: 1.6; color: var(--sh-text); white-space: pre-line; overflow-wrap: anywhere; } .sh-report:where(.sh-reporter).sh-reporter .sh-control textarea { min-height: 200px; } .sh-report:where(.sh-reporter) .validation-summary-valid { display: none; } .sh-report:where(.sh-reporter) .validation-summary-errors { margin: 0; padding: 12px 14px; background: #FEF3F2; border: 1px solid rgba(180,35,24,.25); border-radius: 10px; color: var(--sh-error); font-size: 14.5px; font-weight: 650; line-height: 1.5; } /* ============================================================================================ 13. KENDO: DatePicker / Upload (Submit a Report) and Grid (Reporter Home), styled via rendered classes ============================================================================================ */ /* Kendo DatePicker (IncidentDate, Bootstrap theme) */ .sh-report .sh-control .k-datepicker .k-picker-wrap.k-state-focused { border-color: var(--sh-navy); box-shadow: 0 0 0 4px rgba(11,42,91,.12); } /* checkboxes (AllowResponse has Bootstrap .checkbox class) */ .sh-report .k-upload .k-upload-button:hover, .sh-report .k-upload .k-upload-button.k-state-focused { background: var(--sh-navy-soft); border-color: var(--sh-navy); } .sh-report .k-upload .k-dropzone em { font-style: normal; font-size: 14px; color: var(--sh-muted); visibility: visible; } @media (max-width: 640px) { .sh-report .sh-actions input[type="submit"], .sh-report .sh-actions input[type="submit"].btn-primary, .sh-report .sh-actions input[type="button"], .sh-report .sh-actions input[type="button"].btn-primary { width: 100%; min-width: 0; } /* kept here: must come before a later rule */ } /* ---------- Grid cards ---------- */ .sh-report:where(.sh-reporter) .sh-grid-scroll > .k-grid { min-width: 880px; } /* ---------- Kendo grid (rendered classes) ---------- */ .sh-report:where(.sh-reporter) .k-grid-content { overflow: visible; } .sh-report:where(.sh-reporter) div.k-grid-header { padding-right: 0!important; border-bottom: 0; } .sh-report:where(.sh-reporter) .k-grid-header th.k-header { padding: 11px 12px; vertical-align: middle; background: var(--sh-wash); border-color: var(--sh-border); border-width: 0 0 1px 0; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--sh-muted); white-space: normal; text-overflow: clip; line-height: 1.3; border-radius: 0; } .sh-report:where(.sh-reporter) .k-grid-header th.k-header > .k-link { margin: -11px -12px; padding: 11px 12px; min-height: 0; line-height: 1.3; overflow: visible; white-space: normal; color: var(--sh-muted); text-decoration: none; } .sh-report:where(.sh-reporter) .k-grid-header th.k-header > .k-link:hover, .sh-report:where(.sh-reporter) .k-grid-header th.k-header > .k-link:focus { color: var(--sh-navy); } .sh-report:where(.sh-reporter) .k-grid-header th.k-header > .k-link:focus-visible { outline: 2px solid var(--sh-navy); outline-offset: -2px; } /* sort arrows stay Kendo's, just aligned */ .sh-report:where(.sh-reporter) .k-grid-header th > .k-link > .k-icon { vertical-align: -2px; margin-left: 2px; opacity: .7; } /* filter button + funnel icon */ .sh-report:where(.sh-reporter) .k-header > .k-grid-filter:hover { background: var(--sh-navy-soft); } .sh-report:where(.sh-reporter) .k-header > .k-grid-filter:focus-visible { outline: 2px solid var(--sh-navy); outline-offset: 1px; } .sh-report:where(.sh-reporter) .k-grid-filter .k-icon, .sh-report:where(.sh-reporter) .k-grid-filter .k-filter { width: 14px; height: 14px; background-image: none!important; background-color: #8A97AB; opacity: 1; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 4h18l-7 8.5V19l-4 2v-8.5z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 4h18l-7 8.5V19l-4 2v-8.5z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat; } .sh-report:where(.sh-reporter) .k-grid-filter:hover .k-icon { background-color: var(--sh-navy); } .sh-report:where(.sh-reporter) .k-grid-filter.k-state-active { background: var(--sh-orange-soft); border-color: transparent; box-shadow: none; } .sh-report:where(.sh-reporter) .k-grid-filter.k-state-active .k-icon { background-color: var(--sh-orange-d); } /* rows */ .sh-report:where(.sh-reporter) .k-grid tbody tr { background: #fff; } .sh-report:where(.sh-reporter) .k-grid tbody tr.k-alt { background: #FAFBFD; } .sh-report:where(.sh-reporter) .k-grid tbody tr:hover, .sh-report:where(.sh-reporter) .k-grid tbody tr.k-state-hover { background: var(--sh-navy-soft); } .sh-report:where(.sh-reporter) .k-grid td { padding: 13px 12px; vertical-align: top; line-height: 1.55; overflow-wrap: anywhere; border-style: solid; border-color: var(--sh-border); border-width: 1px 0 0 0; } .sh-report:where(.sh-reporter) .k-grid tbody tr:first-child td { border-top-width: 0; } .sh-report:where(.sh-reporter) .k-grid td.k-state-focused { box-shadow: inset 0 0 0 2px rgba(11,42,91,.35); } /* the Respond button from the Respond(data) client template */ .sh-report:where(.sh-reporter) .k-grid td > a { display: inline-block; text-decoration: none; } .sh-report:where(.sh-reporter) .k-grid td > a > input[type="button"], .sh-report:where(.sh-reporter) .k-grid td > a > input[type="button"].btn-primary { margin: -3px 0; padding: 6px 14px; min-width: 0; border: 0; border-radius: 8px; background: var(--sh-orange); color: #fff; box-shadow: 0 2px 6px rgba(240,90,40,.25); font-family: var(--sh-font); font-size: 13.5px; font-weight: 700; line-height: 1.4; text-shadow: none; } .sh-report:where(.sh-reporter) .k-grid td > a > input[type="button"]:hover, .sh-report:where(.sh-reporter) .k-grid td > a > input[type="button"]:focus { background: var(--sh-orange-d); color: #fff; } .sh-report:where(.sh-reporter) .k-grid td > a:focus-visible { outline: 3px solid var(--sh-navy); outline-offset: 2px; border-radius: 8px; } .sh-report:where(.sh-reporter) .k-grid colgroup col:nth-child(1) { width: 88px!important; } /* Case ID */ .sh-report:where(.sh-reporter) .k-grid colgroup col:nth-child(2) { width: auto!important; } /* Message: takes the rest */ .sh-report:where(.sh-reporter) .k-grid colgroup col:nth-child(3) { width: 104px!important; } /* Message ID */ .sh-report:where(.sh-reporter) .k-grid colgroup col:nth-child(4) { width: 112px!important; } /* Response to ID */ .sh-report:where(.sh-reporter) .k-grid colgroup col:nth-child(5) { width: 118px!important; } /* ============================================================================================ 14. ASP.NET RESPONSIVE: media queries for the ASP.NET views ============================================================================================ */ @media (max-width: 960px) { .sh-contact .sh-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .sh-contact { padding: 32px 0 48px; } .sh-contact .sh-wrap { padding: 0 16px; } .sh-contact .sh-form { grid-template-columns: 1fr; } .sh-contact .sh-card { padding: 26px 18px 22px; border-radius: 14px; } .sh-contact .sh-actions input[type="submit"], .sh-contact .sh-actions input[type="submit"].btn-warning, .sh-contact .sh-actions input[type="submit"].btntxt2 { width: 100%; min-width: 0; } .sh-contact .sh-cta { padding: 24px 18px; } .sh-contact .sh-cta-actions .sh-btn { flex: 1 1 140px; } .sh-report { padding: 14px 0 48px; } .sh-report .sh-step:not(:last-child)::before { display: none; } .sh-report .sh-btn-row .sh-btn { flex: 1 1 140px; } .sh-report .sh-control .k-datepicker { max-width: none; } .sh-report .sh-actions > a { width: 100%; } .sh-report:where(.sh-status,.sh-reporter) .sh-narrow { max-width: none; } .sh-report:where(.sh-status,.sh-reporter) .sh-summary-row { grid-template-columns: 1fr; gap: 4px; } .sh-report:where(.sh-reporter) .sh-grid-scroll { margin: 0 -18px; } .sh-report:where(.sh-reporter) .sh-grid-scroll > .k-grid { min-width: 900px; } .sh-report:where(.sh-reporter) .sh-grid-hint { display: flex; align-items: center; gap: 6px; margin: -6px 0 12px; font-size: 13px; color: var(--sh-muted); } .sh-report:where(.sh-reporter) .sh-grid-hint::after { content: "\2192"; font-weight: 700; color: var(--sh-orange-d); } .sh-report:where(.sh-reporter) .sh-page-actions { margin-top: 18px; } } @media (max-width: 359px) { .sh-contact .sh-field--captcha .g-recaptcha { transform: scale(.9); transform-origin: 0 0; } } /* ============================================================================================ 15. ASP.NET: Registration views (.sh-report.sh-register): Register, RegisterPart2, RegisterPart3/3B, RegisterPO, RegisterComplete Styles only the Bootstrap classes the views already use; Stripe (#card-element) and Kendo widgets get container styling only. ============================================================================================ */ .sh-report:where(.sh-register) { padding-left: 20px; padding-right: 20px; } .sh-report:where(.sh-register) > h4.header, .sh-report:where(.sh-register) > form, .sh-report:where(.sh-register) > .panel { max-width: 960px; margin-left: auto; margin-right: auto; } .sh-report:where(.sh-register) h1.headerpg, .sh-report:where(.sh-register) > h4.header { font-family: var(--sh-font); font-size: clamp(26px,3vw,34px); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--sh-navy); background: none; border: 0; padding: 0; margin-top: 8px; margin-bottom: 20px; text-align: left; text-transform: none; text-shadow: none; } .sh-report:where(.sh-register) h1.headerpg::before, .sh-report:where(.sh-register) > h4.header::before { content: ""; display: block; width: 28px; height: 3px; border-radius: 2px; background: var(--sh-orange); margin-bottom: 12px; } .sh-report:where(.sh-register) .panel { background: #fff; border: 1px solid var(--sh-border); border-top: 4px solid var(--sh-navy); border-radius: 16px; box-shadow: var(--sh-sh1); margin: 0 0 22px !important; padding-bottom: 8px; overflow: hidden; } .sh-report:where(.sh-register) .panel-primary > .panel-heading { background: var(--sh-wash); background-image: none; border: 0; border-bottom: 1px solid var(--sh-border); border-radius: 0; color: var(--sh-navy); padding: 16px 24px; margin-bottom: 20px; } .sh-report:where(.sh-register) .panel-title { font-family: var(--sh-font); font-size: 17px; font-weight: 750; line-height: 1.35; color: var(--sh-navy); } .sh-report:where(.sh-register) .panel > br { display: none; } .sh-report:where(.sh-register) .form-horizontal .form-group { margin: 0 24px 18px; } .sh-report:where(.sh-register) .form-horizontal .form-group > [class*="col-"], .sh-report:where(.sh-register) .form-horizontal .form-row > [class*="col-"] { float: none; width: auto; max-width: 640px; padding: 0; margin-left: 0; min-height: 0; } .sh-report:where(.sh-register) .form-horizontal .form-group > .col-md-12 { max-width: none; } .sh-report:where(.sh-register) .form-horizontal .control-label { display: block; text-align: left; padding-top: 0 !important; margin: 0 0 6px; font-size: 14.5px; font-weight: 600; color: var(--sh-text); } .sh-report:where(.sh-register) .form-control { height: 44px; border: 1px solid var(--sh-field); border-radius: 10px; box-shadow: none; padding: 10px 12px; font-family: var(--sh-font); font-size: 15.5px; color: var(--sh-text); background: #fff; } .sh-report:where(.sh-register) .form-control:focus { border-color: var(--sh-navy); box-shadow: 0 0 0 3px var(--sh-orange-soft); outline: 0; } .sh-report:where(.sh-register) .btn-primary { display: inline-block; background: var(--sh-orange); background-image: none; border: 1px solid var(--sh-orange); color: #fff; border-radius: 10px; padding: 11px 22px; font-family: var(--sh-font); font-size: 15.5px; font-weight: 700; line-height: 1.3; text-shadow: none; box-shadow: none; } .sh-report:where(.sh-register) .btn-primary:hover, .sh-report:where(.sh-register) .btn-primary:focus { background: var(--sh-orange-d); border-color: var(--sh-orange-d); color: #fff; } .sh-report:where(.sh-register) a > input.btn-primary, .sh-report:where(.sh-register) td input.btn-primary { background: #fff; color: var(--sh-navy); border-color: var(--sh-field); } .sh-report:where(.sh-register) a > input.btn-primary:hover, .sh-report:where(.sh-register) td input.btn-primary:hover { background: var(--sh-navy-soft); color: var(--sh-navy); border-color: var(--sh-navy); } .sh-report:where(.sh-register) #passwordPolicy, .sh-report:where(.sh-register) a[onclick] { color: var(--sh-orange-d); text-decoration: underline; cursor: pointer; font-weight: 600; } .sh-report:where(.sh-register) .tophead span[style] { color: var(--sh-muted); } .sh-report:where(.sh-register) .posterlist { display: flex; flex-wrap: wrap; gap: 18px; list-style: none; padding: 0; margin: 0 0 6px; } .sh-report:where(.sh-register) .posteritem { display: flex; flex-direction: column; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--sh-border); border-radius: 12px; padding: 14px; box-shadow: var(--sh-sh1); } .sh-report:where(.sh-register) .posteritem img { border: 1px solid var(--sh-border) !important; border-radius: 8px; cursor: pointer; } .sh-report:where(.sh-register) [style*="background-color:beige"] { background: var(--sh-wash) !important; border: 1px solid var(--sh-border); border-radius: 12px; padding: 18px 20px; } .sh-report:where(.sh-register) [style*="background-color:beige"] h3 { font-family: var(--sh-font); font-size: 17px; font-weight: 750; color: var(--sh-navy); margin: 0 0 10px; } .sh-report:where(.sh-register) [style*="background-color:beige"] ul { padding-left: 20px; margin: 0; } .sh-report:where(.sh-register) [style*="background-color:beige"] h4 { font-family: var(--sh-font); font-size: 18px; color: var(--sh-navy); margin: 0; } .sh-report:where(.sh-register) #card-element { background: #fff; border: 1px solid var(--sh-field); border-radius: 10px; padding: 12px; min-height: 44px; } .sh-report:where(.sh-register) #card-errors:not(:empty) { margin-top: 8px; padding: 10px 12px; border-radius: 10px; } .sh-report:where(.sh-register) input#terms { width: 18px; height: 18px; vertical-align: -3px; margin-left: 6px; accent-color: var(--sh-orange); } .sh-report:where(.sh-register) .panel > h4 { font-family: var(--sh-font); font-size: 16.5px; font-weight: 500; line-height: 1.6; color: var(--sh-text); margin: 0 24px 14px; } .sh-report:where(.sh-register) .panel > h4:last-child { margin-bottom: 18px; } .sh-report:where(.sh-register) .form-horizontal .tophead { text-align: left !important; } .sh-report:where(.sh-register) .tophead br { display: none; } .sh-report:where(.sh-register) .tophead #passwordPolicy { margin-left: 8px; font-size: 13.5px; } @media (max-width: 640px) { .sh-report:where(.sh-register) { padding-left: 12px; padding-right: 12px; } .sh-report:where(.sh-register) .form-horizontal .form-group { margin: 0 16px 16px; } .sh-report:where(.sh-register) .panel-primary > .panel-heading { padding: 14px 16px; } .sh-report:where(.sh-register) .panel > h4 { margin-left: 16px; margin-right: 16px; } .sh-report:where(.sh-register) .posterlist { justify-content: center; } } /* Password rules (Register) */ .sh-register .sh-pw-policy{margin-top:10px;padding:12px 14px;border:1px solid #dbe3ee;border-radius:10px;background:#f5f8fc;font-size:.9rem;line-height:1.5;color:#334155} .sh-register .sh-pw-policy[hidden]{display:none} .sh-register .sh-pw-policy p{margin:0 0 6px} .sh-register .sh-pw-policy p:last-child{margin:6px 0 0} .sh-register .sh-pw-policy ul{margin:0;padding-left:20px;list-style:disc} .sh-register .sh-pw-policy li{margin:2px 0} .sh-register #passwordPolicy{cursor:pointer;font-weight:600} /* ============================================================================================ 16. ASP.NET: Legal and confirmation views. Privacy (.sh-report.sh-legal), Terms of Use / Terms of Service full documents (.sh-report.sh-legal.sh-legal-doc, also inside the Terms Kendo window), Contact thank-you, Response Accepted and Deactivated (.sh-report.sh-msg), Report Accepted pages (.sh-report.sh-accepted, Report Key box) ============================================================================================ */ .sh-report:where(.sh-legal), .sh-report:where(.sh-msg) { padding: 32px 20px 80px; } .sh-report:where(.sh-legal) > br, .sh-report:where(.sh-legal-doc) br { display: none; } .sh-report:where(.sh-legal) h1.header, .sh-report:where(.sh-legal) h3.header { font-family: var(--sh-font); font-size: clamp(26px,3vw,34px); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--sh-navy); background: none; border: 0; text-shadow: none; padding: 0; margin: 0 0 20px; } .sh-report:where(.sh-legal-doc) h1.header { font-size: clamp(22px,2.6vw,28px); letter-spacing: .01em; } .sh-report:where(.sh-legal) h1.header::before, .sh-report:where(.sh-legal) h3.header::before { content: ""; display: block; width: 28px; height: 3px; border-radius: 2px; background: var(--sh-orange); margin-bottom: 12px; } .sh-report:where(.sh-legal) > h3.header, .sh-report:where(.sh-legal) > .panel { max-width: 880px; margin-left: auto !important; margin-right: auto; } .sh-report:where(.sh-legal) > .panel, .sh-report:where(.sh-legal-doc) > div { background: #fff; border: 1px solid var(--sh-border); border-top: 4px solid var(--sh-navy); border-radius: 16px; box-shadow: var(--sh-sh1); padding: 30px 40px 14px !important; margin-bottom: 0; } .sh-report:where(.sh-legal-doc) > div { max-width: 880px; margin: 0 auto; } .sh-report:where(.sh-legal-doc) .row { margin: 0; } .sh-report:where(.sh-legal-doc) .row > [class*="col-"] { float: none; width: auto; padding: 0; min-height: 0; } .sh-report:where(.sh-legal) p, .sh-report:where(.sh-legal) .p2 { font-family: var(--sh-font); font-size: 16px; line-height: 1.7; color: var(--sh-text); padding: 0; margin: 0 0 16px; } .sh-report:where(.sh-legal) p:empty { display: none; } .sh-report:where(.sh-legal) ul { padding-left: 22px; margin: -4px 0 16px; list-style: disc; } .sh-report:where(.sh-legal) li { font-family: var(--sh-font); font-size: 16px; line-height: 1.7; color: var(--sh-text); padding: 0; margin: 0 0 6px; } .sh-report:where(.sh-legal-doc) h4.header { font-family: var(--sh-font); font-size: 14px; font-weight: 750; letter-spacing: .06em; line-height: 1.4; color: var(--sh-navy); background: none; text-shadow: none; border: 0; border-top: 1px solid var(--sh-border); padding: 20px 0 0; margin: 24px 0 10px; } .sh-report:where(.sh-legal-doc) p[style*="italic"] { background: var(--sh-wash); border: 1px solid var(--sh-border); border-left: 4px solid var(--sh-orange); border-radius: 10px; padding: 14px 18px; font-size: 14px; line-height: 1.65; letter-spacing: .01em; color: var(--sh-muted); } .sh-report:where(.sh-msg) { padding-top: 56px; padding-bottom: 96px; } .sh-report:where(.sh-msg) .sh-msg-card { max-width: 640px; margin: 0 auto; background: #fff; border: 1px solid var(--sh-border); border-top: 4px solid var(--sh-navy); border-radius: 16px; box-shadow: var(--sh-sh1); padding: 40px 36px 36px; text-align: center; } .sh-report:where(.sh-msg) .sh-msg-card::before { content: ""; display: block; width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 50%; background: var(--sh-orange-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9431A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 28px no-repeat; } .sh-report:where(.sh-msg) .sh-msg-card h3.header, .sh-report:where(.sh-msg) .sh-msg-card h4.header { font-family: var(--sh-font); font-size: clamp(24px,3vw,30px); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--sh-navy); background: none; border: 0; text-shadow: none; padding: 0; margin: 0 0 12px; } .sh-report:where(.sh-msg) .sh-msg-card h3.header:empty { display: none; } .sh-report:where(.sh-msg) .sh-msg-card h4:not(.header) { font-family: var(--sh-font); font-size: 18px; font-weight: 500; line-height: 1.6; color: var(--sh-text); padding: 0 !important; margin: 0; } .sh-report:where(.sh-msg) .sh-msg-card p { font-family: var(--sh-font); font-size: 17px; line-height: 1.6; color: var(--sh-muted); margin: 0; } .sh-report:where(.sh-msg) .sh-msg-card--alert::before { background: var(--sh-navy-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2A5B' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 7v6'/%3E%3Ccircle cx='12' cy='17' r='.6' fill='%230B2A5B'/%3E%3C/svg%3E") center / 30px no-repeat; } .sh-report:where(.sh-msg) .sh-msg-card a { overflow-wrap: anywhere; } .sh-report:where(.sh-accepted) { padding: 32px 20px 80px; } .sh-report:where(.sh-accepted) > br { display: none; } .sh-report:where(.sh-accepted) > h1.header { max-width: 720px; margin: 0 auto 20px; font-family: var(--sh-font); font-size: clamp(26px,3vw,34px); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--sh-navy); background: none; border: 0; text-shadow: none; padding: 0; } .sh-report:where(.sh-accepted) > h1.header::before { content: ""; display: block; width: 28px; height: 3px; border-radius: 2px; background: var(--sh-orange); margin-bottom: 12px; } .sh-report:where(.sh-accepted) > .panel, .sh-report:where(.sh-accepted) > .sh-accepted-card { max-width: 720px; margin: 0 auto !important; background: #fff; border: 1px solid var(--sh-border); border-top: 4px solid var(--sh-navy); border-radius: 16px; box-shadow: var(--sh-sh1); padding: 30px 36px 26px; } .sh-report:where(.sh-accepted) .sh-accepted-lead { display: flex; align-items: center; gap: 12px; font-family: var(--sh-font); font-size: 20px; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; color: var(--sh-navy); padding: 0; margin: 0 0 22px; } .sh-report:where(.sh-accepted) .sh-accepted-lead::before { content: ""; flex: 0 0 36px; height: 36px; border-radius: 50%; background: var(--sh-orange-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9431A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 20px no-repeat; } .sh-report:where(.sh-accepted) .sh-key { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; background: var(--sh-orange-soft); border: 1px solid rgba(240,90,40,.35); border-left: 4px solid var(--sh-orange); border-radius: 12px; padding: 18px 20px; margin: 0 0 16px; } .sh-report:where(.sh-accepted) .sh-key-label { flex: 1 0 100%; font-family: var(--sh-font); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sh-orange-d); } .sh-report:where(.sh-accepted) .sh-key-value { display: inline-block; max-width: 100%; font-family: ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace; font-size: clamp(22px,3vw,28px); font-weight: 700; letter-spacing: .06em; line-height: 1.3; color: var(--sh-navy); background: #fff; border: 1px solid var(--sh-border); border-radius: 8px; padding: 8px 14px; -webkit-user-select: all; user-select: all; cursor: text; overflow-wrap: anywhere; } .sh-report:where(.sh-accepted) .sh-key-note, .sh-report:where(.sh-accepted) .sh-accepted-email { font-family: var(--sh-font); font-size: 16px; line-height: 1.65; color: var(--sh-text); margin: 0 0 12px; } .sh-report:where(.sh-accepted) .sh-accepted-email { color: var(--sh-muted); margin: 6px 0 0; } @media (max-width: 640px) { .sh-report:where(.sh-accepted) { padding: 20px 12px 56px; } .sh-report:where(.sh-accepted) > .panel, .sh-report:where(.sh-accepted) > .sh-accepted-card { padding: 22px 18px 20px; } .sh-report:where(.sh-accepted) .sh-accepted-lead { font-size: 18px; } } /* Privacy's own