/* ========================================================================= PHOTOGRAPHY SITE — shared stylesheet (cinematic dark theme) One file used by every page in both /hu/ and /en/. Design goal: premium, cinematic, photo-first. Near-black canvas, fine film grain, generous space, subtle slow motion. Each PAGE carries its own accent colour, chosen with one attribute on (e.g. ). Built mobile-first; @media blocks near the bottom add larger-screen polish. ========================================================================= */ /* ------------------------------------------------------------------------- 1. SELF-HOSTED FONTS (load from your own /assets/fonts/, never from Google) Headings use Fraunces. Body/UI uses Inter. Both include a "latin-ext" file so Hungarian accents (ő, ű…) render. Syne is also loaded so you can switch the heading font in ONE place — see --display in the tokens below. ------------------------------------------------------------------------- */ @font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/inter-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/inter-latin-ext-400-normal.woff2") format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/inter-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/inter-latin-ext-600-normal.woff2") format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:"Fraunces";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/fraunces-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:"Fraunces";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/fraunces-latin-ext-600-normal.woff2") format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:"Syne";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/syne-latin-700-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:"Syne";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/syne-latin-ext-700-normal.woff2") format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} /* Unbounded — the logo/brand wordmark font */ @font-face{font-family:"Unbounded";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/unbounded-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122;} @font-face{font-family:"Unbounded";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/unbounded-latin-ext-600-normal.woff2") format("woff2");unicode-range:U+0100-02AF,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF;} /* Extra heading fonts you can switch to from the admin's Design tab. */ @font-face{font-family:"Big Shoulders";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/big-shoulders-display-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122;} @font-face{font-family:"Big Shoulders";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/big-shoulders-display-latin-ext-600-normal.woff2") format("woff2");unicode-range:U+0100-02AF,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/bodoni-moda-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122;} @font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/bodoni-moda-latin-ext-600-normal.woff2") format("woff2");unicode-range:U+0100-02AF,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF;} /* ------------------------------------------------------------------------- 2. DESIGN TOKENS — change a value here once, it updates everywhere. ------------------------------------------------------------------------- */ :root{ --bg:#0d0d0f; /* near-black page background */ --panel:#151519; /* slightly lifted panels/cards */ --ink:#f2efe9; /* main (light) text on the dark bg */ --muted:#a3a099; /* quieter text */ --faint:#6f6d68; /* faintest text (meta, captions) */ --line:rgba(255,255,255,0.12); /* hairline borders */ --line-strong:rgba(255,255,255,0.22); /* form borders */ --field-bg:#151519; /* form field fill */ --error:#ff6b6b; /* error red (readable on dark) */ /* HEADING FONT — to switch to Syne, change "Fraunces" to "Syne" here only. */ --display:"Fraunces", Georgia, "Times New Roman", serif; --display-weight:600; --sans:"Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; /* Default accent (Home = gold). Pages override via [data-accent] below. */ --accent:#c99a4a; --accent-dark:#b0832f; --accent-soft:rgba(201,154,74,0.15); --accent-ink:#14120c; --wrap:1180px; --tap:44px; /* minimum tap-target size */ --header-h:5rem; /* space the fixed header needs on inner pages */ /* Tells the browser this is a dark page, so it draws its OWN controls to match — dropdown lists, the date picker's calendar, scrollbars. Without this they come out light-on-light or dark-on-dark. */ color-scheme: dark; } html.light{ color-scheme: light; } /* Per-page accent palettes. Put e.g. on the page. --accent-ink = the text colour that sits ON the accent (kept high-contrast). */ body[data-accent="gold"] { --accent:#c99a4a; --accent-dark:#b0832f; --accent-soft:rgba(201,154,74,0.15); --accent-ink:#14120c; } body[data-accent="bordeaux"]{ --accent:#ad2f37; --accent-dark:#8c242c; --accent-soft:rgba(173,47,55,0.16); --accent-ink:#ffffff; } body[data-accent="emerald"] { --accent:#2fa079; --accent-dark:#227a5c; --accent-soft:rgba(47,160,121,0.16); --accent-ink:#08130f; } body[data-accent="indigo"] { --accent:#7d80cf; --accent-dark:#5f62b0; --accent-soft:rgba(125,128,207,0.18); --accent-ink:#0b0c16; } /* ------------------------------------------------------------------------- 3. RESET & BASE ------------------------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--header-h);} body{ margin:0;background:var(--bg);color:var(--ink); font-family:var(--sans);font-size:16px;line-height:1.65;font-weight:400; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; display:flex;flex-direction:column;min-height:100vh;overflow-x:hidden; } /* Fine film-grain overlay — an inline SVG (no external file). Sits above the page but ignores clicks. Gives the whole site a subtle cinematic texture. */ body::after{ content:"";position:fixed;inset:0;z-index:60;pointer-events:none; opacity:0.42;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } img,svg{max-width:100%;height:auto;display:block;} a{color:inherit;} h1,h2,h3{font-family:var(--display);font-weight:var(--display-weight);line-height:1.08;letter-spacing:-0.015em;margin:0 0 0.5em;} p{margin:0 0 1em;} .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:1.5rem;} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;} /* Reveal-on-scroll: elements start faded/lowered, then ease in (via motion.js). If JS is off or the visitor prefers reduced motion, everything shows normally. */ /* Visible by default so the page is never blank without JavaScript. The tiny inline script in each page's adds the "js" class, which arms the animation; motion.js then reveals each element as it scrolls into view. */ .reveal{opacity:1;transform:none;} html.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);} html.js .reveal.in{opacity:1;transform:none;} /* ------------------------------------------------------------------------- 4. TOP PROGRESS BAR + FIXED HEADER (with language switcher) ------------------------------------------------------------------------- */ .progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--accent);z-index:50;transition:width .1s linear;} .site-header{ position:fixed;top:0;left:0;right:0;z-index:40; padding-block:1.4rem;border-bottom:1px solid transparent; transition:padding .35s ease,background .35s ease,border-color .35s ease; } .site-header.scrolled{ padding-block:0.6rem;border-bottom-color:var(--line); background:color-mix(in srgb, var(--bg) 80%, transparent); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); } .header-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;} /* Brand = the "szoboszlai / tamás" slash wordmark (Option 3). */ .brand{ font-family:"Unbounded", var(--sans);font-weight:600; font-size:1.05rem;letter-spacing:-0.02em;text-transform:lowercase; text-decoration:none;color:var(--ink); display:inline-flex;align-items:center;min-height:var(--tap);white-space:nowrap; } .brand span{display:inline-block;} .brand .bs{color:var(--accent);margin:0 0.12em;} /* assemble on load (once); skipped in Lite mode */ html:not(.lite) .brand .b1{animation:brandL .7s cubic-bezier(.2,.8,.2,1) both;} html:not(.lite) .brand .bs{animation:brandS .7s cubic-bezier(.2,.8,.2,1) both;} html:not(.lite) .brand .b2{animation:brandR .7s cubic-bezier(.2,.8,.2,1) both;} @keyframes brandL{from{opacity:0;transform:translateX(-14px);}to{opacity:1;transform:none;}} @keyframes brandR{from{opacity:0;transform:translateX(14px);}to{opacity:1;transform:none;}} @keyframes brandS{from{opacity:0;transform:rotate(-120deg) scale(.4);}to{opacity:1;transform:none;}} @media (min-width:768px){ .brand{font-size:1.2rem;} } .site-nav{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:0.1rem 0.4rem;} .site-nav a{ display:inline-flex;align-items:center;min-height:var(--tap);padding:0 0.7rem; text-decoration:none;color:var(--muted);font-size:0.78rem;letter-spacing:0.12em;text-transform:uppercase; position:relative;transition:color .2s ease; } .site-nav a:hover{color:var(--ink);} .site-nav a.is-current{color:var(--ink);} .site-nav a.is-current::after{content:"";position:absolute;left:0.7rem;right:0.7rem;bottom:0.55rem;height:1px;background:var(--accent);} .nav-sep{color:var(--line-strong);user-select:none;} /* ---- Mobile menu button (hidden on desktop, see the media query below) ---- */ .nav-toggle{display:none;align-items:center;justify-content:center;gap:4px;flex-direction:column; width:var(--tap);height:var(--tap);background:transparent;border:1px solid var(--line); border-radius:8px;cursor:pointer;padding:0;} .nav-toggle span{display:block;width:18px;height:1.5px;background:var(--ink);border-radius:2px; transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .2s;} .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg);} .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;} .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);} .lang-switch{display:inline-flex;align-items:center;} .lang-switch a,.lang-switch span{ display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);min-width:var(--tap); padding:0 0.4rem;font-size:0.8rem;letter-spacing:0.08em;text-decoration:none;color:var(--muted); } .lang-switch a:hover{color:var(--ink);} .lang-switch .is-active{color:var(--accent);font-weight:600;} /* ------------------------------------------------------------------------- 5. MAIN / FOOTER SHELL ------------------------------------------------------------------------- */ main{flex:1 0 auto;} /* Inner pages (everything except the full-screen home hero) start below the fixed header. The home hero opts out with .hero (it fills the screen). */ .page-head{padding:calc(var(--header-h) + 3.5rem) 0 2rem;text-align:center;max-width:44rem;margin-inline:auto;} .page-head .eyebrow{margin-bottom:1rem;} .page-head h1{font-size:clamp(2.2rem,6vw,3.4rem);} .page-head p{color:var(--muted);} .eyebrow{font-size:0.72rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--accent);font-weight:600;margin:0 0 1rem;} .site-footer{border-top:1px solid var(--line);margin-top:5rem;padding-block:2.5rem;text-align:center;color:var(--faint);font-size:0.82rem;} .site-footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:0.1rem 1rem;margin-bottom:0.9rem;} .site-footer a{color:var(--muted);text-decoration:none;min-height:var(--tap);display:inline-flex;align-items:center;} .site-footer a:hover{color:var(--ink);} /* ------------------------------------------------------------------------- 6. BUTTONS / LINKS ------------------------------------------------------------------------- */ .btn{ position:relative;display:inline-flex;align-items:center;justify-content:center; min-height:52px;padding:0 2rem;background:var(--accent);color:var(--accent-ink); font-family:var(--sans);font-size:0.8rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase; text-decoration:none;border:1px solid var(--accent);border-radius:2px;cursor:pointer; will-change:transform;transition:transform .2s ease,background .2s ease,border-color .2s ease; } .btn:hover{background:var(--accent-dark);border-color:var(--accent-dark);} .btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-strong);} .btn--ghost:hover{background:transparent;border-color:var(--accent);color:var(--accent);} .text-link{display:inline-flex;align-items:center;min-height:var(--tap);gap:0.4rem;color:var(--ink);text-decoration:none;font-size:0.92rem;border-bottom:1px solid var(--accent);padding-bottom:1px;} .text-link:hover{color:var(--accent);} /* ------------------------------------------------------------------------- 7. HOME HERO — cinematic, full-screen, slow "Ken Burns" drift ------------------------------------------------------------------------- */ .hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;} .hero__media{position:absolute;inset:0;z-index:0;overflow:hidden;background:#0a0a0c;} .hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:60% 40%;opacity:0;transition:opacity 1.3s ease;animation:kenburns 26s ease-in-out infinite alternate;} .hero__media img.is-active{opacity:1;} @keyframes kenburns{from{transform:scale(1);}to{transform:scale(1.12) translate(-1.5%,-2%);}} /* Dark scrim so the text stays readable over ANY photo — including a bright sky. Two layers: one darkens the left where the words sit, the other keeps the top and bottom edges anchored. The right side stays clear so the photo still reads. */ .hero__media::after{ content:"";position:absolute;inset:0; background: linear-gradient(90deg, rgba(8,8,10,.78) 0%, rgba(8,8,10,.55) 38%, rgba(8,8,10,.12) 72%, rgba(8,8,10,0) 100%), linear-gradient(180deg, rgba(8,8,10,.45) 0%, rgba(8,8,10,.10) 42%, rgba(8,8,10,.85) 100%); } /* On phones the text spans the full width, so use an even wash instead. */ @media (max-width:767px){ .hero__media::after{ background:linear-gradient(180deg, rgba(8,8,10,.60) 0%, rgba(8,8,10,.45) 45%, rgba(8,8,10,.88) 100%); } } /* padding-BLOCK only: the `padding` shorthand would wipe out the side padding that .wrap provides, pushing the hero text flush to the screen edge on phones. */ .hero__overlay{position:relative;z-index:1;padding-block:calc(var(--header-h) + 3rem) 5rem;max-width:52rem;} /* The headline's size and spacing come from tokens so they can be changed in one place — the admin's Design tab writes them into theme.css. */ .hero__title{ font-size:var(--hero-size, clamp(2.5rem,7vw,4.6rem)); line-height:var(--hero-leading, 0.98); letter-spacing:var(--hero-tracking, -0.025em); margin:0 0 1.2rem; text-wrap:balance; /* tidier wrapping where the browser supports it */ } /* A deliberate line break inside the headline stays put at every screen size. */ .hero__title br{display:block;content:"";} /* words rise in one-by-one on load (spans added by motion.js) */ .hero__title .w{display:inline-block;opacity:0;transform:translateY(1em);animation:rise .9s cubic-bezier(.2,.8,.2,1) forwards;} .no-js .hero__title .w,.hero__title.static .w{opacity:1;transform:none;animation:none;} @keyframes rise{to{opacity:1;transform:none;}} .hero__intro{color:var(--muted);font-size:1.1rem;max-width:34rem;margin:0 0 2.2rem;} .hero__cta{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;} /* Viewfinder brackets — thin corner marks framing the hero, like looking through a camera. Decorative only; hidden from screen readers. */ .hero__frame{position:absolute;top:calc(var(--header-h) + 1rem);left:1.5rem;right:1.5rem;bottom:1.5rem; z-index:2;pointer-events:none;} .hero__frame span{position:absolute;width:34px;height:34px;border:2px solid rgba(255,255,255,0.7); opacity:0;animation:frameIn 1s cubic-bezier(.2,.8,.2,1) .55s forwards;} .hero__frame span:nth-child(1){top:0;left:0;border-right:0;border-bottom:0;} .hero__frame span:nth-child(2){top:0;right:0;border-left:0;border-bottom:0;} .hero__frame span:nth-child(3){bottom:0;left:0;border-right:0;border-top:0;} .hero__frame span:nth-child(4){bottom:0;right:0;border-left:0;border-top:0;} @keyframes frameIn{from{opacity:0;transform:scale(1.25);}to{opacity:1;transform:none;}} html.lite .hero__frame span{opacity:1;animation:none;} @media (max-width:767px){ .hero__frame{top:calc(var(--header-h) + 0.5rem);left:1rem;right:1rem;bottom:1rem;} .hero__frame span{width:22px;height:22px;border-width:1.5px;} } .scrollcue{position:absolute;bottom:1.6rem;left:50%;transform:translateX(-50%);z-index:1;color:var(--faint);font-size:0.66rem;letter-spacing:0.3em;text-transform:uppercase;text-align:center;} .scrollcue span{display:block;width:1px;height:32px;background:var(--line);margin:0.55rem auto 0;position:relative;overflow:hidden;} .scrollcue span::after{content:"";position:absolute;top:-60%;left:0;width:100%;height:60%;background:var(--accent);animation:cue 1.9s ease-in-out infinite;} @keyframes cue{0%{top:-60%;}100%{top:100%;}} /* A generic section band used on the home page below the hero */ .band{padding:6rem 0;border-top:1px solid var(--line);} .band h2{font-size:clamp(1.8rem,4.5vw,2.8rem);margin:0 0 1.5rem;max-width:22ch;} .lead{color:var(--muted);font-size:1.05rem;max-width:40rem;} /* ------------------------------------------------------------------------- 8. PORTFOLIO — filters, grid, cinematic hover, lightbox ------------------------------------------------------------------------- */ .filters{display:flex;flex-wrap:wrap;justify-content:center;gap:0.45rem;margin:0 auto 2.5rem;padding-inline:1.5rem;max-width:var(--wrap);} .filters button{ min-height:var(--tap);padding:0 1.1rem;border:1px solid var(--line);background:transparent;color:var(--muted); font-family:var(--sans);font-size:0.76rem;letter-spacing:0.1em;text-transform:uppercase;cursor:pointer;border-radius:999px; transition:color .2s,border-color .2s,background .2s; } .filters button:hover{color:var(--ink);border-color:var(--accent);} .filters button.is-active{color:var(--accent-ink);background:var(--accent);border-color:var(--accent);} /* Layout toggle: switch the grid between multi-column "Grid" and one-per-row "Single". Controlled by portfolio.js and remembered on the visitor's device. */ .view-toggle{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0.4rem;margin:-1.2rem auto 2rem;padding-inline:1.5rem;max-width:var(--wrap);} .view-toggle .vt-label{font-size:0.68rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--faint);margin-right:0.25rem;} .view-toggle button{min-height:var(--tap);padding:0 1rem;border:1px solid var(--line);background:transparent;color:var(--muted);font-family:var(--sans);font-size:0.74rem;letter-spacing:0.1em;text-transform:uppercase;border-radius:999px;cursor:pointer;transition:color .2s,border-color .2s,background .2s;} .view-toggle button:hover{color:var(--ink);border-color:var(--accent);} .view-toggle button.is-active{color:var(--accent-ink);background:var(--accent);border-color:var(--accent);} /* Two up on phones so the Grid/Single toggle actually does something there — with a single column as the default, both settings looked identical. */ .gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:0.6rem;} .gallery__item{position:relative;padding:0;border:0;background:none;cursor:pointer;overflow:hidden;border-radius:3px;aspect-ratio:4/5;} /* Photos always show in full colour — the colour IS the work. Hovering just brings the frame forward slightly. */ .gallery__item img{width:100%;height:100%;object-fit:cover;background:var(--panel);transition:transform .7s cubic-bezier(.2,.7,.2,1);} .gallery__item:hover img{transform:scale(1.06);} .gallery__item[hidden]{display:none;} .gallery__cap{position:absolute;left:0;right:0;bottom:0;padding:1rem;text-align:left;color:#fff;background:linear-gradient(180deg,transparent,rgba(0,0,0,.65));font-size:0.75rem;letter-spacing:0.12em;text-transform:uppercase;transform:translateY(110%);transition:transform .45s cubic-bezier(.2,.7,.2,1);} .gallery__item:hover .gallery__cap{transform:none;} /* Mixed-size grid driven by the photos themselves: a landscape shot takes a wide slot in its natural 3:2, a portrait shot stays tall at 4:5. "dense" lets the browser backfill the gaps, so the wall reads like a magazine spread rather than a uniform grid. Never applies in "Single" layout. */ .gallery{grid-auto-flow:dense;} .gallery__item.is-wide{grid-column:span 2;aspect-ratio:3/2;} /* The home-page teaser is exactly three photos, one per category. It needs its own rhythm: stacked on phones, three across from tablet up. Without this it inherits the portfolio's two-column grid and the third photo is left stranded beside an empty slot. */ .gallery--teaser{grid-template-columns:1fr;gap:0.9rem;} @media (min-width:700px){ .gallery--teaser{grid-template-columns:repeat(3,1fr);gap:1rem;} } .gallery--teaser .gallery__item{aspect-ratio:4/5;grid-column:auto !important;} /* "Single" = one photo per row, each in its own natural shape */ .gallery.is-single .gallery__item{grid-column:auto !important;} .gallery.is-single .gallery__item.is-wide{aspect-ratio:3/2;} /* ---- Lightbox: arrows, counter, caption, keyboard + swipe ---- */ .lightbox{position:fixed;inset:0;background:rgba(6,6,8,0.95);display:none;align-items:center;justify-content:center;padding:1rem;z-index:100;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);} .lightbox.is-open{display:flex;} .lightbox img{max-width:100%;max-height:82vh;object-fit:contain;} .lightbox__close{position:absolute;top:0.5rem;right:0.5rem;width:var(--tap);height:var(--tap);display:flex;align-items:center;justify-content:center;background:none;border:0;color:#fff;font-size:1.8rem;line-height:1;cursor:pointer;} .lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%; display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.18); color:#fff;font-size:1.4rem;line-height:1;cursor:pointer;transition:background .2s,border-color .2s;} .lightbox__nav:hover{background:rgba(255,255,255,0.16);border-color:var(--accent);} .lightbox__prev{left:max(0.75rem,2vw);} .lightbox__next{right:max(0.75rem,2vw);} .lightbox__bar{position:absolute;left:0;right:0;bottom:1.1rem;display:flex;align-items:center;justify-content:center;gap:1rem; color:#cfccc6;font-size:0.74rem;letter-spacing:0.14em;text-transform:uppercase;padding-inline:4.5rem;text-align:center;} .lightbox__count{color:var(--accent);} @media (max-width:600px){ .lightbox__nav{width:44px;height:44px;} .lightbox__bar{padding-inline:1rem;font-size:0.68rem;} } /* ------------------------------------------------------------------------- 9. INQUIRY FORM (dark) ------------------------------------------------------------------------- */ .form-shell{max-width:40rem;margin:0 auto;padding:0 1.5rem 2rem;} .field{margin-bottom:1.25rem;} .field label{display:block;margin-bottom:0.4rem;font-size:0.82rem;letter-spacing:0.04em;color:var(--ink);} .field .req{color:var(--accent);} .field .hint{color:var(--faint);font-size:0.78rem;} .field input,.field select,.field textarea{ width:100%;min-height:var(--tap);padding:0.7rem 0.85rem; font-family:var(--sans);font-size:1rem;color:var(--ink);background:var(--field-bg); border:1px solid var(--line-strong);border-radius:2px;appearance:none;-webkit-appearance:none;transition:border-color .2s; } .field textarea{min-height:8rem;resize:vertical;line-height:1.5;} .field select{background-image:none;} .field.select-wrap{position:relative;} .field.select-wrap::after{content:"";position:absolute;right:1rem;top:calc(50% + 0.35rem);width:0.5rem;height:0.5rem;border-right:1px solid var(--muted);border-bottom:1px solid var(--muted);transform:rotate(45deg);pointer-events:none;} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);} .field input::placeholder,.field textarea::placeholder{color:var(--faint);} /* native date/select text colour on dark */ /* The open dropdown list is drawn by the operating system, not by the page. It has to be given BOTH a colour and a background or it inherits the dark field background and the text becomes invisible. Same for the date picker. */ .field select option{background-color:#17171c;color:#f2efe9;} html.light .field select option{background-color:#ffffff;color:#1a1813;} .field.has-error input,.field.has-error select,.field.has-error textarea{border-color:var(--error);} .field .error-text{display:none;color:var(--error);font-size:0.8rem;margin-top:0.35rem;} .field.has-error .error-text{display:block;} .hp-field{position:absolute !important;left:-9999px !important;top:auto;width:1px;height:1px;overflow:hidden;} .form-actions{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;margin-top:0.5rem;} .submit-btn[aria-busy="true"]{opacity:0.75;cursor:progress;} .submit-btn .spinner{display:none;width:1em;height:1em;margin-right:0.6rem;border:2px solid rgba(255,255,255,0.35);border-top-color:currentColor;border-radius:50%;animation:spin .7s linear infinite;} .submit-btn[aria-busy="true"] .spinner{display:inline-block;} @keyframes spin{to{transform:rotate(360deg);}} .form-status{display:none;padding:0.85rem 1rem;border:1px solid var(--error);color:var(--error);font-size:0.9rem;margin-bottom:1.25rem;border-radius:2px;background:rgba(255,107,107,0.07);} .form-status.is-visible{display:block;} /* consent checkbox The .field rule above deliberately strips native styling from every input so the text boxes and dropdowns can be styled. A checkbox caught by that rule loses its tick and becomes an empty square that looks the same ticked or not, so the browser's own checkbox is handed back here — appearance:auto — along with the box/padding/background it inherited. accent-color tints the tick with whatever colour this page is using. */ .consent-field .consent{display:flex;gap:0.6rem;align-items:flex-start;font-size:0.9rem;color:var(--muted);cursor:pointer;} .consent-field .consent input{ appearance:auto;-webkit-appearance:checkbox; width:1.15rem;height:1.15rem;min-height:0;flex:none; margin:0.15rem 0 0;padding:0; background:none;border:none;border-radius:0; accent-color:var(--accent);cursor:pointer; } .consent-field .consent a{color:var(--accent);} .consent-field.has-error .consent{color:var(--error);} .consent-field .error-text{display:none;color:var(--error);font-size:0.8rem;margin-top:0.35rem;} .consent-field.has-error .error-text{display:block;} /* ------------------------------------------------------------------------- 10. PROSE (privacy), THANK-YOU ------------------------------------------------------------------------- */ .prose{max-width:44rem;margin:0 auto;padding:0 1.5rem 2rem;} .prose h2{font-size:1.5rem;margin-top:2.2rem;} .prose h3{font-size:1.1rem;font-family:var(--sans);font-weight:600;margin-top:1.5rem;} .prose p,.prose li{color:var(--muted);} .prose ul{padding-left:1.2rem;margin-bottom:1em;} .prose li{margin-bottom:0.4rem;} .prose a{color:var(--accent);} .fillin{background:rgba(201,154,74,0.18);color:var(--ink);padding:0.05em 0.35em;border-radius:2px;font-style:italic;} .hu-todo{background:rgba(193,67,95,0.16);color:var(--ink);padding:0.05em 0.35em;border-radius:2px;} .thankyou{text-align:center;padding:calc(var(--header-h) + 5rem) 1.5rem 5rem;max-width:36rem;margin-inline:auto;} .thankyou h1{font-size:clamp(2.2rem,7vw,3.4rem);} .thankyou p{color:var(--muted);} /* ------------------------------------------------------------------------- 10a. ABOUT (portrait + short bio) ------------------------------------------------------------------------- */ .about{display:grid;grid-template-columns:1fr;gap:2.2rem;align-items:center;} @media(min-width:768px){.about{grid-template-columns:0.85fr 1fr;gap:3.5rem;}} .about__img img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:4px;background:var(--panel);} .about__body p{color:var(--muted);font-size:1.02rem;} /* ------------------------------------------------------------------------- 10b. CONTACT (email / phone / socials) + header logo mark ------------------------------------------------------------------------- */ .contact-list{display:flex;flex-wrap:wrap;gap:0.6rem 2.5rem;margin-top:1.5rem;} .contact-item{display:inline-flex;align-items:center;gap:0.7rem;min-height:var(--tap);color:var(--ink);text-decoration:none;font-size:1.05rem;} .contact-item:hover{color:var(--accent);} .contact-item svg{width:20px;height:20px;flex:none;stroke:var(--accent);fill:none;stroke-width:1.6;} .socials{display:flex;gap:0.7rem;margin-top:1.7rem;} .socials a{width:var(--tap);height:var(--tap);border:1px solid var(--line);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--muted);text-decoration:none;transition:color .2s,border-color .2s,transform .2s;} .socials a:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-2px);} .socials svg{width:19px;height:19px;} /* Small logo mark next to the wordmark in the header */ .brand{gap:0.6rem;} .brand .logo{width:26px;height:26px;flex:none;color:var(--accent);} /* ------------------------------------------------------------------------- 11. 3D DEPTH + "LITE MODE" (turn eye-candy off) Subtle 3D done with pure CSS transforms (no heavy 3D library): the hero layers shift with the pointer for depth, and portfolio tiles tilt toward the cursor. motion.js drives it and injects the footer "Animations" toggle. Adding the "lite" class to strips every animation for weaker hardware (or for anyone with "reduce motion" turned on). ------------------------------------------------------------------------- */ .hero{perspective:1200px;} .hero__media,.hero__overlay{will-change:transform;transition:transform .3s ease-out;} /* Footer "Animations" toggle (injected by motion.js) */ .footer-toggle{margin:0.4rem auto 0;display:inline-flex;align-items:center;gap:0.55rem;min-height:var(--tap);padding:0 1rem;background:transparent;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-family:var(--sans);font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;cursor:pointer;} .footer-toggle:hover{color:var(--ink);border-color:var(--accent);} .footer-toggle .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);} html.lite .footer-toggle .dot{background:var(--faint);box-shadow:none;} /* LITE MODE — strip the eye-candy */ html.lite body::after{display:none;} /* film grain off */ html.lite .hero__media img{animation:none;} /* hero drift off */ html.lite .hero__media,html.lite .hero__overlay{transform:none !important;} /* parallax off */ html.lite .scrollcue span::after{animation:none;} html.lite .reveal{opacity:1 !important;transform:none !important;transition:none !important;} html.lite .hero__title .w{opacity:1;transform:none;animation:none;} /* ------------------------------------------------------------------------- 12. RESPONSIVE ------------------------------------------------------------------------- */ /* ---- Phones: collapse the navigation into a dropdown ---- Without JavaScript the links stay visible as a normal row, so the site is never unusable — the dropdown only takes over once "js" is on . */ @media (max-width:767px){ .header-row{position:relative;} .nav-toggle{display:inline-flex;} html.js .site-nav{ /* inset to match the page's side padding so it lines up with the logo */ position:absolute;top:calc(100% + 0.65rem);left:1.5rem;right:1.5rem; flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0; padding:0.4rem;border:1px solid var(--line);border-radius:12px; background:color-mix(in srgb, var(--bg) 96%, transparent); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); box-shadow:0 18px 45px rgba(0,0,0,.45); display:none; } html.js .site-nav.is-open{display:flex;animation:navDrop .28s cubic-bezier(.2,.8,.2,1);} @keyframes navDrop{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}} html.js .site-nav a{justify-content:flex-start;padding:0 1rem;font-size:0.9rem;letter-spacing:0.1em;} html.js .site-nav a.is-current::after{left:1rem;right:auto;width:1.2rem;bottom:0.7rem;} html.js .nav-sep{display:none;} html.js .lang-switch{margin-top:0.35rem;padding-top:0.5rem;border-top:1px solid var(--line);justify-content:flex-start;gap:0.3rem;} html.js .lang-switch a,html.js .lang-switch span{justify-content:flex-start;padding-inline:1rem;min-width:0;} } @media (min-width:768px){ .gallery{grid-template-columns:repeat(2,1fr);gap:1rem;} } @media (min-width:1024px){ .gallery{grid-template-columns:repeat(3,1fr);gap:1.15rem;} } /* Respect visitors who prefer less motion — turn animation off, show content. */ @media (prefers-reduced-motion:reduce){ *{animation:none !important;transition-duration:0.001ms !important;} .reveal{opacity:1;transform:none;} .hero__title .w{opacity:1;transform:none;} .hero__media img{animation:none;} html{scroll-behavior:auto;} } /* ------------------------------------------------------------------------- 12b. EYE-CANDY — film dust, mask reveals, ambient section glow, intro, page transitions. All of it is switched off by Lite mode / reduce-motion. ------------------------------------------------------------------------- */ /* Floating film dust (a canvas motion.js paints; sits above the page, ignores clicks) */ #dust{position:fixed;inset:0;z-index:2;pointer-events:none;} html.lite #dust{display:none;} /* Photos wipe open from the bottom instead of fading. IMPORTANT: the clip lives on the INNER , never on the observed element — a fully clipped element reports zero visible area to IntersectionObserver and could never trigger its own reveal. */ html.js .reveal-mask img{clip-path:inset(0 0 100% 0);transition:clip-path 1.05s cubic-bezier(.76,0,.24,1);} html.js .reveal-mask.in img{clip-path:inset(0 0 0 0);} html.lite .reveal-mask img{clip-path:none !important;transition:none !important;} /* Ambient glow: each section blooms its own accent light as you reach it */ .band{position:relative;} .band::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:radial-gradient(62% 52% at 50% 42%, var(--accent-soft), transparent 70%); opacity:0;transition:opacity 1.2s ease;} html.js .band.in::before{opacity:1;} html.lite .band::before{display:none;} .band > *{position:relative;z-index:1;} /* Intro curtain (first visit of a session only; built by motion.js) */ #intro{position:fixed;inset:0;z-index:200;background:var(--bg);display:flex;align-items:center;justify-content:center; transition:transform .95s cubic-bezier(.76,0,.24,1);} #intro.done{transform:translateY(-100%);} #intro .il{font-family:"Unbounded",var(--sans);font-weight:600;font-size:clamp(1.1rem,4.5vw,2rem); letter-spacing:-.02em;text-transform:lowercase;display:flex;align-items:center;} #intro .il span{display:inline-block;opacity:0;} #intro .il .a{animation:introL .8s cubic-bezier(.2,.8,.2,1) .15s forwards;} #intro .il .s{color:var(--accent);margin:0 .12em;animation:introS .8s cubic-bezier(.2,.8,.2,1) .3s forwards;} #intro .il .b{animation:introR .8s cubic-bezier(.2,.8,.2,1) .15s forwards;} #intro .bar{position:absolute;bottom:0;left:0;height:2px;width:0;background:var(--accent);animation:introBar 1.4s ease forwards;} @keyframes introL{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}} @keyframes introR{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}} @keyframes introS{from{opacity:0;transform:rotate(-140deg) scale(.3)}to{opacity:1;transform:none}} @keyframes introBar{to{width:100%}} /* Page-transition wipe */ #wipe{position:fixed;inset:0;z-index:190;background:var(--accent);transform:translateY(100%);pointer-events:none;} #wipe.in{animation:wipeIn .5s cubic-bezier(.76,0,.24,1) forwards;} #wipe.out{animation:wipeOut .5s cubic-bezier(.76,0,.24,1) forwards;} @keyframes wipeIn{from{transform:translateY(100%)}to{transform:translateY(0)}} @keyframes wipeOut{from{transform:translateY(0)}to{transform:translateY(-100%)}} /* ------------------------------------------------------------------------- 13. LIGHT MODE (optional) — toggled from the footer, remembered on device. The hero stays cinematic (dark photo + light text) in both themes; the rest of the page flips to a light palette. Accents darken so text stays readable. ------------------------------------------------------------------------- */ .footer-controls{display:flex;gap:0.6rem;justify-content:center;flex-wrap:wrap;margin-top:0.6rem;} /* Hero text sits on a photograph, so it is fixed light in BOTH themes and carries a soft shadow — a photo can be bright anywhere, and the accent colour alone is not readable against sky. The eyebrow keeps a hint of the page accent but lightened enough to stay legible. */ .hero__title{color:#f4f1ec;text-shadow:0 2px 24px rgba(0,0,0,.45);} .hero__intro{color:#ded9d1;text-shadow:0 1px 14px rgba(0,0,0,.55);} .hero .eyebrow{ color:#efeae1; /* fallback */ color:color-mix(in srgb, var(--accent) 30%, #ffffff); /* light tint of the accent */ text-shadow:0 1px 12px rgba(0,0,0,.6); transition:color .6s ease, text-shadow .6s ease; } .hero .text-link{color:#f4f1ec;text-shadow:0 1px 12px rgba(0,0,0,.5);} /* ---- Adaptive to the photo behind the words (set by motion.js) ---- BRIGHT photo: go pure white and deepen the shadow + wash, so nothing is lost against a pale sky. DARK photo: let more of the page accent show through and lighten the wash, so the photograph is not muddied unnecessarily. */ .hero[data-bg="bright"] .eyebrow{ color:#ffffff; text-shadow:0 1px 3px rgba(0,0,0,.75), 0 2px 18px rgba(0,0,0,.65); } .hero[data-bg="bright"] .hero__title{text-shadow:0 2px 6px rgba(0,0,0,.5), 0 4px 30px rgba(0,0,0,.55);} .hero[data-bg="bright"] .hero__intro{color:#f0ece5;text-shadow:0 1px 4px rgba(0,0,0,.7);} .hero[data-bg="bright"] .hero__media::after{ background: linear-gradient(90deg, rgba(8,8,10,.88) 0%, rgba(8,8,10,.68) 38%, rgba(8,8,10,.2) 72%, rgba(8,8,10,0) 100%), linear-gradient(180deg, rgba(8,8,10,.5) 0%, rgba(8,8,10,.18) 42%, rgba(8,8,10,.88) 100%); } .hero[data-bg="dark"] .eyebrow{ color:color-mix(in srgb, var(--accent) 62%, #ffffff); text-shadow:0 1px 10px rgba(0,0,0,.45); } .hero[data-bg="dark"] .hero__media::after{ background: linear-gradient(90deg, rgba(8,8,10,.62) 0%, rgba(8,8,10,.38) 38%, rgba(8,8,10,.06) 72%, rgba(8,8,10,0) 100%), linear-gradient(180deg, rgba(8,8,10,.35) 0%, rgba(8,8,10,.05) 42%, rgba(8,8,10,.8) 100%); } .hero__media::after{transition:background .8s ease;} html.light{ --bg:#f6f4f0; --panel:#ffffff; --ink:#1a1813; --muted:#5d5b52; --faint:#a09d93; --line:rgba(0,0,0,0.12); --line-strong:rgba(0,0,0,0.24); --field-bg:#ffffff; --error:#c0261f; } html.light body::after{opacity:0.12;mix-blend-mode:multiply;} html.light .site-header{background:color-mix(in srgb, var(--bg) 85%, transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom-color:var(--line);} html.light .site-header.scrolled{background:color-mix(in srgb, var(--bg) 92%, transparent);} /* darker accent variants for good contrast on a light background */ html.light body[data-accent="indigo"] { --accent:#54579c; --accent-soft:rgba(84,87,156,0.13); } html.light body[data-accent="bordeaux"] { --accent:#992832; --accent-soft:rgba(153,40,50,0.13); } html.light body[data-accent="emerald"] { --accent:#1c6e52; --accent-soft:rgba(28,110,82,0.13); } html.light body[data-accent="gold"] { --accent:#966f1f; --accent-soft:rgba(150,111,31,0.13); }