/* ==========================================================================
Portraits of Resilience — Jonathan Banks
Palette: dark grey, light grey, white, black, mustard.
Type: Fraunces (Elido-alt serif) + Manrope (Degular-alt sans).
========================================================================== */
:root {
/* Client palette (Feedback v2, image1): warm-grey + off-white + gold */
--por-black: #0e0e0e; /* reserved for hero image gradient only */
--por-warm-grey: #767676; /* section surface (nav, story panels, tables) */
--por-warm-grey-2: #6a6a6a;
--por-off-white: #ececea; /* page paper */
--por-off-white-2: #f4f3ef;
--por-quote-grey: #d9d7d3; /* rounded testimonial cards */
--por-ink: #232323; /* body text on light */
--por-ink-muted: #565656;
--por-white: #ffffff;
--por-mustard: #e3b95c; /* gold accent (decorative only — 2.45:1 on warm-grey) */
--por-mustard-deep: #9b7a2f; /* large text / focus rings — 3.4:1 on off-white */
--por-mustard-ink: #6b5220; /* body-size text on off-white — 5.6:1 ✓ AA */
--por-mustard-soft: #f0d896;
/* Legacy aliases so existing selectors keep working during transition */
--por-dark: var(--por-warm-grey);
--por-dark-elev: #7d7d7d;
--por-mid: #575757;
--por-light: var(--por-off-white);
--por-light-warm: var(--por-off-white-2);
--por-rule: rgba(255,255,255,0.22);
--por-rule-light: #cfccc4;
--por-serif: "Fraunces", "Cormorant Garamond", Georgia, serif;
--por-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}
/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
margin: 0;
background: var(--por-off-white);
color: var(--por-ink);
font-family: var(--por-sans);
font-size: 16px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
/* WCAG 1.4.11: mustard-deep gives 3.43:1 on off-white, 4.87:1 on warm-grey */
outline: 2px solid var(--por-mustard-deep);
outline-offset: 3px;
border-radius: 2px;
}
/* On dark hero image + on warm-grey nav the deep mustard also has to stand out;
pair it with a subtle inner light ring so it never disappears against a photo. */
.hero-stage a:focus-visible,
.hero-stage button:focus-visible,
.por-nav.transparent a:focus-visible,
.por-nav.transparent button:focus-visible {
outline-color: var(--por-mustard);
box-shadow: 0 0 0 4px rgba(14,14,14,0.55);
}
::selection { background: var(--por-mustard); color: var(--por-black); }
/* ---------- Utilities ---------- */
.visually-hidden {
position: absolute; width: 1px; height: 1px; padding: 0;
margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
white-space: nowrap; border: 0;
}
.skip-link {
position: absolute; top: 0; left: 0;
transform: translateY(-120%);
background: var(--por-ink); color: var(--por-white);
padding: 0.75rem 1rem;
font-family: var(--por-sans); font-weight: 600;
font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase;
z-index: 100;
border-radius: 0 0 4px 0;
transition: transform .18s ease;
}
.skip-link:focus { transform: translateY(0); outline: 2px solid var(--por-mustard); outline-offset: 2px; }
.container-x {
max-width: 1240px;
padding-left: clamp(1.25rem, 4vw, 3.5rem);
padding-right: clamp(1.25rem, 4vw, 3.5rem);
margin-left: auto; margin-right: auto;
}
.container-narrow {
max-width: 780px;
padding-left: clamp(1.25rem, 4vw, 3.5rem);
padding-right: clamp(1.25rem, 4vw, 3.5rem);
margin-left: auto; margin-right: auto;
}
/* Section themes — warm palette (v2) */
.sec-dark { background: var(--por-off-white); color: var(--por-ink); } /* was dark; now paper */
.sec-darker { background: var(--por-off-white-2); color: var(--por-ink); } /* was near-black; now slightly warmer paper */
.sec-warm { background: var(--por-warm-grey); color: var(--por-white); } /* warm grey panels (sub-nav, story panels, exhibitions block) */
.sec-dark-elev { background: var(--por-warm-grey); color: var(--por-white); }
.sec-light { background: var(--por-off-white); color: var(--por-ink); }
.sec-white { background: var(--por-white); color: var(--por-ink); }
.sec-pad { padding: clamp(4rem, 8vw, 7rem) 0; }
.sec-pad-lg { padding: clamp(6rem, 11vw, 10rem) 0; }
.sec-pad-sm { padding: clamp(2.5rem, 5vw, 4rem) 0; }
/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 400; }
p { margin: 0 0 1rem; }
.display-xxl { font-family: var(--por-serif); font-weight: 300; font-size: clamp(2.75rem, 7vw, 5.25rem); line-height: 1.02; letter-spacing: -0.025em; }
.display-l { font-family: var(--por-serif); font-weight: 300; font-size: clamp(2.25rem, 5.5vw, 4rem); line-height: 1.05; letter-spacing: -0.02em; }
.display-m { font-family: var(--por-serif); font-weight: 300; font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.1; letter-spacing: -0.015em; }
.display-s { font-family: var(--por-serif); font-weight: 400; font-size: clamp(1.35rem, 2.5vw, 1.75rem); line-height: 1.25; letter-spacing: -0.01em; }
.italicise, em.i { font-style: italic; font-weight: 300; }
.body-l { font-size: 1.0625rem; line-height: 1.75; }
.body-m { font-size: 0.9625rem; line-height: 1.7; }
.body-s { font-size: 0.8375rem; line-height: 1.55; }
/* Kicker default: darker gold clears AA 4.5:1 on off-white for the ~0.72rem type. */
.kicker {
display: inline-block;
font-family: var(--por-sans);
font-weight: 600;
font-size: 0.72rem;
letter-spacing: 0.35em;
text-transform: uppercase;
color: var(--por-mustard-ink);
}
/* On warm-grey / dark-elev sections use white + mustard-soft — bright mustard on warm-grey is 2.45:1. */
.sec-warm .kicker, .sec-dark-elev .kicker { color: var(--por-mustard-soft); }
.kicker-light { color: var(--por-rule-light); }
.mustard { color: var(--por-mustard); }
.muted { color: var(--por-ink-muted); }
.muted-dark { color: rgba(14, 14, 14, 0.65); }
/* Striking pull-quote line (used on Home hero — the one the client wants moved from About) */
.striking-line {
font-family: var(--por-serif);
font-weight: 400;
font-size: clamp(1.75rem, 4.5vw, 3rem);
line-height: 1.15;
letter-spacing: -0.015em;
color: var(--por-ink);
padding: clamp(2rem, 4vw, 3rem) 0;
border-top: 1px solid var(--por-rule-light);
border-bottom: 1px solid var(--por-rule-light);
margin: clamp(2rem, 4vw, 3rem) 0;
}
/* ---------- Buttons ---------- */
.btn-por {
display: inline-flex; align-items: center; gap: 0.6rem;
font-family: var(--por-sans); font-weight: 600;
font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase;
padding: 0.85rem 1.4rem;
border-radius: 999px;
border: 1px solid var(--por-ink);
color: var(--por-ink); background: transparent;
transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
cursor: pointer;
}
.btn-por:hover { background: var(--por-ink); color: var(--por-white); }
.btn-por.mustard-fill { background: var(--por-mustard); border-color: var(--por-mustard); color: var(--por-black); }
.btn-por.mustard-fill:hover { background: var(--por-mustard-deep); border-color: var(--por-mustard-deep); color: var(--por-white); }
.btn-por.on-light { border-color: var(--por-ink); color: var(--por-ink); }
.btn-por.on-light:hover { background: var(--por-ink); color: var(--por-white); }
.btn-por.on-dark { border-color: var(--por-white); color: var(--por-white); }
.btn-por.on-dark:hover { background: var(--por-white); color: var(--por-ink); }
/* ---------- Nav ---------- */
.por-nav {
position: sticky; top: 0; z-index: 40;
background: var(--por-warm-grey);
border-bottom: 1px solid rgba(0,0,0,0.08);
padding: 1rem clamp(1.25rem, 4vw, 3rem);
transition: background .25s ease, border-color .25s ease;
}
/* Home nav — transparent over the slideshow, snaps to solid on hover, and after scroll */
.por-nav.transparent {
background: transparent;
border-bottom-color: transparent;
}
.por-nav.transparent:hover,
.por-nav.transparent:focus-within {
background: rgba(14,14,14,0.78);
backdrop-filter: saturate(140%) blur(10px);
-webkit-backdrop-filter: saturate(140%) blur(10px);
border-bottom-color: rgba(255,255,255,0.14);
}
.por-nav-inner {
display: flex; align-items: center; justify-content: space-between;
gap: 1rem;
max-width: 1400px; margin: 0 auto;
}
.por-wordmark {
font-family: var(--por-serif); font-weight: 400;
font-size: 1.15rem; letter-spacing: 0.02em;
color: var(--por-white); text-decoration: none;
white-space: nowrap;
}
.por-wordmark .em { color: var(--por-mustard); font-style: italic; }
.por-wordmark.hide { opacity: 0; pointer-events: none; } /* used on homepage per brief: no logo on front */
.por-nav-links {
list-style: none; padding: 0; margin: 0;
display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2rem);
}
.por-nav-links a {
font-family: var(--por-sans); font-weight: 500;
font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--por-white); text-decoration: none;
padding: 0.4rem 0;
border-bottom: 1px solid transparent;
transition: border-color .18s ease, color .18s ease;
}
/* Keep text white on warm-grey for AA (mustard is 2.45:1); accent goes on the underline. */
.por-nav-links a:hover,
.por-nav-links a[aria-current="page"] { border-bottom-color: var(--por-mustard); color: var(--por-white); }
.por-nav-links a[aria-current="page"] { border-bottom-width: 2px; }
.por-nav-toggle {
display: none;
font-family: var(--por-sans); font-weight: 600;
font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase;
color: var(--por-white); background: transparent;
border: 1px solid var(--por-rule); border-radius: 999px;
padding: 0.55rem 1rem; cursor: pointer;
}
@media (max-width: 860px) {
.por-nav-toggle { display: inline-flex; align-items: center; gap: 0.4rem; }
.por-nav-links {
position: absolute; top: 100%; left: 0; right: 0;
background: var(--por-black);
flex-direction: column; align-items: stretch; gap: 0;
padding: 0.5rem 0 1rem;
border-bottom: 1px solid var(--por-rule);
max-height: 0; overflow: hidden;
transition: max-height .3s ease;
}
.por-nav-links.open { max-height: 60vh; }
.por-nav-links li { border-top: 1px solid var(--por-rule); }
.por-nav-links a { display: block; padding: 1rem 1.5rem; }
}
/* ---------- Homepage hero slideshow ---------- */
.hero-stage {
position: relative;
min-height: 100vh;
background: var(--por-black);
overflow: hidden;
}
.hero-slides {
position: absolute; inset: 0;
}
.hero-slide {
position: absolute; inset: 0;
background-size: cover; background-position: center;
opacity: 0;
transition: opacity 1.4s ease;
}
.hero-slide.is-active { opacity: 1; }
.hero-slide::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg,
rgba(14,14,14,0.55) 0%,
rgba(14,14,14,0.15) 30%,
rgba(14,14,14,0.35) 65%,
rgba(14,14,14,0.85) 100%);
}
.hero-content {
position: relative; z-index: 2;
min-height: 100vh;
display: grid; grid-template-rows: auto 1fr auto;
padding: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 4vw, 3.5rem) 0;
max-width: 1400px; margin: 0 auto;
}
/* Hero title — clean humanist sans per client feedback (no twiddly f/l) */
.hero-headline {
align-self: start; /* moved to top-left safe zone */
padding-top: clamp(3rem, 8vw, 6rem);
padding-bottom: clamp(1.5rem, 4vw, 3rem);
max-width: 900px;
}
.hero-headline .hero-title {
font-family: var(--por-sans);
font-weight: 500;
font-size: clamp(2.5rem, 6.5vw, 5rem);
line-height: 1.02;
letter-spacing: -0.02em;
color: var(--por-white);
margin: 0;
}
.hero-headline .hero-title em { font-style: normal; font-weight: 500; color: var(--por-white); }
.hero-headline .kicker { color: var(--por-mustard-soft); }
.hero-headline p { color: rgba(255,255,255,0.85); max-width: 620px; font-size: 1.05rem; }
/* Bottom-left tagline pinned above the button row */
.hero-tagline {
position: absolute;
left: clamp(1.25rem, 4vw, 3.5rem);
bottom: clamp(6rem, 12vw, 8rem);
right: auto; max-width: 32rem;
font-family: var(--por-sans); font-weight: 500;
font-size: clamp(1.1rem, 2vw, 1.4rem);
line-height: 1.35;
color: var(--por-white);
z-index: 3;
text-shadow: 0 2px 20px rgba(0,0,0,0.55);
}
.hero-bottom {
display: grid; grid-template-columns: 1fr auto; gap: 1.5rem;
align-items: end;
padding: clamp(1rem, 3vw, 2rem) 0 clamp(1.5rem, 4vw, 3rem);
border-top: 1px solid rgba(255,255,255,0.14);
margin-top: clamp(1.5rem, 4vw, 3rem);
}
.hero-slide-caption {
font-family: var(--por-sans); font-weight: 500;
font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--por-white);
text-shadow: 0 1px 2px rgba(0,0,0,0.65);
}
.hero-dots {
display: flex; gap: 0.5rem; justify-content: flex-end;
}
.hero-dots button {
width: 30px; height: 3px; padding: 0; border: 0;
background: rgba(255,255,255,0.3); cursor: pointer;
transition: background .2s ease;
}
.hero-dots button[aria-current="true"] { background: var(--por-mustard); }
@media (max-width: 620px) {
.hero-bottom { grid-template-columns: 1fr; }
.hero-dots { justify-content: flex-start; }
}
/* ---------- Latest news box (on home) — light theme ---------- */
.latest-news {
display: grid; grid-template-columns: 1fr;
gap: clamp(1.5rem, 3vw, 2.5rem);
align-items: start;
}
@media (min-width: 780px) {
.latest-news { grid-template-columns: 320px 1fr; }
}
.latest-news h2 {
font-family: var(--por-serif); font-weight: 300;
font-size: clamp(2rem, 4vw, 3rem);
line-height: 1.05; color: var(--por-ink);
}
.latest-news .kicker { margin-bottom: 0.75rem; }
.news-mini-list { display: grid; gap: 1.5rem; }
.news-mini {
display: grid; grid-template-columns: 120px 1fr; gap: 1rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--por-rule-light);
text-decoration: none; color: inherit;
}
.news-mini:last-child { border-bottom: 0; padding-bottom: 0; }
.news-mini img { aspect-ratio: 4/3; object-fit: cover; width: 100%; border-radius: 6px; }
.news-mini .date {
display: block;
font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--por-mustard-deep); margin-bottom: 0.35rem;
}
.news-mini h3 {
font-family: var(--por-serif); font-weight: 400;
font-size: 1.15rem; line-height: 1.3; color: var(--por-ink);
margin-bottom: 0.4rem;
}
.news-mini p { font-size: 0.9rem; color: var(--por-ink-muted); margin: 0; }
.news-mini:hover h3 { color: var(--por-mustard-deep); }
/* ---------- About: introduction ---------- */
.about-intro { max-width: 780px; margin: 0 auto; }
.about-intro p { color: var(--por-ink); font-size: 1.0625rem; line-height: 1.8; }
.about-intro blockquote {
margin: 2rem 0;
padding: 1.5rem 0 1.5rem 1.5rem;
border-left: 3px solid var(--por-mustard-deep);
font-family: var(--por-serif); font-style: italic; font-weight: 300;
font-size: 1.2rem; line-height: 1.5;
color: var(--por-ink);
}
.about-intro blockquote cite {
display: block; margin-top: 0.75rem;
font-family: var(--por-sans); font-style: normal; font-weight: 500;
font-size: 0.85rem; letter-spacing: 0.05em;
color: var(--por-mustard-deep);
}
.about-intro .display-l { color: var(--por-ink) !important; }
.about-intro .display-l em { color: var(--por-mustard-deep) !important; }
/* ---------- Testimonials — rounded light-grey cards per feedback ---------- */
.quotes-stack { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.quote-card {
background: var(--por-quote-grey);
border: 0;
border-radius: 18px;
padding: clamp(1.75rem, 3vw, 2.5rem);
}
.quote-card .mark {
font-family: var(--por-serif); font-size: 3rem; line-height: 1;
color: var(--por-mustard-deep); margin-bottom: 0.5rem;
}
.quote-card p {
font-family: var(--por-sans); font-weight: 400; font-style: normal;
font-size: clamp(1.05rem, 1.8vw, 1.25rem); line-height: 1.55;
color: var(--por-ink); margin-bottom: 1rem;
}
.quote-card .attr {
font-size: 0.82rem; letter-spacing: 0.05em;
color: var(--por-mustard-deep);
}
.quote-card .attr strong { color: var(--por-ink); font-weight: 600; margin-right: 0.5rem; }
/* ---------- Exhibitions / Campaign Trail — warm-grey block with gallery col ---------- */
.exhibitions-block {
background: var(--por-warm-grey); color: var(--por-white);
border-radius: 8px;
padding: clamp(2rem, 4vw, 3.5rem);
}
.exhibitions-block h2 { color: var(--por-white); }
.exhibitions-table {
width: 100%; border-collapse: collapse;
font-family: var(--por-sans);
}
.exhibitions-table thead th {
text-align: left; font-weight: 600;
font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--por-mustard);
padding: 1rem 1rem 1rem 0;
border-bottom: 1px solid rgba(255,255,255,0.35);
}
.exhibitions-table tbody td {
padding: 1.25rem 1rem 1.25rem 0;
border-bottom: 1px solid rgba(255,255,255,0.16);
vertical-align: top;
font-size: 0.92rem;
color: var(--por-white);
}
.exhibitions-table tbody tr:last-child td { border-bottom: 0; }
.exhibitions-table .date-col { white-space: nowrap; color: var(--por-white); font-weight: 500; }
.exhibitions-table .loc-col { color: var(--por-mustard-soft); }
.exhibitions-table .gallery-col { width: 190px; padding-right: 0; }
.exhibitions-table .gallery-thumb {
display: block; width: 180px; height: 96px;
overflow: hidden; border-radius: 6px;
border: 1px solid rgba(255,255,255,0.18);
cursor: pointer; background: rgba(0,0,0,0.15);
transition: transform .2s ease, box-shadow .2s ease;
}
.exhibitions-table .gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.exhibitions-table .gallery-thumb:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.25); }
.exhibitions-hint {
margin-top: 1rem;
font-size: 0.78rem; letter-spacing: 0.08em;
color: var(--por-mustard-soft); text-align: right;
}
@media (max-width: 720px) {
.exhibitions-table, .exhibitions-table thead, .exhibitions-table tbody,
.exhibitions-table tr, .exhibitions-table td, .exhibitions-table th { display: block; }
.exhibitions-table thead { display: none; }
.exhibitions-table tr { padding: 1.25rem 0; border-bottom: 1px solid rgba(255,255,255,0.16); }
.exhibitions-table td { padding: 0.1rem 0; border: 0; }
.exhibitions-table .date-col { color: var(--por-mustard-soft); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 0.35rem; }
.exhibitions-table .gallery-col { padding-top: 0.6rem; }
.exhibitions-table .gallery-thumb { width: 100%; height: 160px; }
}
/* ---------- Bio + slideshow ---------- */
.bio-wrap { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 900px) { .bio-wrap { grid-template-columns: 1fr 1.25fr; align-items: start; } }
.bio-photos {
position: relative; aspect-ratio: 4/5; overflow: hidden;
background: var(--por-dark-elev);
}
.bio-photos img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; opacity: 0;
transition: opacity 1s ease;
}
.bio-photos img.is-active { opacity: 1; }
.bio-photos img:first-child { opacity: 1; } /* Progressive-enhancement fallback: first image visible without JS */
.bio-photos:has(img.is-active) img:first-child:not(.is-active) { opacity: 0; }
.bio-copy p { color: var(--por-ink); font-size: 1rem; line-height: 1.8; }
.bio-copy .btn-por { margin-top: 1.25rem; }
/* ---------- Partners marquee ---------- */
.marquee-wrap { overflow: hidden; padding: 2rem 0; background: var(--por-light); }
.marquee-track {
display: flex; gap: clamp(2rem, 4vw, 3.5rem); align-items: center;
animation: marquee 40s linear infinite;
width: max-content;
}
.marquee-item {
flex: 0 0 auto;
display: flex; align-items: center; justify-content: center;
height: 60px;
}
.marquee-item img {
max-height: 52px; width: auto; opacity: 1;
transition: transform .2s ease;
}
.marquee-item:hover img { transform: scale(1.04); }
.marquee-item .badge-text {
font-family: var(--por-serif); font-size: 1.35rem; color: var(--por-mid);
}
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.marquee-track { animation: none; }
}
/* ---------- Portraits grid ---------- */
.portraits-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: clamp(1rem, 2vw, 1.75rem);
}
.portrait-card {
display: block; text-decoration: none; color: inherit;
position: relative;
}
.portrait-card .img {
aspect-ratio: 1 / 1; /* square thumbnails per feedback */
overflow: hidden; background: var(--por-warm-grey);
border-radius: 4px;
}
.portrait-card .img img {
width: 100%; height: 100%; object-fit: cover;
transition: transform .5s ease, filter .3s ease;
}
.portrait-card:hover .img img { transform: scale(1.04); }
.portrait-card .meta { padding: 0.9rem 0.1rem 0; }
.portrait-card .name {
font-family: var(--por-serif); font-weight: 400;
font-size: 1.05rem; color: var(--por-ink);
line-height: 1.25; margin-bottom: 0.15rem;
}
.portrait-card .country {
font-family: var(--por-sans); font-weight: 500;
font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
color: var(--por-mustard-deep);
}
.portrait-card:hover .name { color: var(--por-mustard-deep); }
/* ---------- Portrait detail — off-white page, warm-grey story panel ---------- */
.portrait-detail {
display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 3vw, 2.5rem);
align-items: start;
}
@media (min-width: 900px) {
.portrait-detail { grid-template-columns: 1.15fr 1fr; }
}
.portrait-detail .hero-img {
background: var(--por-warm-grey);
aspect-ratio: 3/2; /* landscape per client mockup */
overflow: hidden; border-radius: 6px;
}
.portrait-detail .hero-img img {
width: 100%; height: 100%; object-fit: cover;
}
/* Warm-grey story panel with white text (per client image13) */
.portrait-detail .story {
background: var(--por-warm-grey);
color: var(--por-white);
padding: clamp(2rem, 4vw, 3rem);
border-radius: 6px;
}
.portrait-detail .story h1 {
font-family: var(--por-sans); font-weight: 500;
font-size: clamp(1.6rem, 3vw, 2.25rem); line-height: 1.15;
color: var(--por-white); margin-bottom: 0.35rem;
}
.portrait-detail .story h1 .country-inline {
color: var(--por-mustard-soft); font-weight: 500;
}
.portrait-detail .story .country {
font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--por-mustard-soft); margin-bottom: 1.5rem; display: block;
}
.portrait-detail .story p { color: var(--por-white); font-size: 0.95rem; line-height: 1.8; }
.portrait-detail .why {
margin-top: 1.5rem; padding: 1.25rem;
background: rgba(0,0,0,0.15); border-left: 3px solid var(--por-mustard);
border-radius: 4px;
}
.portrait-detail .why .lab {
display: block; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--por-mustard-soft); margin-bottom: 0.5rem;
}
.portrait-detail .why p { margin: 0; font-family: var(--por-serif); font-style: italic; font-weight: 400; font-size: 1.05rem; color: var(--por-white); }
.portrait-nav {
display: flex; justify-content: space-between; gap: 1rem;
padding-top: 2rem; margin-top: 3rem;
border-top: 1px solid var(--por-rule-light);
font-size: 0.82rem; letter-spacing: 0.15em; text-transform: uppercase;
}
.portrait-nav a { color: var(--por-ink); }
.portrait-nav a:hover { color: var(--por-mustard-ink); }
/* Back-link (was an inline-style anchor on portrait/story pages) */
.back-link-row { margin-bottom: 2rem; }
.back-link {
font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase;
color: var(--por-mustard-ink);
}
.back-link:hover { color: var(--por-ink); text-decoration: underline; }
/* ---------- News page — light theme ---------- */
.news-list { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
.news-item {
display: grid; grid-template-columns: 1fr; gap: 1.5rem;
padding-bottom: clamp(2rem, 4vw, 3.5rem);
border-bottom: 1px solid var(--por-rule-light);
}
.news-item:last-child { border-bottom: 0; }
@media (min-width: 780px) {
.news-item { grid-template-columns: 340px 1fr; gap: 2.5rem; }
}
.news-item .img {
aspect-ratio: 4/3; overflow: hidden; background: var(--por-warm-grey);
border-radius: 6px;
}
.news-item .img img { width: 100%; height: 100%; object-fit: cover; }
.news-item .meta {
font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--por-mustard-deep); margin-bottom: 0.5rem;
}
.news-item h2 {
font-family: var(--por-serif); font-weight: 400;
font-size: clamp(1.3rem, 2.5vw, 1.85rem); line-height: 1.2;
color: var(--por-ink); margin-bottom: 0.75rem;
}
.news-item p { color: var(--por-ink-muted); font-size: 0.97rem; margin-bottom: 1rem; }
.news-item a.more {
font-family: var(--por-sans); font-weight: 600;
font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase;
color: var(--por-mustard);
border-bottom: 1px solid transparent;
padding-bottom: 2px;
}
.news-item a.more:hover { border-bottom-color: var(--por-mustard); }
/* ---------- Contact ---------- */
.contact-wrap {
display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3.5rem);
}
@media (min-width: 900px) {
.contact-wrap { grid-template-columns: 1.05fr 1fr; }
}
.contact-lead .display-l { color: var(--por-ink); margin-bottom: 1rem; }
.contact-lead p { color: var(--por-ink-muted); font-size: 1.0625rem; }
.contact-links {
margin-top: 2rem; display: grid; gap: 1rem;
}
.contact-links a {
display: flex; align-items: center; justify-content: space-between;
padding: 1rem 1.25rem;
border: 1px solid var(--por-rule-light);
color: var(--por-ink); font-family: var(--por-sans); font-weight: 500;
font-size: 0.95rem;
background: var(--por-white);
border-radius: 4px;
transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.contact-links a:hover { background: var(--por-mustard); border-color: var(--por-mustard); color: var(--por-black); }
.contact-links .arrow { font-size: 1.2rem; }
.contact-form {
background: var(--por-white);
padding: clamp(1.5rem, 3vw, 2.5rem);
border: 1px solid var(--por-rule-light);
border-radius: 6px;
}
.contact-form label {
display: block; margin-bottom: 0.35rem;
font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--por-mustard-deep);
}
.contact-form input,
.contact-form textarea {
width: 100%; padding: 0.85rem 1rem;
font-family: var(--por-sans); font-size: 0.95rem;
background: var(--por-off-white); border: 1px solid var(--por-rule-light);
color: var(--por-ink);
margin-bottom: 1.25rem; border-radius: 4px;
}
.contact-form textarea { min-height: 140px; resize: vertical; }
.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
/* Visible ring restored (WCAG 2.4.7). Border darkens + a 3px halo. */
outline: 2px solid var(--por-mustard-deep);
outline-offset: 2px;
border-color: var(--por-mustard-deep);
}
.contact-form button { width: 100%; justify-content: center; }
.contact-form .form-status { margin: 1rem 0 0; font-size: 0.82rem; color: var(--por-ink-muted); }
.contact-form .form-status a { color: var(--por-mustard-ink); text-decoration: underline; }
/* ---------- Footer ---------- */
/* Darkened to --por-ink so alpha-white text stays legible (13:1 headroom). */
.por-footer {
background: var(--por-ink); color: rgba(255,255,255,0.88);
padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 3rem) 2rem;
border-top: 0;
}
.por-footer-inner {
max-width: 1240px; margin: 0 auto;
display: grid; grid-template-columns: 1fr; gap: 2.5rem;
}
@media (min-width: 780px) {
.por-footer-inner { grid-template-columns: 1.4fr 1fr 1fr; }
}
.por-footer h4 {
font-family: var(--por-sans); font-weight: 600;
font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--por-mustard); margin-bottom: 1rem;
}
.por-footer .brand {
font-family: var(--por-serif); font-size: 1.2rem; color: var(--por-white);
margin-bottom: 0.5rem;
}
.por-footer .brand em { color: var(--por-mustard); font-style: italic; }
.por-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; }
.por-footer a { color: var(--por-white); font-size: 0.9rem; }
.por-footer a:hover, .por-footer a:focus-visible { color: var(--por-mustard); }
.por-footer-bottom {
max-width: 1240px; margin: 3rem auto 0;
padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.18);
display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
font-size: 0.78rem; color: rgba(255,255,255,0.75);
}
/* ---------- Section headings ---------- */
.section-head {
max-width: 780px; margin: 0 auto clamp(2rem, 4vw, 3rem);
text-align: center;
}
.section-head.left { margin-left: 0; text-align: left; }
.section-head h2 {
font-family: var(--por-serif); font-weight: 300;
font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.05; color: var(--por-ink);
margin: 0.75rem 0 0;
}
.section-head h2 em { color: var(--por-mustard-deep); font-style: italic; font-weight: 300; }
.section-head.on-light h2 { color: var(--por-ink); }
.section-head.on-warm h2 { color: var(--por-white); }
.section-head.on-warm h2 em { color: var(--por-mustard-soft); }
.section-head.on-warm .kicker { color: var(--por-mustard-soft); }
/* Anchor offsets for sticky nav */
[id] { scroll-margin-top: 6rem; }
/* ---------- Hero scroll indicator ---------- */
.hero-scroll-cue {
position: absolute; left: 50%; bottom: 1.5rem;
transform: translateX(-50%);
color: rgba(255,255,255,0.7);
display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
font-family: var(--por-sans); font-weight: 500;
font-size: 0.68rem; letter-spacing: 0.28em; text-transform: uppercase;
z-index: 3; pointer-events: none;
animation: cueBob 2.4s ease-in-out infinite;
}
.hero-scroll-cue svg { width: 18px; height: 18px; opacity: 0.85; }
@keyframes cueBob {
0%, 100% { transform: translate(-50%, 0); opacity: 0.7; }
50% { transform: translate(-50%, 6px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .hero-scroll-cue { animation: none; } }
/* Hero display weight bump for legibility on dark backgrounds */
.hero-headline .display-xxl { font-weight: 400; }
/* ---------- Featured portrait (homepage) ---------- */
.featured-portrait {
display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 3vw, 2.5rem);
align-items: center;
}
@media (min-width: 780px) {
.featured-portrait { grid-template-columns: 1.1fr 1fr; gap: clamp(2.5rem, 5vw, 4rem); }
}
.featured-portrait .img {
aspect-ratio: 4/5; overflow: hidden; background: var(--por-black);
}
.featured-portrait .img img {
width: 100%; height: 100%; object-fit: cover;
transition: transform .6s ease;
}
.featured-portrait:hover .img img { transform: scale(1.02); }
.featured-portrait h2 {
font-family: var(--por-serif); font-weight: 300;
font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1.05; color: var(--por-white);
margin: 0.75rem 0 1rem;
}
.featured-portrait h2 em { color: var(--por-mustard); font-style: italic; }
.featured-portrait .country {
font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--por-mustard);
}
.featured-portrait p { color: rgba(255,255,255,0.8); font-size: 1rem; line-height: 1.75; }
/* ---------- Portrait card country badge on hover ---------- */
.portrait-card { overflow: visible; }
.portrait-card .img { position: relative; }
.portrait-card .img::after {
content: attr(data-country);
position: absolute; left: 0; bottom: 0; right: 0;
padding: 0.6rem 0.9rem;
background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.7) 100%);
color: var(--por-mustard-soft);
font-family: var(--por-sans); font-weight: 600;
font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
opacity: 0; transition: opacity .25s ease;
}
.portrait-card:hover .img::after,
.portrait-card:focus-visible .img::after { opacity: 1; }
/* ---------- Portrait detail — projected reference image ---------- */
.projected-ref {
margin-top: 2rem;
padding: 1.25rem; background: var(--por-dark-elev);
border: 1px dashed var(--por-rule);
display: grid; grid-template-columns: 80px 1fr; gap: 1rem; align-items: center;
}
.projected-ref .thumb {
aspect-ratio: 1;
background: var(--por-dark); border: 1px solid var(--por-rule);
display: flex; align-items: center; justify-content: center;
color: var(--por-mustard); font-size: 1.4rem;
}
.projected-ref .lab {
display: block;
font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--por-mustard); margin-bottom: 0.35rem;
}
.projected-ref p {
margin: 0; font-size: 0.85rem; color: rgba(255,255,255,0.6);
line-height: 1.5;
}
/* ---------- Portrait detail — mobile prev/next stacked ---------- */
@media (max-width: 560px) {
.portrait-nav { flex-direction: column; align-items: stretch; gap: 0.75rem; }
.portrait-nav a {
padding: 0.85rem 0;
border: 1px solid var(--por-rule);
text-align: center;
}
}
/* ---------- Filter chips (Portraits page) ---------- */
.filter-chips {
display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center;
margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.filter-chips button {
font-family: var(--por-sans); font-weight: 500;
font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
padding: 0.55rem 1.1rem;
border-radius: 999px;
background: transparent; color: var(--por-ink);
border: 1px solid var(--por-rule-light);
cursor: pointer;
transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.filter-chips button:hover { border-color: var(--por-mustard-deep); color: var(--por-mustard-deep); }
.filter-chips button[aria-pressed="true"] {
background: var(--por-mustard); color: var(--por-black); border-color: var(--por-mustard);
}
.portrait-card.is-hidden { display: none; }
/* ---------- Back-to-top button ---------- */
.back-to-top {
position: fixed; right: 1.25rem; bottom: 1.25rem;
width: 44px; height: 44px; border-radius: 50%;
background: var(--por-mustard); color: var(--por-black);
border: 0; cursor: pointer;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 16px rgba(0,0,0,0.4);
opacity: 0; transform: translateY(8px); pointer-events: none;
transition: opacity .2s ease, transform .2s ease, background .2s ease;
z-index: 30;
}
.back-to-top svg { width: 18px; height: 18px; }
.back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.back-to-top:hover { background: var(--por-mustard-deep); color: var(--por-white); }
@media (min-width: 900px) {
.back-to-top { right: 2rem; bottom: 2rem; width: 48px; height: 48px; }
}
/* News item spacing on small screens */
@media (max-width: 780px) {
.news-item { gap: 1rem; padding-bottom: 2rem; }
.news-item .img { aspect-ratio: 16/10; }
}
/* Footer socials */
.footer-social {
display: flex; gap: 0.65rem; margin-top: 0.85rem;
}
.footer-social a {
width: 34px; height: 34px; border-radius: 50%;
border: 1px solid var(--por-rule);
display: inline-flex; align-items: center; justify-content: center;
color: rgba(255,255,255,0.75);
transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.footer-social a:hover { background: var(--por-mustard); color: var(--por-black); border-color: var(--por-mustard); }
.footer-social svg { width: 16px; height: 16px; }
/* Utility */
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 2rem; }
.mt-4 { margin-top: 3rem; }
.text-center { text-align: center; }
/* =====================================================================
v2 additions (Feedback round 2)
===================================================================== */
/* ---------- Hero: pop-buttons with QOB-style hover popup ---------- */
.hero-buttons {
position: absolute;
right: clamp(1.25rem, 4vw, 3.5rem);
bottom: clamp(2rem, 5vw, 3.5rem);
display: flex; flex-wrap: wrap; gap: 0.75rem;
z-index: 4;
}
.pop-btn {
position: relative;
display: inline-flex; align-items: center; gap: 0.5rem;
font-family: var(--por-sans); font-weight: 600;
font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
padding: 0.85rem 1.4rem;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.85);
color: var(--por-white); background: transparent;
cursor: pointer;
transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.pop-btn.filled { background: var(--por-mustard); border-color: var(--por-mustard); color: var(--por-black); }
.pop-btn:hover { transform: translateY(-1px); }
.pop-btn:hover .pop-content { opacity: 1; visibility: visible; transform: translateY(-14px); pointer-events: auto; }
.pop-btn:focus-visible .pop-content { opacity: 1; visibility: visible; transform: translateY(-14px); pointer-events: auto; }
.pop-content {
position: absolute; left: 50%; bottom: 100%;
transform: translate(-50%, -6px);
width: min(320px, 78vw);
padding: 1.1rem 1.15rem;
border-radius: 14px;
background: linear-gradient(135deg, var(--por-mustard-deep), #1c1710);
color: var(--por-white);
box-shadow: 0 12px 32px rgba(0,0,0,0.35);
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity .22s ease, transform .22s ease, visibility .22s;
text-align: left;
z-index: 5;
}
.pop-content::after {
content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
border: 8px solid transparent; border-top-color: #1c1710;
}
.pop-content .lab {
display: block;
font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase;
color: var(--por-mustard); font-weight: 700;
margin-bottom: 0.5rem;
}
.pop-content p {
margin: 0;
font-family: var(--por-sans); font-weight: 400;
font-size: 0.82rem; line-height: 1.55;
color: rgba(255,255,255,0.95);
text-transform: none; letter-spacing: 0;
}
.pop-content .news-thumb {
display: block; margin-bottom: 0.6rem;
aspect-ratio: 16/9; overflow: hidden; border-radius: 8px;
}
.pop-content .news-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pop-content .news-title {
display: block; margin-top: 0.4rem;
font-family: var(--por-serif); font-size: 0.98rem; font-weight: 400;
color: var(--por-white); line-height: 1.3;
}
@media (max-width: 640px) {
.hero-buttons { position: static; margin-top: 1.5rem; justify-content: center; }
.pop-content { left: auto; right: 0; transform: translate(0, -6px); }
.pop-btn:hover .pop-content, .pop-btn:focus-visible .pop-content { transform: translate(0, -14px); }
.pop-content::after { left: auto; right: 30px; }
}
/* ---------- Content-warning modal (auto-shows on first visit) ---------- */
.cw-modal {
position: fixed; inset: 0; z-index: 90;
background: rgba(14,14,14,0.72);
display: none;
align-items: center; justify-content: center;
padding: 1.5rem;
}
.cw-modal.is-open { display: flex; }
.cw-modal-box {
max-width: 520px; width: 100%;
background: var(--por-off-white); color: var(--por-ink);
border-radius: 14px;
padding: 2rem clamp(1.5rem, 3vw, 2.5rem);
box-shadow: 0 24px 60px rgba(0,0,0,0.4);
}
.cw-modal-box .lab {
display: block;
font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase;
color: var(--por-mustard-deep); font-weight: 700;
margin-bottom: 1rem;
}
.cw-modal-box h2 {
font-family: var(--por-serif); font-weight: 400;
font-size: 1.4rem; margin-bottom: 0.75rem;
}
.cw-modal-box p {
font-family: var(--por-sans); font-size: 0.95rem; line-height: 1.6;
color: var(--por-ink);
}
.cw-modal-box .btn-por { margin-top: 1.25rem; }
/* ---------- About sub-nav on warm-grey (per feedback) ---------- */
.about-subnav {
background: var(--por-warm-grey);
border-bottom: 1px solid rgba(0,0,0,0.05);
}
.about-subnav .inner {
max-width: 1240px; margin: 0 auto;
padding: 1rem clamp(1.25rem, 4vw, 3.5rem);
display: flex; flex-wrap: wrap; gap: 1.25rem 2rem;
justify-content: center;
}
.about-subnav a {
font-family: var(--por-sans); font-weight: 600;
font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--por-white);
padding: 0.35rem 0;
border-bottom: 1px solid transparent;
transition: color .18s ease, border-color .18s ease;
}
.about-subnav a:hover, .about-subnav a[aria-current="section"] {
color: var(--por-white);
border-bottom-color: var(--por-mustard);
}
/* ---------- Portraits + Stories page — sub-nav bar (warm grey title strip) ---------- */
.portraits-titlebar {
background: var(--por-warm-grey); color: var(--por-white);
padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 3.5rem);
}
.portraits-titlebar h1 { color: var(--por-white); }
.portraits-titlebar h1 em { color: var(--por-mustard-soft); }
.portraits-titlebar .kicker { color: var(--por-mustard-soft); }
/* Solid white body text — was rgba(0.85) which measured 3.78:1 on warm-grey (fails AA). */
.portraits-titlebar p { color: var(--por-white); }
/* ---------- Gallery lightbox (Exhibitions column) ---------- */
.gallery-lightbox {
position: fixed; inset: 0; z-index: 95;
background: rgba(14,14,14,0.92);
display: none;
align-items: center; justify-content: center;
padding: 2rem;
}
.gallery-lightbox.is-open { display: flex; }
.gallery-lightbox img {
max-width: 92vw; max-height: 82vh; object-fit: contain;
border-radius: 4px;
box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}
.gallery-lightbox .lb-btn {
position: absolute; top: 50%; transform: translateY(-50%);
width: 48px; height: 48px; border-radius: 50%;
background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.35);
color: var(--por-white); font-size: 1.4rem;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
}
.gallery-lightbox .lb-btn:hover { background: var(--por-mustard); color: var(--por-black); border-color: var(--por-mustard); }
.gallery-lightbox .lb-prev { left: 1.5rem; }
.gallery-lightbox .lb-next { right: 1.5rem; }
.gallery-lightbox .lb-close {
top: 1.5rem; right: 1.5rem; transform: none;
width: 40px; height: 40px; font-size: 1.1rem;
}
.gallery-lightbox .lb-caption {
position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
color: rgba(255,255,255,0.85); font-size: 0.85rem; letter-spacing: 0.1em;
text-transform: uppercase;
}
/* ---------- History section on off-white ---------- */
.history-block { color: var(--por-ink); }
.history-block .body-l { color: var(--por-ink); }
.history-block p { color: var(--por-ink); }
.history-block h2 { color: var(--por-ink); }
.history-block h2 em { color: var(--por-mustard-deep); }
.history-block .kicker { color: var(--por-mustard-deep); }
/* Featured/latest-news headings on light */
.latest-news h2 em { color: var(--por-mustard-deep) !important; }
.about-preview-light .display-l { color: var(--por-ink); }
.about-preview-light .display-l em { color: var(--por-mustard-deep) !important; }
.about-preview-light .kicker { color: var(--por-mustard-deep); }
.about-preview-light .body-l { color: var(--por-ink); }
.about-preview-light .btn-por { border-color: var(--por-ink); color: var(--por-ink); }
.about-preview-light .btn-por:hover { background: var(--por-ink); color: var(--por-white); }
/* Contact links / footer forced light */
.sec-light .kicker,
.sec-light .section-head .kicker { color: var(--por-mustard-deep); }
.sec-light h1, .sec-light h2, .sec-light h3, .sec-light h4 { color: var(--por-ink); }
/* Back-to-top always readable */
.back-to-top { background: var(--por-mustard); color: var(--por-ink); }
.back-to-top:hover { background: var(--por-mustard-deep); color: var(--por-white); }
/* Footer on --por-ink (darkened for AA); mustard reads 6.4:1 here. */
.por-footer a { color: var(--por-white); }
.por-footer a:hover, .por-footer a:focus-visible { color: var(--por-mustard); }
.por-footer h4 { color: var(--por-mustard); }
.por-footer .brand { color: var(--por-white); }
.por-footer .brand em { color: var(--por-mustard); }
.por-footer-bottom { color: rgba(255,255,255,0.85); border-top-color: rgba(255,255,255,0.18); }
/* Nav links always sit on warm-grey or transparent-hero. Accent goes on the
underline; text stays white so contrast holds (mustard on warm-grey = 2.45:1). */
.por-nav-links a { color: var(--por-white); }
.por-nav-links a:hover, .por-nav-links a[aria-current="page"] {
border-bottom-color: var(--por-mustard); color: var(--por-white);
}
/* ==========================================================================
v5 additions — hero ![]()
structure, trust strip, primary CTA,
contact form errors, portrait skeleton, wordmark override.
========================================================================== */
/* F14 — wordmark visible on every page including home hero */
.por-wordmark.hide { opacity: 1; pointer-events: auto; }
/* F2 — hero slides now use ![]()
instead of CSS background-image */
.hero-slide img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; object-position: center;
display: block;
}
/* F1 — hero primary CTA + subtle content-warning link */
.hero-cta-primary { text-decoration: none; }
.hero-cw-link {
background: none; border: 0; padding: 0.35rem 0.1rem;
font: inherit; font-family: var(--por-sans); font-weight: 500;
font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
color: rgba(255,255,255,0.7);
border-bottom: 1px solid rgba(255,255,255,0.35);
cursor: pointer;
transition: color .18s ease, border-color .18s ease;
}
.hero-cw-link:hover, .hero-cw-link:focus-visible {
color: var(--por-mustard); border-bottom-color: var(--por-mustard);
}
/* F4 — trust strip (home + portraits) */
.trust-strip {
background: var(--por-off-white-2);
color: var(--por-ink);
border-top: 1px solid var(--por-rule-light);
border-bottom: 1px solid var(--por-rule-light);
padding: clamp(1rem, 2.5vw, 1.5rem) 0;
}
.trust-strip .container-x {
display: flex; align-items: center; flex-wrap: wrap;
gap: clamp(0.75rem, 2vw, 1.75rem);
}
.trust-strip .trust-lab {
font-family: var(--por-sans); font-weight: 600;
font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase;
color: var(--por-mustard-deep);
flex-shrink: 0;
}
.trust-strip ul {
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap;
gap: clamp(0.6rem, 2vw, 1.5rem) clamp(1rem, 3vw, 2.25rem);
}
.trust-strip li {
font-family: var(--por-serif); font-weight: 400;
font-size: 0.98rem; color: var(--por-ink);
line-height: 1.3;
}
.trust-strip li span {
display: block;
font-family: var(--por-sans); font-weight: 500;
font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
color: var(--por-ink-muted);
margin-top: 0.15rem;
}
/* F6 — contact form: inline field errors */
.contact-form .field-error {
display: block;
margin-top: 0.4rem;
font-family: var(--por-sans); font-weight: 500;
font-size: 0.78rem; color: #b3391f;
line-height: 1.4;
}
.contact-form .field-error[hidden] { display: none; }
.contact-form input.is-invalid,
.contact-form textarea.is-invalid {
border-color: #b3391f;
outline: 2px solid rgba(179, 57, 31, 0.18);
outline-offset: 1px;
}
/* F7 — portrait detail skeleton (visible before JS paints) */
.portrait-skeleton {
aspect-ratio: 3 / 4;
background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.14), rgba(255,255,255,0.06));
background-size: 200% 100%;
animation: por-shimmer 1.6s linear infinite;
border-radius: 4px;
min-height: 260px;
}
.portrait-loading {
font-family: var(--por-sans); font-weight: 500;
font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase;
color: var(--por-mustard-soft);
}
@keyframes por-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .portrait-skeleton { animation: none; } }
/* ==========================================================================
v6 additions — screenshot-audit fixes (C1, C2, C3, H1-H4, M1-M4, L1-L3)
========================================================================== */
/* C1 — portrait detail trust line must be readable on off-white paper */
.portrait-trust {
color: var(--por-ink-muted) !important;
}
/* C3 — portrait grid: shimmer skeleton on the square img wrapper so lazy-loaded
cards below the fold don't read as "empty grey boxes" while decoding. */
.portrait-card .img {
background: var(--por-warm-grey) linear-gradient(
90deg,
rgba(255,255,255,0.03) 0%,
rgba(255,255,255,0.10) 50%,
rgba(255,255,255,0.03) 100%);
background-size: 200% 100%;
animation: por-shimmer 2.2s linear infinite;
}
.portrait-card .img img { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .portrait-card .img { animation: none; } }
/* M3 — news article images: same treatment while lazy imgs decode */
.news-item .img {
background: var(--por-quote-grey) linear-gradient(
90deg,
rgba(0,0,0,0.02) 0%,
rgba(0,0,0,0.06) 50%,
rgba(0,0,0,0.02) 100%);
background-size: 200% 100%;
animation: por-shimmer 2.2s linear infinite;
overflow: hidden;
}
.news-item .img img { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .news-item .img { animation: none; } }
/* H1 — nav on transparent hero needs a subtle scrim so wordmark + links
stay legible over mid-tone portions of the image. */
.por-nav.transparent {
background: linear-gradient(180deg, rgba(14,14,14,0.55) 0%, rgba(14,14,14,0) 100%);
}
.por-nav.transparent .por-wordmark,
.por-nav.transparent .por-nav-links a,
.por-nav.transparent .por-nav-toggle {
text-shadow: 0 1px 12px rgba(0,0,0,0.55);
}
/* H2 — portrait detail hero image: real aspect matches the majority of the
series (portrait orientation ~3:4). Landscape sources cover-crop centred. */
.portrait-detail .hero-img {
aspect-ratio: 3 / 4;
overflow: hidden;
border-radius: 4px;
background: var(--por-warm-grey);
}
.portrait-detail .hero-img img {
width: 100%; height: 100%; object-fit: cover; object-position: center;
display: block;
}
/* H3 — home hero button stack: tighter primary emphasis, quieter CW link */
.hero-buttons { gap: 0.85rem; align-items: center; flex-wrap: wrap; }
.hero-cw-link {
font-size: 0.66rem;
color: rgba(255,255,255,0.62);
border-bottom-color: rgba(255,255,255,0.22);
}
/* L1 — hero subtitle + title get a soft shadow so they hold up over image mid-tones */
.hero-headline .hero-title,
.hero-headline .kicker,
.hero-headline p,
.hero-tagline {
text-shadow: 0 2px 24px rgba(0,0,0,0.55);
}
/* L3 — footer wordmark: darken italic accent so it isn't sub-3:1 on warm-grey */
.por-footer .brand em { color: var(--por-mustard-soft); }
/* M1 — trust strip on mobile: switch from wrap-stack to horizontal scroll snap
so it takes one row of viewport, not five. */
@media (max-width: 620px) {
.trust-strip .container-x {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
padding-bottom: 0.5rem;
}
.trust-strip .trust-lab { position: sticky; left: 0; background: var(--por-off-white-2); padding-right: 0.75rem; z-index: 1; }
.trust-strip ul { flex-wrap: nowrap; }
.trust-strip li { scroll-snap-align: start; white-space: nowrap; }
/* Hide scrollbar chrome — the snap points give the hint */
.trust-strip .container-x::-webkit-scrollbar { display: none; }
.trust-strip .container-x { scrollbar-width: none; }
}
/* M4 — home "Recent stories" section on desktop: rebalance columns so
the news mini list doesn't feel marooned from its heading. */
@media (min-width: 780px) {
.latest-news { grid-template-columns: 340px minmax(0, 620px); justify-content: center; gap: clamp(2rem, 4vw, 3.5rem); }
}
/* L2 — bio slideshow: dot indicators so mobile users know there are 3 images */
.bio-photos { position: relative; }
.bio-dots {
position: absolute; left: 0; right: 0; bottom: 0.75rem;
display: flex; justify-content: center; gap: 0.4rem;
z-index: 2;
}
.bio-dots span {
width: 22px; height: 3px; background: rgba(255,255,255,0.4);
transition: background .2s ease;
}
.bio-dots span.is-active { background: var(--por-mustard); }
/* L4 — inline field errors and status message: err first, status quieter */
.contact-form [role="status"]:empty { display: none; }
/* Prevent widow orphans on marketing-style headings */
h1.balance, h2.balance, h3.balance { text-wrap: balance; }
/* ==========================================================================
v7 additions — hero overlap fix, solid nav on all pages, footer contrast
========================================================================== */
/* Hero — put tagline + buttons back in the grid flow so they don't collide
with the scroll cue or the caption/dots row. Scroll cue removed entirely
because the "Read the stories" button already tells the user what to do. */
.hero-content {
grid-template-rows: auto 1fr auto auto auto;
padding-bottom: clamp(1.5rem, 4vw, 3rem);
gap: clamp(1rem, 2.5vw, 1.5rem);
}
.hero-tagline {
position: static;
left: auto; bottom: auto; right: auto;
max-width: 40rem;
margin: 0;
}
.hero-buttons {
position: static;
right: auto; bottom: auto;
justify-content: flex-start;
margin: 0;
}
.hero-scroll-cue { display: none !important; }
.hero-bottom { margin-top: 0; }
/* Nav — solid on every page. Home no longer uses the transparent variant. */
.por-nav.transparent {
background: var(--por-warm-grey) !important;
border-bottom-color: rgba(0,0,0,0.08) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.por-nav.transparent .por-wordmark,
.por-nav.transparent .por-nav-links a,
.por-nav.transparent .por-nav-toggle {
text-shadow: none !important;
}
/* Nav on warm-grey: keep text white (4.55:1) and accent goes on the underline. */
.por-nav-links a:hover,
.por-nav-links a[aria-current="page"] {
color: var(--por-white);
border-bottom-color: var(--por-mustard-soft);
}
/* Footer — real contrast, better hover, tighter bottom bar
Background darkened to --por-ink so alpha-white text stays legible (13:1 headroom). */
.por-footer {
background: var(--por-ink);
color: var(--por-white);
padding: clamp(3.5rem, 6vw, 5.5rem) clamp(1.25rem, 4vw, 3rem) 1.5rem;
}
.por-footer h4 {
color: var(--por-mustard-soft);
font-size: 0.75rem;
letter-spacing: 0.24em;
margin-bottom: 1.1rem;
}
.por-footer .brand {
font-size: 1.35rem;
color: var(--por-white);
font-weight: 400;
}
.por-footer .brand em {
color: var(--por-mustard-soft);
font-style: italic;
font-weight: 300;
}
.por-footer a {
color: var(--por-white);
font-size: 0.92rem;
border-bottom: 1px solid transparent;
padding-bottom: 1px;
transition: color .18s ease, border-color .18s ease;
}
.por-footer a:hover,
.por-footer a:focus-visible {
color: var(--por-mustard-soft);
border-bottom-color: var(--por-mustard-soft);
}
.footer-social a {
display: inline-flex; width: 40px; height: 40px;
align-items: center; justify-content: center;
border: 1px solid rgba(255,255,255,0.35);
border-radius: 999px;
color: var(--por-white);
padding: 0;
transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.footer-social a:hover,
.footer-social a:focus-visible {
background: var(--por-white);
color: var(--por-ink);
border-color: var(--por-white);
}
.footer-social a svg { width: 18px; height: 18px; }
.footer-social { display: flex; gap: 0.6rem; margin-top: 1rem; }
.por-footer-inner {
gap: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 780px) {
.por-footer-inner { grid-template-columns: 1.6fr 1fr 1fr; }
}
.por-footer-bottom {
color: rgba(255,255,255,0.85);
border-top: 1px solid rgba(255,255,255,0.18);
padding-top: 1.25rem;
font-size: 0.8rem;
}
.por-footer-bottom span:last-child {
font-family: var(--por-serif);
font-style: italic;
color: var(--por-white);
}
/* ==========================================================================
v8 additions — larger base text, mobile floating bottom nav, compact
mobile footer. Everything text-related uses rem so a single root bump
scales the whole site proportionally.
========================================================================== */
/* Larger base text sitewide (was 16px / 1.65) */
html { font-size: 17px; }
body { font-size: 1rem; line-height: 1.7; }
.body-l { font-size: 1.125rem; line-height: 1.8; }
.body-m { font-size: 1rem; line-height: 1.72; }
.body-s { font-size: 0.9rem; line-height: 1.6; }
/* Slightly larger nav + kicker sizes for legibility at the new scale */
.por-nav-links a { font-size: 0.86rem; }
.por-nav-toggle { font-size: 0.82rem; }
.kicker { font-size: 0.78rem; }
.por-footer a { font-size: 1rem; }
.por-footer h4 { font-size: 0.82rem; }
.por-footer p { font-size: 0.95rem; }
.trust-strip li { font-size: 1.05rem; }
.trust-strip li span { font-size: 0.72rem; }
.news-mini h3 { font-size: 1.2rem; }
.contact-form label { font-size: 0.82rem; }
.contact-form input, .contact-form textarea { font-size: 1rem; }
/* Mobile floating bottom nav — visible only ≤700px */
.mobile-bottom-nav { display: none; }
@media (max-width: 700px) {
.mobile-bottom-nav {
display: block;
position: fixed;
left: 0.65rem; right: 0.65rem; bottom: 0.65rem;
z-index: 60;
background: rgba(26, 26, 26, 0.9);
backdrop-filter: saturate(140%) blur(14px);
-webkit-backdrop-filter: saturate(140%) blur(14px);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 999px;
padding: 0.35rem;
box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}
.mobile-bottom-nav ul {
list-style: none; padding: 0; margin: 0;
display: grid; grid-template-columns: repeat(5, 1fr);
gap: 0.15rem;
}
.mobile-bottom-nav a {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 0.2rem;
padding: 0.55rem 0.25rem 0.45rem;
min-height: 44px;
border-radius: 999px;
color: rgba(255,255,255,0.72);
text-decoration: none;
font-family: var(--por-sans); font-weight: 600;
font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase;
transition: color .18s ease, background .18s ease;
}
.mobile-bottom-nav a svg { width: 21px; height: 21px; opacity: 0.9; flex-shrink: 0; }
.mobile-bottom-nav a:hover { color: var(--por-mustard-soft); }
.mobile-bottom-nav a[aria-current="page"] {
color: var(--por-mustard);
background: rgba(255,255,255,0.06);
}
.mobile-bottom-nav a[aria-current="page"] svg { opacity: 1; }
.mbn-lab { display: block; }
/* Push page content up so the fixed nav doesn't cover the footer bottom-bar */
body { padding-bottom: 5.5rem; }
.back-to-top { bottom: 5.5rem !important; right: 0.75rem !important; }
/* Compact mobile footer — brand + email + social + copyright only.
Explore + Jonathan Banks columns are duplicated by the bottom nav,
so hide them on mobile to save ~250px of vertical viewport. */
.por-footer { padding: 2.25rem 1.25rem 1.5rem; }
.por-footer-inner { gap: 1rem; grid-template-columns: 1fr; }
.por-footer-inner > div:nth-child(2),
.por-footer-inner > div:nth-child(3) { display: none; }
.por-footer .brand { font-size: 1.2rem; margin-bottom: 0.35rem; }
.por-footer p { font-size: 0.88rem; margin: 0 0 0.4rem; }
.footer-social { margin-top: 0.75rem; }
.footer-social a { width: 36px; height: 36px; }
.footer-social a svg { width: 16px; height: 16px; }
.por-footer-bottom {
margin-top: 1.25rem; padding-top: 1rem;
font-size: 0.72rem;
flex-direction: column; gap: 0.35rem; align-items: flex-start;
}
.por-footer-bottom span:last-child { display: none; }
/* Nav toggle: less crowded next to the wordmark at bigger text size */
.por-nav { padding: 0.85rem 1.25rem; }
}
/* ==========================================================================
v9 additions — per-page mobile audit fixes
========================================================================== */
@media (max-width: 700px) {
/* Portrait grid: 2 columns at 375px so the page isn't a 16-row single stack. */
.portraits-grid {
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
.portrait-card .meta { padding: 0.55rem 0.1rem 0; }
.portrait-card .name { font-size: 0.95rem; }
.portrait-card .country { font-size: 0.62rem; letter-spacing: 0.16em; }
/* News: darker placeholder so the image container is visible while decoding */
.news-item .img {
background: var(--por-warm-grey);
aspect-ratio: 16/10;
min-height: 180px;
}
/* About sub-nav → horizontal scroll strip (was wrapping to 3-4 lines) */
.about-subnav .inner {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
justify-content: flex-start;
padding: 0.85rem 1.25rem;
gap: 1.5rem;
}
.about-subnav a {
flex-shrink: 0;
scroll-snap-align: start;
white-space: nowrap;
font-size: 0.72rem;
}
.about-subnav .inner::-webkit-scrollbar { display: none; }
.about-subnav .inner { scrollbar-width: none; }
/* Filter chips row on Portraits also snap-scrolls on mobile */
.filter-chips {
display: flex; flex-wrap: nowrap;
overflow-x: auto; -webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
gap: 0.5rem;
padding-bottom: 0.5rem;
}
.filter-chips button {
flex-shrink: 0;
scroll-snap-align: start;
white-space: nowrap;
}
.filter-chips::-webkit-scrollbar { display: none; }
.filter-chips { scrollbar-width: none; }
/* Safe-area inset for phones with home bar (iPhone X+) */
.mobile-bottom-nav {
bottom: max(0.65rem, env(safe-area-inset-bottom, 0.65rem));
}
body {
padding-bottom: max(5.5rem, calc(4.5rem + env(safe-area-inset-bottom, 0px)));
}
/* Portrait-detail: reduce hero-img max-height on mobile so the story is
visible without a full second scroll */
.portrait-detail .hero-img { aspect-ratio: 4/5; }
/* Home hero-buttons — stack vertically on the narrowest phones to avoid
the wrap-to-two-rows layout looking cramped */
.hero-buttons { flex-direction: column; align-items: stretch; gap: 0.6rem; }
.hero-buttons .pop-btn { justify-content: center; text-align: center; }
.hero-buttons .hero-cw-link { align-self: center; margin-top: 0.15rem; }
/* Home mobile — reduce hero min-height so the CTA is above the fold */
.hero-stage { min-height: auto; }
.hero-content { min-height: 92vh; padding-top: 5rem; }
.hero-headline { padding-top: 0; padding-bottom: 1rem; }
/* Trust strip mobile: give a soft right-fade so users see it's scrollable */
.trust-strip { position: relative; }
.trust-strip::after {
content: ""; position: absolute; top: 0; right: 0; bottom: 0;
width: 40px; pointer-events: none;
background: linear-gradient(90deg, rgba(244,243,239,0), var(--por-off-white-2));
}
.trust-strip .container-x { padding-right: 1.5rem; }
}
/* Very narrow phones (≤360px) — extra breathing room */
@media (max-width: 360px) {
.portraits-grid { grid-template-columns: 1fr; }
.mobile-bottom-nav a { font-size: 0.56rem; letter-spacing: 0.04em; }
.mobile-bottom-nav a svg { width: 19px; height: 19px; }
}
/* ==========================================================================
v10 — fix collapsed mobile menu leaking a black bar, trust-strip label
overlap, and About sub-nav overflow that has no fade indicator.
========================================================================== */
/* v10.1 — collapsed mobile menu was showing a thin black strip below the nav
because .por-nav-links (position:absolute + background:var(--por-black) +
padding + border-bottom) rendered visible edges even at max-height:0. */
@media (max-width: 860px) {
.por-nav-links {
background: var(--por-warm-grey); /* match the nav */
padding: 0; /* no padding when closed */
border-bottom: 0; /* no visible border when closed */
box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}
.por-nav-links.open {
padding: 0.5rem 0 1rem; /* padding only when open */
border-bottom: 1px solid rgba(0,0,0,0.15);
}
.por-nav-links li { border-top-color: rgba(255,255,255,0.14); }
.por-nav-links a { color: var(--por-white); }
.por-nav-links a[aria-current="page"] { color: var(--por-mustard-soft); }
}
/* v10.2 — trust strip label was sticky-overlapping the scrolling venue text.
Simplify on mobile: put the label above the scroll list, don't stick it. */
@media (max-width: 700px) {
.trust-strip .container-x {
display: block; /* stack label above list */
padding: 0;
}
.trust-strip .trust-lab {
position: static;
display: block;
padding: 0 1.25rem;
margin-bottom: 0.5rem;
background: transparent;
box-shadow: none;
z-index: auto;
}
.trust-strip ul {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
padding: 0 1.25rem 0.5rem;
gap: 1.5rem;
}
.trust-strip ul::-webkit-scrollbar { display: none; }
.trust-strip ul { scrollbar-width: none; }
.trust-strip li { flex-shrink: 0; scroll-snap-align: start; white-space: nowrap; }
/* Right-fade indicator moves to overlay the ul only */
.trust-strip::after {
top: auto; bottom: 0;
height: calc(100% - 1.5rem); /* skip the label row */
width: 32px;
}
}
/* v10.3 — About sub-nav needs a right-fade so users see it's scrollable */
@media (max-width: 700px) {
.about-subnav { position: relative; }
.about-subnav::after {
content: ""; position: absolute; top: 0; right: 0; bottom: 0;
width: 40px; pointer-events: none;
background: linear-gradient(90deg, rgba(118,118,118,0), var(--por-warm-grey));
}
}
/* =====================================================================
v11 — Feedback round 3
===================================================================== */
/* ---------- Home: Latest news on warm-grey, white text ---------- */
/* Bright mustard fails AA on warm-grey (2.45:1) — swapped to mustard-soft for text; */
/* underline/hover accents keep bright mustard where it's decorative only. */
.latest-news-warm .latest-news h2 { color: var(--por-white); }
.latest-news-warm .latest-news h2 em { color: var(--por-mustard-soft); font-style: italic; }
.latest-news-warm .latest-news .kicker { color: var(--por-mustard-soft); }
.latest-news-warm .news-mini { border-bottom-color: rgba(255,255,255,0.18); }
.latest-news-warm .news-mini .date { color: var(--por-mustard-soft); }
.latest-news-warm .news-mini h3 { color: var(--por-white); }
.latest-news-warm .news-mini p { color: var(--por-white); }
.latest-news-warm .news-mini:hover h3 { color: var(--por-mustard-soft); }
/* ---------- Home hero: shrink the pill buttons on phone ---------- */
@media (max-width: 640px) {
.hero-buttons {
gap: 0.5rem;
padding: 0 0.5rem;
}
.pop-btn {
padding: 0.6rem 1rem;
font-size: 0.72rem;
letter-spacing: 0.1em;
}
.hero-cw-link {
font-size: 0.72rem !important;
padding: 0.5rem 0.9rem !important;
}
}
/* ---------- About: testimonial carousel ---------- */
.quote-carousel {
position: relative;
max-width: 780px;
margin: 0 auto;
padding: 0 clamp(1.25rem, 4vw, 3rem);
}
.qc-track {
position: relative;
min-height: 220px;
}
.qc-slide { display: none; }
.qc-slide.is-active { display: block; }
.qc-slide[hidden] { display: none !important; }
.qc-slide.is-active { animation: qcFade .35s ease; }
@keyframes qcFade {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
.qc-btn {
position: absolute; top: 50%; transform: translateY(-50%);
width: 44px; height: 44px; border-radius: 50%;
background: var(--por-white); border: 1px solid var(--por-rule-light);
color: var(--por-ink); font-size: 1.35rem; line-height: 1;
display: flex; align-items: center; justify-content: center;
cursor: pointer; z-index: 2;
transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.qc-btn:hover { background: var(--por-mustard); border-color: var(--por-mustard); color: var(--por-black); }
.qc-prev { left: -0.5rem; }
.qc-next { right: -0.5rem; }
.qc-dots {
display: flex; justify-content: center; gap: 0.5rem;
margin-top: 1.25rem;
}
.qc-dots button {
width: 28px; height: 4px; padding: 0; border: 0; border-radius: 2px;
background: rgba(0,0,0,0.18);
cursor: pointer;
transition: background .2s ease;
}
.qc-dots button[aria-current="true"] { background: var(--por-mustard-deep); }
@media (max-width: 700px) {
.quote-carousel { padding: 0; }
.qc-prev { left: -0.25rem; }
.qc-next { right: -0.25rem; }
.qc-btn { width: 38px; height: 38px; font-size: 1.15rem; }
}
/* ---------- About: Campaign Trail — flush warm-grey (no inner box) ---------- */
.exhibitions-block.is-flush {
background: transparent;
padding: 0;
border-radius: 0;
}
.exhibitions-block.is-flush h2 { color: var(--por-white); }
/* ---------- About: Partners on warm-grey (colour logos, static grid) ---------- */
.partners-warm { background: var(--por-warm-grey); color: var(--por-white); }
.partners-warm .section-head.on-warm h2 em { color: var(--por-mustard); }
.partners-logos {
max-width: 1240px;
margin: 2rem auto 0;
padding: 0 clamp(1.25rem, 4vw, 3.5rem);
}
.logo-grid {
list-style: none; margin: 0; padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(1.25rem, 3vw, 2.5rem) clamp(1.5rem, 4vw, 3rem);
align-items: center;
justify-items: center;
}
@media (min-width: 620px) { .logo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .logo-grid { grid-template-columns: repeat(6, 1fr); } }
.logo-grid li {
background: var(--por-white);
padding: 0.85rem 1rem;
border-radius: 6px;
display: flex; align-items: center; justify-content: center;
width: 100%;
min-height: 88px;
box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
.logo-grid img {
max-width: 100%;
max-height: 60px;
width: auto; height: auto;
display: block;
}
/* ---------- Portrait detail: adaptive orientation + arrows ---------- */
.portrait-detail.flex-orient { align-items: start; }
.portrait-detail .hero-img {
aspect-ratio: auto;
background: transparent;
border-radius: 6px;
}
.portrait-detail .hero-img img {
width: 100%; height: auto;
max-height: 78vh;
object-fit: contain;
background: var(--por-warm-grey);
border-radius: 6px;
display: block;
}
/* When the image is landscape, drop to single-column so it can breathe */
@media (min-width: 900px) {
.portrait-detail.is-landscape { grid-template-columns: 1fr; }
.portrait-detail.is-landscape .hero-img { max-width: 100%; }
.portrait-detail.is-portrait { grid-template-columns: 1fr 1fr; }
}
.portrait-arrows {
display: flex; justify-content: space-between; align-items: center;
gap: 1rem;
margin: 1.75rem auto 0;
padding: 1rem 0;
border-top: 1px solid var(--por-rule-light);
font-family: var(--por-sans); font-weight: 600;
font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
}
.portrait-arrows a {
display: inline-flex; align-items: center; gap: 0.5rem;
padding: 0.55rem 1rem;
color: var(--por-ink);
border: 1px solid var(--por-rule-light);
border-radius: 999px;
background: var(--por-white);
transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.portrait-arrows a:hover { background: var(--por-mustard); color: var(--por-black); border-color: var(--por-mustard); }
.portrait-arrows .pa-all { border-color: transparent; background: transparent; color: var(--por-ink-muted); }
.portrait-arrows .pa-all:hover { background: var(--por-off-white-2); color: var(--por-ink); }
@media (max-width: 560px) {
.portrait-arrows { flex-wrap: wrap; gap: 0.5rem; }
.portrait-arrows .pa-label { display: none; }
.portrait-arrows a { padding: 0.55rem 0.85rem; }
.portrait-arrows .pa-all { order: 3; width: 100%; text-align: center; justify-content: center; padding: 0.6rem; }
}
/* ---------- News: read-more expandable body ---------- */
.news-more {
margin-top: 0.75rem;
border-top: 1px dashed var(--por-rule-light);
padding-top: 0.85rem;
}
.news-more > summary {
cursor: pointer;
list-style: none;
display: inline-flex; align-items: center; gap: 0.4rem;
font-family: var(--por-sans); font-weight: 600;
font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase;
color: var(--por-mustard-deep);
padding: 0.35rem 0;
}
.news-more > summary::-webkit-details-marker { display: none; }
.news-more > summary::after {
content: "→";
transition: transform .18s ease;
}
.news-more[open] > summary::after { transform: rotate(90deg); }
.news-more > summary:hover { color: var(--por-ink); }
.news-more .news-more-body {
padding-top: 0.75rem;
color: var(--por-ink-muted);
font-size: 0.95rem; line-height: 1.7;
animation: newsFade .25s ease;
}
@keyframes newsFade {
from { opacity: 0; transform: translateY(-2px); }
to { opacity: 1; transform: translateY(0); }
}
/* ---------- Footer: single column after menu-columns removal ---------- */
.por-footer-inner {
grid-template-columns: 1fr !important;
max-width: 780px;
text-align: left;
}
.por-footer-bottom {
max-width: 780px;
justify-content: space-between;
}
@media (max-width: 600px) {
.por-footer-bottom { justify-content: flex-start; gap: 0.5rem; }
}
/* =====================================================================
v12 — Story article pages
===================================================================== */
/* News item — link replacing the old inline expander */
.news-cta { margin-top: 0.85rem; }
.news-more-link {
display: inline-flex; align-items: center; gap: 0.5rem;
font-family: var(--por-sans); font-weight: 600;
font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase;
color: var(--por-mustard-deep);
padding: 0.55rem 0;
border-bottom: 1px solid transparent;
transition: color .18s ease, border-color .18s ease;
}
.news-more-link:hover,
.news-more-link:focus-visible {
color: var(--por-ink);
border-bottom-color: var(--por-mustard);
}
/* Story article page */
.story-page {
max-width: 780px;
margin: 0 auto;
}
.story-head { margin-bottom: 1.5rem; }
.story-head .kicker { color: var(--por-mustard-deep); }
.story-head .display-l { color: var(--por-ink); margin-top: 0.75rem; line-height: 1.1; }
.story-loc {
margin-top: 0.75rem;
font-family: var(--por-sans); font-weight: 500;
font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--por-ink-muted);
}
.story-hero {
margin: 1.75rem 0 1.5rem;
border-radius: 6px;
overflow: hidden;
background: var(--por-warm-grey);
}
.story-hero img {
width: 100%; height: auto; display: block;
max-height: 78vh; object-fit: cover;
}
.story-hero figcaption {
padding: 0.85rem 1rem;
background: var(--por-warm-grey);
color: rgba(255,255,255,0.9);
font-family: var(--por-sans); font-size: 0.82rem;
letter-spacing: 0.05em;
}
.story-lead p {
font-family: var(--por-serif); font-weight: 400; font-style: italic;
font-size: clamp(1.15rem, 2.2vw, 1.4rem);
line-height: 1.55;
color: var(--por-ink);
border-left: 3px solid var(--por-mustard-deep);
padding-left: 1rem;
margin: 1.5rem 0 2rem;
}
.story-body p {
color: var(--por-ink);
font-size: 1.0625rem;
line-height: 1.8;
margin-bottom: 1.15rem;
}
.story-body em { font-style: italic; color: var(--por-ink); }
.story-gallery {
display: grid; gap: 1.25rem;
margin: 2rem 0 1rem;
}
@media (min-width: 720px) {
.story-gallery { grid-template-columns: repeat(2, 1fr); }
}
.story-gallery figure { margin: 0; }
.story-gallery img {
width: 100%; height: auto;
border-radius: 6px;
display: block;
background: var(--por-warm-grey);
}
.story-gallery figcaption {
margin-top: 0.5rem;
font-family: var(--por-sans); font-size: 0.8rem;
color: var(--por-ink-muted);
}
.story-arrows { margin-top: 2.5rem; }
/* =====================================================================
v14 — Mobile responsive fixes
===================================================================== */
/* Utility: keep word groups intact through wrapping */
.nowrap { white-space: nowrap; }
/* ---------- Home: hero slide dots — bigger tap target ---------- */
.hero-dots button {
height: 20px; /* was 3px */
background-clip: content-box;
padding: 8px 0; /* keeps the visible bar 4px tall, hit area 20px */
background-color: rgba(255,255,255,0.35);
}
.hero-dots button[aria-current="true"] { background-color: var(--por-mustard); }
/* ---------- Home: "Exhibited at" trust strip — visible scroll cue ---------- */
.trust-strip {
position: relative;
overflow: hidden;
}
.trust-strip .container-x { position: relative; }
.trust-strip ul {
overflow-x: auto;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
padding-right: 2rem; /* room for the fade */
}
.trust-strip ul > li { scroll-snap-align: start; }
@media (max-width: 720px) {
.trust-strip::after {
content: "";
position: absolute;
top: 0; right: 0; bottom: 0;
width: 44px;
pointer-events: none;
background: linear-gradient(90deg, rgba(255,255,255,0), var(--por-off-white));
}
}
/* ---------- Portraits page: filter chips — scroll strip needs a fade cue ---------- */
@media (max-width: 620px) {
.filter-chips-wrap {
position: relative;
}
.filter-chips-wrap::after {
content: "";
position: absolute; top: 0; right: 0; bottom: 0;
width: 40px;
pointer-events: none;
background: linear-gradient(90deg, rgba(236,236,234,0), var(--por-off-white));
}
.filter-chips {
padding-right: 2rem; /* room for the fade */
}
.filter-chips button {
padding: 0.5rem 0.9rem;
font-size: 0.7rem;
letter-spacing: 0.16em;
}
}
/* ---------- About: testimonial carousel — arrows below the card on mobile ---------- */
@media (max-width: 700px) {
.quote-carousel {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"track track"
"dots dots"
"prev next";
gap: 1rem;
padding: 0 1rem;
}
.quote-carousel .qc-track { grid-area: track; min-height: 0; }
.quote-carousel .qc-dots { grid-area: dots; margin: 0; }
.quote-carousel .qc-prev {
grid-area: prev;
position: static; transform: none;
justify-self: end;
width: 44px; height: 44px; font-size: 1.25rem;
}
.quote-carousel .qc-next {
grid-area: next;
position: static; transform: none;
justify-self: start;
width: 44px; height: 44px; font-size: 1.25rem;
}
}
/* ---------- Footer: bigger tap targets ---------- */
.por-footer a[href^="mailto:"],
.por-footer a[href^="tel:"] {
display: inline-block;
padding: 0.35rem 0;
min-height: 40px;
line-height: 1.4;
}
.footer-social a {
width: 44px;
height: 44px;
}
.footer-social svg { width: 18px; height: 18px; }
/* ---------- News/story: safer body padding under fixed nav ---------- */
@media (max-width: 860px) {
body { padding-bottom: max(90px, env(safe-area-inset-bottom, 0px) + 76px); }
}
/* ==========================================================================
Auto-updating content — explicit pause controls (WCAG 2.2.2).
Used by hero + testimonials + bio slideshows.
========================================================================== */
.carousel-pause {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px;
padding: 0; margin: 0;
background: transparent; color: var(--por-white);
border: 1px solid rgba(255,255,255,0.45);
border-radius: 999px;
cursor: pointer;
transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.carousel-pause:hover, .carousel-pause:focus-visible {
background: var(--por-white); color: var(--por-ink); border-color: var(--por-white);
}
.carousel-pause svg { width: 14px; height: 14px; display: block; }
.carousel-pause[aria-pressed="true"] .icon-play { display: block; }
.carousel-pause[aria-pressed="true"] .icon-pause { display: none; }
.carousel-pause .icon-play { display: none; }
.carousel-pause .icon-pause { display: block; }
/* Home hero: sits in .hero-bottom on the right of the dots */
.hero-bottom .carousel-pause { margin-left: 0.5rem; }
/* Testimonials: sits alongside qc-dots */
.qc-controls {
display: flex; align-items: center; justify-content: center;
gap: 0.75rem;
margin-top: 1rem;
}
/* Bio slideshow: floats bottom-right of the photo stack */
.bio-photos { position: relative; }
.bio-controls {
position: absolute; bottom: 0.75rem; right: 0.75rem;
display: flex; gap: 0.5rem; z-index: 2;
}
.bio-controls .carousel-pause { background: rgba(0,0,0,0.5); border-color: rgba(255,255,255,0.5); }
.bio-controls .carousel-pause:hover, .bio-controls .carousel-pause:focus-visible {
background: var(--por-white); color: var(--por-ink);
}
/* ==========================================================================
v16 — Feedback round 5 (client mockups: image1 → image24)
Global: Elido wordmark, "Resilience" bold, single-yellow token,
black header/footer everywhere, sticky top mobile icon nav.
Per-page: home rebalance, About darker theme + yellow testimonials +
marquee partners, Portraits black titlebar, News load-more, Contact
"UK Based", footer utility links + return-to-top.
========================================================================== */
/* ---------- 16.0 Palette normalisation
Client: "There are currently two different yellows on this page … change to
the standard yellow." The bright mustard is the "standard". The muted deep
mustard was reading orange in the Latest News section. We keep -deep for
AA on off-white body copy only; everywhere else we default to --por-mustard. */
:root {
--por-black: #0e0e0e;
--por-ink: #1a1a1a; /* header / footer / on-dark surfaces */
--por-ink-2: #232323;
--por-testimonial-gold: #e3b95c; /* the yellow section bg (image7) */
--por-testimonial-gold-2: #d9a83f;
}
/* ---------- 16.1 Wordmark — Elido if available, sensible fallback
Elido is a paid typeface (Colophon Foundry). If you add it via
Adobe Fonts, drop the kit CSS in the and it will pick up here
automatically. Until then the stack falls back to Cormorant Garamond
which is the closest widely-available match to Elido's proportions. */
.por-wordmark {
font-family: 'Elido', 'Cormorant Garamond', 'Fraunces', Georgia, serif;
font-weight: 400;
font-size: 1.2rem;
letter-spacing: 0.015em;
}
.por-wordmark .em {
font-weight: 700; /* client: "Resilience should be in Bold" */
font-style: normal; /* was italic; brand mark now consistent */
color: inherit; /* white on dark headers, per feedback */
}
/* Same rule applies to every appearance of the brand lockup, incl. footer */
.por-footer .brand,
.por-footer-bottom span:last-child,
.hero-headline .hero-title {
font-family: 'Elido', 'Cormorant Garamond', 'Fraunces', Georgia, serif;
}
.por-footer .brand em,
.hero-headline .hero-title em,
.hero-headline .hero-title strong {
font-weight: 700;
font-style: normal;
color: inherit;
}
/* Hero title override — client wants a single unified wordmark treatment
(no split with "Portraits of" small + "Resilience" giant). Keep the
humanist look but bold the second word. */
.hero-headline .hero-title {
font-weight: 400;
letter-spacing: -0.015em;
}
/* ---------- 16.2 Header — black across the site, transparent-over-hero on home */
.por-nav {
background: var(--por-ink);
border-bottom-color: rgba(255,255,255,0.06);
}
.por-nav .por-wordmark { color: var(--por-white); }
.por-nav-links a { color: var(--por-white); }
/* Home nav: transparent over hero, still black once scrolled past.
The old v7 !important lock kept it warm-grey — we relax that here. */
body.is-home .por-nav.transparent {
background: transparent !important;
border-bottom-color: transparent !important;
}
body.is-home .por-nav.transparent .por-wordmark { opacity: 0; pointer-events: none; }
body.is-home .por-nav.transparent .por-wordmark,
body.is-home .por-nav.transparent .por-nav-links a,
body.is-home .por-nav.transparent .por-nav-toggle {
text-shadow: 0 1px 12px rgba(0,0,0,0.6);
}
body.is-home .por-nav:not(.transparent) {
background: var(--por-ink) !important;
border-bottom-color: rgba(255,255,255,0.08) !important;
}
/* Mobile-menu drawer: match new black nav */
@media (max-width: 860px) {
.por-nav-links { background: var(--por-ink); }
.por-nav-links li { border-top-color: rgba(255,255,255,0.10); }
}
/* ---------- 16.3 Footer — black, add Return-to-top + utility links */
.por-footer {
background: var(--por-ink);
color: var(--por-white);
padding-top: clamp(2.5rem, 5vw, 4rem);
}
.por-footer-top {
display: flex; justify-content: flex-end;
max-width: 1240px;
margin: 0 auto 1.5rem;
}
.footer-to-top {
display: inline-flex; align-items: center; gap: 0.55rem;
font-family: var(--por-sans); font-weight: 600;
font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--por-mustard);
padding: 0.35rem 0;
border-bottom: 1px solid transparent;
transition: border-color .18s ease, color .18s ease;
}
.footer-to-top:hover, .footer-to-top:focus-visible {
color: var(--por-mustard-soft);
border-bottom-color: var(--por-mustard-soft);
}
.footer-to-top .to-top-circle {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px;
border-radius: 50%;
background: var(--por-mustard);
color: var(--por-ink);
}
.footer-to-top .to-top-circle svg { width: 14px; height: 14px; }
.footer-utility {
display: flex; gap: 1.5rem; flex-wrap: wrap;
}
.footer-utility a {
font-family: var(--por-sans); font-weight: 500;
font-size: 0.82rem;
color: rgba(255,255,255,0.72);
border-bottom: 1px solid transparent;
padding-bottom: 1px;
transition: color .18s ease, border-color .18s ease;
}
.footer-utility a:hover,
.footer-utility a:focus-visible {
color: var(--por-mustard);
border-bottom-color: var(--por-mustard);
}
/* Footer wordmark – plain white, italic mustard accent removed per feedback ("plain text and all white") */
.por-footer .brand { color: var(--por-white); font-weight: 400; }
.por-footer .brand em {
color: var(--por-white);
font-weight: 700;
font-style: normal;
}
/* CTA-in-footer helper (e.g. "All news" / "Get in touch") — yellow buttons per feedback */
.por-footer .btn-por,
.por-footer .btn-por.on-dark {
background: var(--por-mustard);
border-color: var(--por-mustard);
color: var(--por-ink);
}
.por-footer .btn-por:hover {
background: var(--por-mustard-soft);
border-color: var(--por-mustard-soft);
color: var(--por-ink);
}
/* ---------- 16.4b Mobile length trim
Cuts ~1000px off long pages: tighter section padding, smaller thumbnails,
and slightly denser body copy without hurting readability. */
@media (max-width: 700px) {
.sec-pad { padding: 2.5rem 0; }
.sec-pad-lg { padding: 3rem 0; }
.sec-pad-sm { padding: 1.75rem 0; }
.exhibitions-table .gallery-thumb { height: 120px; }
.exhibitions-table tr { padding: 0.9rem 0; }
.story-body p, .about-intro p, .history-block p { line-height: 1.7; }
.bio-photos { aspect-ratio: 4/4.4; }
}
/* ---------- 16.4 Static top mobile icon nav
Was fixed-floating with a 5.5rem body padding-top that left an empty gap on
every page. Now flows in-document as a solid top bar. No padding hack. */
@media (max-width: 700px) {
/* Hide the old header on mobile — the icon bar replaces it. */
.por-nav { display: none; }
.mobile-bottom-nav {
position: static;
top: auto; bottom: auto; left: auto; right: auto;
background: #141414;
border: 0;
border-bottom: 1px solid rgba(255,255,255,0.08);
border-radius: 0;
padding: 0;
box-shadow: none;
}
.mobile-bottom-nav ul { grid-template-columns: repeat(5, 1fr); }
.mobile-bottom-nav a {
padding: 0.55rem 0.15rem 0.5rem;
min-height: 52px;
font-size: 0.6rem; letter-spacing: 0.05em;
color: rgba(255,255,255,0.75);
}
.mobile-bottom-nav a svg { width: 20px; height: 20px; }
.mobile-bottom-nav a[aria-current="page"] { color: var(--por-mustard); background: rgba(255,255,255,0.06); }
/* No more forced padding — nav flows normally at top */
body { padding-top: 0; padding-bottom: 0; }
body.is-home { padding-top: 0; }
body.is-home .mobile-bottom-nav {
background: #141414;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
/* Return-to-top button */
.back-to-top { bottom: 1rem !important; right: 1rem !important; }
}
/* ---------- 16.5 Home page rebalance
image1/2: no wordmark on home hero, transparent nav, "Resilience" bold. */
body.is-home .hero-headline { padding-top: clamp(2rem, 5vw, 4rem); }
body.is-home .hero-headline p { color: rgba(255,255,255,0.95); }
/* Slide dots — cleaner mustard bar per feedback ("less clunky") */
.hero-dots {
gap: 0.4rem;
}
.hero-dots button {
width: 26px;
height: 14px;
padding: 6px 0;
background-color: rgba(255,255,255,0.35);
border-radius: 2px;
}
.hero-dots button[aria-current="true"] {
background-color: var(--por-mustard);
width: 40px;
}
/* Latest News section — single mustard yellow (kill the orange variant) */
.latest-news-warm .news-mini .date { color: var(--por-mustard); }
.latest-news-warm .kicker { color: var(--por-mustard); }
.latest-news-warm h2 em { color: var(--por-mustard) !important; font-weight: 700 !important; font-style: normal !important; }
.about-preview-light .display-l em { color: var(--por-mustard) !important; font-weight: 700 !important; font-style: normal !important; }
/* ---------- v17 — Latest News section rebuild
Was a flat mid-grey wall (#767676) with 120px thumbnails and 4/3 crops that
mangled portrait sources. Fix: warm dark charcoal background, bigger 3/2
thumbnails, stronger AA contrast, cleaner border/hover states. */
.latest-news-warm {
background: #3d3a37;
}
.latest-news-warm .latest-news h2 { color: var(--por-white); }
.latest-news-warm .news-mini {
grid-template-columns: 220px 1fr;
gap: 1.25rem;
border-bottom-color: rgba(255,255,255,0.14);
padding-bottom: 1.75rem;
}
.latest-news-warm .news-mini img {
aspect-ratio: 3 / 2;
border-radius: 4px;
}
.latest-news-warm .news-mini .date { color: var(--por-mustard); }
.latest-news-warm .news-mini h3 { color: var(--por-white); }
.latest-news-warm .news-mini p { color: rgba(255,255,255,0.82); }
.latest-news-warm .news-mini:hover h3 { color: var(--por-mustard); }
@media (max-width: 640px) {
.latest-news-warm .news-mini {
grid-template-columns: 1fr;
gap: 0.85rem;
}
}
/* Campaign Highlights — new home section combining Exhibitions + Testimonial + Partners
(client feedback image4). Sits on light paper. */
.campaign-highlights {
background: var(--por-off-white-2);
padding: clamp(3rem, 6vw, 5rem) 0;
}
.campaign-highlights .ch-inner { max-width: 1100px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); }
.campaign-highlights .ch-title {
font-family: var(--por-serif); font-weight: 300;
font-size: clamp(1.4rem, 3vw, 1.75rem);
color: var(--por-ink); margin-bottom: 1.5rem;
}
.campaign-highlights .ch-title strong {
font-weight: 700; color: var(--por-ink);
}
.campaign-highlights .ch-title em {
color: var(--por-mustard); font-style: italic; font-weight: 400;
margin-left: 0.3rem;
}
.ch-exhibitions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem 2rem;
margin-bottom: 2rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid rgba(0,0,0,0.10);
}
@media (min-width: 720px) {
.ch-exhibitions { grid-template-columns: repeat(4, 1fr); }
}
.ch-exhibitions .ch-col strong {
display: block; font-weight: 600; font-size: 0.98rem;
color: var(--por-ink); margin-bottom: 0.15rem;
line-height: 1.3;
}
.ch-exhibitions .ch-col span {
display: block; font-size: 0.88rem; color: var(--por-ink-muted);
line-height: 1.35;
}
.ch-quote {
font-family: var(--por-serif); font-weight: 400; font-style: italic;
font-size: 1.05rem; line-height: 1.55;
color: var(--por-ink);
max-width: 640px;
margin: 0 auto 0.75rem;
text-align: center;
}
.ch-quote-attr {
font-family: var(--por-sans); font-weight: 600;
font-size: 0.85rem; color: var(--por-ink);
text-align: center; margin-bottom: 2rem;
}
.ch-quote-attr span {
display: block; font-weight: 400;
color: var(--por-ink-muted); font-size: 0.82rem;
margin-top: 0.15rem;
}
.ch-partners-label {
font-family: var(--por-sans); font-weight: 600;
font-size: 0.85rem;
color: var(--por-ink);
margin-bottom: 1rem;
}
.ch-partners {
display: flex; align-items: center; justify-content: center;
flex-wrap: wrap;
gap: 1.5rem 2.25rem;
padding: 0.5rem 0 1rem;
}
.ch-partners img {
max-height: 42px; width: auto;
filter: none;
opacity: 1;
}
/* ---------- 16.6 About page — darker Introduction, yellow Testimonials,
black Campaign Trail, WHITE Partners marquee (per image16/7/8) */
/* About sub-nav → deep charcoal (image6) */
.about-subnav { background: var(--por-ink); }
.about-subnav a { color: rgba(255,255,255,0.85); }
.about-subnav a:hover, .about-subnav a[aria-current="section"] {
color: var(--por-white);
border-bottom-color: var(--por-mustard);
}
/* Introduction: dark grey bg, yellow highlights */
#introduction {
background: #4a4a4a;
color: var(--por-white);
}
#introduction .kicker { color: var(--por-mustard); }
#introduction .display-l { color: var(--por-white) !important; }
#introduction .display-l em { color: var(--por-mustard) !important; font-weight: 700; font-style: normal; }
.about-intro p { color: rgba(255,255,255,0.92); }
.about-intro blockquote { border-left-color: var(--por-mustard); color: var(--por-white); }
.about-intro blockquote footer { color: var(--por-mustard-soft); }
.about-intro em { color: var(--por-mustard-soft); font-style: italic; }
#introduction .btn-por.mustard-fill { background: var(--por-mustard); color: var(--por-ink); border-color: var(--por-mustard); }
/* Testimonials: yellow section, cards with quote + image (image7) */
#testimonials {
background: var(--por-testimonial-gold);
color: var(--por-ink);
}
#testimonials .kicker { color: var(--por-ink); }
#testimonials .section-head h2 { color: var(--por-ink); }
#testimonials .section-head h2 em { color: var(--por-ink); font-style: italic; font-weight: 400; }
.quote-carousel { max-width: 900px; }
.qc-slide.is-active {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
background: rgba(255,255,255,0.6);
padding: clamp(1.5rem, 3vw, 2.25rem);
border-radius: 12px;
animation: qcFade .35s ease;
}
@media (min-width: 700px) {
.qc-slide.is-active { grid-template-columns: 1.15fr 1fr; align-items: center; }
}
.qc-slide .mark {
font-family: var(--por-serif);
font-size: 2.4rem;
line-height: 1;
color: var(--por-mustard-deep);
margin-bottom: 0.4rem;
}
.qc-slide p {
font-family: var(--por-sans); font-style: italic;
font-size: 1rem; line-height: 1.55; color: var(--por-ink);
margin-bottom: 0.75rem;
}
.qc-slide .attr {
font-family: var(--por-sans); font-weight: 600;
font-size: 0.9rem; color: var(--por-ink);
letter-spacing: 0.02em;
}
.qc-slide .attr strong {
display: block; font-weight: 700;
margin-bottom: 0.1rem;
}
.qc-slide .qc-image {
aspect-ratio: 4/3;
background: var(--por-warm-grey);
border-radius: 8px;
overflow: hidden;
}
.qc-slide .qc-image img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.qc-btn {
background: var(--por-white);
border-color: rgba(0,0,0,0.15);
color: var(--por-ink);
}
.qc-btn:hover { background: var(--por-mustard-deep); color: var(--por-white); border-color: var(--por-mustard-deep); }
.qc-dots button { background: rgba(0,0,0,0.25); }
.qc-dots button[aria-current="true"] { background: var(--por-ink); }
/* Campaign Trail on ABOUT — black bg for scroll contrast */
#exhibitions { background: var(--por-ink); color: var(--por-white); }
#exhibitions .exhibitions-block.is-flush h2,
#exhibitions .kicker { color: var(--por-white); }
#exhibitions .kicker { color: var(--por-mustard); }
#exhibitions .exhibitions-table thead th { color: var(--por-mustard); border-bottom-color: rgba(255,255,255,0.35); }
#exhibitions .exhibitions-table tbody td { color: var(--por-white); border-bottom-color: rgba(255,255,255,0.14); }
#exhibitions .exhibitions-table .loc-col { color: var(--por-mustard-soft); }
#exhibitions .exhibitions-hint { color: var(--por-mustard-soft); }
/* Bio: SINGLE portrait, no slideshow (image8/feedback) */
.bio-photos {
aspect-ratio: 4/5;
overflow: hidden;
background: transparent;
}
.bio-photos img:not(:first-child) { display: none !important; }
.bio-photos .bio-dots,
.bio-photos .bio-controls { display: none !important; }
/* Partners: WHITE bg with LOGO MARQUEE (looping horizontal scroll) */
.partners-warm {
background: var(--por-white);
color: var(--por-ink);
}
.partners-warm .section-head.on-warm h2,
.partners-warm .section-head.on-warm h2 em,
.partners-warm .kicker { color: var(--por-ink); }
.partners-warm .section-head.on-warm h2 em { font-style: italic; }
.partners-warm .section-head.on-warm .kicker { color: var(--por-mustard-deep); }
.partners-marquee {
overflow: hidden;
margin: 2rem 0 0;
padding: 1rem 0;
position: relative;
}
.partners-marquee::before,
.partners-marquee::after {
content: "";
position: absolute;
top: 0; bottom: 0;
width: 80px;
z-index: 2;
pointer-events: none;
}
.partners-marquee::before { left: 0; background: linear-gradient(90deg, var(--por-white), rgba(255,255,255,0)); }
.partners-marquee::after { right: 0; background: linear-gradient(-90deg, var(--por-white), rgba(255,255,255,0)); }
.partners-marquee-track {
display: flex; align-items: center;
gap: clamp(3rem, 6vw, 5rem);
width: max-content;
animation: partnersMarquee 42s linear infinite;
}
.partners-marquee-track img {
max-height: 56px; width: auto;
opacity: 1;
filter: none;
}
@keyframes partnersMarquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.partners-marquee:hover .partners-marquee-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
.partners-marquee-track { animation: none; }
}
/* Old boxed grid still exists as a noscript fallback below the marquee */
.partners-warm .logo-grid { display: none; }
.partners-warm noscript .logo-grid { display: grid; }
/* ---------- 16.7 Portraits + Stories page — black title strip, no thick band */
.portraits-titlebar {
background: var(--por-ink);
padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.25rem, 4vw, 3.5rem);
}
.portraits-titlebar h1 em { color: var(--por-mustard); font-style: italic; }
.portraits-titlebar p { color: rgba(255,255,255,0.9); }
.portraits-titlebar .kicker { color: var(--por-mustard); }
/* ---------- 16.8 News — "Load more stories" progressive reveal */
.news-list[data-collapsed="true"] .news-item.is-collapsed { display: none; }
.news-load-more-wrap {
text-align: center;
margin-top: 2.5rem;
}
.news-load-more {
display: inline-flex; align-items: center; gap: 0.6rem;
font-family: var(--por-sans); font-weight: 700;
font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase;
padding: 0.9rem 1.75rem;
background: var(--por-mustard);
color: var(--por-ink);
border: 0; border-radius: 999px;
cursor: pointer;
transition: background .18s ease, transform .18s ease;
}
.news-load-more:hover { background: var(--por-mustard-soft); }
.news-load-more[hidden] { display: none; }
/* Individual news heading yellow normalise */
.news-item .meta { color: var(--por-mustard-deep); }
.news-item a.more,
.news-more-link { color: var(--por-mustard-deep); }
/* News page — normalise the "Recent stories" italic to mustard (was orange-deep) */
main .display-l em { color: var(--por-mustard) !important; font-style: italic; }
/* ---------- 16.9 Contact — "UK Based" only, header/footer black already inherited */
.contact-lead .display-l em { color: var(--por-mustard) !important; font-weight: 400; font-style: italic; }
/* ---------- 16.10 Portrait detail — arrows in yellow so they're findable
(image14: yellow round buttons flanking the portrait) */
.portrait-arrows a {
background: transparent;
border-color: rgba(0,0,0,0.15);
}
.portrait-arrows a[data-role="prev"],
.portrait-arrows a[data-role="next"] {
background: var(--por-mustard);
border-color: var(--por-mustard);
color: var(--por-ink);
width: 44px; height: 44px;
padding: 0;
border-radius: 50%;
justify-content: center;
}
.portrait-arrows a[data-role="prev"] .pa-label,
.portrait-arrows a[data-role="next"] .pa-label { display: none; }
.portrait-arrows a[data-role="prev"]:hover,
.portrait-arrows a[data-role="next"]:hover {
background: var(--por-mustard-soft);
border-color: var(--por-mustard-soft);
}
/* ---------- 16.11 Hero title — inject "Resilience" as bold via span
(works with existing `Portraits of Resilience` string when the span wraps it) */
.hero-headline .hero-title .em-bold {
font-weight: 700;
color: var(--por-white);
}
/* ---------- 16.12 Return-to-top link (dedicated component, not the fixed FAB) */
.back-to-top { display: none !important; } /* Prefer the inline footer link */
/* ---------- 16.13 Trust-strip visibility — kill it on the home page since
the Campaign Highlights section replaces it. Keep on other pages if used. */
body.is-home .trust-strip { display: none; }
/* ---------- 16.14 Home hero on mobile — add safe zone under sticky top icon nav */
@media (max-width: 700px) {
body.is-home .hero-content {
padding-top: max(5.5rem, env(safe-area-inset-top, 0px) + 4.5rem);
}
body.is-home .hero-headline { padding-top: 0.5rem; }
}
/* ---------- 16.15 Campaign Trail on About — mobile stack tightens */
@media (max-width: 700px) {
#exhibitions .exhibitions-table tr {
background: rgba(255,255,255,0.04);
padding: 1rem;
border-radius: 6px;
margin-bottom: 0.75rem;
}
}
/* ---------- 16.16 Testimonial card image hides on very narrow screens
so text has full width; image stays on tablet+ */
@media (max-width: 560px) {
.qc-slide .qc-image { display: none; }
}
/* ==========================================================================
v21 — Client feedback FINAL (August 2026)
Home hero balance · Testimonials colour · Portraits title strip ·
Story page on a single grey field · Mobile type + CTA sizing.
Appended as its own layer to match this file's existing revision pattern.
========================================================================== */
/* ---------- 21.1 Home hero — close the dead space above the CTAs.
.hero-tagline sat at the *top* of the flexible (1fr) grid row, stranding
~230px of empty hero between it and the button row. Pinning it to the end
of that row drops it directly above the CTAs, as the client marked up. */
.hero-tagline { align-self: end; }
/* Caption on its own line, then pause (left) + slide indicator (right).
Tightening this cluster lets the whole CTA group sit lower in the frame. */
.hero-bottom {
grid-template-columns: auto 1fr;
grid-template-areas:
"caption caption"
"pause dots";
align-items: center;
column-gap: 1rem;
row-gap: 0.5rem;
margin-top: clamp(0.85rem, 2vw, 1.5rem);
padding-top: clamp(0.7rem, 1.8vw, 1rem);
padding-bottom: clamp(0.9rem, 2vw, 1.35rem);
}
.hero-slide-caption { grid-area: caption; }
.hero-bottom .carousel-pause { grid-area: pause; margin-left: 0; }
.hero-dots {
grid-area: dots;
justify-self: end;
justify-content: flex-end;
}
/* The break after "voice" is authored as
so the sentence
still wraps naturally on a phone instead of breaking in a fixed place. */
.tag-br { display: none; }
@media (min-width: 700px) { .tag-br { display: inline; } }
/* ---------- 21.2 Testimonials — white "work.", solid white quote card.
The card was rgba(255,255,255,0.6), which blended with the gold to #d9d7d3. */
#testimonials .section-head h2 em { color: var(--por-white); }
.qc-slide.is-active { background: var(--por-white); }
/* ---------- 21.3 Portraits + Stories — the black stops at the menu bar.
The title strip was a second black band running past the intro line; every
other page puts its header on paper. */
.portraits-titlebar {
background: transparent;
padding-top: clamp(2.5rem, 6vw, 4rem);
padding-bottom: clamp(0.5rem, 1.5vw, 1rem);
}
.portraits-titlebar .kicker { color: var(--por-ink); }
.portraits-titlebar h1 { color: var(--por-ink); }
.portraits-titlebar p { color: var(--por-ink-muted); }
/* !important is needed to beat `main .display-l em` above, which forces the
pale mustard site-wide. Pale gold is 1.6:1 on this paper; deep gold is 3.4:1. */
.portraits-titlebar h1 em { color: var(--por-mustard-deep) !important; }
/* ---------- 21.4 Portrait detail — one flat grey field, no cards.
Client: "the background should be all dark grey. At the moment it is light
grey with a dark border around the picture and text."
Two rounded warm-grey panels floated on off-white paper, and because the
image uses object-fit:contain the letterboxing read as that "border". Once
the whole section is the same warm grey the letterboxing disappears, which
is what lets landscape and portrait sources both sit correctly. */
body.is-portrait main > .sec-dark {
background: var(--por-warm-grey);
color: var(--por-white);
}
body.is-portrait .portrait-detail .hero-img,
body.is-portrait .portrait-detail .hero-img img {
background: transparent;
border-radius: 0;
}
body.is-portrait .portrait-detail .story {
background: transparent;
padding: 0;
border-radius: 0;
}
body.is-portrait .back-link { color: var(--por-mustard-soft); }
body.is-portrait .back-link:hover { color: var(--por-white); }
body.is-portrait .portrait-arrows { border-top-color: rgba(255,255,255,0.28); }
body.is-portrait .portrait-arrows .pa-all { color: rgba(255,255,255,0.88); }
body.is-portrait .portrait-arrows .pa-all:hover {
background: rgba(255,255,255,0.12);
color: var(--por-white);
}
/* ---------- 21.5 Mobile hero CTAs — were full-width stacked pills that
dominated the frame ("the buttons feel really big"). Back onto one row. */
@media (max-width: 700px) {
.hero-buttons {
flex-direction: row;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
padding: 0;
}
.hero-buttons .pop-btn {
flex: 0 0 auto;
padding: 0.6rem 1rem;
font-size: 0.68rem;
letter-spacing: 0.09em;
}
/* Auto width, not 100% — this link is underlined, and a full-width flex item
turns that underline into what looks like a section divider. The two
pills fill the row, so it wraps onto its own line anyway. */
.hero-buttons .hero-cw-link {
flex: 0 0 auto;
align-self: flex-start;
margin-top: 0.2rem;
text-align: left;
}
}
/* ---------- 21.6 Display stack — make every device agree.
The stack led with two faces the site never serves: 'Elido' is a paid
Colophon face, and 'Cormorant Garamond' is not in the Google Fonts request.
So the headline fell to Fraunces for most visitors but to a locally
installed Cormorant for anyone who happened to have it — which is why the
phone and the desktop disagreed. Put the served face ahead of the unserved
one; Elido stays first so a future Adobe Fonts kit still takes over. */
.por-wordmark,
.por-footer .brand,
.por-footer-bottom span:last-child,
.hero-headline .hero-title {
font-family: 'Elido', 'Fraunces', 'Cormorant Garamond', Georgia, serif;
}
/* ---------- 21.7 Mobile banner — same black as the desktop banner
(was #141414 against the desktop nav's #232323). */
@media (max-width: 700px) {
.mobile-bottom-nav,
body.is-home .mobile-bottom-nav { background: var(--por-ink); }
}
/* ---------- 21.8 Bio portrait — static, not a slideshow.
The rotation was also flashing: the no-JS fallback on line ~491 holds the
first image at opacity:1 underneath the stack, and its :has() guard was not
winning, so image 1 showed through the middle of every crossfade. With
data-static the first image is simply the active one and nothing rotates.
The other two images stay in the markup for the CMS to offer later. */
.bio-photos[data-static] .bio-dots { display: none; }
.bio-photos[data-static] img:not(.is-active) { opacity: 0; }
/* The strip is paper now, so its section-head is .on-light. Its kicker still
needs an explicit colour — the base .kicker is a pale gold set for dark
surfaces (1.7:1 on this paper). */
.portraits-titlebar .section-head .kicker { color: var(--por-mustard-ink); }
/* ---------- 21.9 Filter chips — the "ALL" chip was unreachable on a phone.
`justify-content: center` on an `overflow-x: auto` strip pushes the first
item to a negative offset that scrollLeft:0 cannot reach, so ALL was clipped
off the left edge with no way to scroll back to it — i.e. no way to clear
the region filter. Auto margins centre the row when it fits and fall back to
flex-start when it overflows. (Not in the feedback list; it is a functional
break on a page that feedback already touches.) */
.filter-chips { justify-content: flex-start; }
.filter-chips > :first-child { margin-inline-start: auto; }
.filter-chips > :last-child { margin-inline-end: auto; }