/* ====================================================================== Coffee & Snow — the living background, on its own so two pages can wear it. ====================================================================== It was written inline in index.php, where it was the whole page. Asghar then asked for it inside the talks-page BANNER as an alternative to the photograph, and a second copy of a four-panel animation is a second copy to keep in step. TWO THINGS MADE IT PORTABLE. 1. EVERYTHING IS A PERCENTAGE OF THE STAGE, not of the viewport. The original sized its panels in vmax, which is correct when the stage IS the window and absurd inside a 1400x420 banner — a 52vmax panel would be twice the banner's height. Percentages make the composition the same shape at any size, and the translations are percentages of each PANEL, so the motion scales with it. 2. THE PALETTE COMES IN THROUGH VARIABLES and nothing here holds a colour. index.php sets them on and cycles them; the banner sets them once, inline, from the page theme. Same stylesheet, two very different lives. Colours are R,G,B triplets so one value can serve a fill and a quarter-strength glow — see the note in index.php. ====================================================================== */ .cas-stage{ position:absolute;inset:0;overflow:hidden;pointer-events:none; /* a floor under the panels, so the stage is never the page showing through */ background:rgb(var(--bgc)); transition:background-color 5s cubic-bezier(.4,0,.2,1); } /* index.php's stage IS the window */ .cas-stage--full{position:fixed;z-index:0} .cas-pane{ position:absolute;display:block; border-radius:clamp(10px,1.6%,26px); mix-blend-mode:var(--blend,screen); will-change:transform,opacity; transition:background-color 5s cubic-bezier(.4,0,.2,1), box-shadow 5s cubic-bezier(.4,0,.2,1); } /* The wash is a FIXED gradient dimmed by opacity, never a gradient built from the palette: background-image does not interpolate, so a gradient rebuilt on each palette would snap while every colour around it crossfaded. */ .cas-pane::after{ content:"";position:absolute;inset:0;border-radius:inherit; background:linear-gradient(var(--wa), rgba(255,255,255,.22) 0%, rgba(255,255,255,.06) 30%, rgba(255,255,255,0) 48%, rgba(0,0,0,.46) 100%); opacity:var(--wash,1); transition:opacity 5s cubic-bezier(.4,0,.2,1); } /* EVERY PANEL IS MOSTLY OFF-STAGE and only the corner pointing at the middle is ever seen, so --wa aims the wash at THAT corner and the rim sits on the two edges that are on screen. Lighting them all from the top-left, which is what the first version did, meant the panel arriving from the top-left was lit on the half nobody can see — its colour arrived as a black wedge. */ .cas-p1{width:52%;height:100%;top:-26%;left:-24%;--wa:335deg; background-color:rgb(var(--c1)); box-shadow:inset 0 -1.5px 0 rgba(255,255,255,var(--rim,.5)), inset -1.5px 0 0 rgba(255,255,255,calc(var(--rim,.5) * .56)), 0 0 110px 14px rgba(var(--c1),var(--glow,.22)); animation:casD1 44s cubic-bezier(.45,0,.35,1) infinite -18s} .cas-p2{width:44%;height:112%;top:-24%;right:-22%;--wa:45deg; background-color:rgb(var(--c2)); box-shadow:inset 0 -1.5px 0 rgba(255,255,255,calc(var(--rim,.5) * .9)), inset 1.5px 0 0 rgba(255,255,255,calc(var(--rim,.5) * .48)), 0 0 120px 16px rgba(var(--c2),calc(var(--glow,.22) * 1.1)); animation:casD2 52s cubic-bezier(.4,0,.3,1) infinite -13s} .cas-p3{width:48%;height:94%;bottom:-22%;right:-20%;--wa:145deg; background-color:rgb(var(--c3)); box-shadow:inset 0 1.5px 0 rgba(255,255,255,calc(var(--rim,.5) * .8)), inset 1.5px 0 0 rgba(255,255,255,calc(var(--rim,.5) * .44)), 0 0 130px 18px rgba(var(--c3),calc(var(--glow,.22) * .9)); animation:casD3 38s cubic-bezier(.5,0,.3,1) infinite -25s} .cas-p4{width:40%;height:88%;bottom:-20%;left:-18%;--wa:225deg; background-color:rgb(var(--c2)); box-shadow:inset 0 1.5px 0 rgba(255,255,255,calc(var(--rim,.5) * .72)), inset -1.5px 0 0 rgba(255,255,255,calc(var(--rim,.5) * .44)), 0 0 100px 12px rgba(var(--c2),calc(var(--glow,.22) * .8)); animation:casD4 34s cubic-bezier(.42,0,.38,1) infinite -8s} /* translate3d for a compositor layer, and the percentages are of the PANEL, so the same numbers give the same motion whether the stage is a banner or a monitor. The scale and the few degrees of rotation are the depth: a panel that only slides reads as paper, one that grows a little as it crosses reads as something passing nearer. Each fades up from nothing and back, which is what makes them arrive and leave rather than loop. */ @keyframes casD1{ 0% {transform:translate3d(-17%,-15%,0) rotate(-16deg) scale(.9);opacity:0} 20% {opacity:.92} 70% {opacity:.72} 100%{transform:translate3d(15%,13%,0) rotate(-6deg) scale(1.06);opacity:0} } @keyframes casD2{ 0% {transform:translate3d(20%,-16%,0) rotate(15deg) scale(1.04);opacity:0} 22% {opacity:.85} 68% {opacity:.66} 100%{transform:translate3d(-16%,14%,0) rotate(6deg) scale(.92);opacity:0} } @keyframes casD3{ 0% {transform:translate3d(19%,19%,0) rotate(-10deg) scale(.94);opacity:0} 25% {opacity:.8} 66% {opacity:.6} 100%{transform:translate3d(-17%,-13%,0) rotate(-2deg) scale(1.08);opacity:0} } @keyframes casD4{ 0% {transform:translate3d(-20%,22%,0) rotate(12deg) scale(.88);opacity:0} 28% {opacity:.78} 72% {opacity:.55} 100%{transform:translate3d(15%,-22%,0) rotate(3deg) scale(1.1);opacity:0} } /* THE WELL IN THE MIDDLE. Every panel is bright and whatever sits over this has to be legible, so the ground is painted back over the centre — in the ground's OWN colour, not black, because on a pale palette the text goes dark and a black vignette would be fighting it. The colour is a background-COLOR shaped by a MASK rather than a radial gradient of the ground colour: a gradient is a background-image, so it would snap to the new palette while everything around it took five seconds — a flash in the middle of the screen on every dark-to-light change. */ .cas-stage::after{ content:"";position:absolute;inset:0;pointer-events:none; background-color:rgb(var(--bgc)); -webkit-mask:radial-gradient(62% 66% at 50% 50%, rgba(0,0,0,.62) 0%, rgba(0,0,0,.56) 22%, rgba(0,0,0,.44) 40%, rgba(0,0,0,.28) 56%, rgba(0,0,0,.14) 70%, rgba(0,0,0,.05) 82%, rgba(0,0,0,0) 92%); mask:radial-gradient(62% 66% at 50% 50%, rgba(0,0,0,.62) 0%, rgba(0,0,0,.56) 22%, rgba(0,0,0,.44) 40%, rgba(0,0,0,.28) 56%, rgba(0,0,0,.14) 70%, rgba(0,0,0,.05) 82%, rgba(0,0,0,0) 92%); opacity:calc(.45 + var(--wash,1) * .55); transition:background-color 5s cubic-bezier(.4,0,.2,1), opacity 5s cubic-bezier(.4,0,.2,1); } /* ungated it would be a full-screen slab of ground over the whole composition */ @supports not ((-webkit-mask-image:radial-gradient(#000,#000)) or (mask-image:radial-gradient(#000,#000))){ .cas-stage::after{display:none} } /* GRAIN, and it is dither rather than texture: wide soft gradients over a near-black ground have to step through colours an 8-bit channel does not have, and the steps show as rings. Inline SVG turbulence — a few hundred bytes, drawn by the browser at the screen's own resolution, and no request. */ .cas-grain{ position:absolute;inset:0;pointer-events:none;opacity:.04; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } .cas-grain--full{position:fixed;z-index:2} /* Everything that MOVES stops; everything that COLOURS stays. The panels hold a still composition and, on the landing page, the palette clock keeps running at half pace — a very slow colour fade, which is what the brief asks for here. */ @media (prefers-reduced-motion:reduce){ .cas-pane{animation:none;opacity:.62} .cas-p1{transform:translate3d(4%,4%,0) rotate(-11deg)} .cas-p2{transform:translate3d(0,-4%,0) rotate(11deg)} .cas-p3{transform:translate3d(4%,4%,0) rotate(-6deg)} .cas-p4{transform:translate3d(-4%,0,0) rotate(8deg)} } /* ---- the mark, for a stage used as a banner ---- Centred, sized against the stage's own height so it is the same presence in a tall banner as a short one. The URL is relative to THIS file, which is why it climbs one level: css/bg.css -> images/icon/. */ .cas-bg-mark{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:auto;height:38%;aspect-ratio:1/1;max-height:170px; background-color:rgb(var(--logoc)); -webkit-mask:url("../images/icon/coffeeAndSnow_logo.png") center/contain no-repeat; mask:url("../images/icon/coffeeAndSnow_logo.png") center/contain no-repeat; /* the same late, quick crossfade the landing page gives its mark: the ground commits first, then the mark crosses, so the two are never mid-grey together */ transition:background-color 2s cubic-bezier(.4,0,.2,1) 2.1s; pointer-events:none; } @supports not ((-webkit-mask-image:url("../images/icon/coffeeAndSnow_logo.png")) or (mask-image:url("../images/icon/coffeeAndSnow_logo.png"))){ .cas-bg-mark{display:none} } /* ---- blend: the animation OVER the photograph ---- The stage itself carries the blend, not the panels — they already have their own mix-blend-mode relative to the stage, and that composition is then blended onto the picture as one thing. Its ground has to go transparent or there would be nothing to blend WITH: the stage would simply cover the photo. var(--blend) rather than a fixed mode, for the same reason the panels use it: screen lifts colour onto a dark photograph, and on a pale palette multiply is what tints instead of washing out. */ .cas-stage--blend{ background:transparent; mix-blend-mode:var(--blend,screen); opacity:.9; } /* the well would paint the ground back over the middle of the photograph, which is the one thing it must not do here — just enough to keep the centre calm */ .cas-stage--blend::after{opacity:calc(.12 + var(--wash,1) * .1)} .cas-stage--blend .cas-grain{opacity:.03}