/vspace elements with
their own margins and baseline alignment, which is what pushed the icons
slightly low. Flatten every wrapper level to a margin-free, flex-centred
row and render images as blocks so no baseline/descender gap remains. */
#TemplateSocial,
#TemplateLogo {
flex: 0 0 auto;
align-self: center;
display: flex;
align-items: center;
gap: .5rem;
}
/* Social block sits at the top-right, tight against the logo, at EVERY width
(previously it drifted left when the bar wrapped on narrow screens). */
#TemplateSocial {
margin-left: auto;
padding-right: 0;
transform: translateY(var(--d1-social-lift)); /* fine vertical tuning; see :root */
}
#TemplateLogo { margin-left: clamp(.7rem, 1.6vw, 1.1rem); padding-right: clamp(.3rem, 1vw, .75rem); }
#TemplateSocial :is(p, div, span),
#TemplateLogo :is(p, div, span) {
display: flex;
align-items: center;
gap: .5rem;
margin: 0;
padding: 0;
}
#TemplateSocial .vspace,
#TemplateLogo .vspace,
#TemplateTop .vspace { display: none; }
#TemplateSocial a {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
border-radius: 4px;
/* PmWiki core / legacy pub stylesheets decorate a.urllink with padding or a
background icon; either one pushes the icons off-centre. Neutralise both. */
padding: 0 !important;
background-image: none !important;
transition: transform .16s ease, filter .16s ease;
}
#TemplateLogo a {
display: inline-flex;
align-items: center;
padding: 0 !important;
background-image: none !important;
line-height: 0;
}
#TemplateSocial img {
display: block;
margin: 0;
max-height: 32px;
width: auto;
vertical-align: middle;
position: relative;
top: -1px; /* optical nudge: icons sit a hair low against the text baseline */
}
#TemplateSocial a:hover { transform: translateY(-1px); filter: brightness(1.18); }
#TemplateLogo img { display: block; margin: 0; max-height: 44px; width: auto; vertical-align: middle; }
/* The top bar is a tall single row at full width; force the social + logo
blocks (and every wrapper PmWiki nests inside them) to centre on the row's
cross-axis rather than dropping to its baseline. Overrides any recipe CSS
that loads after the skin by being more specific. */
#TemplateTop .topbar-inner > #TemplateSocial,
#TemplateTop .topbar-inner > #TemplateLogo { align-self: center; }
#TemplateTop #TemplateSocial,
#TemplateTop #TemplateSocial > *,
#TemplateTop #TemplateSocial a,
#TemplateTop #TemplateLogo,
#TemplateTop #TemplateLogo > *,
#TemplateTop #TemplateLogo a {
display: flex;
align-items: center;
}
#TemplateTop a { color: #fff; text-decoration: none; transition: color .16s ease; }
#TemplateTop a:hover { color: #ffd9d9; text-decoration: none; }
/* Header band. The wiki-managed image inside TemplateHeader becomes a
full-bleed cover layer; the crest floats over the band edges. */
#TemplateHeader { color: #fff; }
.header-inner {
position: relative;
display: grid;
grid-template-columns: var(--d1-crest-w) minmax(0, 1fr);
align-items: center;
gap: clamp(1rem, 3vw, 2rem);
min-height: clamp(155px, 16vw, 205px);
padding: clamp(.85rem, 1.7vw, 1.25rem) clamp(1rem, 3vw, 2rem) clamp(.85rem, 1.7vw, 1.25rem) var(--d1-copy-inset);
overflow: visible; /* crest stays inside at overhang 0; visible lets it break the band border when overhang > 0 */
background:
linear-gradient(130deg, rgba(31, 30, 29, .96), rgba(31, 30, 29, .74)),
radial-gradient(circle at 100% 0, rgba(197, 2, 7, .54), transparent 34rem);
}
/* Any image the wiki editor drops into the TemplateHeader section stretches
to fill the whole band. Add class d1-header-inline to an image to opt out
and keep it as a normal inline image instead. */
#TemplateHeaderText img:not(.d1-header-inline),
#TemplateHeader img.header-bg,
#TemplateHeader .header-bg img {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
object-fit: cover;
object-position: center;
border-radius: 0;
}
#TemplateHeaderText { position: static; /* so the cover image spans .header-inner */ }
#TemplateHeaderText p { margin: 0; }
/* Readability scrim behind any header text, painted over the photo. */
.header-inner::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(90deg, rgba(20, 18, 17, .42) 0%, rgba(20, 18, 17, .08) 45%, transparent 70%);
}
#TemplateHeaderText h1,
#TemplateHeaderText h2,
#TemplateHeaderText h3,
#TemplateHeaderText p,
#TemplateHeaderText a { position: relative; z-index: 2; color: #fff; }
#TemplateHeaderText h1,
#TemplateHeaderText h2 { margin-top: 0; font-size: clamp(1.7rem, 2.55vw, 2.35rem); text-wrap: balance; }
#TemplateHeaderText h3 { font-size: clamp(1.2rem, 1.8vw, 1.55rem); }
/* Crest: bigger, floating over the header/nav boundary with a drop shadow. */
#TemplateCrest {
position: relative;
z-index: 3;
display: flex;
justify-content: flex-start; /* crest's LEFT edge sits at the content inset (aligns with copy below) */
align-items: center;
pointer-events: none; /* the overhang must not block clicks on the nav below */
}
#TemplateCrest a { pointer-events: auto; display: block; width: 100%; }
/* Cap the crest at the column size but let it render at its NATURAL size, so
the larger home-page crest and the smaller inner-page crest each keep their
intended size. They share the same LEFT edge (margin-inline: 0) so both line
up with the copy below regardless of size. width="NNN" in the wiki markup is
respected as-is; to force one uniform size instead, add `width: 100%`. */
#TemplateCrest img,
#TemplateCrest svg {
display: block;
width: auto;
height: auto;
max-width: var(--d1-crest-w);
max-height: var(--d1-crest-w);
margin-left: var(--d1-crest-nudge); /* fine per-group alignment; see :root */
margin-right: auto;
margin-bottom: calc(var(--d1-crest-overhang) * -1);
object-fit: contain;
filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .42));
}
/* 05 - Primary red navigation ---------------------------------------------
The continuous white rule lives on the bar itself (inset shadow), so it
runs the full width. Links carry a transparent 3px border in the same
spot; hover/active recolour that border, visually breaking the line. */
#TemplateTopNav { color: #fff; background: transparent; }
#TemplateTopNav .nav-inner {
min-height: 48px;
display: flex;
align-items: stretch;
padding: 0;
background: linear-gradient(180deg, #d10a0f 0%, var(--d1-red) 44%, #9b0004 100%);
box-shadow:
inset 0 -3px 0 rgba(255, 255, 255, .82), /* full-width white rule */
inset 0 1px 0 rgba(255, 255, 255, .22),
0 12px 24px rgba(70, 0, 0, .30); /* drop shadow onto the content below */
}
#TemplateTopNav ul {
display: flex;
flex-wrap: wrap; /* always wrap rather than clipping links off the right edge */
align-items: stretch;
gap: 0;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
#TemplateTopNav li { position: relative; margin: 0; padding: 0; display: flex; }
#TemplateTopNav a,
#TemplateTopNav .selflink {
display: flex;
align-items: center;
min-height: 48px;
padding: .6rem .82rem;
color: #fff;
background: transparent;
font-family: var(--d1-display);
font-size: clamp(.94rem, 1.12vw, 1.05rem);
line-height: 1.1;
letter-spacing: .02em;
white-space: nowrap;
text-decoration: none;
border: 0;
border-bottom: 3px solid transparent; /* white rule shows through from the bar */
border-radius: 0;
transition: background-color .2s ease, border-bottom-color .2s ease, color .2s ease;
}
#TemplateTopNav a:hover,
#TemplateTopNav a:focus-visible {
color: #fff;
background: linear-gradient(180deg, #b90005, #8c0003);
border-bottom-color: #650002;
text-decoration: none;
}
#TemplateTopNav .selflink,
#TemplateTopNav a.selflink,
#TemplateTopNav li.current > a,
#TemplateTopNav li.active > a,
#TemplateTopNav a[aria-current="page"] {
color: #fff;
background: linear-gradient(180deg, var(--d1-red-dark), var(--d1-red-deep));
border-bottom-color: var(--d1-red-deep); /* the active link breaks the white line */
font-weight: 700;
text-decoration: none;
}
/* Desktop: the first menu item's TEXT aligns to the shared content edge
(--d1-copy-inset), matching the crest, breadcrumb and body copy for a clean
copy-start. The ul is inset by the copy edge minus each link's own left
padding, so the first link's text lands on the edge while its hover
background still fills naturally. --d1-nav-inset adds any extra offset (used
when the floating crest is re-enabled). */
@media (min-width: 901px) {
#TemplateTopNav ul {
padding-left: calc(var(--d1-copy-inset) - 1.05rem + var(--d1-nav-inset));
}
#TemplateTopNav a,
#TemplateTopNav .selflink {
padding: .6rem 1.05rem;
font-size: clamp(.94rem, 1.05vw, 1.02rem);
}
}
/* Small caret on top-level items that open a dropdown/mega menu.
(No :has() support? Add class has-submenu to the list item instead.) */
#TemplateTopNav li:has(> ul) > a::after,
#TemplateTopNav li.has-submenu > a::after,
#TemplateTopNav li:has(> ul) > .selflink::after,
#TemplateTopNav li.has-submenu > .selflink::after {
content: "\25BE"; /* ▾ */
margin-left: .35rem;
font-size: .7em;
opacity: .85;
transition: transform .18s ease;
}
#TemplateTopNav li:has(> ul):hover > a::after,
#TemplateTopNav li.has-submenu:hover > a::after { transform: translateY(1px); }
/* ...but never on items inside an open dropdown/mega panel. */
#TemplateTopNav li ul li:has(> ul) > a::after,
#TemplateTopNav li ul li.has-submenu > a::after,
#TemplateTopNav li ul li:has(> ul) > .selflink::after,
#TemplateTopNav li ul li.has-submenu > .selflink::after { content: none; }
/* Dropdown submenus (if a nav item ever gains a nested list). */
#TemplateTopNav li ul {
position: absolute;
z-index: 80;
top: calc(100% - 1px);
left: 0;
display: block;
min-width: 14rem;
width: max-content;
max-width: 20rem;
padding: .25rem 0;
background: var(--d1-charcoal);
box-shadow: 0 14px 28px rgba(0, 0, 0, .24);
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}
#TemplateTopNav li:hover > ul,
#TemplateTopNav li:focus-within > ul {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
#TemplateTopNav li ul li { width: 100%; }
#TemplateTopNav li ul a,
#TemplateTopNav li ul .selflink {
min-height: 38px;
width: 100%;
padding: .58rem .8rem;
font-family: var(--d1-font);
font-size: .92rem;
letter-spacing: 0;
white-space: normal;
border-bottom: 0;
background: transparent;
}
#TemplateTopNav li ul a:hover { background: var(--d1-red-dark); }
/* Mega menu (no JavaScript): add class d1-mega to a TOP-LEVEL menu item in
the wiki -- e.g. * %apply=item d1-mega% [[Main/MemberResources | Member Resources]]
Its dropdown then spans the full red bar. Second-level items become column
headers; their own nested lists render as grouped links underneath.
Opens on hover and on keyboard focus (:focus-within). */
#TemplateTopNav .nav-inner { position: relative; }
#TemplateTopNav li.d1-mega { position: static; }
#TemplateTopNav li.d1-mega > ul {
left: 0;
right: 0;
top: 100%;
width: auto;
min-width: 0;
max-width: none;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
align-items: start;
gap: .4rem 1.25rem;
padding: 1rem 1.15rem 1.2rem;
}
#TemplateTopNav li.d1-mega > ul > li { width: auto; display: block; }
#TemplateTopNav li.d1-mega > ul > li > a,
#TemplateTopNav li.d1-mega > ul > li > .selflink {
font-family: var(--d1-display);
font-size: 1.02rem;
font-weight: 700;
letter-spacing: .02em;
border-bottom: 1px solid rgba(255, 255, 255, .18);
}
#TemplateTopNav li.d1-mega ul ul {
position: static;
display: block;
min-width: 0;
width: auto;
max-width: none;
padding: .15rem 0 0;
background: transparent;
box-shadow: none;
opacity: 1;
visibility: inherit; /* inherit, not visible: keeps the panel fully hidden when closed */
transform: none;
transition: none;
}
#TemplateTopNav li.d1-mega ul ul a { font-size: .9rem; opacity: .92; }
/* 06 - Optional alert and hero bands -------------------------------------- */
#TemplateAlert:empty,
#TemplateHero:empty { display: none; }
#TemplateAlert {
margin-top: 1rem;
padding: .9rem 1.1rem;
color: #4b2400;
background: #fff8df;
border: 1px solid #f2d778;
border-radius: 4px;
box-shadow: var(--d1-shadow-band);
}
#TemplateAlert p:last-child { margin-bottom: 0; }
#TemplateHero {
margin-top: 1rem;
padding: clamp(1.3rem, 3vw, 2rem);
color: #fff;
background:
radial-gradient(circle at 90% 20%, rgba(255, 255, 255, .18), transparent 14rem),
linear-gradient(135deg, #2a2928, #4a2324 52%, var(--d1-red-dark));
border-radius: 6px;
box-shadow: var(--d1-shadow-band);
}
#TemplateHero :is(h1, h2, h3, p, a) { color: #fff; }
#TemplateHero a { font-weight: 700; }
/* 07 - Content shell and main column --------------------------------------
Desktop grid: rows are auto + 1fr so the right nav starts at the TOP of
the column (the old implicit rows are what centred it vertically). */
#TemplateWrapper {
margin-top: 0;
background: #fff;
box-shadow: var(--d1-shadow-card);
}
@media (min-width: 901px) {
#TemplateWrapper {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(var(--d1-nav-col-min), var(--d1-nav-col-max));
grid-template-rows: auto 1fr;
grid-template-areas:
"main sectionhero"
"main nav";
gap: 0;
align-items: stretch;
}
#TemplateMainColumn { grid-area: main; min-width: 0; }
#TemplateSectionHero { grid-area: sectionhero; min-width: 0; border-left: 1px solid var(--d1-line); }
#TemplateNav { grid-area: nav; min-width: 0; border-left: 1px solid var(--d1-line); }
#TemplateNavToggle,
#TemplateNavToggleLabel { display: none; }
}
.content-card { background: #fff; } /* column divider is the nav's border-left; no second border here */
#TemplateTitle {
padding: .7rem clamp(1rem, 2.4vw, 1.7rem) .7rem var(--d1-copy-inset);
color: var(--d1-muted);
font-size: .88rem;
line-height: 1.3;
background: #fff;
border-bottom: 1px solid var(--d1-line);
}
#TemplateTitle :is(h1, h2, h3) { font-size: .88rem; margin: 0; color: var(--d1-muted); font-family: var(--d1-font); }
#TemplateTitle a { color: var(--d1-muted); }
/* hover styling for breadcrumb links is defined once, in section 07 (centre-out underline) */
#TemplateMain {
padding: clamp(1rem, 2.4vw, 1.8rem) clamp(1rem, 2.4vw, 1.8rem) clamp(1rem, 2.4vw, 1.8rem) var(--d1-copy-inset);
font-size: clamp(.98rem, 1vw, 1.04rem);
}
#TemplateMain > :first-child { margin-top: 0; }
#TemplateMain h1 { font-size: clamp(1.42rem, 1.85vw, 1.85rem); line-height: 1.18; margin: 0 0 .72rem; }
#TemplateMain h2 { font-size: clamp(1.18rem, 1.45vw, 1.42rem); margin-top: 2rem; }
#TemplateMain h3 { font-size: clamp(1.02rem, 1.25vw, 1.18rem); }
#TemplateMain :is(h2, h3):first-child { margin-top: 0; }
/* Black diamond bullets like the original site (content lists only). */
#TemplateMain ul {
list-style: none;
padding-left: 1.15rem;
}
#TemplateMain ul > li {
position: relative;
margin-top: .25rem;
}
#TemplateMain ul > li::before {
content: "\25C6"; /* black diamond */
position: absolute;
left: -1.05rem;
top: .05em;
color: var(--d1-charcoal);
font-size: .62em;
line-height: 1.6;
}
#TemplateMain :is(ul.nav, .nav ul, table ul, .thumbtable ul, .d1-card-grid ul) > li::before { content: none; }
#TemplateMain img { border-radius: .5rem; }
#TemplateMain .frame img,
#TemplateMain img.thumbs { border-radius: 0; }
/* Content links: resting state is a thin, muted red underline; on hover a
full-strength 2px rule grows OUTWARD FROM THE CENTRE and the text warms to
red. Buttons and image links are excluded. (Guarded by reduced-motion.) */
#TemplateMain a:not(.button):not(.d1-button) {
color: #741317;
text-decoration: none;
background-image:
linear-gradient(currentColor, currentColor),
linear-gradient(rgba(197, 2, 7, .35), rgba(197, 2, 7, .35));
background-repeat: no-repeat;
background-position: 50% calc(100% - .04em), 0 calc(100% - .04em); /* first layer centred */
background-size: 0% 2px, 100% 1px;
transition: background-size .24s ease, color .16s ease;
}
#TemplateMain a:not(.button):not(.d1-button):hover,
#TemplateMain a:not(.button):not(.d1-button):focus-visible {
color: var(--d1-red);
background-size: 100% 2px, 100% 1px; /* grows from the 50% centre outwards */
}
/* Image links, gallery frames and thumbs get no underline layers. */
#TemplateMain a:has(img),
#TemplateMain .frame a,
#TemplateMain .thumbtable a { background-image: none; }
/* Same centre-out underline on the breadcrumb / title links. */
#TemplateTitle a {
text-decoration: none;
background-image: linear-gradient(var(--d1-red), var(--d1-red));
background-repeat: no-repeat;
background-position: 50% 100%;
background-size: 0% 1.5px;
transition: background-size .22s ease, color .16s ease;
}
#TemplateTitle a:hover,
#TemplateTitle a:focus-visible {
color: var(--d1-red);
background-size: 100% 1.5px;
}
#TemplateMain a > img { transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
#TemplateMain a:hover > img {
transform: translateY(-2px);
box-shadow: 0 10px 22px rgba(0, 0, 0, .18);
}
#TemplateMain table:not(.thumbtable) tbody tr { transition: background-color .14s ease; }
#TemplateMain table:not(.thumbtable) tbody tr:hover > td { background: #fdf7f4; }
/* Content helper classes usable from wiki markup. */
.d1-button,
#TemplateMain a.button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: .72rem 1rem;
color: #fff;
background: var(--d1-red);
border-radius: 999px;
text-decoration: none;
font-weight: 700;
box-shadow: 0 8px 20px rgba(197, 2, 7, .24);
transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.d1-button:hover,
#TemplateMain a.button:hover {
color: #fff;
background: var(--d1-red-dark);
transform: translateY(-1px);
text-decoration: none;
}
.d1-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.d1-card {
padding: 1rem;
background: #fff;
border: 1px solid var(--d1-line);
border-radius: 4px;
box-shadow: var(--d1-shadow-band);
transition: transform .16s ease, box-shadow .16s ease;
}
.d1-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(24, 18, 15, .13); }
/* Section hero (right column, above the menu: profile/photo/contact blocks). */
#TemplateSectionHero { background: #fff; border-bottom: 1px solid var(--d1-line); }
.section-hero-inner { padding: clamp(.85rem, 1.8vw, 1.15rem); }
.section-hero-inner:empty { display: none; }
#TemplateSectionHero:has(.section-hero-inner:empty) { display: none; border: 0; }
#TemplateSectionHero img { max-width: 150px; height: auto; }
/* 08 - Right navigation ----------------------------------------------------
ONE indent scale: level 1 = 1rem, level 2 = 2rem, level 3 = 2.75rem.
Identical on hover, active, and inside .nav wrappers. */
#TemplateNav {
background: #fff;
padding: .55rem clamp(.9rem, 1.8vw, 1.25rem) clamp(.9rem, 1.8vw, 1.25rem);
color: var(--d1-ink);
}
#TemplateNav h2,
#TemplateNav h3 { margin-top: 1.9rem; margin-bottom: .6rem; }
#TemplateNav > :is(h1, h2, h3, h4):first-child { margin-top: .15rem; }
#TemplateNav h2 {
padding-bottom: .48rem;
color: var(--d1-charcoal);
font-size: 1.05rem;
line-height: 1.2;
border-bottom: 2px solid var(--d1-red);
}
#TemplateNav h3 {
color: #6b625f;
font-size: .82rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .09em;
}
#TemplateNav hr { margin: 1rem 0; }
/* Wiki sections write "----" right under each heading; the heading already
carries the red rule, so hide that immediate hr to avoid a double line. */
#TemplateNav h2 + hr,
#TemplateNav h3 + hr,
#TemplateNav h2 + .vspace + hr,
#TemplateNav h3 + .vspace + hr { display: none; }
#TemplateNav .vspace { margin-top: .45rem; }
#TemplateNav .vspace:first-child { display: none; }
#TemplateNav :is(h2, h3) + :is(ul, .nav),
#TemplateNav > ul:first-child,
#TemplateNav > .nav:first-child { margin-top: 0; padding-top: 0; }
#TemplateNav ul,
#TemplateNav .nav ul {
margin: 0;
padding: 0;
list-style: none;
}
#TemplateNav li,
#TemplateNav .nav li { margin: 0; }
#TemplateNav a,
#TemplateNav .selflink {
position: relative;
display: flex;
align-items: center;
gap: .4rem;
min-height: 42px;
padding: .55rem .72rem .55rem 1rem;
color: var(--d1-ink);
background: #fff;
border: 0;
border-bottom: 1px solid var(--d1-line);
border-radius: 0;
text-decoration: none;
overflow: hidden;
transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
/* Animated red indicator bar; never shifts the text. */
#TemplateNav a::before,
#TemplateNav .selflink::before {
content: "";
position: absolute;
left: 0;
top: .42rem;
bottom: .42rem;
width: 4px;
background: var(--d1-red);
transform: scaleY(0);
transform-origin: center;
transition: transform .22s ease;
}
#TemplateNav a:hover::before,
#TemplateNav .selflink::before { transform: scaleY(1); }
#TemplateNav a:hover {
color: var(--d1-red);
background: linear-gradient(90deg, #fbefed, #fff 78%);
text-decoration: none;
}
#TemplateNav .selflink,
#TemplateNav a.selflink,
#TemplateNav li.current > a,
#TemplateNav li.active > a,
#TemplateNav a[aria-current="page"] {
color: #fff;
background: linear-gradient(90deg, var(--d1-red) 0%, #920004 100%);
font-weight: 700;
text-decoration: none;
}
#TemplateNav .selflink::before { background: var(--d1-red-dark); }
#TemplateNav :is(.selflink, a.selflink, li.current > a, li.active > a, a[aria-current="page"]):hover {
color: #fff;
background: linear-gradient(90deg, #ad0005 0%, var(--d1-red-deep) 100%);
}
/* Indent scale (levels 2 and 3), stable across hover/active/nesting. */
#TemplateNav ul ul > li > a,
#TemplateNav ul ul > li > .selflink {
padding-left: 2rem;
min-height: 38px;
font-size: .93rem;
}
#TemplateNav ul ul ul > li > a,
#TemplateNav ul ul ul > li > .selflink {
padding-left: 2.75rem;
font-size: .88rem;
}
/* Disclosure arrow on items that contain a nested list, OR items manually
tagged when the submenu lives on the target page rather than in this menu.
Wiki markup options (all equivalent):
* %apply=item has-submenu% [[About/Zones | Zone Pages]] <- class on the li
* %has-submenu%[[About/Zones | Zone Pages]]%% <- span wrapper
The li form is preferred; both are supported below. */
#TemplateNav li:has(> ul) > a::after,
#TemplateNav li:has(> ul) > .selflink::after,
#TemplateNav li.has-submenu > a::after,
#TemplateNav li.has-submenu > .selflink::after,
#TemplateNav .has-submenu > a::after,
#TemplateNav .has-submenu > .selflink::after,
#TemplateNav a.has-submenu::after {
content: "\203A"; /* › */
display: inline-block;
margin-left: auto;
opacity: .6;
transition: transform .18s ease, opacity .18s ease;
}
#TemplateNav li:has(> ul) > a:hover::after,
#TemplateNav li.has-submenu > a:hover::after,
#TemplateNav .has-submenu > a:hover::after,
#TemplateNav a.has-submenu:hover::after { opacity: 1; transform: translateX(3px); }
/* Optional icon bullets: add class d1-nav-icons to a nav list in the wiki. */
#TemplateNav .d1-nav-icons a::before {
content: "\2022";
position: static;
flex: 0 0 1.2rem;
width: auto;
background: none;
transform: none;
color: var(--d1-red);
font-weight: 800;
}
/* Events calendar dropped into the right column.
Many PmWiki calendar recipes output a BARE
with no class, so the
block-link menu styling was turning << and >> into full-width rows. The
rule below neutralises link styling for ANY link inside ANY table in the
right nav -- genuine menu links there are never wrapped in a table -- which
keeps prev / month / next on a single line regardless of recipe markup. */
#TemplateNav table { width: 100% !important; table-layout: auto !important; }
#TemplateNav table caption {
caption-side: top !important;
white-space: nowrap !important;
text-align: center !important;
padding: .35rem .25rem !important;
font-weight: 700 !important;
}
#TemplateNav table a,
#TemplateNav :is(.calendar-nav, .pmcal-nav, .month-nav) a {
display: inline !important;
min-height: 0 !important;
width: auto !important;
padding: 0 .25rem !important;
margin: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: #741317 !important;
line-height: 1.2 !important;
white-space: nowrap !important;
overflow: visible !important;
}
#TemplateNav table a::before,
#TemplateNav table a::after {
content: none !important;
display: none !important;
}
#TemplateNav table :is(th, td) {
padding: .28rem .2rem !important;
font-size: .86rem !important;
text-align: center !important;
vertical-align: middle !important;
}
/* The header row (month + prev/next) stays on one line and spreads out. */
#TemplateNav table tr:first-child :is(th, td) {
white-space: nowrap !important;
padding: .3rem .15rem !important;
}
#TemplateNav table tr:first-child :is(th, td):first-child { text-align: left !important; }
#TemplateNav table tr:first-child :is(th, td):last-child { text-align: right !important; }
#TemplateNav :is(.calendar-nav, .pmcal-nav, .month-nav, .calendar-header, .pmcal-header, .month-header) {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: .4rem !important;
white-space: nowrap !important;
}
/* Today / event days keep a subtle highlight. */
#TemplateNav table td.today,
#TemplateNav table td.current { background: var(--d1-red-soft) !important; font-weight: 700 !important; }
/* Profile/contact blocks that remain inside the side nav. */
#TemplateNav :is(.d1-nav-profile, .d1-office-holder, .office-holder, .profile-card) {
margin: 0 0 .85rem;
padding: .75rem;
background: var(--d1-warm);
border: 1px solid var(--d1-line);
}
/* Safety net: never show a stray duplicated section menu inside the content. */
#TemplateMain #TemplateNav,
#TemplateMain .template-nav-toggle,
#TemplateMain .template-nav-toggle-label,
#TemplateMain .side-card[aria-label="Section navigation"] { display: none !important; }
/* Mobile section-menu toggle (checkbox pattern, no JS). Hidden on desktop. */
.template-nav-toggle,
.template-nav-toggle-label { display: none; }
/* 09 - Footer, copyright and fixed red tool bar --------------------------- */
#TemplateFooter { margin-top: 0; color: #fff; background: transparent; }
.footer-inner {
padding: clamp(1.2rem, 2.4vw, 1.8rem) clamp(1rem, 2.6vw, 1.9rem);
background: var(--d1-charcoal);
box-shadow: 0 10px 26px rgba(0, 0, 0, .18);
}
#TemplateFooter :is(h1, h2, h3, h4) {
color: #fff;
font-size: 1.05rem;
line-height: 1.2;
margin: 0 0 .6rem;
border: 0;
}
#TemplateFooter :is(p, li) { font-size: .92rem; line-height: 1.45; }
#TemplateFooter img { max-width: 150px; max-height: 110px; object-fit: contain; }
#TemplateFooter ul { margin: 0; padding-left: 1rem; }
#TemplateFooter a {
color: #fff;
text-decoration: none;
transition: color .16s ease, padding-left .16s ease;
}
#TemplateFooter a:hover { color: #ffd4d4; padding-left: .18rem; text-decoration: none; }
.d1-footer-grid {
display: grid;
grid-template-columns: minmax(180px, 1.35fr) repeat(4, minmax(130px, 1fr));
gap: clamp(1rem, 2vw, 1.5rem);
align-items: start;
}
.d1-footer-brand img { margin-bottom: .65rem; }
#TemplateBottom { margin: 0; color: #ddd; font-size: .82rem; background: transparent; }
.bottom-inner {
padding: .55rem clamp(1rem, 2.6vw, 1.9rem) 1.75rem;
color: #ddd;
background: var(--d1-charcoal-deep);
border-top: 1px solid rgba(255, 255, 255, .12);
}
#TemplateBottom :is(p, ul) { margin: 0; }
#TemplateBottom a { color: #fff; text-decoration: none; }
#TemplateBottom a:hover { color: #ffd4d4; }
/* Fixed red tool bar at the very bottom of the viewport. */
#TemplateBottomNav {
position: fixed;
z-index: 999;
left: 0;
right: 0;
bottom: 0;
min-height: 23px;
margin: 0;
padding: 2px .7rem 3px;
color: #dedede;
background: linear-gradient(180deg, #d10a0f 0%, var(--d1-red) 55%, #9d0004 100%);
border-top: 1px solid rgba(255, 255, 255, .16);
box-shadow: 0 -4px 10px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .18);
text-align: center;
text-transform: uppercase;
font-size: .72rem;
line-height: 1.35;
}
#TemplateBottomNav:empty { display: none; }
#TemplateBottomNav,
#TemplateBottomNav form,
#TemplateBottomNav .search,
#TemplateBottomNav .searchbox {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: .1rem .4rem;
}
#TemplateBottomNav ul,
#TemplateBottomNav > ul {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: .1rem .35rem;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
line-height: 1.2;
}
#TemplateBottomNav li {
display: inline-flex;
align-items: center;
margin: 0;
padding: 0;
list-style: none;
line-height: 1.2;
}
#TemplateBottomNav li::marker { content: ""; }
/* Hairline separators between list items (one link per list item). */
#TemplateBottomNav li + li::before {
content: "";
flex: 0 0 auto;
width: 1px;
height: .95em;
margin-right: .45rem;
background: rgba(255, 255, 255, .35);
}
#TemplateBottomNav li:has(form)::before,
#TemplateBottomNav li:has(input)::before { display: none; }
#TemplateBottomNav a,
#TemplateBottomNav .selflink {
display: inline-block;
color: #eee;
padding: .14rem .55rem;
margin: 0;
border-radius: 3px;
letter-spacing: .05em;
text-decoration: none;
line-height: 1.2;
transition: color .14s ease, background-color .14s ease;
}
#TemplateBottomNav a:hover,
#TemplateBottomNav a:focus-visible,
#TemplateBottomNav .selflink {
color: #fff;
background: rgba(0, 0, 0, .18);
text-decoration: none;
}
#TemplateBottomNav input,
#TemplateBottomNav button {
min-height: 18px;
height: 18px;
margin: 0 .15rem;
padding: 1px 5px;
color: #000;
background: #d9d9d9;
border: 1px solid #b6b6b6;
border-radius: 0;
font-size: 10px;
line-height: 1;
vertical-align: middle;
}
#TemplateBottomNav input:hover,
#TemplateBottomNav input:focus { background: #fff; }
#TemplateBottomNav input[type="text"],
#TemplateBottomNav input[type="search"] { width: min(42vw, 180px); }
/* 10 - PmWiki gallery/slideshow compatibility ------------------------------ */
img.thumbs {
border: 1px solid #dddddd;
margin: 2px;
padding: 4px;
vertical-align: middle;
background: #fff;
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
img.thumbs:hover,
table.thumbtable td.thumbtd div.img:hover { border-color: var(--d1-red); }
img.thumbs:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(24, 18, 15, .13); }
table.thumbtable { width: auto; border: 1px solid #cccccc; }
table.thumbtable img.thumbs { border: 0; padding: 0; }
table.thumbtable td.thumbtd { margin: 4px; padding: 2px; }
table.thumbtable td.thumbtd div.img { border: 1px solid #dddddd; text-align: center; }
.caption { font-size: .8em; overflow: hidden; padding: 0; line-height: 1.1em; }
img.current,
table.thumbtable td.thumbtd div.current { border-color: #ff0000; }
.clearfix { clear: both; }
/* --- Optional enhancements (opt-in via wiki classes) ---------------------
None of these apply unless you add the class in wiki markup, so they are
safe to ship and adopt page-by-page. */
/* (a) Lead paragraph: larger intro text. Add %class=d1-lead% to a paragraph. */
#TemplateMain .d1-lead {
font-size: clamp(1.08rem, 1.3vw, 1.22rem);
line-height: 1.5;
color: #3a3634;
}
/* (b) Pull note / callout box. (:div class="d1-note":) ... (:divend:)
Variants: d1-note d1-note-warn (amber), d1-note d1-note-info (blue-grey). */
#TemplateMain .d1-note {
margin: 1.5rem 0;
padding: 1rem 1.15rem 1rem 1.25rem;
background: var(--d1-red-soft);
border-left: .3rem solid var(--d1-red);
border-radius: 0 4px 4px 0;
}
#TemplateMain .d1-note > :first-child { margin-top: 0; }
#TemplateMain .d1-note > :last-child { margin-bottom: 0; }
#TemplateMain .d1-note-warn { background: #fff6e0; border-left-color: #e0a516; }
#TemplateMain .d1-note-info { background: #eef2f6; border-left-color: #5a7184; }
/* (c) Responsive 16:9 video/map wrapper. (:div class="d1-embed":)(:divend:) */
#TemplateMain .d1-embed {
position: relative;
aspect-ratio: 16 / 9;
margin: 1.5rem 0;
border-radius: .5rem;
overflow: hidden;
background: #000;
}
#TemplateMain .d1-embed :is(iframe, video, object, embed) {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
/* (d) Definition-style stat / label pairs, e.g. office contact rows.
(:div class="d1-datalist":) then use ; term : value lines. */
#TemplateMain .d1-datalist dl,
#TemplateMain dl.d1-datalist {
display: grid;
grid-template-columns: minmax(7rem, auto) 1fr;
gap: .3rem .9rem;
margin: 1.25rem 0;
}
#TemplateMain .d1-datalist dt { font-weight: 700; color: var(--d1-charcoal); }
#TemplateMain .d1-datalist dd { margin: 0; }
/* (e) Quiet section divider with a centred diamond, for long pages.
Use %class=d1-rule% on a horizontal rule, or (:div class="d1-rule":). */
#TemplateMain hr.d1-rule,
#TemplateMain .d1-rule {
border: 0;
height: 1.4rem;
margin: 1.75rem 0;
text-align: center;
}
#TemplateMain hr.d1-rule::after,
#TemplateMain .d1-rule::after {
content: "\25C6";
color: var(--d1-red);
font-size: .8rem;
opacity: .7;
}
/* (f) Image caption band under a framed image. %class=d1-figcap% on text. */
#TemplateMain .d1-figcap {
margin-top: -.4rem;
font-size: .85rem;
color: var(--d1-muted);
font-style: italic;
}
/* 11 - Animations ---------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
.content-card,
.side-card,
.footer-inner { animation: d1FadeRise .45s ease both; }
}
@keyframes d1FadeRise {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* 12 - Responsive ----------------------------------------------------------
The top menu now wraps at every width (no horizontal scrolling, so links
are never clipped off-screen).
900px: single column; section hero, then menu toggle, then content.
620px: edge-to-edge; search gets its own row ABOVE the bottom-bar links. */
@media (max-width: 900px) {
#TemplateAll { padding-inline: clamp(.55rem, 2vw, .85rem); }
.topbar-inner { flex-wrap: wrap; }
#TemplateTopContent { flex-basis: 100%; order: 3; }
/* --- Narrow-width copy-edge alignment (<=900px) -------------------------
The single-column layout aligns everything to --d1-copy-inset, matching
the header/crest, breadcrumb, and body copy. Base link padding at this
width is .82rem, so the ul is inset by the difference. */
#TemplateTopNav ul { padding-left: calc(var(--d1-copy-inset) - .82rem); }
.header-inner {
grid-template-columns: minmax(84px, 110px) minmax(0, 1fr);
min-height: 118px;
text-align: left;
}
#TemplateCrest img,
#TemplateCrest svg { max-height: 108px; }
#TemplateWrapper { display: flex; flex-direction: column; }
#TemplateSectionHero { order: 1; border-left: 0; }
.section-hero-inner { padding: clamp(.85rem, 1.8vw, 1.15rem) var(--d1-copy-inset); }
#TemplateNavToggle { position: absolute; left: -9999px; }
.template-nav-toggle-label {
order: 2;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: 42px;
padding: .65rem var(--d1-copy-inset);
color: #fff;
background: var(--d1-charcoal);
border-bottom: 1px solid rgba(255, 255, 255, .12);
font-family: var(--d1-display);
font-size: 1.05rem;
font-weight: 700;
letter-spacing: .025em;
cursor: pointer;
}
.template-nav-toggle-label::after { content: "\2630"; font-size: 1.18rem; line-height: 1; }
#TemplateNavToggle:checked + .template-nav-toggle-label::after { content: "\00D7"; font-size: 1.35rem; }
#TemplateNav {
order: 3;
display: none;
width: 100%;
border-left: 0;
border-bottom: 1px solid var(--d1-line);
padding: .35rem 0 .9rem; /* container flush; each element below carries the copy inset */
}
#TemplateNavToggle:checked + #TemplateNavToggleLabel + #TemplateNav { display: block; }
/* Section-menu link text sits on the copy edge; nested levels step from it. */
#TemplateNav a,
#TemplateNav .selflink { padding-left: var(--d1-copy-inset); }
#TemplateNav ul ul > li > a,
#TemplateNav ul ul > li > .selflink { padding-left: calc(var(--d1-copy-inset) + 1rem); }
#TemplateNav ul ul ul > li > a,
#TemplateNav ul ul ul > li > .selflink { padding-left: calc(var(--d1-copy-inset) + 1.75rem); }
/* Non-link content in the section menu aligns to the same edge. */
#TemplateNav :is(h1, h2, h3, h4, hr, p, table, .d1-nav-profile, .profile-card, .office-holder, .d1-office-holder) {
margin-inline: var(--d1-copy-inset);
}
#TemplateMainColumn { order: 4; width: 100%; border-right: 0; }
.d1-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
body { line-height: 1.52; padding-bottom: 5.4rem; }
#TemplateAll { padding-inline: 0; }
#TemplateTop { margin-top: 0; }
.topbar-inner { border-radius: 0; gap: .55rem .65rem; }
#TemplateTopContent,
#TemplateSocial,
#TemplateLogo { font-size: .82rem; }
#TemplateSocial img { max-height: 28px; }
#TemplateLogo img { max-height: 36px; }
.header-inner {
grid-template-columns: 82px minmax(0, 1fr);
min-height: 104px;
padding: .85rem clamp(.85rem, 2vw, 1rem) .85rem var(--d1-copy-inset);
}
#TemplateCrest img,
#TemplateCrest svg { max-height: 88px; }
#TemplateHeaderText :is(h1, h2) { font-size: clamp(1.45rem, 8vw, 2rem); }
#TemplateHeaderText p { font-size: .92rem; }
/* Top nav: tighter link sizing on phones (wrapping is already the default).
Link padding here is .62rem, so the ul inset compensates to keep the first
link's text on the copy edge. */
#TemplateTopNav ul { justify-content: flex-start; padding-left: calc(var(--d1-copy-inset) - .62rem); }
#TemplateTopNav li { flex: 0 0 auto; }
#TemplateTopNav a,
#TemplateTopNav .selflink {
white-space: normal;
min-height: 38px;
padding: .48rem .62rem;
font-size: .9rem;
}
/* Static submenus inside the wrapped mobile nav. */
#TemplateTopNav li ul {
position: static;
display: none;
width: 100%;
max-width: none;
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none;
background: var(--d1-red-dark);
}
#TemplateTopNav li:hover > ul,
#TemplateTopNav li:focus-within > ul { display: block; }
#TemplateMain { padding: .95rem clamp(.85rem, 2vw, 1rem) .95rem var(--d1-copy-inset); }
#TemplateTitle { padding: .65rem clamp(.85rem, 2vw, 1rem) .65rem var(--d1-copy-inset); }
/* #TemplateNav padding + link insets are handled in the <=900px block above. */
.footer-inner { padding: 1rem var(--d1-copy-inset); }
.bottom-inner { padding: .48rem var(--d1-copy-inset) 2rem; }
.d1-footer-grid { grid-template-columns: 1fr; }
table { display: block; overflow-x: auto; }
/* Bottom bar: search takes its own full row ABOVE the links. This works
whether the searchbox is its own list item, a direct child form, or
inline in the SAME list item as the links (the li becomes a wrapping
flex row and the form is ordered to the front). */
#TemplateBottomNav { min-height: 28px; padding: 4px .4rem 5px; }
#TemplateBottomNav li:has(form),
#TemplateBottomNav li:has(input) {
order: -1;
flex-wrap: wrap;
justify-content: center;
flex: 1 0 100%;
width: 100%;
}
#TemplateBottomNav form,
#TemplateBottomNav .search,
#TemplateBottomNav .searchbox {
order: -1;
flex: 1 0 100%;
width: 100%;
margin: 0 0 3px;
justify-content: center;
}
#TemplateBottomNav input[type="text"],
#TemplateBottomNav input[type="search"] { width: min(88vw, 310px); }
}
@media (max-width: 380px) {
#TemplateBottomNav { font-size: .68rem; }
#TemplateBottomNav a { padding-inline: .16rem; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: .001ms !important;
}
}
@media print {
body { color: #000; background: #fff; padding-bottom: 0 !important; }
body::before,
#TemplateTop,
#TemplateTopNav,
#TemplateAlert,
#TemplateHero,
#TemplateSectionHero,
#TemplateNav,
.template-nav-toggle-label,
#TemplateFooter,
#TemplateBottom,
#TemplateBottomNav,
.skip-link { display: none !important; }
#TemplateAll,
#TemplateWrapper,
.content-card { width: 100%; margin: 0; padding: 0; box-shadow: none; border: 0; }
#TemplateWrapper { display: block; }
#TemplateMain { padding: 0; }
a { color: #000; }
}