Compare commits
No commits in common. 'development' and 'main' have entirely different histories.
developmen
...
main
@ -1,3 +0,0 @@
|
||||
ruvector.db
|
||||
|
||||
node_modules/
|
||||
@ -1,103 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Page not found — Art.n Architects</title>
|
||||
<meta name="description" content="Page not found.">
|
||||
<link rel="canonical" href="https://www.artnouveau.in/404.html">
|
||||
<meta name="theme-color" content="#F4F1EA">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:site_name" content="Art.n Architects">
|
||||
<meta property="og:title" content="Page not found — Art.n Architects">
|
||||
<meta property="og:description" content="Page not found.">
|
||||
<meta property="og:url" content="https://www.artnouveau.in/404.html">
|
||||
<meta property="og:image" content="https://www.artnouveau.in/assets/img/og.jpg">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23F4F1EA'/%3E%3Cpath d='M8 24 16 8l8 16' fill='none' stroke='%231C1A16' stroke-width='1.5'/%3E%3Ccircle cx='24' cy='24' r='2.5' fill='%237A4A32'/%3E%3C/svg%3E">
|
||||
<link rel="preload" href="/assets/fonts/cormorant-normal-300-latin.woff2" as="font" type="font/woff2" crossorigin>
|
||||
<link rel="preload" href="/assets/fonts/archivo-normal-300-latin.woff2" as="font" type="font/woff2" crossorigin>
|
||||
<link rel="stylesheet" href="/assets/css/site.css">
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skip" href="#main">Skip to content</a>
|
||||
<div class="veil-page" aria-hidden="true"></div>
|
||||
|
||||
<header class="site" id="hdr">
|
||||
<nav class="nav" aria-label="Main">
|
||||
<a class="wordmark" href="/">Art<span>.</span>n Architects</a>
|
||||
<ul>
|
||||
<li><a href="/projects/">projects</a></li>
|
||||
<li><a href="/studio/">studio</a></li>
|
||||
<li><a href="/process/">process</a></li>
|
||||
<li><a href="https://tender.artnouveau.in/#/auth/login" rel="noopener">tender</a></li>
|
||||
<li><a href="/contact/">contact</a></li>
|
||||
</ul>
|
||||
<button class="menu-label" aria-expanded="false" aria-controls="site-menu">menu</button>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="menu-overlay" id="site-menu" hidden>
|
||||
<button class="menu-close" aria-label="Close menu">close</button>
|
||||
<nav aria-label="Mobile">
|
||||
<a href="/">home</a>
|
||||
<a href="/projects/">projects</a>
|
||||
<a href="/studio/">studio</a>
|
||||
<a href="/process/">process</a>
|
||||
<a href="https://tender.artnouveau.in/#/auth/login" rel="noopener">tender</a>
|
||||
<a href="/contact/">contact</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
<main id="main">
|
||||
<section class="wrap lost">
|
||||
<span class="eyebrow">page not found</span>
|
||||
<h1>404</h1>
|
||||
<p>This page was never drawn — or it has been filed elsewhere.</p>
|
||||
<p><a class="btn" href="/">back to the start</a></p>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="site">
|
||||
<div class="wrap">
|
||||
<div class="foot-top">
|
||||
<p class="wordmark">Art<span>.</span>n Architects</p>
|
||||
<p class="eyebrow">Architecture · Interiors · Project Management</p>
|
||||
</div>
|
||||
<div class="foot-cols">
|
||||
<div>
|
||||
<span class="eyebrow">Changanacherry</span>
|
||||
<p>Georges, Near Kavil Temple, Puzhuvathu<br>Changanacherry, Kerala 686 101<br><a href="tel:+914812412848">0481 241 2848</a></p>
|
||||
</div>
|
||||
<div>
|
||||
<span class="eyebrow">Kochi</span>
|
||||
<p>L6K, Nippon Q1 Mall, NH Bypass<br>Vennala, Kochi, Kerala 682 028<br><a href="tel:+914842341067">0484 234 1067</a></p>
|
||||
</div>
|
||||
<div>
|
||||
<span class="eyebrow">Write</span>
|
||||
<p><a href="mailto:artnove@gmail.com">artnove@gmail.com</a><br>
|
||||
<a href="https://wa.me/919447112848" rel="noopener">WhatsApp</a></p>
|
||||
</div>
|
||||
<div>
|
||||
<span class="eyebrow">Elsewhere</span>
|
||||
<p><a href="https://instagram.com/art.n.architects" rel="noopener">Instagram</a><br>
|
||||
<a href="https://www.facebook.com/art.n.architects" rel="noopener">Facebook</a><br>
|
||||
<a href="https://tender.artnouveau.in/#/auth/login" rel="noopener">Tender portal</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="foot-base">
|
||||
<p>© Art.n Architects, est. 2002. All rights reserved.</p>
|
||||
<p>Changanacherry · Kochi — Kerala, India</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/assets/vendor/gsap.min.js" defer></script>
|
||||
<script src="/assets/vendor/ScrollTrigger.min.js" defer></script>
|
||||
<script src="/assets/vendor/lenis.min.js" defer></script>
|
||||
<script src="/assets/js/site.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1 +0,0 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="refresh" content="0;url=/studio/"><link rel="canonical" href="https://www.artnouveau.in/studio/"><title>Moved</title></head><body><p>Moved to <a href="/studio/">/studio/</a>.</p></body></html>
|
||||
@ -1,277 +0,0 @@
|
||||
/* ============================================================
|
||||
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}
|
||||
}
|
||||
|
Before Width: | Height: | Size: 96 KiB |
|
Before Width: | Height: | Size: 82 KiB |
|
Before Width: | Height: | Size: 73 KiB |
|
Before Width: | Height: | Size: 54 KiB |
|
Before Width: | Height: | Size: 96 KiB |
|
Before Width: | Height: | Size: 89 KiB |
|
Before Width: | Height: | Size: 64 KiB |
|
Before Width: | Height: | Size: 100 KiB |
|
Before Width: | Height: | Size: 82 KiB |
|
Before Width: | Height: | Size: 60 KiB |
|
Before Width: | Height: | Size: 88 KiB |
|
Before Width: | Height: | Size: 66 KiB |
|
Before Width: | Height: | Size: 50 KiB |
|
Before Width: | Height: | Size: 92 KiB |
|
Before Width: | Height: | Size: 73 KiB |
|
Before Width: | Height: | Size: 54 KiB |
|
Before Width: | Height: | Size: 94 KiB |
|
Before Width: | Height: | Size: 78 KiB |
|
Before Width: | Height: | Size: 58 KiB |
|
Before Width: | Height: | Size: 79 KiB |
|
Before Width: | Height: | Size: 56 KiB |
|
Before Width: | Height: | Size: 64 KiB |
|
Before Width: | Height: | Size: 61 KiB |
|
Before Width: | Height: | Size: 43 KiB |
|
Before Width: | Height: | Size: 49 KiB |
|
Before Width: | Height: | Size: 94 KiB |
|
Before Width: | Height: | Size: 75 KiB |
|
Before Width: | Height: | Size: 57 KiB |
|
Before Width: | Height: | Size: 104 KiB |
|
Before Width: | Height: | Size: 99 KiB |
|
Before Width: | Height: | Size: 112 KiB |
|
Before Width: | Height: | Size: 79 KiB |
|
Before Width: | Height: | Size: 62 KiB |
|
Before Width: | Height: | Size: 47 KiB |
|
Before Width: | Height: | Size: 77 KiB |
|
Before Width: | Height: | Size: 59 KiB |
|
Before Width: | Height: | Size: 44 KiB |
|
Before Width: | Height: | Size: 131 KiB |
|
Before Width: | Height: | Size: 134 KiB |
|
Before Width: | Height: | Size: 148 KiB |
|
Before Width: | Height: | Size: 138 KiB |
|
Before Width: | Height: | Size: 128 KiB |
|
Before Width: | Height: | Size: 92 KiB |
|
Before Width: | Height: | Size: 107 KiB |
|
Before Width: | Height: | Size: 98 KiB |
|
Before Width: | Height: | Size: 114 KiB |
|
Before Width: | Height: | Size: 74 KiB |
|
Before Width: | Height: | Size: 59 KiB |
|
Before Width: | Height: | Size: 67 KiB |
|
Before Width: | Height: | Size: 97 KiB |
|
Before Width: | Height: | Size: 87 KiB |
|
Before Width: | Height: | Size: 99 KiB |
|
Before Width: | Height: | Size: 74 KiB |
|
Before Width: | Height: | Size: 57 KiB |
|
Before Width: | Height: | Size: 42 KiB |
|
Before Width: | Height: | Size: 99 KiB |
|
Before Width: | Height: | Size: 85 KiB |
|
Before Width: | Height: | Size: 63 KiB |
|
Before Width: | Height: | Size: 77 KiB |
|
Before Width: | Height: | Size: 63 KiB |
|
Before Width: | Height: | Size: 73 KiB |
|
Before Width: | Height: | Size: 108 KiB |
|
Before Width: | Height: | Size: 102 KiB |
|
Before Width: | Height: | Size: 114 KiB |
|
Before Width: | Height: | Size: 111 KiB |
|
Before Width: | Height: | Size: 108 KiB |
|
Before Width: | Height: | Size: 78 KiB |
|
Before Width: | Height: | Size: 97 KiB |
|
Before Width: | Height: | Size: 87 KiB |
|
Before Width: | Height: | Size: 63 KiB |
|
Before Width: | Height: | Size: 100 KiB |
|
Before Width: | Height: | Size: 96 KiB |
|
Before Width: | Height: | Size: 67 KiB |
|
Before Width: | Height: | Size: 126 KiB |
|
Before Width: | Height: | Size: 132 KiB |
|
Before Width: | Height: | Size: 92 KiB |
|
Before Width: | Height: | Size: 82 KiB |
|
Before Width: | Height: | Size: 73 KiB |