/* ==========================================================================
Blue Chair Productions Inc. — site styles
Type system, easing curves and layout rhythm follow the spencergabor.com
approach (condensed geometric headline face + Inter body, elastic motion,
swappable colour themes). Palette and content are BCP's own.
========================================================================== */
/* --------------------------------------------------------------------------
Fonts
Headline: Futura Condensed ExtraBold. macOS and iOS ship this face, and if
Futura Now Headline is licensed and installed it is picked up first.
Everyone else falls back to Antonio (Google Fonts), loaded in .
Body: Inter Medium (Google Fonts).
-------------------------------------------------------------------------- */
@font-face{
font-family:"BCP Headline";
font-style:normal;
font-weight:400;
font-display:swap;
src:local("Futura Now Headline Cn XBd"),
local("FuturaNowHeadline-CnXBd"),
local("Futura Condensed ExtraBold"),
local("Futura-CondensedExtraBold"),
local("Futura Condensed Extra Bold");
}
/* --------------------------------------------------------------------------
Tokens
-------------------------------------------------------------------------- */
:root{
--ease-linear:cubic-bezier(.25,.25,.75,.75);
--ease-in-out-sine:cubic-bezier(.445,.05,.55,.95);
--ease-out-sine:cubic-bezier(.39,.575,.565,1);
--ease-out-cubic:cubic-bezier(.215,.61,.355,1);
--ease-in-out-cubic:cubic-bezier(.645,.045,.355,1);
--ease-out-expo:cubic-bezier(.19,1,.22,1);
--ease-out-back:cubic-bezier(.175,.885,.32,1.275);
--ease-out-elastic:linear(0,.5737 7.6%,.8382 11.87%,.9463 14.19%,1.0292 16.54%,1.0886 18.97%,1.1258 21.53%,1.137 22.97%,1.1424 24.48%,1.1423 26.1%,1.1366 27.86%,1.1165 31.01%,1.0507 38.62%,1.0219 42.57%,.9995 46.99%,.9872 51.63%,.9842 58.77%,1.0011 81.26%,1);
--ease-out-elastic-soft:linear(0,.2178 2.1%,1.1144 8.49%,1.2959 10.7%,1.3463 11.81%,1.3705 12.94%,1.3726,1.3643 14.48%,1.3151 16.2%,1.0317 21.81%,.941 24.01%,.8912 25.91%,.8694 27.84%,.8698 29.21%,.8824 30.71%,1.0122 38.33%,1.0357,1.046 42.71%,1.0416 45.7%,.9961 53.26%,.9839 57.54%,.9853 60.71%,1.0012 68.14%,1.0056 72.24%,.9981 86.66%,1);
--safe-top:env(safe-area-inset-top);
--safe-right:env(safe-area-inset-right);
--safe-bottom:env(safe-area-inset-bottom);
--safe-left:env(safe-area-inset-left);
--font-family-headline:"BCP Headline","Antonio","Futura",Impact,sans-serif;
--font-family-body:"Inter",system-ui,-apple-system,sans-serif;
--padding:1rem;
--gap:1rem;
--max-width:860px;
--radius:1rem;
--shadow:0px 9px 21px rgba(0,0,0,.1),0px 38px 38px rgba(0,0,0,.09),0px 85px 51px rgba(0,0,0,.05);
--font-h1:4.125rem/.82 var(--font-family-headline);
--font-h2:2.5rem/.82 var(--font-family-headline);
--font-h3:1.75rem/.9 var(--font-family-headline);
--font-h4:.875rem/1 var(--font-family-headline);
--font-h6:500 .5625rem/1 var(--font-family-body);
--font-body:500 1rem/1.3 var(--font-family-body);
}
@media (width >= 768px){
:root{
--font-h1:6.25rem/.82 var(--font-family-headline);
--font-h2:4rem/.82 var(--font-family-headline);
--font-h3:2.25rem/.9 var(--font-family-headline);
}
}
/* --------------------------------------------------------------------------
Colour themes. Two colours each: primary = page, onPrimary = text.
The text colour doubles as the accent (buttons, footer, eyebrows) with
the page colour as the label on it. --color-error is for the client gate.
01 paper : #F7FBFC page, #073F91 text (the default)
02 midnight : #074A9C page, #9DE5EA text
03 sunset : #F25A82 page, #FFD078 text
04 sea : #7042C1 page, #F47AA0 text
Keep the swatch colours in each page's .color-picker in step with these.
-------------------------------------------------------------------------- */
:root,
[data-theme="paper"]{
--color-primary:#f7fbfc;
--color-secondary:#073f91;
--color-onPrimary:#073f91;
--color-onSecondary:#f7fbfc;
--color-muted:rgba(7,63,145,.6);
--color-error:#d0342c;
color-scheme:light;
}
[data-theme="midnight"]{
--color-primary:#074a9c;
--color-secondary:#9de5ea;
--color-onPrimary:#9de5ea;
--color-onSecondary:#074a9c;
--color-muted:rgba(157,229,234,.6);
--color-error:#ffb3a7;
color-scheme:dark;
}
[data-theme="sunset"]{
--color-primary:#f25a82;
--color-secondary:#ffd078;
--color-onPrimary:#ffd078;
--color-onSecondary:#f25a82;
--color-muted:rgba(255,208,120,.6);
--color-error:#4a0a1c;
color-scheme:dark;
}
[data-theme="sea"]{
--color-primary:#7042c1;
--color-secondary:#f47aa0;
--color-onPrimary:#f47aa0;
--color-onSecondary:#7042c1;
--color-muted:rgba(244,122,160,.6);
--color-error:#ffd078;
color-scheme:dark;
}
/* --------------------------------------------------------------------------
Base
-------------------------------------------------------------------------- */
*,::before,::after{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}
html{
line-sizing:normal;
-webkit-text-size-adjust:100%;
text-size-adjust:100%;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
color:var(--color-onPrimary);
font-family:var(--font-family-headline);
scroll-behavior:smooth;
}
html,body{width:100%;overflow-x:clip}
body{
min-height:100dvh;
background-color:var(--color-primary);
transition:background-color .5s var(--ease-in-out-sine),color .5s var(--ease-in-out-sine);
}
html.no-scroll{overflow:hidden}
main{position:relative;z-index:1;border-radius:0 0 2rem 2rem;background-color:var(--color-primary);transition:background-color .5s var(--ease-in-out-sine)} /* rounded so it reads as a sheet sliding over the footer */
[hidden]{display:none!important}
img,video,iframe{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none;padding:0}
::selection{background-color:color-mix(in srgb,var(--color-secondary),transparent 60%)}
h1,h2,h3,h4{text-wrap:balance}
h1{font:var(--font-h1)}
h2{font:var(--font-h2)}
h3{font:var(--font-h3)}
h1,h2,h3{letter-spacing:-.02em;text-transform:uppercase;font-feature-settings:"cpsp" on}
/* Split headings (see splitWords in main.js): the .82 leading is tighter than a comma's
tail, so the comma is lifted until it clears the caps on the next line. Futura Cond XBd
needs .13em; Antonio's taller caps need .22em. */
.word{white-space:nowrap}
.word .comma{display:inline-block;translate:0 var(--comma-lift,-.16em)}
.headline-fallback .word .comma{--comma-lift:-.24em}
h4,.eyebrow{font:var(--font-h4);letter-spacing:.1em;text-transform:uppercase;font-feature-settings:"cpsp" on}
small,.small{font:var(--font-h6);letter-spacing:.1em;text-transform:uppercase;font-feature-settings:"cpsp" on}
p,li,label,input,select,textarea{font:var(--font-body)}
p a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}
.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}
/* --------------------------------------------------------------------------
Buttons
-------------------------------------------------------------------------- */
.button{
display:inline-flex;
align-items:center;
justify-content:center;
gap:.5rem;
width:fit-content;
padding:1rem 2rem;
border-radius:50rem;
background-color:var(--color-secondary);
color:var(--color-onSecondary);
font:1rem/1 var(--font-family-headline);
letter-spacing:.02em;
text-transform:uppercase;
white-space:nowrap;
cursor:pointer;
transition:.8s scale var(--ease-out-elastic),.8s box-shadow var(--ease-out-elastic),.3s background-color,.3s color;
}
@media (any-hover:hover){
.button:hover{box-shadow:var(--shadow);scale:1.05}
}
.button:active{scale:.95!important}
.button:focus-visible{outline:3px solid color-mix(in srgb,var(--color-secondary) 60%,var(--color-onPrimary));outline-offset:3px}
.button--icon{
width:3rem;
height:3rem;
padding:0;
border-radius:50%;
box-shadow:var(--shadow);
font-size:1.35rem;
pointer-events:auto;
}
.button--icon svg{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.button--ghost{background:transparent;color:var(--color-onPrimary);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--color-onPrimary) 25%,transparent)}
@media (any-hover:hover){
.button--ghost:hover{background:var(--color-secondary);color:var(--color-onSecondary)}
}
/* --------------------------------------------------------------------------
Header: fixed, top right. Circle menu toggle that fans out pill links.
-------------------------------------------------------------------------- */
.header{
position:fixed;
top:max(calc(var(--safe-top) - var(--padding)),0px);
left:0;
width:100%;
z-index:20;
display:flex;
justify-content:flex-end;
align-items:flex-start;
gap:.6rem;
padding:var(--padding);
pointer-events:none;
color:var(--color-onPrimary);
}
.header__nav{position:relative;pointer-events:auto}
.header__toggle{position:relative;z-index:2}
.header__toggle .icon-open,.header__toggle .icon-close{position:absolute;transition:.5s scale var(--ease-out-elastic),.3s opacity}
.header__toggle .icon-close{scale:0;opacity:0}
.header__nav[open] .header__toggle .icon-open{scale:0;opacity:0}
.header__nav[open] .header__toggle .icon-close{scale:1;opacity:1}
.header__menu{
position:absolute;
top:calc(100% + .6rem);
right:0;
display:flex;
flex-direction:column;
align-items:flex-end;
gap:.5rem;
}
.header__menu .button{
scale:0;
transform-origin:top right;
visibility:hidden;
transition:.25s scale var(--ease-in-out-cubic),.25s visibility;
transition-delay:calc((var(--count) - var(--idx)) * .03s);
}
.header__nav[open] .header__menu .button{
scale:1;
visibility:visible;
transition:.7s scale var(--ease-out-elastic),.7s visibility;
transition-delay:calc(var(--idx) * .06s);
}
.header__menu .button[aria-current="page"]{background:var(--color-onPrimary);color:var(--color-primary)}
.header:not([visible]) .button--icon{scale:0;visibility:hidden}
/* --------------------------------------------------------------------------
Colour picker: fixed, bottom right. Toggle fans four swatches out in an arc.
-------------------------------------------------------------------------- */
.color-picker{
position:fixed;
right:var(--padding);
bottom:max(var(--safe-bottom),var(--padding));
z-index:19;
display:grid;
place-items:center;
--r:4.6rem;
touch-action:none;
user-select:none;
transition:.8s scale var(--ease-out-elastic),.8s visibility;
}
.color-picker:not([visible]){scale:0;visibility:hidden;transition:.2s scale var(--ease-out-cubic),.2s visibility}
.color-picker__toggle{grid-area:1/1;position:relative;z-index:1}
.color-picker label{
grid-area:1/1;
width:2.2rem;
height:2.2rem;
border-radius:50%;
cursor:pointer;
scale:0;
transition:.25s scale var(--ease-in-out-cubic),.25s translate var(--ease-in-out-cubic);
transition-delay:calc((3 - var(--idx)) * .03s);
--tx:calc(cos(var(--angle)) * var(--r));
--ty:calc(sin(var(--angle)) * var(--r) * -1);
}
.color-picker label:nth-of-type(1){--angle:180deg}
.color-picker label:nth-of-type(2){--angle:150deg}
.color-picker label:nth-of-type(3){--angle:120deg}
.color-picker label:nth-of-type(4){--angle:90deg}
.color-picker[open] label{
scale:1;
translate:var(--tx) var(--ty);
transition:.6s scale var(--ease-out-elastic),.6s translate var(--ease-out-elastic);
transition-delay:calc(var(--idx) * .05s);
}
.color-picker input{
appearance:none;
-webkit-appearance:none;
width:100%;
height:100%;
margin:0;
border-radius:50%;
cursor:pointer;
background:linear-gradient(135deg,var(--swatch-primary) 50%,var(--swatch-secondary) 50%);
box-shadow:var(--shadow),inset 0 0 0 2px rgba(255,255,255,.55);
transition:.6s scale var(--ease-out-elastic);
}
.color-picker input:checked{scale:1.2;box-shadow:var(--shadow),0 0 0 3px var(--color-onPrimary)}
.color-picker input:focus-visible{outline:3px solid var(--color-onPrimary);outline-offset:2px}
/* --------------------------------------------------------------------------
Home page rhythm
-------------------------------------------------------------------------- */
.index-page{display:flex;flex-direction:column;gap:8rem}
@media (width >= 768px){.index-page{gap:12rem}}
.index-page__section{display:flex;flex-direction:column;align-items:center;gap:2.5rem;width:100%}
.text-block{display:flex;flex-direction:column;align-items:center;gap:var(--gap);padding:0 var(--padding);text-align:center}
.text-block__title{font:var(--font-h2);letter-spacing:-.02em;text-transform:uppercase;font-feature-settings:"cpsp" on}
.text-block__description{max-width:24em}
/* --------------------------------------------------------------------------
Hero
-------------------------------------------------------------------------- */
.hero{
container:hero/inline-size;
display:grid;
grid-template-areas:"top" "mid" "bot";
grid-template-rows:auto 1fr auto;
grid-template-columns:minmax(0,1fr);
place-items:center;
width:100%;
min-height:100svh;
padding:max(var(--safe-top),var(--padding)) max(var(--safe-right),var(--padding)) max(var(--safe-bottom),var(--padding)) max(var(--safe-left),var(--padding));
text-align:center;
/* --hero-gap sits between the intro line and the headline and between the
tagline and the credits; --hero-gap-inner between each headline and the
mark. Height-based so the whole block fits a full screen. */
--hero-gap:min(4rem,5svh);
--hero-gap-inner:min(3rem,4svh);
row-gap:var(--hero-gap);
}
.hero > *{min-width:0;max-width:100%}
.hero__top{grid-area:top}
.hero__bot{grid-area:bot}
.hero__top,.hero__bot{display:flex;flex-direction:column;align-items:center;gap:.6rem;padding:2rem 0 0}
@media (width < 768px){.hero__top{padding-top:4.5rem}}
.hero__bot{padding:0 0 1.5rem}
.hero__top small,.hero__bot small{max-width:32em;text-wrap:balance;line-height:1.5}
.hero__location,.hero__credits{font:var(--font-h4);letter-spacing:.09em;max-width:34em;text-transform:uppercase}
.hero__mid{grid-area:mid;display:flex;flex-direction:column;align-items:center;gap:var(--hero-gap-inner);width:100%}
.hero__mid h1,.hero__mid h2{
font:var(--font-h1);
/* sized off the viewport height as well as the width so both two-line
headings, the mark and the intro/credits lines share one full screen */
font-size:max(3rem,min(7cqi,11svh));
max-width:min(12em,100%);
text-align:center;
letter-spacing:-.02em;
text-transform:uppercase;
}
.hero__mid h2{color:var(--color-secondary);transition:color .5s var(--ease-in-out-sine)}
/* on phones the name always breaks after "Chair" (see the
in index.html) */
@media (width >= 768px){.hero__br{display:none}}
.hero__mid .word{display:inline-block;transform-origin:bottom;will-change:transform}
.hero__mid .space{display:inline-block;width:.3ch;height:1em}
/* the logo sits between the two headlines in its own slot (14cqi, the old
tile size, capped by viewport height so short windows still fit one
screen). logo.png carries transparent padding (the artwork is 593 of the
file's 800px height; scripts/logo-cuts.py prints the number), so the image
is scaled up by 800/593 and centred on the slot; the visible mark then
fills the slot exactly and the transparent margins overflow harmlessly
into the gaps. It keeps the pointer parallax and scroll tilt the stills
had. */
.hero__mark{
--slot:max(6rem,min(14cqi,22svh));
position:relative;
z-index:1;
display:grid;
place-content:center;
height:var(--slot);
pointer-events:none;
--px:0;
--py:0;
}
.hero__mark img{
height:calc(var(--slot) * 800 / 593);
width:auto;
aspect-ratio:1;
user-select:none;
-webkit-user-drag:none;
translate:calc(var(--px) * .8px) calc(var(--py) * .8px);
rotate:calc(var(--velocity,0) * -.2deg);
}
/* mount choreography */
.hero:not([mounted]) .hero__mark img{scale:0}
.hero:not([mounted]) .hero__mid .word{scale:1 0;translate:0 .25ch}
.hero:not([mounted]) .hero__top,.hero:not([mounted]) .hero__bot{opacity:0}
.hero[mounted] .hero__mark img{transition:1s scale var(--ease-out-elastic) .4s,.6s translate var(--ease-out-cubic),.6s rotate var(--ease-out-cubic)}
.hero[mounted] .hero__mid .word{transition:.8s scale var(--ease-out-elastic),.8s translate var(--ease-out-elastic);transition-delay:calc(var(--delay) * .1s)}
.hero[mounted] .hero__top,.hero[mounted] .hero__bot{transition:1.2s opacity var(--ease-out-sine);transition-delay:.25s}
/* --------------------------------------------------------------------------
Brands band: a label at the left, then artists, brands and platforms as
lockups (logo mark + name) looping slowly to its right. The list is
written once in index.html; main.js appends a hidden copy so the -50%
translate loops back onto itself without a gap. Marks are monochrome:
each logo file is a CSS mask over currentColor, so they recolour with the
theme. Same column width and side padding as the Gallery grid. Each
mark carries its own mask-image and --ar (width ÷ height) inline.
-------------------------------------------------------------------------- */
.brands{width:100%}
.brands__inner{display:flex;flex-direction:column;gap:1.5rem;width:100%;max-width:1200px;margin:0 auto;padding:0 1.5rem}
@media (width >= 768px){.brands__inner{padding:0 2rem}}
@media (width >= 900px){.brands__inner{flex-direction:row;align-items:center;gap:3rem}}
.brands__label{flex:0 0 auto;margin:0;font:var(--font-h4);line-height:1.4;letter-spacing:.09em;text-transform:uppercase;opacity:.75}
.brands__scroller{
flex:1 1 auto;
min-width:0;
overflow:clip;
mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
-webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.brands__track{display:flex;width:max-content;animation:brands-scroll 40s linear infinite}
/* half a gap of padding on each side of each copy, so the join between the
two copies is exactly one gap wide */
.brands__list{--brand-gap:3.5rem;display:flex;align-items:center;gap:var(--brand-gap);margin:0;padding:0 calc(var(--brand-gap) / 2);list-style:none}
.brand{display:flex;align-items:center;gap:.55em;white-space:nowrap;font:var(--font-h3);font-size:1.375rem;letter-spacing:-.01em;text-transform:uppercase}
.brand__mark{
flex:0 0 auto;
height:1.75rem;
aspect-ratio:var(--ar,1);
background:currentColor;
/* the image itself is set inline on each mark (mask-image), because a
relative url() inside a custom property resolves against this
stylesheet's folder in Chrome, not the page */
mask-size:contain;mask-position:center;mask-repeat:no-repeat;
-webkit-mask-size:contain;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat;
transition:background-color .5s var(--ease-in-out-sine);
}
.brand--wordmark .brand__mark{height:2rem}
@keyframes brands-scroll{from{translate:0 0}to{translate:-50% 0}}
@media (any-hover:hover){.brands:hover .brands__track{animation-play-state:paused}}
/* --------------------------------------------------------------------------
Featured carousel (native horizontal scroll + drag, curved presentation)
-------------------------------------------------------------------------- */
/* overflow-y is hidden on purpose: the rotated slides extend below the box,
which would otherwise make the carousel scroll vertically inside itself
when the page is wheeled over it, pushing the stills up under the heading. */
.carousel{
width:100%;
overflow-x:auto;
overflow-y:hidden;
overscroll-behavior-x:contain;
scroll-snap-type:x mandatory;
scroll-behavior:smooth;
scrollbar-width:none;
cursor:grab;
touch-action:pan-x pan-y;
padding:5rem 0; /* headroom for the elastic pop-in and the tilt of neighbouring slides */
--gap:1rem;
}
.carousel::-webkit-scrollbar{display:none}
.carousel:active{cursor:grabbing}
.carousel.is-dragging{scroll-snap-type:none;scroll-behavior:auto}
.carousel__track{display:flex;align-items:flex-start;gap:var(--gap);width:max-content;padding:0 var(--edge,10vw)}
.carousel__slide{
display:flex;
flex-direction:column;
align-items:center;
gap:1rem;
width:auto;
max-width:90vw;
flex:0 0 auto;
scroll-snap-align:center;
--t:0;
rotate:calc(var(--t) * .03deg);
translate:0 calc((1 - cos(calc(var(--t) * 3.14 / 1000))) * 3rem);
transform-origin:50% 70vw;
}
/* Stills keep their native aspect ratio (no square crop) and share one
height, so the row reads as a filmstrip with landscape and portrait
frames side by side. */
.carousel__media{
display:block;
height:min(24rem,50vw);
width:auto;
cursor:pointer;
-webkit-user-drag:none;
border-radius:var(--radius);
overflow:clip;
background:var(--color-secondary);
transition:1.4s translate var(--ease-out-elastic),1.4s scale var(--ease-out-elastic);
transition-delay:calc(sin(calc(var(--idx) * 3.14 / 2)) * .12s);
user-select:none;
}
.carousel__media img{display:block;height:100%;width:auto;-webkit-user-drag:none;pointer-events:none;transition:.8s scale var(--ease-out-elastic)}
/* Each still is a link into the project popup, like the gallery tiles:
zoom on hover (clipped by the frame), settle on press, ring on focus. */
@media (any-hover:hover){.carousel:not(.is-dragging) .carousel__media:hover img{scale:1.04}}
.carousel__media:active img{scale:1}
.carousel__media:focus-visible{outline:3px solid color-mix(in srgb,var(--color-secondary) 60%,var(--color-onPrimary));outline-offset:3px}
.carousel__slide .button{opacity:cos(calc(var(--t) * 3.14 / 600))}
.carousel__slide small{opacity:calc(cos(calc(var(--t) * 3.14 / 600)) * .7)}
.carousel:not([inview]) .carousel__media{scale:.8;translate:0 20%}
/* --------------------------------------------------------------------------
Gallery grid of 16:9 tiles
-------------------------------------------------------------------------- */
.grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:2rem 1.25rem;
width:100%;
max-width:1200px;
margin:0 auto;
padding:0 1.5rem 4rem;
}
@media (width >= 768px){.grid{grid-template-columns:repeat(2,1fr);gap:3rem 2.5rem;padding:2rem 2rem 6rem}}
.project{
display:grid;
place-items:center;
width:100%;
cursor:pointer;
--shadow:0px 9px 21px rgba(0,0,0,.05),0px 38px 38px rgba(0,0,0,.045),0px 85px 51px rgba(0,0,0,.025);
}
.project__image{
grid-area:1/1;
position:relative;
width:100%;
border-radius:var(--radius);
transition:1s scale var(--ease-out-elastic);
}
.project__image:not(:first-child){rotate:calc(var(--rotation) * .5deg);translate:calc(var(--posX) * .25%) calc(var(--posY) * .25%)}
.project__image .media{
position:relative;
display:flex;
align-items:center;
justify-content:center;
border-radius:inherit;
transition:.8s scale var(--ease-out-elastic);
}
.project__image .media img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:inherit;overflow:clip;-webkit-user-drag:none}
.project__image .shadow{
position:absolute;
inset:0;
border-radius:inherit;
background-color:rgba(0,0,0,.05);
box-shadow:var(--shadow);
transition:.8s opacity var(--ease-out-elastic);
pointer-events:none;
}
.project:not([inview]) .project__image .media{scale:.7}
.project:not([inview]) .project__image .shadow{opacity:0}
@media (any-hover:hover){
.project:hover .project__image:first-child > *{scale:1.04}
.project:hover .project__image:nth-child(2) > *{scale:1.02}
.project:hover .project__image:nth-child(3) > *{scale:1.03}
}
.project:active .project__image:first-child > *{scale:.97}
.project:active .project__image:nth-child(2) > *{scale:.98}
.project__caption{
grid-area:2/1;
display:flex;
flex-direction:column;
align-items:center;
gap:.4rem;
padding-top:1.25rem;
text-align:center;
opacity:0;
translate:0 .5rem;
transition:.5s opacity var(--ease-out-sine),.8s translate var(--ease-out-elastic);
}
.project[inview] .project__caption{opacity:1;translate:0 0;transition-delay:.35s}
.project__caption h3{font:var(--font-h4);font-size:1rem;letter-spacing:.02em;text-transform:uppercase}
.project__caption small{color:var(--color-muted)}
.grid__note{grid-column:1/-1;text-align:center;color:var(--color-muted);max-width:28em;justify-self:center}
/* --------------------------------------------------------------------------
Footer. Sticks to the bottom of the viewport behind , so the page
slides off it like a curtain. main.js sets --reveal (0 → 1, how much of
the footer the page has uncovered) for the scrubbed parallax, and flips
[inview] on each [data-reveal] group as it emerges for the one-shot pop-in.
A footer taller than the viewport pins to the top instead (--footer-h is
measured by a ResizeObserver) and scrolls normally at the end of the page.
-------------------------------------------------------------------------- */
.footer{
position:sticky;
bottom:min(0px,calc(100dvh - var(--footer-h,0px)));
z-index:0;
width:100%;
overflow:clip;
background-color:var(--color-secondary);
color:var(--color-onSecondary);
--reveal:0;
--rule:color-mix(in srgb,currentColor 22%,transparent);
transition:background-color .5s var(--ease-in-out-sine),color .5s var(--ease-in-out-sine);
}
.footer__inner{
container:footer/inline-size;
width:100%;
max-width:1200px;
margin:0 auto;
min-height:100dvh;
display:flex;
flex-direction:column;
padding:4rem 2rem max(var(--safe-bottom),1.75rem);
text-align:left;
translate:0 calc((1 - var(--reveal)) * 10vh);
}
@media (width >= 768px){.footer__inner{padding:clamp(2.5rem,5vh,4.5rem) 4rem max(var(--safe-bottom),clamp(1.25rem,2.5vh,2rem))}}
/* call to action: headline + email pill, with a tilted logo tile */
.footer__cta{display:grid;grid-template-columns:minmax(0,1fr);gap:2.5rem;align-items:center;padding-bottom:3rem}
@media (width >= 768px){.footer__cta{grid-template-columns:minmax(0,1fr) auto;gap:3rem 4rem;padding-bottom:clamp(2rem,4vh,3.5rem)}}
.footer__intro{display:flex;flex-direction:column;align-items:flex-start;gap:1.25rem}
.footer__eyebrow{color:var(--color-primary);transition:1s opacity var(--ease-out-sine) .2s,color .5s var(--ease-in-out-sine)}
.footer__heading{max-width:6em;font:var(--font-h1);font-size:clamp(3rem,min(5vw,8.5vh),4.5rem);letter-spacing:-.02em;text-transform:uppercase}
.footer__heading .word{
display:inline-block;
transform-origin:bottom;
transition:.8s scale var(--ease-out-elastic),.8s translate var(--ease-out-elastic),color .5s var(--ease-in-out-sine);
transition-delay:calc(var(--delay,0) * .1s),calc(var(--delay,0) * .1s),0s;
}
.footer__heading .word:last-child{color:var(--color-primary)}
.footer__lede{max-width:26em;line-height:1.45;opacity:.8;transition:1s opacity var(--ease-out-sine) .3s}
.footer__action{margin-top:.25rem;transform-origin:left center;transition:1s scale var(--ease-out-elastic) .4s}
.footer .button{background-color:var(--color-primary);color:var(--color-onPrimary)}
.footer .button:focus-visible{outline-color:var(--color-onSecondary)}
.footer__mail{max-width:100%;padding:1.1rem 1.6rem 1.1rem 1.9rem;font-size:1.25rem;letter-spacing:.01em}
.footer__mail svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:.6s translate var(--ease-out-elastic)}
@media (any-hover:hover){.footer__mail:hover svg{translate:.12em -.12em}}
.footer__intro:not([inview]) .footer__heading .word{scale:1 0;translate:0 .25ch}
.footer__intro:not([inview]) :is(.footer__eyebrow,.footer__lede){opacity:0}
.footer__intro:not([inview]) .footer__action{scale:0}
.footer__stack{
display:grid;
width:clamp(7.5rem,min(22vw,33vh),18rem);
aspect-ratio:1;
justify-self:start;
}
@media (width >= 768px){.footer__stack{justify-self:end;margin-right:2rem}}
.footer__stack > *{
grid-area:1/1;
width:100%;
aspect-ratio:1;
object-fit:cover;
border-radius:var(--radius);
box-shadow:var(--shadow);
rotate:calc(var(--rot) * 1deg);
translate:calc(var(--tx) * 1%) calc(var(--ty) * 1%);
user-select:none;
-webkit-user-drag:none;
transition:1s scale var(--ease-out-elastic),1s rotate var(--ease-out-elastic),1s translate var(--ease-out-elastic);
transition-delay:calc(var(--idx,0) * .1s);
}
.footer__stack-mark{--rot:-2;--tx:0;--ty:0;background:#fbfaf7}
.footer__stack:not([inview]) > *{scale:0}
@media (any-hover:hover){
.footer__stack:hover > .footer__stack-mark{--rot:2;scale:1.06}
}
/* link columns */
.footer__grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:2.5rem 1.5rem;
margin-top:auto;
padding:2.5rem 0 3rem;
border-top:1px solid var(--rule);
}
@media (width >= 768px){.footer__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem 3rem;padding:clamp(1.5rem,3vh,2.5rem) 0 clamp(1.5rem,4vh,3.5rem)}}
.footer__col{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:1rem;
transition:.6s opacity var(--ease-out-sine),1s translate var(--ease-out-elastic);
transition-delay:calc(var(--idx,0) * .08s);
}
.footer__col:not([inview]){opacity:0;translate:0 1.25rem}
.footer__col--studio{grid-column:1/-1}
@media (width >= 768px){.footer__col--studio{grid-column:auto}}
.footer__label{color:var(--color-primary);font:var(--font-h4);letter-spacing:.1em;text-transform:uppercase;transition:color .5s var(--ease-in-out-sine)}
.footer__col ul{display:flex;flex-direction:column;align-items:flex-start;gap:.4rem}
.footer__col ul a{
display:inline-flex;
align-items:baseline;
gap:.2em;
font:1.5rem/1 var(--font-family-headline);
letter-spacing:-.01em;
text-transform:uppercase;
transform-origin:bottom left;
transition:.15s color var(--ease-in-out-sine),1s scale var(--ease-out-elastic-soft);
}
@media (width >= 768px){.footer__col ul a{font-size:clamp(1.5rem,3.2vh,1.85rem)}}
.footer__col ul a span{font-size:.55em;opacity:.7;transition:.6s translate var(--ease-out-elastic)}
.footer__col ul a[aria-current="page"]{color:var(--color-primary);text-decoration:underline;text-decoration-thickness:.07em;text-underline-offset:.12em}
.footer__col ul a:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:.25rem}
@media (any-hover:hover){
.footer__col ul a:hover{color:var(--color-primary);scale:1 1.15}
.footer__col ul a:hover span{translate:.2em -.25em}
}
.footer__col--studio p:not(.footer__label){line-height:1.5;opacity:.8}
/* wordmark, stretched up as the footer reveals, then the legal line */
.footer__wordmark{
margin:auto 0 0 -.03em;
color:var(--color-primary);
font:17cqi/.78 var(--font-family-headline);
letter-spacing:-.04em;
text-transform:uppercase;
white-space:nowrap;
pointer-events:none;
user-select:none;
transform:scaleY(calc(.6 + var(--reveal) * .4));
transform-origin:bottom left;
transition:color .5s var(--ease-in-out-sine);
}
.footer__wordmark span{display:block}
@media (width >= 768px){
.footer__wordmark{font-size:min(9.3cqi,12.5vh)}
.footer__wordmark span{display:inline}
}
.footer__bottom{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
align-items:center;
gap:1rem 2rem;
margin-top:clamp(.75rem,1.5vh,1.25rem);
padding:clamp(.75rem,1.5vh,1.25rem) 4.5rem 0 0; /* right clearance for the colour picker */
border-top:1px solid var(--rule);
}
.footer__bottom small{opacity:.75;line-height:1.6}
.footer .footer__top{
padding:.7rem 1.1rem .7rem 1.25rem;
font-size:.75rem;
background:transparent;
color:inherit;
box-shadow:inset 0 0 0 2px var(--rule);
}
.footer__top svg{width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media (any-hover:hover){
.footer .footer__top:hover{background:var(--color-primary);color:var(--color-onPrimary);box-shadow:var(--shadow)}
}
/* --------------------------------------------------------------------------
Project modal
-------------------------------------------------------------------------- */
.project-page{
position:fixed;
inset:0;
z-index:30;
display:flex;
--page-padding:.5rem;
--gap:.5rem;
padding:max(var(--safe-top),var(--page-padding)) max(var(--safe-right),var(--page-padding)) max(var(--safe-bottom),var(--page-padding)) max(var(--safe-left),var(--page-padding));
visibility:hidden;
opacity:0;
transition:.3s opacity var(--ease-in-out-sine),.3s visibility;
}
.project-page::before{content:"";position:fixed;inset:0;background:rgba(0,0,0,.6)}
.project-page[open]{visibility:visible;opacity:1}
.project-page__modal{
position:relative;
display:grid;
grid-template-rows:3rem 1fr;
width:100%;
height:100%;
padding:var(--padding) 0;
border-radius:2rem;
background-color:var(--color-primary);
color:var(--color-onPrimary);
overflow-y:auto;
overscroll-behavior:contain;
scrollbar-width:none;
transform-origin:center 100vh;
scale:.9;
transition:.2s scale var(--ease-in-out-cubic);
}
.project-page__modal::-webkit-scrollbar{display:none}
.project-page[open] .project-page__modal{scale:1;transition:.6s scale var(--ease-out-expo)}
.project-page__header{position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:0 var(--padding);width:100%}
.project-page__nav{display:flex;gap:.5rem}
.project-page__main{justify-self:center;display:flex;flex-direction:column;gap:2rem;width:100%;max-width:var(--max-width);padding:var(--padding)}
.project-page__head{display:flex;flex-direction:column;align-items:center;gap:var(--gap);text-align:center}
.project-page__tag{color:var(--color-secondary);transition:color .5s}
.project-page__title{width:100%}
.project-page__title .word{display:inline-block;transform-origin:bottom;transition:.8s scale var(--ease-out-elastic);transition-delay:calc(.2s + var(--delay) * .08s)}
.project-page__title .space{display:inline-block;width:.3ch}
.project-page:not([open]) .project-page__title .word{scale:1 0}
.project-page__description{max-width:28em;opacity:.7;transition:.4s opacity var(--ease-in-out-sine) .2s}
.project-page__description + .project-page__description{opacity:.5;font-size:.9rem}
.project-page:not([open]) .project-page__description{opacity:0}
.project-page__video{
position:relative;
width:100%;
aspect-ratio:16/9;
border-radius:var(--radius);
overflow:clip;
background:color-mix(in srgb,var(--color-onPrimary) 8%,var(--color-primary));
transform-origin:bottom;
transition:.8s all var(--ease-out-elastic) .15s;
}
.project-page:not([open]) .project-page__video{opacity:0;scale:.9}
.project-page__video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.project-page__video--poster{display:grid;place-items:center}
.project-page__video--poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(.7)}
.project-page__video--poster .button{position:relative}
.project-page__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap);width:100%}
.project-page__img{
display:flex;
position:relative;
width:100%;
border-radius:var(--radius);
overflow:clip;
transform-origin:bottom;
transition:.8s all var(--ease-out-elastic) .15s;
}
.project-page__img:first-of-type:last-of-type,.project-page__img:nth-of-type(3n){grid-column:1/span 2}
.project-page:not([open]) .project-page__img{opacity:0;scale:.9}
.project-page__img img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:inherit}
.project-page__links{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;padding-bottom:2rem}
/* --------------------------------------------------------------------------
Inner pages (about, contact, client login)
-------------------------------------------------------------------------- */
.page{
display:flex;
flex-direction:column;
align-items:center;
gap:5rem;
width:100%;
min-height:100svh;
padding:6rem var(--padding) 6rem;
text-align:center;
}
@media (width >= 768px){.page{gap:7rem;padding:7rem var(--padding) 8rem}}
.page > *{max-width:100%}
.page__head{display:flex;flex-direction:column;align-items:center;gap:var(--gap)}
.page__title{font:var(--font-h1);letter-spacing:-.02em;text-transform:uppercase}
.page__title .word{display:inline-block;transform-origin:bottom}
.page__title .space{display:inline-block;width:.3ch}
.page:not([mounted]) .page__title .word{scale:1 0;translate:0 .25ch}
.page[mounted] .page__title .word{transition:.8s scale var(--ease-out-elastic),.8s translate var(--ease-out-elastic);transition-delay:calc(var(--delay) * .1s)}
.page__eyebrow{color:var(--color-secondary)}
/* about: bio in headline size, paragraphs brighten as they enter view */
.bio{display:flex;flex-direction:column;align-items:center;gap:.82em;font:var(--font-h2)}
.bio__title{font:var(--font-h2);transform-origin:bottom}
.bio__text{display:flex;flex-direction:column;gap:.8em}
.bio__title,.bio__text{max-width:min(10em,100%);font:var(--font-h2);letter-spacing:-.02em;text-transform:uppercase;text-wrap:balance}
.bio .paragraph{display:block;transform-origin:top}
.bio .paragraph > span{transition:.4s opacity var(--ease-in-out-sine)}
.bio .paragraph:not([intersect]) > span{opacity:.25}
.page:not([mounted]) .bio__title{scale:1 0}
.page:not([mounted]) .bio .paragraph{opacity:0;scale:1 1.2;translate:0 4rem}
.page[mounted] .bio__title{transition:1s scale var(--ease-out-elastic)}
.page[mounted] .bio .paragraph{transition:.4s opacity var(--ease-in-out-cubic),1s translate var(--ease-out-elastic),1s scale var(--ease-out-elastic);transition-delay:calc(var(--delay) * .1s)}
.bio__mark{
width:clamp(7rem,22vw,11rem);
aspect-ratio:1;
border-radius:var(--radius);
box-shadow:var(--shadow);
rotate:-4deg;
overflow:clip;
background:#fbfaf7;
transition:1s scale var(--ease-out-elastic),1s rotate var(--ease-out-elastic);
}
.bio__mark img{width:100%;height:100%;object-fit:cover}
.page:not([mounted]) .bio__mark{scale:0}
@media (any-hover:hover){.bio__mark:hover{rotate:3deg;scale:1.05}}
.section{display:flex;flex-direction:column;align-items:center;gap:3rem;width:100%}
.section > h2{margin-bottom:.12em}
/* about: link cards (Spencer's news cards, recoloured from the BCP logo) */
.cards{display:grid;grid-template-columns:1fr;gap:var(--gap);width:100%;max-width:var(--max-width)}
@media (width >= 660px){.cards{grid-template-columns:repeat(2,1fr)}}
.card{
--border-radius:1rem;
--pad:.5rem;
position:relative;
display:grid;
grid-template-columns:1fr 2fr;
gap:1rem;
padding:var(--pad);
border-radius:var(--border-radius);
background-color:var(--surface);
color:var(--ink);
text-align:left;
place-items:start;
transition:1s scale var(--ease-out-elastic-soft),1s rotate var(--ease-out-elastic-soft);
}
.card::before{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
box-shadow:var(--shadow);
opacity:0;
transition:1s opacity var(--ease-out-elastic-soft);
}
@media (any-hover:hover){
.card:hover{rotate:calc(var(--rotation) * 1deg);scale:1.05;z-index:1}
.card:hover::before{opacity:.5}
}
.card:active{rotate:calc(var(--rotation) * -.5deg);scale:.98}
.card__thumb{width:100%;aspect-ratio:1;border-radius:calc(var(--border-radius) - var(--pad));object-fit:cover;background:var(--ink)}
.card__thumb--mark{display:grid;place-items:center;font:2.4rem/1 var(--font-family-headline);color:var(--surface);text-transform:uppercase;letter-spacing:-.03em}
.card__body{display:flex;flex-direction:column;justify-content:space-between;height:100%;padding:.4rem 0 .7rem}
.card__tag,.card__title{font:1.75rem/.85 var(--font-family-headline);letter-spacing:-.07rem;text-transform:uppercase}
.card__tag{color:rgba(255,255,255,.85)}
.card__title::after{content:"";position:absolute;inset:0}
/* about: projects list, giant titles with hover-reveal stills */
.projects__list{position:relative;display:flex;flex-direction:column;align-items:center;pointer-events:none}
.projects__title{
position:relative;
width:fit-content;
padding:0 .1em;
font:var(--font-h1);
line-height:.9em;
letter-spacing:-.02em;
text-transform:uppercase;
opacity:.25;
pointer-events:auto;
contain:paint;
transition:.15s opacity var(--ease-in-out-sine),1s scale var(--ease-out-elastic-soft);
}
.projects__title a{display:inline-block;position:relative;top:-.1em;-webkit-touch-callout:none}
@media (any-hover:hover){.projects__title:hover{opacity:1;scale:1 1.1}}
.projects__title:active{opacity:1;scale:1 1.1}
.projects__list img{
position:absolute;
top:calc(sin(calc(var(--idx) * 3.14 / 2)) * -10rem);
left:calc(50% - 6rem);
z-index:1;
display:block;
width:min(30%,12rem);
aspect-ratio:1;
object-fit:cover;
border-radius:var(--radius);
box-shadow:var(--shadow);
pointer-events:none;
user-select:none;
visibility:hidden;
scale:0;
rotate:calc(var(--rotation) * 1deg);
translate:calc(var(--offsetX) * 1px) calc(var(--offsetY) * 1px - 4rem);
transition:.2s scale var(--ease-in-out-cubic),1s rotate var(--ease-out-elastic),.2s visibility;
transition-delay:calc(var(--idx) * .02s);
}
@media (any-hover:hover){
.projects__list:hover img{scale:1;visibility:visible;transition:1s scale var(--ease-out-elastic),1s rotate var(--ease-out-elastic),1s visibility;transition-delay:calc(var(--idx) * .04s)}
}
.projects__list:active img{scale:1;visibility:visible;transition:1s scale var(--ease-out-elastic),1s rotate var(--ease-out-elastic),1s visibility;transition-delay:calc(var(--idx) * .04s)}
/* forms */
.form{display:grid;gap:1.25rem;width:100%;max-width:32rem;text-align:left}
.field{display:grid;gap:.5rem}
.field label{font:var(--font-h4);letter-spacing:.1em;text-transform:uppercase}
.field input,.field select,.field textarea{
width:100%;
padding:.95rem 1.1rem;
border-radius:var(--radius);
border:2px solid color-mix(in srgb,var(--color-onPrimary) 15%,transparent);
background:color-mix(in srgb,var(--color-onPrimary) 5%,var(--color-primary));
color:inherit;
outline:none;
transition:.3s border-color,.3s background-color;
}
.field select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 1.4rem) 50%,calc(100% - 1rem) 50%;background-size:.4rem .4rem;background-repeat:no-repeat;padding-right:2.8rem}
.field :is(input,select,textarea)::placeholder{color:var(--color-muted)}
.field :is(input,select,textarea):focus-visible{border-color:var(--color-secondary);background:color-mix(in srgb,var(--color-secondary) 8%,var(--color-primary))}
.field textarea{min-height:9rem;resize:vertical}
.form__actions{display:flex;flex-direction:column;align-items:center;gap:1rem;padding-top:.5rem}
.form__note{color:var(--color-muted);font-size:.85rem;text-align:center}
.form__status{font-size:.9rem;min-height:1.2em}
/* contact: submission policy */
.policy{display:grid;gap:1.25rem;width:100%;max-width:var(--max-width);padding:2rem;border-radius:1.5rem;background:color-mix(in srgb,var(--color-onPrimary) 5%,var(--color-primary));text-align:left}
.policy h2{font:var(--font-h3);letter-spacing:-.02em;text-transform:uppercase}
.policy ul{display:grid;gap:.75rem;padding-left:1.25rem;list-style:disc}
.policy li::marker{color:var(--color-secondary)}
.policy p,.policy li{line-height:1.5}
/* client login */
.gate{display:grid;gap:1rem;justify-items:center;width:100%;max-width:24rem}
.gate .field{width:100%}
.gate__error{color:var(--color-error);font-size:.85rem;min-height:1.2em}
.gate[hidden],.slate[hidden]{display:none}
.slate{display:grid;gap:1rem;width:100%;max-width:var(--max-width)}
.slate__item{
display:grid;
gap:.6rem;
padding:1.5rem 1.6rem;
border-radius:1.5rem;
background:color-mix(in srgb,var(--color-onPrimary) 5%,var(--color-primary));
text-align:left;
transition:1s scale var(--ease-out-elastic-soft),1s rotate var(--ease-out-elastic-soft),.3s background-color;
}
@media (any-hover:hover){.slate__item:hover{background:color-mix(in srgb,var(--color-secondary) 12%,var(--color-primary));scale:1.02;rotate:calc(var(--rotation,0) * 1deg)}}
.slate__stage{color:var(--color-secondary);transition:color .5s}
.slate__item h3{font:var(--font-h3);letter-spacing:-.02em;text-transform:uppercase}
.slate__item p{color:var(--color-muted)}
.slate__foot{text-align:center;color:var(--color-muted);font-size:.85rem}
/* --------------------------------------------------------------------------
Reduced motion
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
*,::before,::after{transition-duration:.01ms!important;transition-delay:0ms!important;animation:none!important;scroll-behavior:auto!important}
.hero:not([mounted]) .hero__mark img,.hero:not([mounted]) .hero__mid .word,.page:not([mounted]) .page__title .word,.page:not([mounted]) .bio__title,.page:not([mounted]) .bio .paragraph,.page:not([mounted]) .bio__mark{scale:1;translate:0 0;opacity:1}
.carousel:not([inview]) .carousel__media,.project:not([inview]) .project__image .media{scale:1;translate:0 0}
.project:not([inview]) .project__image .shadow{opacity:1}
.brands__scroller{mask:none;-webkit-mask:none}
.brands__track{width:100%;animation:none}
.brands__list{flex-wrap:wrap;row-gap:1rem;padding:0}
.brands__list[aria-hidden]{display:none}
.footer__inner{translate:0 0}
.footer__wordmark{transform:none}
.footer__intro:not([inview]) :is(.footer__heading .word,.footer__eyebrow,.footer__lede,.footer__action),.footer__stack:not([inview]) > *,.footer__col:not([inview]){scale:1;translate:0 0;opacity:1}
}