/* ============================================================ Katia Shabanova — museum-minimal portfolio Material sensibility: paper, water, ink, silence, space. ============================================================ */ /* ---- Typography (loaded in ): Cormorant Garamond (display serif), system sans for quiet metadata. ---- */ :root{ --paper: #f4f1ea; /* warm paper white */ --paper-deep: #eeeae1; --ink: #1b1a17; /* near-black ink */ --ink-soft: #4a4740; --meta: #8c877c; /* muted grey for metadata */ --line: #d9d4c8; /* hairline */ --hover: #000; --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif; --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --edge: 4.5vw; /* generous outer margin */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --slow: 1.1s; } *{ box-sizing:border-box; } html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.6; opacity:0; animation:pageIn 1.2s var(--ease) forwards; } @keyframes pageIn{ from{opacity:0} to{opacity:1} } img{ display:block; max-width:100%; height:auto; } a{ color:inherit; text-decoration:none; } ::selection{ background:#dfe6e6; } /* ---------- Metadata / labels (quiet sans, tracked caps) ---------- */ .meta{ font-family:var(--sans); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--meta); font-weight:400; } /* ============================================================ SITE HEADER — discreet, always the same, gets out of the way ============================================================ */ .site-header{ position:fixed; top:0; left:0; right:0; z-index:50; display:flex; justify-content:space-between; align-items:center; padding:18px var(--edge); pointer-events:none; background:rgba(244,241,234,0.72); -webkit-backdrop-filter:blur(11px) saturate(1.04); backdrop-filter:blur(11px) saturate(1.04); border-bottom:1px solid rgba(30,28,24,0.07); } /* on the dark hero: a soft translucent veil so the white text stays legible */ .home .site-header{ background:linear-gradient(to bottom, rgba(14,13,12,0.42), rgba(14,13,12,0.06)); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); border-bottom:0; } .site-header a{ pointer-events:auto; } .wordmark{ font-family:var(--serif); font-weight:500; font-size:19px; letter-spacing:0.02em; line-height:1.2; color:var(--ink); } .wordmark small{ display:block; font-family:var(--sans); font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--meta); margin-top:5px; font-weight:400; } /* on the dark hero the wordmark stays legible */ .home .wordmark, .home .nav-toggle{ color:#fff; } .home .wordmark small{ color:rgba(255,255,255,0.72); } /* ---------- Navigation ---------- */ .nav{ text-align:right; } .nav ul{ list-style:none; margin:0; padding:0; display:flex; gap:26px; } .nav a{ font-family:var(--sans); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft); padding-bottom:2px; position:relative; transition:color .5s var(--ease); } .home .nav a{ color:rgba(255,255,255,0.85); } .nav a::after{ content:""; position:absolute; left:0; bottom:-2px; width:100%; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); } .nav a:hover::after, .nav a.active::after{ transform:scaleX(1); } .nav a:hover{ color:var(--hover); } .home .nav a:hover{ color:#fff; } .nav-toggle{ display:none; pointer-events:auto; background:none; border:0; cursor:pointer; font-family:var(--sans); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft); } /* ============================================================ HOME — one artwork, almost full screen. No hero copy. ============================================================ */ .home, .home body{ background:#0e0d0c; } .hero{ position:relative; width:100%; height:100vh; height:100svh; overflow:hidden; background:#0e0d0c; } .hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 42%; opacity:0; transform:scale(1.04); animation:heroIn 2.4s var(--ease) forwards; } @keyframes heroIn{ to{ opacity:1; transform:scale(1); } } .hero-caption{ position:absolute; left:var(--edge); bottom:calc(var(--edge) * 0.7); color:rgba(255,255,255,0.9); z-index:5; opacity:0; animation:fadeUp 1.4s var(--ease) 1.4s forwards; } .hero-caption .t{ font-family:var(--serif); font-size:clamp(17px,2vw,22px); font-style:italic; } .hero-caption .m{ color:rgba(255,255,255,0.62); margin-top:4px; } .hero-enter{ position:absolute; right:var(--edge); bottom:calc(var(--edge) * 0.7); z-index:5; color:rgba(255,255,255,0.8); opacity:0; animation:fadeUp 1.4s var(--ease) 1.7s forwards; } @keyframes fadeUp{ from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:translateY(0)} } /* ============================================================ PAGE SCAFFOLD (interior pages) ============================================================ */ main{ padding-top:0; } .page{ padding:calc(var(--edge) * 2.6) var(--edge) calc(var(--edge) * 1.4); max-width:1500px; margin:0 auto; } .page-lead{ max-width:640px; margin:0 0 calc(var(--edge) * 1.4); } .page-title{ font-family:var(--serif); font-weight:500; font-size:clamp(30px, 4vw, 46px); letter-spacing:0.01em; line-height:1.1; margin:0 0 22px; } .page-lead p{ font-family:var(--serif); font-size:clamp(18px,1.5vw,21px); line-height:1.55; color:var(--ink-soft); margin:0; } /* ============================================================ SELECTED WORKS — rhythmic single-column gallery Alternating scale + generous breathing room. ============================================================ */ /* two-column layout: side filter + grid */ .works-layout{ display:grid; grid-template-columns:170px 1fr; gap:calc(var(--edge) * 1.15); align-items:start; } .works-sidebar{ position:sticky; top:calc(var(--edge) * 2.6); } .filter{ display:flex; flex-direction:column; gap:15px; } .filter-btn{ background:none; border:0; cursor:pointer; text-align:left; padding:0; font-family:var(--sans); font-size:12px; letter-spacing:0.04em; color:var(--meta); transition:color .45s var(--ease); } .filter-btn:hover{ color:var(--ink-soft); } .filter-btn.active{ color:var(--ink); } /* masonry grid (row-span computed in JS) */ /* flex flow keeps strict source order: big works full-width, small works pair two-per-row, and a pair never crosses a series boundary. */ .works-grid{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:52px 2.2vw; } .gwork{ opacity:0; transform:translateY(22px); transition:opacity 1.2s var(--ease), transform 1.2s var(--ease); } .gwork.in{ opacity:1; transform:none; } .gwork.hidden{ display:none; } .gwork figure{ margin:0; } .g-big{ flex:0 0 100%; max-width:100%; } .g-mid, .g-small{ flex:0 0 calc(50% - 1.1vw); max-width:calc(50% - 1.1vw); } .frame{ cursor:zoom-in; overflow:hidden; text-align:center; } /* never let a work exceed the viewport — cap height, keep aspect, centre */ .frame img{ display:block; margin:0 auto; width:auto; max-width:100%; max-height:80vh; transition:transform 1.6s var(--ease); } .frame:hover img{ transform:scale(1.014); } .caption{ margin-top:15px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:3px; } .caption .title{ font-family:var(--serif); font-size:19px; font-style:italic; letter-spacing:0.01em; color:var(--ink); line-height:1.25; } .caption .year{ font-family:var(--sans); font-style:normal; font-size:12px; letter-spacing:0.02em; color:var(--meta); font-variant-numeric:lining-nums tabular-nums; } .caption .spec{ font-family:var(--sans); font-size:12px; letter-spacing:0.01em; color:var(--meta); line-height:1.5; margin-top:2px; font-variant-numeric:lining-nums tabular-nums; } .caption .note{ max-width:560px; margin:12px auto 0; text-align:left; font-family:var(--serif); font-size:16px; line-height:1.6; color:var(--ink-soft); } .caption .note span{ display:block; } .caption .note span + span{ margin-top:0.7em; } /* ============================================================ VIDEO PERFORMANCES ============================================================ */ .perf{ display:flex; flex-direction:column; gap:calc(var(--edge) * 2.4); } .perf-item{ opacity:0; transform:translateY(26px); transition:opacity 1.3s var(--ease), transform 1.3s var(--ease); } .perf-item.in{ opacity:1; transform:none; } .video-wrap{ position:relative; width:100%; aspect-ratio:16/9; background:#0e0d0c; overflow:hidden; cursor:pointer; } .video-wrap img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.8s var(--ease), opacity .8s var(--ease); } .video-wrap:hover img{ transform:scale(1.02); } .video-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; } .play{ position:absolute; inset:0; margin:auto; width:82px; height:82px; border-radius:50%; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.85); cursor:pointer; display:flex; align-items:center; justify-content:center; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); transition:background .5s var(--ease), transform .5s var(--ease); pointer-events:none; } .play svg{ fill:rgba(255,255,255,0.95); margin-left:4px; } .video-wrap:hover .play{ background:rgba(255,255,255,0.2); transform:scale(1.04); } .perf-item .caption{ margin-top:22px; } .perf-item .credit{ width:100%; color:var(--meta); margin-top:2px; font-size:13px; } /* film-still strip beneath each performance */ .stills{ margin-top:26px; display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; } .still{ padding:0; border:0; cursor:zoom-in; background:#0e0d0c; overflow:hidden; aspect-ratio:16/9; } .still img{ width:100%; height:100%; object-fit:cover; opacity:0.92; transition:opacity .5s var(--ease), transform 1.4s var(--ease); } .still:hover img{ opacity:1; transform:scale(1.04); } .stills-lb img{ max-height:80vh; } /* ============================================================ TEXT PAGES — About, CV, Contact ============================================================ */ .prose{ max-width:660px; } .prose p{ font-family:var(--serif); font-size:clamp(17px,1.35vw,20px); line-height:1.72; color:var(--ink-soft); margin:0 0 1.35em; } .prose p:first-of-type{ color:var(--ink); } .about-layout{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:calc(var(--edge) * 1.3); align-items:start; } .about-portrait img{ width:100%; } .about-portrait .meta{ margin-top:14px; } /* Artist statement — clearly separated first-person voice */ .statement{ margin-top:calc(var(--edge) * 1.6); padding-top:calc(var(--edge) * 0.9); border-top:1px solid var(--line); } .statement-title{ font-family:var(--sans); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--meta); font-weight:400; margin:0 0 26px; } .statement-body{ max-width:700px; } .statement-body p:first-of-type{ font-family:var(--serif); font-style:italic; font-size:clamp(20px,1.7vw,25px); line-height:1.5; color:var(--ink); } /* CV */ .cv{ max-width:760px; } .cv-section{ display:grid; grid-template-columns:180px 1fr; gap:12px 40px; padding:26px 0; border-top:1px solid var(--line); } .cv-section:last-child{ border-bottom:1px solid var(--line); } .cv-section h2{ margin:0; font-family:var(--sans); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--meta); font-weight:400; padding-top:4px; } .cv-list{ margin:0; } .cv-row{ display:flex; gap:20px; padding:5px 0; } .cv-row .yr{ flex:0 0 88px; color:var(--meta); font-variant-numeric:tabular-nums; } .cv-row .desc{ font-family:var(--serif); font-size:18px; color:var(--ink-soft); } /* Contact */ /* unified, aligned contact list — every value in the same quiet type */ .contact-list{ max-width:660px; } .c-row{ display:grid; grid-template-columns:250px 1fr; gap:24px; align-items:baseline; padding:17px 0; border-top:1px solid var(--line); } .c-row:last-child{ border-bottom:1px solid var(--line); } .c-label{ padding-top:1px; } .c-val{ font-family:var(--sans); font-size:17px; font-weight:400; letter-spacing:0.01em; color:var(--ink); font-variant-numeric:lining-nums tabular-nums; } a.c-val{ transition:color .4s var(--ease); } a.c-val:hover{ color:#5a6a68; } /* ============================================================ FOOTER ============================================================ */ .site-footer{ padding:calc(var(--edge) * 1.2) var(--edge); margin-top:calc(var(--edge) * 1.6); border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; } .site-footer .meta a{ transition:color .4s var(--ease); } .site-footer .meta a:hover{ color:var(--ink); } /* ============================================================ LIGHTBOX ============================================================ */ .lightbox{ position:fixed; inset:0; z-index:100; background:rgba(14,13,12,0.96); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .7s var(--ease); padding:5vh 6vw; } .lightbox.open{ opacity:1; pointer-events:auto; } .lightbox figure{ margin:0; max-width:100%; max-height:100%; text-align:center; } .lightbox img{ max-width:100%; max-height:82vh; width:auto; margin:0 auto; box-shadow:0 30px 80px rgba(0,0,0,0.5); opacity:0; transform:scale(.985); transition:opacity .8s var(--ease), transform .8s var(--ease); } .lightbox.open img{ opacity:1; transform:none; } .lightbox figcaption{ margin-top:22px; color:rgba(255,255,255,0.85); font-family:var(--serif); font-style:italic; font-size:18px; } .lightbox figcaption .m{ display:block; font-family:var(--sans); font-style:normal; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.5); margin-top:8px; } .lightbox .lb-close{ position:absolute; top:26px; right:34px; z-index:6; width:48px; height:48px; background:none; border:0; cursor:pointer; color:rgba(255,255,255,0.8); font-size:30px; line-height:1; font-family:var(--sans); transition:color .4s var(--ease); } .lightbox .lb-close:hover{ color:#fff; } .lb-nav{ position:absolute; top:88px; bottom:0; width:16%; z-index:4; background:none; border:0; cursor:pointer; color:rgba(255,255,255,0.55); font-size:34px; font-family:var(--serif); transition:color .4s var(--ease); } .lb-nav:hover{ color:#fff; } .lb-prev{ left:0; } .lb-next{ right:0; } /* ============================================================ RESPONSIVE — mobile is redesigned, not compressed. Single immersive column, edge-to-edge images, larger tap targets. ============================================================ */ @media (max-width: 1100px) and (min-width: 821px){ .works-layout{ grid-template-columns:140px 1fr; } .g-mid{ grid-column:span 12; } .g-small{ grid-column:span 6; } } @media (max-width: 820px){ :root{ --edge:6.5vw; } .site-header{ padding:20px var(--edge); align-items:center; } .nav{ display:none; } .nav.open{ display:block; position:fixed; inset:0; z-index:60; background:var(--paper); padding:26vh var(--edge) 0; } .home .nav.open{ background:var(--paper); } .nav.open ul{ flex-direction:column; gap:34px; align-items:flex-start; } .nav.open a{ font-size:15px; color:var(--ink-soft); } .home .nav.open a{ color:var(--ink-soft); } .nav-toggle{ display:block; } .page{ padding:32vw var(--edge) 16vw; } /* filter becomes a horizontal row above the works */ .works-layout{ grid-template-columns:1fr; gap:9vw; } .works-sidebar{ position:static; } .filter{ flex-direction:row; flex-wrap:nowrap; gap:22px; overflow-x:auto; padding-bottom:6px; -webkit-overflow-scrolling:touch; } .filter-btn{ white-space:nowrap; font-size:13px; } /* every work full-width and immersive on phone */ .works-grid{ display:block; } .gwork{ display:block; margin-bottom:18vw; } .gwork figure{ margin:0; } .caption .title{ font-size:20px; } .caption .spec, .caption .year{ font-size:13px; } .caption .note{ font-size:17px; } .frame img{ max-height:78vh; } /* contact list stacks label over value on phone */ .c-row{ grid-template-columns:1fr; gap:5px; padding:16px 0; } .c-val{ font-size:18px; } .about-layout{ grid-template-columns:1fr; gap:9vw; } .about-portrait{ order:-1; } .cv-section{ grid-template-columns:1fr; gap:10px; padding:22px 0; } .cv-row{ gap:14px; } .cv-row .yr{ flex-basis:66px; } .perf{ gap:22vw; } .lb-nav{ font-size:26px; width:20%; } .lightbox img{ max-height:70vh; } } @media (max-width: 820px){ /* keep the mobile nav toggle dark once menu is open over paper */ .home .nav.open ~ .nav-toggle, .nav.open + .nav-toggle{ color:var(--ink); } } @media (prefers-reduced-motion: reduce){ *{ animation-duration:.001s !important; transition-duration:.001s !important; } body{ opacity:1; } .hero img{ transform:none; } }