/* ============================================================================= Harry Apata — Architectural Visualization style.css · Light editorial design system ---------------------------------------------------------------------------- Sections: Tokens · Base · Type · Buttons · Header/Nav · Footer Reveal animations · Hero · About · Project carousel Gallery break · Mini gallery · Projects page · Project page Gallery page · Lightbox · Responsive ========================================================================== */ /* ---------- Fonts (loaded in each HTML ) ------------------------------- Display: "Fraunces" (elegant high-contrast serif) Body: "Newsreader" (readable serif) UI/labels:"Inter" (clean grotesque) */ /* ---------- 1. Design tokens ---------- */ :root{ --bg:#ffffff; --bg-soft:#f6f5f3; --ink:#111111; --ink-soft:#3a3a3a; --muted:#8c8a86; --line:rgba(17,17,17,.12); --line-soft:rgba(17,17,17,.07); --serif:"Newsreader", Georgia, "Times New Roman", serif; --display:"Fraunces", Georgia, serif; --ui:"Inter", -apple-system, "Segoe UI", Roboto, sans-serif; --maxw:1480px; --gutter:clamp(20px, 5vw, 80px); --header-h:64px; --ease:cubic-bezier(.2,.7,.2,1); --ease-out:cubic-bezier(.16,1,.3,1); } /* ---------- 2. Base ---------- */ *{box-sizing:border-box;} html{scroll-behavior:smooth;} html,body{margin:0;padding:0;} body{ background:var(--bg); color:var(--ink); font-family:var(--serif); font-size:18px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img{display:block;max-width:100%; -webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;user-drag:none; -webkit-touch-callout:none;user-select:none;-webkit-user-select:none;} a{color:inherit;text-decoration:none;} ::selection{background:#111;color:#fff;} .wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter);} /* ---------- 3. Typography ---------- */ h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.05;margin:0;letter-spacing:-.01em;} .kicker{ font-family:var(--ui);font-size:12px;font-weight:500;letter-spacing:.22em; text-transform:uppercase;color:var(--muted);margin:0 0 18px; } .section-title{font-size:clamp(30px,4.4vw,58px);} .lead{font-size:clamp(18px,1.5vw,22px);color:var(--ink-soft);line-height:1.55;} .muted{color:var(--muted);} /* generous vertical rhythm between page sections */ .section{padding:clamp(72px,11vh,160px) 0;} .section--tight{padding:clamp(48px,7vh,90px) 0;} /* ---------- 4. Buttons ---------- */ /* Buttons: squared/architectural with a colour that wipes in from the left on hover (the text sits above the background, so no markup change is needed). */ .btn{ position:relative;display:inline-flex;align-items:center;gap:.85em; font-family:var(--ui);font-size:12.5px;font-weight:500;letter-spacing:.18em; text-transform:uppercase;cursor:pointer;border:1px solid transparent; padding:17px 32px;border-radius:2px;overflow:hidden;isolation:isolate; background-repeat:no-repeat;background-size:220% 100%;background-position:100% 0; transition:background-position .55s var(--ease), color .35s var(--ease), border-color .35s var(--ease), box-shadow .45s var(--ease); } .btn .arrow{transition:transform .4s var(--ease);} .btn:hover .arrow{transform:translateX(7px);} .btn--lg{padding:22px 46px;font-size:14px;letter-spacing:.2em;gap:1em;} /* dark button → wipes to off-white, text inverts to ink */ .btn--solid{color:#fff;border-color:var(--ink); background-image:linear-gradient(90deg,#f4f2ee 0 50%, var(--ink) 50% 100%);} .btn--solid:hover{color:var(--ink);background-position:0 0;box-shadow:0 18px 38px -16px rgba(0,0,0,.4);} /* light button (over the hero) → wipes to ink */ .btn--light{color:#111;border-color:#fff; background-image:linear-gradient(90deg,var(--ink) 0 50%, #fff 50% 100%);} .btn--light:hover{color:#fff;border-color:var(--ink);background-position:0 0;box-shadow:0 18px 44px -14px rgba(0,0,0,.45);} /* outlined button → wipes to ink */ .btn--ghost{color:var(--ink);border-color:rgba(17,17,17,.38); background-image:linear-gradient(90deg,var(--ink) 0 50%, transparent 50% 100%);} .btn--ghost:hover{color:#fff;border-color:var(--ink);background-position:0 0;} /* text link with animated underline */ .link-underline{ font-family:var(--ui);font-size:13px;font-weight:500;letter-spacing:.12em; text-transform:uppercase;display:inline-flex;align-items:center;gap:.6em; position:relative;padding-bottom:3px; } .link-underline::after{ content:"";position:absolute;left:0;bottom:0;height:1px;width:100%; background:currentColor;transform:scaleX(0);transform-origin:left; transition:transform .4s var(--ease); } .link-underline:hover::after{transform:scaleX(1);} .link-underline .arrow{transition:transform .35s var(--ease);} .link-underline:hover .arrow{transform:translateX(5px);} /* ---------- 5. Header / Nav ---------- */ .site-header{ position:fixed;top:0;left:0;right:0;z-index:60;height:var(--header-h); display:flex;align-items:center; transition:background .4s var(--ease), box-shadow .4s var(--ease), color .4s var(--ease); color:#fff; /* default: over the hero */ } .site-header .wrap{display:flex;align-items:center;justify-content:space-between;width:100%;} .brand{ font-family:var(--ui);font-size:15px;font-weight:600;letter-spacing:.2em; text-transform:uppercase;display:flex;align-items:center;gap:10px;z-index:2; } .brand .dot{width:9px;height:9px;border-radius:50%;background:currentColor;} .nav{display:flex;align-items:center;gap:34px;} .nav a{ font-family:var(--ui);font-size:13px;font-weight:500;letter-spacing:.1em; text-transform:uppercase;position:relative;padding:6px 0;opacity:.92; transition:opacity .25s; } .nav a::after{ content:"";position:absolute;left:0;bottom:0;height:1px;width:100%; background:currentColor;transform:scaleX(0);transform-origin:left; transition:transform .4s var(--ease); } .nav a:hover{opacity:1;} .nav a:hover::after, .nav a.active::after{transform:scaleX(1);} /* solid state once scrolled */ .site-header.scrolled{ background:rgba(255,255,255,.86); -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px); box-shadow:0 1px 0 var(--line); color:var(--ink); } /* hamburger (mobile) */ .nav-toggle{ display:none;flex-direction:column;gap:5px;background:none;border:none; cursor:pointer;padding:10px;z-index:2; } .nav-toggle span{display:block;width:24px;height:1.5px;background:currentColor;transition:transform .3s var(--ease),opacity .2s;} body.nav-open .nav-toggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg);} body.nav-open .nav-toggle span:nth-child(2){opacity:0;} body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);} /* ---------- 6. Reveal-on-scroll ---------- */ .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);} .reveal.in{opacity:1;transform:none;} .reveal[data-delay="1"]{transition-delay:.08s;} .reveal[data-delay="2"]{transition-delay:.16s;} .reveal[data-delay="3"]{transition-delay:.24s;} .reveal[data-delay="4"]{transition-delay:.32s;} /* ---------- 6b. Preloader (landing only) ---------- */ .preloader{position:fixed;inset:0;z-index:300;background:#0e0e0e;color:#fff; display:flex;align-items:center;justify-content:center; opacity:1;transition:opacity .7s var(--ease);} .preloader__inner{display:flex;flex-direction:column;align-items:center;gap:22px;} .preloader__brand{font-family:var(--ui);font-size:13px;font-weight:500;letter-spacing:.42em; text-transform:uppercase;padding-left:.42em;color:rgba(255,255,255,.92); animation:preFade 1s var(--ease) both;} .preloader__bar{width:150px;height:2px;border-radius:2px;background:rgba(255,255,255,.16);overflow:hidden;} .preloader__bar span{display:block;height:100%;width:0;background:#fff;transition:width .35s var(--ease-out);} @keyframes preFade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}} body.loaded .preloader{opacity:0;visibility:hidden;pointer-events:none;} /* choreographed hero entrance once the loader lifts */ .hero h1, .hero__sub, .hero__cta{opacity:0;transform:translateY(24px); transition:opacity 1s var(--ease-out), transform 1s var(--ease-out);} .hero__meta, .scroll-cue{opacity:0;transition:opacity 1s var(--ease-out);} body.loaded .hero h1{opacity:1;transform:none;transition-delay:.25s;} body.loaded .hero__sub{opacity:1;transform:none;transition-delay:.42s;} body.loaded .hero__cta{opacity:1;transform:none;transition-delay:.58s;} body.loaded .hero__meta{opacity:1;transition-delay:.75s;} body.loaded .scroll-cue{opacity:1;transition-delay:.9s;} /* ---------- 7. Hero ---------- */ /* Hero is sticky; the page content below scrolls up and stacks over it. */ .hero{position:sticky;top:0;height:100svh;min-height:600px;width:100%;overflow:hidden;color:#fff;z-index:0;} .page-stack{position:relative;z-index:1;background:var(--bg);} .hero__slides{position:absolute;inset:0;} /* Continuous, gentle zoom on every slide (so toggling .active only changes opacity — no transform reset jump, which was the source of the jitter). */ .hero__slide{ position:absolute;inset:0;opacity:0;z-index:0; background-size:cover;background-position:center; transition:opacity 2.2s var(--ease); /* slower, softer crossfade between images */ animation:heroZoom 14s ease-in-out infinite alternate; /* a bit faster zoom */ will-change:opacity, transform;backface-visibility:hidden; } .hero__slide.active{opacity:1;z-index:1;} @keyframes heroZoom{from{transform:scale(1.0);}to{transform:scale(1.06);}} /* Lighter scrim: image stays clear through the middle; darkening is concentrated at the very top (for the nav) and the bottom-left (under the text). */ .hero__scrim{position:absolute;inset:0;z-index:2; background: linear-gradient(180deg, rgba(0,0,0,.26) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 52%, rgba(0,0,0,.58) 100%), linear-gradient(90deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,0) 46%);} .hero__inner{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;justify-content:flex-end; padding-bottom:clamp(88px,14vh,156px);} .hero h1{font-size:clamp(40px,6.6vw,110px);max-width:15ch;letter-spacing:-.022em;line-height:1.01;text-wrap:balance; text-shadow:0 2px 34px rgba(0,0,0,.42), 0 1px 3px rgba(0,0,0,.4);} .hero__sub{font-size:clamp(16px,1.6vw,22px);max-width:42ch;margin:26px 0 36px;color:rgba(255,255,255,.96); text-shadow:0 1px 18px rgba(0,0,0,.55);} .hero__cta{display:flex;gap:16px;flex-wrap:wrap;align-items:center;} /* slide counter + scroll cue */ .hero__meta{position:absolute;z-index:3;right:var(--gutter);bottom:clamp(88px,14vh,156px); font-family:var(--ui);font-size:12px;letter-spacing:.16em;color:rgba(255,255,255,.85);text-shadow:0 1px 12px rgba(0,0,0,.6);} .scroll-cue{position:absolute;z-index:3;left:50%;bottom:26px;transform:translateX(-50%); font-family:var(--ui);font-size:11px;letter-spacing:.25em;text-transform:uppercase; color:rgba(255,255,255,.85);display:flex;flex-direction:column;align-items:center;gap:10px; text-shadow:0 1px 12px rgba(0,0,0,.6);} .scroll-cue .bar{width:1px;height:46px;background:linear-gradient(rgba(255,255,255,.9),rgba(255,255,255,0)); animation:cue 2.2s var(--ease) infinite;transform-origin:top;} @keyframes cue{0%{transform:scaleY(0);opacity:0;}40%{transform:scaleY(1);opacity:1;}100%{transform:scaleY(1);opacity:0;}} /* ---------- 8. About ---------- */ .about{background:var(--bg-soft);} .about__grid{display:grid;grid-template-columns:0.85fr 1fr;gap:clamp(36px,6vw,90px);align-items:center;} .about__photo{position:relative;} .about__photo img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(100%) contrast(1.03); border-radius:2px;} .about__photo figcaption{font-family:var(--ui);font-size:11px;letter-spacing:.16em;text-transform:uppercase; color:var(--muted);margin-top:14px;} .about__bio{font-size:clamp(19px,1.7vw,26px);line-height:1.5;color:var(--ink);max-width:34ch;} .about__role{font-family:var(--ui);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:18px 0 0;} .about__stats{display:flex;gap:clamp(24px,4vw,56px);margin-top:40px;flex-wrap:wrap;} .about__stats .num{font-family:var(--display);font-size:clamp(30px,3.4vw,46px);line-height:1;} .about__stats .lbl{font-family:var(--ui);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:8px;} /* ---------- 9. Project carousel (marquee) ---------- */ .carousel-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:46px;} .marquee{position:relative;width:100%;overflow:hidden;cursor:grab; padding:clamp(26px,3.4vw,48px) 0; /* breathing room so the hovered card can pop */ touch-action:pan-y;user-select:none;-webkit-user-select:none; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);} .marquee.dragging{cursor:grabbing;} .marquee__track{display:flex;gap:24px;width:max-content;will-change:transform;} .proj-card{position:relative;flex:0 0 auto;width:clamp(260px,26vw,380px);overflow:hidden;border-radius:3px;background:#eee; transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out);transform-origin:center;will-change:transform;} .proj-card:hover{transform:scale(1.07) translateY(-6px);box-shadow:0 26px 40px -22px rgba(0,0,0,.5);z-index:2;} .proj-card__img{width:100%;aspect-ratio:3/4;object-fit:cover;} .proj-card__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.62) 100%);} .proj-card__meta{position:absolute;left:22px;right:22px;bottom:20px;color:#fff; transform:translateY(6px);opacity:.96;transition:transform .5s var(--ease);} .proj-card:hover .proj-card__meta{transform:translateY(0);} .proj-card__name{font-family:var(--display);font-size:clamp(20px,1.6vw,26px);line-height:1.1;} .proj-card__date{font-family:var(--ui);font-size:11px;letter-spacing:.16em;text-transform:uppercase; color:rgba(255,255,255,.82);margin-top:8px;display:flex;align-items:center;gap:10px;} .proj-card__view{font-family:var(--ui);font-size:11px;letter-spacing:.14em;text-transform:uppercase; margin-top:14px;opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease),transform .4s var(--ease); display:inline-flex;gap:8px;align-items:center;} .proj-card:hover .proj-card__view{opacity:1;transform:translateY(0);} /* ---------- 10. Gallery break ---------- */ .gallery-break{text-align:center;} .gallery-break .section-title{max-width:18ch;margin:0 auto;} .gallery-break .lead{max-width:54ch;margin:22px auto 0;} /* ---------- 11. Mini gallery (landing) ---------- */ .mini-gallery{display:flex;gap:14px;align-items:flex-start;} .mg-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:14px;} .mini-gallery .cell{overflow:hidden;border-radius:2px;background:var(--bg-soft);} .mini-gallery .cell img{display:block;width:100%;height:auto;transition:transform 1s var(--ease),filter .5s;} .mini-gallery .cell:hover img{transform:scale(1.04);} /* video tiles: two stacked videos that crossfade for a seamless loop */ .mini-gallery .cell--video{position:relative;} .mini-gallery .cell--video video{pointer-events:none;} .mini-gallery .cell--video .v-base{display:block;width:100%;height:auto;} /* defines the tile height */ .mini-gallery .cell--video .v-over{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;} .mini-gallery + .gallery-cta{text-align:center;margin-top:48px;} /* ---------- 12. Footer ---------- */ .site-footer{background:var(--ink);color:#fff;padding:clamp(70px,11vh,130px) 0 40px;} .footer__top{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:end;} .footer__cta h2{font-size:clamp(32px,4.6vw,68px);letter-spacing:-.02em;max-width:14ch;} .footer__email{display:inline-block;margin-top:26px;font-family:var(--display); font-size:clamp(22px,2.6vw,38px);position:relative;} .footer__email::after{content:"";position:absolute;left:0;bottom:2px;height:1px;width:100%; background:rgba(255,255,255,.5);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);} .footer__email:hover::after{transform:scaleX(1);} .footer__note{color:rgba(255,255,255,.62);max-width:34ch;} .footer__socials{display:flex;flex-wrap:wrap;gap:14px;} .footer__socials a{position:relative;overflow:hidden;font-family:var(--ui);font-size:12px;letter-spacing:.14em;text-transform:uppercase; border:1px solid rgba(255,255,255,.3);padding:13px 22px;border-radius:2px; background-repeat:no-repeat;background-size:220% 100%;background-position:100% 0; background-image:linear-gradient(90deg,#fff 0 50%, transparent 50% 100%); transition:background-position .5s var(--ease), color .3s var(--ease), border-color .3s;} .footer__socials a:hover{color:#111;border-color:#fff;background-position:0 0;} .footer__bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px; margin-top:clamp(50px,8vh,90px);padding-top:26px;border-top:1px solid rgba(255,255,255,.16); font-family:var(--ui);font-size:12px;letter-spacing:.06em;color:rgba(255,255,255,.55);} /* ---------- 13. Sub-page hero (Projects / Gallery) ---------- */ .page-hero{padding:calc(var(--header-h) + clamp(56px,11vh,110px)) 0 clamp(30px,5vh,54px); border-bottom:1px solid var(--line);} .page-hero .kicker{color:var(--muted);margin-bottom:clamp(18px,2.6vw,30px);} .page-hero h1{font-size:clamp(54px,9vw,124px);letter-spacing:-.035em;line-height:.9;} .page-hero .lead{max-width:54ch;margin-top:clamp(22px,3vw,34px);} body.subpage .site-header{color:var(--ink);} /* nav dark by default on inner pages */ body.subpage{padding-top:0;} /* ---------- 14. Projects page grid ---------- */ .projects-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,46px);} .projects-grid .proj-tile{position:relative;overflow:hidden;border-radius:3px;background:var(--bg-soft);} .projects-grid .proj-tile img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1.1s var(--ease);} .projects-grid .proj-tile:hover img{transform:scale(1.045);} .proj-tile__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.6) 100%);} .proj-tile__meta{position:absolute;left:26px;bottom:24px;right:26px;color:#fff;} .proj-tile__meta h3{font-size:clamp(22px,2.2vw,34px);} .proj-tile__meta .date{font-family:var(--ui);font-size:11px;letter-spacing:.16em;text-transform:uppercase; color:rgba(255,255,255,.82);margin-top:10px;} /* ---------- 15. Project detail page ---------- */ .project-hero{position:relative;height:78svh;min-height:480px;overflow:hidden;color:#fff;} .project-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .project-hero .hero__scrim{background:linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,.1) 40%,rgba(0,0,0,.6));} .project-hero__inner{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end; padding-bottom:clamp(46px,8vh,84px);} .project-hero h1{font-size:clamp(40px,6.4vw,92px);letter-spacing:-.02em;} .project-hero .date{font-family:var(--ui);font-size:12px;letter-spacing:.18em;text-transform:uppercase; color:rgba(255,255,255,.85);margin-top:16px;} .project-intro{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(30px,5vw,80px);align-items:start;} .project-intro .lead{font-size:clamp(20px,1.9vw,28px);color:var(--ink);line-height:1.45;} /* Balanced masonry (height-packed flex columns) — every image shows in full, columns stay even. Grid mode shows images in a uniform order. */ .project-gallery--masonry{display:flex;gap:clamp(12px,1.6vw,22px);align-items:flex-start;} .project-gallery--masonry .pg-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:clamp(12px,1.6vw,22px);} .project-gallery--grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,22px);} .project-gallery figure{margin:0;overflow:hidden;border-radius:2px;background:var(--bg-soft);} .project-gallery img{display:block;width:100%;height:auto;cursor:zoom-in;transition:transform 1s var(--ease);} .project-gallery figure:hover img{transform:scale(1.03);} .project-nav{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap; border-top:1px solid var(--line);padding-top:40px;margin-top:20px;} /* ---------- 16. Gallery page ---------- */ .gallery-fullbleed{width:100%;padding:0 clamp(10px,1vw,16px);} /* edge-to-edge */ .gallery-masonry{position:relative;width:100%;} .g-cell{position:absolute;top:0;left:0;overflow:hidden;border-radius:2px;background:var(--bg-soft); will-change:transform;transition:transform .4s var(--ease);} .g-cell img{display:block;width:100%;height:100%;object-fit:cover;cursor:zoom-in;-webkit-user-drag:none;transition:transform .9s var(--ease);} .g-cell:hover img{transform:scale(1.04);} .g-cell.text{display:flex;align-items:center;justify-content:center;text-align:center;background:var(--bg);padding:28px;} .g-cell.text p{margin:0;font-family:var(--display);font-style:italic;font-size:clamp(16px,1.5vw,24px); line-height:1.4;color:var(--ink);max-width:92%;} /* ---------- 17. Lightbox ---------- */ .lightbox{position:fixed;inset:0;z-index:120;background:rgba(255,255,255,.98); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); display:flex;align-items:center;justify-content:center; opacity:0;pointer-events:none;transition:opacity .4s var(--ease);} .lightbox.open{opacity:1;pointer-events:auto;} .lightbox.closing{opacity:0;} .lightbox__stage{margin:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;} .lightbox img{max-width:92vw;max-height:88vh;object-fit:contain;box-shadow:0 30px 90px rgba(0,0,0,.28); border-radius:2px;will-change:transform;backface-visibility:hidden;} .lightbox__close{position:fixed;top:22px;right:24px;width:46px;height:46px;border:none;cursor:pointer; background:rgba(17,17,17,.06);color:#111;border-radius:999px;font-size:22px;z-index:131;transition:background .2s;} .lightbox__close:hover{background:rgba(17,17,17,.14);} /* edge-hover navigation chevrons (peach pills, like the reference) */ .lightbox__nav{position:fixed;width:54px;height:54px;border:none;border-radius:50%;cursor:pointer;z-index:130; background:#ecdcce;color:#1c1c1c;display:flex;align-items:center;justify-content:center;font-size:20px; box-shadow:0 10px 30px rgba(0,0,0,.18); opacity:0;transform:translateY(-50%) scale(.6);pointer-events:none; transition:opacity .3s var(--ease), transform .35s var(--ease-out), background .2s;} .lightbox__nav span{display:block;line-height:1;} .lightbox__nav:hover{background:#e2cbb4;} .lightbox.show-prev .prev{opacity:1;transform:translateY(-50%) scale(1);pointer-events:auto;} .lightbox.show-next .next{opacity:1;transform:translateY(-50%) scale(1);pointer-events:auto;} .lightbox__cap{position:fixed;bottom:22px;left:0;right:0;text-align:center; font-family:var(--ui);font-size:12px;letter-spacing:.08em;color:var(--muted);} /* ---------- 17c. Custom cursor ---------- */ .has-cursor, .has-cursor *{cursor:none !important;} .cursor-dot,.cursor-ring{position:fixed;top:0;left:0;border-radius:50%;pointer-events:none; z-index:9999;mix-blend-mode:difference;opacity:0;transition:opacity .25s ease;} .cursor-dot{width:7px;height:7px;background:#fff;} .cursor-ring{width:34px;height:34px;border:1.5px solid #fff; transition:opacity .25s ease, width .28s var(--ease-out), height .28s var(--ease-out);} .cursor-on .cursor-dot,.cursor-on .cursor-ring{opacity:1;} .cursor-hover .cursor-ring{width:58px;height:58px;} .cursor-hover .cursor-dot{opacity:0;} .cursor-press .cursor-ring{width:26px;height:26px;} /* ---------- 17b. Contact panel + side tab ---------- */ .contact-tab{ position:fixed;top:50%;right:0;transform:translateY(-50%);z-index:95; background:var(--ink);color:#fff;border:none;cursor:pointer; border-radius:8px 0 0 8px;padding:18px 11px;display:flex;flex-direction:column; align-items:center;gap:12px;box-shadow:0 8px 30px rgba(0,0,0,.18); transition:transform .55s var(--ease), background .25s; } .contact-tab:hover{background:#000;} .contact-tab .label{writing-mode:vertical-rl;transform:rotate(180deg); font-family:var(--ui);font-size:12px;letter-spacing:.18em;text-transform:uppercase;} .contact-tab .ico{width:18px;height:18px;display:block;} .contact-tab .ico .x-line{opacity:0;transition:opacity .2s;} .contact-tab .ico .bubble{opacity:1;transition:opacity .2s;} body.contact-open .contact-tab .bubble{opacity:0;} body.contact-open .contact-tab .x-line{opacity:1;} .contact-overlay{position:fixed;inset:0;z-index:96;background:rgba(17,17,17,.45); -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px); opacity:0;pointer-events:none;transition:opacity .45s var(--ease);} body.contact-open .contact-overlay{opacity:1;pointer-events:auto;} .contact-panel{ position:fixed;top:0;right:0;bottom:0;z-index:97;width:min(460px,100vw); background:var(--bg);box-shadow:-20px 0 60px rgba(0,0,0,.22); transform:translateX(100%);transition:transform .55s var(--ease-out); display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain; } body.contact-open .contact-panel{transform:none;} body.contact-open .contact-tab{transform:translateY(-50%) translateX(calc(-1 * min(460px,100vw)));} .contact-panel__inner{padding:clamp(28px,5vw,48px);padding-top:clamp(70px,9vh,90px);} .contact-panel .kicker{margin-bottom:14px;} .contact-panel h2{font-size:clamp(28px,3.4vw,40px);letter-spacing:-.01em;} .contact-panel .intro{color:var(--ink-soft);margin:16px 0 30px;font-size:16px;line-height:1.55;} .cform{display:flex;flex-direction:column;gap:22px;} .cform .row{display:flex;gap:18px;} .cform .row .field{flex:1;} .cform .field{display:flex;flex-direction:column;} .cform label{font-family:var(--ui);font-size:11px;font-weight:500;letter-spacing:.12em; text-transform:uppercase;color:var(--muted);margin-bottom:8px;} .cform input,.cform textarea{ font-family:var(--serif);font-size:17px;color:var(--ink);background:transparent; border:none;border-bottom:1px solid var(--line);padding:8px 0;outline:none; transition:border-color .3s;border-radius:0; } .cform input:focus,.cform textarea:focus{border-color:var(--ink);} .cform textarea{resize:vertical;min-height:84px;} .cform .btn{align-self:flex-start;margin-top:6px;} .cform__status{font-family:var(--ui);font-size:13px;letter-spacing:.04em;min-height:18px;} .cform__status.ok{color:#2c7a3f;} .cform__status.err{color:#b3261e;} .contact-panel__socials{margin-top:34px;padding-top:24px;border-top:1px solid var(--line); display:flex;flex-wrap:wrap;gap:10px;} .contact-panel__socials a{position:relative;overflow:hidden;font-family:var(--ui);font-size:11px;letter-spacing:.14em;text-transform:uppercase; border:1px solid var(--line);padding:11px 16px;border-radius:2px; background-repeat:no-repeat;background-size:220% 100%;background-position:100% 0; background-image:linear-gradient(90deg,var(--ink) 0 50%, transparent 50% 100%); transition:background-position .5s var(--ease), color .3s var(--ease), border-color .3s;} .contact-panel__socials a:hover{color:#fff;border-color:var(--ink);background-position:0 0;} .contact-panel__close{position:absolute;top:18px;right:18px;width:42px;height:42px;border:none; background:rgba(17,17,17,.05);border-radius:999px;font-size:20px;cursor:pointer;transition:background .2s;} .contact-panel__close:hover{background:rgba(17,17,17,.12);} @media (max-width:520px){ .cform .row{flex-direction:column;gap:22px;} } /* ---------- 18. Responsive ---------- */ @media (max-width:1024px){ .footer__top{grid-template-columns:1fr;} .project-intro{grid-template-columns:1fr;} .mini-gallery{columns:2;} } @media (max-width:760px){ body{font-size:17px;} .nav-toggle{display:flex;} .nav{ position:fixed;inset:0;background:var(--bg);color:var(--ink); flex-direction:column;justify-content:center;align-items:center;gap:30px; transform:translateX(100%);transition:transform .5s var(--ease); } body.nav-open .nav{transform:none;} .nav a{font-size:22px;letter-spacing:.04em;font-family:var(--display);text-transform:none;} .site-header.scrolled .nav-toggle, body.nav-open .nav-toggle{color:var(--ink);} body.nav-open .site-header{color:var(--ink);} /* brand + toggle stay visible over the white menu */ /* While the menu is open, drop the header's backdrop-filter/background so the full-screen nav anchors to the viewport (backdrop-filter on an ancestor otherwise traps fixed children inside the 64px header). */ body.nav-open .site-header{background:transparent;box-shadow:none; -webkit-backdrop-filter:none;backdrop-filter:none;} body.nav-open .contact-tab{opacity:0;pointer-events:none;} /* hide the side tab behind the menu */ .about__grid{grid-template-columns:1fr;gap:32px;} .about__photo img{aspect-ratio:4/4;} .projects-grid{grid-template-columns:1fr;} .project-gallery--grid{grid-template-columns:repeat(2,1fr);} .footer__bottom{flex-direction:column;gap:8px;} } @media (max-width:480px){ .project-gallery--grid{grid-template-columns:1fr;} } /* ---------- 19. Reduced motion ---------- */ @media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important;scroll-behavior:auto !important;} .reveal{opacity:1;transform:none;} }