). */
.amc-button.center {
display: block;
width: -moz-fit-content;
width: fit-content;
margin-left: auto;
margin-right: auto;
}
/* Secondary/compact modifier — a much smaller button for low-priority
actions (e.g. the cart "Update quantities" sits below the primary
"Proceed to Checkout" CTA). */
.amc-button.small {
padding: 5px 12px;
font-size: 12px;
border-width: 1px;
}
/* Review-order "Place Order" — set the final CTA apart from the order
summary above it with a full-width rule top and bottom. */
.place_order_block {
border-top: 1px solid var(--amc-silver);
border-bottom: 1px solid var(--amc-silver);
padding: 20px 0;
margin: 20px 0;
}
/* Featured product cards (formerly #footer_ad_wrap / .ad-card —
renamed to avoid ad-blocker pattern matching, which was nuking
the elements from the DOM regardless of CSS). Layout mirrors the
original 318×106 strip: image on the left, title + CTA stacked on
the right. The whole card is one clickable . */
#featured_products {
display: flex;
gap: 2%;
align-items: stretch; /* all cards stretch to height of tallest */
margin-top: 0;
margin-bottom: 30px;
}
#featured_products .product-card {
flex: 1 1 0;
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px;
box-sizing: border-box;
background: var(--amc-smoke);
color: var(--amc-night) !important;
border: 1px solid var(--amc-silver);
text-decoration: none !important;
min-height: 110px;
}
#featured_products .product-card:hover,
#featured_products .product-card:focus {
background: var(--amc-peppermint);
color: var(--amc-smoke) !important;
border-color: var(--amc-peppermint);
}
#featured_products .product-card-img {
flex: 0 0 80px;
width: 80px;
height: 80px;
object-fit: cover;
}
#featured_products .product-card-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
#featured_products .product-card-title {
display: block;
font-size: 18px;
font-weight: bold;
line-height: 1.25;
margin-bottom: 8px;
}
#featured_products .product-card-cta {
display: block;
font-size: 13px;
line-height: 1.35;
}
/* "View All" button on the image-less VCE/HSC cards. currentColor inherits
the card text colour, so the outline flips with the card's hover state. */
#featured_products .product-card-btn {
display: inline-block;
align-self: flex-start;
margin-top: auto; /* pin to the card foot so equal-height cards balance */
padding: 6px 14px;
border: 1px solid currentColor;
font-size: 13px;
font-weight: bold;
line-height: 1.2;
}
/* Echo card: its 321x106 banner can't survive the 80x80 cover crop, so this
card stacks — full-width image (kept whole) above the title + tagline. */
#featured_products .product-card--banner {
flex-direction: column;
align-items: stretch;
}
#featured_products .product-card--banner .product-card-img {
flex: 0 0 auto;
width: 100%;
/* !important beats the ≤768px `img { max-width: 100% !important }` fluid
reset in mobile.retrofit.css, which otherwise lets it upscale full-width */
max-width: 321px !important; /* its native width — never upscale past it */
height: auto;
margin: 0 auto; /* centre once the card is wider than the image */
object-fit: contain;
}
@media screen and (max-width: 768px) {
#featured_products {
flex-direction: column;
gap: 10px;
}
/* Stacked: size each card to its content. Without this the row's
`flex: 1 1 0` becomes grow-by-height in the column, squeezing the
banner card shorter than its (non-shrinking) image, which then
overflows the card's bottom edge. */
#featured_products .product-card {
flex: 0 0 auto;
}
}
/* Featured Education Resources teaser cards (homepage green band). Dynamic —
the 3 most recent education kits (action: educationTeasers), rendered in
the /shop/education teaser format: cover image left, title + price +
Add-to-cart right. No card background — the Eucalyptus band shows through
("green throughout, not smoke" — 22.06.26 client feedback + mockup). */
#featured_products .edu-teaser {
flex: 1 1 0;
display: flex;
align-items: flex-start;
gap: 12px;
min-width: 0;
padding: 12px;
border: 1px solid var(--amc-night); /* bordered box on the green band, per mockup */
box-sizing: border-box;
background: transparent; /* green shows through — "green throughout" */
}
#featured_products .edu-teaser-img {
flex: 0 0 80px;
line-height: 0;
}
#featured_products .edu-teaser-img img {
width: 80px;
height: auto;
background: #FFF;
border: 1px solid #FFF;
box-sizing: border-box;
}
#featured_products .edu-teaser-body {
flex: 1;
min-width: 0;
}
#featured_products .edu-teaser-body h4 {
margin: 0 0 6px 0;
font-size: 15px;
line-height: 1.25;
}
#featured_products .edu-teaser-body h4 a {
color: var(--amc-night) !important;
text-decoration: none;
}
#featured_products .edu-teaser-body h4 a:hover {
text-decoration: underline;
}
#featured_products .edu-teaser-price {
font-weight: bold;
margin: 0 0 8px 0;
color: var(--amc-night);
}
/* Resonate Magazine index — uniform article cards across all types
(replaces the legacy 3-column News / Features / Blogs split). Each
card is a single clickable with: square image on top, type label
chip, title, then publish date + author at the bottom. Hover/focus
uses the same Peppermint Willow swap as .product-card. */
.article-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 20px;
margin: 0 0 20px 0;
}
.article-card {
display: flex;
flex-direction: column;
background: var(--amc-smoke);
border: 1px solid var(--amc-silver);
color: var(--amc-night) !important;
text-decoration: none !important;
transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.article-card:hover,
.article-card:focus {
background: var(--amc-peppermint);
border-color: var(--amc-peppermint);
color: var(--amc-smoke) !important;
}
.article-card-img {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
}
.article-card-body {
flex: 1;
display: flex;
flex-direction: column;
gap: 6px;
padding: 12px;
}
.article-card-type {
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.06em;
opacity: 0.7;
}
.article-card-title {
font-size: 15px;
font-weight: bold;
line-height: 1.3;
}
.article-card-meta {
font-size: 12px;
line-height: 1.4;
margin-top: auto; /* push to bottom edge regardless of title length */
opacity: 0.85;
}
/* Author then date, each on its own line with a gap between them. */
.article-card-author,
.article-card-date {
display: block;
}
.article-card-date {
margin-top: 8px;
}
/* Homepage Resonate teaser — GREEN REMOVED (22.06.26 client feedback +
mockup: the green band moves to the Education resources section below).
The teaser is now a plain band — Night headings, grey body, Peppermint
links are all brand/homepage-max defaults and read fine on the page bg —
so we just strip the homepage-max.css green fill + dark border. */
div#resonate_teaser {
background: transparent !important;
border: none !important;
padding: 0 !important;
}
/* Featured Education Resources band — receives the green that used to live
on the Resonate teaser. Eucalyptus (the LIGHTER green) on BOTH desktop
AND mobile, per "the green colour on the mobile version needs to be
changed to the lighter green". Heading + cards sit inside the band. */
#product_teasers {
background: var(--amc-eucalyptus);
padding: 20px;
margin-top: 30px; /* gap between Resonate articles and the green band */
margin-bottom: 30px;
box-sizing: border-box;
}
#product_teasers #browse_products {
margin-top: 0; /* heading flush at the top of the green band */
}
#featured_products {
margin-bottom: 0; /* band padding owns the bottom gap now */
}
/* Mobile home search: no overrides — the desktop Smoke band with
Silver borders and Peppermint input border applies to mobile too. */
/* Product highlight box.
Legacy main-max.css paints `table.product_highlight_box` cream
(#F7FCE0) with an olive-green border. The templates were converted
from tables to flex divs (image / detail / price columns) so they
reflow to a single column on mobile without horizontal scroll.
Brand replacement: Smoke band with Silver border, matching the
featured-product cards. */
div.product_highlight_box {
display: flex;
flex-wrap: wrap;
gap: 15px;
background: var(--amc-smoke);
border: 1px solid var(--amc-silver);
padding: 15px;
margin: 0 0 15px 0;
box-sizing: border-box;
}
div.product_highlight_box .product_image_cell {
flex: 0 0 110px;
}
div.product_highlight_box .product_image_cell img {
max-width: 100%;
height: auto;
}
div.product_highlight_box .product_detail_cell {
flex: 1 1 300px;
min-width: 0; /* allow long titles to wrap inside flex item */
}
div.product_highlight_box .product_detail_cell h2 {
width: auto !important;
}
div.product_highlight_box .product_detail_cell h3 {
margin: 0;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
}
div.product_highlight_box .product_detail_cell ul {
margin: 10px 0 0 0;
list-style: none;
}
div.product_highlight_box .product_detail_cell ul li {
list-style: none;
padding: 5px 2px;
}
/* Price cell sits as a narrow column to the right of the image+detail
row — keeps the price + Add to Cart prominent at the top of the box.
Vertical Silver rule visually separates it from the detail content.
The legacy hover-popup JS (productSuccess.js, workSuccess.js) positions
p.bubble.info_popup absolutely at top:113, left:-165 relative to the
`position:relative` wrapper inside this cell — depends on the cell
being a narrow right-hand column. */
div.product_highlight_box .product_price_cell {
flex: 0 0 140px;
text-align: center;
padding-left: 15px;
border-left: 1px solid var(--amc-silver);
}
div.product_highlight_box .product_price_cell p.product_price {
font-size: 16px;
font-weight: bold;
margin: 0 0 8px 0;
}
@media screen and (max-width: 768px) {
div.product_highlight_box {
flex-direction: column;
gap: 0; /* spacing is managed per-cell below so it's explicit */
}
div.product_highlight_box .product_image_cell {
flex: 0 0 auto;
align-self: center;
}
/* Detail cell: in column flex-direction, the desktop `flex: 1 1 300px`
sets a 300px MAIN-axis (= height) basis, leaving a fat empty band
below the content. Reset to content-sized. */
div.product_highlight_box .product_detail_cell {
flex: 0 0 auto;
}
/* Strip the trailing space below the detail list so the price block
sits right under it. Legacy main-max.css adds `p { margin:0 0 10px 0 }`
and `ul { margin:0 0 15px 0 }` — both fight us at the cell boundary. */
div.product_highlight_box .product_detail_cell ul,
div.product_highlight_box .product_detail_cell ul li:last-child,
div.product_highlight_box .product_detail_cell > *:last-child {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
div.product_highlight_box .product_price_cell {
flex: 0 0 auto;
text-align: center;
padding-left: 0;
border-left: none;
margin-top: 10px;
}
div.product_highlight_box .product_price_cell > div:first-child > *:first-child,
div.product_highlight_box .product_price_cell > *:first-child {
margin-top: 0 !important;
}
/* Shipping Info row: legacy inline styles float the mail icon left and
display the link as a block with `margin-left:25px; text-align:center`,
which was designed for the 140px right column. On a centred mobile
block that splits the icon to the far left and the text to the centre.
Force both inline so they sit next to each other under the centred
price column. */
div.product_highlight_box .product_price_cell p#calculate_shipping_dlg img {
float: none !important;
display: inline-block;
vertical-align: middle;
margin: 0 6px 0 0 !important;
}
div.product_highlight_box .product_price_cell p#calculate_shipping_dlg a {
display: inline !important;
margin-left: 0 !important;
text-align: inherit !important;
}
/* Mobile-only: the hover-driven info popup is unreachable without a
mouse, and the same availability_detail text already appears inline
in the detail cell's "Sales Availability" li (both render in the
same purchasable_online=false branch). Hide the icon and popup
outright. Desktop keeps the hover behaviour. */
div.product_highlight_box .product_price_cell .info_pop,
div.product_highlight_box .product_price_cell p.bubble.info_popup {
display: none !important;
}
}
/* Related products grid. Replaces the legacy markup pattern of 5x
items followed by a clear div.
The auto-fit grid flows ~5 columns on desktop and 2-3 on mobile
without any manual width math. */
.related_products {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
gap: 15px;
margin: 0 0 15px 0;
}
.related_product {
text-align: center;
font-size: 13px;
line-height: 1.35;
}
.related_product a {
text-decoration: none;
}
.related_product img {
max-width: 100%;
height: auto;
margin: 0 auto 6px auto;
display: block;
}
/* Add to Cart button — replace the legacy bg-cart-add.jpg green-gradient
sprite with a brand Peppermint button (matches the homepage donation
CTA pattern). Width auto so longer labels (e.g. "Download") fit. */
a.add_to_cart:link,
a.add_to_cart:visited {
display: inline-block;
width: auto;
height: auto;
padding: 4px 8px;
background: var(--amc-peppermint) !important;
color: #FFFFFF !important;
border: 2px solid var(--amc-peppermint);
border-radius: 3px;
font-weight: bold;
text-decoration: none;
font-size: 13px;
}
a.add_to_cart:hover,
a.add_to_cart:focus {
background: var(--amc-night) !important;
color: var(--amc-smoke) !important;
border-color: var(--amc-night);
}
/* Footer copy. Legacy main-max.css `div#footer p { font-size: 10px }`
has specificity 0,1,0,2, so the selector here matches that — otherwise
the rule only wins on the homepage (which removes main-max.css). */
div#footer p#footer-copy {
font-size: 11px;
line-height: 1.8;
}
/* ===== Work page (workSuccess, subworkSuccess) =====
Legacy main-max.css paints the hero `.work_details` block pale olive
(#EAF3C0) with an olive border, and the continuation panels
`.work_samples` / `.work_versions` near-white-yellow. Rebrand:
- .work_details: Smoke (was Eucalyptus — switched per 15.06.26
feedback; the green washed out the Peppermint composer-name link,
Smoke gives it cleaner contrast and keeps the block calm)
- .work_samples / .work_versions: Smoke continuation panels
- Silver borders unify all three
The borders match the existing geometry (full border on .work_details;
side+bottom only on the panels below) so they still read as a single
visual stack. */
div.work_details {
background: var(--amc-smoke) !important;
border: 1px solid var(--amc-silver) !important;
}
div.work_samples,
div.work_versions {
background: var(--amc-smoke) !important;
border-left-color: var(--amc-silver) !important;
border-right-color: var(--amc-silver) !important;
border-bottom-color: var(--amc-silver) !important;
}
/* Products-on-work table. Same Night thead / Smoke alt-row treatment as
the search-results table — drops the legacy bg-thead.gif gradient and
bg-tbody.gif body fill, both of which read olive against the rebrand. */
table.hover_products thead {
background: var(--amc-night) !important;
border: none !important;
}
table.hover_products thead th {
color: var(--amc-smoke) !important;
border: none !important;
}
table.hover_products tbody {
background: none !important;
}
table.hover_products tr.alt {
background: var(--amc-smoke);
}
table.hover_products tr.product_hover_row:hover {
background: var(--amc-smoke);
}
/* Kill the slide-down expansion on .product_hover_row. The legacy
common-max.js attaches hoverIntent that slideDowns .product_hover_content
(which holds extra publisher / shelf-no detail). The !important
beats both the inline style="display:none" and the jQuery-applied
inline display:block on hover. */
table.hover_products .product_hover_content {
display: none !important;
}
/* Info columns (Version, AMC Library, Price) get a slightly smaller
font. These are columns 3..second-to-last across all .hover_products
templates (Title is col 2; Action is last; templates have 5 or 6
total columns depending on whether Version is shown). */
table.hover_products th:not(:nth-child(1)):not(:nth-child(2)):not(:last-child),
table.hover_products td:not(:nth-child(1)):not(:nth-child(2)):not(:last-child) {
font-size: 12px;
}
/* Drop the inline column widths on every column except Format (col 1).
The templates have `
` (AMC Library) and 110px
(Price) and 70px (action). Let the table flow naturally instead. */
table.hover_products th:not(:nth-child(1)),
table.hover_products td:not(:nth-child(1)) {
width: auto !important;
}
/* Action column: contents centred horizontally; button on one line. */
table.hover_products td.result_action,
table.hover_products th:last-child,
table.hover_products td:last-child {
text-align: center;
}
table.hover_products td.result_action a.add_to_cart {
white-space: nowrap;
}
/* Mobile: drop the table layout, stack each row as a card. Matches the
.search_cards treatment elsewhere — the attributes
surface a "Field: value" hint before each cell. */
@media screen and (max-width: 768px) {
table.hover_products,
table.hover_products tbody,
table.hover_products tr,
table.hover_products td {
display: block;
width: auto !important;
}
table.hover_products thead {
display: none;
}
table.hover_products tr.product_hover_row {
margin: 0 0 12px 0;
padding: 10px 12px;
border: 1px solid var(--amc-silver);
border-radius: 4px;
background: #FFFFFF;
}
table.hover_products tr.alt {
background: var(--amc-smoke);
}
table.hover_products td {
padding: 3px 0;
border: none;
text-align: left !important;
}
table.hover_products td[data-label]::before {
content: attr(data-label) ": ";
font-weight: bold;
color: var(--amc-night);
}
/* Format cell becomes a small badge above the title */
table.hover_products td:nth-child(1) {
font-size: 11px;
text-transform: uppercase;
font-weight: bold;
padding-bottom: 4px;
}
/* Title cell as the card heading */
table.hover_products td:nth-child(2) {
font-size: 115%;
padding-bottom: 6px;
margin-bottom: 6px;
border-bottom: 1px solid var(--amc-silver);
}
table.hover_products td:empty,
table.hover_products td.result_action:has(> :only-child:empty),
table.hover_products td.result_action:not(:has(a)) {
display: none;
}
table.hover_products td.result_action {
text-align: left !important;
padding-top: 8px;
}
}
/* Opportunities listing, member view (resonate/opportunitiesSuccess.php).
Desktop: swap the legacy bg-thead.gif gradient header for the same Night
bar used on the search-results tables. */
#oppsTable thead {
background: var(--amc-night);
border: none;
}
#oppsTable thead th {
color: #F4F4F4;
border: none;
}
#oppsTable thead th img {
/* the sort24 glyph is dark; invert it to read on the Night bar */
filter: invert(1) brightness(1.4);
}
/* Mobile: stack each row as a card (mirrors the .search_cards treatment),
with the attributes surfacing a "Field: value" hint. */
@media screen and (max-width: 768px) {
#oppsTable,
#oppsTable tbody,
#oppsTable tr,
#oppsTable td {
display: block;
width: auto !important;
}
#oppsTable thead {
display: none;
}
#oppsTable tr {
margin: 0 0 12px 0;
padding: 10px 12px;
border: 1px solid var(--amc-silver);
background: #FFFFFF;
}
#oppsTable td {
padding: 3px 0;
border: none;
}
#oppsTable td[data-label]::before {
content: attr(data-label) ": ";
font-weight: bold;
color: var(--amc-night);
}
#oppsTable td:empty {
display: none;
}
/* Title cell becomes the card heading */
#oppsTable td.opps_title {
font-size: 115%;
padding-bottom: 6px;
margin-bottom: 4px;
border-bottom: 1px solid var(--amc-silver);
}
}
/* Image-product card (subworkSuccess, workOnesubwork, subworkOnesubwork).
Legacy main-max.css used `width:43%; float:left` cards with a 83px
floated `.product_image` and a `margin-left:87px` `.product_detail`.
The Add to Cart button no longer fit in the 83px image column, and
the float-based geometry was awkward.
New layout: a Smoke-tinted card, image on the left at a fixed thumb
width, all copy + the price/CTA action block on the flexible right.
Two cards per row on desktop, one per row below 600px. */
div.sub_section,
#work_reviews {
margin-top: 30px;
}
/* "Selected products featuring this work" heading — flush against the
card grid below (the toggle span #h3ProdDisplayControl is the unique
marker, no template change needed). */
h3:has(> #h3ProdDisplayControl) {
margin-bottom: 0;
}
/* "Display all products / Hide additional products" toggle bar in
subworkSuccess, workOnesubwork, subworkOnesubwork. The template
carries inline background-color:#EAF3C0 (old pale-olive); rebrand to
Smoke with a Silver border. !important is needed to beat the inline
style. */
p:has(> #pProdDisplayControl) {
background-color: var(--amc-smoke) !important;
border: 1px solid var(--amc-silver);
}
/* Global .alt banded-row override. Legacy main-max.css paints this
pale yellow-olive (#F1F5DC); rebrand all alternating rows (track
listings, work analysis tables, etc) to Smoke. Search-results and
hover_products tables already have their own Smoke rules above. */
.alt {
background: var(--amc-smoke);
}
/* Turn the parent .sub_section into a flex container only when it
actually contains image_product cards (via :has). Flex's default
`align-items: stretch` makes both cards match the taller one's height.
Non-card direct children (h3, clear div, scripts, #hideableProducts)
get flex-basis 100% so they each occupy their own row. */
div.sub_section:has(> div.image_product) {
display: flex;
flex-wrap: wrap;
column-gap: 16px;
row-gap: 16px;
}
div.sub_section:has(> div.image_product) > *:not(div.image_product) {
flex: 1 1 100%;
}
div.image_product {
display: flex;
flex-wrap: wrap;
gap: 12px;
flex: 1 1 calc(50% - 8px);
float: none !important;
width: auto !important;
margin: 0 !important;
padding: 12px;
background: var(--amc-smoke);
border: 1px solid var(--amc-silver);
box-sizing: border-box;
}
div.image_product div.product_image {
flex: 0 0 80px;
width: auto !important;
float: none !important;
margin: 0 !important;
}
div.image_product div.product_image img {
max-width: 100%;
height: auto;
margin: 0;
}
div.image_product div.product_detail {
flex: 1 1 180px;
margin-left: 0 !important;
min-width: 0;
}
div.image_product div.product_detail h4 {
margin: 0 0 6px 0;
}
div.image_product div.product_detail p {
margin: 0 0 4px 0;
}
/* Action row at the bottom of the card: price (left) + CTA (right).
Wraps onto two lines on narrow cards rather than overflowing. */
div.image_product .product_action {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin-top: 10px;
}
div.image_product .product_action p {
margin: 0;
}
div.image_product .product_action p.product_price,
div.image_product .product_action p.product_noprice {
font-size: 16px;
font-weight: bold;
text-align: left;
}
/* Reset legacy `a.add_to_cart { margin: 0 auto }` — inside a flex row,
`margin-left: auto` pushes the button to the far right of the action
container, leaving a visual gap after the price. */
div.image_product .product_action a.add_to_cart {
white-space: nowrap;
margin: 0 !important;
}
/* Availability note (replaces the legacy hover speech-bubble). Forced
inline + restyled — the JS in workSuccess-max.js still attaches its
mouseover/mouseout to the (now-removed) icon, but the !important
display/opacity here win regardless. */
div.image_product .product_action p.bubble.info_popup {
position: static !important;
display: block !important;
opacity: 1 !important;
width: 100% !important;
height: auto !important;
margin: 4px 0 0 0 !important;
padding: 8px 10px !important;
background: #FFFFFF !important;
border: 1px solid var(--amc-silver) !important;
font-size: 13px;
line-height: 1.4;
text-align: center;
}
@media screen and (max-width: 600px) {
div.image_product {
flex: 1 1 100%;
}
}
/* Shop listing cards (cdsSuccess.php / booksSuccess.php / educationSuccess.php).
Legacy main-max.css gave each `div.product` `float:left; width:31.5%;
height:160px` — long titles overflowed the fixed 160px, and floats
stair-stepped when row heights varied, so the third card's CTA could
spill past the next `
— semantically a heading + items list. */
@media screen and (max-width: 900px) {
dl.intro,
dl.intro.intro_first,
dl.intro.intro_last {
width: 47%;
margin: 0 3% 25px 0;
padding: 0;
}
dl.intro:nth-of-type(2n),
dl.intro.intro_last {
margin-right: 0;
}
}
@media screen and (max-width: 520px) {
/* Stack as full-width photo cards: a cover banner with the heading
captioned over a legibility scrim, then the links as a tappable list. */
dl.intro,
dl.intro.intro_first,
dl.intro.intro_last {
float: none;
width: 100%;
margin: 0 0 16px 0;
padding: 0;
text-align: left;
background: #FFF;
border: 1px solid var(--amc-silver);
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
/* The dt carries the topical photo as a background-image keyed by its id
(see main-max.css). Lay it out as a 130px cover banner with a bottom
gradient scrim so the white heading stays legible over any photo.
Non-background rules can sit at class specificity; the image + scrim,
size and position must beat the id selector, so they live in the
per-id rules below. */
dl.intro dt {
display: flex;
align-items: flex-end;
height: 130px;
margin: 0;
padding: 10px 12px;
box-sizing: border-box;
color: #FFF;
font-size: 18px;
line-height: 1.2;
text-align: left;
}
dl.intro dt br {
display: none;
}
dl.intro dt#intro_timeline,
dl.intro dt#intro_instrumental,
dl.intro dt#intro_chamber,
dl.intro dt#intro_choral {
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
dl.intro dt#intro_timeline {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.72)), url(/images/bg-timeline.jpg);
}
dl.intro dt#intro_instrumental {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.72)), url(/images/bg-instrumental.jpg);
}
dl.intro dt#intro_chamber {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.72)), url(/images/bg-chamber.jpg);
}
dl.intro dt#intro_choral {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.72)), url(/images/bg-coral.jpg);
}
/* Links become a tappable, separated list in the card body. */
dl.intro dd {
margin: 0;
padding: 0;
text-align: left;
}
dl.intro dd a {
display: block;
padding: 10px 12px;
border-top: 1px solid #EEE;
}
}
/* ===== Event page (eventSuccess) =====
Legacy main-max.css paints `.event_highlight` pale yellow-olive (#F7FCE0)
with an olive border (#C0D270), and `.event_detail strong` in the old
brown (#5C3F31) for field labels (Date, Venue, Tickets). Rebrand to
Smoke panel + Silver border (lighter, less hero-like than the Work-page
Eucalyptus accent), with Night for the strong field-label text. */
div.event_highlight {
background: var(--amc-smoke) !important;
border: 1px solid var(--amc-silver) !important;
}
div.event_detail strong {
color: var(--amc-night) !important;
}
/* Intro-note boxes (Artists list + guides decade-page openers).
These reuse legacy `p.alert` (the amber warning style) purely as an
informational lead-in, not a warning. Per 15.06.26 feedback ("change
the yellow box to smoke") they're tagged with an extra `.intro_note`
class so they can be calmed to a Smoke panel without touching the
genuine `p.alert` warnings on cart / contact / event / invoice etc. */
p.alert.intro_note {
background: var(--amc-smoke) !important;
border: 1px solid var(--amc-silver) !important;
color: var(--amc-night) !important;
}
/* ===== Desktop nav dropdowns — JS-free hover fallback =====
The dropdown reveal is driven by superfish JS, but the search module's
view.yml strips superfish + hoverIntent (apps/frontend/modules/search/
config/view.yml). main-max.css hides the submenus with
`div#nav ul li ul { display:none }` and the .sf-menu `:hover` rules only
move `top`, never restore `display` — so on /search (and the faceted
product/Kit search pages) hovering a top item revealed nothing, leaving
those pages with no way into the rest of the site (15.06.26 feedback,
"Find Music" + "Other bits").
Fix: a pure-CSS hover reveal, scoped to desktop widths only so it can't
interfere with the mobile accordion (mobile-nav.js destroys superfish
and slideToggles the menu below the breakpoint). Mirrors superfish's own
geometry (top:34px to clear the 34px Night bar). Harmless on pages that
DO load superfish — both just show the same submenu. */
@media screen and (min-width: 769px) {
div#nav ul li:hover > ul {
display: block !important;
visibility: visible !important; /* old superfish (search pages) sets
inline visibility:hidden via hideSuperfishUl — override it too,
else the submenu is display:block but invisible */
left: 0 !important;
top: 34px !important;
z-index: 9999 !important;
}
}
/* ===== Timeline year nav (guides/ pages) =====
Legacy main-max.css paints ul.timeline year links as a green gradient
(.shade_01..08, #abd50e -> near-white) which reads as a random colour
ramp against the rebrand. Flatten every shade to one Smoke chip with a
Silver border; hover/current use the Peppermint link accent. Specificity
0,1,1 (class + element-less) won't beat the legacy `.shade_01` alone, so
each is matched within ul.timeline to raise specificity, plus the bare
classes for the homepage where main-max is absent. (15.06.26: "remove
the gradient colours from the years".) */
ul.timeline li a,
ul.timeline li a:link,
ul.timeline li a:visited,
.shade_01, .shade_02, .shade_03, .shade_04,
.shade_05, .shade_06, .shade_07, .shade_08 {
background: var(--amc-smoke) !important;
color: var(--amc-night) !important;
border: 1px solid var(--amc-silver) !important;
box-sizing: border-box;
}
ul.timeline li a:hover,
ul.timeline li.current_timeline a {
background: var(--amc-peppermint) !important;
color: var(--amc-smoke) !important;
border-color: var(--amc-peppermint) !important;
}
/* Layout (all widths): the legacy `ul.timeline li a { width:7%; float:left }`
crushes "pre-1945" / "1945-1959" into 7%-wide boxes that wrap mid-label and
look broken — worse now that each chip has a border. Replace the float grid
with a wrapping flex row of auto-width chips sized to their own text. */
ul.timeline {
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
overflow: visible !important; /* legacy overflow:hidden clipped wrapped rows */
}
ul.timeline li {
display: block !important;
}
ul.timeline li a {
float: none !important;
width: auto !important;
padding: 8px 14px !important;
white-space: nowrap;
}
/* ===== Responsive embedded media =====
Membership / Artist representation / Donate / membership_general embed
fixed-width iframes (YouTube/Vimeo), , and a 600px-wide JS
slideshow that overflow the body column on mobile (15.06.26 — several
"resize for mobile" notes). Cap everything in the page body to the
column width. Scoped to div#content so layout chrome is untouched. */
div#content iframe,
div#content video,
div#content embed,
div#content object {
max-width: 100% !important;
}
/* ===== Login / cart top banner (#login_cart) — base layout =====
The collapse + bar layout lives in main-max.css, which the standalone
homepage does NOT load (`stylesheets: [homepage-max, -main-max]`). The
bar is now included on the homepage too (via the _login_cart.php partial
shared with _header.php), so replicate the base geometry here in
brand.2026.css (loaded on every page, homepage included). On inner pages
these duplicate main-max's identical values harmlessly; no !important so
the login_trigger JS's inline height animation still wins. */
div#login_cart {
background: var(--amc-smoke);
border-bottom: 1px solid var(--amc-silver);
overflow: auto;
height: auto;
position: relative;
}
div#login_cart div.inner {
position: relative;
overflow: hidden;
height: 10px;
padding: 15px 0 0 0;
}
p.user_settings {
margin: 0;
position: absolute;
bottom: 3px;
right: 0;
}
/* user_settings link icons (Login / View Cart). These .icon_* rules also
live in main-max.css, which the homepage doesn't load — replicate here
so the homepage login bar shows the same cart/account/email glyphs. */
.icon_cart {
padding: 0 10px 0 25px;
background: transparent url("/images/icon-cart.gif") no-repeat center left;
}
.icon_account {
padding: 0 10px 0 25px;
background: transparent url("/images/icon-account.gif") no-repeat center left;
}
.icon_email {
padding: 0 10px 0 25px;
background: transparent url("/images/icon-email.gif") no-repeat center left;
}
/* Login dropdown form — compact field + button sizing. The shared .amc-button
is built for big page CTAs (14/28 padding, 16px); shrink it for this small
panel, give the inputs real height + spacing, and keep placeholder text at
body size rather than the oversized default. */
div#login_cart form p {
margin: 0 0 10px 0;
}
div#login_cart form input[type="text"],
div#login_cart form input[type="password"] {
width: 100%;
max-width: 280px;
padding: 7px 10px;
font-size: 14px;
box-sizing: border-box;
border: 1px solid var(--amc-silver);
margin: 0;
}
/* Both banner CTAs (Login, inside the form; and Proceed to checkout, in the
cart column outside any form) share the compact header button size. */
div#login_cart .amc-button {
padding: 7px 18px;
font-size: 14px;
margin: 0;
}
/* ===== Login / cart top banner (#login_cart) — mobile =====
main-max.css collapses div#login_cart .inner to height:10px / overflow
hidden and absolutely positions p.user_settings at bottom:3px;right:0;
a.login_trigger JS (common.js / common-max.js) animates .inner between
10px and 245px to reveal the login form + cart. That collapse must hold
on mobile too — the bar should start CONTRACTED exactly like desktop.
The original cut-off (15.06.26 image1) was the user_settings links
wrapping to 2-3 lines and overflowing the short collapsed bar; the eNews
link (now removed from _header.php) was the bulk of that width. With it
gone "Login View Cart" fits one line, so we just keep the desktop
collapse and stop the bar wrapping. (Do NOT set .inner height:auto —
that leaves the whole panel expanded by default and fights the JS.) */
@media screen and (max-width: 768px) {
p.user_settings {
white-space: nowrap;
}
}
/* ===== Calendar grid (default/calendarSuccess) =====
Legacy main-max.css floats `dl.calendar_day { width:12%; padding:1% }`
with NO box-sizing, so the 1px cell borders push the seven 14%-effective
cells past 100% and the 7th (Saturday) wraps to the next line — the grid
reads as 6 columns and the Saturday header label is left orphaned over an
empty column (≲733px). The day-name header (ul#day_list) is a separate
row of full-word labels too wide for ~50px mobile columns.
Fix (15.06.26 follow-up): exactly 1/7 width with border-box so the
borders live inside the column and all seven always fit, on both the grid
cells and the header labels; and swap the day names to 3-letter
abbreviations on mobile (template carries .dow-long + .dow-short spans). */
/* Default (desktop): full day names, short hidden. */
ul#day_list li .dow-short {
display: none;
}
/* All viewports: seven day labels + seven grid cells at exactly 1/7 width
with border-box (borders/padding stay inside the column). #day_list is
flexed so the inline-block whitespace between s can't push Saturday
onto a second row. */
ul#day_list {
display: flex;
}
ul#day_list li,
dl.calendar_day {
box-sizing: border-box;
width: 14.2857%; /* 100% / 7 — all seven columns fit */
}
@media screen and (max-width: 768px) {
dl.calendar_day {
height: 92px;
padding: 4px;
font-size: 11px;
}
dl.calendar_day dt {
font-size: 12px;
margin-bottom: 2px;
}
ul#day_list li {
padding: 2px 1px;
font-size: 11px;
text-align: center;
overflow: hidden;
}
/* abbreviated labels: Sun / Mon / Tue … */
ul#day_list li .dow-long {
display: none;
}
ul#day_list li .dow-short {
display: inline;
}
}
/* ===== Site footer (22.06.26 redesign — _footer_content.php) =====
Night band, Smoke text. Single source of truth: the legacy div#footer
rules were removed from main-max.css + homepage-max.css so this is the
only footer styling, applied identically on inner pages and the homepage.
Hard (square) edges throughout per the brand (mockup showed rounded —
deliberately squared off). */
div#footer {
clear: both;
background: var(--amc-night);
color: var(--amc-smoke);
border-top: none;
padding: 40px 0;
margin: 0;
}
div#footer h3 {
color: var(--amc-smoke) !important; /* beat global h1-h6 Night rule */
font-size: 16px;
margin: 0 0 12px 0;
}
div#footer p {
color: var(--amc-smoke) !important; /* beat global body colour */
font-size: 13px;
line-height: 1.6;
}
div#footer a:link,
div#footer a:visited {
color: var(--amc-smoke) !important; /* light links on the dark band */
}
div#footer a:hover,
div#footer a:focus {
color: var(--amc-eucalyptus) !important; /* Eucalyptus hover — legible on Night */
}
/* Top row + nav share one 3-column flex layout so the Subscribe / Social /
Contact blocks line up with the nav buttons below. Flex (not grid) so the
partial final row of buttons centres: 7 buttons -> 3 / 3 / 1-centred. Full
rows fill 100% (basis sums to 100%) so the columns align between the two
rows; justify-content:center only shifts an incomplete row. */
.footer-top,
.footer-nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
}
.footer-top {
align-items: center; /* vertically centre the three top blocks in the row */
margin-bottom: 30px;
}
.footer-nav {
margin: 0 0 30px 0;
}
.footer-signup,
.footer-contact,
.footer-social,
.footer-nav a {
flex: 0 1 calc((100% - 32px) / 3); /* 3 columns + two 16px gaps */
min-width: 0;
box-sizing: border-box; /* fold padding + border into the 1/3 basis so 3 fit */
}
.footer-signup .amc-button {
margin: 0;
}
/* Footer eNews CTA uses the lighter green (Eucalyptus) with Night text for
contrast; hover deepens to Peppermint + white. Scoped + !important to
beat the base .amc-button (Peppermint/white) colour rules. */
/* Selectors include #footer so they outrank `div#footer a:link {color:Smoke
!important}` (an ID beats classes even with !important on both). */
div#footer .footer-signup .amc-button:link,
div#footer .footer-signup .amc-button:visited {
background: var(--amc-eucalyptus) !important;
color: #000000 !important;
border-color: var(--amc-eucalyptus) !important;
font-weight: 700 !important;
}
div#footer .footer-signup .amc-button:hover,
div#footer .footer-signup .amc-button:focus {
background: var(--amc-peppermint) !important;
color: #FFFFFF !important;
border-color: var(--amc-peppermint) !important;
}
.footer-social {
display: flex;
gap: 12px;
align-items: center;
justify-content: center; /* centre the icon chips within the middle column */
}
/* white square chips so the black social glyphs read on the Night band */
.footer-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background: var(--amc-smoke);
flex: 0 0 auto; /* keep chips at 44px; don't inherit the 1/3 column basis */
}
.footer-social img {
width: 22px;
height: auto;
display: block;
}
/* Nav buttons — outlined, square (hard edges) */
.footer-nav a:link,
.footer-nav a:visited {
display: block;
padding: 12px 16px;
border: 1px solid var(--amc-peppermint);
color: var(--amc-smoke) !important;
text-decoration: none !important;
text-align: center;
font-weight: bold;
}
.footer-nav a:hover,
.footer-nav a:focus {
background: var(--amc-peppermint);
color: #FFFFFF !important;
}
/* First Nations acknowledgement */
#footer-ack {
font-size: 13px !important;
line-height: 1.6;
margin: 0 0 20px 0;
}
/* Divider above the copyright row */
.footer-rule {
border: none;
border-top: 1px solid var(--amc-silver);
margin: 0 0 20px 0;
}
/* Bottom: copyright + partner logos */
div#footer-bottom {
clear: both;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
div#footer p#footer-copy {
font-size: 11px !important;
line-height: 1.8;
margin: 0;
}
/* the partner logos are dark/transparent — sit them on a white chip */
div#footer-logos {
display: flex;
align-items: center;
gap: 48px;
flex-shrink: 0;
background: var(--amc-smoke);
padding: 8px 24px;
}
div#footer-logos img {
display: block;
}
@media screen and (max-width: 768px) {
div#footer {
text-align: center;
}
/* stack the three top blocks vertically (column makes flex-basis the
vertical axis, so reset it to auto and use width for the cross axis) */
.footer-top {
flex-direction: column;
align-items: center;
}
.footer-signup,
.footer-contact,
.footer-social {
flex-basis: auto;
width: 100%;
text-align: center; /* the footer .inner is text-align:left; recentre */
}
.footer-nav a {
flex-basis: calc((100% - 16px) / 2);
}
div#footer-bottom {
flex-direction: column;
}
}
/* Resonate listing thumbnails (blogs / features / news / reviews — all use
div.blog_post). The cropper returns up to a 640px crop and the legacy
div.blog_post img sets no width, so images rendered at full size. Constrain
to a neat floated thumbnail; recolour the legacy #DDD border to Silver. */
div.blog_post img {
width: 140px;
height: auto;
border-color: var(--amc-silver);
}
@media screen and (max-width: 768px) {
div.blog_post img {
width: 96px;
}
}