/** Shopify CDN: Minification failed
Line 10550:3 Unexpected "="
Line 11115:3 Unexpected "="
**/
/*================ Custom CSS ================*/
/* Cart indicator dot - force black fill */
.cart-indicator {
fill: #000000 !important;
}
/* Book Your Portrait nav button — black pill by default, inverts to
white-with-black-outline on hover. Desktop + mobile. */
.book-portrait-button .navtext {
padding: 5px 12px !important;
border: 1px solid #000 !important;
border-radius: 30px !important;
color: #fff !important;
background-color: #000 !important;
transition: background 0.2s ease-in-out, color 0.2s ease-in-out !important;
}
/* Suppress the theme's underline slide animation on this button */
.book-portrait-button .navtext::before,
.book-portrait-button .navtext::after {
display: none !important;
}
/* Hover: white bg, black outline, black text — invert of default */
.no-touch .book-portrait-button .navtext:hover,
.book-portrait-button:hover .navtext {
padding: 5px 12px !important;
border: 1px solid #000 !important;
border-radius: 30px !important;
color: #000 !important;
background-color: #fff !important;
}
/* ====== Product Page ====== */
/* Form wrapper max-width.
This cap + `margin: 0 auto` is what actually centres the
gallery/variants block on desktop. At 700px the details column
was wide enough to push the right edge close to the wrapper edge
and the whole layout read as left-biased; 620px gives the column
enough breathing room on each side to visually centre.
If you ever change this, keep in mind it's the primary centring
mechanism — not the grid-template-columns rule further down. */
@media only screen and (min-width: 768px) {
.product-single__details .form__wrapper {
max-width: 620px !important;
margin: 0 auto !important;
}
}
/* Variant button size */
.radio__fieldset .radio__label {
font-size: calc(0.9rem * var(--adjust-button));
}
/* Variant button shadow */
.radio__fieldset .radio__label {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
/* Variant button selected + hover — fill black like V5 */
.radio__fieldset .radio__label:hover,
.radio__fieldset .radio__label:active,
.radio__fieldset .radio__label:focus,
.radio__fieldset .radio__input:checked ~ .radio__label {
color: var(--bg);
background-color: var(--text);
border-color: var(--text);
}
/* Unavailable/sold-out buttons — reduce opacity */
.radio__button.sold-out .radio__label,
.radio__button.unavailable .radio__label {
opacity: 0.4;
}
/* Variant option + quantity label font size */
.radio__legend__label {
font-size: calc(1.3rem * var(--adjust-label));
}
/* Quantity — hide +/- buttons, hide browser number spinners */
.selector-wrapper--qty .quantity__btn {
display: none;
}
.selector-wrapper--qty .quantity__input::-webkit-outer-spin-button,
.selector-wrapper--qty .quantity__input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.selector-wrapper--qty .quantity__input {
-moz-appearance: textfield;
text-align: center !important;
padding: 0 !important;
background-color: var(--bg) !important;
box-shadow: none !important;
border-color: var(--border) !important;
height: 40px !important;
width: 85px !important;
min-width: unset !important;
max-width: 85px !important;
}
/* Cart bar quantity — remove +/- buttons, arrows, center number, match grey boxes */
.cart-bar__quantity .quantity__btn {
display: none;
}
.cart-bar__quantity .quantity__input::-webkit-outer-spin-button,
.cart-bar__quantity .quantity__input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.cart-bar__quantity .quantity__input {
-moz-appearance: textfield;
text-align: center !important;
padding: 0 !important;
background-color: #ffffff !important;
box-shadow: none !important;
border: 1px solid #000000 !important;
border-radius: 999px !important;
outline: none !important;
width: 120px !important;
min-width: 120px !important;
max-width: 120px !important;
height: 44px !important;
font-family: Poppins, -apple-system, sans-serif !important;
font-size: calc(0.9rem * var(--adjust-button, 1)) !important;
}
/* Sticky cart-bar — pill height 44px to match the ATC button and
people-field pill. The theme's `.select-popout__toggle` uses
var(--form-top) padding which renders ~48px on this theme; force
44px inside the cart-bar only so other pages keep their defaults. */
.cart-bar .select-popout__toggle {
height: 44px !important;
min-height: 44px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
display: flex !important;
align-items: center !important;
}
/* Cart bar — labels at bottom: select first in HTML, label second → column order puts label at bottom */
.cart-bar__select__wrapper {
display: flex;
flex-direction: column;
}
.cart-bar__option-label {
margin-bottom: 0;
margin-top: 4px;
}
/* Cart bar quantity wrapper — label at bottom (label first in HTML + column-reverse) */
.cart-bar__quantity-wrapper {
display: flex;
flex-direction: column-reverse;
align-items: center;
}
.cart-bar__quantity-label {
display: block;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-alpha-50);
margin-top: 4px;
white-space: nowrap;
}
/* Cart bar — align all items to top so ATC button top is level with selects */
.cart-bar__form {
align-items: flex-start !important;
}
/* Cart bar — raise ATC button to match height of option boxes (adds space below = same total height as select+label) */
.cart-bar__submit {
padding-bottom: 19px;
}
/* Mobile — hide People quantity wrapper when Choose Options is shown */
@media only screen and (max-width: 767px) {
.has-multiple-options .cart-bar__quantity-wrapper {
display: none;
}
}
/* ============================================================
Cart drawer item card — v2 layout (2026-04 redesign)
Compact 4-row card: photo+prices | pills | swatch+qty | remove.
Replaces the theme's stacked image-column + content-column layout
for cart items rendered from snippets/cart-line-items.liquid.
============================================================ */
/* Kill the theme's flex column layout; v2 is row-based.
Horizontal padding keeps content from sitting flush to the drawer
edges (matches the wireframe's 16px 20px card padding). `!important`
on padding because theme's `.cart__items .cart__item { padding: 15px 0 }`
has equal specificity and can win on load order. */
.cart__item.cart-item-v2 {
display: block !important;
padding: 16px 20px !important;
align-items: initial !important;
flex-flow: initial !important;
}
/* The HTML `hidden` attribute should render `display: none`, but our
`.cart-item-v2__per-person { display: flex }` rule overrode that,
so the "/person" label was showing even when the row had no data.
Explicitly honor `[hidden]` on all V2 sub-elements. */
.cart-item-v2 [hidden] {
display: none !important;
}
/* === Row 1: photo (100px circular) + name/per-person | totals === */
.cart-item-v2__row1 {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
.cart-item-v2__photo {
flex-shrink: 0;
width: 100px;
height: 100px;
position: relative;
overflow: hidden;
/* Rounded square to match the current theme's image shape
(user note: "100px in size and shape to stay as is") */
border-radius: var(--radius-medium, 13px);
display: block;
/* Theme's `.cart__item__image { margin-right: var(--inner) }` adds
~20px right margin on top of our 12px row gap, pushing the title
block too far right. Zero it out so the gap alone controls spacing. */
margin-right: 0 !important;
}
.cart-item-v2__photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.cart-item-v2__main {
flex: 1;
min-width: 0;
padding-top: 2px; /* optical alignment with photo top */
}
.cart-item-v2__name {
font-weight: 600;
font-size: 14px;
margin: 0;
line-height: 1.25;
}
.cart-item-v2__name a {
color: inherit;
text-decoration: none;
}
.cart-item-v2__per-person {
display: flex;
align-items: baseline;
gap: 6px;
margin-top: 4px;
flex-wrap: wrap;
}
.cart-item-v2__per-person__old {
font-size: 12px;
color: #999;
text-decoration: line-through;
}
.cart-item-v2__per-person__new {
font-size: 13px;
font-weight: 600;
}
.cart-item-v2__per-person__label {
font-size: 10px;
color: #999;
margin-left: -3px; /* tighten gap between new price and /person */
}
/* Totals column (right side of Row 1).
Single-part structure: `.cart-item-v2__price-display` is the
visible V2 breakdown — totals + discount + per-person row.
Populated by JS in `custom.js → applyGroupDiscount`, which
computes the discount client-side (mirroring the Shopify
Function at checkout). See DISCOUNT-APP-HANDOFF.md. */
.cart-item-v2__totals {
text-align: right;
flex-shrink: 0;
padding-top: 2px;
min-width: 0;
}
/* Visible V2 breakdown — stacked right-aligned */
.cart-item-v2__price-display {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 1px;
}
.cart-item-v2__price-display p {
margin: 0;
line-height: 1.3;
text-decoration: none;
}
.cart-item-v2__total-old {
font-size: 13px;
color: #999;
text-decoration: line-through;
}
.cart-item-v2__discount {
font-size: 13px;
color: red; /* match "Applying group discount…" spinner colour */
}
.cart-item-v2__total-new {
font-weight: 600;
font-size: 15px;
color: inherit;
}
/* === Row 2: shortened variant pills (+ optional qty stepper inline) ===
When a cart item has NO backdrop swatch row (non-backdrop variants like
White / Concrete / Blurred / In Focus), the qty stepper renders
inline with the pills instead of on its own row — this removes the
empty vertical space the stepper-alone row would otherwise create. */
.cart-item-v2__pills-row {
margin-bottom: 12px;
}
.cart-item-v2__pills-row--with-qty {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.cart-item-v2__pills-row--with-qty .cart-item-v2__pills {
flex: 1;
min-width: 0;
margin-bottom: 0;
}
.cart-item-v2__pills {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.cart-item-v2__pill {
font-size: 12px;
padding: 3px 9px;
background: #f1f1f1;
border-radius: 99px;
color: #777;
line-height: 1.4;
}
/* ===== Separator line between cart items =====
1px line in light grey (#e5e5e5, matches wireframe card border).
`+` adjacent-sibling selector means the line only appears BETWEEN
items: no border above the first, none below the last.
Override theme's own `.cart__items .cart__item` border-top to keep
this rule the single source of truth. */
.cart-item-v2 {
border-top: none !important;
}
.cart-item-v2 + .cart-item-v2 {
border-top: 1px solid #e5e5e5 !important;
}
/* === Row 3: swatch/select (left) + qty stepper (right) === */
.cart-item-v2__swatch-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-top: 10px;
border-top: 1px solid #eee;
}
.cart-item-v2__swatch-left {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
min-width: 0;
}
.cart-item-v2__swatch-left:empty {
/* keep the qty stepper right-aligned even when swatch-left is empty
(non-backdrop products). */
flex: 1;
}
/* Override .backdrop-swatch-dot geometry for the v2 circular swatch */
.cart-item-v2__swatch-circle.backdrop-swatch-dot {
width: 16px !important;
height: 16px !important;
min-width: 16px !important;
border-radius: 50% !important;
}
.cart-item-v2__swatch-name {
font-size: 12px;
color: #777;
}
.cart-item-v2__swatch-action {
font-size: 11px !important;
cursor: pointer;
text-decoration: underline;
background: none;
border: none;
padding: 0 !important;
line-height: 1;
}
.cart-item-v2__swatch-action--change {
color: #2d5fa1 !important;
}
.cart-item-v2__swatch-action--remove {
color: #777 !important;
}
/* SELECT BACKDROP COLOUR — compact version for Row 3 */
.cart-item-v2__select-btn.backdrop-select-button {
width: auto !important;
padding: 7px 18px !important;
font-size: 13px !important;
letter-spacing: 0.06em !important;
white-space: nowrap !important;
line-height: 1.2 !important;
}
/* Quantity stepper — use chained classes (.foo.bar) to beat theme's
(0,1,0) rules with (0,2,0) specificity. The theme's
.cart__item__quantity has `position: relative; width: 80px` with
buttons `position: absolute; left/right: 0` overlaying the input,
which hides the qty value visually. V2 forces a proper 3-box layout. */
.cart-item-v2__qty.cart__item__quantity {
position: static;
width: auto;
display: flex;
align-items: center;
flex-shrink: 0;
gap: 0;
}
.cart-item-v2__qty.cart__item__quantity button {
position: static;
transform: none;
width: 28px;
height: 28px;
border: 1px solid #ddd;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
color: #999;
cursor: pointer;
padding: 0;
box-shadow: none;
font-size: 0;
line-height: 1;
}
.cart-item-v2__qty-btn--minus { border-radius: 4px 0 0 4px; }
.cart-item-v2__qty-btn--plus { border-radius: 0 4px 4px 0; }
.cart-item-v2__qty.cart__item__quantity button .icon {
width: 10px;
height: 10px;
}
.cart-item-v2__qty-val.cart__item__quantity-field {
width: 32px;
height: 28px;
border: 1px solid #ddd;
border-left: none;
border-right: none;
border-radius: 0;
text-align: center;
font-size: 13px;
font-weight: 600;
appearance: textfield;
-moz-appearance: textfield;
padding: 0;
background: #fff;
color: #000;
display: block; /* theme sets display:flex on which hides value */
line-height: 26px;
}
.cart-item-v2__qty-val.cart__item__quantity-field::-webkit-outer-spin-button,
.cart-item-v2__qty-val.cart__item__quantity-field::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* === Row 4: remove whole item === */
.cart-item-v2__remove {
display: flex;
justify-content: flex-end;
margin-top: 6px;
padding-right: 7px; /* align "Remove item" under the centre of the qty stepper */
}
.cart-item-v2__remove-link {
font-size: 11px;
color: #999;
text-decoration: underline;
opacity: 0.7;
}
.cart-item-v2__remove-link:hover {
opacity: 1;
color: #333;
}
.cart-item-v2__remove-link span {
text-decoration: underline; /* in case the theme unsets it on */
}
/* ============================================================
Cart drawer footer — V2 redesign (2026-04)
Summary row (people count + savings + total) above the terms +
checkout button. See wireframe: Checkout-Button-Wireframes.html
(Option A + Option D).
============================================================ */
/* Summary row — always visible. No top border (the cart foot already
has a visible divider above it). */
.cart__summary-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.cart__summary-people {
font-size: 12px;
color: #888;
}
.cart__summary-right {
display: flex;
align-items: center;
gap: 8px;
}
.cart__summary-savings {
font-size: 12px;
color: red; /* same red as the line-item discount for consistency */
}
.cart__summary-total {
font-size: 16px;
font-weight: 600;
color: #000;
}
/* V2 checkout button — pill, title case, centred label.
Price is always shown in the summary row above the button, so the
inline price inside the button is permanently hidden. */
.cart__checkout.cart__checkout--v2 {
display: flex !important;
align-items: center;
justify-content: center !important;
gap: 10px;
width: 100%;
background: #1a1a1a !important;
color: #fff !important;
border: none !important;
border-radius: 99px !important;
padding: 14px 20px !important;
text-transform: none !important; /* override theme's uppercase */
letter-spacing: 0.3px !important;
font-size: 14px !important;
font-weight: 500 !important;
line-height: 1.2 !important;
cursor: pointer;
}
.cart__checkout.cart__checkout--v2 .cart__checkout__label {
flex: 0 1 auto;
}
/* Hide the inline price inside the checkout button — summary row
above the button is the single source of truth for price display. */
.cart__checkout.cart__checkout--v2 .cart__total__money,
.cart__checkout.cart__checkout--v2 .cart__subtotal {
display: none !important;
}
/* Tighter spacing between terms and button in V2 */
.cart__foot-inner .cart__buttons-wrapper {
padding-top: 4px;
}
/* ====== Cart drawer — terms checkbox + label, +1px bump ======
Theme default: checkbox 13x13, label font calc(0.815rem). +1px. */
.cart-drawer .cart__acceptance__input,
.cart__acceptance__input {
width: 14px !important;
height: 14px !important;
}
.cart-drawer .cart__acceptance__label,
.cart__acceptance__label {
font-size: calc(0.88rem * var(--adjust-body)) !important;
}
/* ====== Booking page — "Number of people" label: don't shrink on mobile ======
Theme rule at theme.css L15940 shrinks `.select__fieldset .select__label`
from 1.3rem → 0.95rem at ≤767px. That's fine for short labels but
"Number of people" looks disproportionately small next to the large
input field on phones. Override only the quantity wrapper so other
variant labels (Location, Backdrop, etc.) keep their mobile sizing. */
@media only screen and (max-width: 767px) {
.select__fieldset[data-quantity-wrapper] .select__label,
#Quantity-Form-product-template .select__label {
font-size: calc(1.15rem * var(--adjust-label));
}
}
/* ====== V2 cart card — mobile adjustments ======
- Thumb from 100px → 60px to save horizontal space in the drawer
- Per-person row: prevent wrap so "/person" stays on the same line
as the price (was falling to a second line on narrow viewports) */
@media only screen and (max-width: 767px) {
.cart-item-v2__photo {
width: 60px;
height: 60px;
}
/* Chained selector (.foo.bar) to match theme's
`.body--rounded-corners .cart__item__image { border-radius: var(--radius) }`
specificity (0,2,0). Our rule loads later in custom.css so it
wins on equal-specificity tie. Without the chain, theme's 28px
radius was overriding mine silently. */
.cart__item__image.cart-item-v2__photo {
border-radius: 20px;
}
.cart-item-v2__per-person {
flex-wrap: nowrap;
gap: 4px;
}
/* SELECT BACKDROP COLOUR — tighter horizontal padding on mobile */
.cart-item-v2__select-btn.backdrop-select-button {
padding: 7px 10px !important;
}
}
/* ====== Cart Discount Styling ====== */
/* Unit price — smaller, muted */
.cart__item__single-price {
font-size: calc(0.78rem * var(--adjust-body));
color: var(--text-alpha-50);
margin: 2px 0 0;
}
/* Line price — flex column, right-aligned, order: struck → discount → final */
.cart__item__price {
display: flex !important;
flex-direction: column !important;
align-items: flex-end !important;
gap: 1px;
}
/* Discount badge (cart-level code discount) */
.cart__discount {
background-color: var(--text);
color: var(--bg);
padding: 3px 8px;
font-size: calc(0.72rem * var(--adjust-body));
display: inline-flex;
align-items: center;
gap: 4px;
}
/* Cart-level discount list */
.cart__discounts {
margin-top: 8px;
}
/* Subtotal after discount — highlight row */
.cart__subtotal {
font-weight: var(--FONT-WEIGHT-BODY-BOLD);
}
/* ====== Banner Image — full-image text background overlay ====== */
/* Handled via section-banner-image.liquid: sets background on .banner-image__text-container */
/* Ensure text inside remains readable and centered */
.banner-image__text-container:has(.text-background) .banner-image__text-wrapper {
background: transparent;
}
/* ====== Cart checkout button layout ====== */
/* Remove the theme's `::before` bullet separator before the price span */
.cart-drawer .cart__total__money::before {
content: none !important;
}
/* Centre + wrap the checkout button so a multi-line label/price fits */
.cart__checkout {
justify-content: center !important;
flex-wrap: wrap !important;
text-align: center !important;
}
/* ====== Page Gallery (HTML5 lightbox) ====== */
.page-gallery__grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 4px;
max-width: 1200px;
margin: 0 auto;
}
.page-gallery__item {
flex: 0 0 calc(33.333% - 2.667px);
position: relative;
overflow: hidden;
cursor: pointer;
aspect-ratio: 1;
display: block;
background: none;
border: none;
padding: 0;
border-radius: 28px;
}
.page-gallery__item--video { cursor: default; }
.page-gallery__item--video video,
.page-gallery__item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
@media (max-width: 767px) {
.page-gallery__item { flex: 0 0 calc(50% - 2px); }
}
.page-gallery-dialog {
padding: 0;
background: rgba(255,255,255,0.97);
border: none;
max-width: 100vw;
max-height: 100vh;
width: 100%;
height: 100%;
display: none;
align-items: center;
justify-content: center;
}
.page-gallery-dialog[open] { display: flex; }
.page-gallery-dialog::backdrop { background: rgba(255,255,255,0.97); }
.page-gallery-dialog__inner {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.page-gallery-dialog__img {
max-width: 90vw;
max-height: 90vh;
object-fit: contain;
display: block;
}
.page-gallery-dialog__close,
.page-gallery-dialog__prev,
.page-gallery-dialog__next {
position: fixed;
background: transparent;
border: none;
padding: 0;
color: #000;
width: 40px;
height: 40px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
outline: none;
}
.page-gallery-dialog__close { top: 20px; right: 20px; }
.page-gallery-dialog__prev { top: 50%; left: 20px; transform: translateY(-50%); }
.page-gallery-dialog__next { top: 50%; right: 20px; transform: translateY(-50%); }
/* Smooth fade for image swap */
.page-gallery-dialog__img {
transition: opacity 0.15s ease;
}
/* ====== HOME PAGE — Rounded Corners ====== */
/* Raise standard --radius from 8px to 28px for all rounded-corner elements */
.body--rounded-corners {
--radius: 28px;
--radius-large: 28px;
}
/* Marquee — remove the top-corner curve the theme applies to whichever section follows
a card-scrolling-effect slideshow. Theme rule sets border-radius on + .shopify-section;
we target the marquee by its own class which is always present. */
.body--rounded-corners .main-content > .shopify-section:has(.card-scrolling-effect) + .shopify-section--marquee,
.shopify-section--marquee {
border-radius: 0 !important;
}
/* "Expert Business Portraits" section — full-section curved appearance with #ecebe7 background */
[id$="__section_image_with_text_Uq6CM9"] .image-with-text__items {
border-radius: 28px;
overflow: hidden;
}
/* Toronto banner image — 28px rounded corners */
[id$="__section_banner_image_fi8kz7"] .banner-image {
border-radius: 28px;
overflow: hidden;
}
/* "Browse Portfolio" banner image — 28px rounded corners */
[id$="__section_banner_image_hVx3AJ"] .banner-image {
border-radius: 28px;
overflow: hidden;
}
/* ====== ABOUT PAGE — Guest Speaking section curved corners ====== */
[id$="__section_custom_html_pPA9JY"] .about-speaking {
border-radius: 28px;
overflow: hidden;
}
/* ====== Play button — larger thin icon, remove theme's outer circle ====== */
.icon-play {
width: 80px !important;
height: 80px !important;
box-shadow: none !important;
border-radius: 0 !important;
}
/* ====== SERVICES PAGE — bottom banner curved corners ====== */
[id$="__section_banner_image_ChfTUm"] .banner-image {
border-radius: 28px;
overflow: hidden;
}
/* ====== ENTERPRISE PAGE ====== */
/* Annual/Quarterly toggle — remove pill radius so bottom border stays straight */
.bp-toggle-btn {
border-radius: 0 !important;
}
/* "Choose Your Plan" pricing section — 28px curved corners */
[id$="__section_custom_html_LLk4CC"] .bp-pricing-section {
border-radius: 28px;
overflow: hidden;
}
/* Pricing cards (Essential, Growth, Enterprise) — 28px curves */
.bp-pricing-card {
border-radius: 28px;
}
/* Account Credit — pill shaped */
.bp-account-credit {
border-radius: 30px !important;
}
/* Request a Quote / all enterprise CTA buttons — pill shaped */
.bp-btn-primary,
.bp-btn-secondary {
border-radius: 30px !important;
}
/* "Not Sure Which Plan" + "Try Our 90-Day Pilot" boxes — 28px curves */
.bp-cta-box {
border-radius: 28px;
}
/* Enterprise photo grid background */
[id$="__photo_grid_lightbox_74Ajkz"] .photo-grid__grid {
background-color: #f7f7f7;
padding: 5px;
}
/* "Ready to Get Started?" bottom banner — 28px curved corners */
[id$="__section_banner_image_pKKWHD"] .banner-image {
border-radius: 28px;
overflow: hidden;
}
/* ====== FAQ PAGE ====== */
/* "Have Additional Questions?" bottom banner — 28px curved corners */
[id$="__section_banner_image_TJNCRU"] .banner-image {
border-radius: 28px;
overflow: hidden;
}
/* ====== Shared bottom banner (corporate-headshots / corporate-event-gallery) ====== */
[id$="__section_banner_image_TbPDMf"] .banner-image {
border-radius: 28px;
overflow: hidden;
}
/* ====== BOOK YOUR PORTRAIT PAGE ====== */
/* Quantity input — grey border, 40px height, 85px wide, square (not pill) */
.selector-wrapper--qty .quantity__input {
border-color: #c2c2c2 !important;
height: 40px !important;
width: 85px !important;
min-width: unset !important;
max-width: 85px !important;
border-radius: 0 !important;
}
.selector-wrapper--qty .quantity__button {
border-color: #c2c2c2 !important;
height: 40px !important;
border-radius: 0 !important;
}
/* Tighten the space Shopify reserves for the Shop Pay Installments
widget (empty on our store since Installments aren't enabled). Theme
sets margin-bottom: var(--grid-gutter) = 20px; trimming to 9px lifts
the Add-to-Cart button so it sits higher on the product page. */
@media only screen and (min-width: 768px) {
.shop-pay-terms {
margin-bottom: 9px !important;
}
}
/* Product page gallery — cap WIDTH at 570px on desktop. */
@media only screen and (min-width: 768px) {
.product-gallery {
max-width: 570px;
}
/* Tighten the grid so the two columns hug their caps instead of
expanding to fill half of the wrapper each.
Theme default is `repeat(2, minmax(0, 1fr))` overridden by
--standard to `calc(50% - gutter/2) calc(50% - gutter/2)`
(template-product.css L140 & L167). Those 50% columns are
~690px wide on a 1440 site-width, so even though the gallery
caps at 570px and form-wrapper caps at 620px, each column had
~70-120px of dead space inside it — and all of it collected
between the gallery and the variants as a visible gap.
Fixing the tracks to the exact caps (570px + 620px = 1190px
content, + 60px gutter = 1250px) leaves 70px of free space in
the 1320px-wide wrapper content area. `justify-content: center`
distributes that 70px equally, so ~35px sits on each side of
the two-column block. The columns themselves sit flush against
the gutter, eliminating the photo-to-variants gap.
Chained with --carousel for (0,2,0) specificity — template-
product.css loads after custom.css, so a plain --standard
selector ties and loses on load order. */
.product-single__wrapper--carousel.product-single__wrapper--standard,
.product-single__wrapper--standard.product-single__wrapper--carousel {
grid-template-columns: 570px 620px;
justify-content: center;
}
}
/* Add to cart button — blue, shadow, 200 x 45px
To remove: delete the rules below up to the next comment */
.product-single__details .product__submit__add {
background-color: #0b57d0 !important;
border-color: #0b57d0 !important;
box-shadow: none !important;
height: 45px !important;
min-height: 45px !important;
}
/* Hover — keep same blue, no shadow, no colour darkening */
.product-single__details .product__submit__add:hover {
background-color: #0b57d0 !important;
border-color: #0b57d0 !important;
box-shadow: none !important;
}
@media only screen and (min-width: 768px) {
.product-single__details .product__submit__add {
width: 200px !important;
}
}
/* Remove pre-discount price shown on ATC button */
.product__submit__add .product__price--regular {
display: none !important;
}
/* ============================================================================
Product page — Group Discount preview
Wired up by custom.js → applyProductPagePreview when the people field has
qty ≥ 2 and a tier matches. Original price gets struck and greyed; the
discounted price renders inline next to it in the brand ink color.
The discounted span shares `.product__price--regular` (and the optional
`--bold` modifier) so the font, weight, and size match the original
price exactly — only color + line-through change between the two states.
============================================================================ */
.product__price [data-product-price].product__price--struck {
text-decoration: line-through !important;
color: #888 !important;
margin-right: 12px;
/* Don't override font-weight/size — let .product__price--regular keep them */
}
.product__price [data-product-discounted-price] {
color: #0b0b0b !important;
/* Font properties are inherited from the .product__price--regular class
applied on the same element (see snippets/product.liquid) */
}
.product__price [data-product-discounted-price][hidden] {
display: none !important;
}
/* "Experience the Difference" image section — 28px curves */
[id$="__section_image_with_text_LVg4pX"] .image-with-text__items {
border-radius: 28px;
overflow: hidden;
}
/* Sticky add to cart — center product title / price block */
.cart-bar__info {
align-items: center !important;
text-align: center !important;
}
/* Sticky add to cart — center the option selector dropdowns (location, backdrop, etc.) */
.cart-bar__options {
justify-content: center !important;
}
.cart-bar__options .cart-bar__select__wrapper {
text-align: center !important;
}
.cart-bar__options .select-popout__toggle {
justify-content: center !important;
}
/* Sticky add to cart — blue ATC button */
.cart-bar .product__submit__add {
background-color: #0b57d0 !important;
border-color: #0b57d0 !important;
}
/* ====== DRAWER CART ====== */
/* Price summary — right-aligned, 14px, stacked vertically: original → discount → total */
.cart__price-summary {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
font-size: 14px;
text-align: right;
padding: 8px 0 4px;
}
.cart__price-original {
opacity: 0.5;
text-decoration: line-through;
}
.cart__price-discount {
color: #c00;
}
.cart__price-total {
font-weight: 600;
}
/* "Taxes calculated at checkout" — centred */
.cart__text {
text-align: center !important;
}
/* Hide the theme's "Items" label injected into the cart footer */
.cart__foot-inner > span {
display: none !important;
}
/* (Removed) `[data-cart-price-holder] { display: none }` — this
wrapper was hidden back when the cart was per-item-totals-only,
but the V2 summary row ("X people | Saving $Y | $Total") was
later built INSIDE this wrapper. With the hide rule active the
summary row never showed (was masked by AIOD's injected styles
until AIOD was uninstalled). The legacy elements inside —
.cart__discounts, .cart__price-summary, .cart__total — are
each already hidden by their own inline `style="display:none"`
or `hidden` attribute, so removing this rule does not reveal
any unwanted legacy markup. */
/* ====== WHAT TO EXPECT PAGE ====== */
/* #fafafa sections — 28px corner curves */
.wte-jump-nav,
.wte-backdrops,
.wte-preparation,
.wte-lighting,
.wte-preview,
.wte-delivery,
.wte-retouching,
.wte-addons {
border-radius: 28px;
overflow: hidden;
}
/* Jump to Section buttons — pill, 44px tall (was 46px).
Covers both .wte-jump-nav (What-to-Expect + Corporate Headshots
gallery) and .faq-jump-nav (FAQ page). Inner JSON styles use
padding: 10px 16px which gives 46px; 9px top/bottom trims to 44px. */
.wte-jump-nav a,
.faq-jump-nav a {
border-radius: 30px !important;
padding: 9px 16px !important;
}
/* Flexible Location Options — two cards, 28px */
.wte-locations .wte-col-card {
border-radius: 28px;
}
/* 100+ Backdrop Choices — four cards, 28px */
.wte-backdrops .wte-col-card {
border-radius: 28px;
}
/* Explore Our Backdrop Colours button — match the theme's medium
button dimensions (padding 12px 20px, font-size 1rem). Pill shape
stays as it was. */
.wte-backdrops .wte-inline-btn {
border-radius: 30px !important;
padding: 12px 20px !important;
font-size: 1rem !important;
}
/* Hero images (outdoor, lighting, preview, retouching) — 28px curves */
.wte-outdoor .wte-container > img,
.wte-lighting .wte-container > img,
.wte-preview .wte-container > img,
.wte-retouching .wte-container > img {
border-radius: 28px;
display: block;
width: 100%;
margin: 30px 0;
}
/* Group Discounts — pill badges */
.wte-group .wte-discount-badge {
border-radius: 30px !important;
}
/* Bottom CTA buttons — pill */
.wte-cta-btn {
border-radius: 30px !important;
}
/* ====== LINKEDIN HEADSHOTS PAGE ====== */
/* Photo grid — already covered by the enterprise rule above:
[id$="__photo_grid_lightbox_74Ajkz"] shares the same section ID */
/* "Why 800+ Companies Choose Us" feature cards — 28px curves */
[id$="__section_custom_html_FEaHt4"] .feature-card-item {
border-radius: 28px !important;
}
/* "What's Included" — remove dot background, use #fafafa */
[id$="__section_custom_html_LLk4CC"] .headshot-package-section {
background: #fafafa !important;
background-image: none !important;
box-shadow: none !important;
}
[id$="__section_custom_html_LLk4CC"] .headshot-package-section::before {
display: none !important;
}
/* "What's Included" feature cards — 28px curves */
[id$="__section_custom_html_LLk4CC"] .headshot-feature-card {
border-radius: 28px !important;
}
/* Service area location badges — pill */
[id$="__section_custom_html_kqpKBV"] .areas-list span {
border-radius: 30px !important;
}
/* ====== ENTERPRISE — MOST POPULAR badge pill ====== */
.bp-pricing-card.bp-featured::before {
border-radius: 30px !important;
}
/* ====== HOME PAGE — Photo grid: hide items 9–12 on mobile ====== */
@media (max-width: 767px) {
.photo-grid__grid .photo-grid__item:nth-child(n+9) {
display: none !important;
}
}
/* ====== WHAT TO EXPECT PAGE ====== */
/* Jump to Section row — remove container curves (buttons stay pill via .wte-jump-nav a) */
.wte-jump-nav {
border-radius: 0 !important;
}
/* 100+ Backdrop Choices — 6 images: curve each image */
.wte-backdrops img {
border-radius: 28px;
overflow: hidden;
}
/* Ready to Book — hover handled by the general btn--solid / btn--solid-border rules */
/* ====== FAQ — inline video curved corners ====== */
.main-page__content video,
.page-width video {
border-radius: 28px;
overflow: hidden;
display: block;
}
/* ====== ADWORDS LANDING PAGES ====== */
/* Feature cards — 28px curves (fix: selector was .feature-card-item, correct class is .feature-card) */
[id$="__section_custom_html_FEaHt4"] .feature-card {
border-radius: 28px !important;
}
/* Image-with-text buttons — side by side instead of stacked */
[id$="__section_image_with_text_hXN8Pb"] .image-with-text__buttons {
display: inline-flex !important;
width: auto !important;
margin-right: 10px !important;
}
/* ====== CONSISTENT BUTTON HOVER — invert on hover for all non-ATC buttons ======
Excludes: .product__submit__add (blue ATC button)
Excludes: .radio__label (variant selectors — they use their own checked/hover states)
NOTE on .btn--solid: theme sets border-width: 0 on these, so border-color alone
cannot draw an outline. We use box-shadow: inset instead — it works regardless of
border-width and never shifts layout.
================================================================ */
/* --- Solid black → outline on hover --- */
.btn--solid.btn--black:not(.product__submit__add) {
--btn-bg-hover: transparent;
}
.btn--solid.btn--black:not(.product__submit__add):hover {
background: #fff !important;
color: #000 !important;
box-shadow: inset 0 0 0 1px #000 !important;
transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
}
/* --- Solid-border black → inverts on hover (white bg, black text) --- */
.btn--black.btn--solid-border:not(.product__submit__add),
.btn--solid-border.btn--black:not(.product__submit__add) {
--btn-bg-hover: transparent;
}
.btn--black.btn--solid-border:not(.product__submit__add):hover,
.btn--solid-border.btn--black:not(.product__submit__add):hover {
background: #fff !important;
color: #000 !important;
border-color: #000 !important;
box-shadow: inset 0 0 0 1px #000 !important;
transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
}
/* --- Solid white → outline on hover --- */
.btn--solid.btn--white:not(.product__submit__add) {
--btn-bg-hover: transparent;
}
.btn--solid.btn--white:not(.product__submit__add):hover {
background: transparent !important;
color: #fff !important;
box-shadow: inset 0 0 0 1px #fff !important;
transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
}
/* --- Solid-border white → inverts on hover (black bg, white text, white outline) --- */
.btn--white.btn--solid-border:not(.product__submit__add),
.btn--solid-border.btn--white:not(.product__submit__add) {
--btn-bg-hover: transparent;
}
.btn--white.btn--solid-border:not(.product__submit__add):hover,
.btn--solid-border.btn--white:not(.product__submit__add):hover {
background: #000 !important;
color: #fff !important;
box-shadow: inset 0 0 0 1px #fff !important;
transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
}
/* --- Solid primary → outline on hover --- */
.btn--solid.btn--primary:not(.product__submit__add) {
--btn-bg-hover: transparent;
}
.btn--solid.btn--primary:not(.product__submit__add):hover {
background: transparent !important;
color: var(--PRIMARY-BUTTONS-COLOR-BG) !important;
box-shadow: inset 0 0 0 1px var(--PRIMARY-BUTTONS-COLOR-BG) !important;
transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
}
/* --- Outline primary → filled on hover --- */
.btn--primary.btn--solid-border:not(.product__submit__add),
.btn--solid-border.btn--primary:not(.product__submit__add) {
--btn-bg-hover: transparent;
}
.btn--primary.btn--solid-border:not(.product__submit__add):hover,
.btn--solid-border.btn--primary:not(.product__submit__add):hover {
background: var(--PRIMARY-BUTTONS-COLOR-BG) !important;
color: var(--PRIMARY-BUTTONS-COLOR-TEXT) !important;
box-shadow: inset 0 0 0 1px var(--PRIMARY-BUTTONS-COLOR-BORDER) !important;
transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
}
/* ====== STICKY BAR — tablet (769–1025px) compact layout ====== */
@media only screen and (min-width: 769px) and (max-width: 1025px) {
.cart-bar__media img {
width: 50px;
height: 50px;
}
.cart-bar__info {
max-width: 120px;
}
.cart-bar__product__title {
font-size: calc(0.85rem * var(--adjust-body));
line-height: 1.2;
}
.cart-bar__product__price {
font-size: calc(0.8rem * var(--adjust-body));
}
.cart-bar .select-popout__toggle {
padding: 8px 10px;
font-size: 0.8rem;
}
.cart-bar__quantity .quantity__input {
width: 50px !important;
max-width: 50px !important;
height: 40px !important;
}
.cart-bar__form {
gap: 8px;
}
.cart-bar__options {
gap: 8px;
}
}
/* ====== MOBILE MENU — pill button for "Book Your Portrait" ======
Solid black pill with white text — matches the desktop nav pill's
default state. No hover/active colour swap on mobile: touch devices
don't have a stable hover state and the theme's red :active flash
was ugly. Title case. */
.mobile-navlink.mobile-navlink--highlight {
display: inline-block !important;
width: auto !important;
padding: 5px 16px !important;
border: 1px solid #000 !important;
border-radius: 30px !important;
background-color: #000 !important;
color: #fff !important;
--text: #fff;
text-transform: none !important;
}
/* Keep the same black/white treatment on press + visited so the pill
never flashes red or white mid-tap. */
.mobile-navlink.mobile-navlink--highlight:hover,
.mobile-navlink.mobile-navlink--highlight:focus,
.mobile-navlink.mobile-navlink--highlight:active,
.mobile-navlink.mobile-navlink--highlight:visited {
background-color: #000 !important;
color: #fff !important;
--text: #fff;
}
/* ====== VIEW PACKAGES — sticky button perfectly centred on mobile ====== */
/* The parent .cart-bar__form has margin-left:auto + padding-right:10px which
creates asymmetric spacing. Override on mobile so the button is truly centred. */
@media only screen and (max-width: 767px) {
.cart-bar__form {
margin-left: 0 !important;
padding-right: 0 !important;
padding-left: 0 !important;
justify-content: center !important;
}
.cart-bar__mobile-options-btn {
display: flex;
justify-content: center;
padding: 0;
}
.cart-bar__mobile-options-btn button {
width: 100%;
max-width: 100%;
text-align: center;
}
}
/* ====== BUTTON HOVER — outline (btn--outline) variants ======
These were missing from the solid-border rules above.
btn--outline has visible border-width so we can use border-color directly.
============================================================ */
/* --- Outline black (btn--outline) → filled black on hover --- */
.btn--outline.btn--black:not(.product__submit__add):hover {
background: #000 !important;
color: #fff !important;
border-color: #000 !important;
transition: background 0.2s ease, color 0.2s ease !important;
}
/* --- Outline white (btn--outline) → filled on hover + white border visible --- */
.btn--outline.btn--white:not(.product__submit__add):hover {
background: #fff !important;
color: #000 !important;
border-color: #fff !important;
transition: background 0.2s ease, color 0.2s ease !important;
}
/* ====== BUTTON HOVER — kill theme's ::before/::after pseudo-element overlay ======
The theme layers a semi-transparent overlay via ::before/::after (opacity: 0.3,
background: --btn-bg-hover) on hover. This conflicts with our full-colour hover
inversions. Hide them entirely so only our explicit background/color applies.
============================================================ */
.btn--solid:not(.product__submit__add)::before,
.btn--solid:not(.product__submit__add)::after,
.btn--solid-border:not(.product__submit__add)::before,
.btn--solid-border:not(.product__submit__add)::after,
.btn--outline:not(.product__submit__add)::before,
.btn--outline:not(.product__submit__add)::after {
display: none !important;
}
/* ====== MOBILE — centre CTA buttons on small screens ======
On < 480px the theme switches .main-buttons to flex-flow: column
but leaves align-items: normal (= left-aligned). Buttons inside
image-with-text, section-text, and similar sections appear off-centre.
============================================================ */
@media only screen and (max-width: 479px) {
.main-buttons {
align-items: center !important;
}
.main-buttons__item {
justify-content: center !important;
}
}
/* ====== MOBILE — centre contact-form Send button ====== */
@media only screen and (max-width: 479px) {
.form__item--submit {
display: flex;
justify-content: center;
}
}
/* ONLY the middle wrapper grows / gets wider */
.cart-bar__options .cart-bar__select__wrapper:nth-child(2) .select-popout__list--visible{
min-width: max(240px, 100%);
}
.group-discount-message {
color:#ff4848; /* change this to whatever you want */
font-size: 13px !important;
display: flex !important;
align-items: center;
gap: 6px;
}
.group-discount-message .spinner-icon {
width: 25px;
height: 25px;
flex-shrink: 0;
animation: spin 1s linear infinite;
}
.backdrop-optimistic-saving {
display: flex !important;
align-items: center;
gap: 5px;
font-size: 13px;
}
.backdrop-optimistic-saving .spinner-icon {
width: 20px;
height: 20px;
flex-shrink: 0;
animation: spin 1s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* ============================================================
Enterprise — "How It Works" image-with-text + numbered steps
============================================================ */
.how-it-works {
overflow: hidden;
background: var(--bg);
}
.how-it-works__inner {
display: flex;
flex-flow: row wrap;
align-items: center;
}
@media only screen and (min-width: 768px) {
.how-it-works__inner {
flex-wrap: nowrap;
flex-direction: row-reverse; /* image right, text left */
}
}
/* --- Image side --- */
.how-it-works__image {
position: relative;
width: 100%;
overflow: hidden;
}
@media only screen and (min-width: 768px) {
.how-it-works__image {
flex: 0 0 50%;
max-width: 50%;
}
}
.how-it-works__image img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
}
.body--rounded-corners .how-it-works__image,
.body--rounded-corners .how-it-works__image img {
border-radius: var(--radius);
overflow: hidden;
}
/* Seven-fifty height to match LinkedIn section */
@media only screen and (min-width: 768px) {
.how-it-works__image img {
height: 550px;
object-fit: cover;
}
}
/* --- Text / content side --- */
.how-it-works__content {
width: 100%;
padding: var(--gutter-mobile);
}
@media only screen and (min-width: 768px) {
.how-it-works__content {
flex: 0 0 50%;
max-width: 50%;
padding: 0 calc(var(--gutter) * 1.5) 0 0;
}
}
@media only screen and (max-width: 767px) {
.how-it-works__content {
padding: 24px var(--gutter-mobile) 0;
}
}
.how-it-works__heading {
font-family: var(--FONT-STACK-HEADING);
font-weight: var(--FONT-WEIGHT-HEADING);
font-style: var(--FONT-STYLE-HEADING);
font-size: var(--font-2);
line-height: 1.15;
margin: 0 0 10px;
color: var(--text);
}
@media only screen and (max-width: 767px) {
.how-it-works__heading {
font-size: var(--font-3);
}
}
.how-it-works__intro {
font-size: calc(1.1rem * var(--adjust-body));
line-height: 1.6;
margin: 0 0 28px;
color: var(--text);
}
/* --- Timeline steps --- */
.how-it-works__steps {
list-style: none;
margin: 0;
padding: 0 0 0 28px;
position: relative;
}
.how-it-works__steps::before {
content: '';
position: absolute;
left: 7px;
top: 0;
bottom: 0;
width: 2px;
background: #e0e0e0;
}
.how-it-works__step {
position: relative;
padding-bottom: 22px;
}
.how-it-works__step:last-child {
padding-bottom: 0;
}
.how-it-works__step::before {
content: '';
position: absolute;
left: -25px;
top: 5px;
width: 12px;
height: 12px;
background: #000;
border-radius: 50%;
}
.how-it-works__step-number {
display: none;
}
.how-it-works__step-text {
flex: 1;
min-width: 0;
}
.how-it-works__step-title {
font-size: 1.05rem;
font-weight: 600;
color: #000;
margin: 0 0 6px;
line-height: 1.4;
}
.how-it-works__step-desc {
font-size: 0.9rem;
color: #666;
line-height: 1.6;
margin: 0;
}
[id*="section_image_with_text_EHkT3F"] .image-with-text__text ul {
list-style: none;
padding-left: 0;
}
[id*="section_image_with_text_EHkT3F"] .image-with-text__text ul li {
padding-left: 28px;
position: relative;
margin-bottom: 6px;
}
[id*="section_image_with_text_EHkT3F"] .image-with-text__text ul li::before {
content: '\2713';
position: absolute;
left: 0;
font-weight: 700;
color: #000;
}
[id*="section_columns_C6etVa"] .column-item__heading {
text-transform: none;
}
[id*="section_multicolumn_gqEhrY"] .column-item__text.subheading-text {
text-transform: none;
letter-spacing: normal;
font-family: var(--FONT-STACK-BODY);
font-weight: var(--FONT-WEIGHT-BODY);
font-size: calc(1rem * var(--adjust-body));
}
.body--rounded-corners .parent > .header__dropdown {
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
/* ====== "Portrait Features & Options" heading — tighten margin ======
Overrides the theme's default `calc(var(--gutter) / 1.5)` for this
specific icons-row section only. */
@media only screen and (min-width: 768px) {
[id$="__section_icons_row_xcNNra"] .icons-row__headings {
margin-bottom: 20px;
}
}
/* ====== Gallery nav icons — hover swap + close rotate ======
Used by: photo-grid-lightbox, main-page-backdrops, and the
custom-HTML page galleries (corporate-headshots, corporate-event-gallery).
Any button containing these icons gets the swap.
Wrapped in `@media (hover: hover)` so the swap only fires on pointer
devices — on touch devices :hover sticks after a tap until another
element is touched, which made the arrows look "stuck" on the hover
state when advancing slides on mobile. */
.gallery-icon--rest, .gallery-icon--hover, .gallery-icon--close {
vertical-align: middle;
transition: transform 0.2s ease;
/* Force 45px across all usages (headshot / artwork / event gallery
pages + photo-grid-lightbox on homepage, LinkedIn, enterprise pages).
The SVGs have width/height="40" as HTML attrs; this overrides.
`!important` because some legacy theme CSS sets different sizes. */
width: 45px !important;
height: 45px !important;
}
/* Gallery dialog BUTTONS (the parent containers the SVGs sit in) —
match the 45px icon size so nothing clips or misaligns. Covers:
- photo-grid-lightbox.liquid → .photo-grid__dialog-*
- main-page-backdrops.liquid → .backdrops-dialog__*
- page-gallery templates → .page-gallery-dialog__* (headshots / artwork / event) */
.photo-grid__dialog-close,
.photo-grid__dialog-prev,
.photo-grid__dialog-next,
.backdrops-dialog__close,
.backdrops-dialog__prev,
.backdrops-dialog__next,
.page-gallery-dialog__close,
.page-gallery-dialog__prev,
.page-gallery-dialog__next {
width: 45px !important;
height: 45px !important;
}
.gallery-icon--hover { display: none; }
/* Hover swap only on REAL hover-capable devices. We combine
`(hover: hover)` + `(pointer: fine)` — both must be true — so that
iPads with trackpads, Windows touchscreens, stylus devices etc. that
report `hover: hover` on a tap don't stick in the hover state after
advancing a slide. `!important` on the swap rules makes them win
even if some other CSS reinterprets specificity. */
@media (hover: hover) and (pointer: fine) {
button:hover > .gallery-icon--rest { display: none !important; }
button:hover > .gallery-icon--hover { display: inline-block !important; }
button:hover > .gallery-icon--close { transform: rotate(90deg); }
}
/* Belt & suspenders: force rest icon visible + hover icon hidden on any
touch-capable device. Overrides sticky-hover behaviour that some
mobile browsers apply after a tap. */
@media (hover: none), (pointer: coarse) {
.gallery-icon--rest { display: inline-block !important; }
.gallery-icon--hover { display: none !important; }
}
/* ====== Site-wide close icon — rotate 90° on hover ======
Applies to any button/link containing the shared `icon-close` SVG
(cart drawer close, backdrop modal close, quick-view close, etc.)
Two non-obvious details:
1. `will-change: transform` + `translateZ(0)` force GPU compositing
from the start. Without this, the icon is CPU-rendered at rest and
switches to GPU mid-animation; the two paths anti-alias slightly
differently, making a stroke-based icon look "a touch bolder"
after a hover-rotate finishes.
2. `pointer-events: none` prevents the SVG itself from receiving mouse
events — only the button handles hover. At 45° mid-rotation a square
icon's visual extent grows to √2× (a 59px icon becomes 83px on the
diagonal), which can stick out past the button's bounding box. If
the SVG accepted pointer events, the cursor could be over the
rotated SVG but outside the button's hit zone → button:hover flips
off → rotation reverses → cursor is back in button → flips on →
JITTER. Making the SVG invisible to the cursor eliminates that
feedback loop. */
.icon-close {
transition: transform 0.2s ease;
transform: translateZ(0);
will-change: transform;
backface-visibility: hidden;
pointer-events: none;
}
@media (hover: hover) {
button:hover > .icon-close,
a:hover > .icon-close,
button:hover .icon-close,
a:hover .icon-close {
transform: rotate(90deg) translateZ(0);
}
}
/* Same pointer-events fix for gallery close icons (lightbox close X in
the headshot / artwork / event galleries + photo-grid-lightbox). */
.gallery-icon--close,
.gallery-icon--rest,
.gallery-icon--hover {
pointer-events: none;
}
/* ====== Mobile nav expand/collapse — circled down/up arrow ======
Replaces the default +/- icons ONLY on the mobile nav parent links
(e.g. "Portfolio"). Other +/- on the site (FAQ, cart qty, filter
accordions, footer links) keep their theme defaults. Icons come from
snippets/nav-mobile-arrows.liquid — two SVGs stacked in the button,
opacity-swapped on `.is-expanded`. */
.mobile-nav__trigger .nav-mobile-arrow {
width: 38px;
height: 38px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: opacity 0.3s ease;
}
/* Default state: down arrow visible, up arrow hidden */
.mobile-nav__trigger .nav-mobile-arrow--up { opacity: 0; }
/* Expanded state: swap */
.mobile-nav__trigger.is-expanded .nav-mobile-arrow--down { opacity: 0; }
.mobile-nav__trigger.is-expanded .nav-mobile-arrow--up { opacity: 1; }
/* ====== Mobile menu close — 40px visible ======
Keep the theme's native 54×54 tap target (above the 44×44 mobile
minimum) and reduce padding so the stroke-based icon-close renders
at 40px — matches the rest of the site's close-icon scale. */
.drawer--nav .drawer__close-button {
width: 54px !important;
height: 54px !important;
padding: 7px !important; /* 54 − 2×7 = 40px visible */
}
.drawer--nav .drawer__close-button .icon-close {
width: 100%;
height: 100%;
}
/* ====== TESTIMONIALS — equal-height cards (pure CSS) ====== */
/* Flickity adds .flickity-enabled BEFORE measuring cells, so
height:100% collapses them (circular dependency). Instead we
use min-height:100% — Flickity measures natural height first,
then after setting viewport height the min-height kicks in.
Cells become flex containers so inner stretches via flex:1. */
testimonials-slider.flickity-enabled [data-item] {
min-height: 100% !important;
display: flex !important;
flex-direction: column !important;
}
.testimonial__item__inner {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
}
.testimonial__item__content {
display: flex !important;
flex-direction: column !important;
flex: 1 !important;
}
.testimonial__user {
margin-top: auto !important;
padding-top: 16px;
}
/* Image cards have no .testimonial__user wrapper — push name to bottom */
.testimonial__item__image .testimonial__item__content .testimonial__user__name {
margin-top: auto !important;
padding-top: 16px;
font-size: calc(0.8rem * var(--adjust-body)) !important;
}
/* Image card inner has padding:0 (photo edge-to-edge) but text cards
have padding:var(--inner) all around. Add bottom padding to image
cards so names align horizontally across both card types. */
.testimonial__item__image .testimonial__item__inner {
padding-bottom: var(--inner) !important;
}
/* Subheading (location) under person name — darker grey */
.testimonial__subheading {
color: #6b6b6b !important;
}
/* About page — head-photographer section anchor aliases.
The "Who is BusinessPortraits.ca's head photographer?" section in
`templates/page.about.json` (section abt_section3_photographer) has
two URL fragments that both need to scroll to the same heading:
- /pages/about#head-photographer (canonical — H2 id, jump-nav uses it)
- /pages/about#koby-sirkovich (alias — matches the sitewide schema
Person @id used in 6 JSON-LD files)
The alias target is a zero-height stub sitting
immediately above the H2 inside `.bp-about-koby-sect__inner`. The
.bp-anchor class itself supplies scroll-margin-top (line ~1944 below),
so external links to either fragment land the section heading below the
sticky header rather than buried under the nav. */
/* Jump-nav anchor targets (used by anchor_id setting on theme sections like
section-image-with-text.liquid). Pushes the jump landing point below the
sticky header so the section heading isn't hidden under the nav. */
.bp-anchor {
display: block;
scroll-margin-top: 90px;
height: 0;
overflow: hidden;
}
/* ========================================================================
BPHOME — Home Page Refinements v3
--------------------------------------------------------------
Layout-only styles for section-custom-html blocks on the home
page. Typography is intentionally NOT set here — every element
inherits from the theme's configured fonts so these blocks read
as part of the rest of the site, not as a foreign design.
Only structural rules: layout, max-widths, spacing, dividers,
colors that match the existing palette (--bp-line / --bp-mute
are derived from the theme's neutral grays).
======================================================================== */
.bp-services-intro {
max-width: 1280px;
margin: 0 auto;
padding: 0 20px;
}
.bp-services-intro__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 40px;
margin-bottom: 48px;
border-bottom: 1px solid #e5e5e2;
padding-bottom: 32px;
}
.bp-services-intro__head h2 {
margin: 0;
max-width: 680px;
--adjust-heading: calc(var(--FONT-ADJUST-HEADING) * 1.1);
/* font-family / size / weight inherit from theme h2 */
}
.bp-services-intro__lede {
max-width: 360px;
margin: 0;
color: #666;
font-size: 0.95em;
line-height: 1.6;
}
.bp-services-intro__lede a {
color: inherit;
text-decoration: underline;
text-underline-offset: 3px;
}
.bp-services-intro__body {
max-width: 1080px;
}
.bp-services-intro__body p {
margin: 0 0 14px;
line-height: 1.7;
color: #333;
}
.bp-services-intro__body p:last-child {
margin: 0;
}
.bp-services-intro__body a {
color: inherit;
text-decoration: underline;
text-underline-offset: 3px;
}
@media (max-width: 860px) {
.bp-services-intro__head {
flex-direction: column;
align-items: flex-start;
gap: 18px;
}
.bp-services-intro__head h2,
.bp-services-intro__lede {
max-width: none;
}
}
/* ========================================================================
Text columns with images — "BP Card" variant
--------------------------------------------------------------
ALL rules here are scoped to `.column-item--bp-card`. That class
is added to a column-item ONLY when at least one of the new
schema fields is filled (subheading, price label/value, pill).
Standard "Text columns with images" usages elsewhere on the site
inherit zero styling from this block.
======================================================================== */
/* ----- Equal-height layout -----------------------------------------------
Grid stretches each .column-item to the tallest in the row, but the
inner content collapses to its natural height. We rebuild the chain
as nested flex columns so the content fills the full card height.
That lets `.column-item__divider { margin-top: auto }` push the
divider + footer (price + pill) to the bottom of the card.
Note: the image wrapper's child uses `padding-top: var(--aspect-ratio)`
for its aspect ratio (theme.css ~line 8037). In a flex-column parent
that percentage-padding child can collapse to 0 height in some
browsers — so we explicitly tell flex not to size the wrapper:
`flex: 0 0 auto` (don't grow, don't shrink, respect natural height). */
.column-item--bp-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 28px;
overflow: hidden;
transition: box-shadow 0.3s ease;
}
/* Hover state — matches the .wte-col-card pattern used elsewhere on the
site (subtle shadow lift, no vertical translate). */
.column-item--bp-card:hover {
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}
.column-item--bp-card .column-item__inner {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
}
.column-item--bp-card .column-item__image-wrapper {
flex: 0 0 auto;
width: 100%;
}
.column-item--bp-card .column-item__content {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
padding: 25px; /* internal padding so content doesn't touch the border */
}
.column-item--bp-card .column-item__subheading {
font-size: 12px;
letter-spacing: 0;
color: #666;
font-weight: 500;
line-height: 1.4;
margin: -6px 0 14px;
}
/* Divider — uses padding-top + border-bottom so the visible line sits at
the bottom of the hr element with an 18px guaranteed gap above it.
margin-top: auto pushes it down to the bottom of the flex column. */
.column-item--bp-card .column-item__divider {
border: none;
border-bottom: 1px solid #e5e5e2;
height: 0;
margin: auto 0 0;
padding-top: 18px;
width: 100%;
}
.column-item--bp-card .column-item__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding-top: 16px;
}
.column-item--bp-card .column-item__price {
display: flex;
flex-direction: column;
line-height: 1;
min-width: 0;
}
.column-item--bp-card .column-item__price-label {
font-size: 12px;
letter-spacing: 0;
font-weight: 500;
color: #666;
margin-bottom: 10px;
}
.column-item--bp-card .column-item__price-value {
font-size: 20px; /* default — overridden per-block by inline style from price_value_size slider */
font-weight: 500;
color: #111;
letter-spacing: -0.005em;
}
/* Pill button — rounded full, three color variants.
Hover convention matches the site's existing black-button pattern
(see .book-portrait-button earlier in this file): black → white with
black outline on hover. No translateY — the rest of the site doesn't
use vertical-shift hovers, so neither does this. */
.column-item--bp-card .column-item__pill {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 15px;
border-radius: 999px;
font-size: 14px;
font-weight: 500;
letter-spacing: 0;
text-decoration: none;
white-space: nowrap;
flex-shrink: 0;
border: 1px solid transparent;
transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
/* Black: solid black → white background, black outline, black text */
.column-item--bp-card .column-item__pill.pill--black {
background: #111;
color: #fff;
border-color: #111;
}
.column-item--bp-card .column-item__pill.pill--black:hover {
background: #fff;
color: #111;
border-color: #111;
}
/* White: white background w/ black outline → invert to black */
.column-item--bp-card .column-item__pill.pill--white {
background: #fff;
color: #111;
border-color: #111;
}
.column-item--bp-card .column-item__pill.pill--white:hover {
background: #111;
color: #fff;
border-color: #111;
}
/* Ghost: transparent w/ black outline → fill black on hover */
.column-item--bp-card .column-item__pill.pill--ghost {
background: transparent;
color: #111;
border-color: #111;
}
.column-item--bp-card .column-item__pill.pill--ghost:hover {
background: #111;
color: #fff;
border-color: #111;
}
/* Mobile (<=480px): stack footer vertically — price above pill,
both centered. Operator preferred this over the desktop's
row+space-between layout because of inconsistent visual centering
between short ("From $226.98") and long ("Quote on configuration")
price text on narrow viewports. Desktop layout above is unchanged. */
@media (max-width: 480px) {
.column-item--bp-card .column-item__footer {
flex-direction: column;
align-items: center;
gap: 12px;
}
.column-item--bp-card .column-item__price {
align-items: center;
text-align: center;
}
.column-item--bp-card .column-item__pill {
width: 100%;
justify-content: center;
}
}
/* ========================================================================
Hero buttons — side-by-side
--------------------------------------------------------------
The home hero is a section-image-with-text with two button blocks
(Book a Team Headshot Day + Request a Quote). The theme renders
each button in its own block-level wrapper, which stacks them.
We use a partial-match attribute selector ([id*=...]) because
Shopify prefixes the rendered DOM id with the template id
(e.g. ImageWithText--template--26316586156075__section_image_with_text_7FKgfj).
The substring stays the same regardless of the template id, so
this selector survives most theme/template rebuilds.
`inline-flex` is used (not inline-block) because .main-buttons is
already display:flex from the theme — inline-flex preserves the
inner flex behaviour while making the outer element flow inline.
======================================================================== */
[id*="section_image_with_text_7FKgfj"] .image-with-text__buttons {
display: inline-flex;
vertical-align: top;
margin-right: 12px;
}
@media (max-width: 600px) {
[id*="section_image_with_text_7FKgfj"] .image-with-text__buttons {
display: flex;
margin-right: 0;
}
}
/* Individual booking section (bottom CTAs side-by-side, same as hero) */
[id*="section_image_with_text_Qtkgb6"] .image-with-text__buttons {
display: inline-flex;
vertical-align: top;
margin-right: 12px;
}
@media (max-width: 600px) {
[id*="section_image_with_text_Qtkgb6"] .image-with-text__buttons {
display: flex;
margin-right: 0;
}
}
/* Portfolio header section (Corporate Headshots Portfolio + Corporate Event Portfolio side-by-side) */
[id*="section_image_with_text_rJHTJe"] .image-with-text__buttons {
display: inline-flex;
vertical-align: top;
margin-right: 12px;
}
@media (max-width: 600px) {
[id*="section_image_with_text_rJHTJe"] .image-with-text__buttons {
display: flex;
margin-right: 0;
}
}
/* ========================================================================
Portfolio — header (section 1)
======================================================================== */
.bp-portfolio-head {
max-width: 1280px;
margin: 0 auto;
padding: 0 20px;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 40px;
}
.bp-portfolio-head__copy {
flex: 1;
min-width: 0;
}
.bp-portfolio-head__eyebrow {
font-size: 12px;
color: #666;
font-weight: 500;
letter-spacing: 0;
margin-bottom: 14px;
}
.bp-portfolio-head__copy h2 {
font-size: clamp(28px, 3vw, 42px);
font-weight: 500;
line-height: 1.1;
letter-spacing: -0.015em;
margin: 0 0 14px;
max-width: 720px;
color: #111;
}
.bp-portfolio-head__copy p {
font-size: 15px;
line-height: 1.65;
color: #333;
margin: 0;
max-width: 680px;
}
.bp-portfolio-head__link {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 14px;
color: #111;
font-weight: 500;
text-decoration: none;
flex-shrink: 0;
transition: gap 160ms ease;
}
.bp-portfolio-head__link:hover { gap: 16px; }
.bp-portfolio-head__link span {
border-bottom: 1px solid #111;
padding-bottom: 4px;
}
.bp-portfolio-head__link svg {
width: 28px;
height: 28px;
flex-shrink: 0;
fill: currentColor;
}
@media (max-width: 768px) {
.bp-portfolio-head {
flex-direction: column;
align-items: stretch;
gap: 24px;
}
.bp-portfolio-head__actions {
justify-content: center;
flex-wrap: wrap;
}
}
/* ========================================================================
Portfolio — grid override (section 2)
--------------------------------------------------------------
The photo-grid-lightbox section emits an inline #PhotoGrid--
style with `grid-template-columns: repeat(6, 1fr)` (12 images = 2
rows). For the home portfolio we want 8 images on one line desktop
and 6 on one line mobile (with the last 2 hidden on mobile).
Inline ID selectors (1,1,0) outrank attribute selectors (0,2,0),
so !important is needed to override the per-section inline style.
Scoped via [id*="bphome_portfolio"] so other photo-grid-lightbox
sections elsewhere on the site keep their default layout.
======================================================================== */
[id*="bphome_portfolio"] .photo-grid__grid {
grid-template-columns: repeat(8, 1fr) !important;
}
@media (max-width: 767px) {
/* Mobile keeps the theme's default 2-col grid (2 cols × 3 rows for 6 images) */
[id*="bphome_portfolio"] .photo-grid__grid {
grid-template-columns: repeat(2, 1fr) !important;
}
/* Still hide the 7th and 8th images so it's exactly 2 × 3 */
[id*="bphome_portfolio"] .photo-grid__item:nth-child(n+7) {
display: none !important;
}
}
/* ========================================================================
Portfolio — footer caption (section 3)
======================================================================== */
.bp-portfolio-foot {
text-align: center;
font-size: 0.9rem;
color: #555;
padding: 0 20px;
margin: 0 auto;
max-width: 880px;
line-height: 1.6;
}
.bp-portfolio-foot strong {
color: #111;
font-weight: 500;
}
/* ========================================================================
Client roster — 5 rounded boxes side by side (custom_html replacement
for the icons-row roster)
======================================================================== */
/* Editorial-list layout (replaces the previous 5-card roster grid).
Five rows, three columns: vertical label / italic claim / names list.
Stacks to a single column under 900px. */
.bp-roster {
max-width: 1180px;
margin: 0 auto;
padding: 0 20px;
}
.bp-roster__row {
display: grid;
grid-template-columns: 200px 1fr 1.2fr;
gap: 48px;
align-items: baseline;
padding: 32px 0;
border-top: 1px solid #e5e5e2;
}
.bp-roster__row:last-child {
border-bottom: 1px solid #e5e5e2;
}
.bp-roster__vert {
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #666;
font-weight: 600;
line-height: 1.4;
}
.bp-roster__claim {
font-weight: 500;
font-size: 24px;
letter-spacing: -0.01em;
color: #111;
line-height: 1.25;
}
.bp-roster__claim em {
/* Theme highlight font (Playfair Italic) for the count phrase. */
font-family: var(--FONT-STACK-HIGHLIGHT);
font-style: italic;
font-weight: 400;
color: #111;
margin-right: 6px;
}
.bp-roster__names {
font-size: 13px;
line-height: 1.6;
color: #666;
letter-spacing: 0.01em;
}
@media (max-width: 900px) {
.bp-roster__row {
grid-template-columns: 1fr;
gap: 10px;
padding: 24px 0;
}
}
/* ========================================================================
Feature card grid — 4 simple title + text cards (e.g. team-day cards)
======================================================================== */
/* Editorial-row layout for the team-day step list (replaces the previous
4-card grid).
Desktop: 2-col grid. Left column stacks the big serif-italic number
on top of the title; right column holds the description.
Mobile: collapses to a single column — number first, title under it,
description below. */
.bp-feature-grid {
max-width: 1180px;
margin: 0 auto;
padding: 0 20px;
display: flex;
flex-direction: column;
}
.bp-feature-row {
display: grid;
grid-template-columns: 220px 1fr;
gap: 60px;
align-items: center;
padding: 20px 0;
border-top: 1px solid #e5e5e2;
}
.bp-feature-row:last-child {
border-bottom: 1px solid #e5e5e2;
}
.bp-feature-row__lead {
display: block;
}
.bp-feature-row__num {
/* Theme highlight font (Playfair Italic) — matches the roster italic count. */
font-family: var(--FONT-STACK-HIGHLIGHT);
font-style: italic;
font-weight: 400;
font-size: 64px;
line-height: 0.9;
color: #000;
letter-spacing: -0.02em;
margin: 0 0 12px;
}
.bp-feature-row__title {
font-size: 1.05rem;
font-weight: 500;
color: #111;
margin: 0;
line-height: 1.3;
}
.bp-feature-row__text {
font-size: 14px;
line-height: 1.6;
color: #333;
margin: 0;
}
@media (max-width: 700px) {
.bp-feature-row {
grid-template-columns: 1fr;
gap: 12px;
padding: 20px 0;
}
.bp-feature-row__num {
font-size: 40px;
margin: 0 0 10px; /* small breathing room above the title on mobile */
}
}
/* ========================================================================
Tier card grid — dark variant (white on black)
======================================================================== */
.bp-tier-grid {
max-width: 1280px;
margin: 0 auto;
padding: 0 20px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.bp-tier-card {
background: #171717;
color: #fff;
border-radius: 28px;
padding: 28px 26px;
transition: box-shadow 0.3s ease;
}
.bp-tier-card:hover {
box-shadow: 0 10px 40px rgba(255, 255, 255, 0.12);
}
/* Title + credit sit together above the grey divider */
.bp-tier-card__head {
padding-bottom: 14px;
margin-bottom: 14px;
border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.bp-tier-card__title {
font-size: 1.15rem;
font-weight: 500;
color: #fff;
margin: 0 0 6px;
line-height: 1.3;
}
.bp-tier-card__text {
font-size: 14px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.78);
margin: 0;
}
/* Red credit-percentage subtitle (e.g. "10% Account credit") — sits under
the tier title, above the grey divider. The red #d43747 is an
operator-approved exception to the strict-monochrome palette rule
for the subscription tier cards specifically. PageSpeed/Lighthouse
flags the contrast against the #171717 card background (~3.6:1)
but the design is intentional and approved. */
.bp-tier-card__credit {
color: #d43747;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.02em;
margin: 0;
}
/* Red "Starting at $X in credit" line inside tier card body —
same operator-approved exception as bp-tier-card__credit above. */
.bp-tier-card__starting {
color: #d43747;
display: inline-block;
margin-top: 4px;
}
@media (max-width: 900px) {
.bp-tier-grid { grid-template-columns: 1fr; }
}
/* ========================================================================
90-Day Pilot — red underline beneath the alternate-font heading.
Theme renders the ... in this heading as a wrapped structure:
90-Day Pilot
The block's id (`Text--heading_mRaEpe`) is stable across templates because
it derives from the JSON block key, so we use it to scope this rule to ONLY
this heading (without leaking to the Thesis or other alternate-font uses).
The `opacity: 1 !important` overrides theme.css's default opacity:0 on the
string (which depends on a JS animation that may not fire when
animations_enabled is false).
======================================================================== */
#Text--heading_mRaEpe .text-highlight__string {
opacity: 1 !important;
text-decoration: underline;
text-decoration-color: #d43747;
text-decoration-thickness: 3px;
text-underline-offset: 5px;
}
/* ========================================================================
Photo grid (bphome_portfolio): swap visual positions 3 and 4 on mobile.
Mobile layout is a 2-column grid; without intervention items render in
DOM order p1..p8. The user wants p4 in the 3rd visual slot and p3 in
the 4th. CSS Grid `order` controls visual sequence — but items with
default order (0) leapfrog explicitly-ordered items, so all 8 items
need explicit values to keep p1/p2/p5/p6/p7/p8 in place.
Note: lightbox next/prev navigation still uses DOM order (data-photo-
grid-item indexes), so navigating from the swapped item won't follow
the visual sequence — minor UX wart, lightbox click-to-open is fine.
======================================================================== */
@media (max-width: 600px) {
[data-section-id$="bphome_portfolio"] .photo-grid__item:nth-child(1) { order: 1; }
[data-section-id$="bphome_portfolio"] .photo-grid__item:nth-child(2) { order: 2; }
[data-section-id$="bphome_portfolio"] .photo-grid__item:nth-child(3) { order: 4; }
[data-section-id$="bphome_portfolio"] .photo-grid__item:nth-child(4) { order: 3; }
[data-section-id$="bphome_portfolio"] .photo-grid__item:nth-child(5) { order: 5; }
[data-section-id$="bphome_portfolio"] .photo-grid__item:nth-child(6) { order: 6; }
[data-section-id$="bphome_portfolio"] .photo-grid__item:nth-child(7) { order: 7; }
[data-section-id$="bphome_portfolio"] .photo-grid__item:nth-child(8) { order: 8; }
}
/* ========================================================================
Operator-requested mobile/visual tweaks (round 2026-04-29)
======================================================================== */
/* Hero stat line: center on mobile only.
Block ID is stable from the JSON template (subheading_NiNBND). */
@media (max-width: 600px) {
#ImageWithText--subheading_NiNBND { text-align: center !important; }
}
/* Service-grid card price block centering moved to the base
.column-item__footer / .column-item__price rules earlier in this
file (footer is now flex-direction: column on all viewports so
price stacks above pill, both centered). */
/* Loading overlay: kill the black-to-white flash on page load.
The overlay is purely cosmetic (masks FOUC during initial paint).
Removing it eliminates the flash entirely. If reinstated later,
change `display: none` to `background: #ffffff !important` to
keep the overlay but make it white instead of black. */
.loading-overlay { display: none !important; }
/* ============================================================================
ABOUT PAGE
----------------------------------------------------------------------------
Custom HTML section styling for /pages/about. Loaded sitewide via custom.css
but selectors are scoped under .bp-about so they only match the About page.
Class namespace: bp-about-* (sub-namespace within the project bp- prefix).
Reuses the homepage .bp-jump-nav class verbatim so any future site-wide
tweak applies here automatically.
Adopts site palette:
ink #0b0b0b · mute #666 · hairline #e0e0e0 · surface #fafafa
warm-cream #fff7f2 NOT used here per operator (greys-only)
HANDOFF doc compliance:
- !important on critical layout properties (cache-busting against stale
inline styles or external rule injection).
- Mobile-first; every multi-column grid collapses to single column at 768px.
- Typography weights capped at 500 (theme only loads up to 500).
============================================================================ */
/* ---- Tokens (scoped to .bp-about wrapper) ---- */
.bp-about{
--bp-about-ink:#0b0b0b;
--bp-about-ink-2:#333333;
--bp-about-mute:#666666;
--bp-about-line:#e0e0e0;
--bp-about-surface:#fafafa;
}
.bp-about *{box-sizing:border-box !important;}
/* Anchored H2s + section anchors — scroll-margin-top so jump-nav clicks don't
bury the destination heading under the theme's sticky site header.
`#koby-sirkovich` is the alias stub for the head-photographer section,
used by external bylines/links and the schema Person @id. */
.bp-about h2[id], .bp-about [id^="how-we-"], .bp-about [id^="brand-"],
.bp-about [id^="head-"], .bp-about [id^="client"],
.bp-about [id^="speak"], .bp-about [id^="award"],
#koby-sirkovich {
scroll-margin-top:100px !important;
}
/* Empty anchor element next to anchored H2s — invisible, zero-height. */
.bp-anchor{
display:block !important;
height:0 !important;
visibility:hidden !important;
}
/* ---- Universal section header (used on Sections 2/3/4/5/6) ---- */
.bp-about-sect-h{
font-family:Poppins,sans-serif !important;
font-size:36px !important;
font-weight:500 !important;
letter-spacing:-0.018em !important;
line-height:1.15 !important;
margin:0 0 22px !important;
max-width:880px !important;
color:var(--bp-about-ink) !important;
}
/* Em tags in custom-HTML headings: Palo Alto's `alternate-font` Liquid
transform (which wraps em → )
only runs inside native theme sections. Custom-HTML keeps raw , so we
reach for the same theme CSS variables (--FONT-STACK-HIGHLIGHT etc.) to
apply Playfair Display italic ourselves. */
.bp-about-sect-h em,
.bp-about-finalcta__h em{
font-family:var(--FONT-STACK-HIGHLIGHT, "Playfair Display", serif) !important;
font-style:var(--FONT-STYLE-HIGHLIGHT, italic) !important;
font-weight:var(--FONT-WEIGHT-HIGHLIGHT, 400) !important;
}
.bp-about-sect-intro p{
font-family:Poppins,sans-serif !important;
font-size:16px !important;
line-height:1.7 !important;
color:var(--bp-about-ink-2) !important;
margin:0 0 16px !important;
max-width:880px !important;
}
.bp-about-sect-intro p:last-child{margin-bottom:0 !important;}
.bp-about-sect-intro a{
color:var(--bp-about-ink) !important;
text-decoration:underline !important;
text-underline-offset:3px !important;
text-decoration-color:rgba(0,0,0,0.25) !important;
}
.bp-about-sect-intro a:hover{
color:var(--bp-about-mute) !important;
text-decoration-color:var(--bp-about-mute) !important;
}
.bp-about-sect-intro strong{font-weight:600 !important;color:var(--bp-about-ink) !important;}
@media (max-width:768px){
.bp-about-sect-h{font-size:28px !important;}
}
/* ---- bp-jump-nav (mirrors homepage bphome_author rules verbatim so any
future site-wide tweak applies here automatically) ---- */
.bp-jump-nav{background:#fafafa;padding:25px 20px;border-top:1px solid #e0e0e0;border-bottom:1px solid #e0e0e0;}
.bp-jump-nav-inner{max-width:1280px;margin:0 auto;text-align:center;}
.bp-jump-nav-title{font-size:0.85rem;font-weight:500;margin-bottom:15px;color:#666;letter-spacing:0.5px;}
.bp-jump-nav-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;}
.bp-jump-nav a{display:inline-block;padding:10px 16px;background:transparent;border:1px solid #666;color:#000;text-decoration:none;font-size:0.95rem;font-weight:500;border-radius:30px;transition:background 0.2s ease,color 0.2s ease;}
.bp-jump-nav a:hover{background:#000;color:#fff;}
@media (min-width:768px){
.bp-jump-nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left;}
.bp-jump-nav-title{margin-bottom:0;white-space:nowrap;flex-shrink:0;}
.bp-jump-nav-buttons{justify-content:flex-end;}
}
/* ---- Section 1 — roster grid (the bio prose was moved into the native
section_text_xP6FKT above by the operator 2026-05-04, so this custom
section now contains only the 9-cell vertical roster grid. Top
padding reduced to 0 to sit close to the text above. ---- */
.bp-about-story{padding:0 60px 60px !important;background:#ffffff !important;}
.bp-about-story__inner{max-width:1280px !important;margin:0 auto !important;}
.bp-about-story p{
font-family:Poppins,sans-serif !important;
font-size:15px !important;line-height:1.7 !important;
color:var(--bp-about-ink-2) !important;
margin:0 0 14px !important;
max-width:880px !important;
}
.bp-about-story a{
color:var(--bp-about-ink) !important;
text-decoration:underline !important;
text-underline-offset:3px !important;
text-decoration-color:rgba(0,0,0,0.25) !important;
}
.bp-about-story a:hover{color:var(--bp-about-mute) !important;}
.bp-about-story__closing{margin-top:24px !important;}
/* 9-cell roster grid — 3-up desktop, collapses 2-up tablet, 1-up mobile.
margin-top reduced from 48 → 12 (operator 2026-05-04: raise closer to text). */
.bp-about-roster{margin-top:12px !important;}
.bp-about-roster__label{
font-family:Poppins,sans-serif !important;
font-size:11px !important;
letter-spacing:0.22em !important;
text-transform:uppercase !important;
color:var(--bp-about-mute) !important;
font-weight:600 !important;
margin-bottom:18px !important;
}
.bp-about-roster-grid{
display:grid !important;
grid-template-columns:repeat(3,1fr) !important;
gap:14px !important;
}
/* Operator update 2026-05-04: roster cell bg flips to #fafafa, pill bg flips
to white, border dropped (the bg contrast carries the edge against the
white Section 1 bg behind). */
.bp-about-roster-cell{
padding:24px 26px 22px !important;
background:#fafafa !important;
border-radius:18px !important;
border:none !important;
}
/* Operator update 2026-05-04 (round 2): drop the visible pill bg, bump
weight to 700, remove horizontal padding — reads as a tight bold caps
label rather than a pill shape. */
.bp-about-roster-cell__h{
display:inline-block !important;
font-family:Poppins,sans-serif !important;
font-size:10px !important;
letter-spacing:0.2em !important;
text-transform:uppercase !important;
color:var(--bp-about-mute) !important;
font-weight:700 !important;
padding:5px 0px !important;
border-radius:999px !important;
margin-bottom:14px !important;
}
.bp-about-roster-cell__count{
font-family:var(--FONT-STACK-HIGHLIGHT, "Playfair Display", serif) !important;
font-style:var(--FONT-STYLE-HIGHLIGHT, italic) !important;
font-weight:var(--FONT-WEIGHT-HIGHLIGHT, 400) !important;
font-size:28px !important;
letter-spacing:-0.01em !important;
line-height:1 !important;
margin-bottom:10px !important;
color:var(--bp-about-ink) !important;
}
.bp-about-roster-cell__list{
font-family:Poppins,sans-serif !important;
font-size:12.5px !important;
line-height:1.6 !important;
color:var(--bp-about-ink-2) !important;
}
@media (max-width:1024px){
.bp-about-roster-grid{grid-template-columns:repeat(2,1fr) !important;}
}
@media (max-width:768px){
.bp-about-story{padding:24px 24px 48px !important;}
.bp-about-roster-grid{grid-template-columns:1fr !important;}
}
/* ---- Section 2 — pillars (5 numbered operational pillars) ---- */
.bp-about-pillars-sect{padding:90px 60px !important;background:#fafafa !important;}
.bp-about-pillars-sect__inner{max-width:1280px !important;margin:0 auto !important;}
.bp-about-pillars{margin-top:36px !important;display:grid !important;gap:0 !important;}
.bp-about-pillar{
display:grid !important;
grid-template-columns:80px 1fr 2.4fr !important;
gap:36px !important;
padding:32px 0 !important;
border-bottom:1px solid var(--bp-about-line) !important;
align-items:start !important;
}
.bp-about-pillar:first-child{border-top:1px solid var(--bp-about-line) !important;}
/* Operator #8 (2026-05-03): pillar number badges use alternate font (Playfair italic). */
.bp-about-pillar__num{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
width:56px !important;
height:56px !important;
border-radius:999px !important;
background:rgba(102,102,102,0.08) !important;
font-family:var(--FONT-STACK-HIGHLIGHT, "Playfair Display", serif) !important;
font-style:var(--FONT-STYLE-HIGHLIGHT, italic) !important;
font-weight:var(--FONT-WEIGHT-HIGHLIGHT, 400) !important;
font-size:22px !important;
line-height:1 !important;
color:var(--bp-about-mute) !important;
letter-spacing:-0.01em !important;
}
.bp-about-pillar__h{
font-family:Poppins,sans-serif !important;
font-size:20px !important;
font-weight:500 !important;
letter-spacing:-0.01em !important;
line-height:1.25 !important;
margin:12px 0 0 !important;
padding-right:24px !important;
color:var(--bp-about-ink) !important;
}
.bp-about-pillar__body{
font-family:Poppins,sans-serif !important;
font-size:15px !important;
line-height:1.7 !important;
color:var(--bp-about-ink-2) !important;
margin:12px 0 0 !important;
max-width:660px !important;
}
@media (max-width:768px){
.bp-about-pillars-sect{padding:60px 24px !important;}
.bp-about-pillar{grid-template-columns:48px 1fr !important;gap:18px !important;}
.bp-about-pillar__body{grid-column:1 / -1 !important;margin-top:6px !important;}
.bp-about-pillar__h{font-size:18px !important;margin-top:0 !important;padding-right:0 !important;}
.bp-about-pillar__num{width:44px !important;height:44px !important;font-size:18px !important;}
}
/* ---- Section 3 — head photographer (2-col grid: image left, text right)
Operator update 2026-05-04 (round 5): keep all body text in the right
column beside the image (no wrapping under). Image is fixed at 528×550
on desktop; stacks above text on mobile. ---- */
.bp-about-koby-sect{padding:90px 60px !important;background:#ffffff !important;}
.bp-about-koby-sect__inner{max-width:1280px !important;margin:0 auto !important;}
.bp-about-koby{
display:grid !important;
grid-template-columns:528px 1fr !important;
gap:48px !important;
align-items:start !important;
margin-top:24px !important;
}
.bp-about-koby__media{
width:528px !important;
max-width:100% !important;
aspect-ratio:528 / 550 !important;
border-radius:18px !important;
overflow:hidden !important;
}
.bp-about-koby__media img{
width:100% !important;
height:100% !important;
object-fit:cover !important;
display:block !important;
}
.bp-about-koby__body p{
font-family:Poppins,sans-serif !important;
font-size:15px !important;
line-height:1.7 !important;
color:var(--bp-about-ink-2) !important;
margin:0 0 16px !important;
}
.bp-about-koby__body strong{
color:var(--bp-about-ink) !important;
font-weight:600 !important;
}
.bp-about-koby__body a{
color:var(--bp-about-ink) !important;
text-decoration:underline !important;
text-underline-offset:3px !important;
text-decoration-color:rgba(0,0,0,0.25) !important;
}
.bp-about-koby__body a:hover{color:var(--bp-about-mute) !important;}
/* Operator #9 (2026-05-03): creds grid sits OUTSIDE the .bp-about-koby image+body
2-col grid so it spans the full content width below the bio. */
.bp-about-koby__creds{
margin-top:48px !important;
display:grid !important;
grid-template-columns:repeat(3,1fr) !important;
gap:14px !important;
max-width:1280px !important;
}
.bp-about-cred{
padding:16px 20px !important;
background:var(--bp-about-surface) !important;
border-radius:14px !important;
border:1px solid var(--bp-about-line) !important;
}
.bp-about-cred__l{
font-family:Poppins,sans-serif !important;
font-size:10px !important;
letter-spacing:0.2em !important;
text-transform:uppercase !important;
color:var(--bp-about-mute) !important;
font-weight:600 !important;
margin-bottom:4px !important;
}
.bp-about-cred__v{
font-family:Poppins,sans-serif !important;
font-size:15px !important;
font-weight:500 !important;
line-height:1.3 !important;
letter-spacing:-0.005em !important;
color:var(--bp-about-ink) !important;
}
@media (max-width:768px){
.bp-about-koby-sect{padding:60px 24px !important;}
/* Stack: image above text (single-col grid). */
.bp-about-koby{
grid-template-columns:1fr !important;
gap:24px !important;
}
.bp-about-koby__media{
width:100% !important;
}
.bp-about-koby__creds{grid-template-columns:1fr !important;}
}
/* ---- Section 4 — Clients & Publications (V1 grid + V2 Featured-in)
Existing live class names preserved on individual
elements; new wrapper classes are bp-about-* prefixed. ---- */
/* Operator update 2026-05-04: render whole Clients & Publications section
as a large rounded card (the #fafafa bg with default square edges read as
a flat band; rounded corners + horizontal margin make the card metaphor
visible). */
.bp-about-clients-section{
padding:60px 60px 80px !important;
background:#fafafa !important;
border-radius:32px !important;
margin:24px 24px !important;
}
@media (max-width:768px){
.bp-about-clients-section{
border-radius:18px !important;
margin:16px 12px !important;
}
}
/* Operator #11 (2026-05-03): logos centered (was left-aligned auto-fill).
flex-wrap with justify-content:center centers each row including the
incomplete final row (grid auto-fill cannot center incomplete rows). */
.bp-about-logos-grid{
margin-top:40px !important;
display:flex !important;
flex-wrap:wrap !important;
justify-content:center !important;
gap:8px 12px !important;
align-items:center !important;
}
.bp-about-logos-grid .client-item{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
text-align:center !important;
height:96px !important;
width:140px !important;
flex:0 0 auto !important;
padding:8px 12px !important;
text-decoration:none !important;
border-radius:8px !important;
transition:background 160ms ease,opacity 160ms ease !important;
opacity:0.85 !important;
}
/* Hover bg = OPPOSITE of the section it sits in. Clients section has bg
#fafafa, so client-item hover is white. Operator request 2026-05-04. */
.bp-about-logos-grid .client-item:hover{
opacity:1 !important;
background:#ffffff !important;
}
.bp-about-logos-grid .client-item img{
max-width:100% !important;
max-height:48px !important;
width:auto !important;
height:auto !important;
object-fit:contain !important;
margin-bottom:0 !important;
opacity:0.7 !important;
transition:opacity 0.2s ease !important;
}
.bp-about-logos-grid .client-item:hover img{opacity:1 !important;}
.bp-about-logos-grid .client-item .client-name{
font-family:Poppins,sans-serif !important;
font-size:0.7rem !important;
font-weight:500 !important;
color:var(--bp-about-mute) !important;
opacity:0.85 !important;
line-height:1.3 !important;
margin-top:6px !important;
}
.bp-about-featured-in{
margin-top:48px !important;
padding-top:28px !important;
border-top:1px solid var(--bp-about-line) !important;
display:flex !important;
flex-wrap:wrap !important;
align-items:center !important;
justify-content:center !important;
gap:18px 28px !important;
}
.bp-about-featured-in__label{
font-family:Poppins,sans-serif !important;
font-size:10px !important;
letter-spacing:0.22em !important;
text-transform:uppercase !important;
color:var(--bp-about-mute) !important;
font-weight:600 !important;
flex-shrink:0 !important;
}
.bp-about-featured-in .client-item{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
text-align:center !important;
height:auto !important;
padding:8px 12px !important;
border-radius:8px !important;
text-decoration:none !important;
opacity:0.85 !important;
transition:background 160ms ease,opacity 160ms ease !important;
width:auto !important;
}
/* Featured in sits in the same #fafafa section as the main grid → hover white. */
.bp-about-featured-in .client-item:hover{
opacity:1 !important;
background:#ffffff !important;
}
.bp-about-featured-in .client-item img{
max-height:36px !important;
width:auto !important;
height:auto !important;
object-fit:contain !important;
opacity:0.75 !important;
transition:opacity 0.2s ease !important;
}
.bp-about-featured-in .client-item:hover img{opacity:1 !important;}
/* Operator update 2026-05-04 (round 5): show the company-name labels under
featured-in press logos to match the main client grid. */
.bp-about-featured-in .client-item .client-name{
font-family:Poppins,sans-serif !important;
font-size:0.65rem !important;
font-weight:500 !important;
color:var(--bp-about-mute) !important;
opacity:0.85 !important;
line-height:1.3 !important;
margin-top:6px !important;
display:block !important;
}
@media (max-width:768px){
.bp-about-clients-section{padding:40px 20px 60px !important;}
/* Operator update 2026-05-04: enforce a strict 2-column grid on mobile.
The desktop layout uses flex-wrap so the last partial row centers, but
on mobile that produced uneven columns (some rows 2 logos, some 3,
misaligned). Switching to `display: grid` with `repeat(2, 1fr)` locks
a fixed 2-column layout matching the speaking grid. ---- */
.bp-about-logos-grid{
display:grid !important;
grid-template-columns:repeat(2, 1fr) !important;
gap:8px !important;
justify-content:center !important;
}
.bp-about-logos-grid .client-item{
width:auto !important;
height:80px !important;
}
.bp-about-logos-grid .client-item img{max-height:40px !important;}
/* Featured-in: same 2-column grid pattern, with the "Featured in" label
spanning both columns at the top. */
.bp-about-featured-in{
display:grid !important;
grid-template-columns:repeat(2, 1fr) !important;
gap:8px !important;
justify-content:center !important;
}
.bp-about-featured-in__label{
grid-column:1 / -1 !important;
text-align:center !important;
margin-bottom:8px !important;
}
.bp-about-featured-in .client-item{
width:auto !important;
height:auto !important;
}
.bp-about-featured-in .client-item img{max-height:28px !important;}
/* Operator update 2026-05-04: center the last logo when it sits alone in
a partial row. In a 2-col grid:
- Clients grid (99 items, no label): last alone when count is odd
→ `:last-child:nth-child(odd)` matches the 99th item.
- Featured-in (label spans both cols + 7 items = 8 DOM children):
last alone when count is even → `:last-child:nth-child(even)`
matches the 8th DOM child (the 7th press logo).
Spanning `grid-column: 1 / -1` makes the lone item occupy the full row;
its inner flex (logo + name) centers within the spanning cell. ---- */
.bp-about-logos-grid > :last-child:nth-child(odd),
.bp-about-featured-in > .client-item:last-child:nth-child(even){
grid-column:1 / -1 !important;
}
}
/* ---- Section 5 — Speaking grid (4-over-2 centered, 6 venue logos)
Operator request 2026-05-03: section centered, 6 logos arranged 4 in row 1
and 2 centered in row 2. Items 5 & 6 explicitly placed at columns 2 & 3
so they appear centered below items 1–4. ---- */
.bp-about-speaking-section{padding:60px 60px 80px !important;background:#ffffff !important;text-align:center !important;}
.bp-about-speaking-section > h2,
.bp-about-speaking-section > .bp-about-sect-intro{
max-width:880px !important;
margin-left:auto !important;
margin-right:auto !important;
text-align:left !important;
}
.bp-about-speaking-grid{
margin:40px auto 0 !important;
display:grid !important;
grid-template-columns:repeat(4, 180px) !important;
gap:14px !important;
align-items:center !important;
justify-items:stretch !important;
justify-content:center !important;
max-width:880px !important;
}
.bp-about-speaking-grid > :nth-child(5){grid-column:2 !important;}
.bp-about-speaking-grid > :nth-child(6){grid-column:3 !important;}
.bp-about-speaking-grid .speaking-item{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
text-align:center !important;
width:auto !important;
height:96px !important;
padding:8px 12px !important;
text-decoration:none !important;
border-radius:8px !important;
transition:background 160ms ease,opacity 160ms ease !important;
opacity:0.85 !important;
}
/* Speaking section sits on white → hover #fafafa. */
.bp-about-speaking-grid .speaking-item:hover{
opacity:1 !important;
background:#fafafa !important;
}
.bp-about-speaking-grid .speaking-item img{
max-width:100% !important;
max-height:48px !important;
width:auto !important;
height:auto !important;
object-fit:contain !important;
margin-bottom:0 !important;
opacity:0.7 !important;
transition:opacity 0.2s ease !important;
}
.bp-about-speaking-grid .speaking-item:hover img{opacity:1 !important;}
.bp-about-speaking-grid .speaking-item .speaking-name{
font-family:Poppins,sans-serif !important;
font-size:0.7rem !important;
font-weight:500 !important;
color:var(--bp-about-mute) !important;
opacity:0.85 !important;
line-height:1.3 !important;
margin-top:6px !important;
}
@media (max-width:768px){
.bp-about-speaking-section{padding:40px 20px 60px !important;}
.bp-about-speaking-grid{grid-template-columns:repeat(2, 150px) !important;}
.bp-about-speaking-grid > :nth-child(5){grid-column:auto !important;}
.bp-about-speaking-grid > :nth-child(6){grid-column:auto !important;}
}
/* ---- Section 6 — Awards (live 2-col layout preserved + new pill headers)
Operator request 2026-05-03 #13: each column h3 carries a small "4 awards"
pill (in alternate font); the two columns become soft cards with bg + border.
Section is horizontally centered, text inside left-aligned. ---- */
.bp-about-awards-section{padding:60px 60px 80px !important;background:#fafafa !important;text-align:center !important;}
.bp-about-awards-section > h2,
.bp-about-awards-section > .bp-about-sect-intro{
max-width:880px !important;
margin-left:auto !important;
margin-right:auto !important;
text-align:left !important;
}
/* Operator update 2026-05-04 (round 2): extra bottom space between the intro
paragraph and the two award cards. */
.bp-about-awards-section > .bp-about-sect-intro{
padding-bottom:20px !important;
}
.bp-about-awards-section > .about-awards{
max-width:1080px !important;
margin-left:auto !important;
margin-right:auto !important;
}
/* Operator update 2026-05-04: strip the inner `.about-awards { background:#fff;
padding:10px 10px }` rule that the LIVE awards