/* ====================================================================
HOLLAND HALL — tenant override for the PCR Distilled master page
Destination: Z:\pcrfiles\hollandhall\Style\css\website05052026.css
Direction: "Oxford Navy" — Holland Hall crimson (#A30C33) stays the
chrome color; Oxford navy and powder blue replace gold as
the accent system.
Typography: client spec 07/2026 — H1-H5 Roboto Slab, H6 + standard
text Roboto Serif, fallbacks Arial/Helvetica/sans-serif.
Loaded via the Google Fonts import below; the base's
--serif/--sans tokens are repointed in :root and explicit
heading rules live in the TYPOGRAPHY section at the end.
Base: Poly/Style/css/website05052026.css (imported below).
==================================================================== */
@import url("https://webapps.pcrsoft.com/Clue/ApplicationFiles/Poly/Style/css/website05052026.css");
@import url("https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;500;600;700&family=Roboto+Serif:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");
:root {
/* Holland Hall official brand palette */
--hh-red: #A30C33;
--hh-black: #000000;
--hh-white: #FFFFFF;
--hh-dark-gray: #3F4444; /* button hovers */
--hh-light-gray: #D0D3D4; /* list actions / borders / soft panels */
--hh-pale-blue: #8FBCE6;
--hh-green: #3DAE2B;
--hh-aqua: #64CCC9;
--hh-plum: #690031;
--hh-yellow: #F1AA1E;
--hh-blue: #005EB8;
--hh-orange: #FF8200;
/* Chrome / navigation */
--school-navy: #A30C33; /* main crimson */
--school-navy-2: #A30C33; /* remove glossy blended hover look */
--school-navy-deep: #690031; /* approved deep plum instead of muddy crimson */
/* Accents */
--school-gold: #A9BFD6; /* powder blue — visible form checkmarks
(Clue main css draws div.checkmark::before
in this token). Was #FFFFFF to hide the
blue selected nav text; nav is now pinned
white explicitly in the NAV section below,
and heading underlines are removed in the
TYPOGRAPHY section. */
--school-gold-soft: #D0D3D4; /* client-requested light gray for list actions */
--school-gold-dark: #3F4444; /* button hover / rules / arrows */
/* Surfaces and neutrals */
--warm-cream: #FFFFFF;
--ink: #000000;
--muted: #3F4444;
--line: #D0D3D4;
--bg: #FFFFFF;
/* Shadows */
--shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
--shadow-md: 0 4px 16px rgba(0,0,0,0.10);
--shadow-lg: 0 12px 40px rgba(105,0,49,0.16);
--radius: 8px;
--radius-lg: 14px;
--container-max: 1320px;
/* Tenant widget tokens */
--color1: #A30C33;
--color2: #3F4444;
--color3: #D0D3D4;
--common-font: 'Roboto Serif', Arial, Helvetica, sans-serif;
--accent-font: 'Roboto Slab', Arial, Helvetica, sans-serif;
--title-font: 'Roboto Slab', Arial, Helvetica, sans-serif;
/* Repoint the imported Poly base's font tokens. The base maps headings
to var(--serif) and body/UI text to var(--sans) (both !important), so
redefining the tokens here restyles everything the base touches. */
--serif: 'Roboto Slab', Arial, Helvetica, sans-serif;
--sans: 'Roboto Serif', Arial, Helvetica, sans-serif;
}
/* ====================================================================
LOGO — header
The previous header logo (hollandhallbanner2.png) was the white lockup
on a solid crimson plate, which reads as a heavy slab on the white
header. The tenant images folder already holds the official crest on a
transparent background (footerlogo.png, 214x214, crimson fill), so the
header now uses the crest at full height with a typeset wordmark in the
Distilled serif beside it. CSS only, no new assets required.
==================================================================== */
.logoLink {
position: relative;
background-image: url(../images/hh-horizontal-4c.png); /* crimson crest, transparent bg */
background-size: contain;
background-repeat: no-repeat;
background-position: left center;
}
/* Pin the crest height. The imported Poly base compacts its own header by
capping `#LogoColomn .logoLink` to height:64px / min-height:64px. Holland
Hall's crest + wordmark lockup was tuned to the natural ~90px crest, so
restore height:auto and floor min-height at 80px here (this file loads
after the @import, so it wins at equal specificity). */
#LogoColomn .logoLink {
height: auto !important;
min-height: 80px !important;
}
/* Wordmark beside the crest. pointer-events:none keeps the whole tile
clickable through the existing anchor. */
/*.logoLink::after {
content: "HOLLAND HALL";
position: absolute;
left: 104px; /* crest renders ~90px wide at left */
top: 50%;
transform: translateY(-50%);
font-family: var(--serif, 'Cormorant Garamond', Georgia, serif);
font-size: 31px;
font-weight: 600;
letter-spacing: 2.5px;
color: black;
white-space: nowrap;
pointer-events: none;
}*/
/* --------------------------------------------------------------------
LOGO — mobile (header)
At desktop the lockup is the crest (background, contain) plus the
"HOLLAND HALL" ::after wordmark at left:104px / 31px, whose right edge
lands near 365px. On a phone (~360-390px viewport) that is wider than
the stacked header column, so the wordmark clips / forces horizontal
overflow. The local desktop rules above set no responsive sizing.
Below 600px, shrink the crest and wordmark into a compact lockup that
fits a 320px screen: crest ~46px, wordmark at left:58px / 18px (right
edge ~209px).
SPECIFICITY NOTE: the crest size and box height are NOT controlled by
the local `.logoLink` rule — the imported Poly base sets
`#LogoColomn .logoLink { background-size: contain !important;
min-height: 80px !important }` at specificity (1,1,0). A plain
`.logoLink` rule (even with !important) loses to that, so the crest
would stay full-size (~80px) while the wordmark slid left onto it,
overlapping. We therefore scope these mobile rules under #LogoColomn
to match the base specificity and win on source order. #LogoColomn is
the stable Telerik layout column id (not an auto-generated ASP.NET
ctl00_* id), so it is safe to target. The wordmark ::after is left
under .logoLink — the base sets no ::after, so source order wins.
-------------------------------------------------------------------- */
@media screen and (max-width: 600px) {
#LogoColomn .logoLink {
width: 216px !important; /* fits crest + wordmark */
background-size: 46px auto !important; /* beat base contain!imp */
background-position: left center !important;
}
.logoLink::after {
left: 58px !important; /* clear the 46px crest */
font-size: 18px !important;
letter-spacing: 1.4px !important;
}
}
/* --------------------------------------------------------------------
OPTIONAL — official horizontal lockup
If the official one-piece lockup is preferred, save the white version
from hollandhall.org (wp-content/uploads/2025/05/
hh-horizontal-w-scaled-e1748608632633.webp) into Style/images/ as
hh-horizontal-w.webp, then replace the two .logoLink rules above with
the block below. The mask renders the white asset in brand crimson.
.logoLink {
background-image: none;
background-color: var(--school-navy);
-webkit-mask-image: url(../images/hh-horizontal-w.webp);
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: left center;
mask-image: url(../images/hh-horizontal-w.webp);
mask-size: contain;
mask-repeat: no-repeat;
mask-position: left center;
}
.logoLink::after { content: none; }
-------------------------------------------------------------------- */
/* ====================================================================
PAY BUTTON
The base stylesheet fills .Pay with var(--school-gold), which in this
palette is powder blue: too quiet for a payment CTA. Repoint Pay at
oxford navy with white text. Selectors mirror the base file's two .Pay
groups so the later cascade position wins at equal specificity.
==================================================================== */
a.Pay,
.Pay,
a[class*="Pay"]:not(.PayPal),
.PayButton input,
input.Pay,
a.button.Pay,
a.Pay.button,
a.button[href*="ay" i][href*="ent" i],
a.button[class~="Pay"] {
background-color: var(--school-gold-dark) !important;
background: var(--school-gold-dark) !important;
background-image: none !important;
border-color: var(--school-gold-dark) !important;
color: #ffffff !important;
}
a.Pay:hover,
.Pay:hover,
a[class*="Pay"]:not(.PayPal):hover,
.PayButton input:hover,
input.Pay:hover,
a.button.Pay:hover,
a.Pay.button:hover,
a.button[href*="ay" i][href*="ent" i]:hover,
a.button[class~="Pay"]:hover {
background-color: #24406B !important; /* lifted navy */
background: #24406B !important;
border-color: #24406B !important;
color: #ffffff !important;
}
/* The base file's strongest Pay rule targets bare submit inputs through
a (1,8,1)-specificity chain (`...[value="Pay" i]:not(...):not(#__never__)`).
Mirror the chain exactly: equal specificity, and this file's own rules
cascade after the @import, so these win by source order. */
input[type="submit"][id*="btnPay" i]:not(.rigActionButton):not(.rltbActionButton):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast):not(#__never__),
input[type="submit"][name*="btnPay" i]:not(.rigActionButton):not(.rltbActionButton):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast):not(#__never__),
input[type="submit"][value="Pay" i]:not(.rigActionButton):not(.rltbActionButton):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast):not(#__never__) {
background-color: var(--school-gold-dark) !important;
background: var(--school-gold-dark) !important;
background-image: none !important;
border: 1px solid var(--school-gold-dark) !important;
color: #ffffff !important;
}
input[type="submit"][id*="btnPay" i]:not(.rigActionButton):not(.rltbActionButton):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast):not(#__never__):hover,
input[type="submit"][name*="btnPay" i]:not(.rigActionButton):not(.rltbActionButton):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast):not(#__never__):hover,
input[type="submit"][value="Pay" i]:not(.rigActionButton):not(.rltbActionButton):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast):not(#__never__):hover {
background-color: #24406B !important;
background: #24406B !important;
border-color: #24406B !important;
color: #ffffff !important;
}
/* ====================================================================
LOGO — footer
The footer band is deep crimson (--school-navy-deep), where the crimson
crest disappears. Same crest asset, masked and filled white.
==================================================================== */
.logoLinkFooter {
background-image: url(../images/footerlogo3.png) !important;
min-height: 120px;
max-width: 120px;
width: 120px;
height: 120px;
box-sizing: border-box;
margin-top: 5px !important;
margin-bottom: 5px !important;
margin-left: auto;
margin-right: auto;
}
/* ====================================================================
TYPOGRAPHY — client spec 07/2026
1) H2: no underline, color #3F4444 (--hh-dark-gray)
2) H1-H5 titles: Roboto Slab
3) H6 + standard text: Roboto Serif
Fallbacks: Arial, Helvetica, sans-serif
The --serif/--sans token overrides in :root above already convert most
base-styled text; the rules below pin the heading levels explicitly and
cover base rules that hard-map a heading to the other token (e.g. the
base puts h4 on var(--sans)). !important mirrors the base's own
!important; the compound selectors mirror the base's selector lists so
this file wins on source order at equal specificity.
==================================================================== */
h1, h2, h3, h4, h5,
.styledDivision h4, .contentnews h4, .RadDock h4,
.PageTitleRow .Title, .PageTitleColumn span, .PageTitleLabelColumn span,
.RadDock .rdTitle, .RadDock_Default .rdTitle,
.control-header {
font-family: 'Roboto Slab', Arial, Helvetica, sans-serif !important;
}
body, h6 {
font-family: 'Roboto Serif', Arial, Helvetica, sans-serif !important;
}
/* H2 — flat #3F4444, no underline from any source: text-decoration,
element borders, or the production ::after ornament bar. */
h2,
.styledDivision h2, .RadDock h2, .contentnews h2,
.PageTitleRow h2, .PageTitleColumn h2,
.PageTitleLabelRow h2, .PageTitleLabelColumn h2,
.control-header h2,
.styledDivision .ContentLayout h2, .styledDivision .PaddedLayout h2,
.styledDivision h2[style*="border-bottom"], .styledDivision h2[style*="border"] {
color: var(--hh-dark-gray) !important; /* #3F4444 */
text-decoration: none !important;
border-bottom: 0 none !important;
border-top: 0 none !important;
}
h2::after,
.styledDivision h2::after, .control-header h2::after, .RadDock h2::after,
.contentnews h2::after, .PaddedLayout h2::after, .ContentLayout h2::after {
content: none !important;
border: 0 none !important;
background: transparent !important;
}
/* All other heading levels — no underline either. Now that --school-gold
is a visible powder blue (was white), the base's gold heading underlines
(border-bottom on .styledDivision h1/h3, .control-header, ::after
ornaments, and the 56px .PageTitleLabelRow bar) would suddenly render.
Client spec: headings carry no underline at all. Selectors mirror the
base's own lists so this file wins on source order at equal specificity. */
h1, h3, h4, h5, h6,
.styledDivision h1, .styledDivision h3, .styledDivision .h2-style,
.control-header {
text-decoration: none !important;
border-bottom: 0 none !important;
border-top: 0 none !important;
}
h1::after, h3::after, h4::after,
.styledDivision h1::after, .styledDivision h3::after, .styledDivision h4::after,
.control-header h1::after, .control-header h3::after,
.PageTitleLabelRow::after {
content: none !important;
border: 0 none !important;
background: transparent !important;
}
/* ====================================================================
NAV — keep top-menu hover/selected text WHITE on the crimson band.
The base colors these with var(--school-gold); when this file kept
that token white the nav looked right for free. The token is now
powder blue for the form checkmarks, so pin the nav back to white
explicitly (same selectors/specificity as the base, later in the
cascade). The animated 2px hover underline stays white too.
==================================================================== */
.MenuColumn .menuDefaultNavWrapper > ul > li > a:hover,
.MenuColumn .menuDefaultNavWrapper > ul > li > a.MenuDefaultSelectedNodeCss {
color: #ffffff !important;
}
.MenuColumn .menuDefaultNavWrapper > ul > li > a::after {
background: #ffffff;
}
/* ====================================================================
QUICK-LINK ICONS — Family Directory + Events
The imported Poly base draws the header quick-link icons via
`.QuickLinksColumn ul li > a[href*=...]::before` keyed on the href
(Calendar → calendar, Give/Gift → heart). Holland Hall's other two
quick links have no matching key in the base, so their 16px ::before
box renders empty. Icons below reuse the base's exact SVG style
(24px viewBox, stroke %2314202e, width 2, round caps).
Family Directory also gets bare-page-id selectors because production
rewrites the active page's href from "../Directory/75783" to "75783";
Events points at hollandhall.org so its href never rewrites.
==================================================================== */
.QuickLinksColumn ul li > a[href*="Directory" i]::before,
.QuickLinksColumn ul li > a[href$="/75783"]::before,
.QuickLinksColumn ul li > a[href="75783"]::before {
background-image: url("data:image/svg+xml;utf8,");
}
.QuickLinksColumn ul li > a[href*="Events" i]::before {
background-image: url("data:image/svg+xml;utf8,");
}