/* ============================================================ STEPPED TYPE & LOGO SCALE >=2560 : font 36.25 logo 474px (extended step) 1920 - 2559 : font 29 logo 379px 1575 - 1919 : font 23 logo 300px | 3-col galleries/albums 1326 - 1574 : font 23 logo 300px | 2-col galleries/albums 1173 - 1325 : font 20.28 logo 265x36 940 - 1172 : font 18.25 logo 239x33 | 1-col at <=1068 700 - 939 : font 15.54 logo 200 | hamburger, 2 cols 360 - 699 : font 12 logo 200 | mobile (min 360), 1 col ============================================================ */ :root{ --fs:23px; --logow:268px; } @media (min-width:1920px){ :root{ --fs:29px; --logow:349px; } } @media (min-width:2560px){ :root{ --fs:36.25px; --logow:437px; } } @media (max-width:1325px){ :root{ --fs:20.28px; --logow:244px; } } @media (max-width:1172px){ :root{ --fs:18.25px; --logow:220px; } } @media (max-width:939px) { :root{ --fs:15.54px; --logow:200px; } } @media (max-width:699px) { :root{ --fs:12px; --logow:200px; } } * { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; } /* no blue tap flash on Android */ html, body { background:#fff; font-family:'Inter',-apple-system,sans-serif; color:#111; } /* keep the scrollbar gutter reserved on every page, so the sidebar/logo sits in exactly the same spot whether the page scrolls (home) or not (contact) */ html{ scrollbar-gutter:stable; } /* while a full-screen overlay is open: lock scroll AND drop the gutter, so the overlay reaches the true right edge (no white strip) */ html.lock{ overflow:hidden; scrollbar-gutter:auto; } img { display:block; } button{ background:none; border:none; padding:0; cursor:pointer; } /* ---------- Sidebar (>=940) ---------- Logo is horizontally CENTERED in the bar (so its side padding scales proportionally). Bar keeps at least 4px side padding. Nav aligns with the logo's left edge. */ .sidebar{ position:fixed; top:0; left:0; width:30.1%; height:100vh; padding:205px 4px 0; } @media (max-width:1325px){ .sidebar{ padding-top:165px; } } .side-inner{ width:min(var(--logow), 100%); margin:0 auto; transform:translateX(-3mm); } .logo{ width:var(--logow); max-width:100%; cursor:pointer; user-select:none; } .logo img{ width:100%; height:auto; } .nav{ margin-top:calc(var(--fs) * 3.9); list-style:none; } .nav li{ font-size:var(--fs); font-weight:700; letter-spacing:normal; line-height:1.37; color:#000; cursor:pointer; text-transform:uppercase; width:max-content; } /* ---------- Mobile header (<=939), NOT sticky ---------- */ .mheader{ display:none; position:static; background:#fff; align-items:center; justify-content:space-between; padding:48px 28px 0; } .mheader .logo{ width:var(--logow); flex:0 0 auto; } .burger, .mo-close{ width:30px; height:30px; display:flex; align-items:center; justify-content:center; } /* Morphing hamburger <-> close icon (shared by .burger and .mo-close). Lines: 14.2px wide, 1.6px thick, centers 6.4px apart. */ .nav-icon{ position:relative; width:20px; height:20px; display:block; } .nav-icon span{ position:absolute; left:2.9px; right:2.9px; height:1.6px; background:#111; border-radius:0.8px; transition:transform .32s cubic-bezier(.4,0,.2,1), opacity .2s ease; } /* integer tops (same 6px spacing) so all three lines anti-alias identically */ .nav-icon span:nth-child(1){ top:3px; } .nav-icon span:nth-child(2){ top:9px; } .nav-icon span:nth-child(3){ top:15px; } .nav-icon.open span:nth-child(1){ transform:translateY(6px) rotate(45deg) scaleX(1.27); } .nav-icon.open span:nth-child(2){ opacity:0; } .nav-icon.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg) scaleX(1.27); } /* Fullscreen menu overlay */ .menu-overlay{ position:fixed; inset:0; background:#fff; z-index:200; display:none; flex-direction:column; } .menu-overlay.open{ display:flex; } .menu-overlay .mo-head{ display:flex; align-items:center; justify-content:space-between; padding:48px 28px 0; } .menu-overlay .mo-head .logo{ width:var(--logow); flex:0 0 auto; } /* menu items: block centered at 2/3 of the screen height */ /* floor of 338px = header bottom (75px) + 180px gap + half the nav block (83px), so the titles stop moving 180px below the logo on short screens */ .mo-nav{ position:absolute; top:max(calc(33.33% + 20px), 338px); left:0; right:0; transform:translateY(-50%); display:flex; flex-direction:column; align-items:center; gap:40px; list-style:none; } .mo-nav li{ font-size:24px; font-weight:700; letter-spacing:normal; text-transform:uppercase; color:#000; cursor:pointer; } /* all black */ /* ---------- Content ---------- */ .content{ margin-left:30.1%; padding:35px 2vw 80px 0; min-height:100vh; } /* album/gallery pages (with a page title) sit slightly higher than the home covers grid */ @media (min-width:940px){ .content.tight{ padding-top:22px; } } .albums{ display:grid; grid-template-columns:1fr 1fr; column-gap:2vw; row-gap:22px; } /* home grid follows the gallery column steps: 3 cols >=1575, 4 cols >=2560 */ @media (min-width:1575px){ .albums{ grid-template-columns:repeat(3, 1fr); } } @media (min-width:2560px){ .albums{ grid-template-columns:repeat(4, 1fr); } } .album-card{ cursor:pointer; min-width:0; } .album-cover{ display:flex; gap:8px; aspect-ratio:3/2; overflow:hidden; } /* big screens: album covers grid gains columns (same breakpoints as type scale) */ @media (min-width:1920px){ .albums{ grid-template-columns:repeat(3, 1fr); } } @media (min-width:2560px){ .albums{ grid-template-columns:repeat(4, 1fr); } } .album-cover img{ height:100%; object-fit:cover; flex:1 1 0; min-width:0; } .album-title{ margin-top:calc(var(--fs) * 0.2); font-size:max(14px, calc(var(--fs) * 0.783)); font-weight:700; text-transform:uppercase; letter-spacing:normal; color:#1a1a1a; } .page-title{ font-size:max(14px, calc(var(--fs) * 0.783)); font-weight:700; text-transform:uppercase; letter-spacing:normal; color:#1a1a1a; margin-bottom:max(12px, calc(var(--fs) * 0.53)); } .masonry{ display:flex; gap:1.53vw; align-items:flex-start; } .masonry .col{ flex:1; display:flex; flex-direction:column; gap:1.53vw; min-width:0; } .masonry .col img{ width:100%; height:auto; cursor:pointer; } .contact-wrap{ display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding-top:38vh; text-align:center; } .contact-wrap h1{ font-size:max(18px, calc(var(--fs) * 1.35)); font-weight:700; letter-spacing:normal; margin-bottom:calc(var(--fs) * 1.08); } .contact-wrap p{ font-size:max(14px, calc(var(--fs) * 0.826)); font-weight:400; line-height:1.55; color:#111; } @media (max-width:1068px){ .albums{ grid-template-columns:1fr; row-gap:4.2vw; } } @media (max-width:939px){ .sidebar{ display:none; } .mheader{ display:flex; padding:48px 43px 0; } .menu-overlay .mo-head{ padding:48px 43px 0; } .content{ margin-left:0; padding:64px 43px 60px; } .albums{ grid-template-columns:1fr 1fr; column-gap:12px; row-gap:22px; } .album-cover{ gap:5px; } .masonry{ gap:20px; } .masonry .col{ gap:20px; } .contact-wrap{ padding-top:20vh; } } @media (max-width:699px){ .mheader{ padding:48px 24px 0; } .menu-overlay .mo-head{ padding:48px 24px 0; } .content{ padding:72px 28px 60px; } .albums{ grid-template-columns:1fr; row-gap:20px; } } /* ---------- Lightbox ---------- */ .lightbox{ position:fixed; inset:0; background:#fff; z-index:300; display:none; flex-direction:column; } .lightbox.open{ display:flex; } .lb-close{ position:absolute; top:10px; right:14px; width:30px; height:30px; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:310; } .lb-stage{ flex:1 1 auto; display:flex; align-items:center; justify-content:center; padding:0 90px; position:relative; min-height:0; } .lb-stage img{ max-height:100%; max-width:100%; width:auto; height:auto; object-fit:contain; } .lb-arrow{ position:absolute; top:0; height:100%; cursor:pointer; width:90px; display:flex; align-items:center; z-index:305; } .lb-arrow.prev{ left:0; justify-content:flex-start; padding-left:21px; } .lb-arrow.next{ right:0; justify-content:flex-end; padding-right:21px; } .lb-arrow:hover path, .lb-close:hover path, .strip-arrow:hover path{ stroke:#000; } .lb-strip-zone{ flex:0 0 auto; height:170px; margin-top:0px; display:flex; align-items:center; position:relative; padding:0 48px; } .lb-strip{ display:flex; gap:0; overflow-x:auto; scroll-behavior:smooth; width:100%; justify-content:safe center; align-items:center; scrollbar-width:none; -ms-overflow-style:none; padding:0; } .lb-strip::-webkit-scrollbar{ display:none; } .lb-strip img{ height:142px; width:auto; flex:0 0 auto; cursor:pointer; margin:10px 9px 18px 9px; /* per-picture padding: 10 / 9 / 18 / 9 */ opacity:.63; transition:opacity 0.8s ease; } .lb-strip img.active{ opacity:1; } .lb-strip img:hover{ opacity:1; } .strip-arrow{ position:absolute; top:50%; transform:translateY(-50%); cursor:pointer; width:26px; height:26px; display:flex; align-items:center; justify-content:center; z-index:306; } .strip-arrow.left{ left:2px; } .strip-arrow.right{ right:2px; } /* Phone/tablet lightbox: arrows are INVISIBLE but stay in place and stay tappable (opacity:0, not display:none). Strip zone stays; thumbs bleed to the screen edges like the live site. Swipe also works. */ @media (max-width:939px){ .lb-stage{ padding:0; } .lb-arrow{ width:20vw; } .lb-arrow.prev{ padding-left:10px; } .lb-arrow.next{ padding-right:10px; } .lb-arrow, .strip-arrow{ opacity:0; } .lb-strip-zone{ height:170px; padding:0; } } /* ---------- multi-page additions ---------- */ a{ color:inherit; text-decoration:none; } .logo{ display:block; } .album-card{ display:block; }