/* ============================================================ SkyCity Auckland — Hero Page hero.css Block Grid content builder, contextual nav, age gate, hero tier. STATIC FILE — plain @media only (never @@media). Loads AFTER site.css. Reuses site.css components (.sc-rte / .sc-btn / .sc-gallery / .sc-flex-grid / .sc-menus / .sc-faq / .sc-section / .sc-container). ============================================================ */ /* ── Hero detail tier (600px) — neutral class, not coupled to Sky Tower ── */ .sc-hero--hero { min-height: 600px; } @media (max-width: 600px) { .sc-hero--hero { min-height: 460px; } } /* ── Intro blurb ───────────────────────────────────────────── */ .sc-hero-intro { max-width: 80ch; } /* ============================================================ BLOCK GRID — wrapper, bands, padding ============================================================ */ .sc-blk { padding-block: 1.5rem; } /* Optional per-block vertical padding (blockSettings.paddingY) */ .sc-blk--pad-s { padding-block: 0.5rem; } .sc-blk--pad-m { padding-block: 3rem; } .sc-blk--pad-l { padding-block: 6rem; } /* Optional background bands (blockSettings.background) */ .sc-blk--bg-grey { background: #f4f4f4; } .sc-blk--bg-dark { background: var(--sc-plum); color: var(--sc-white); } .sc-blk--bg-gold { background: var(--sc-gold); color: var(--sc-text); } /* Readability on dark/gold bands — force colours, never assume inheritance. (Same lesson as the What's On R20 dark block.) */ .sc-blk--bg-dark .sc-rte, .sc-blk--bg-dark .sc-rte p, .sc-blk--bg-dark .sc-rte li, .sc-blk--bg-dark .sc-rte h2, .sc-blk--bg-dark .sc-rte h3, .sc-blk--bg-dark .sc-rte h4, .sc-blk--bg-dark .sc-blk-heading__title, .sc-blk--bg-dark .sc-blk-heading__sub, .sc-blk--bg-dark .sc-blk-image__caption, .sc-blk--bg-dark .sc-blk-gallery__caption, .sc-blk--bg-dark .sc-blk-video__caption { color: var(--sc-white); } .sc-blk--bg-dark .sc-rte a:not(.sc-btn) { color: var(--sc-gold); } /* Dark-band menus (The District's MENUS band depends on this) */ .sc-blk--bg-dark .sc-menus, .sc-blk--bg-dark .sc-menus__heading, .sc-blk--bg-dark .sc-menus__note, .sc-blk--bg-dark .sc-menus__category-title, .sc-blk--bg-dark .sc-menus__category-subtitle { color: var(--sc-white); } .sc-blk--bg-dark .sc-menus__link { color: var(--sc-white); } .sc-blk--bg-dark .sc-menus__link:hover { color: var(--sc-gold); } /* Gold band */ .sc-blk--bg-gold .sc-rte, .sc-blk--bg-gold .sc-rte p, .sc-blk--bg-gold .sc-rte li, .sc-blk--bg-gold .sc-blk-heading__title, .sc-blk--bg-gold .sc-blk-heading__sub { color: var(--sc-text); } .sc-blk--bg-gold .sc-blk-heading__eyebrow { color: var(--sc-text); } .sc-blk--bg-gold .sc-rte a:not(.sc-btn) { color: var(--sc-text); text-decoration: underline; } /* ── Alignment helpers (rich text / heading / buttons) ───────── */ .sc-blk--align-center { text-align: center; } .sc-blk--align-right { text-align: right; } .sc-blk--align-center .sc-blk-heading__sub { margin-left: auto; margin-right: auto; } /* ============================================================ ROW / COLUMNS (blockRow) ============================================================ */ .sc-blk-row { max-width: var(--sc-max-width); margin: 0 auto; padding: 0 1.5rem; display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; } @media (min-width: 1024px) { .sc-blk-row { padding: 0 40px; } } @media (min-width: 768px) { .sc-blk-row--50-50 { grid-template-columns: 1fr 1fr; } .sc-blk-row--60-40 { grid-template-columns: 3fr 2fr; } .sc-blk-row--40-60 { grid-template-columns: 2fr 3fr; } .sc-blk-row--70-30 { grid-template-columns: 7fr 3fr; } .sc-blk-row--30-70 { grid-template-columns: 3fr 7fr; } .sc-blk-row--33-33-33 { grid-template-columns: 1fr 1fr 1fr; } .sc-blk-row--3col { grid-template-columns: repeat(3, 1fr); } /* 4-col: 2-up on tablet (avoids cramped columns); full 4-up at desktop (below) */ .sc-blk-row--4col { grid-template-columns: repeat(2, 1fr); } } /* 4-column rows reach full 4-up only at desktop width */ @media (min-width: 1024px) { .sc-blk-row--4col { grid-template-columns: repeat(4, 1fr); } } /* Inside a column, neutralise nested container gutters / max-width so blocks fill the column cleanly (no double gutters from recursion). */ .sc-blk-col .sc-container { max-width: none; padding-left: 0; padding-right: 0; } .sc-blk-col .sc-blk-row { max-width: none; padding-left: 0; padding-right: 0; } .sc-blk-col .sc-blk { padding-block: 0.75rem; } .sc-blk-col > .sc-blk:first-child { padding-top: 0; } /* ============================================================ RICH TEXT (blockRichText) ============================================================ */ .sc-blk-rte { max-width: 80ch; } .sc-blk-rte.sc-blk--align-center { margin-left: auto; margin-right: auto; } /* ============================================================ HEADING (blockHeading) ============================================================ */ .sc-blk-heading__eyebrow { display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sc-plum); margin-bottom: .5rem; } .sc-blk-heading__title { font-size: 1.75rem; font-weight: 800; margin: 0 0 .5rem; line-height: 1.2; } .sc-blk-heading__sub { font-size: 1.05rem; color: rgba(0,0,0,.6); margin: 0; max-width: 60ch; } /* ============================================================ IMAGE (blockImage) ============================================================ */ .sc-blk-image-wrap--full { width: 100%; } .sc-blk-image { margin: 0; } .sc-blk-image__img { display: block; width: 100%; height: auto; border-radius: var(--sc-radius-card); } .sc-blk-image-wrap--full .sc-blk-image__img { border-radius: 0; } .sc-blk-image__caption { margin: .6rem 0 0; font-size: .8125rem; color: rgba(0,0,0,.55); text-align: center; } /* Uniform card images — equal-height rows in card grids. Scoped to row columns (.sc-blk-col) so standalone images (the car-park map, full-bleed blocks) keep their natural ratio. object-fit:cover centre-crops each photo into a common 4:3 frame; reserving caption height keeps the card bottoms aligned when a label wraps to two lines. */ .sc-blk-row .sc-blk-col .sc-blk-image__img { aspect-ratio: 4 / 3; height: auto; object-fit: cover; } .sc-blk-row .sc-blk-col .sc-blk-image__caption { min-height: 2.6em; } /* ============================================================ GALLERY (blockGallery) — grid reuses .sc-gallery from site.css ============================================================ */ .sc-blk-gallery__caption { margin: .75rem 0 0; font-size: .8125rem; color: rgba(0,0,0,.55); } /* ============================================================ VIDEO (blockVideo) — responsive 16:9 facade iframe ============================================================ */ .sc-blk-video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--sc-radius-card); overflow: hidden; background: #000; } .sc-blk-video__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .sc-blk-video__caption { margin: .6rem 0 0; font-size: .8125rem; color: rgba(0,0,0,.55); text-align: center; } /* ============================================================ BUTTONS (blockButtons) ============================================================ */ .sc-blk-buttons { display: flex; flex-wrap: wrap; gap: .75rem; } .sc-blk-buttons.sc-blk--align-center { justify-content: center; } .sc-blk-buttons.sc-blk--align-right { justify-content: flex-end; } /* ============================================================ CARD GRID (blockCards) — reuses _PageTiles / .sc-flex-grid columns is a soft hint; cols-2 narrows the band so 2-up sits centred. ============================================================ */ .sc-blk-cards__heading { font-size: 1.5rem; font-weight: 800; margin: 0; } .sc-blk-cards--cols-2 { max-width: 920px; margin-inline: auto; } /* ============================================================ EMBED (blockEmbed) — URL mode (raw code mode sizes itself) ============================================================ */ .sc-blk-embed { position: relative; width: 100%; border-radius: var(--sc-radius-card); overflow: hidden; background: #000; } .sc-blk-embed--16-9 { aspect-ratio: 16 / 9; } .sc-blk-embed--4-3 { aspect-ratio: 4 / 3; } .sc-blk-embed--1-1 { aspect-ratio: 1 / 1; } .sc-blk-embed__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .sc-blk-embed-raw { width: 100%; } /* ============================================================ SPACER / DIVIDER (blockSpacer) ============================================================ */ .sc-blk-spacer { display: flex; align-items: center; } .sc-blk-spacer--s { height: 1rem; } .sc-blk-spacer--m { height: 2.5rem; } .sc-blk-spacer--l { height: 5rem; } .sc-blk-spacer__rule { width: 100%; border: 0; border-top: 1px solid rgba(0,0,0,.12); margin: 0; } .sc-blk--bg-dark .sc-blk-spacer__rule { border-top-color: rgba(255,255,255,.18); } /* ============================================================ CONTEXTUAL NAV (_ContextualNav) ============================================================ */ .sc-ctxnav { background: var(--sc-white); border-bottom: 1px solid rgba(0,0,0,.1); } .sc-ctxnav--sticky { position: sticky; top: var(--sc-nav-height); z-index: 500; } .sc-ctxnav__inner { display: flex; gap: .25rem; max-width: var(--sc-max-width); margin: 0 auto; padding: 0 1.5rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .sc-ctxnav__inner::-webkit-scrollbar { display: none; } @media (min-width: 1024px) { .sc-ctxnav__inner { padding: 0 40px; } } .sc-ctxnav__link { display: inline-block; white-space: nowrap; padding: 1rem .9rem; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sc-text); text-decoration: none; border-bottom: 3px solid transparent; transition: color .2s, border-color .2s; } .sc-ctxnav__link:hover { color: var(--sc-plum); } .sc-ctxnav__link.is-active { color: var(--sc-plum); border-bottom-color: var(--sc-gold); } /* ============================================================ AGE GATE (_AgeGate) — blocking dialog, SkyCity palette (gold confirm) ============================================================ */ .sc-agegate { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; color: var(--sc-white); } .sc-agegate::backdrop { background: rgba(10,10,10,.78); backdrop-filter: blur(6px); } .sc-agegate__panel { background: var(--sc-plum); color: var(--sc-white); border: 1px solid var(--sc-gold); border-radius: var(--sc-radius-card); padding: 2.5rem 2rem; width: min(440px, calc(100vw - 2rem)); text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.5); } .sc-agegate__title { font-size: 1.5rem; font-weight: 800; margin: 0 0 1rem; color: var(--sc-white); } .sc-agegate__body { color: rgba(255,255,255,.85); margin-bottom: 1.75rem; } .sc-agegate__body p { margin: 0 0 .75rem; } .sc-agegate__body p:last-child { margin-bottom: 0; } .sc-agegate__actions { display: flex; flex-direction: column; gap: .75rem; } .sc-agegate__actions .sc-btn { width: 100%; justify-content: center; } .sc-agegate[open] { animation: scAgeGateIn .25s ease; } @keyframes scAgeGateIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .sc-agegate[open] { animation: none; } } /* ============================================================ FEATURE CARD (featureCard) — Content Builder promo card White surface so text stays legible on any .sc-blk band. --top mirrors the homepage "Luxury Hotels" cards; --left the "Dining & Experiences" media object. Whole face is a stretched link when a link is set (CLAUDE §4); plain card when not. ============================================================ */ .sc-feature-card { position: relative; /* containing block for the stretch overlay */ display: flex; flex-direction: column; height: 100%; /* fill a stretched row column so a row is equal-height */ background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: var(--sc-radius-card); overflow: hidden; color: var(--sc-text); transition: box-shadow .25s, transform .25s; } /* Hover lift only when the card actually links somewhere */ .sc-feature-card--link:hover { box-shadow: 0 8px 32px rgba(0,0,0,.12); transform: translateY(-2px); } .sc-feature-card__figure { margin: 0; overflow: hidden; background: #f4f4f4; } .sc-feature-card__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .sc-feature-card__body { display: flex; flex-direction: column; flex: 1 1 auto; gap: .5rem; padding: 1.25rem; } .sc-feature-card__eyebrow { font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sc-plum); } .sc-feature-card__heading { font-family: var(--sc-font); font-size: 1.1875rem; font-weight: 700; line-height: 1.25; margin: 0; color: var(--sc-text); } .sc-feature-card__summary { font-size: .9rem; line-height: 1.6; color: rgba(51,51,51,.9); margin: 0; } /* Decorative gold pill — the stretch link owns the click, so it must never intercept */ .sc-feature-card__cta { align-self: flex-start; margin-top: .35rem; pointer-events: none; display: inline-block; padding: .5rem 1.25rem; background: var(--sc-gold); color: var(--sc-white); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-radius: var(--sc-radius-btn); } .sc-feature-card--link:hover .sc-feature-card__cta { background: var(--sc-gold-80); } /* Stretched link — the itself is taken OUT OF FLOW. Left in flow it became a grid item in --left and displaced the image into the right-hand column. */ .sc-feature-card__stretch { position: absolute; inset: 0; z-index: 1; } .sc-feature-card__stretch:focus-visible { outline: 2px solid var(--sc-gold); outline-offset: -2px; } /* --top: vertical — image (~3/2) then body */ .sc-feature-card--top .sc-feature-card__figure { aspect-ratio: 3 / 2; } /* --left: image left / text right (~40/60) at ≥768px; stacks image-top below */ .sc-feature-card--left .sc-feature-card__figure { aspect-ratio: 3 / 2; } @media (min-width: 768px) { .sc-feature-card--left { display: grid; grid-template-columns: 2fr 3fr; align-items: stretch; } .sc-feature-card--left .sc-feature-card__figure { aspect-ratio: auto; height: 100%; } .sc-feature-card--left .sc-feature-card__body { justify-content: center; padding: 1.75rem; } } /* Equal-height: a row of feature cards fills to the tallest column. The block row is a grid with align-items:start, so opt just the card columns into stretch and pass height down through the block wrappers. Each :has() stays in its own rule. */ .sc-blk-row .sc-blk-col:has(.sc-feature-card) { align-self: stretch; } .sc-blk-col:has(.sc-feature-card) > .sc-blk { height: 100%; } .sc-blk-col:has(.sc-feature-card) > .sc-blk > .sc-container { height: 100%; } /* ============================================================ IMAGE-LINK HOVER — CARD LIFT SUPPRESSION (Content Builder feature cards, 2026-07-03) Matches site.css: no lift, no drop shadow on hover. The feature card has no resting shadow (border only), so the hover shadow is removed outright. The stretch-link keeps its own focus outline (a11y). 🔴 The image half was DELETED 2026-08-07 (Adam) — both the zoom above and the `opacity: .85` fade that had merely MASKED it. Feature-card images now have no hover treatment. 📖 docs/LESSONS.md §L7. ============================================================ */ .sc-feature-card--link:hover { transform: none; box-shadow: none; } /* ============================================================ TRUSTEE PROFILE CARDS (Community Trust — AKL / HAM / QTN, 2026-08-12) ------------------------------------------------------------ One blockRow per trustee: portrait in col1, name + bio in col2. Scoped ENTIRELY under [id^="trustee-"], which comes from the block's own blockSettings.anchorId — so nothing here can reach another Content Builder row on any other page. 🔴 SPECIFICITY, DELIBERATE: the portrait rule below repeats `.sc-blk-row .sc-blk-col` purely to beat the 4:3 card rule at line ~143 (0,3,1). A shorter `[id^="trustee-"] .sc-blk-image__img` is (0,2,1) and LOSES — the portraits would silently render 4:3 landscape and look like a design choice. No !important is needed: (0,4,1) wins on merit. 🔴 The image block emits NO object-position — verified on rendered pages 2026-08-12 (30 blockImages across two live pages, none carrying a style attribute). Media focal points therefore do NOT reach this crop, so the framing below is set here or it is dead centre. See docs/REFERENCE.md. ============================================================ */ /* Card box. Sits on .sc-blk-row because that element already carries the row's horizontal padding, so the border lands outside a sensible inset. padding-block is stated at (0,2,1) so it survives the `padding: 0 40px` shorthand at line 82, which would otherwise reset it to 0 at >=1024px. */ [id^="trustee-"] .sc-blk-row { padding-block: 1.5rem; border: 1px solid var(--sc-plum-20); border-radius: var(--sc-radius-card); align-items: start; } /* Portrait-left proportions. Plain @media — hero.css is a static file. */ @media (min-width: 768px) { [id^="trustee-"] .sc-blk-row--50-50 { grid-template-columns: minmax(0, 220px) 1fr; } } /* Lone column — _ContentBlocks skips an empty area, so a row with the photo removed emits a single .sc-blk-col that would otherwise sit in the 220px portrait track. In its OWN rule: an engine that cannot parse :has() must drop only this, never a neighbour. */ [id^="trustee-"] .sc-blk-row:has(> .sc-blk-col:only-child) { grid-template-columns: 1fr; } /* The portrait itself. 4/5 is the forgiving portrait ratio. 220px cap also governs <768px, where the row collapses to one column and the image would otherwise go full width. 🔴 object-position is CENTRE, and that was MEASURED, not defaulted — do not re-introduce an upward bias. All 19 trustee sources were measured 2026-08-12: 18 are portrait (almost all exactly 2:3, 0.667) and ONE is landscape (Michelle Baillie, 400x276). Rendering every source into this 220x275 box at both 30% and 50% showed centre better composed on every portrait — an upward bias just opens dead headroom and eats the torso, because these are already professionally framed headshots. ⚠️ And the premise for a bias was wrong anyway: with object-fit:cover, a source WIDER than the box is cropped on the SIDES, so the vertical component does nothing at all to it. Michelle Baillie renders pixel-identical at 30% and 50%. Vertical position only ever affects sources TALLER than 4:5 — and for those, centre is right. */ [id^="trustee-"] .sc-blk-row .sc-blk-col .sc-blk-image__img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 50%; } [id^="trustee-"] .sc-blk-col .sc-blk-image { max-width: 220px; } /* <768px the row collapses to one column, so the 220px-capped FIGURE sits flush left in a full-width column and leaves dead space beside it. Centre it. 🔴 The element is the FIGURE, and that was measured, not assumed — the two obvious candidates are both wrong: · `.sc-blk-image__img` is `width:100%` of the figure, so it ALREADY fills its 220px parent exactly. max-width/margin-inline on it is a no-op — the dead space is outside the img, in the figure. · `.sc-blk-col` is the grid item and already spans the row symmetrically. Measured in-page at a simulated 390px phone: col 260px (41px each side, even), figure 220px at 41px left / 81px right — a 60px right-hand gap. Only the figure is the off-centre box. Beats `.sc-blk-image { margin: 0 }` (0,1,0) on specificity at (0,2,1); no !important. Crop is untouched — object-position stays 50% 50%. */ @media (max-width: 767px) { [id^="trustee-"] .sc-blk-col .sc-blk-image { margin-inline: auto; } } /* Captions are deliberately blank on these cards (blank caption => alt="", the correct WCAG treatment when adjacent text names the person), so the reserved caption height from line ~148 must not open a gap. */ [id^="trustee-"] .sc-blk-row .sc-blk-col .sc-blk-image__caption { min-height: 0; } /* Name + affiliation. The name is an

inside blockRichText. */ [id^="trustee-"] .sc-blk-rte h3 { margin: 0 0 .35rem; font-size: 1.25rem; line-height: 1.25; } /* Affiliation line — a paragraph that is nothing but an (iwi, pepeha). Own rule, :has() again. */ [id^="trustee-"] .sc-blk-rte p:has(> em:only-child) { margin: 0 0 .75rem; color: var(--sc-plum); font-size: .9375rem; }