You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
278 lines
19 KiB
CSS
278 lines
19 KiB
CSS
/* ============================================================
|
|
Art.n Architects — artnouveau.in
|
|
Quiet-luxury editorial design: warm paper, Cormorant Garamond
|
|
statements, Archivo body, hairline rules, generous whitespace.
|
|
One stylesheet for every page.
|
|
============================================================ */
|
|
|
|
/* ---------- fonts (self-hosted; faces generated from Google Fonts subsets) ---------- */
|
|
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300;font-display:swap;src:url(../fonts/cormorant-italic-300-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
|
|
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/cormorant-italic-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
|
|
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/cormorant-normal-300-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
|
|
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/cormorant-normal-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
|
|
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/cormorant-normal-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
|
|
@font-face{font-family:'Archivo';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/archivo-normal-300-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
|
|
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/archivo-normal-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
|
|
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/archivo-normal-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
|
|
|
|
/* ---------- tokens / base ---------- */
|
|
:root{
|
|
--paper:#F4F1EA; --ink:#1C1A16; --mid:#6E695F; --hair:#DAD5C8; --card:#EAE6DC;
|
|
--clay:#7A4A32;
|
|
--serif:'Cormorant Garamond',Georgia,serif;
|
|
--sans:'Archivo',system-ui,sans-serif;
|
|
--pad:clamp(20px,4.5vw,72px); --max:1560px;
|
|
}
|
|
*{margin:0;padding:0;box-sizing:border-box}
|
|
html{scroll-behavior:smooth}
|
|
body{
|
|
background:var(--paper);color:var(--ink);
|
|
font-family:var(--sans);font-weight:300;font-size:15.5px;line-height:1.75;
|
|
-webkit-font-smoothing:antialiased;
|
|
}
|
|
::selection{background:var(--ink);color:var(--paper)}
|
|
img{display:block;max-width:100%;height:auto}
|
|
a{color:inherit;text-decoration:none}
|
|
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
|
|
.eyebrow{font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:400;color:var(--mid)}
|
|
.serif{font-family:var(--serif)}
|
|
.u{background:linear-gradient(to right,currentColor,currentColor) no-repeat left bottom / 0 1px;padding-bottom:3px;transition:background-size .5s cubic-bezier(.2,.6,.2,1)}
|
|
a:hover .u,a:focus-visible .u{background-size:100% 1px}
|
|
:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
|
|
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--paper);padding:10px 18px;font-size:12px;letter-spacing:.1em}
|
|
.skip:focus{left:0}
|
|
.hairline{border:none;border-top:1px solid var(--hair)}
|
|
|
|
/* page-transition veil */
|
|
.veil-page{position:fixed;inset:0;z-index:80;background:var(--paper);pointer-events:none;
|
|
transform:scaleY(0);transform-origin:top}
|
|
.veil-page::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink)}
|
|
|
|
/* ---------- header ---------- */
|
|
header.site{position:fixed;inset:0 0 auto 0;z-index:20;transition:background .35s,border-color .35s;border-bottom:1px solid transparent}
|
|
header.site.scrolled{background:rgba(244,241,234,.92);border-bottom-color:var(--hair);backdrop-filter:blur(10px)}
|
|
.nav{max-width:var(--max);margin:0 auto;padding:22px var(--pad);display:flex;align-items:center;justify-content:space-between}
|
|
.wordmark{font-family:var(--serif);font-weight:500;font-size:19px;letter-spacing:.04em}
|
|
.wordmark span{color:var(--clay)}
|
|
.nav ul{display:flex;gap:34px;list-style:none}
|
|
.nav ul a{font-size:12.5px;letter-spacing:.06em;color:var(--mid);text-transform:lowercase}
|
|
.nav ul a:hover,.nav ul a[aria-current="page"]{color:var(--ink)}
|
|
.nav ul a[aria-current="page"]{border-bottom:1px solid var(--ink);padding-bottom:3px}
|
|
.menu-label{display:none;background:none;border:none;cursor:pointer;font-family:inherit;color:var(--ink);font-size:12.5px;letter-spacing:.08em;text-transform:lowercase;padding:14px 16px;margin:-14px -16px}
|
|
.menu-overlay{position:fixed;inset:0;z-index:60;background:var(--paper);display:none;flex-direction:column;justify-content:center;padding:var(--pad)}
|
|
.menu-overlay.open{display:flex}
|
|
.menu-overlay a{font-family:var(--serif);font-size:clamp(32px,9vw,46px);font-weight:400;line-height:2;border-bottom:1px solid var(--hair);text-transform:lowercase}
|
|
.menu-close{position:absolute;top:22px;right:var(--pad);background:none;border:none;cursor:pointer;font-family:inherit;color:var(--ink);font-size:12.5px;letter-spacing:.08em;text-transform:lowercase;padding:14px 16px;margin:-14px -16px}
|
|
|
|
/* ---------- home: statement hero ---------- */
|
|
.hero-quiet{min-height:92svh;display:flex;flex-direction:column;justify-content:center;padding-top:110px}
|
|
.hero-quiet h1{font-family:var(--serif);font-weight:300;font-size:clamp(42px,7vw,104px);line-height:1.08;letter-spacing:.005em;max-width:14ch}
|
|
.hero-quiet h1 em{font-style:italic;font-weight:300}
|
|
.hero-quiet h1 .line{display:block;overflow:hidden}
|
|
.hero-quiet h1 .line>span{display:inline-block}
|
|
.hero-quiet .meta{margin-top:40px;display:flex;gap:26px;flex-wrap:wrap;align-items:baseline}
|
|
.hero-scroll{margin-top:auto;padding-bottom:30px}
|
|
|
|
/* full-bleed image panel */
|
|
.panel-full{position:relative;height:96svh;min-height:520px;overflow:hidden;background:var(--card)}
|
|
.panel-full .photo{position:absolute;inset:-9% 0}
|
|
.panel-full img{width:100%;height:100%;object-fit:cover}
|
|
.panel-full .cap{position:absolute;left:var(--pad);bottom:26px;z-index:2;color:#fff;mix-blend-mode:difference;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
|
|
|
|
/* statement blocks */
|
|
.statement{padding-top:clamp(100px,14vw,220px);padding-bottom:clamp(100px,14vw,220px)}
|
|
.statement .eyebrow{display:block;margin-bottom:34px}
|
|
.statement p.big{font-family:var(--serif);font-weight:300;font-size:clamp(26px,3.6vw,52px);line-height:1.3;max-width:26ch}
|
|
.statement p.big em{font-style:italic}
|
|
.statement .sub{margin-top:36px;max-width:52ch;color:var(--mid)}
|
|
.statement .sub p{margin-bottom:14px}
|
|
|
|
/* ---------- editorial project flow (home + listings) ---------- */
|
|
.flow{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(20px,3vw,56px)}
|
|
.piece{display:block;margin-bottom:clamp(90px,11vw,180px)}
|
|
.piece figure{margin:0}
|
|
.piece .ph{overflow:hidden;background:var(--card)}
|
|
.piece .ph img{width:100%;height:112%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.6,.2,1)}
|
|
.piece:hover .ph img{transform:scale(1.025)}
|
|
.piece figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:18px;margin-top:18px}
|
|
.piece .name{font-family:var(--serif);font-size:clamp(19px,1.9vw,26px);font-weight:400}
|
|
.piece .where{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mid)}
|
|
/* repeating 6-slot editorial cycle */
|
|
.flow .piece:nth-child(6n+1){grid-column:1/9}
|
|
.flow .piece:nth-child(6n+1) .ph{aspect-ratio:3/2}
|
|
.flow .piece:nth-child(6n+2){grid-column:9/13;padding-top:clamp(90px,12vw,220px)}
|
|
.flow .piece:nth-child(6n+2) .ph{aspect-ratio:3/4}
|
|
.flow .piece:nth-child(6n+3){grid-column:2/7;padding-top:clamp(20px,3vw,60px)}
|
|
.flow .piece:nth-child(6n+3) .ph{aspect-ratio:4/5}
|
|
.flow .piece:nth-child(6n+4){grid-column:8/13}
|
|
.flow .piece:nth-child(6n+4) .ph{aspect-ratio:4/3}
|
|
.flow .piece:nth-child(6n+5){grid-column:3/11}
|
|
.flow .piece:nth-child(6n+5) .ph{aspect-ratio:16/9}
|
|
.flow .piece:nth-child(6n+6){grid-column:1/6}
|
|
.flow .piece:nth-child(6n+6) .ph{aspect-ratio:4/5}
|
|
.view-all{padding-bottom:clamp(90px,11vw,170px)}
|
|
.view-all a{font-family:var(--serif);font-size:clamp(20px,2.2vw,30px);font-style:italic}
|
|
|
|
/* ---------- page head (interior pages) ---------- */
|
|
.page-head{padding-top:clamp(150px,20vh,240px);padding-bottom:clamp(50px,7vw,110px)}
|
|
.page-head .eyebrow{display:block;margin-bottom:26px}
|
|
.page-head h1{font-family:var(--serif);font-weight:300;font-size:clamp(40px,6vw,88px);line-height:1.1;max-width:16ch}
|
|
.page-head h1 em{font-style:italic}
|
|
.page-head .lede{margin-top:30px;max-width:54ch;color:var(--mid)}
|
|
.filters{display:flex;gap:26px;flex-wrap:wrap;margin-top:40px;border-top:1px solid var(--hair);padding-top:22px}
|
|
.filters a{font-size:12.5px;letter-spacing:.06em;text-transform:lowercase;color:var(--mid);padding-bottom:3px}
|
|
.filters a:hover{color:var(--ink)}
|
|
.filters a[aria-current="page"]{color:var(--ink);border-bottom:1px solid var(--ink)}
|
|
|
|
/* ---------- project detail ---------- */
|
|
.proj-hero{padding-top:clamp(130px,16vh,200px)}
|
|
.proj-hero .ph{overflow:hidden;background:var(--card);aspect-ratio:16/9;max-height:82svh}
|
|
.proj-hero .ph img{width:100%;height:100%;object-fit:cover}
|
|
.proj-title{padding-top:clamp(40px,6vw,80px);padding-bottom:clamp(40px,6vw,80px)}
|
|
.proj-title h1{font-family:var(--serif);font-weight:300;font-size:clamp(36px,5vw,72px);line-height:1.12;max-width:18ch}
|
|
.proj-title .eyebrow{display:block;margin-bottom:20px}
|
|
.proj-cols{display:grid;grid-template-columns:4fr 7fr;gap:clamp(36px,6vw,110px);padding-bottom:clamp(70px,9vw,130px)}
|
|
.spec{list-style:none;border-top:1px solid var(--hair)}
|
|
.spec li{display:flex;justify-content:space-between;gap:18px;border-bottom:1px solid var(--hair);padding:15px 2px}
|
|
.spec .k{font-size:11px;letter-spacing:.2em;color:var(--mid);text-transform:uppercase;padding-top:4px}
|
|
.spec .v{font-size:14.5px;text-align:right}
|
|
.proj-blurb p{font-family:var(--serif);font-weight:300;font-size:clamp(21px,2.2vw,30px);line-height:1.5;max-width:32ch}
|
|
.gallery{columns:2;column-gap:clamp(20px,2.6vw,44px)}
|
|
.gallery a{display:block;break-inside:avoid;margin-bottom:clamp(20px,2.6vw,44px);background:var(--card)}
|
|
.gallery img{width:100%;transition:opacity .5s}
|
|
.gallery a:hover img{opacity:.94}
|
|
.proj-nav{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--hair);padding-top:clamp(30px,4vw,48px);margin-top:clamp(60px,7vw,100px);padding-bottom:clamp(80px,9vw,130px)}
|
|
.proj-nav a{max-width:46%}
|
|
.proj-nav .eyebrow{display:block;margin-bottom:10px}
|
|
.proj-nav .name{font-family:var(--serif);font-size:clamp(18px,2vw,26px)}
|
|
.proj-nav .next{text-align:right;margin-left:auto}
|
|
|
|
/* ---------- principal / duo feature ---------- */
|
|
.people{padding-bottom:clamp(90px,12vw,180px)}
|
|
.person{display:grid;grid-template-columns:5fr 7fr;gap:clamp(36px,5vw,96px);align-items:start;border-top:1px solid var(--hair);padding-top:clamp(44px,6vw,80px);margin-bottom:clamp(60px,8vw,120px)}
|
|
.person .ph{overflow:hidden;background:var(--card);aspect-ratio:4/5;max-width:420px}
|
|
.person .ph img{width:100%;height:100%;object-fit:cover}
|
|
.person h3{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3vw,40px);margin-bottom:6px}
|
|
.person .role{display:block;margin-bottom:26px}
|
|
.person p{color:var(--mid);margin-bottom:16px;max-width:56ch}
|
|
|
|
/* team grid */
|
|
.team{padding-bottom:clamp(90px,12vw,170px)}
|
|
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:clamp(18px,2.4vw,36px)}
|
|
.team-grid figure{margin:0}
|
|
.team-grid .ph{overflow:hidden;background:var(--card);aspect-ratio:1/1}
|
|
.team-grid img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.02);transition:filter .5s}
|
|
.team-grid figure:hover img{filter:grayscale(0)}
|
|
.team-grid figcaption{margin-top:12px}
|
|
.team-grid .nm{font-size:13.5px;font-weight:400;display:block}
|
|
.team-grid .rl{font-size:10.5px;letter-spacing:.14em;color:var(--mid);text-transform:uppercase}
|
|
|
|
/* ---------- process page / steps ---------- */
|
|
.steps{counter-reset:step;padding-bottom:clamp(80px,10vw,150px)}
|
|
.step{display:grid;grid-template-columns:2fr 4fr 6fr;gap:clamp(24px,4vw,72px);border-top:1px solid var(--hair);padding:clamp(34px,5vw,60px) 0}
|
|
.step .no{font-family:var(--serif);font-weight:300;font-size:clamp(30px,3.6vw,52px);color:var(--mid)}
|
|
.step h3{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.4vw,32px)}
|
|
.step p{color:var(--mid);max-width:52ch}
|
|
|
|
/* ---------- 3D section ---------- */
|
|
.threed{padding-bottom:clamp(90px,12vw,180px)}
|
|
.threed-row{display:grid;grid-template-columns:7fr 5fr;gap:clamp(36px,5vw,96px);align-items:center}
|
|
model-viewer{width:100%;height:min(58vh,520px);background:var(--card);--poster-color:var(--card)}
|
|
.threed h3{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.6vw,36px);margin-bottom:18px}
|
|
.threed p{color:var(--mid);max-width:44ch;margin-bottom:16px}
|
|
.threed .note{font-size:12.5px;color:var(--mid);border-left:1px solid var(--clay);padding-left:16px}
|
|
|
|
/* ---------- studio / addresses row ---------- */
|
|
.studio-row{display:grid;grid-template-columns:7fr 5fr;gap:clamp(36px,5vw,96px);align-items:center;padding-bottom:clamp(90px,12vw,180px)}
|
|
.studio-row .ph{overflow:hidden;background:var(--card);aspect-ratio:4/3}
|
|
.studio-row img{width:100%;height:112%;object-fit:cover}
|
|
.studio-row h3{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.6vw,36px);margin-bottom:18px}
|
|
.studio-row p{color:var(--mid);max-width:46ch;margin-bottom:16px}
|
|
.studio-row .addr{font-size:13.5px;color:var(--mid);line-height:1.9}
|
|
|
|
/* story block (studio page) */
|
|
.story{display:grid;grid-template-columns:5fr 7fr;gap:clamp(36px,5vw,96px);align-items:start;padding-bottom:clamp(80px,10vw,150px)}
|
|
.story .ph{overflow:hidden;background:var(--card);aspect-ratio:4/3}
|
|
.story .ph img{width:100%;height:112%;object-fit:cover}
|
|
.story h2{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.8vw,38px);margin-bottom:22px;line-height:1.3}
|
|
.story p{color:var(--mid);margin-bottom:16px;max-width:56ch}
|
|
.story p b{color:var(--ink);font-weight:400}
|
|
|
|
/* ---------- contact ---------- */
|
|
.offices{padding-bottom:clamp(60px,8vw,110px)}
|
|
.office{display:grid;grid-template-columns:3fr 5fr 4fr;gap:clamp(20px,3vw,56px);border-top:1px solid var(--hair);padding:clamp(30px,4vw,50px) 0;align-items:baseline}
|
|
.office h2{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.4vw,32px)}
|
|
.office p{color:var(--mid);font-size:14.5px;line-height:1.9}
|
|
.office .links{display:flex;flex-direction:column;gap:8px;font-size:14.5px}
|
|
.office .links a:hover{color:var(--clay)}
|
|
.reach{display:flex;flex-direction:column;padding-bottom:clamp(90px,12vw,170px)}
|
|
.reach a{display:flex;justify-content:space-between;align-items:baseline;gap:20px;border-top:1px solid var(--hair);padding:clamp(24px,3.4vw,40px) 0}
|
|
.reach a:last-child{border-bottom:1px solid var(--hair)}
|
|
.reach .k{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--mid)}
|
|
.reach .v{font-family:var(--serif);font-size:clamp(20px,3vw,40px);font-weight:300;text-align:right;word-break:break-word;transition:color .4s}
|
|
.reach a:hover .v{color:var(--clay);font-style:italic}
|
|
|
|
/* ---------- CTA band ---------- */
|
|
.cta{padding:clamp(90px,13vw,200px) 0}
|
|
.cta .inner{display:flex;flex-direction:column;align-items:flex-start;gap:34px}
|
|
.cta h2{font-family:var(--serif);font-weight:300;font-size:clamp(32px,5vw,72px);line-height:1.15;max-width:18ch}
|
|
.cta h2 em{font-style:italic}
|
|
.btn{display:inline-block;border:1px solid var(--ink);padding:16px 34px;font-size:12px;letter-spacing:.14em;text-transform:lowercase;transition:background .4s,color .4s}
|
|
.btn:hover,.btn:focus-visible{background:var(--ink);color:var(--paper)}
|
|
.cta .actions{display:flex;gap:16px;flex-wrap:wrap}
|
|
|
|
/* ---------- footer ---------- */
|
|
footer.site{border-top:1px solid var(--hair);padding:clamp(50px,7vw,90px) 0 36px}
|
|
.foot-top{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:baseline;margin-bottom:clamp(44px,6vw,80px)}
|
|
.foot-top .wordmark{font-size:clamp(26px,3.4vw,44px)}
|
|
.foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3.4vw,60px)}
|
|
.foot-cols .eyebrow{display:block;margin-bottom:14px}
|
|
.foot-cols p,.foot-cols a{font-size:13.5px;line-height:2;color:var(--mid)}
|
|
.foot-cols a{display:inline-block}
|
|
.foot-cols a:hover{color:var(--ink)}
|
|
.foot-base{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:clamp(44px,6vw,70px)}
|
|
.foot-base p{font-size:11.5px;letter-spacing:.06em;color:var(--mid)}
|
|
|
|
/* ---------- 404 ---------- */
|
|
.lost{min-height:66vh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:22px}
|
|
.lost h1{font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(70px,15vw,190px);line-height:1}
|
|
.lost p{color:var(--mid)}
|
|
|
|
/* ---------- GLightbox skin ---------- */
|
|
.glightbox-clean .gslide-media{box-shadow:none;background:var(--paper)}
|
|
.goverlay{background:rgba(28,26,22,.94)}
|
|
.glightbox-clean .gnext,.glightbox-clean .gprev,.glightbox-clean .gclose{background:none}
|
|
|
|
/* ---------- reveals get a resting state only when JS is running ---------- */
|
|
html.js .reveal{opacity:0;transform:translateY(26px)}
|
|
html.js .reveal.is-in{opacity:1;transform:none;transition:opacity 1s cubic-bezier(.2,.6,.2,1),transform 1s cubic-bezier(.2,.6,.2,1)}
|
|
|
|
/* ---------- motion prefs / responsive ---------- */
|
|
@media (prefers-reduced-motion:reduce){
|
|
html{scroll-behavior:auto}
|
|
.veil-page{display:none}
|
|
html.js .reveal{opacity:1;transform:none}
|
|
}
|
|
@media (max-width:1060px){
|
|
.proj-cols{grid-template-columns:1fr}
|
|
.person{grid-template-columns:1fr}
|
|
.person .ph{max-width:340px}
|
|
.step{grid-template-columns:1fr;gap:10px}
|
|
.office{grid-template-columns:1fr;gap:8px}
|
|
}
|
|
@media (max-width:860px){
|
|
.nav ul{display:none}
|
|
.menu-label{display:block}
|
|
.flow{display:block}
|
|
.flow .piece{padding-top:0!important;margin-bottom:64px}
|
|
.threed-row,.studio-row,.story{grid-template-columns:1fr}
|
|
.foot-cols{grid-template-columns:1fr 1fr}
|
|
.gallery{columns:1}
|
|
.proj-nav a{max-width:100%}
|
|
.hero-quiet{min-height:86svh}
|
|
.panel-full{height:64svh;min-height:380px}
|
|
}
|
|
@media (max-width:560px){
|
|
.foot-cols{grid-template-columns:1fr}
|
|
}
|