/* ========================================================= BiG. Campaign detail pages. Reuses the global type scale and header/footer from styles.css. Colour comes from the per-page --brand-* vars set on , so each client keeps its own universe. No limewash purple here. ========================================================= */ body.campaign-page { --cp-bg: #f6f4ef; --cp-ink: #14141a; --cp-ink-soft: #4a4a55; --cp-rule: rgba(20, 20, 26, 0.14); background: var(--cp-bg); color: var(--cp-ink); } body.campaign-page--dark { --cp-bg: #0b0d12; --cp-ink: #f2f0eb; --cp-ink-soft: rgba(242, 240, 235, 0.72); --cp-rule: rgba(242, 240, 235, 0.18); } body.campaign-page .site-header { background-color: var(--brand-deep, #14141a); background-image: none; } .cp-wrap { max-width: 900px; margin: 0 auto; padding: calc(var(--header-height) + 3rem) var(--site-gutter) 0; } /* Breadcrumb */ .cp-crumbs { font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cp-ink-soft); margin-bottom: 3rem; } .cp-crumbs a { border-bottom: 1px solid var(--cp-rule); } .cp-crumbs a:hover { color: var(--brand-primary, var(--cp-ink)); } .cp-crumbs span { margin: 0 0.5rem; } .cp-crumbs span[aria-current] { margin-left: 0; } /* Hero */ .cp-hero { margin-bottom: 3rem; } .cp-hero__kicker { display: block; font-family: var(--font-body); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand-ink, var(--cp-ink-soft)); margin-bottom: 1.1rem; } .cp-hero__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(2.2rem, 6vw, 4.2rem); line-height: 1.02; letter-spacing: -0.02em; text-transform: none; color: var(--cp-ink); margin-bottom: 1rem; } .cp-hero__sub { font-family: var(--font-body); font-size: clamp(1.05rem, 2vw, 1.35rem); line-height: 1.5; color: var(--cp-ink-soft); max-width: 44ch; } /* Film */ .cp-film { position: relative; padding-top: 56.25%; margin: 0 0 3.5rem; background: #000; } .cp-film iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Body copy */ .cp-body { margin-bottom: 3.5rem; } .cp-sec { margin-bottom: 2.4rem; } .cp-sec h2 { font-family: var(--font-body); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand-ink, var(--cp-ink-soft)); margin-bottom: 0.7rem; } .cp-sec p { font-family: var(--font-body); font-size: 1.05rem; line-height: 1.72; color: var(--cp-ink); max-width: 68ch; } .cp-sec a { border-bottom: 1px solid var(--brand-primary); } /* Stills */ .cp-stills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-bottom: 3.5rem; } .cp-stills figure { margin: 0; } .cp-stills img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 700px) { .cp-stills { grid-template-columns: 1fr; } } /* Link into the deeper case study */ .cp-deeper { border-top: 2px solid var(--brand-primary); border-bottom: 1px solid var(--cp-rule); padding: 1.6rem 0 1.8rem; margin-bottom: 3rem; } .cp-deeper__label { display: block; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cp-ink-soft); margin-bottom: 0.6rem; } .cp-deeper__link { font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.15rem, 2.4vw, 1.7rem); line-height: 1.2; text-transform: none; color: var(--cp-ink); } .cp-deeper__link:hover { color: var(--brand-primary); } /* Related */ .cp-related { margin-bottom: 3.5rem; } .cp-related h2 { font-family: var(--font-body); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cp-ink-soft); margin-bottom: 0.9rem; } .cp-related ul { list-style: none; } .cp-related li { border-bottom: 1px solid var(--cp-rule); } .cp-related a { display: block; padding: 0.85rem 0; font-size: 1rem; color: var(--cp-ink); } .cp-related a:hover { color: var(--brand-primary); } /* Index groups */ .cp-group { margin-bottom: 3rem; } .cp-group__title { font-family: var(--font-heading); font-weight: 700; font-size: 1rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--purple-mid); padding-bottom: 0.6rem; border-bottom: 2px solid var(--purple-mid); margin-bottom: 0.5rem; } .cp-list { list-style: none; } .cp-list__item { padding: 1.15rem 0; border-bottom: 1px solid var(--cp-rule); } .cp-list__link { display: block; font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.1rem, 2.4vw, 1.5rem); line-height: 1.2; text-transform: none; color: var(--cp-ink); } .cp-list__link:hover { color: var(--purple-mid); } .cp-list__sub { display: block; font-size: 0.95rem; line-height: 1.5; color: var(--cp-ink-soft); margin-top: 0.3rem; } .cp-list__case { display: block; font-size: 0.82rem; color: var(--cp-ink-soft); margin-top: 0.5rem; } .cp-list__case a { border-bottom: 1px solid var(--cp-rule); } .cp-list__case a:hover { color: var(--purple-mid); } /* Close + pager */ .cp-close { border-top: 1px solid var(--cp-rule); padding: 2.5rem 0 2rem; } .cp-close p { font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.2rem, 2.6vw, 1.8rem); line-height: 1.25; text-transform: none; max-width: 34ch; margin-bottom: 1.4rem; color: var(--cp-ink); } .cp-close__cta { display: inline-block; padding: 0.85rem 1.6rem; background: var(--brand-primary, var(--purple-mid)); color: #fff; font-family: var(--font-body); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; } .cp-close__cta:hover { opacity: 0.86; } .cp-pager { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-top: 1px solid var(--cp-rule); padding: 1.4rem 0 3.5rem; font-size: 0.85rem; color: var(--cp-ink-soft); } .cp-pager a:hover { color: var(--brand-primary); } body.campaign-index .cp-close__cta { background: var(--purple-mid); }