/* ========================================================================== Pickle with Heart — site styles Cream paper, near-black ink, purple accent, orange subheadings. Brand colours mirror utils.py — keep the two in sync. ========================================================================== */ :root { /* colour --accent = utils.py PURPLE. Clears WCAG AA on cream at 5.7:1, so unlike the old Gamma purple it needs no darker companion — one value serves headings, borders, icon fills and button backgrounds. --orange = utils.py ORANGE, used for every subheading on the page. Note it measures 2.1:1 against cream, below the 4.5:1 WCAG AA floor; the subheadings are sized up to 18.9px/700 to keep them as readable as possible at that contrast. */ --paper: #fffdf6; --paper-tint: #faf1dc; --paper-deep: #f0e4f1; --ink: #2b2333; --ink-soft: #5c5468; --line: #e6dcc7; --line-accent: #ddbfdf; --accent: #9A429E; --accent-wash: #f7edf8; --orange: #ff954f; --court: #1f5a8f; /* type */ --font-display: "Marcellus", Georgia, "Times New Roman", serif; --font-body: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* layout */ --wrap: 74rem; --gutter: clamp(1.25rem, 4vw, 3rem); --radius: 18px; --radius-sm: 12px; --shadow: 0 1px 2px rgba(43, 35, 51, .05), 0 12px 32px -12px rgba(43, 35, 51, .18); --shadow-lg: 0 2px 4px rgba(43, 35, 51, .06), 0 28px 60px -20px rgba(43, 35, 51, .28); --header-h: 4.5rem; } /* --------------------------------------------------------- base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); -webkit-text-size-adjust: 100%; } body { margin: 0; /* clip, not hidden: hidden would make a scroll container and break the sticky header. Guards against a stray wide element on small screens. */ overflow-x: clip; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 1rem; line-height: 1.7; /* "picklewithheart@gmail.com" has no break opportunity and overflowed the callout at 320px; let long tokens break rather than push the page wide */ overflow-wrap: break-word; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 .6em; text-wrap: balance; } h1 { font-size: clamp(2.4rem, 6vw, 4.1rem); } h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); color: var(--accent); } h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); } p { margin: 0 0 1.1em; text-wrap: pretty; } p:last-child { margin-bottom: 0; } a { color: var(--accent); } a:hover { color: var(--ink); } img, picture, svg { max-width: 100%; } img { height: auto; display: block; } ul { margin: 0; padding: 0; list-style: none; } :focus-visible { outline: 3px solid var(--court); outline-offset: 3px; border-radius: 4px; } .sr-only { 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; left: 50%; top: 0; transform: translate(-50%, -120%); z-index: 100; background: var(--ink); color: var(--paper); padding: .7rem 1.25rem; border-radius: 0 0 var(--radius-sm) var(--radius-sm); text-decoration: none; font-weight: 600; transition: transform .2s; } .skip-link:focus-visible { transform: translate(-50%, 0); color: var(--paper); } .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .eyebrow { font-size: 1.18rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--orange); margin-bottom: .8rem; } /* -------------------------------------------------------- buttons -------- */ .btn { --btn-bg: transparent; --btn-fg: var(--ink); --btn-border: currentColor; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .85rem 1.9rem; border: 1.5px solid var(--btn-border); border-radius: 999px; background: var(--btn-bg); color: var(--btn-fg); font: inherit; font-weight: 600; font-size: .95rem; line-height: 1.2; text-decoration: none; /* never wider than its container — a nowrap pill overflowed narrow cards at 320px; long labels wrap to a second line instead */ max-width: 100%; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease; } .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .btn:active { transform: translateY(0); } .btn-accent { --btn-bg: var(--accent); --btn-fg: #fffdf6; --btn-border: var(--accent); } .btn-accent:hover { --btn-bg: #b04eb4; --btn-border: #b04eb4; color: #fffdf6; } .btn-outline { --btn-border: var(--line-accent); --btn-fg: var(--ink); } .btn-outline:hover { --btn-bg: var(--accent-wash); --btn-border: var(--accent); color: var(--accent); } .btn-ghost { --btn-bg: rgba(255, 253, 246, .12); --btn-fg: #fffdf6; --btn-border: rgba(255, 253, 246, .6); backdrop-filter: blur(6px); } .btn-ghost:hover { --btn-bg: #fffdf6; --btn-border: #fffdf6; color: var(--ink); } .btn-lg { padding: 1.1rem 2.5rem; font-size: 1.02rem; } /* --------------------------------------------------------- header -------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 253, 246, .82); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .25s, box-shadow .25s; } .site-header.is-stuck { border-bottom-color: var(--line); box-shadow: 0 8px 24px -18px rgba(43, 35, 51, .5); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--header-h); } .brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); font-family: var(--font-display); font-size: 1.2rem; letter-spacing: .01em; white-space: nowrap; } /* the emblem is wider than it is tall, so size it by height and let the width follow — a square box would letterbox it */ .brand-mark { flex: none; display: block; } .brand-mark img { height: 3.1rem; width: auto; display: block; } .primary-nav { display: flex; align-items: center; gap: 1.75rem; } .primary-nav ul { display: flex; align-items: center; gap: 1.5rem; } /* scoped to `ul` on purpose: the Donate button is a sibling of the list, and these rules outrank both .btn and .nav-donate on specificity — unscoped they flatten the button's padding and repaint its label grey. */ .primary-nav ul a { color: var(--ink-soft); text-decoration: none; font-size: .92rem; font-weight: 500; padding: .35rem 0; border-bottom: 2px solid transparent; transition: color .18s, border-color .18s; } .primary-nav ul a:hover, .primary-nav ul a.is-current { color: var(--ink); border-bottom-color: var(--accent); } .nav-donate { padding: .68rem 1.5rem; font-size: .88rem; white-space: nowrap; flex: none; } .nav-toggle { display: none; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: 1.5px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; } .nav-toggle-bars { display: grid; gap: 4px; width: 1.1rem; } .nav-toggle-bars span { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s ease, opacity .2s ease; } .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } @media (max-width: 62rem) { .nav-toggle { display: inline-flex; } .primary-nav { position: absolute; inset: 100% 0 auto; flex-direction: column; align-items: stretch; gap: .25rem; padding: 1rem var(--gutter) 1.75rem; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); display: none; } .primary-nav.is-open { display: flex; } .primary-nav ul { flex-direction: column; align-items: stretch; gap: 0; } .primary-nav ul a { display: block; padding: .85rem 0; font-size: 1.05rem; border-bottom: 1px solid var(--line); } .primary-nav ul a:hover, .primary-nav ul a.is-current { border-bottom-color: var(--line); } .nav-donate { margin-top: 1.1rem; align-self: flex-start; } } /* ----------------------------------------------------------- hero -------- */ .hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); /* let the track shrink below min-content */ align-items: end; min-height: min(86vh, 46rem); padding-block: clamp(5rem, 16vh, 9rem) clamp(3rem, 8vh, 5rem); color: #fffdf6; overflow: hidden; } .hero-bg { position: absolute; inset: 0; z-index: -2; } .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; } .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(32, 16, 48, .92) 0%, rgba(32, 16, 48, .62) 45%, rgba(32, 16, 48, .25) 100%), linear-gradient(105deg, rgba(32, 16, 48, .55), transparent 62%); } .hero-inner { max-width: 46rem; } .hero h1 { color: inherit; margin-bottom: .5em; text-shadow: 0 2px 24px rgba(0, 0, 0, .35); } .hero .lede { font-size: clamp(1.05rem, 1.6vw, 1.22rem); max-width: 40rem; color: rgba(255, 253, 246, .93); } .hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; } /* ---------------------------------------------------------- strip -------- */ .strip { background: var(--paper-tint); border-block: 1px solid var(--line); } .strip-rail { display: flex; gap: .5rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .5rem; scrollbar-width: thin; } .strip-rail li { flex: 1 0 clamp(11rem, 22vw, 17rem); scroll-snap-align: start; } .strip-rail img { width: 100%; height: clamp(10rem, 20vw, 15rem); object-fit: cover; border-radius: var(--radius-sm); } /* -------------------------------------------------------- sections ------- */ .section { padding-block: clamp(3.5rem, 9vw, 6.5rem); } .section-tint { background: var(--paper-tint); } .section-head { max-width: 46rem; margin-bottom: clamp(2rem, 5vw, 3.25rem); } .section-head-sub { margin-top: clamp(3rem, 7vw, 4.5rem); } .section-head h3 { font-size: clamp(1.5rem, 3vw, 2rem); } .section-intro { color: var(--ink-soft); font-size: 1.05rem; } /* ---------------------------------------------------------- cards -------- */ .card-grid { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); } .cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); } .cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); } .card { background: var(--paper); border: 1px solid var(--line-accent); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2rem); box-shadow: var(--shadow); transition: transform .25s ease, box-shadow .25s ease; } .section-tint .card { background: var(--paper); } .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .card p { color: var(--ink-soft); margin-bottom: 0; } .card h3 { margin-bottom: .5rem; } .card-icon { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 1.1rem; border-radius: 999px; background: var(--accent); color: #fffdf6; } .card-icon svg { width: 1.5rem; height: 1.5rem; } /* media cards (Get involved) */ .card-grid-media .card { padding: 0; overflow: hidden; display: flex; flex-direction: column; } .card-media img { width: 100%; height: 15rem; object-fit: cover; object-position: 50% 32%; } .card-media .card-body { padding: clamp(1.4rem, 3vw, 1.85rem); display: flex; flex-direction: column; gap: .85rem; flex: 1; } .card-media .card-body p { flex: 1; } .card-media .btn { align-self: flex-start; } /* ----------------------------------------------------------- split ------- */ .split { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: minmax(0, 1fr); align-items: start; } @media (min-width: 56rem) { .split { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); } } .split-media img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-lg); aspect-ratio: 4 / 5; object-fit: cover; } .media-caption { margin-top: .85rem; font-size: .85rem; color: var(--ink-soft); font-style: italic; /* centred rather than nudged by a fixed amount, so it stays balanced under the photo at every width — including where the text wraps to two lines */ text-align: center; } /* :not(.eyebrow) matters — this selector outranks .eyebrow on specificity and would otherwise repaint the section label with the body-text grey. */ .split-body p:not(.eyebrow) { color: var(--ink-soft); } .split-body .note { margin-top: 1.5rem; padding: 1rem 1.25rem; border-left: 3px solid var(--accent); background: var(--paper); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--ink); } /* ------------------------------------------------------- news + logos ---- */ .news { background: linear-gradient(140deg, #fdf7fd, #f8eef9); border: 1px solid var(--line-accent); border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2rem); margin-bottom: clamp(2rem, 5vw, 3rem); } .news-tag { font-size: 1.18rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--orange); margin-bottom: .6rem; } .news p:last-child { font-size: 1.06rem; margin-bottom: 0; } /* flex, not grid: the partner list grows over time and rarely divides evenly into columns. Wrapping + centring means an incomplete last row reads as deliberate rather than as a gap. Currently 4+3 at desktop, 2 per row on a phone. */ .logo-row { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(.75rem, 2vw, 1.25rem); } .logo-row li { flex: 1 1 clamp(8rem, 20vw, 13rem); max-width: 18rem; display: grid; place-items: center; padding: 1.5rem; background: #fff; border: 1px solid var(--line-accent); border-radius: var(--radius-sm); transition: box-shadow .25s ease, transform .25s ease; } .logo-row li:hover { transform: translateY(-2px); box-shadow: var(--shadow); } /* the button fills the tile so the whole card is the click target; the tile's own card styling (white, border, radius) stays on the

*/ .logo-row .shot { display: grid; place-items: center; } .logo-row .shot img { transition: transform .3s ease; } .logo-row .shot:hover img { transform: scale(1.04); } .logo-row img { width: 100%; /* wide logos are width-constrained and unaffected by this; the taller box only gives the square/vertical marks (GYAC, PBU) room to read at a comparable size */ height: 6.5rem; object-fit: contain; } /* ------------------------------------------------ feature (Inspiration) --- */ .section-feature { background: var(--paper-tint); text-align: center; } .section-feature h2 { margin-bottom: clamp(1.5rem, 4vw, 2.25rem); } .section-feature picture { display: block; } .section-feature img { width: 100%; max-width: 52rem; margin-inline: auto; border-radius: var(--radius); box-shadow: var(--shadow-lg); } /* --------------------------------------------------------- gallery ------- */ /* Masonry via CSS columns. The photos are a mix of portrait and landscape, so a uniform grid could only fit them with object-fit:cover, which sliced the tops off the tall ones. Here each photo keeps its own aspect ratio and the column simply flows around it — no cropping at any viewport width. `columns: ` sets a target column width and lets the browser pick the count, so this stays responsive with no breakpoints: roughly 3 across for the first gallery and 7 for the dense one at desktop, 1 and 2 on a phone. */ .gallery { --gallery-gap: clamp(.5rem, 1.2vw, .85rem); columns: 20rem; column-gap: var(--gallery-gap); } .gallery-dense { columns: 9.5rem; } .gallery li { break-inside: avoid; /* never split a photo across two columns */ -webkit-column-break-inside: avoid; margin-bottom: var(--gallery-gap); } /* .shot is the lightbox trigger — a bare button reset shared by the photo galleries and the partner logos. Anything that affects appearance is scoped to the container, so adding .shot to a logo doesn't restyle it. */ .shot { display: block; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: zoom-in; position: relative; } .gallery .shot { background: var(--paper-deep); border-radius: var(--radius-sm); overflow: hidden; } .gallery .shot img { width: 100%; height: auto; /* intrinsic ratio, from the width/height attrs */ transition: transform .4s ease, filter .3s ease; } .gallery .shot:hover img { transform: scale(1.05); filter: brightness(1.04); } /* --------------------------------------------------------- callout ------- */ .callout { display: flex; align-items: flex-start; gap: 1rem; margin-top: clamp(2rem, 5vw, 3rem); padding: clamp(1.25rem, 3vw, 1.75rem); background: var(--accent-wash); border: 1px solid var(--line-accent); border-radius: var(--radius); } /* min-width: 0 — a flex item refuses to shrink below its min-content width, which here is the unbreakable email address. Without this the paragraph stays 227px wide and pushes past a 320px screen; with it, the inherited overflow-wrap can finally break the address. */ .callout p { margin: 0; min-width: 0; color: var(--ink-soft); } .callout a { padding-block: .35rem; } /* comfortable tap target, inline flow kept */ .callout-icon { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 12px; background: var(--accent); color: #fffdf6; } .callout-icon svg { width: 1.35rem; height: 1.35rem; } /* ---------------------------------------------------------- footer ------- */ .site-footer { background: #2e2140; color: rgba(255, 253, 246, .78); padding-top: clamp(3rem, 7vw, 4.5rem); } .footer-inner { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); padding-bottom: clamp(2.5rem, 6vw, 3.5rem); } .site-footer h2 { font-family: var(--font-body); font-size: 1.02rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--orange); margin-bottom: 1rem; } .footer-name { font-family: var(--font-display); font-size: 1.4rem; color: #fffdf6; margin-bottom: .6rem; } .footer-brand p { max-width: 26rem; font-size: .95rem; } .footer-logo { display: block; margin-top: 1.5rem; } .footer-logo img { width: min(100%, 13rem); height: auto; } /* padding, not margin: it grows the tap target itself. At 19px tall these links were under the 24px WCAG 2.2 minimum for pointer targets. */ .footer-nav li { margin-bottom: 0; } .footer-nav a { display: inline-block; padding: .55rem 0; } .footer-contact p a { display: inline-block; padding: .4rem 0; } /* :not(.btn) — this outranks .btn-accent, and unscoped it repaints the footer Donate label cream instead of orange. */ .site-footer a:not(.btn) { color: rgba(255, 253, 246, .82); text-decoration: none; } .site-footer a:not(.btn):hover { color: var(--orange); text-decoration: underline; } .footer-contact .btn { margin-top: 1rem; } .footer-legal { border-top: 1px solid rgba(255, 253, 246, .14); padding-block: 1.5rem; } .footer-legal p { margin: 0; font-size: .85rem; color: rgba(255, 253, 246, .55); } /* -------------------------------------------------------- lightbox ------- */ .lightbox { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; background: rgba(26, 14, 38, .95); overflow: hidden; } .lightbox::backdrop { background: rgba(26, 14, 38, .9); } .lb-figure { margin: 0; height: 100%; display: grid; /* minmax(0, 1fr), not 1fr: a bare 1fr row is content-sized, which makes the row height indefinite — the image's max-height:100% then resolves to none and a tall portrait renders full size and gets clipped by the dialog. */ grid-template-rows: minmax(0, 1fr); place-items: center; padding: clamp(3.5rem, 8vw, 5rem) clamp(1rem, 6vw, 5rem) clamp(1.5rem, 4vw, 2.5rem); } /* the stage takes the definite row height; the image then sizes against it */ .lb-stage { min-height: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .lb-img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: var(--radius-sm); } /* .lb-caption carries no visual styling — the element is hidden with .sr-only in the markup, so the text exists only for screen readers. */ .lb-btn { position: absolute; z-index: 2; display: grid; place-items: center; width: 3rem; height: 3rem; border: 1px solid rgba(255, 253, 246, .28); border-radius: 999px; background: rgba(26, 14, 38, .55); color: #fffdf6; cursor: pointer; backdrop-filter: blur(6px); transition: background-color .2s, transform .2s; } .lb-btn:hover { background: var(--accent); color: #fffdf6; transform: scale(1.06); } /* a class selector outranks the UA's [hidden]{display:none}, so restate it — without this, hiding the arrows for a single-item gallery silently fails */ .lb-btn[hidden] { display: none; } .lb-btn svg { width: 1.35rem; height: 1.35rem; } .lb-close { top: 1rem; right: 1rem; } .lb-prev { left: 1rem; top: 50%; transform: translateY(-50%); } .lb-next { right: 1rem; top: 50%; transform: translateY(-50%); } .lb-prev:hover, .lb-next:hover { transform: translateY(-50%) scale(1.06); } @media (max-width: 34rem) { .lb-prev { left: .5rem; } .lb-next { right: .5rem; } } /* --------------------------------------------------------- motion -------- */ [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; } [data-reveal].is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } [data-reveal] { opacity: 1; transform: none; } } /* ----------------------------------------------------------- print ------- */ @media print { .site-header, .hero-actions, .lightbox, .strip, .nav-toggle { display: none !important; } body { background: #fff; color: #000; } .hero { min-height: auto; color: #000; } .hero-bg, .hero::after { display: none; } }