/* ============================================================ case-study.css — Wieldex Shared component library for single-page case studies (e.g. /work/molossos-wear/). Load this AFTER wieldex-theme.css and styles.css on any case study page — it only needs those two for tokens (--color-*, --space-*, --font-*, etc.) and a couple of shared classes (.container, .link-arrow, .cta, .btn). To build a new case study: 1. Copy an existing case study's /nav/footer boilerplate. 2. Reuse the section patterns below (.case-hero, .case-columns, .case-band, .case-split, .case-sticky, .case-impact, .case-gallery + .case-carousel, .case-offset, .case-agency-stats, .case-logos-row, .case-quote) in whatever order tells that project's story. 3. Swap in real content, images, and stats — nothing here is Molossos-specific. ============================================================ */ /* ── Wide container variant (case studies run wider than the site's default 1280px container in a few full-bleed sections) ── */ .container--wide { max-width: 1440px; } /* ── Hero: title + intro ───────────────────────────────────── Left-aligned, not centered like .page-hero — matches root's original case-study layout instead of the generic sub-page hero. */ .case-hero { padding: calc(var(--nav-height) + 7rem) 0 var(--space-16); background-color: var(--color-bg-light); } @media (min-width: 1024px) { .case-hero { padding: calc(var(--nav-height) + 9rem) 0 var(--space-20); } } .case-hero__title { font-size: clamp(2.25rem, 5vw, 3.75rem); font-family: var(--font-display); font-weight: 500; line-height: 1.1; color: var(--color-gray-900); margin-bottom: var(--space-8); } .case-hero__subtitle { max-width: 42rem; font-size: var(--text-lg); color: var(--color-gray-600); line-height: 1.75; } /* ── Hero image: full-bleed, no max-width cap ────────────────── */ .case-hero-image { padding: 0 var(--space-6) var(--space-16); } @media (min-width: 768px) { .case-hero-image { padding: 0 var(--space-16) var(--space-16); } } .case-hero-image__frame { position: relative; aspect-ratio: 21 / 10; overflow: hidden; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); } .case-hero-image__frame img { width: 100%; height: 100%; object-fit: cover; } .case-hero-image__frame::after { content: ""; position: absolute; inset: 0; background-color: rgba(13, 23, 35, 0.2); transition: background-color var(--transition-xslow); pointer-events: none; } .case-hero-image__frame:hover::after { background-color: transparent; } /* ── Measured Impact: 2-3 col bordered stat grid on dark bg ──── */ .case-impact { padding: var(--space-24) 0; background-color: var(--color-bg-dark); text-align: center; } .case-impact__title { font-family: var(--font-display); font-size: clamp(1.75rem, 3.5vw, 2.5rem); color: var(--color-white); margin-bottom: var(--space-16); } .case-impact__grid { display: grid; grid-template-columns: 1fr; } @media (min-width: 768px) { .case-impact__grid { grid-template-columns: repeat(3, 1fr); } } .case-stat { padding: var(--space-10) var(--space-4); border: 1px solid rgba(255, 255, 255, 0.1); border-top: none; } .case-impact__grid > .case-stat:first-child { border-top: 1px solid rgba(255, 255, 255, 0.1); } @media (min-width: 768px) { .case-stat { border-top: 1px solid rgba(255, 255, 255, 0.1); border-right: none; } .case-impact__grid > .case-stat:last-child { border-right: 1px solid rgba(255, 255, 255, 0.1); } } .case-stat__number { display: block; font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 400; color: var(--color-white); margin-bottom: var(--space-4); } .case-stat__label { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); } /* ── Photo gallery + carousel ───────────────────────────────── Arrow-driven, no autoplay — see case-study.js for the logic. The viewport is also a native scroll container with snap points, so touch swiping and mouse click-drag both work. */ .case-gallery { padding: var(--space-24) 0; background-color: var(--color-bg-light); } .case-gallery__header { text-align: center; max-width: 40rem; margin: 0 auto var(--space-16); } .case-gallery__kicker { display: block; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-primary); margin-bottom: var(--space-3); } .case-gallery__title { font-family: var(--font-display); font-size: clamp(1.75rem, 3.5vw, 2.5rem); color: var(--color-gray-900); } .case-carousel { display: flex; align-items: center; gap: var(--space-4); } .case-carousel__btn { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 3rem; height: 3rem; background-color: transparent; border: 1px solid var(--color-gray-300); color: var(--color-gray-700); cursor: pointer; transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); } .case-carousel__btn:hover:not(:disabled) { background-color: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); } .case-carousel__btn:disabled { opacity: 0.3; cursor: not-allowed; } .case-carousel__viewport { flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: grab; } .case-carousel__viewport::-webkit-scrollbar { display: none; } .case-carousel__viewport.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; } .case-carousel__track { display: flex; list-style: none; gap: var(--space-6); } .case-carousel__item { flex: 0 0 100%; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius-sm); scroll-snap-align: start; } @media (min-width: 640px) { .case-carousel__item { flex-basis: calc((100% - var(--space-6)) / 2); } } @media (min-width: 1024px) { .case-carousel__item { flex-basis: calc((100% - 2 * var(--space-6)) / 3); } } .case-carousel__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); } .case-carousel__item:hover img { transform: scale(1.05); } /* Molossos Wear's photography gallery is the flagship example — give it more width and larger images than the carousel's default sizing. */ .case-gallery .container--wide { max-width: 1680px; } @media (min-width: 1024px) { .case-gallery .case-carousel__item { flex-basis: calc((100% - var(--space-6)) / 2); } } /* ── Text-only two-column layout (e.g. Background / Approach, Services list / narrative) ─────────────────────────────────── */ .case-columns { padding: var(--space-20) 0; background-color: var(--color-white); } .case-columns--tight { padding-top: 0; } .case-columns__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-12); } @media (min-width: 768px) { .case-columns__grid { grid-template-columns: 5fr 6fr; column-gap: var(--space-16); } } .case-columns__title { font-size: var(--text-2xl); font-weight: 400; font-family: var(--font-body); color: var(--color-gray-800); margin-bottom: var(--space-8); } .case-columns__list { list-style: none; } .case-columns__list li { padding: var(--space-4) 0; border-top: 1px solid var(--color-gray-300); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-gray-800); } .case-columns__list li:first-child { border-top: none; } .case-columns__lead { font-size: var(--text-xl); line-height: 1.6; color: var(--color-gray-900); margin-bottom: var(--space-6); } .case-columns__body { color: var(--color-gray-500); line-height: 1.75; } .case-columns__divider { margin-top: var(--space-20); border-bottom: 1px solid var(--color-gray-200); } /* ── "What We Delivered" — three themed groups of deliverables, an alternative to .case-columns for listing services ─────────── */ .case-delivered { padding: var(--space-20) 0; background-color: var(--color-white); } .case-delivered__title { text-align: center; font-size: var(--text-2xl); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-primary); margin-bottom: var(--space-16); } .case-delivered__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-12); } @media (min-width: 768px) { .case-delivered__grid { grid-template-columns: repeat(3, 1fr); column-gap: var(--space-12); } } .case-delivered__group-title { font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-gray-900); margin-bottom: var(--space-4); } /* ── Decorative full-bleed photo band ─────────────────────────── */ .case-band { padding: var(--space-24) 0; background-color: var(--color-bg-dark); } .case-band__frame { height: 500px; overflow: hidden; } .case-band__frame img { width: 100%; height: 100%; object-fit: cover; opacity: 0.75; filter: grayscale(100%); transition: filter var(--transition-xslow), opacity var(--transition-xslow); } .case-band__frame:hover img { opacity: 1; filter: grayscale(0%); } /* ── Split section: copy + framed image panel, dark bg ────────── */ .case-split { padding: var(--space-24) 0; background-color: var(--color-bg-dark); } .case-split__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-16); align-items: center; } @media (min-width: 1024px) { .case-split__grid { grid-template-columns: 5fr 6fr; column-gap: var(--space-20); } } .case-split__title { font-family: var(--font-display); font-size: clamp(1.75rem, 3.5vw, 2.75rem); color: var(--color-white); line-height: 1.2; margin-bottom: var(--space-6); } .case-split__lead { font-size: var(--text-lg); font-weight: 300; color: var(--color-text-light); line-height: 1.7; margin-bottom: var(--space-6); } .case-split__body { color: rgba(229, 231, 235, 0.7); font-weight: 300; line-height: 1.75; margin-bottom: var(--space-8); } .case-split .link-arrow { color: var(--color-white); } .case-split .link-arrow:hover { color: var(--color-primary-hover); } .case-split__panel { padding: var(--space-10); background-color: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); } .case-split__panel img { width: 100%; height: auto; opacity: 0.9; } /* ── Sticky project section: image one side, content (sticky on desktop) on the other — build a mirrored second instance by swapping the order of .case-sticky__content / __image in HTML ── */ .case-sticky { padding: var(--space-24) 0; background-color: rgba(255, 255, 255, 0.02); } .case-sticky__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-16); } @media (min-width: 1024px) { .case-sticky__grid { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-20); } } .case-sticky__image { overflow: hidden; } .case-sticky__image img { width: 100%; height: 420px; object-fit: cover; filter: grayscale(100%); transition: filter var(--transition-xslow); } @media (min-width: 1024px) { .case-sticky__image img { height: 700px; } } .case-sticky__image:hover img { filter: grayscale(0%); } /* Stacked variant: several images one under the other, each at its natural aspect ratio instead of the fixed-height cropped banner. */ .case-sticky__image--stack { display: flex; flex-direction: column; gap: var(--space-4); } .case-sticky__image--stack img { height: auto; object-fit: contain; filter: none; } /* Too tall to be worth the scroll on small screens */ .case-sticky__image--hide-mobile { display: none; } @media (min-width: 1024px) { .case-sticky__image--hide-mobile { display: block; } } /* Small inset image floated over the bottom-right corner of the one before it */ .case-sticky__image-group { position: relative; } .case-sticky__image--inset { position: absolute; bottom: var(--space-4); right: var(--space-4); width: 40%; max-width: 190px; border: 4px solid var(--color-white); box-shadow: var(--shadow-lg); z-index: 1; } .case-sticky__content { display: flex; flex-direction: column; justify-content: center; } @media (min-width: 1024px) { .case-sticky__content { position: sticky; top: 10rem; height: fit-content; } } .case-sticky__kicker { display: block; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--color-primary-hover); margin-bottom: var(--space-6); } .case-sticky__title { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); color: var(--color-gray-900); line-height: 1.2; margin-bottom: var(--space-6); } .case-sticky__lead { font-size: var(--text-lg); font-weight: 300; color: var(--color-gray-600); line-height: 1.7; margin-bottom: var(--space-8); } .case-sticky__tags { display: flex; flex-wrap: wrap; gap: var(--space-3); } .case-sticky__tag { padding: var(--space-2) var(--space-5); border: 1px solid var(--color-gray-300); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-gray-600); } /* ── Two-column offset image cards (first card pulled up) ─────── */ .case-offset { padding: var(--space-24) 0; background-color: var(--color-white); } .case-offset__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-16); align-items: start; } @media (min-width: 768px) { .case-offset__grid { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-16); } } @media (min-width: 768px) { .case-offset__card--raised { margin-top: -6rem; } } .case-offset__image { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; padding: var(--space-12); margin-bottom: var(--space-8); background-color: var(--color-bg-light); border: 1px solid var(--color-gray-200); } .case-offset__image img { width: 75%; height: 75%; object-fit: contain; } .case-offset__title { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-gray-900); margin-bottom: var(--space-3); } .case-offset__desc { max-width: 26rem; color: var(--color-gray-500); font-weight: 300; line-height: 1.75; } /* ── Agency-wide stats strip — reuses the same .about__stats block as the homepage, so every page shows identical company stats ── */ .case-agency-stats { padding: 0 0 var(--space-24); background-color: var(--color-white); } /* ── Related-brands wordmark row ───────────────────────────────── */ .case-logos-row { padding: var(--space-16) 0; background-color: var(--color-white); border-top: 1px solid var(--color-gray-100); } .case-logos-row__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-10); } .case-logos-row__mark { height: 2rem; width: auto; filter: grayscale(100%) opacity(0.5); transition: filter var(--transition-medium); } .case-logos-row__mark:hover { filter: grayscale(0%) opacity(1); } /* ── Pull-quote ─────────────────────────────────────────────────── */ .case-quote { padding: var(--space-24) 0; background-color: var(--color-bg-light); } .case-quote__mark { font-family: var(--font-display); font-size: var(--text-6xl); color: rgba(25, 90, 152, 0.25); line-height: 1; margin-bottom: var(--space-6); } .case-quote__text { max-width: 52rem; font-family: var(--font-display); font-style: italic; font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.4; color: var(--color-gray-900); }