/* ========================================================= TAYMAA ALSHOUFY — Architecture & Interior Design Abu Dhabi, UAE · 3D portfolio · style.css ========================================================= */ /* ---------- Design Tokens ---------- */ :root{ /* palette */ /* DARK LUXE palette */ --noir: #0d0a07; /* deepest band */ --bone: #15110d; /* page background (warm near-black) */ --bone-2: #1d1813; /* elevated surface */ --sand: #251f17; /* inputs / third surface */ --clay: #c9a86a; /* gold accent */ --clay-deep: #ab8a4e; /* deeper gold */ --olive: #8a865f; --taupe: #978b79; /* muted text */ --ink: #f3ecdb; /* primary text (light) */ --ink-soft: #cabfa9; /* secondary text */ --line: rgba(243,236,219,.13); --white: #faf6ec; /* type */ --display: "Cormorant Garamond", Georgia, serif; --sans: "Jost", "Helvetica Neue", Arial, sans-serif; /* spacing / layout */ --gut: clamp(1.25rem, 4vw, 4rem); --maxw: 1320px; --radius: 4px; /* motion */ --ease: cubic-bezier(.22,.61,.36,1); --slow: .9s; } /* ---------- Reset ---------- */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } /* NOTE: do NOT add overflow-x:clip/hidden on — combined with body{overflow-x:hidden} it breaks position:sticky (the video hero). */ body{ margin:0; font-family:var(--sans); color:var(--ink); background:var(--bone); line-height:1.65; font-weight:300; letter-spacing:.01em; overflow-x:hidden; } img,svg{ display:block; max-width:100%; } a{ color:inherit; text-decoration:none; } ul{ margin:0; padding:0; list-style:none; } button{ font-family:inherit; cursor:pointer; } h1,h2,h3,h4{ font-family:var(--display); font-weight:500; line-height:1.05; margin:0; } /* ---------- Typography scale ---------- */ .display-xl{ font-size:clamp(3rem, 9vw, 8.5rem); letter-spacing:-.02em; } .display-l { font-size:clamp(2.4rem, 6vw, 5rem); letter-spacing:-.01em; } .display-m { font-size:clamp(1.9rem, 4vw, 3.2rem); } .eyebrow{ font-family:var(--sans); font-size:.74rem; font-weight:500; text-transform:uppercase; letter-spacing:.42em; color:var(--clay); } .lead{ font-size:clamp(1.05rem,1.6vw,1.35rem); color:var(--ink-soft); font-weight:300; } .muted{ color:var(--taupe); } /* ---------- Layout helpers ---------- */ .wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); } section{ position:relative; } .section{ padding-block:clamp(4.5rem, 11vw, 11rem); } .divider{ height:1px; background:var(--line); border:0; margin:0; } .grid{ display:grid; gap:clamp(1.5rem,3vw,3rem); } /* ---------- Buttons ---------- */ .btn{ display:inline-flex; align-items:center; gap:.7em; padding:.95em 1.9em; font-family:var(--sans); font-size:.78rem; font-weight:400; text-transform:uppercase; letter-spacing:.22em; border:1px solid var(--ink); border-radius:50px; background:transparent; color:var(--ink); transition:background var(--slow) var(--ease), color var(--slow) var(--ease), transform .5s var(--ease); will-change:transform; } .btn:hover{ background:var(--clay); border-color:var(--clay); color:var(--noir); transform:translateY(-2px); } .btn--solid{ background:var(--clay); border-color:var(--clay); color:var(--noir); } .btn--solid:hover{ background:var(--clay-deep); border-color:var(--clay-deep); color:var(--noir); } .btn--clay{ background:var(--clay); border-color:var(--clay); color:var(--noir); } .btn--clay:hover{ background:var(--clay-deep); border-color:var(--clay-deep); color:var(--noir); } .btn .arr{ transition:transform .5s var(--ease); } .btn:hover .arr{ transform:translateX(5px); } /* ---------- Header / Nav ---------- */ .site-header{ position:fixed; inset:0 0 auto 0; z-index:60; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:1.5rem var(--gut); gap:clamp(1rem,3vw,2.5rem); transition:background .5s var(--ease), padding .5s var(--ease), box-shadow .5s var(--ease); } .site-header.scrolled{ background:rgba(16,12,8,.84); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); padding-block:.9rem; box-shadow:0 1px 0 rgba(201,168,106,.18); } .brand{ display:flex; flex-direction:column; line-height:1; z-index:61; grid-column:1; } .brand b{ font-family:var(--display); font-size:1.36rem; font-weight:600; letter-spacing:.04em; } .brand span{ font-size:.58rem; letter-spacing:.36em; text-transform:uppercase; color:var(--taupe); margin-top:.4em; } .nav{ display:flex; align-items:center; gap:2.4rem; grid-column:2; justify-content:center; } .nav a{ position:relative; font-size:.74rem; text-transform:uppercase; letter-spacing:.2em; padding:.4em 0; } .nav a::before{ content:""; position:absolute; left:50%; top:-8px; width:4px; height:4px; border-radius:50%; background:var(--clay); transform:translateX(-50%) scale(0); opacity:0; transition:opacity .4s var(--ease), transform .4s var(--ease); } .nav a:hover::before{ opacity:.55; transform:translateX(-50%) scale(1); } .nav a.active::before{ opacity:1; transform:translateX(-50%) scale(1); } .nav a.active{ color:var(--clay); } /* Desktop text CTA */ .nav-enquire{ grid-column:3; justify-self:end; display:inline-flex; align-items:center; gap:.55em; z-index:61; font-size:.68rem; font-family:var(--sans); text-transform:uppercase; letter-spacing:.24em; color:var(--clay); white-space:nowrap; padding-bottom:2px; border-bottom:1px solid rgba(201,168,106,.38); transition:border-color .45s var(--ease), letter-spacing .45s var(--ease); } .nav-enquire:hover{ border-color:var(--clay); letter-spacing:.3em; } .nav-enquire .arr{ display:inline-block; transition:transform .45s var(--ease); } .nav-enquire:hover .arr{ transform:translateX(4px); } /* Mobile-only pill inside nav panel */ .nav-enquire-mobile{ display:none; font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color:var(--clay); padding:.75em 2.6em; border:1px solid rgba(201,168,106,.55); border-radius:2px; margin-top:1rem; transition:background .4s var(--ease), border-color .4s var(--ease), letter-spacing .4s var(--ease); } .nav-enquire-mobile:hover{ background:rgba(201,168,106,.1); border-color:var(--clay); letter-spacing:.36em; } .burger{ display:none; grid-column:3; justify-self:end; flex-direction:column; gap:6px; width:28px; background:none; border:0; z-index:61; cursor:pointer; padding:6px; margin:-6px; filter:drop-shadow(0 1px 4px rgba(0,0,0,.55)); } .burger span{ height:1.5px; background:var(--clay); border-radius:1px; transition:.45s var(--ease); } .burger span:nth-child(1){ width:100%; } .burger span:nth-child(2){ width:62%; } .burger span:nth-child(3){ width:100%; } @media (max-width:920px){ .site-header{ grid-template-columns:1fr auto; padding:1.2rem var(--gut); gap:1rem; } .burger{ grid-column:2; } .nav{ grid-column:unset; position:fixed; top:0; left:0; width:100vw; height:100vh; height:100svh; flex-direction:column; justify-content:center; gap:1.8rem; background:var(--noir); transform:translateX(100%); transition:transform .6s var(--ease); } .nav.open{ transform:translateX(0); } .nav a{ font-size:1.1rem; letter-spacing:.22em; } .nav a::before{ top:-10px; } .nav-enquire{ display:none; } .nav-enquire-mobile{ display:inline-flex; } .burger{ display:flex; } .nav-open .burger span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); } .nav-open .burger span:nth-child(2){ opacity:0; } .nav-open .burger span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); } } /* ---------- HERO · scroll-scrubbed video ---------- */ .vhero{ position:relative; height:380vh; background:var(--noir); } .vhero__sticky{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; background:var(--noir); } .vhero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; } /* lighter, bottom-weighted gradient — keeps the architecture visible */ .vhero__scrim{ position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg, rgba(13,10,7,.42) 0%, rgba(13,10,7,0) 15%, rgba(13,10,7,0) 46%, rgba(13,10,7,.5) 72%, rgba(13,10,7,.92) 100%); } /* text anchored to the bottom-left, cinematic */ .vhero__overlay{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding-bottom:clamp(3rem,8vh,5.5rem); pointer-events:none; will-change:opacity; } .vhero__overlay .eyebrow{ display:inline-flex; align-items:center; gap:.9rem; margin-bottom:1.1rem; } .vhero__overlay .eyebrow::before{ content:""; width:34px; height:1px; background:var(--clay); } .vhero__overlay h1{ max-width:16ch; font-size:clamp(2.5rem,5.6vw,5rem); line-height:1.02; text-shadow:0 2px 44px rgba(0,0,0,.6); } .vhero__overlay h1 em{ font-style:italic; color:var(--clay); } .vhero__overlay p{ max-width:46ch; margin-top:1.2rem; color:var(--ink); text-shadow:0 1px 26px rgba(0,0,0,.75); } .vhero__actions{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.8rem; pointer-events:auto; } /* ghost "Start a Project" on dark video bg */ .vhero__actions .btn:not(.btn--solid){ border-color:rgba(243,236,219,.35); color:var(--ink); background:transparent; transition:border-color .45s var(--ease), color .45s var(--ease), background .45s var(--ease), transform .5s var(--ease); } .vhero__actions .btn:not(.btn--solid):hover{ border-color:var(--clay); color:var(--clay); background:rgba(201,168,106,.08); transform:translateY(-2px); } /* vertical "scroll" tag on the right edge */ .vhero__cue{ position:absolute; right:1.7rem; bottom:clamp(3rem,8vh,5.5rem); z-index:4; transform:rotate(90deg); transform-origin:right bottom; font-size:.6rem; letter-spacing:.34em; text-transform:uppercase; color:var(--ink-soft); white-space:nowrap; pointer-events:none; } .vhero__progress{ position:absolute; left:0; right:0; bottom:0; z-index:4; height:2px; background:rgba(243,236,219,.14); } .vhero__progress i{ position:absolute; inset:0; background:var(--clay); transform:scaleX(0); transform-origin:left; will-change:transform; } @media (max-width:880px){ .vhero{ height:340vh; } .vhero__cue{ display:none; } } @media (max-width:640px){ .vhero__overlay{ padding-bottom:clamp(1.4rem,4vh,2.2rem); } .vhero__overlay .eyebrow{ margin-bottom:.55rem; gap:.6rem; } .vhero__overlay .eyebrow::before{ width:22px; } .vhero__overlay h1{ font-size:clamp(1.85rem,8vw,2.5rem); margin-top:.5rem; } .vhero__overlay > p{ margin-top:.65rem; font-size:.88rem; max-width:30ch; } .vhero__actions{ margin-top:1rem; gap:.5rem; } .vhero__actions .btn{ padding:.75em 1.4em; font-size:.72rem; } } /* ---------- Marquee strip ---------- */ .marquee{ overflow:hidden; border-block:1px solid transparent; background:var(--clay); color:var(--noir); } .marquee__track{ display:flex; gap:3rem; padding-block:1.1rem; white-space:nowrap; width:max-content; animation:scrollX 28s linear infinite; } .marquee__track span{ font-family:var(--display); font-size:1.5rem; font-style:italic; display:inline-flex; align-items:center; gap:3rem; } .marquee__track span::after{ content:"✦"; color:var(--noir); font-style:normal; font-size:.8rem; } @keyframes scrollX{ to{ transform:translateX(-50%); } } /* ---------- Reveal (scroll 3D) ---------- */ .reveal{ opacity:0; transform:translateY(46px) rotateX(8deg); transform-origin:center bottom; transition:opacity 1s var(--ease), transform 1.1s var(--ease); will-change:transform,opacity; } .reveal.in{ opacity:1; transform:none; } .reveal[data-delay="1"]{ transition-delay:.12s; } .reveal[data-delay="2"]{ transition-delay:.24s; } .reveal[data-delay="3"]{ transition-delay:.36s; } /* ---------- Intro / About blurb ---------- */ .split{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(2rem,6vw,6rem); align-items:center; } .split .eyebrow{ margin-bottom:1.2rem; } .split h2{ margin-bottom:1.6rem; } @media (max-width:880px){ .split{ grid-template-columns:1fr; } .split [style*="sticky"]{ position:static !important; } } /* media frame with parallax cutout */ .media-3d{ position:relative; perspective:1000px; } .media-3d .frame{ position:relative; border-radius:var(--radius); overflow:hidden; background:var(--bone-2); aspect-ratio:4/5; box-shadow:0 50px 90px -42px rgba(0,0,0,.75); transform-style:preserve-3d; } .media-3d .frame::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.25); } .media-3d .cut{ position:absolute; z-index:2; will-change:transform; } /* ---------- Stats ---------- */ .stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; } .stats .stat b{ font-family:var(--display); font-size:clamp(2.6rem,5vw,4.2rem); font-weight:500; display:block; line-height:1; } .stats .stat span{ font-size:.72rem; text-transform:uppercase; letter-spacing:.2em; color:var(--taupe); } @media (max-width:760px){ .stats{ grid-template-columns:repeat(2,1fr); gap:2.4rem; } } /* ---------- Section heads ---------- */ .sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom:clamp(2.5rem,5vw,4.5rem); flex-wrap:wrap; } .sec-head h2{ max-width:16ch; } .sec-head .eyebrow{ margin-bottom:1rem; display:block; } /* ---------- Services accordion ---------- */ .svc-item{ border-top:1px solid var(--line); } .svc-item:last-child{ border-bottom:1px solid var(--line); } .svc-head{ display:grid; grid-template-columns:3.5rem 1fr auto; align-items:center; gap:2rem; padding:1.8rem 0; cursor:pointer; user-select:none; } .svc-head .num{ font-family:var(--sans); font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--clay); } .svc-head h3{ font-family:var(--display); font-size:clamp(1.5rem,2.6vw,2.4rem); font-weight:400; color:var(--ink); letter-spacing:.01em; transition:transform .45s var(--ease); } .svc-item:hover .svc-head h3, .svc-item.open .svc-head h3{ transform:translateX(10px); } .svc-icon{ width:38px; height:38px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; font-size:1.2rem; line-height:1; color:var(--ink-soft); flex-shrink:0; transition:transform .55s var(--ease), border-color .35s, color .35s; } .svc-item.open .svc-icon{ transform:rotate(45deg); border-color:var(--clay); color:var(--clay); } .svc-body{ display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .5s ease, opacity .38s ease; } .svc-body > *{ overflow:hidden; min-height:0; } .svc-item.open .svc-body{ grid-template-rows:1fr; opacity:1; } .svc-body p{ padding:0 4rem 2.2rem 5.5rem; color:var(--ink-soft); max-width:62ch; font-size:.95rem; line-height:1.72; } @media (max-width:640px){ .svc-head{ grid-template-columns:2.4rem 1fr auto; gap:1rem; } .svc-body p{ padding:0 0 1.8rem 3.4rem; } } /* ---------- Portfolio grid ---------- */ .work-grid{ columns:2; column-gap:6px; } .work-grid.cols-3{ columns:3; } .work-grid.cols-4{ columns:4; } @media (max-width:1100px){ .work-grid.cols-4{ columns:3; } } @media (max-width:880px){ .work-grid.cols-3, .work-grid.cols-4{ columns:2; } } @media (max-width:480px){ .work-grid, .work-grid.cols-3, .work-grid.cols-4{ columns:1; } } .work{ position:relative; display:block; overflow:hidden; background:var(--bone-2); cursor:pointer; margin-bottom:6px; break-inside:avoid; } .work .thumb{ position:static !important; display:block; width:100%; height:auto !important; object-fit:unset !important; transition:transform .9s var(--ease); } .work:hover .thumb{ transform:scale(1.04); } /* meta/tag kept in DOM for lightbox titles, never shown */ .work .meta, .work .tag{ display:none; } /* ---------- Portfolio gallery lightbox ---------- */ .port-lb{ position:fixed; inset:0; z-index:80; display:none; flex-direction:column; align-items:center; justify-content:center; background:rgba(13,10,7,.97); padding:3.5rem 4rem 2rem; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); } .port-lb.open{ display:flex; } .port-lb__inner{ display:flex; flex-direction:column; align-items:center; gap:1.2rem; width:min(94vw,1200px); max-height:90dvh; animation:portLbIn .45s var(--ease) both; } @keyframes portLbIn{ from{ opacity:0; transform:scale(.94) translateY(20px); } to{ opacity:1; transform:none; } } .port-lb__img-wrap{ border-radius:4px; overflow:hidden; background:#1a1410; display:flex; align-items:center; justify-content:center; flex:1; min-height:0; width:100%; } .port-lb__img{ display:block; max-height:78dvh; max-width:100%; width:auto; height:auto; object-fit:contain; transition:opacity .2s ease, transform .28s ease; } .port-lb__img.fading{ opacity:0; transform:scale(.97); } .port-lb__caption{ display:flex; align-items:center; gap:.7rem; width:100%; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; } .port-lb__cat{ color:var(--clay); } .port-lb__sep{ color:var(--line); } .port-lb__title{ color:var(--ink-soft); } .port-lb__counter{ margin-left:auto; color:var(--taupe); } .port-lb__close{ position:absolute; top:1.4rem; right:1.8rem; background:none; border:0; color:var(--ink-soft); font-size:1.6rem; line-height:1; cursor:pointer; z-index:2; transition:color .3s var(--ease), transform .4s var(--ease); } .port-lb__close:hover{ color:var(--clay); transform:rotate(90deg); } .port-lb__nav{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(13,10,7,.6); border:1px solid var(--line); color:var(--ink-soft); width:46px; height:46px; border-radius:50%; cursor:pointer; display:grid; place-items:center; font-size:1rem; transition:border-color .3s, color .3s, transform .3s var(--ease), background .3s; } .port-lb__prev{ left:1.2rem; } .port-lb__next{ right:1.2rem; } .port-lb__prev:hover{ border-color:var(--clay); color:var(--clay); transform:translateY(-50%) translateX(-3px); background:rgba(13,10,7,.95); } .port-lb__next:hover{ border-color:var(--clay); color:var(--clay); transform:translateY(-50%) translateX(3px); background:rgba(13,10,7,.95); } body.lb-open{ overflow:hidden; } body.nav-open{ overflow:hidden; } @media (max-width:600px){ .port-lb{ padding:3rem 1rem 1.2rem; } .port-lb__prev{ left:.3rem; } .port-lb__next{ right:.3rem; } } /* ---------- Concept boards (Design Concept feature) ---------- */ .concept-boards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.6rem); margin:1rem 0 4.5rem; } /* uniform, equal-size board tiles; click opens full board in the lightbox */ .concept-boards .work{ margin-bottom:0; border-radius:var(--radius); box-shadow:0 30px 60px -34px rgba(0,0,0,.7); } .concept-boards .thumb{ aspect-ratio:3/4; height:auto !important; object-fit:cover !important; } @media (max-width:820px){ .concept-boards{ grid-template-columns:1fr 1fr; } } @media (max-width:520px){ .concept-boards{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; } } /* ---------- Filter pills ---------- */ .filters{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2.6rem; } .pill{ font-size:.72rem; text-transform:uppercase; letter-spacing:.16em; padding:.6em 1.3em; border:1px solid var(--line); border-radius:50px; background:transparent; color:var(--ink-soft); transition:.4s var(--ease); } .pill.active, .pill:hover{ background:var(--clay); color:var(--noir); border-color:var(--clay); } .is-hidden{ display:none !important; } /* ---------- Reels ---------- */ .reel-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,2.5vw,2.2rem); } @media (max-width:880px){ .reel-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .reel-grid{ grid-template-columns:1fr; } } .reel{ position:relative; aspect-ratio:9/16; border-radius:var(--radius); overflow:hidden; background:var(--noir); cursor:pointer; } .reel .thumb{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.85; transition:transform 1s var(--ease), opacity .6s; } .reel:hover .thumb{ transform:scale(1.05); opacity:1; } .reel .play{ position:absolute; inset:0; margin:auto; width:62px; height:62px; border-radius:50%; display:grid; place-items:center; background:var(--clay); color:var(--noir); transition:transform .5s var(--ease); z-index:2; } .reel:hover .play{ transform:scale(1.12); } .reel .play svg{ margin-left:3px; } .reel .cap{ display:none; } /* lightbox */ .lightbox{ position:fixed; inset:0; z-index:90; display:none; place-items:center; background:rgba(20,17,13,.9); padding:var(--gut); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); } .lightbox.open{ display:grid; } .lightbox .box{ width:min(420px,100%,calc((100dvh - 4rem)*9/16)); aspect-ratio:9/16; max-height:calc(100dvh - 4rem); background:var(--sand); border-radius:6px; overflow:hidden; position:relative; } .lightbox iframe, .lightbox video{ width:100%; height:100%; border:0; } .lightbox .close{ position:absolute; top:1.4rem; right:1.6rem; color:var(--ink); background:none; border:0; font-size:1.6rem; } /* ---------- Timeline (about) ---------- */ .timeline{ position:relative; margin-top:2rem; } .timeline::before{ content:""; position:absolute; left:0; top:.4rem; bottom:.4rem; width:1px; background:var(--line); } .tl-item{ position:relative; padding:0 0 2.8rem 2.2rem; } .tl-item::before{ content:""; position:absolute; left:-4px; top:.5rem; width:9px; height:9px; border-radius:50%; background:var(--clay); } .tl-item .yr{ font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--clay); } .tl-item h3{ font-size:1.5rem; margin:.4rem 0 .15rem; } .tl-item .org{ font-size:.85rem; color:var(--taupe); margin-bottom:.7rem; } .tl-item p{ font-size:.94rem; color:var(--ink-soft); max-width:60ch; } /* skills */ .chips{ display:flex; flex-wrap:wrap; gap:.6rem; } .chip{ font-size:.74rem; letter-spacing:.05em; padding:.55em 1.1em; border:1px solid var(--line); border-radius:50px; background:var(--sand); color:var(--ink-soft); } .bars .bar{ margin-bottom:1.3rem; } .bars .bar .top{ display:flex; justify-content:space-between; font-size:.82rem; margin-bottom:.5rem; } .bars .bar .track{ height:3px; background:var(--sand); border-radius:3px; overflow:hidden; } .bars .bar .fill{ height:100%; width:0; background:var(--clay); transition:width 1.4s var(--ease); } /* ---------- Page hero (interior pages) ---------- */ .page-hero{ padding-top:clamp(8rem,16vw,12rem); padding-bottom:clamp(2.5rem,5vw,4rem); position:relative; overflow:hidden; } .page-hero .eyebrow{ display:block; margin-bottom:1.2rem; } .page-hero h1{ max-width:16ch; } .page-hero p{ max-width:54ch; margin-top:1.4rem; } .breadcrumb{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--taupe); margin-bottom:1.4rem; } .breadcrumb a:hover{ color:var(--clay); } /* ---------- Contact ---------- */ .contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); } @media (max-width:880px){ .contact-grid{ grid-template-columns:1fr; } } .field{ margin-bottom:1.4rem; } .field label{ display:block; font-size:.7rem; text-transform:uppercase; letter-spacing:.18em; color:var(--taupe); margin-bottom:.5rem; } .field input, .field textarea, .field select{ width:100%; padding:.95em 1.1em; border:1px solid var(--line); border-radius:var(--radius); background:var(--sand); font-family:var(--sans); font-size:.95rem; color:var(--ink); transition:border .4s; } .field input::placeholder, .field textarea::placeholder{ color:var(--taupe); } .field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--clay); } .field textarea{ min-height:140px; resize:vertical; } .info-card{ padding:0; } .info-card .row{ display:flex; gap:1rem; padding:1.3rem 0; border-bottom:1px solid var(--line); align-items:flex-start; } .info-card .row .ic{ width:34px; height:34px; flex:none; border-radius:50%; display:grid; place-items:center; background:var(--bone-2); color:var(--clay); } .info-card .row b{ display:block; font-family:var(--display); font-size:1.15rem; } .info-card .row a, .info-card .row p{ margin:0; font-size:.95rem; color:var(--ink-soft); } .map-frame{ margin-top:2rem; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); aspect-ratio:16/10; } .map-frame iframe{ width:100%; height:100%; border:0; filter:grayscale(.4) invert(.9) hue-rotate(180deg) brightness(.92) contrast(.95); } .form-note{ font-size:.8rem; color:var(--taupe); margin-top:1rem; } /* ---------- CTA band ---------- */ .cta-band{ background:var(--noir); color:var(--ink); text-align:center; } .cta-band h2{ max-width:20ch; margin-inline:auto; margin-bottom:1.8rem; } .cta-band h2 em{ font-style:italic; color:var(--clay); } .cta-band .btn{ border-color:var(--ink); color:var(--ink); } .cta-band .btn:hover, .cta-band .btn--clay{ background:var(--clay); border-color:var(--clay); color:var(--noir); } /* ---------- Footer ---------- */ .site-footer{ background:var(--noir); color:var(--ink-soft); padding-block:clamp(3.5rem,7vw,6rem) 2.5rem; } .footer-top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:2.5rem; } @media (max-width:880px){ .footer-top{ grid-template-columns:1fr 1fr; gap:2.4rem; } } @media (max-width:520px){ .footer-top{ grid-template-columns:1fr; } } .site-footer h4{ font-size:.74rem; font-family:var(--sans); text-transform:uppercase; letter-spacing:.22em; color:var(--taupe); margin-bottom:1.2rem; } .site-footer .fbrand b{ font-family:var(--display); font-size:1.7rem; } .site-footer .fbrand p{ color:var(--taupe); font-size:.92rem; max-width:34ch; margin-top:.8rem; } .site-footer ul li{ margin-bottom:.7rem; } .site-footer ul a{ font-size:.92rem; color:var(--ink-soft); transition:color .4s; } .site-footer ul a:hover{ color:var(--clay); } .footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin-top:3.5rem; padding-top:1.8rem; border-top:1px solid var(--line); font-size:.78rem; color:var(--taupe); } .socials{ display:flex; gap:1.2rem; } .socials a:hover{ color:var(--clay); } /* ---------- Cursor (3D pointer) ---------- */ .cursor{ position:fixed; top:0; left:0; width:9px; height:9px; border-radius:50%; background:var(--clay); pointer-events:none; z-index:200; transform:translate(-50%,-50%); transition:transform .25s var(--ease); mix-blend-mode:difference; } .cursor-ring{ position:fixed; top:0; left:0; width:38px; height:38px; border:1px solid var(--clay); border-radius:50%; pointer-events:none; z-index:200; transform:translate(-50%,-50%); transition:transform .35s var(--ease), width .35s, height .35s; } .cursor-ring.hover{ width:64px; height:64px; } @media (hover:none){ .cursor,.cursor-ring{ display:none; } } /* ---------- Misc ---------- */ .center{ text-align:center; } .mt-l{ margin-top:clamp(2rem,4vw,3.5rem); } .tilt{ will-change:transform; transition:transform .15s var(--ease); transform-style:preserve-3d; } @media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } .reveal{ opacity:1; transform:none; } } ::selection{ background:var(--clay); color:var(--noir); } .tour__cap{ text-shadow:0 2px 26px rgba(0,0,0,.6); } /* thin gold scrollbar accent (WebKit) */ ::-webkit-scrollbar{ width:10px; } ::-webkit-scrollbar-track{ background:var(--noir); } ::-webkit-scrollbar-thumb{ background:#2c2419; border-radius:10px; } ::-webkit-scrollbar-thumb:hover{ background:var(--clay-deep); }