/*
peak2026.css — modernization pass covering 90-1.xsl (landing / signup
page), 91-2.xsl (respondent / assessment-progress dashboard) and 90-4.xsl
(the 31/36-question survey itself, via Survey.xsl). Loads AFTER the
existing theme stylesheets on every page that links it (on 90-4.xsl,
after survey.css too), so equal-specificity rules here win by source
order alone. A few legacy rules in style.css/survey.css are
ID-qualified (or !important) on these exact pages, though, so a handful
of selectors below deliberately match or exceed that specificity - see
the comments at #contact-wrap .fsRow / .fsSubmit and #survey for why.
All three pages share header.xsl/footer.xsl/includes.xsl, so anything
that needs to look different per page (the logo band, in particular) is
scoped through a body class added in each page's tag:
body.app90-action1 keeps the real banner image (90-1.xsl only);
body.peak-text-banner swaps it for a "Peak Leadership" text banner
(91-2.xsl and 90-4.xsl). Nothing here assumes other markup changes
beyond those body classes and each page's peak2026.css .
*/
/* ---------- Design tokens ---------- */
:root {
--brand: #0f6e8c;
--brand-rgb: 15, 110, 140;
--brand-dark: #0b4f63;
--brand-light: #4fb3c9;
--accent: #ee6c2f;
--accent-rgb: 238, 108, 47;
--accent-dark: #d9541a;
--ink: #16232b;
--text: #33424a;
--text-muted: #5b6b73;
--bg: #f5f7f8;
--surface: #ffffff;
--border: #dfe6e9;
--danger: #c0392b;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--shadow-sm: 0 1px 3px rgba(15, 35, 43, 0.08);
--shadow-md: 0 10px 28px rgba(15, 35, 43, 0.10);
--shadow-lg: 0 24px 48px rgba(15, 35, 43, 0.16);
--transition: 180ms ease;
--container-max: 1140px;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition: none !important; animation: none !important; }
}
/* ---------- Base ---------- */
html { box-sizing: border-box; -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: inherit; }
body {
background: var(--bg);
color: var(--text);
font-family: 'Lato', Arial, Helvetica, sans-serif;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
a { color: var(--brand); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent); }
h1, h2, h3, h4, h5, h6 {
font-family: 'Exo', 'Lato', Arial, sans-serif;
color: var(--ink);
font-weight: 700;
line-height: 1.25;
}
hr { border: 0; border-top: 1px solid var(--border); }
.container {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 1.25rem;
}
/* ---------- Top utility bar ---------- */
#topbar {
background: var(--ink);
color: #cfd8dc;
font-size: 1rem;
padding: 0.6rem 0;
}
/*
Not display:flex here on purpose. #topbar .container is a Bootstrap
.container: parent-theme/bootstrap.css clears its floated .col-lg-4/
.col-lg-8 children via ::before/::after{clear:both}. Flex would blockify
those clearfix pseudo-elements into two extra (empty) flex items, and
"space-between" across 4 items instead of 2 is what made the bar look
uneven/"not stretching". The existing float+clearfix grid already lays
this out (and stacks it on mobile via the col-xs-12 class in header.xsl),
so we only add color/spacing here, never touch display on this selector.
*/
#topbar a { color: #cfd8dc; }
#topbar a:hover { color: #fff; }
/*
colors.css already gives these a hover background (#045366, the same
teal as --brand) via "#topbar .social-icons span a:hover" - it just
never showed because the default (non-hover) icon had no button shape
to fill. Adding the shape back here, tuned to look like a small round
button rather than the original's square box.
*/
#topbar .social-icons a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.2rem;
height: 2.2rem;
border-radius: 50%;
font-size: 1.1rem;
color: #fff;
background: rgba(255, 255, 255, 0.08);
transition: background var(--transition), transform var(--transition);
}
#topbar .social-icons a:hover {
background-color: var(--brand);
color: #fff;
transform: translateY(-1px);
}
#topbar .callus {
display: flex;
gap: 1.5rem;
align-items: center;
flex-wrap: wrap;
}
#topbar .callus i { margin-right: 0.4rem; color: var(--brand-light); }
@media (max-width: 767px) {
#topbar .callus { justify-content: center; }
}
/* ---------- Main nav / logo band ---------- */
/*
header.xsl's ".navbar.bglogo" div is shared by every page that includes
header.xsl, including both pages this stylesheet covers - so the two
page-specific treatments below are scoped by body class rather than by
".navbar.bglogo" alone, otherwise whichever rule came last in this file
would win on every page.
*/
/*
90-1.xsl: keep the real banner image. .bglogo (parent-theme/style.css)
carries the image itself (background-image/repeat) plus a fixed
"min-height:300px" - that fixed height is what we're replacing.
banner.png is 800x216 (~3.7:1) - aspect-ratio locks the box to that
ratio so its height is always derived from whatever width the page
gives it (full width down to a phone, up to --container-max), and
background-size:contain scales the image to fill that box exactly,
with no letterboxing since the box and image share the same ratio.
*/
body.app90-action1 .navbar.bglogo {
border-bottom: 1px solid var(--border);
min-height: 0;
aspect-ratio: 800 / 216;
background-position: center;
background-size: contain;
}
/*
91-2.xsl and 90-4.xsl: no logo image on these pages - a plain gradient
banner with the text "Peak Leadership" centered where the logo used to
sit. ::before content is used instead of relying on header.xsl markup
(there's no dedicated title hook in that div) - ".navbar-header" is
hidden because it's always empty and would otherwise sit next to the
::before text as a second (invisible but space-claiming) block.
*/
body.peak-text-banner .navbar.bglogo {
background-image: none;
background: linear-gradient(135deg, var(--brand-dark), var(--brand));
min-height: 0;
padding: 2.25rem 1.25rem;
text-align: center;
}
body.peak-text-banner .navbar.bglogo::before {
content: "Peak Leadership";
display: block;
font-family: 'Exo', 'Lato', Arial, sans-serif;
font-weight: 800;
font-size: clamp(1.75rem, 5vw, 3rem);
color: #fff;
letter-spacing: 0.02em;
}
body.peak-text-banner .navbar-header { display: none; }
/*
90-4.xsl only: #survey now has no max-width of its own (it fills its
container), and starts its content 1.25rem in via its own left padding.
Matching that same 1.25rem padding here (with no max-width/margin, so
this ::before also just fills the band) keeps "Peak Leadership" lined
up with the left edge of the survey questions below it, instead of
sitting centered in the full-width band like it does on 91-2.xsl.
*/
body.peak-text-banner.survey-page .navbar.bglogo::before {
padding: 0 1.25rem;
text-align: left;
}
/* Returning-user login box (loginbox.xsl), rendered inside #navbar-1 */
#navbar-1 {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0.75rem;
padding: 1rem 1.25rem;
background: var(--surface);
border-bottom: 1px solid var(--border);
}
#navbar-1 b { color: var(--text-muted); font-weight: 600; }
#navbar-1 form {
display: inline-flex;
flex-wrap: wrap;
gap: 0.6rem;
align-items: center;
}
#navbar-1 input[type="text"],
#navbar-1 input[type="password"],
#navbar-1 input[name="userid"],
#navbar-1 input[name="pass"] {
padding: 0.55rem 0.85rem;
border: 1.5px solid var(--border);
border-radius: var(--radius-sm);
font-family: inherit;
font-size: 0.95rem;
min-width: 0;
}
#navbar-1 input:focus {
outline: none;
border-color: var(--brand);
box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.15);
}
#navbar-1 #submit1 {
padding: 0.55rem 1.25rem;
background: var(--brand);
color: #fff;
border: none;
border-radius: var(--radius-sm);
font-weight: 700;
cursor: pointer;
transition: background var(--transition), transform var(--transition);
}
#navbar-1 #submit1:hover { background: var(--brand-dark); transform: translateY(-1px); }
#navbar-1 a { font-size: 0.9rem; }
@media (max-width: 480px) {
#navbar-1 form { flex-direction: column; align-items: stretch; width: 100%; }
#navbar-1 input, #navbar-1 #submit1 { width: 100%; }
}
/* ---------- Hero / title (90-1.xsl) ---------- */
.general-title {
text-align: center;
margin: 3rem auto 1.75rem;
}
.general-title h2 {
font-size: clamp(1.65rem, 4vw, 2.75rem);
margin: 0 0 1rem;
}
.general-title hr {
width: 64px;
height: 4px;
margin: 0 auto;
background: var(--accent);
border-radius: 2px;
}
.wpb_wrapper > p {
max-width: 700px;
margin: 0 auto 1.5rem;
color: var(--text-muted);
text-align: center;
}
/* ---------- Signup form card (90-1.xsl) ---------- */
#contact-wrap {
max-width: 640px;
margin: 0 auto 2.5rem;
background: var(--surface);
padding: clamp(1.5rem, 4vw, 2.5rem);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
}
/*
style.css has a pre-existing "#contact-wrap .fsRow { float:left; ... }"
rule (specificity 1 id + 1 class) that a bare ".fsRow" selector can't
outrank. Left floated, .fsRow has no in-flow content to size against,
so #contact-wrap (a plain block, no clearfix) collapses to ~0 height
around it - the "section doesn't stretch with the form" symptom.
Matching the ID-qualified selector here (and explicitly unfloating)
fixes the collapse instead of just papering over it with overflow:hidden.
*/
#contact-wrap .fsRow {
float: none;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.1rem;
}
#contact-wrap .fsRow > .fsField { grid-column: 1 / -1; }
#contact-wrap .fsSubmit {
float: none;
width: 100%;
grid-column: 1 / -1;
text-align: center;
margin-top: 1.5rem !important; /* style.css sets "margin:0 !important" on this same selector */
}
@media (max-width: 560px) {
#contact-wrap .fsRow { grid-template-columns: 1fr; }
}
#contact-wrap input.fsField {
width: 100%;
padding: 0.9rem 1rem;
border: 1.5px solid var(--border);
border-radius: var(--radius-md);
font-family: inherit;
font-size: 1rem;
color: var(--text);
background: var(--surface);
transition: border-color var(--transition), box-shadow var(--transition);
}
#contact-wrap input.fsField::placeholder { color: #94a3ab; }
#contact-wrap input.fsField:focus {
outline: none;
border-color: var(--brand);
box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.15);
}
#contact-wrap input.fsField:required:invalid { box-shadow: none; }
/*
style.css also has "#contact-wrap .fsSubmit input" (1 id + 1 class + 1
type) styling this same button flat teal/4px-tall. A bare ".fsSubmitButton"
class can't outrank that, so the button was silently falling back to the
old style. Matching the full ancestor chain beats it on specificity alone.
*/
#contact-wrap .fsSubmit input.fsSubmitButton {
width: 100%;
padding: 1rem 1.5rem;
background: linear-gradient(135deg, var(--accent), var(--accent-dark));
color: #fff;
border: none;
border-radius: var(--radius-md);
font-size: 1.05rem;
font-weight: 700;
letter-spacing: 0.01em;
cursor: pointer;
box-shadow: 0 8px 20px rgba(var(--accent-rgb), 0.35);
transition: transform var(--transition), box-shadow var(--transition);
}
#contact-wrap .fsSubmit input.fsSubmitButton:hover {
transform: translateY(-2px);
box-shadow: 0 12px 26px rgba(var(--accent-rgb), 0.42);
}
#contact-wrap .fsSubmit input.fsSubmitButton:active { transform: translateY(0); }
/* ---------- Inline error banner ---------- */
.error {
max-width: 700px;
margin: 1rem auto 0;
padding: 0.9rem 1.1rem;
background: #fdecea;
border: 1px solid #f2b8b5;
border-radius: var(--radius-md);
color: var(--danger);
font-weight: 600;
text-align: center;
}
/* ---------- Dashboard content (91-2.xsl) ---------- */
#content2 {
max-width: 760px;
margin: 2rem auto 3rem;
padding: 0 1.25rem;
}
#content2 p { line-height: 1.7; margin: 0 0 1rem; }
#content2 img { vertical-align: middle; }
/*
The XSL spaces sections with manual "
" pairs. Now that
.bolder.info and p have real CSS margins, a double- on top of
those margins reads as a much bigger gap than intended - collapse the
second of each pair rather than editing every occurrence in the XSL.
A lone (there are a couple) is untouched.
*/
#content2 br + br { display: none; }
/*
Numbered step callouts. style.css's bare ".info" rule (loaded via
includes.xsl) already paints these solid teal with a 50px icon gutter
and no icon to fill it - #content2 .bolder.info (id + 2 classes) easily
outranks that bare class rule and replaces it with a lighter card-style
callout instead of overriding it property-by-property.
*/
#content2 .bolder.info {
background: #eef6f8;
color: var(--text);
border: none;
border-left: 4px solid var(--brand);
border-radius: var(--radius-md);
padding: 1rem 1.25rem;
margin: 1.5rem 0;
font-weight: 700;
font-size: 1.2rem;
line-height: 1.5;
}
/*
The "Add Respondent" form is a bare
(first/last/email + submit)
with no classes to hook - #content2 has exactly one
, so styling
it directly is safe and specific enough without adding markup.
*/
#content2 table {
width: 100%;
max-width: 640px;
border-collapse: separate;
border-spacing: 0.75rem 0.5rem;
margin: 1rem 0 1.5rem;
}
#content2 table th {
text-align: left;
font-size: 0.8rem;
font-weight: 700;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
#content2 table th:empty { display: none; } /* the 4th
is a blank spacer over the submit button */
#content2 table input[type="text"] {
width: 100%;
min-width: 130px;
padding: 0.65rem 0.85rem;
border: 1.5px solid var(--border);
border-radius: var(--radius-md);
font-family: inherit;
font-size: 0.95rem;
transition: border-color var(--transition), box-shadow var(--transition);
}
#content2 table input[type="text"]:focus {
outline: none;
border-color: var(--brand);
box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.15);
}
@media (max-width: 640px) {
#content2 table, #content2 table tbody, #content2 table tr,
#content2 table th, #content2 table td {
display: block;
width: 100%;
}
#content2 table td { margin-bottom: 0.5rem; }
}
/*
Every button on this page is a plain
with no shared class, and several share duplicate ids (submit3 and
submit4 each appear twice in this template) - so ids aren't a safe
styling hook here. type is: submit = the primary next-step action
(Take Your Survey, Send the survey link, Add Respondent, Notify
Selected Respondents, Generate My Report); button = a secondary/
deferred action (Cancel and Return, Wait For Respondent Data). Styling
by [type] instead of id sidesteps the duplicate-id problem entirely and
gives primary vs. secondary actions a consistent, distinct look.
*/
#content2 input[type="submit"],
#content2 input[type="button"] {
display: inline-block;
margin: 0.35rem 0.5rem 0.35rem 0;
border-radius: var(--radius-md);
font-size: 1rem;
font-weight: 700;
cursor: pointer;
transition: transform var(--transition), box-shadow var(--transition),
background var(--transition), color var(--transition);
}
#content2 input[type="submit"] {
padding: 0.85rem 1.75rem;
background: linear-gradient(135deg, var(--accent), var(--accent-dark));
color: #fff;
border: none;
box-shadow: 0 8px 20px rgba(var(--accent-rgb), 0.3);
}
#content2 input[type="submit"]:hover {
transform: translateY(-2px);
box-shadow: 0 12px 26px rgba(var(--accent-rgb), 0.4);
}
#content2 input[type="submit"]:active { transform: translateY(0); }
#content2 input[type="button"] {
padding: 0.8rem 1.6rem;
background: transparent;
color: var(--brand);
border: 1.5px solid var(--brand);
}
#content2 input[type="button"]:hover {
background: var(--brand);
color: #fff;
transform: translateY(-1px);
}
/* ---------- Survey (90-4.xsl / Survey.xsl) ---------- */
/*
survey.css (loaded just before this file on 90-4.xsl) already targets
#survey with its own ID-qualified rules, so selectors below match its
specificity (mostly "#survey ..." / "#survey table ...") and rely on
peak2026.css loading last to win ties - same approach as #contact-wrap
above. One outright bug fixed in passing: survey.css's "#survey" rule
lists "fontAwesome" (an icon font) as the primary font-family for the
whole page's body text; that's corrected below.
*/
#survey {
font-family: 'Lato', Arial, Helvetica, sans-serif;
padding: 0 1.25rem 3rem;
}
#survey h1 {
text-align: center;
font-size: clamp(1.5rem, 4vw, 2.25rem);
margin: 2rem 0 1rem;
}
#survey p {
width: auto;
max-width: 700px;
margin: 0 auto 1rem;
padding: 0;
font-size: 1.15rem;
font-weight: 400;
line-height: 1.7;
color: var(--text);
}
#survey .scale {
width: auto;
max-width: 100%;
text-align: center;
background: #eef6f8;
color: var(--brand-dark);
border-radius: var(--radius-md);
padding: 0.75rem 1rem;
margin: 1.5rem auto;
font-size: 1.05rem;
}
/*
The XSL spaces sections with long runs of " " (up to 9 in a row) -
same fix as 91-2.xsl: collapse every after the first in a run so
the new CSS margins provide the rhythm instead of stacking on top of
manual line breaks. A lone is untouched.
*/
#survey br + br { display: none; }
/*
The two question tables are wide (13 columns / 11 columns of radio
buttons) - that's inherent to a Likert-scale grid and can't be solved
by picking different CSS, only by either truncating columns or letting
it scroll. Each table scrolls horizontally within its own rounded
"card" instead of overflowing the page; the repeating scale-label row
(tr.surveyscale) stays pinned to the top of the viewport via
position:sticky while its questions scroll underneath, so the 0-10
reference doesn't disappear on a long scroll.
Earlier version of this rule forced "display:block" on the
and
then re-asserted table-row/table-cell on its children to compensate -
that's unnecessary (a
's default display already has a block
outer box - the "table" keyword is outer:block/inner:table - so
overflow-x:auto already applies directly to it) and it's what caused
the table to overflow the page instead of scrolling in place: the
browser was generating its own anonymous table box inside that forced
block box and sizing/clipping it inconsistently. Leaving display at
its default "table" and setting overflow-x:auto straight on it is both
simpler and the part that actually contains the table within #survey.
*/
#survey table {
width: 100%;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 1.5rem 0;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
#survey table td {
padding: 0.65rem 0.85rem;
font-size: 1.05rem;
border-bottom: 1px solid var(--border);
white-space: nowrap;
min-width: 60px;
}
#survey .surveynumber {
width: 2.5rem;
color: var(--text-muted);
font-weight: 700;
text-align: left;
}
/* The actual question wording - this is the text people are reading and
answering against, so it gets sized up well past the shared td
default (still not enough per feedback that it was hard to see, so
bumped again here). */
#survey table .surveytext,
#survey table .surveytext2 {
width: auto;
text-align: left;
white-space: normal;
font-size: 1.3rem;
line-height: 1.55;
}
#survey table .surveytext { min-width: 260px; }
#survey table .surveytext2 { min-width: 320px; }
#survey table .surveyradio { width: 2.5rem; text-align: center; }
#survey .surveyeven { background-color: var(--surface); }
#survey .surveyodd { background-color: #f4f8f9; color: var(--text); }
#survey table tr:hover td { background-color: #eaf3f5; }
#survey table .surveyscale,
#survey table tr .surveyscale {
font-size: 1rem;
font-weight: 700;
color: var(--brand-dark);
background: var(--surface);
margin-top: 0;
}
#survey tr.surveyscale td {
position: sticky;
top: 0;
z-index: 5;
background: var(--surface);
border-bottom: 2px solid var(--brand);
box-shadow: 0 2px 4px rgba(15, 35, 43, 0.08);
}
#survey .rinput {
width: 1.35rem;
height: 1.35rem;
accent-color: var(--brand);
cursor: pointer;
}
/* Submit button: same primary-CTA treatment used elsewhere on the site */
#survey input[type="button"] {
display: block;
width: 100%;
max-width: 420px;
margin: 2rem auto 0;
padding: 1rem 1.5rem;
background: linear-gradient(135deg, var(--accent), var(--accent-dark));
color: #fff;
border: none;
border-radius: var(--radius-md);
font-size: 1.05rem;
font-weight: 700;
cursor: pointer;
box-shadow: 0 8px 20px rgba(var(--accent-rgb), 0.3);
transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);
}
#survey input[type="button"]:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(var(--accent-rgb), 0.4); }
#survey input[type="button"]:disabled { opacity: 0.6; cursor: default; transform: none; }
@media (max-width: 560px) {
#survey table td { padding: 0.5rem 0.6rem; font-size: 0.95rem; }
#survey table .surveytext { min-width: 220px; font-size: 1.15rem; }
#survey table .surveytext2 { min-width: 260px; font-size: 1.15rem; }
}
/* ---------- Footer ---------- */
#copyrights {
background: var(--ink);
color: #b8c4cb;
padding: 2.5rem 0;
margin-top: 3rem;
}
#copyrights a { color: #b8c4cb; }
#copyrights a:hover { color: #fff; }
/*
Same reason as #topbar above: this .container relies on Bootstrap's
float+clearfix grid for its .col-lg-4/.col-lg-8 children, so we don't
set display here. footer.xsl's columns have no col-xs-* class, so
Bootstrap gives them no float below the sm breakpoint - they already
stack full-width on mobile without any help from us.
*/
#copyrights .footer-menu ul {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
list-style: none;
margin: 0;
padding: 0;
}
#copyrights .copyright-text a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.4rem;
height: 2.4rem;
border-radius: 50%;
font-size: 1.25rem;
background: rgba(255, 255, 255, 0.08);
transition: background var(--transition), transform var(--transition);
}
#copyrights .copyright-text a:hover {
background-color: var(--brand);
color: #fff;
transform: translateY(-1px);
}
@media (max-width: 767px) {
#copyrights .footer-menu ul { justify-content: center; }
#copyrights .col-lg-4, #copyrights .col-lg-8 { text-align: center; }
}