/* ============================================================ CHANCELLOR WARHOL Layout: fixed nav / left media rail / right metadata column Tokens first — change these to reskin the whole site. ============================================================ */ :root{ --paper:#fbfcfb; /* page — sampled from the reference */ --ink:#0d0d0d; /* type */ --dim:#6f6f6c; /* secondary type */ --line:rgba(13,13,13,.14); --rail:40.54vw; /* width of the media column */ --gut:12px; /* page edge margin */ --nav-h:38px; --ui:13.5px; /* nav + caption size */ --sans:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif; } /* Flip the whole site to the chrome/black palette by putting data-theme="dark" on . Everything below inherits it. */ :root[data-theme="dark"]{ --paper:#0a0a0b; --ink:#eceef1; --dim:#83878e; --line:rgba(236,238,241,.15); } *{margin:0;padding:0;box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ background:var(--paper);color:var(--ink); font-family:var(--sans);font-size:var(--ui);line-height:1.35; font-weight:400;letter-spacing:-.005em; -webkit-font-smoothing:antialiased; } a{color:inherit;text-decoration:none} img,video{display:block;width:100%;height:auto} /* ---------- nav ---------- */ .nav{ position:fixed;inset:0 0 auto 0;height:var(--nav-h);z-index:50; display:flex;align-items:center;justify-content:space-between; padding-inline:var(--gut); background:#fff; } .nav__mark{font-weight:700;font-size:15px;letter-spacing:-.02em;white-space:nowrap} .nav__links{display:flex;align-items:center;gap:clamp(10px,1.5vw,20px)} .nav__links a{ font-size:var(--ui);color:var(--ink); padding:3px 2px;border-radius:999px;transition:opacity .2s; } .nav__links a:hover{opacity:.55} .nav__links a[aria-current]{background:var(--ink);color:var(--paper);padding:3px 11px} .nav__toggle{ display:none;background:none;border:none;color:var(--ink); font:inherit;cursor:pointer;padding:3px 2px; } /* ---------- media rail (auto-scrolling, left) ---------- Fixed column that loops upward forever. Hover pauses it. */ .rail{ position:fixed; top:var(--nav-h);left:var(--gut);bottom:0; width:var(--rail); overflow:hidden; z-index:1; } .rail__track{ display:grid;gap:2px; will-change:transform; animation:roll var(--dur,300s) linear infinite; } @keyframes roll{ from{transform:translate3d(0,0,0)} to {transform:translate3d(0,-50%,0)} } .rail:hover .rail__track{animation-play-state:paused} .frame{margin:0;position:relative;overflow:hidden;background:rgba(13,13,13,.05)} .frame img,.frame video{width:100%;height:auto;display:block} .frame figcaption{display:none} /* fade the rail out at the very bottom so frames don't hard-cut */ .rail::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:56px; background:linear-gradient(transparent,var(--paper));pointer-events:none;z-index:2; } /* ---------- live caption ---------- */ .cue{ position:fixed;z-index:3; top:50%;transform:translateY(-50%); left:calc(var(--gut)*2 + var(--rail)); right:var(--gut); display:flex;align-items:baseline;justify-content:space-between; gap:clamp(16px,4vw,60px); pointer-events:none; } .cue__title{white-space:nowrap} .cue__services{text-align:right} .cue.is-swapping .cue__title, .cue.is-swapping .cue__services{opacity:0} .cue__title,.cue__services{transition:opacity .32s ease} /* ---------- pinned statement (bottom right) ---------- */ .statement{ position:fixed;z-index:40; bottom:14px;right:var(--gut); width:calc(100vw - var(--rail) - var(--gut)*3); max-width:860px; line-height:1.34; } .statement p{ background:var(--paper); box-shadow:0 0 0 6px var(--paper); } .statement b{font-weight:700} /* ---------- info page ---------- */ .doc{ padding-top:calc(var(--nav-h) + clamp(40px,7vw,90px)); padding-inline:var(--gut); max-width:1600px; } .doc__lede{ font-size:clamp(20px,3.4vw,42px);line-height:1.12;letter-spacing:-.03em; max-width:20ch;font-weight:400;margin-bottom:clamp(40px,7vw,96px); } .doc__row{ display:grid;grid-template-columns:var(--rail) minmax(0,1fr); column-gap:var(--gut); border-top:1px solid var(--line); padding-block:clamp(18px,2.4vw,30px); } .doc__row h2{font-size:var(--ui);font-weight:400;color:var(--dim)} .doc__body{max-width:52ch} .doc__body p + p{margin-top:1em} .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:760px} .cols ul{list-style:none} .cols li{color:var(--dim)} .cols li:first-child{color:var(--ink);margin-bottom:.5em} .doc__foot{ padding-block:clamp(40px,7vw,90px); display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap; border-top:1px solid var(--line);color:var(--dim); } .doc__foot a{color:var(--ink)} /* ---------- responsive ---------- */ @media(max-width:900px){ :root{--rail:52vw} } @media(max-width:680px){ .nav__toggle{display:block} .nav__links{ position:fixed;inset:var(--nav-h) 0 auto 0; flex-direction:column;align-items:flex-start;gap:0; background:var(--paper);border-bottom:1px solid var(--line); max-height:0;overflow:hidden;transition:max-height .38s cubic-bezier(.2,.7,.3,1); } .nav__links.open{max-height:70vh} .nav__links a{width:100%;padding:13px var(--gut);border-radius:0} .nav__links a[aria-current]{background:none;color:var(--ink);font-weight:700;padding:13px var(--gut)} /* rail stops floating: images simply stack and the page scrolls */ .rail{position:static;width:auto;bottom:auto;padding-top:var(--nav-h)} .rail::after{display:none} .rail__track{animation:none!important;transform:none!important;gap:26px} .frame figcaption{ display:flex;flex-direction:column;gap:2px;padding-top:8px; } .frame figcaption b{font-weight:400} .frame figcaption span{color:var(--dim)} .cue{display:none} /* statement stops floating and just ends the page */ .statement{ position:static;width:auto;max-width:none; padding:26px var(--gut) 40px;border-top:1px solid var(--line);margin-top:10px; } .statement p{box-shadow:none;background:none} .doc__row{grid-template-columns:1fr;gap:10px} .cols{grid-template-columns:1fr;gap:20px} } /* ---------- a11y ---------- */ :focus-visible{outline:1.5px solid var(--ink);outline-offset:2px} @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}