/* ============================================================ KORAA — Pragyaa Maheshwari · shared stylesheet Warm, textured, unhurried. Indian craft & material tradition. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&display=swap'); :root{ /* palette */ --terracotta:#873F2B; --bordeaux:#4B0020; --olive:#4B0020; /* legacy alias: now Bordeaux for sub-heads */ --burgundy:#4B0020; --cream:#F2E6D0; --warm-white:#FAF6EE; --sand:#E8DCC8; --charcoal:#2A2218; --driftwood:#5C5147; --light-sage:#C4CCA6; --warm-apricot:#873F2B; /* legacy alias: now terracotta */ --sandstone:#B8A48E; --linen:#D4C4A8; /* semantic */ --bg:var(--sand); --fg:var(--charcoal); --muted:var(--driftwood); --border:var(--linen); --accent:var(--terracotta); --accent-fg:var(--warm-white); --font-display:"Cormorant Garamond", Georgia, serif; --font-sans:"DM Sans", system-ui, sans-serif; --type-scale:1; /* tweakable */ --maxw:1300px; --nav-h:84px; --ease:cubic-bezier(.22,.61,.36,1); } /* accent variants set on */ html[data-accent="olive"]{--accent:var(--olive);} html[data-accent="burgundy"]{--accent:var(--burgundy);} *{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;} body{ margin:0; background:var(--bg); color:var(--fg); font-family:var(--font-sans); font-weight:400; line-height:1.7; font-size:17px; letter-spacing:.005em; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img{display:block;max-width:100%;} a{color:inherit;text-decoration:none;} h1,h2,h3,h4{ font-family:var(--font-display); font-weight:300; letter-spacing:-.012em; line-height:1.08; color:var(--fg); margin:0; text-wrap:balance; } h1{font-size:calc(clamp(3rem,8vw,7rem) * var(--type-scale));} h2{font-size:calc(clamp(2.2rem,4.6vw,4.2rem) * var(--type-scale));} h3{font-size:calc(clamp(1.6rem,2.6vw,2.4rem) * var(--type-scale));} p{margin:0 0 1.2em;} em,i{font-style:italic;} /* ---- utilities ---- */ .wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px;} @media(min-width:768px){.wrap{padding:0 40px;}} @media(min-width:1100px){.wrap{padding:0 80px;}} .wrap-narrow{max-width:1120px;} .label{ font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.22em; font-size:.72rem; font-weight:500; color:var(--olive); } html[data-accent="terracotta"] .label--accent{color:var(--terracotta);} .muted{color:var(--muted);} .serif{font-family:var(--font-display);font-weight:300;} .center{text-align:center;} .lede{ font-family:var(--font-display); font-weight:300; font-size:calc(clamp(1.4rem,2.5vw,2.1rem) * var(--type-scale)); line-height:1.4; color:var(--driftwood); } .sect{padding:96px 0;} .sect-lg{padding:130px 0;} .sect-sm{padding:64px 0;} @media(max-width:760px){ .sect{padding:68px 0;} .sect-lg{padding:84px 0;} } .rule{height:1px;background:var(--border);border:0;margin:0;} /* ---- buttons / links ---- */ .btn{ display:inline-flex;align-items:center;gap:.7em; font-family:var(--font-sans);font-size:.82rem;font-weight:500; text-transform:uppercase;letter-spacing:.18em; padding:14px 26px;border-radius:2px;cursor:pointer; transition:all .5s var(--ease); } .btn-solid{background:var(--accent);color:var(--accent-fg);border:1px solid var(--accent);} .btn-solid:hover{background:transparent;color:var(--accent);} .btn-ghost{background:transparent;color:var(--fg);border:1px solid var(--driftwood);} .btn-ghost:hover{background:var(--charcoal);color:var(--warm-white);border-color:var(--charcoal);} .link-arrow{ display:inline-flex;align-items:center;gap:.6em; font-size:.8rem;font-weight:500;text-transform:uppercase;letter-spacing:.16em; color:var(--fg);padding-bottom:3px;border-bottom:1px solid var(--accent); transition:gap .4s var(--ease),color .4s var(--ease); } .link-arrow .ar{transition:transform .4s var(--ease);color:var(--accent);} .link-arrow:hover{gap:1em;} .link-arrow:hover .ar{transform:translateX(5px);} /* ============================================================ NAV ============================================================ */ .nav{ position:fixed;top:0;left:0;right:0;z-index:60; display:flex;align-items:center;justify-content:space-between; height:var(--nav-h);padding:0 20px; background:var(--warm-white); border-bottom:1px solid var(--border); } @media(min-width:768px){.nav{padding:0 40px;}} @media(min-width:1100px){.nav{padding:0 56px;}} .brand{display:flex;flex-direction:column;line-height:1;} .brand .name{font-family:var(--font-sans);font-weight:500;font-size:.95rem;letter-spacing:.34em;text-transform:uppercase;color:var(--fg);white-space:nowrap;} .brand .sub{font-family:var(--font-sans);font-size:.6rem;font-weight:500;text-transform:uppercase;letter-spacing:.42em;color:var(--accent);margin-top:6px;padding-left:2px;} .nav-links{display:none;gap:38px;align-items:center;} @media(min-width:900px){.nav-links{display:flex;}} .nav-links a{ font-size:.74rem;font-weight:500;text-transform:uppercase;letter-spacing:.2em; color:var(--fg);position:relative;padding:6px 0;transition:color .4s; } .nav-links a::after{ content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--accent); transition:width .45s var(--ease); } .nav-links a:hover::after,.nav-links a[aria-current="page"]::after{width:100%;} .nav-links a[aria-current="page"]{color:var(--accent);} .nav-toggle{ display:flex;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer; padding:10px;margin:-10px; } @media(min-width:900px){.nav-toggle{display:none;}} .nav-toggle span{width:24px;height:1.5px;background:var(--fg);transition:.4s var(--ease);} .nav-on-dark .nav-toggle span{background:var(--warm-white);} /* mobile overlay */ .nav-overlay{ position:fixed;inset:0;z-index:70;background:var(--charcoal); display:flex;flex-direction:column;justify-content:center;align-items:flex-start; padding:0 32px;gap:6px; opacity:0;pointer-events:none;transition:opacity .5s var(--ease); } .nav-overlay.open{opacity:1;pointer-events:auto;} .nav-overlay a{ font-family:var(--font-display);font-weight:300;font-size:clamp(2.4rem,9vw,3.6rem); color:var(--warm-white);padding:8px 0; opacity:0;transform:translateY(14px);transition:all .5s var(--ease); } .nav-overlay.open a{opacity:1;transform:none;} .nav-overlay.open a:nth-child(1){transition-delay:.08s;} .nav-overlay.open a:nth-child(2){transition-delay:.14s;} .nav-overlay.open a:nth-child(3){transition-delay:.20s;} .nav-overlay.open a:nth-child(4){transition-delay:.26s;} .nav-overlay .ov-meta{margin-top:42px;opacity:0;transition:opacity .6s .4s;font-size:.8rem;letter-spacing:.04em;color:rgba(250,246,238,.6);} .nav-overlay.open .ov-meta{opacity:1;} .nav-close{position:absolute;top:26px;right:28px;background:none;border:0;color:var(--warm-white);font-size:2rem;cursor:pointer;line-height:1;font-family:var(--font-display);} .nav-spacer{height:var(--nav-h);} /* ============================================================ REVEAL ANIMATIONS ============================================================ */ /* Reveal hides content ONLY when "reveal-on" is armed on AND animations are confirmed to advance (see initReveal probe). Default = fully visible, so content can never get trapped invisible in a frozen-clock/no-JS context. */ .reveal{opacity:1;transform:none;transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);} html.reveal-on .reveal{opacity:0;transform:translateY(28px);} html.reveal-on .reveal.is-visible{opacity:1;transform:none;} .reveal-d1{transition-delay:.12s;} .reveal-d2{transition-delay:.24s;} .reveal-d3{transition-delay:.36s;} .reveal-d4{transition-delay:.48s;} .clip-rise{opacity:1;} html.reveal-on .clip-rise{clip-path:inset(0 0 100% 0);opacity:0;transition:clip-path 1.2s var(--ease),opacity 1.2s var(--ease);} html.reveal-on .clip-rise.is-visible{clip-path:inset(0 0 0 0);opacity:1;} @media(prefers-reduced-motion:reduce){ html.reveal-on .reveal,html.reveal-on .clip-rise{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important;} } html[data-motion="calm"] .reveal{transform:translateY(14px);transition-duration:.7s;} html[data-motion="calm"] .hero-img{transition:none!important;} /* hard escape hatch: forces everything visible with NO transition (used when the environment doesn't advance time-based CSS, so opacity changes apply instantly) */ html.reveal-static .reveal,html.reveal-static .clip-rise{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important;} /* ============================================================ FIGURE / IMAGE ============================================================ */ .fig{position:relative;overflow:hidden;background:var(--cream);} .fig img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease);} .fig.zoom:hover img{transform:scale(1.045);} .cap{ position:absolute;left:0;right:0;bottom:0;padding:26px 24px 20px; background:linear-gradient(to top,rgba(30,24,16,.72),rgba(30,24,16,0)); color:var(--warm-white);font-family:var(--font-display);font-weight:300; font-size:1.25rem;line-height:1.25; opacity:0;transform:translateY(10px);transition:all .55s var(--ease); } .fig.zoom:hover .cap{opacity:1;transform:none;} .ratio-45{aspect-ratio:4/5;} .ratio-23{aspect-ratio:2/3;} .ratio-11{aspect-ratio:1/1;} .ratio-32{aspect-ratio:3/2;} .ratio-169{aspect-ratio:16/10;} /* ============================================================ FOOTER ============================================================ */ .foot{background:var(--cream);border-top:1px solid var(--border);padding:80px 0 44px;} .foot-top{display:grid;gap:48px;grid-template-columns:1fr;} @media(min-width:820px){.foot-top{grid-template-columns:1.4fr 1fr 1fr;}} .foot h3{font-size:2rem;margin-bottom:10px;} .foot-col-logo{display:flex;flex-direction:column;gap:12px;align-items:flex-start;} .foot-logo{width:180px;max-width:80%;height:auto;display:block;} .foot-col-logo .tag{padding-left:2px;} .foot .tag{font-family:var(--font-display);font-style:italic;color:var(--accent);font-size:1.15rem;} .foot-col .label{margin-bottom:16px;display:block;} .foot-col a{display:block;color:var(--driftwood);padding:4px 0;transition:color .3s;font-size:.96rem;} .foot-col a:hover{color:var(--accent);} .foot-bottom{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center; margin-top:64px;padding-top:26px;border-top:1px solid var(--border); font-size:.76rem;letter-spacing:.04em;color:var(--muted);} .foot-bottom .label{color:var(--muted);} /* ============================================================ HERO (home) ============================================================ */ .hero{position:relative;height:calc(100svh - var(--nav-h));min-height:calc(620px - var(--nav-h));margin-top:var(--nav-h);overflow:hidden;background:var(--charcoal);} /* minimal hero locks to the cropped staircase image's aspect ratio so the FULL crop shows on every device with no side-cropping */ .hero-minimal{height:auto;min-height:0;aspect-ratio:1067/560;max-height:none;} .hero-stage{position:absolute;inset:0;} .hero-img{position:absolute;inset:0;opacity:0;transition:opacity 2.4s ease,transform 9s linear;} .hero-img img{width:100%;height:100%;object-fit:cover;object-position:center center;} .hero-img.active{opacity:1;transform:scale(1.07);} .hero-img.first{opacity:1;} /* show instantly on load, JS takes over */ .hero-img.first.active{transform:scale(1.07);} /* single static image in the minimal hero: no zoom, no crop */ .hero-minimal .hero-img, .hero-minimal .hero-img.active, .hero-minimal .hero-img.first, .hero-minimal .hero-img.first.active{opacity:1;transform:none;} .hero::after{content:"";position:absolute;inset:0; background:linear-gradient(to bottom,rgba(25,20,14,.42) 0%,rgba(25,20,14,.12) 32%,rgba(25,20,14,.15) 60%,rgba(25,20,14,.66) 100%);} /* minimal hero — bottom-right mark, KORAA left-aligned above "Spaces" of the tagline */ .hero-minimal::after{background:linear-gradient(180deg,rgba(20,16,12,0) 35%,rgba(20,16,12,.65) 100%);} .hero-mark{position:absolute;right:32px;bottom:40px;z-index:3; text-align:left;display:flex;flex-direction:column;align-items:flex-start;gap:8px; color:var(--warm-white);line-height:1;} .hero-mark-brand{font-family:var(--font-sans);font-weight:500; font-size:clamp(.7rem,.95vw,.95rem);letter-spacing:.42em;padding-left:.42em; color:#E89968;text-transform:uppercase;} .hero-mark-tagline{font-family:var(--font-display);font-weight:300;font-style:normal; font-size:clamp(1.3rem,2.2vw,2.1rem);letter-spacing:.04em;text-transform:uppercase; color:var(--warm-white);text-shadow:0 1px 12px rgba(0,0,0,.45);white-space:nowrap;} .hero-mark-tagline em{font-style:italic;font-family:var(--font-display);} @media(min-width:860px){ .hero-mark{right:64px;bottom:56px;gap:10px;} } .hero-content{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:flex-end; padding-bottom:min(13vh,140px);} .hero-content .label{color:var(--warm-apricot);margin-bottom:22px;} .hero h1{color:var(--warm-white);font-size:calc(clamp(3.2rem,10vw,8.4rem) * var(--type-scale));line-height:.98;} .hero h1 em{color:var(--warm-apricot);font-style:italic;} .hero .hero-sub{color:rgba(250,246,238,.86);max-width:34ch;margin-top:24px;font-size:1.05rem;} .hero-rotwords span{display:inline-block;} .hero-dots{position:absolute;left:28px;bottom:32px;z-index:4;display:flex;gap:10px;} @media(min-width:860px){ .hero-dots{left:56px;bottom:54px;} } .hero-dots button{width:28px;height:2px;background:rgba(250,246,238,.35);border:0;cursor:pointer;padding:0;transition:background .4s;} .hero-dots button.on{background:var(--warm-apricot);} .hero-scroll{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:4;color:rgba(250,246,238,.7);font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:10px;} .hero-scroll .ln{width:1px;height:40px;background:linear-gradient(rgba(250,246,238,.7),transparent);animation:scrolldn 2.4s var(--ease) infinite;} @keyframes scrolldn{0%{transform:scaleY(0);transform-origin:top;}45%{transform:scaleY(1);transform-origin:top;}55%{transform:scaleY(1);transform-origin:bottom;}100%{transform:scaleY(0);transform-origin:bottom;}} /* hero variant: single still */ html[data-hero="still"] .hero-img.first{opacity:1;transform:scale(1.04);} html[data-hero="still"] .hero-img:not(.first){display:none;} html[data-hero="still"] .hero-dots{display:none;} /* ============================================================ FOUNDER / INTRO ============================================================ */ .intro-grid{display:grid;gap:36px;grid-template-columns:1fr;align-items:stretch;} @media(min-width:900px){.intro-grid{grid-template-columns:0.85fr 1.15fr;gap:64px;}} .intro-portrait{display:flex;} .intro-portrait .fig{flex:1;aspect-ratio:auto;min-height:380px;overflow:hidden;border-radius:2px;} .intro-portrait .fig img{width:100%;height:100%;object-fit:cover;object-position:center;} .intro-body{display:flex;flex-direction:column;justify-content:space-between;padding-top:6px;} .intro-body-head{display:flex;flex-direction:column;} .intro-body h2{margin:0 0 14px;font-family:var(--font-display);font-weight:300;letter-spacing:.02em;line-height:1.05; font-size:clamp(1.5rem,2.8vw,2.2rem);text-transform:uppercase;white-space:nowrap;} .intro-meta{display:inline-block;font-family:var(--font-sans);font-size:.7rem;font-weight:500; letter-spacing:.32em;text-transform:uppercase;color:var(--bordeaux);margin-bottom:32px;} .intro-copy{color:var(--driftwood);font-size:clamp(1rem,1.05vw,1.12rem);line-height:1.85;margin:0 0 22px;} @media(min-width:1200px){.intro-copy{font-size:1.12rem;line-height:1.9;margin-bottom:26px;}} .intro-copy:last-child{margin-bottom:0;} /* tighten the founder section's outer padding */ .sect-lg:has(.intro-grid){padding-top:64px;padding-bottom:64px;} @media(min-width:900px){.sect-lg:has(.intro-grid){padding-top:80px;padding-bottom:80px;}} /* video tiles inside the maze gallery */ .gitem-vid .fig{aspect-ratio:9/16;background:var(--charcoal);border-radius:2px;overflow:hidden;} .gitem-vid .fig video{width:100%;height:100%;object-fit:cover;display:block;} /* uniform 3-column grid for Spaces / Bespoke gallery pages */ /* portfolio grid locked to 3 columns on EVERY device */ .gallery.uniform{column-count:initial;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;} @media(min-width:680px){ .gallery.uniform{gap:18px;} } .gallery.uniform .gitem{break-inside:auto;margin:0;} .gallery.uniform .gitem .fig{aspect-ratio:4/5;overflow:hidden;border-radius:2px;} .gallery.uniform .gitem .fig img, .gallery.uniform .gitem .fig video{width:100%;height:100%;object-fit:cover;display:block;} .gallery.uniform .gitem-vid .fig{background:var(--charcoal);aspect-ratio:4/5;} /* Bespoke sofa-bed carousel — spans the whole 3-column row, original dimensions */ .gallery.uniform .carousel{ grid-column:1 / -1; position:relative; background:var(--cream); border-radius:2px; overflow:hidden; } .carousel-track{ display:flex; width:100%; transition:transform .6s cubic-bezier(.22,.61,.36,1); } .carousel-slide{ flex:0 0 100%; display:flex;align-items:center;justify-content:center; background:var(--cream); } .carousel-slide img{ display:block; max-width:100%; width:100%; height:auto; object-fit:contain; } .carousel-prev,.carousel-next{ position:absolute;top:50%;transform:translateY(-50%);z-index:3; width:44px;height:44px;border:0;border-radius:50%; background:rgba(250,246,238,.85);color:var(--charcoal); font-family:var(--font-display);font-size:1.8rem;line-height:1; cursor:pointer;display:flex;align-items:center;justify-content:center; transition:background .3s,color .3s; } .carousel-prev{left:14px;} .carousel-next{right:14px;} .carousel-prev:hover,.carousel-next:hover{background:var(--warm-white);color:var(--accent);} .carousel-dots{ position:absolute;left:0;right:0;bottom:14px;z-index:3; display:flex;justify-content:center;gap:8px; } .carousel-dots .cd{ width:24px;height:2px;border:0;padding:0;cursor:pointer; background:rgba(42,34,24,.3);transition:background .3s; } .carousel-dots .cd.on{background:var(--terracotta);} .signature{font-family:var(--font-display);font-style:italic;font-size:1.7rem;color:var(--accent);margin-top:8px;} /* pull quote */ .pquote{text-align:center;} .pquote-mark{font-family:var(--font-display);color:var(--accent);font-size:4rem;line-height:0;display:block;margin-bottom:30px;opacity:.6;} .pquote-text{font-family:var(--font-display);font-weight:300;font-size:calc(clamp(1.8rem,4vw,3.3rem) * var(--type-scale));line-height:1.22;max-width:18ch;margin:0 auto;} .pquote-text em{color:var(--accent);} .pquote-by{margin-top:34px;} .pquote-div{width:54px;height:1px;background:var(--accent);margin:30px auto 0;} /* ============================================================ COLLECTION CARDS ============================================================ */ .coll-grid{display:grid;gap:14px 14px;grid-template-columns:1fr;} @media(min-width:640px){.coll-grid{grid-template-columns:repeat(2,1fr);gap:22px;}} @media(min-width:1000px){.coll-grid{grid-template-columns:repeat(3,1fr);gap:30px 26px;}} .coll-card{display:block;} .coll-card .fig{aspect-ratio:4/5;} .coll-meta{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:18px;} .coll-meta .ttl{font-family:var(--font-display);font-weight:300;font-size:1.85rem;line-height:1.05;transition:color .4s;} .coll-card:hover .coll-meta .ttl{color:var(--accent);} .coll-count{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);white-space:nowrap;} .coll-tag{color:var(--muted);font-size:.95rem;margin-top:4px;max-width:32ch;} .film-badge{display:none;} /* featured pair — two equal collection cards side by side */ .studio-section{padding:calc(var(--nav-h) + 16px) 0 56px;} @media(min-width:900px){.studio-section{padding:calc(var(--nav-h) + 18px) 0 72px;}} .portfolio-label{font-family:var(--font-sans);font-size:18px;font-weight:500; letter-spacing:.34em;text-transform:uppercase;color:var(--bordeaux); text-align:center;margin:0 0 18px;} @media(min-width:900px){.portfolio-label{margin-bottom:22px;}} .studio-note{font-family:var(--font-sans);font-weight:500;font-style:normal; text-transform:uppercase;letter-spacing:.2em; font-size:clamp(.72rem,.85vw,.88rem);line-height:2.1;color:var(--bordeaux); max-width:none;margin:0 auto 22px;text-align:center;} .studio-note:last-child{margin-bottom:0;} .studio-note-section{padding:24px 0 88px;background:var(--bg);} @media(min-width:900px){.studio-note-section{padding:32px 0 112px;} .studio-note{padding:0 4vw;} } /* scroll cue — thin animated line beneath the cards, leads eye + click to studio-note */ .scroll-cue{display:flex;align-items:center;justify-content:center; margin:48px auto 0;height:64px;width:64px; text-decoration:none;cursor:pointer;} .scroll-cue-line{display:block;width:1px;height:48px; background:linear-gradient(to bottom,var(--bordeaux) 0%,var(--bordeaux) 50%,transparent 100%); position:relative;overflow:hidden;} .scroll-cue-line::after{content:"";position:absolute;top:-100%;left:0;width:100%;height:60%; background:linear-gradient(to bottom,transparent,var(--terracotta)); animation:scrollPulse 1.8s ease-in-out infinite;} @keyframes scrollPulse{ 0%{top:-60%;opacity:0;} 30%{opacity:1;} 100%{top:120%;opacity:0;} } .feat-pair{display:grid;gap:24px;grid-template-columns:1fr;} /* tight variant for the studio page — always 2 columns, even on mobile */ .feat-pair-tight{max-width:760px;margin:0 auto;grid-template-columns:repeat(2,1fr);gap:12px;} @media(min-width:760px){.feat-pair-tight{gap:24px;}} .feat-pair-tight .coll-card .fig{aspect-ratio:1/1;} .feat-pair-tight .coll-meta{justify-content:center;margin-top:16px;} .feat-pair-tight .coll-meta .ttl{font-family:var(--font-sans);font-size:.85rem;font-weight:500; letter-spacing:.32em;text-transform:uppercase;color:#E89968; transition:color .4s var(--ease);} .feat-pair-tight .coll-card:hover .coll-meta .ttl{color:var(--bordeaux);} /* Blurred portfolio cards with centred title overlay (orange → bordeaux on hover) */ .coll-card-blur .fig{position:relative;overflow:hidden;border-radius:2px;background:var(--charcoal);} .coll-card-blur .fig img{ width:100%;height:100%;object-fit:cover;display:block; filter:blur(3px) brightness(.72); transform:scale(1.06); /* hide soft edges from blur */ transition:filter .55s var(--ease), transform .9s var(--ease); } .coll-card-blur:hover .fig img{ filter:blur(3px) brightness(1.08); /* brighten so the dark bordeaux text stays readable */ transform:scale(1.08); } .coll-center-ttl{ position:absolute;inset:0;z-index:2; display:flex;align-items:center;justify-content:center; font-family:var(--font-sans);font-size:clamp(1rem,1.5vw,1.35rem);font-weight:500; letter-spacing:.34em;text-transform:uppercase; color:#E89968; text-align:center; text-shadow:0 2px 14px rgba(0,0,0,.55); transition:color .4s var(--ease), text-shadow .4s var(--ease); } .coll-card-blur:hover .coll-center-ttl{ color:var(--bordeaux); text-shadow:0 1px 4px rgba(250,246,238,.6); } /* HERO variant — large blurred portfolio cards with overlaid title that swaps on hover */ .feat-pair-hero{max-width:none;margin:0 auto;gap:18px;} @media(min-width:760px){.feat-pair-hero{grid-template-columns:repeat(2,1fr);gap:24px;}} @media(min-width:1100px){.feat-pair-hero{gap:30px;}} .coll-card-hero{display:block;text-decoration:none;color:var(--warm-white);} .coll-card-hero .fig{ position:relative; aspect-ratio:1/1; overflow:hidden; border-radius:2px; background:var(--charcoal); } @media(min-width:1100px){.coll-card-hero .fig{aspect-ratio:4/5;}} .coll-card-hero .fig img{ width:100%;height:100%;display:block;object-fit:cover; filter:blur(3px) brightness(.72); transform:scale(1.06); /* hide blur edges */ transition:filter .55s var(--ease), transform .9s var(--ease); } .coll-card-hero:hover .fig img{ filter:blur(2px) brightness(.62); transform:scale(1.08); } .hero-overlay{ position:absolute;inset:0;z-index:2; display:flex;align-items:center;justify-content:center; padding:24px;text-align:center; } .hero-label{ position:absolute; font-family:var(--font-display);font-weight:300; font-size:clamp(1.6rem,3vw,2.8rem); letter-spacing:.18em;text-transform:uppercase; color:var(--warm-white); white-space:nowrap; text-shadow:0 2px 18px rgba(0,0,0,.45); transition:opacity .45s var(--ease); } .hero-label--hover{opacity:0;} .coll-card-hero:hover .hero-label--rest{opacity:0;} .coll-card-hero:hover .hero-label--hover{opacity:1;} /* finer text for the longer 'VIEW COLLECTION' / 'BESPOKE FURNITURE' lines on mobile */ @media(max-width:540px){ .hero-label{font-size:1.4rem;letter-spacing:.16em;} } .feat-pair .coll-card .fig{aspect-ratio:4/5;} @media(min-width:760px){ .feat-pair{grid-template-columns:repeat(2,1fr);gap:30px;} .feat-pair .coll-card .fig{aspect-ratio:3/4;} } /* toggle (work page) */ .view-toggle{display:inline-flex;border:1px solid var(--border);border-radius:2px;overflow:hidden;background:var(--bg);} .view-toggle button{ font-family:var(--font-sans);font-size:.72rem;font-weight:500;text-transform:uppercase;letter-spacing:.16em; padding:12px 22px;background:transparent;border:0;cursor:pointer;color:var(--muted);transition:all .4s var(--ease);white-space:nowrap; } .view-toggle button.on{background:var(--charcoal);color:var(--warm-white);} /* style threads */ .thread{margin-bottom:90px;} .thread:last-child{margin-bottom:0;} .thread-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:30px;flex-wrap:wrap;} .thread-head h3{font-size:clamp(2rem,3.6vw,3rem);} .thread-head .num{font-family:var(--font-display);font-size:1.1rem;color:var(--accent);} .thread-row{display:grid;gap:18px;grid-template-columns:repeat(2,1fr);} @media(min-width:760px){.thread-row{grid-template-columns:repeat(4,1fr);}} .thread-row .fig{aspect-ratio:3/4;} .thread-row .coll-card:nth-child(odd) .fig{aspect-ratio:3/4;} @media(min-width:760px){ .thread-row .coll-card:nth-child(2){margin-top:42px;} .thread-row .coll-card:nth-child(4){margin-top:42px;} } /* ============================================================ SERVICE CARDS (studio) ============================================================ */ .svc-grid{display:grid;gap:18px;grid-template-columns:1fr;} @media(min-width:780px){.svc-grid{grid-template-columns:repeat(3,1fr);}} .svc-card{ background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:40px 32px;position:relative;overflow:hidden; transition:transform .55s var(--ease),box-shadow .55s var(--ease); } .svc-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--ln,var(--terracotta));transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease);} .svc-card:hover{transform:translateY(-5px);box-shadow:0 22px 50px -28px rgba(42,34,24,.4);} .svc-card:hover::before{transform:scaleX(1);} .svc-card .ico{width:40px;height:40px;color:var(--ln,var(--terracotta));margin-bottom:24px;} .svc-card h3{font-size:1.7rem;margin-bottom:12px;} .svc-card p{color:var(--muted);font-size:.98rem;margin:0;} .svc-note{display:inline-block;margin-top:18px;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ln,var(--terracotta));border-top:1px solid var(--sand);padding-top:14px;} /* about layout */ .about-grid{display:grid;gap:50px;grid-template-columns:1fr;} @media(min-width:980px){.about-grid{grid-template-columns:0.82fr 1.18fr;gap:80px;align-items:start;}} .about-portrait{position:sticky;top:120px;} @media(max-width:979px){.about-portrait{position:static;}} .about-body p{font-size:1.06rem;color:var(--driftwood);margin-bottom:1.4em;} .about-body .first::first-letter{font-family:var(--font-display);font-size:3.4em;float:left;line-height:.8;padding:6px 12px 0 0;color:var(--accent);font-weight:400;} .divline{width:1px;background:var(--accent);height:100%;} .refs{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;} .ref-chip{border:1px solid var(--border);border-radius:40px;padding:8px 18px;font-size:.82rem;color:var(--driftwood);} /* ============================================================ SPACE DETAIL ============================================================ */ .space-cover{position:relative;height:74vh;min-height:520px;overflow:hidden;background:var(--charcoal);} .space-cover img{width:100%;height:100%;object-fit:cover;} .space-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(25,20,14,.74),rgba(25,20,14,.05) 55%,rgba(25,20,14,.34));} .space-cover .cover-in{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:54px;} .space-cover h1{color:var(--warm-white);} .space-cover .tagln{color:rgba(250,246,238,.86);font-family:var(--font-display);font-style:italic;font-size:1.4rem;margin-top:14px;max-width:30ch;} .back-link{display:inline-flex;align-items:center;gap:8px;color:rgba(250,246,238,.85);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:24px;transition:gap .4s;} .back-link:hover{gap:14px;} /* video slots — portrait, curated per piece */ .video-band{background:var(--cream);} .video-head{max-width:46ch;margin-bottom:40px;} .vid-row{display:grid;gap:20px;grid-template-columns:1fr;} @media(min-width:680px){.vid-row{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}} .vid-slot{position:relative;aspect-ratio:9/16;border:1px dashed var(--sandstone);border-radius:6px;background: repeating-linear-gradient(135deg,rgba(184,164,142,.10) 0 12px,transparent 12px 24px),var(--warm-white); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:22px;overflow:hidden; transition:border-color .4s,background .4s;} .vid-slot:hover{border-color:var(--accent);} .vid-slot .play{width:58px;height:58px;border-radius:50%;border:1px solid var(--sandstone);display:flex;align-items:center;justify-content:center;color:var(--driftwood);transition:.4s;} .vid-slot:hover .play{border-color:var(--accent);color:var(--accent);transform:scale(1.06);} .vid-slot .vt{font-family:var(--font-display);font-size:1.3rem;color:var(--charcoal);line-height:1.15;} .vid-slot .vmeta{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sandstone);} .vid-slot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:6px;} /* real video slots (.vid-real) — figure wraps a portrait