/* GLOBAL */
/* ==== */
html {
scroll-behavior: smooth;
}
#savecontent {
margin-top: -2px;
}
.anchor {
scroll-margin-top: 150px;
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
color: inherit;
}
h1,
.h1 {
font-size: clamp(35px, 4.4vw, 46px);
}
h1.mega,
.h1.mega {
font-size: clamp(36px, 4.7vw, 70px);
}
h1.ultra,
.h1.ultra {
font-size: clamp(37px, 5.3vw, 95px);
}
h2,
.h2 {
font-size: clamp(32px, 4vw, 42px);
}
h3,
.h3 {
font-size: clamp(29px, 3.6vw, 37px);
}
h4,
.h4 {
font-size: clamp(26px, 3.2vw, 32px);
}
h5,
.h5 {
font-size: clamp(23px, 2.8vw, 27px);
}
h6,
.h6 {
font-size: clamp(20px, 2.4vw, 22px);
}
body {
font-size: clamp(15px, 2vw, 18px);
}
.btn {
white-space: normal;
}
a:hover img,
a.bg-img:hover a.bg-image:hover {
opacity: .85;
}
#savecontent img {
max-width: 100% !important;
height: auto !important;
}
.rightfloat {
float: right;
margin: 0 0 .5rem 1rem;
width: 40%;
}
@media (max-width: 767px) {
.rightfloat {
float: none;
margin: 0 0 1rem 0;
width: 100%;
}
}
.btn-primary {
color: white !important;
}
.round {
border-radius: 12px;
}
.carousel-control-next-icon,
.carousel-control-prev-icon {
background-color: rgba(0, 0, 0, 0.9);
padding: 1rem;
background-size: 20px;
}
@media(min-width: 1600px) {
.container {
max-width: 1300px;
}
}
@media(min-width: 1600px) {
.container.container-wide {
width: 1500px !important;
max-width: 1500px !important;
}
}
.product-image {
background-size: cover !important;
min-height: auto !important;
padding-bottom: 75%;
}
#savecontent form label {
font-weight: bold;
}
#savecontent form .checkbox-group label,
#savecontent form .radio-group label {
font-weight: normal;
}
.formbuilder-required {
color: red;
}
.text-right.addToCart {
text-align: left !important;
}
.blog-detail-page {
background: var(--light);
}
.blog-detail-page .blog {
border-radius: 12px;
padding: 1.5rem;
background: white;
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
}
.blog-detail-page .blog h4 {
margin-top: 1rem;
}
form li p {
margin-bottom: 0;
}
form label {
font-weight: bold;
}
form .checkbox-group label,
form .radio-group label {
font-weight: normal;
}
.formbuilder-checkbox,
.formbuilder-radio {
margin-bottom: 4px;
}
/* ==== PEAKLINE SITE-WIDE ==== */
h1, h2, h3,
.h1, .h2, .h3,
.pl-serif {
font-family: 'Gelasio', Georgia, serif;
}
h1, h2, h3,
.h1, .h2, .h3 {
text-wrap: balance;
}
/* Straighten digits: force lining figures on all serif display text
(fixes oldstyle ascending/descending numerals in Gelasio AND the Georgia fallback) */
h1, h2, h3,
.h1, .h2, .h3,
.pl-serif,
.pl-stat-num,
.pl-step-num,
.pl-peak-letter,
.pl-quote-mark,
.pl-pullquote p,
.pl-quote p.font-italic {
font-variant-numeric: lining-nums;
font-feature-settings: "lnum" 1;
}
/* Fully rounded buttons */
.btn {
border-radius: 50rem;
padding: .55rem 1.5rem;
}
.btn-lg {
border-radius: 50rem;
padding: .8rem 2.1rem;
}
/* Buttons: gentle lift on hover (pointer devices only) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.btn {
transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover {
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
}
/* Keyboard focus: gold ring */
a:focus-visible,
.btn:focus-visible,
button:focus-visible {
outline: 2px solid var(--primary-alt);
outline-offset: 2px;
}
.lead {
line-height: 1.7;
}
::selection {
background: var(--primary-alt);
color: var(--black);
}
.pl-eyebrow {
text-transform: uppercase;
letter-spacing: .22em;
font-size: .8rem;
font-weight: 600;
}
.pl-eyebrow-lines {
display: flex;
align-items: center;
justify-content: center;
}
.pl-eyebrow-lines::before,
.pl-eyebrow-lines::after {
content: "";
height: 1px;
width: 48px;
background: currentColor;
opacity: .7;
}
.pl-eyebrow-lines span {
padding: 0 .75rem;
}
.pl-bg-primary {
background: var(--primary);
color: rgba(255, 255, 255, .85);
}
/* Primary-color band: light bloom + darker corner falloff over the client's slate-blue
anchor rgb(73, 110, 152) [496e98]; falloff tint = a dark variation of the same anchor */
.pl-gradient-primary {
background:
radial-gradient(ellipse at 25% -10%, rgba(255, 255, 255, .16), transparent 55%),
linear-gradient(160deg, rgba(24, 36, 50, .5) 0%, rgba(24, 36, 50, .1) 45%, rgba(24, 36, 50, .46) 100%),
rgb(73, 110, 152);
color: rgba(255, 255, 255, .85);
}
/* Glossy translucent card for primary-gradient bands; neutral white sheen + subtle dark bloom bottom-right */
.pl-gloss-card {
background: rgba(255, 255, 255, .07);
background:
linear-gradient(115deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .03) 30%, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, .05) 70%, rgba(255, 255, 255, .12) 100%),
radial-gradient(ellipse at 100% 100%, rgba(0, 0, 0, .16), transparent 60%);
border: 1px solid rgba(255, 255, 255, .18);
border-top: 3px solid var(--primary-alt);
border-radius: 12px;
padding: 1.75rem 1.5rem;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 12px 32px rgba(0, 0, 0, .28);
}
/* Icon chip for feature/service cards */
.pl-service-icon {
width: 60px;
height: 60px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: var(--primary-alt);
background: var(--primary);
background: linear-gradient(160deg, color-mix(in srgb, var(--primary) 86%, white), color-mix(in srgb, var(--primary) 74%, black));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 14px color-mix(in srgb, var(--primary) 28%, transparent);
}
.pl-check-list li {
padding: .2rem 0;
}
/* ==== PEAKLINE HOMEPAGE ==== */
/* Hero: centered masthead over a symmetric vignette (image clear at center, dark at edges) */
#oms_710001 {
position: relative;
background:
radial-gradient(ellipse at 50% 42%, rgba(73, 110, 152, .5) 0%, rgba(47, 72, 100, .88) 100%),
url('https://images.unsplash.com/photo-1573167507387-6b4b98cb7c13?auto=format&fit=crop&w=2000&q=80') center / cover no-repeat;
display: flex;
align-items: center;
min-height: 88vh;
padding: 150px 0 230px;
}
/* Signature "peakline" ridge divider carved into the hero's bottom edge */
#oms_710001::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 80px;
background: white;
z-index: 2;
clip-path: polygon(0 100%, 0 55%, 9% 78%, 20% 28%, 33% 84%, 46% 12%, 60% 70%, 72% 38%, 84% 88%, 93% 58%, 100% 74%, 100% 100%);
}
#oms_710001 h1 {
font-size: clamp(35px, 4.4vw, 54px);
text-shadow: 0 2px 30px rgba(0, 0, 0, .5);
}
#oms_710001 .lead {
max-width: 780px;
margin-left: auto;
margin-right: auto;
}
/* Glassy secondary button over the hero image; stays white in all states */
#oms_710001 .btn-outline-light {
color: white;
background: rgba(255, 255, 255, .06);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
#oms_710001 .btn-outline-light:hover,
#oms_710001 .btn-outline-light:focus,
#oms_710001 .btn-outline-light:active {
color: white;
background: rgba(255, 255, 255, .18);
border-color: white;
}
@media (max-width: 767px) {
#oms_710001 {
background:
radial-gradient(ellipse at 50% 40%, rgba(73, 110, 152, .62), rgba(47, 72, 100, .92)),
url('https://images.unsplash.com/photo-1573167507387-6b4b98cb7c13?auto=format&fit=crop&w=1000&q=80') center / cover no-repeat;
padding: 130px 0 180px;
}
#oms_710001::after {
height: 46px;
}
}
/* Brand Promise: faint teal "foothills" watermark at the base, leading into the dark PEAK section */
#oms_710002 {
position: relative;
overflow: hidden;
}
#oms_710002 .snip {
position: relative;
z-index: 1;
}
#oms_710002::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 90px;
background: var(--light);
background: color-mix(in srgb, var(--primary) 7%, white);
clip-path: polygon(0 100%, 100% 100%, 100% 55%, 88% 75%, 74% 35%, 58% 80%, 42% 45%, 28% 85%, 14% 50%, 0 78%);
}
/* Light bands (How It Works / What We Do / Client Experiences):
big soft white bloom at top center, behind the section header */
#oms_710004,
#oms_710006,
#oms_710009 {
background-image: radial-gradient(ellipse 80% 460px at 50% 0%, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 72%);
}
/* PEAK framework pillar letters: gold ringed medallions
(section bg + cards come from .pl-gradient-primary / .pl-gloss-card) */
#oms_710003 .pl-peak-letter {
width: 72px;
height: 72px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Gelasio', Georgia, serif;
font-size: 2rem;
font-weight: 400;
line-height: 1;
color: var(--primary-alt);
border: 1px solid var(--primary-alt);
background: rgba(255, 255, 255, .05);
background: color-mix(in srgb, var(--primary-alt) 12%, transparent);
box-shadow: 0 0 0 5px rgba(255, 255, 255, .06);
margin-bottom: 1.25rem;
}
#oms_710003 .pl-peak-tag {
text-transform: uppercase;
letter-spacing: .14em;
font-size: .75rem;
font-weight: 600;
}
#oms_710003 .pl-peak-list li {
padding: .25rem 0;
font-size: .95rem;
}
/* How it works step numbers + connector line */
#oms_710004 .pl-step-num {
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--primary);
background: linear-gradient(160deg, color-mix(in srgb, var(--primary) 82%, white), color-mix(in srgb, var(--primary) 82%, black));
color: var(--primary-alt);
font-family: 'Gelasio', Georgia, serif;
font-size: 1.75rem;
font-weight: 400;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary) 12%, transparent);
}
@media (min-width: 768px) {
#oms_710004 [class*="col-md-4"] {
position: relative;
}
#oms_710004 [class*="col-md-4"]:not(:last-child)::after {
content: "";
position: absolute;
top: 32px;
left: calc(50% + 50px);
width: calc(100% - 100px);
height: 1px;
background: linear-gradient(to right, var(--primary), transparent);
opacity: .3;
}
}
/* Who we serve cards: soft primary-tinted glow + border lift them off the white bg */
#oms_710005 .card {
border: 1px solid rgba(0, 0, 0, .06);
border-color: color-mix(in srgb, var(--primary) 16%, white);
box-shadow: 0 14px 40px color-mix(in srgb, var(--primary) 14%, transparent);
}
/* Aspect-ratio crop: the wrap's padding-bottom sets the height, so the ratio holds on every screen size */
#oms_710005 .pl-card-img-wrap {
position: relative;
padding-bottom: 52%;
overflow: hidden;
}
#oms_710005 .pl-card-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
/* !important needed to beat the base #savecontent img { height: auto !important } rule */
height: 100% !important;
object-fit: cover;
}
/* Soft teal scrim keeps any card photo in the brand's tonal family */
#oms_710005 .pl-card-img-wrap::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(rgba(10, 20, 32, .28), rgba(10, 20, 32, 0) 65%);
pointer-events: none;
}
/* Services cards: faint diagonal primary wash + gold hairline under titles */
#oms_710006 .card {
background: white;
background: linear-gradient(165deg, white 60%, color-mix(in srgb, var(--primary) 5%, white));
}
#oms_710006 .card h5::after {
content: "";
display: block;
width: 34px;
height: 2px;
border-radius: 1px;
background: var(--primary-alt);
margin-top: .6rem;
}
/* Industries: tinted panels w/ gold spine */
#oms_710007 .pl-industry {
position: relative;
border-left: 3px solid var(--primary-alt);
border-radius: 0 12px 12px 0;
padding: 1rem 1.25rem;
background: var(--light);
background: color-mix(in srgb, var(--primary) 4%, white);
}
/* Stats band */
#oms_710008 .pl-stat-num {
font-family: 'Gelasio', Georgia, serif;
font-size: clamp(40px, 4.5vw, 56px);
font-weight: 400;
line-height: 1.1;
}
/* Testimonials: dark brand cards, serif italic quotes, giant watermark quote mark */
#oms_710009 .pl-stars {
letter-spacing: .18em;
}
#oms_710009 .pl-quote {
position: relative;
display: flex;
flex-direction: column;
color: rgba(255, 255, 255, .92);
border: 1px solid rgba(255, 255, 255, .16);
border-top: 3px solid var(--primary-alt);
box-shadow: 0 12px 32px rgba(0, 0, 0, .22);
}
#oms_710009 .pl-quote p.font-italic {
font-family: 'Gelasio', Georgia, serif;
font-size: 1.08rem;
line-height: 1.65;
}
#oms_710009 .pl-quote-mark {
font-family: 'Gelasio', Georgia, serif;
font-size: 3.5rem;
line-height: .6;
margin-bottom: .75rem;
}
/* Founder photo: offset gold frame, and it sticks while the bio scrolls.
POSITION MUST BE SET HERE, not left to .sticky-top in the markup. This
selector is an ID deep, so it outranks .sticky-top's own position, and
while this said relative the frame simply never stuck no matter what
the markup asked for.
Sticky is still a positioned element, so the offset frame drawn by the
::after below anchors to it exactly the way it did to relative.
The top offset stays inline in the markup, where it is easy to retune.
THE OTHER HALF OF THIS IS IN THE MARKUP: a sticky element can only
travel as far as its own column is tall, and align-items-start on the
row shrinks every column to its own content, which leaves nothing to
travel through. The column carries align-self-stretch to undo that. */
#oms_710010 .pl-founder-frame {
position: sticky;
display: block;
margin: 0 12px 12px 0;
}
#oms_710010 .pl-founder-frame img {
position: relative;
z-index: 1;
}
#oms_710010 .pl-founder-frame::after {
content: "";
position: absolute;
top: 14px;
left: 14px;
right: -12px;
bottom: -12px;
border: 2px solid var(--primary);
border-radius: 12px;
}
/* Founder pull quote: serif italic */
#oms_710010 .pl-pullquote {
border-left: 3px solid var(--primary-alt);
padding: .25rem 0 .25rem 1.25rem;
}
#oms_710010 .pl-pullquote p {
font-family: 'Gelasio', Georgia, serif;
font-size: 1.15rem;
line-height: 1.6;
}
/* Founder link: arrow nudges on hover */
@media (hover: hover) {
#oms_710010 .fa-arrow-right {
transition: transform .15s ease;
}
#oms_710010 a:hover .fa-arrow-right {
transform: translateX(4px);
}
}
/* Final CTA band (shared, all pages): misty-peak image, no divider */
.pl-cta {
position: relative;
background:
linear-gradient(rgba(73, 110, 152, .78), rgba(47, 72, 100, .84)),
url('/userfiles/2732/images/footercta.jpg') center / cover no-repeat;
color: white;
padding-top: 110px;
padding-bottom: 110px;
}
@media (max-width: 767px) {
.pl-cta {
padding-top: 85px;
padding-bottom: 85px;
}
}
/* Homepage CTA only: signature ridge bookend + the extra breathing room it needs */
#oms_710011 {
padding-top: 230px;
padding-bottom: 130px;
}
#oms_710011::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -1px;
height: 80px;
background: white;
clip-path: polygon(0 0, 100% 0, 100% 68%, 92% 44%, 81% 88%, 68% 26%, 55% 80%, 42% 12%, 30% 72%, 18% 34%, 8% 78%, 0 46%);
}
@media (max-width: 767px) {
#oms_710011 {
padding-top: 150px;
padding-bottom: 95px;
}
#oms_710011::before {
height: 46px;
}
}
/* Shared interior-page hero (all subpages): glass-tower canyon, tight height, no divider */
.pl-subhero {
position: relative;
background:radial-gradient(ellipse at 50% 42%, rgba(73, 110, 152, .5) 0%, rgba(47, 72, 100, .88) 100%), url('/userfiles/2732/images/60983048-092d-49dc-b70d-1c8a9516e039.jpg') center / cover no-repeat;
color: white;
display: flex;
align-items: center;
padding: 110px 0;
}
.pl-subhero h1 {
text-shadow: 0 2px 30px rgba(0, 0, 0, .5);
}
.pl-subhero .lead {
max-width: 780px;
margin-left: auto;
margin-right: auto;
}
.pl-subhero .btn-outline-light {
color: white;
background: rgba(255, 255, 255, .06);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.pl-subhero .btn-outline-light:hover,
.pl-subhero .btn-outline-light:focus,
.pl-subhero .btn-outline-light:active {
color: white;
background: rgba(255, 255, 255, .18);
border-color: white;
}
@media (max-width: 767px) {
.pl-subhero {
background:
radial-gradient(ellipse at 50% 45%, rgba(10, 20, 32, .6), rgba(10, 20, 32, .92)),
url('https://images.unsplash.com/photo-1579445505461-acecf2596190?auto=format&fit=crop&w=1000&q=80') center / cover no-repeat;
padding: 90px 0;
}
}
/* ==== PEAKLINE PRIVATE EQUITY PAGE ==== */
/* (hero comes from the shared .pl-subhero class) */
/* Light bands: top-center white bloom (same treatment as the homepage light sections) */
#oms_720004,
#oms_720007,
#oms_720010,
#oms_740003,
#oms_740007,
#oms_740010 {
background-image: radial-gradient(ellipse 80% 460px at 50% 0%, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 72%);
}
/* PE context: pull quote + audience cards (shared w/ the Owner-Led page) */
#oms_720002 .pl-pullquote,
#oms_740002 .pl-pullquote {
border-left: 3px solid var(--primary-alt);
padding: .25rem 0 .25rem 1.25rem;
max-width: 640px;
margin-left: auto;
margin-right: auto;
}
#oms_720002 .pl-pullquote p,
#oms_740002 .pl-pullquote p {
font-family: 'Gelasio', Georgia, serif;
font-size: 1.15rem;
line-height: 1.6;
}
#oms_720002 .card,
#oms_740002 .card {
border: 1px solid rgba(0, 0, 0, .06);
border-color: color-mix(in srgb, var(--primary) 16%, white);
box-shadow: 0 14px 40px color-mix(in srgb, var(--primary) 14%, transparent);
}
/* 4-phase model: big serif phase numbers on the gloss cards */
.pl-phase-num {
font-family: 'Gelasio', Georgia, serif;
font-size: 2.6rem;
font-weight: 400;
line-height: 1;
color: var(--primary-alt);
margin-bottom: 1rem;
}
#oms_720003 .pl-peak-tag,
#oms_720006 .pl-peak-tag,
#oms_740006 .pl-peak-tag {
text-transform: uppercase;
letter-spacing: .14em;
font-size: .75rem;
font-weight: 600;
}
#oms_720003 .pl-peak-list li,
#oms_720006 .pl-peak-list li,
#oms_740006 .pl-peak-list li {
padding: .25rem 0;
font-size: .95rem;
}
/* Service menu cards: same wash + gold hairline as the homepage services */
#oms_720004 .card,
#oms_740005 .card {
background: white;
background: linear-gradient(165deg, white 60%, color-mix(in srgb, var(--primary) 5%, white));
}
#oms_720004 .card h5::after,
#oms_740005 .card h5::after {
content: "";
display: block;
width: 34px;
height: 2px;
border-radius: 1px;
background: var(--primary-alt);
margin-top: .6rem;
}
/* EBITDA impact tiles: gold-spine panels w/ big serif impact ranges */
#oms_720005 .pl-driver {
border-left: 3px solid var(--primary-alt);
border-radius: 0 12px 12px 0;
padding: 1rem 1.25rem;
background: var(--light);
background: color-mix(in srgb, var(--primary) 4%, white);
}
#oms_720005 .pl-driver-num {
font-family: 'Gelasio', Georgia, serif;
font-variant-numeric: lining-nums;
font-feature-settings: "lnum" 1;
font-size: clamp(24px, 2.6vw, 32px);
line-height: 1.2;
margin-bottom: .35rem;
}
#oms_720005 .pl-math {
background: var(--light);
background: color-mix(in srgb, var(--primary) 6%, white);
border: 1px solid color-mix(in srgb, var(--primary) 14%, white);
}
/* Peakline difference: numbered tiles (also the Owner-Led signs + process tiles) */
#oms_720007 .pl-diff,
#oms_740003 .pl-diff,
#oms_740007 .pl-diff {
background: white;
border: 1px solid color-mix(in srgb, var(--primary) 12%, white);
border-radius: 12px;
padding: 1.5rem 1.25rem;
box-shadow: 0 8px 24px color-mix(in srgb, var(--primary) 8%, transparent);
}
#oms_720007 .pl-diff-num,
#oms_740003 .pl-diff-num,
#oms_740007 .pl-diff-num {
font-family: 'Gelasio', Georgia, serif;
font-variant-numeric: lining-nums;
font-feature-settings: "lnum" 1;
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.35rem;
color: var(--primary-alt);
background: var(--primary);
background: linear-gradient(160deg, color-mix(in srgb, var(--primary) 82%, white), color-mix(in srgb, var(--primary) 82%, black));
margin-bottom: .85rem;
}
/* Outcome cards: gold top border + flex for pinned result line */
#oms_720008 .pl-outcome,
#oms_740008 .pl-outcome {
display: flex;
flex-direction: column;
border: 1px solid color-mix(in srgb, var(--primary) 16%, white);
border-top: 3px solid var(--primary-alt);
box-shadow: 0 14px 40px color-mix(in srgb, var(--primary) 12%, transparent);
}
/* Diagnostic dimension cards: compact gloss */
#oms_720009 .pl-dim-card,
#oms_740009 .pl-dim-card {
padding: 1.25rem .75rem;
}
#oms_720009 .pl-dim-pts,
#oms_740009 .pl-dim-pts {
font-family: 'Gelasio', Georgia, serif;
font-variant-numeric: lining-nums;
font-feature-settings: "lnum" 1;
font-size: 1.6rem;
line-height: 1.2;
margin-bottom: .25rem;
}
/* FAQ: gold-spine panels */
#oms_720010 .pl-faq,
#oms_740010 .pl-faq {
background: white;
border-left: 3px solid var(--primary-alt);
border-radius: 0 12px 12px 0;
padding: 1.25rem 1.5rem;
box-shadow: 0 8px 24px color-mix(in srgb, var(--primary) 8%, transparent);
}
/* ==== PEAKLINE PE DIAGNOSTIC PAGE ==== */
/* (selectors shared with the Owner-Led Diagnostic page, oms_750xxx) */
/* Scoring scale key chips */
#oms_730002 .plq-key,
#oms_750002 .plq-key {
display: flex;
flex-wrap: wrap;
gap: .75rem;
justify-content: center;
}
#oms_730002 .plq-key-item,
#oms_750002 .plq-key-item {
display: inline-flex;
align-items: center;
border-radius: 50rem;
padding: .3rem 1rem .3rem .3rem;
font-size: .9rem;
background: var(--light);
background: color-mix(in srgb, var(--primary) 6%, white);
}
#oms_730002 .plq-key-num,
#oms_750002 .plq-key-num {
width: 34px;
height: 34px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: .6rem;
font-family: 'Gelasio', Georgia, serif;
font-variant-numeric: lining-nums;
font-feature-settings: "lnum" 1;
color: var(--primary-alt);
background: var(--primary);
}
/* Readiness band tiles: gold-spine panels */
#oms_730002 .plq-band-tile,
#oms_750002 .plq-band-tile {
border-left: 3px solid var(--primary-alt);
border-radius: 0 12px 12px 0;
padding: 1rem 1.25rem;
background: var(--light);
background: color-mix(in srgb, var(--primary) 4%, white);
}
#oms_730002 .plq-band-range,
#oms_750002 .plq-band-range {
font-family: 'Gelasio', Georgia, serif;
font-variant-numeric: lining-nums;
font-feature-settings: "lnum" 1;
font-size: 1.3rem;
color: var(--primary);
margin-bottom: .25rem;
}
/* Assessment section cards */
#oms_730003 .plq-section,
#oms_750003 .plq-section {
background: white;
border: 1px solid color-mix(in srgb, var(--primary) 14%, white);
overflow: hidden;
}
/* Contact fields */
#oms_730003 .form-control,
#oms_750003 .form-control {
border-radius: 10px;
border-color: color-mix(in srgb, var(--primary) 28%, white);
}
#oms_730003 .form-control:focus,
#oms_750003 .form-control:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-alt) 45%, transparent);
}
#oms_730003 label::after,
#oms_750003 label::after {
content: " *";
color: var(--primary);
}
/* Honeypot: visually gone, still in the form for bots to fill */
.plq-hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
opacity: 0;
}
.plq-submit:disabled {
opacity: .65;
}
#oms_730003 .plq-q,
#oms_750003 .plq-q {
padding: 1.1rem 0;
border-bottom: 1px solid color-mix(in srgb, var(--primary) 10%, white);
}
#oms_730003 .plq-q:last-child,
#oms_750003 .plq-q:last-child {
border-bottom: 0;
}
/* 5-point weighted question tag */
#oms_730003 .plq-weight,
#oms_750003 .plq-weight {
display: inline-block;
text-transform: uppercase;
letter-spacing: .1em;
font-size: .66rem;
font-weight: 600;
color: var(--primary);
border: 1px solid color-mix(in srgb, var(--primary) 35%, white);
border-radius: 50rem;
padding: .1rem .6rem;
margin-left: .35rem;
vertical-align: middle;
white-space: nowrap;
}
/* Score buttons (built by the page JS) */
.plq-scale {
display: flex;
flex-wrap: wrap;
gap: .5rem;
}
.plq-btn {
width: 46px;
height: 46px;
border-radius: 12px;
border: 1px solid color-mix(in srgb, var(--primary) 28%, white);
background: white;
color: var(--primary);
font-family: 'Gelasio', Georgia, serif;
font-variant-numeric: lining-nums;
font-feature-settings: "lnum" 1;
font-size: 1.15rem;
line-height: 1;
touch-action: manipulation;
}
@media (hover: hover) {
.plq-btn:hover {
border-color: var(--primary);
}
}
.plq-btn:active {
transform: scale(.94);
}
.plq-btn.on {
background: var(--primary);
color: white;
border-color: var(--primary-alt);
box-shadow: 0 0 0 1px var(--primary-alt);
}
#oms_730003 .plq-sec-foot,
#oms_750003 .plq-sec-foot {
background: var(--light);
background: color-mix(in srgb, var(--primary) 5%, white);
border-top: 1px solid color-mix(in srgb, var(--primary) 12%, white);
}
#oms_730003 .plq-sec-score,
#oms_750003 .plq-sec-score {
font-family: 'Gelasio', Georgia, serif;
font-variant-numeric: lining-nums;
font-feature-settings: "lnum" 1;
font-size: 1.35rem;
color: var(--primary);
}
/* Floating progress pill */
.plq-sticky {
position: sticky;
bottom: 14px;
z-index: 40;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
max-width: 480px;
margin: 1.5rem auto 0;
padding: .5rem .6rem .5rem 1.25rem;
border-radius: 50rem;
color: white;
background: rgba(10, 20, 32, .92);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.plq-sticky span {
white-space: nowrap;
}
@media (max-width: 575px) {
.plq-sticky {
gap: .5rem;
padding: .4rem .5rem .4rem 1rem;
font-size: .85rem;
}
}
/* Print or Save output: the PDF starts at the assessment heading and ends at the score bars */
@media print {
.omsNav,
.omsFooter,
.oms-footer,
.copyrightWrapper,
#oms_730001,
#oms_730002,
#oms_730003 .pl-eyebrow-lines,
#oms_730004 .col-12.text-center.mt-4,
#oms_750001,
#oms_750002,
#oms_750003 .pl-eyebrow-lines,
#oms_750004 .col-12.text-center.mt-4,
.plq-sticky,
.oms-admin-tools,
.editpagebutton {
display: none !important;
}
body {
padding-top: 0 !important;
}
#oms_730003 .plq-section,
#oms_750003 .plq-section {
box-shadow: none !important;
}
/* Browsers strip backgrounds when printing; force the ones that carry meaning */
#oms_730003 .plq-sec-head,
#oms_730003 .plq-sec-foot,
#oms_730003 .plq-btn.on,
#oms_730004,
#oms_730004 .plq-bar,
#oms_730004 .plq-bar-fill,
#oms_750003 .plq-sec-head,
#oms_750003 .plq-sec-foot,
#oms_750003 .plq-btn.on,
#oms_750004,
#oms_750004 .plq-bar,
#oms_750004 .plq-bar-fill {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
/* Fallback outlines so selections and bars survive even if backgrounds are dropped */
#oms_730003 .plq-btn.on,
#oms_750003 .plq-btn.on {
border: 2px solid var(--primary);
font-weight: 700;
}
#oms_730004 .plq-bar,
#oms_750004 .plq-bar {
border: 1px solid rgba(255, 255, 255, .5);
}
#oms_730003 .plq-q,
#oms_730003 .plq-sec-head,
#oms_730003 .plq-sec-foot,
#oms_730004 .plq-bar-row,
#oms_750003 .plq-q,
#oms_750003 .plq-sec-head,
#oms_750003 .plq-sec-foot,
#oms_750004 .plq-bar-row {
page-break-inside: avoid;
break-inside: avoid;
}
#oms_730003 .plq-sec-head,
#oms_750003 .plq-sec-head {
page-break-after: avoid;
break-after: avoid;
}
/* Keep the section score line attached to the questions above it */
#oms_730003 .plq-sec-body,
#oms_750003 .plq-sec-body {
page-break-after: avoid;
break-after: avoid;
}
/* Results always start on a fresh page */
#oms_730004,
#oms_750004 {
page-break-before: always;
break-before: page;
}
}
/* Results */
#oms_730004 .plq-score-num,
#oms_750004 .plq-score-num {
font-family: 'Gelasio', Georgia, serif;
font-variant-numeric: lining-nums;
font-feature-settings: "lnum" 1;
font-size: clamp(60px, 8vw, 92px);
line-height: 1;
}
#oms_730004 .plq-score-den,
#oms_750004 .plq-score-den {
font-size: clamp(22px, 3vw, 30px);
color: rgba(255, 255, 255, .55);
}
#oms_730004 .plq-bar-row,
#oms_750004 .plq-bar-row {
margin-bottom: 1.1rem;
}
/* Bar + fill must be display block: inline spans ignore width/height */
#oms_730004 .plq-bar,
#oms_750004 .plq-bar {
display: block;
height: 10px;
border-radius: 5px;
background: rgba(255, 255, 255, .16);
overflow: hidden;
}
#oms_730004 .plq-bar-fill,
#oms_750004 .plq-bar-fill {
display: block;
height: 100%;
width: 0;
border-radius: 5px;
background: var(--primary-alt);
transition: width .5s ease;
}
#oms_730004 .plq-bar-score,
#oms_750004 .plq-bar-score {
font-variant-numeric: lining-nums;
font-feature-settings: "lnum" 1;
}
/* ==== PEAKLINE OWNER-LED BUSINESS PAGE ==== */
/* Reuses the PE page components: the shared selectors above were extended with the
oms_740xxx section ids (light-band blooms, pullquote, audience + service cards,
peak tags/lists, diff tiles, outcomes, dim cards, faq). No page-specific rules. */
/* ==== PEAKLINE OWNER-LED DIAGNOSTIC PAGE ==== */
/* Reuses the PE diagnostic components: the plq selectors above were extended with the
oms_750xxx section ids (key chips, band tiles, section cards, contact fields, score
buttons, results bars, print rules). No page-specific rules. */
/* PAGE SPECIFIC */
/* FOOTER */