/* Premiere Facility Health Assessment Layout: two-column hero with a sample report, numbered measures, sign-up form, then a stepped assessment and a results dashboard. Every rule is scoped to .pbm-ha so the theme stays untouched. Colored sections extend edge to edge with a box-shadow bleed, so the page works inside any content width. */ .pbm-ha { --burg: #9E1B32; --burg-deep: #5C0F1E; --burg-tint: #F7ECEE; --ink: #15181E; --slate: #4A5160; --paper: #FFFFFF; --mist: #F4F4F6; --line: #DCDDE3; --good: #2E7A58; --fair: #B7790F; --pink: #F2B8C2; --display: "Libre Caslon Text", Georgia, "Times New Roman", serif; --body: "Public Sans", "Helvetica Neue", Arial, sans-serif; --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; text-align: left; } .pbm-landing { overflow-x: clip; } .pbm-ha *, .pbm-ha *::before, .pbm-ha *::after { box-sizing: border-box; } .pbm-ha h1, .pbm-ha h2, .pbm-ha h3, .pbm-ha h4, .pbm-ha p, .pbm-ha ul, .pbm-ha ol, .pbm-ha figure, .pbm-ha fieldset, .pbm-ha legend { margin: 0; padding: 0; border: 0; } .pbm-ha ul, .pbm-ha ol { list-style: none; } .pbm-ha li { margin: 0; } .pbm-ha h1, .pbm-ha h2, .pbm-ha h3, .pbm-ha h4 { color: var(--ink); text-transform: none; letter-spacing: normal; } .pbm-ha a { color: var(--burg); } .pbm-ha button, .pbm-ha input, .pbm-ha select, .pbm-ha textarea { font: inherit; color: inherit; letter-spacing: normal; text-transform: none; } .pbm-ha :focus-visible { outline: 3px solid var(--burg); outline-offset: 3px; } .pbm-ha [hidden] { display: none !important; } .pbm-ha .pbm-bleed { --sec: var(--paper); background: var(--sec); box-shadow: 0 0 0 100vmax var(--sec); clip-path: inset(0 -100vmax); } .pbm-ha .pbm-wrap { max-width: 1180px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); } .pbm-ha .pbm-eyebrow { font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--burg); } .pbm-ha .pbm-display { font-family: var(--display); font-weight: 700; font-size: clamp(38px, 5vw, 62px); line-height: 1.06; letter-spacing: -.02em; margin-top: 16px; text-wrap: balance; } .pbm-ha .pbm-display em { font-style: italic; font-weight: 400; color: var(--burg); } .pbm-ha .pbm-h2 { font-family: var(--display); font-weight: 700; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.14; margin-top: 12px; text-wrap: balance; } .pbm-ha .pbm-lede { font-size: 20px; line-height: 1.5; color: var(--ink); margin-top: 22px; max-width: 60ch; } .pbm-ha .pbm-body { font-size: 17px; color: var(--slate); margin-top: 16px; max-width: 64ch; } .pbm-ha .pbm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 8px; padding: 15px 24px; font-weight: 700; font-size: 16px; line-height: 1.2; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform .15s ease, background-color .15s ease, border-color .15s ease; } .pbm-ha .pbm-btn-primary { background: var(--burg); color: #fff; box-shadow: 0 8px 20px -10px rgba(158,27,50,.8); } .pbm-ha .pbm-btn-primary:hover { background: var(--burg-deep); color: #fff; transform: translateY(-1px); } .pbm-ha .pbm-btn-ghost { background: var(--paper); color: var(--ink); border-color: var(--line); } .pbm-ha .pbm-btn-ghost:hover { border-color: var(--ink); color: var(--ink); } .pbm-ha .pbm-btn-light { background: #fff; color: var(--burg-deep); } .pbm-ha .pbm-btn-light:hover { color: var(--burg-deep); transform: translateY(-1px); } .pbm-ha .pbm-btn-sm { padding: 10px 16px; font-size: 15px; } .pbm-ha .pbm-btn[disabled] { opacity: .5; cursor: progress; transform: none; } /* hero */ .pbm-ha .pbm-hero { --sec: #FBFAFA; border-bottom: 1px solid var(--line); } .pbm-ha .pbm-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding-block: clamp(48px, 7vw, 96px); } .pbm-ha .pbm-ctas { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 32px; } .pbm-ha .pbm-note { font-size: 14px; color: var(--slate); max-width: 34ch; line-height: 1.45; } .pbm-ha .pbm-resume { margin-top: 22px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; background: var(--burg-tint); border-radius: 10px; font-size: 15px; } .pbm-ha .pbm-report { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 18px; box-shadow: 0 40px 70px -48px rgba(21,24,30,.55); transform: rotate(.6deg); } .pbm-ha .pbm-report-head { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); padding: 2px 4px 12px; } .pbm-ha .pbm-report-score { background: radial-gradient(120% 140% at 100% 0%, #7E1428 0%, var(--burg-deep) 60%, #3E0914 100%); color: #fff; border-radius: 12px; padding: 22px 24px; } .pbm-ha .pbm-report-label { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--pink); } .pbm-ha .pbm-report-num { margin-top: 6px; display: flex; align-items: baseline; gap: 10px; } .pbm-ha .pbm-report-num b { font-family: var(--display); font-size: 72px; line-height: 1; color: #fff; } .pbm-ha .pbm-report-num span { font-size: 20px; color: #F1E4E7; } .pbm-ha .pbm-report-cat { margin-top: 8px; font-weight: 700; font-size: 17px; color: #fff; } .pbm-ha .pbm-report-bars { display: grid; gap: 10px; padding: 18px 6px 6px; } .pbm-ha .pbm-report-bars li { display: grid; grid-template-columns: 120px minmax(0,1fr) 26px; gap: 12px; align-items: center; font-size: 14px; color: var(--slate); } .pbm-ha .pbm-report-bars i { display: block; height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--ink) var(--w), var(--mist) var(--w)); } .pbm-ha .pbm-report-bars li.is-risk i { background: linear-gradient(90deg, var(--burg) var(--w), var(--mist) var(--w)); } .pbm-ha .pbm-report-bars b { font-family: var(--mono); font-size: 13px; color: var(--ink); text-align: right; } .pbm-ha .pbm-report-foot { font-size: 12px; color: var(--slate); padding: 10px 6px 2px; border-top: 1px dashed var(--line); margin-top: 10px; } /* measures */ .pbm-ha .pbm-measures { padding-block: clamp(56px, 7vw, 88px); } .pbm-ha .pbm-measure-list { margin-top: 34px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--ink); } .pbm-ha .pbm-measure-list li { padding: 22px 20px 6px 0; display: grid; gap: 8px; align-content: start; } .pbm-ha .pbm-measure-list li + li { padding-left: 20px; border-left: 1px solid var(--line); } .pbm-ha .pbm-num { font-family: var(--mono); font-size: 13px; color: var(--burg); font-weight: 600; } .pbm-ha .pbm-measure-list b { font-size: 18px; line-height: 1.3; } .pbm-ha .pbm-measure-list li > span:last-child { font-size: 15px; color: var(--slate); line-height: 1.5; } /* begin form */ .pbm-ha .pbm-begin { --sec: var(--mist); border-top: 1px solid var(--line); padding-block: clamp(56px, 7vw, 96px); scroll-margin-top: 90px; } .pbm-ha .pbm-begin-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 64px); align-items: start; } .pbm-ha .pbm-assure { margin-top: 24px; display: grid; gap: 10px; font-size: 15px; color: var(--slate); } .pbm-ha .pbm-assure li { padding-left: 22px; position: relative; } .pbm-ha .pbm-assure li::before { content: ""; position: absolute; left: 0; top: .6em; width: 9px; height: 9px; border-radius: 2px; background: var(--burg); } .pbm-ha .pbm-form { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: clamp(20px, 3vw, 32px); display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px 18px; } .pbm-ha .pbm-field { display: grid; gap: 6px; min-width: 0; } .pbm-ha .pbm-field.is-wide { grid-column: 1 / -1; } .pbm-ha .pbm-field label { font-size: 14px; font-weight: 600; color: var(--ink); margin: 0; } .pbm-ha .pbm-field input, .pbm-ha .pbm-field select, .pbm-ha .pbm-field textarea { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); font-size: 16px; box-shadow: none; margin: 0; } .pbm-ha .pbm-field textarea { min-height: 96px; resize: vertical; } .pbm-ha .pbm-field input:focus, .pbm-ha .pbm-field select:focus, .pbm-ha .pbm-field textarea:focus { border-color: var(--burg); outline: none; box-shadow: 0 0 0 3px rgba(158,27,50,.18); } .pbm-ha .pbm-field.is-invalid input, .pbm-ha .pbm-field.is-invalid select { border-color: var(--burg); background: var(--burg-tint); } .pbm-ha .pbm-form-error { grid-column: 1 / -1; background: var(--burg-tint); color: var(--burg-deep); border-radius: 8px; padding: 10px 14px; font-size: 15px; font-weight: 600; } .pbm-ha .pbm-form-actions { grid-column: 1 / -1; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 6px; } .pbm-ha .pbm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* assessment */ .pbm-ha .pbm-app { --sec: var(--mist); padding-block: clamp(32px, 5vw, 64px); scroll-margin-top: 90px; } .pbm-ha .pbm-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } .pbm-ha .pbm-step { display: grid; gap: 8px; font-size: 13px; color: var(--slate); font-weight: 600; background: none; border: 0; padding: 0; text-align: left; cursor: default; } .pbm-ha .pbm-step i { display: block; height: 6px; border-radius: 3px; background: var(--line); } .pbm-ha .pbm-step.is-done i { background: var(--ink); } .pbm-ha .pbm-step.is-current { color: var(--burg); } .pbm-ha .pbm-step.is-current i { background: var(--burg); } .pbm-ha .pbm-step.is-done { cursor: pointer; } .pbm-ha .pbm-sec-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; margin-top: 32px; } .pbm-ha .pbm-sec-head .pbm-h2 { margin-top: 8px; } .pbm-ha .pbm-pct { font-family: var(--mono); font-size: 13px; color: var(--slate); } .pbm-ha .pbm-pct b { color: var(--ink); font-size: 22px; font-weight: 600; } .pbm-ha .pbm-qs { margin-top: 26px; display: grid; gap: 16px; } .pbm-ha .pbm-q { background: var(--paper); border: 1.5px solid var(--line); border-radius: 14px; padding: clamp(18px, 2.6vw, 28px); } .pbm-ha .pbm-q.is-missing { border-color: var(--burg); } .pbm-ha .pbm-q legend { display: grid; grid-template-columns: 36px minmax(0,1fr); gap: 12px; font-size: 19px; font-weight: 700; line-height: 1.35; width: 100%; } .pbm-ha .pbm-q legend span:first-child { font-family: var(--mono); font-size: 14px; color: var(--burg); padding-top: 3px; } .pbm-ha .pbm-helper { margin: 8px 0 0 48px; font-size: 14px; color: var(--slate); line-height: 1.5; } .pbm-ha .pbm-opts { margin: 16px 0 0 48px; display: grid; gap: 8px; } .pbm-ha .pbm-opt { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-size: 16px; line-height: 1.4; background: var(--paper); transition: border-color .12s ease, background-color .12s ease; margin: 0; } .pbm-ha .pbm-opt:hover { border-color: var(--slate); } .pbm-ha .pbm-opt input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border: 2px solid var(--line); border-radius: 50%; margin: 0; display: grid; place-content: center; background: var(--paper); } .pbm-ha .pbm-opt input::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--burg); transform: scale(0); transition: transform .12s ease; } .pbm-ha .pbm-opt input:checked { border-color: var(--burg); } .pbm-ha .pbm-opt input:checked::after { transform: scale(1); } .pbm-ha .pbm-opt:has(input:checked) { border-color: var(--burg); background: var(--burg-tint); font-weight: 600; } .pbm-ha .pbm-missing-msg { margin: 10px 0 0 48px; color: var(--burg); font-size: 14px; font-weight: 600; } .pbm-ha .pbm-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; flex-wrap: wrap; } .pbm-ha .pbm-saving { font-size: 14px; color: var(--slate); margin-top: 12px; } /* results */ .pbm-ha .pbm-res-hero { border-radius: 18px; background: radial-gradient(120% 140% at 100% 0%, #7E1428 0%, var(--burg-deep) 58%, #3E0914 100%); color: #fff; padding: clamp(26px, 4vw, 48px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: end; } .pbm-ha .pbm-res-hero .pbm-eyebrow { color: var(--pink); } .pbm-ha .pbm-res-num { display: flex; align-items: baseline; gap: 12px; margin-top: 8px; } .pbm-ha .pbm-res-num b { font-family: var(--display); font-size: clamp(72px, 10vw, 112px); line-height: .95; font-variant-numeric: tabular-nums; color: #fff; } .pbm-ha .pbm-res-num span { font-size: 26px; color: #F1E4E7; } .pbm-ha .pbm-res-cat { font-family: var(--display); font-size: clamp(22px, 2.4vw, 30px); margin-top: 14px; color: #fff; } .pbm-ha .pbm-res-msg { margin-top: 10px; max-width: 64ch; color: #F1E4E7; font-size: 16px; } .pbm-ha .pbm-res-for { margin-top: 16px; font-size: 13px; color: var(--pink); font-family: var(--mono); } .pbm-ha .pbm-res-actions { display: grid; gap: 10px; justify-items: end; } .pbm-ha .pbm-res-actions a, .pbm-ha .pbm-linkbtn { color: #F1E4E7; font-size: 14px; background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 0; } .pbm-ha .pbm-res-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 18px; margin-top: 18px; } .pbm-ha .pbm-card { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: clamp(18px, 2.6vw, 28px); min-width: 0; } .pbm-ha .pbm-card h3 { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); } .pbm-ha .pbm-card .pbm-sub { font-size: 14px; color: var(--slate); margin-top: 4px; } .pbm-ha .pbm-bars { display: grid; gap: 16px; margin-top: 20px; } .pbm-ha .pbm-bar { display: grid; grid-template-columns: minmax(0, 1fr) 64px; gap: 6px 12px; align-items: center; } .pbm-ha .pbm-bar span { font-size: 15px; font-weight: 600; } .pbm-ha .pbm-bar b { font-family: var(--mono); font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; } .pbm-ha .pbm-bar .pbm-track { display: block; grid-column: 1 / -1; height: 14px; border-radius: 7px; background: var(--mist); overflow: hidden; } .pbm-ha .pbm-bar .pbm-fill { display: block; height: 100%; border-radius: 7px; background: var(--ink); width: 0; transition: width .8s cubic-bezier(.2,.7,.2,1); } .pbm-ha .pbm-bar.is-risk .pbm-fill { background: var(--burg); } .pbm-ha .pbm-bar.is-risk span::after { content: "Priority"; margin-left: 8px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--burg); background: var(--burg-tint); padding: 2px 6px; border-radius: 4px; vertical-align: 2px; } .pbm-ha .pbm-radar svg { width: 100%; height: auto; display: block; margin-top: 6px; } .pbm-ha .pbm-prio { margin-top: 40px; } .pbm-ha .pbm-prio-list { margin-top: 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .pbm-ha .pbm-prio-list li { background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--burg); border-radius: 12px; padding: 20px; display: grid; gap: 10px; align-content: start; } .pbm-ha .pbm-prio-top { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--burg); font-weight: 600; } .pbm-ha .pbm-prio-top b { font-size: 15px; color: var(--ink); letter-spacing: 0; } .pbm-ha .pbm-prio-list h4 { font-size: 18px; line-height: 1.3; font-weight: 700; } .pbm-ha .pbm-prio-list p { font-size: 15px; color: var(--slate); line-height: 1.55; } .pbm-ha .pbm-bench { margin-top: 40px; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: clamp(24px, 4vw, 44px); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 48px); align-items: start; } .pbm-ha .pbm-bench .pbm-form { padding: 0; border: 0; } .pbm-ha .pbm-thanks { background: var(--burg-tint); color: var(--burg-deep); border-radius: 10px; padding: 16px 18px; font-weight: 600; } .pbm-ha .pbm-res-foot { margin-top: 28px; font-size: 14px; color: var(--slate); } @media (max-width: 1000px) { .pbm-ha .pbm-measure-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pbm-ha .pbm-measure-list li, .pbm-ha .pbm-measure-list li + li { padding: 20px 16px 16px 0; border-left: 0; border-bottom: 1px solid var(--line); } .pbm-ha .pbm-prio-list { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 860px) { .pbm-ha .pbm-hero-grid, .pbm-ha .pbm-begin-grid, .pbm-ha .pbm-res-grid, .pbm-ha .pbm-bench, .pbm-ha .pbm-res-hero { grid-template-columns: minmax(0, 1fr); } .pbm-ha .pbm-res-actions { justify-items: start; } .pbm-ha .pbm-report { transform: none; } } @media (max-width: 600px) { .pbm-ha .pbm-form { grid-template-columns: minmax(0, 1fr); } .pbm-ha .pbm-measure-list { grid-template-columns: minmax(0, 1fr); } .pbm-ha .pbm-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; } .pbm-ha .pbm-step span { display: none; } .pbm-ha .pbm-helper, .pbm-ha .pbm-opts, .pbm-ha .pbm-missing-msg { margin-left: 0; } .pbm-ha .pbm-q legend { grid-template-columns: 30px minmax(0, 1fr); } .pbm-ha .pbm-report-bars li { grid-template-columns: 96px minmax(0,1fr) 22px; } } @media (prefers-reduced-motion: reduce) { .pbm-ha * { transition: none !important; } } /* Theme hardening: many themes (Avada included) style every