/* =========================================================== Studio Jamez — Branding & Websites Minimal / bold. Near-black canvas, off-white type, a single whisper of electric indigo. Dark by default with a light mode (theme toggle in the header): set data-theme="light" on and the palette below flips. =========================================================== */ :root { /* "Atelier bij avond" — one committed warm-dark palette. Deep warm charcoal ground, cream type, a single gold accent (with a lit highlight). */ --ground: #171310; --surface: #221a12; --text: #f4e9d8; --muted: #a2937e; --line: rgba(244, 233, 216, 0.14); --accent: #d6a460; /* gold */ --accent-lit: #f0d2a0; /* lit highlight */ --accent-ink: #241f19; /* readable text on the gold */ --badge-bg: rgba(23, 19, 16, 0.72); --font-display: "Instrument Serif", Georgia, serif; /* headings / display */ --font-serif: "Newsreader", Georgia, serif; /* hero subtitle */ --font-body: "Instrument Sans", system-ui, sans-serif; /* prose / body */ --font-mono: "Space Mono", ui-monospace, monospace; --pad: clamp(1.25rem, 5vw, 5rem); --maxw: 1600px; --ease: cubic-bezier(0.16, 1, 0.3, 1); color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--ground); overflow-x: hidden; /* no sideways scroll on any viewport */ } /* Global atelier light — a soft warm glow top and bottom, echoing the hero's light treatment, fixed behind all content (body is transparent). */ body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(70% 45% at 50% -6%, rgba(214,164,96,0.10), transparent 62%), radial-gradient(55% 40% at 88% 106%, rgba(214,164,96,0.06), transparent 60%); } /* Fine film grain over the whole page. */ body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.30; 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.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } body { margin: 0; background: transparent; color: var(--text); transition: background-color 0.4s var(--ease), color 0.4s var(--ease); font-family: var(--font-body); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem); line-height: 1.55; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } a { color: inherit; text-decoration: none; } h1, h2, h3 { margin: 0; font-weight: 400; } /* Instrument Serif ships 400 only — avoid faux-bold */ ul, ol { margin: 0; padding: 0; list-style: none; } img { max-width: 100%; display: block; } ::selection { background: var(--accent); color: var(--accent-ink); } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 400; background: var(--text); color: var(--ground); padding: 0.6em 1em; font-family: var(--font-mono); font-size: 0.8rem; } .skip-link:focus { left: 1rem; top: 1rem; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } /* ---------- Cursor follower ----------------------------- */ /* The real OS cursor stays visible; this indigo ring trails it. */ .cursor { position: fixed; top: 0; left: 0; width: 34px; height: 34px; border: 1.5px solid var(--accent); border-radius: 50%; pointer-events: none; z-index: 300; transform: translate(-50%, -50%); transition: width 0.3s var(--ease), height 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease), opacity 0.3s var(--ease); opacity: 0; mix-blend-mode: difference; } .cursor.is-active { opacity: 1; } .cursor.is-hover { width: 64px; height: 64px; border-color: var(--text); } @media (pointer: coarse) { .cursor { display: none !important; } } /* ---------- Preloader ----------------------------------- */ /* Full-screen splash on the ground colour (set before paint, so no flash). The three stripes each slide in along their own 45° axis, staggered, then the whole mark breathes until the page is ready and the layer fades out. */ .preloader { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: var(--ground); transition: opacity 0.6s var(--ease), visibility 0.6s var(--ease); } .preloader.is-hidden { opacity: 0; visibility: hidden; } .preloader__mark { width: clamp(76px, 12vw, 132px); height: auto; color: var(--text); animation: sj-pre-breathe 1.7s 1.2s var(--ease) infinite; } .preloader__mark polygon { fill: currentColor; opacity: 0; animation: sj-pre-stripe 1s var(--ease) forwards; } /* Appear one by one, left → right: the two left stripes first (top then middle), the right-hand stripe last. */ .preloader__mark polygon:nth-child(1) { animation-delay: 0.05s; } .preloader__mark polygon:nth-child(2) { animation-delay: 0.19s; } .preloader__mark polygon:nth-child(3) { animation-delay: 0.33s; } @keyframes sj-pre-stripe { 0% { opacity: 0; transform: translate(-150px, 150px); } 55% { opacity: 1; } 100% { opacity: 1; transform: translate(0, 0); } } @keyframes sj-pre-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* ---------- Header -------------------------------------- */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: clamp(1rem, 2.5vw, 1.6rem) var(--pad); mix-blend-mode: difference; } /* Brand lockup — beeldmerk + woordmerk, per the huisstijl primary lockup. Lives in the mix-blend-mode:difference header, so currentColor #fff reads correctly on any background. */ .brand { display: inline-flex; align-items: center; gap: 0.6em; color: #fff; } .brand__mark { width: 1.7em; height: 1.7em; display: block; flex: none; } /* On hover the beeldmerk rebuilds itself stripe by stripe, left → right — the same one-by-one entrance as the preloader (sj-pre-stripe), just quicker. `backwards` holds each stripe hidden through its delay so they truly appear one at a time; opacity/transform only, so no layout shift. */ .brand:hover .brand__mark polygon { animation: sj-pre-stripe 0.5s var(--ease) backwards; } .brand:hover .brand__mark polygon:nth-child(2) { animation-delay: 0.1s; } .brand:hover .brand__mark polygon:nth-child(3) { animation-delay: 0.2s; } .brand__word { font-family: var(--font-mono); font-weight: 400; font-size: clamp(0.8rem, 1vw, 0.92rem); letter-spacing: 0.2em; text-transform: uppercase; } .nav { display: flex; gap: clamp(1.2rem, 2.4vw, 2.4rem); align-items: center; font-family: var(--font-mono); font-size: 0.82rem; color: #fff; } .nav a { position: relative; padding: 0.2em 0; } .nav a:not(.nav__cta)::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease); } .nav a:not(.nav__cta):hover::after { transform: scaleX(1); } /* .nav a.nav__cta (not just .nav__cta) so the inline padding beats the higher-specificity ".nav a { padding: 0.2em 0 }" rule above. */ .nav a.nav__cta { border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 100px; padding: 0.5em 1.1em; transition: background 0.3s var(--ease), color 0.3s var(--ease); } /* Header rides mix-blend-mode:difference, so hover text is authored as #000: it renders inverted — light on the dark pill (light theme), dark on the light pill (dark theme). var(--ground) broke this in light mode (near-white → black text on a black-blended pill). */ .nav a.nav__cta:hover { background: #fff; color: #000; } /* Right-hand cluster: nav + theme toggle + mobile menu button. */ .site-header__actions { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.6rem); } .menu-toggle { display: none; background: none; border: none; color: #fff; font-family: var(--font-mono); font-size: 0.82rem; align-items: center; gap: 0.6em; cursor: pointer; } .menu-toggle__icon { width: 22px; height: 9px; position: relative; } .menu-toggle__icon::before, .menu-toggle__icon::after { content: ""; position: absolute; left: 0; width: 100%; height: 1.5px; background: #fff; transition: transform 0.35s var(--ease); } .menu-toggle__icon::before { top: 0; } .menu-toggle__icon::after { bottom: 0; } .menu-toggle[aria-expanded="true"] .menu-toggle__icon::before { transform: translateY(3.5px) rotate(45deg); } .menu-toggle[aria-expanded="true"] .menu-toggle__icon::after { transform: translateY(-4px) rotate(-45deg); } /* ---------- Mobile nav ---------------------------------- */ .mobile-nav { position: fixed; inset: 0; z-index: 90; background: var(--ground); display: flex; flex-direction: column; justify-content: center; gap: 0.2em; padding: var(--pad); font-family: var(--font-display); font-weight: 400; font-size: clamp(2.5rem, 11vw, 4.5rem); letter-spacing: -0.03em; line-height: 1.05; } .mobile-nav[hidden] { display: none; } .mobile-nav a { transition: color 0.25s var(--ease); } .mobile-nav a:hover { color: var(--accent); } /* ---------- Layout -------------------------------------- */ section { padding-inline: var(--pad); } .label { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 1.5rem; display: flex; flex-wrap: wrap; gap: 0.6em 1.2em; align-items: baseline; } .label__hint { text-transform: none; letter-spacing: 0.02em; opacity: 0.7; } .section-head { margin-bottom: clamp(2.5rem, 6vw, 5rem); } .section-title { font-family: var(--font-display); font-size: clamp(2.6rem, 8vw, 6rem); line-height: 1.0; letter-spacing: -0.01em; } /* ---------- Hero — "Atelier bij avond" (Claude Design 3a) ---------- */ /* A committed dark warm stage: swaying light beam, pulsing glow, drifting dust, grain and a soft vignette. Stays dark in both site themes by design. */ .hero { --gold: #d6a460; --gold-lit: #f0d2a0; --cream: #f4e9d8; --hero-bg: #171310; position: relative; overflow: hidden; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: clamp(6rem, 14vh, 9rem) var(--pad) clamp(3rem, 7vh, 4.5rem); background: var(--hero-bg); color: var(--cream); isolation: isolate; /* own stacking context above the site aurora */ } /* --- atmosphere layers (all behind the content) --- */ .hero__atmos { position: absolute; inset: 0; z-index: 0; pointer-events: none; /* Dissolve the light toward the bottom so it never hard-cuts into the next section — the hero fades to plain ground for a seamless overlap. */ -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%); mask-image: linear-gradient(to bottom, #000 58%, transparent 100%); } .hero__beam { position: absolute; left: -14%; top: -25%; width: 128%; height: 150%; transform-origin: 50% -12%; background: conic-gradient(from 168deg at 50% 6%, rgba(214,164,96,0) 0deg, rgba(214,164,96,0.12) 10deg, rgba(240,210,160,0.22) 22deg, rgba(214,164,96,0.12) 34deg, rgba(214,164,96,0) 44deg); animation: sjSway 14s ease-in-out infinite; } .hero__glow { position: absolute; left: 50%; bottom: -6%; width: min(1000px, 80%); height: 52%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(214,164,96,0.18), rgba(214,164,96,0) 75%); animation: sjPulse 9s ease-in-out infinite; } .hero__dust { position: absolute; left: var(--x); bottom: 16%; width: 4px; height: 4px; border-radius: 50%; background: rgba(240,210,160,0.75); animation: sjDrift var(--d) linear var(--delay) infinite; } .hero__vignette { position: absolute; inset: 0; background: radial-gradient(90% 80% at 50% 55%, rgba(23,19,16,0) 55%, rgba(23,19,16,0.82) 100%); } .hero__grain { position: absolute; inset: 0; opacity: 0.5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } /* --- corner labels --- */ .hero__eyebrow, .hero__meta { position: absolute; z-index: 2; margin: 0; font-family: var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; } .hero__eyebrow { top: clamp(5rem, 9vh, 6.5rem); font-size: 0.72rem; color: rgba(214,164,96,0.75); } .hero__eyebrow--tl { left: var(--pad); } .hero__eyebrow--tr { right: var(--pad); text-align: right; } .hero__meta { bottom: clamp(1.6rem, 4vh, 2.4rem); font-size: 0.66rem; letter-spacing: 0.1em; color: rgba(244,233,216,0.35); text-decoration: none; } .hero__meta--bl { left: var(--pad); } .hero__meta--br { right: var(--pad); transition: color 0.3s var(--ease); } .hero__meta--br:hover { color: var(--cream); } /* --- centred content --- */ .hero__center { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: clamp(1.4rem, 3vw, 1.9rem); width: min(88vw, 1080px); /* definite width so the headline wraps on small screens */ } .hero__pill { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(214,164,96,0.4); border-radius: 999px; padding: 0.6em 1.2em; background: rgba(23,19,16,0.35); } .hero__mark { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: clamp(2.4rem, 9vw, 8rem); line-height: 1.04; letter-spacing: 0; margin: 0; max-width: 100%; color: var(--cream); text-wrap: balance; text-shadow: 0 0 90px rgba(214,164,96,0.28); } .hero__mark em { font-style: normal; color: var(--gold); } .hero__sub { font-family: "Newsreader", Georgia, serif; font-weight: 300; font-size: clamp(1.1rem, 1.9vw, 1.6rem); line-height: 1.45; color: rgba(244,233,216,0.82); max-width: 40ch; margin: 0; } .hero__cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.4rem; margin-top: 0.4rem; } .hero__cta-primary { font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.06em; background: var(--gold); color: #241f19; padding: 1.05em 1.8em; border-radius: 999px; text-decoration: none; transition: background 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease); } .hero__cta-primary:hover { background: var(--gold-lit); box-shadow: 0 6px 30px rgba(214,164,96,0.35); transform: translateY(-1px); } .hero__cta-secondary { font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.08em; color: rgba(244,233,216,0.55); text-decoration: none; border-bottom: 1px solid rgba(244,233,216,0.25); padding-bottom: 3px; transition: color 0.25s var(--ease), border-color 0.25s var(--ease); } .hero__cta-secondary:hover { color: var(--cream); border-bottom-color: rgba(244,233,216,0.7); } /* Reveal: JS fades the centred content up once the preloader clears. */ .js .hero__center { opacity: 0; transform: translateY(24px); } .js .hero__center.is-revealed { opacity: 1; transform: none; transition: opacity 1s var(--ease), transform 1s var(--ease); } @keyframes sjSway { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } } @keyframes sjPulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } } @keyframes sjDrift { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 0.7; } 80% { opacity: 0.35; } 100% { transform: translateY(-320px); opacity: 0; } } /* Hide the top-right eyebrow on phones so it never crowds the centred copy. */ @media (max-width: 640px) { .hero__eyebrow--tr { display: none; } } /* ---------- Work — list with hover preview -------------- */ .work { position: relative; isolation: isolate; overflow: hidden; padding-top: clamp(5rem, 12vw, 11rem); } /* Warm gold glow spilling from the top (moved here from the services panel). */ .work::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(58% 42% at 50% 0%, rgba(214,164,96,0.16), transparent 62%); } .work__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); } .work-item { border-bottom: 1px solid var(--line); } .work-item__btn { width: 100%; background: none; border: 0; cursor: pointer; text-align: left; text-decoration: none; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(1rem, 4vw, 3rem); padding: clamp(1.4rem, 3.2vw, 2.6rem) 0; color: var(--text); transition: padding-inline 0.4s var(--ease); } .work-item__btn:not([href]) { cursor: default; } .work-item__btn:hover, .work-item__btn:focus-visible { padding-inline: clamp(0.5rem, 2vw, 2rem); } .work-item__btn:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; } .work-item__index { font-family: var(--font-mono); font-size: 0.82rem; color: var(--muted); align-self: start; padding-top: 0.35em; } .work-item__body { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; } .work-item__name { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 5vw, 3.4rem); line-height: 1; letter-spacing: -0.03em; transition: transform 0.4s var(--ease), color 0.3s var(--ease); } .work-item__btn:hover .work-item__name, .work-item__btn:focus-visible .work-item__name { transform: translateX(clamp(0.5rem, 2vw, 1.5rem)); color: var(--accent); } .work-item__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; transition: transform 0.4s var(--ease); } .work-item__btn:hover .work-item__tags, .work-item__btn:focus-visible .work-item__tags { transform: translateX(clamp(0.5rem, 2vw, 1.5rem)); } .work-item__tags li { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); border: 1px solid var(--line); border-radius: 100px; padding: 0.32em 0.8em; } .work-item__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.4rem; font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); } .work-item__view { color: var(--accent); display: inline-flex; align-items: center; gap: 0.4em; } .work-item__view svg { width: 0.95em; height: 0.95em; } /* Floating preview image that trails the cursor over the list. The transform is driven per-frame from JS, so only opacity + scale are transitioned here. */ .work__preview { position: fixed; top: 0; left: 0; z-index: 5; width: clamp(220px, 22vw, 340px); aspect-ratio: 4 / 3; margin: 0; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22); pointer-events: none; opacity: 0; scale: 0.9; transform: translate(-50%, -50%); transition: opacity 0.35s var(--ease), scale 0.35s var(--ease); } .work__preview.is-on { opacity: 1; scale: 1; } .work__preview img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ---------- Services ------------------------------------ */ /* Warm-lit panel — a deeper warm surface with a soft gold glow spilling from the top, echoing the hero's light. */ .services { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(180deg, #1d160f 0%, #14100b 100%); color: var(--text); margin-top: clamp(4rem, 10vw, 9rem); padding-top: clamp(4rem, 9vw, 8rem); padding-bottom: clamp(4rem, 9vw, 8rem); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .services .label { color: var(--accent); } .services__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(2rem, 4vw, 4rem); } .service { border-top: 1px solid var(--line); padding-top: 1.6rem; } .service__title { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.1; letter-spacing: -0.03em; margin-bottom: 1rem; } .service__body { max-width: 38ch; margin: 0 0 2rem; color: rgba(244, 233, 216, 0.78); } .service__tags { display: flex; flex-wrap: wrap; gap: 0.6rem; } .service__tags li { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.02em; color: rgba(244, 233, 216, 0.8); border: 1px solid var(--line); border-radius: 100px; padding: 0.45em 0.9em; } /* ---------- Process — editorial numbered steps ---------- */ /* Four quiet columns under a hairline, each led by a large gold serif number. No cards, no tilt — the numbering carries the sequence. */ .process { padding-top: clamp(6rem, 14vw, 13rem); } .process__list { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); } .step { display: flex; flex-direction: column; gap: 0.85rem; padding: clamp(1.8rem, 3vw, 2.8rem) clamp(1.1rem, 1.8vw, 1.9rem) clamp(1.8rem, 3vw, 2.8rem) 0; border-left: 1px solid var(--line); } .step:first-child { border-left: 0; } .step + .step { padding-left: clamp(1.1rem, 1.8vw, 1.9rem); } .step__icon { display: none; } /* the number leads now */ .step__no { font-family: var(--font-display); font-size: clamp(2.6rem, 4.4vw, 3.8rem); line-height: 0.9; color: var(--accent); margin-bottom: 0.3rem; } .step__title { font-family: var(--font-display); font-size: clamp(1.35rem, 2.1vw, 1.9rem); line-height: 1.08; margin: 0; color: var(--text); } .step__body p { margin: 0; color: var(--muted); font-size: 0.98rem; line-height: 1.55; } /* ---------- About --------------------------------------- */ .about { padding-top: clamp(6rem, 14vw, 13rem); } .about__statement { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.85rem, 4.6vw, 3.6rem); line-height: 1.1; letter-spacing: -0.025em; max-width: 22ch; margin: 0 0 clamp(2.5rem, 6vw, 4.5rem); } .about__grid { display: grid; grid-template-columns: minmax(220px, 0.85fr) 1.5fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; } .about__portrait { margin: 0; } .about__portrait[hidden] { display: none; } .about__portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 1px solid var(--line); filter: grayscale(1) sepia(0.4) saturate(1.1) contrast(1.02) brightness(1.02); /* warm duotone, on-brand */ } .about__portrait figcaption { margin-top: 0.9rem; font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); } .about__cols { display: flex; flex-direction: column; gap: clamp(1.2rem, 2.5vw, 1.8rem); max-width: 56ch; } .about__cols p { margin: 0; } /* ---------- Contact ------------------------------------- */ .contact { position: relative; isolation: isolate; overflow: hidden; padding-top: clamp(6rem, 14vw, 13rem); padding-bottom: clamp(4rem, 10vw, 9rem); text-align: center; } /* Warm glow rising from the base — a quiet bookend to the hero's light. */ .contact::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(62% 55% at 50% 100%, rgba(214,164,96,0.14), transparent 62%); } .contact__title { font-family: var(--font-display); font-size: clamp(2.2rem, 6vw, 5rem); line-height: 1.04; letter-spacing: -0.035em; max-width: 18ch; margin: 0.6rem auto 0; text-wrap: balance; } /* The playful part: one word swaps in and out in accent. It sits in its own inline-flex box so the swap animates without nudging the surrounding words. */ .contact__rotator { color: var(--accent); display: block; transition: opacity 0.32s var(--ease), transform 0.32s var(--ease); } .contact__rotator.is-out { opacity: 0; transform: translateY(-0.35em) rotate(-2deg); } .contact__intro { max-width: 44ch; margin: clamp(1.4rem, 3vw, 2rem) auto clamp(2rem, 4vw, 2.6rem); color: var(--muted); font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.6; text-wrap: pretty; } .contact__cta { display: inline-flex; align-items: center; gap: 0.6em; font-family: var(--font-mono); font-size: 0.92rem; letter-spacing: 0.02em; color: var(--ground); background: var(--accent); padding: 1em 1.9em; border-radius: 100px; border: 1px solid var(--accent); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); } .contact__cta::after { content: "→"; transition: transform 0.3s var(--ease); } .contact__cta:hover { transform: translateY(-2px) rotate(-1deg); box-shadow: 0 12px 30px rgba(214, 164, 96, 0.35); } .contact__cta:hover::after { transform: translateX(4px); } .contact__meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.7rem 1.6rem; margin-top: clamp(2rem, 5vw, 3rem); } .contact__email { font-family: var(--font-mono); font-size: 0.9rem; color: var(--muted); padding-bottom: 0.15em; border-bottom: 1px solid var(--line); transition: border-color 0.35s var(--ease), color 0.35s var(--ease); } .contact__email:hover { color: var(--accent); border-color: var(--accent); } .contact__links { display: flex; gap: 1.6rem; font-family: var(--font-mono); font-size: 0.85rem; } .contact__links a { color: var(--muted); transition: color 0.3s var(--ease); } .contact__links a:hover { color: var(--text); } /* ---------- Footer -------------------------------------- */ .site-footer { display: flex; flex-wrap: nowrap; /* keep the three items on one line (desktop) */ align-items: center; justify-content: space-between; gap: 1.5rem; padding: 2rem var(--pad); border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); } .site-footer a:hover { color: var(--text); } /* ---------- Lightbox / gallery -------------------------- */ .lightbox { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; } .lightbox[hidden] { display: none; } .lightbox__backdrop { position: absolute; inset: 0; background: rgba(5, 5, 6, 0.92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fade 0.4s var(--ease); } .lightbox__panel { position: relative; width: min(1100px, 92vw); max-height: 92vh; display: flex; flex-direction: column; gap: 1.2rem; animation: rise 0.5s var(--ease); } .lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .lightbox__meta { display: flex; flex-direction: column; } .lightbox__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.3rem, 3vw, 2rem); letter-spacing: -0.02em; } .lightbox__sub { font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); } .lightbox__actions { display: flex; align-items: center; gap: 1rem; } .lightbox__visit { font-family: var(--font-mono); font-size: 0.82rem; border: 1px solid var(--line); border-radius: 100px; padding: 0.6em 1.1em; transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease); } .lightbox__visit:hover { background: var(--accent); border-color: var(--accent); color: #fff; } .lightbox__close { background: none; border: 1px solid var(--line); color: var(--text); width: 44px; height: 44px; border-radius: 50%; font-size: 1rem; cursor: pointer; flex: none; transition: border-color 0.3s var(--ease); } .lightbox__close:hover { border-color: var(--text); } .lightbox__stage { position: relative; display: flex; align-items: center; gap: 0.5rem; } .lightbox__figure { margin: 0; flex: 1; background: #161617; border: 1px solid var(--line); overflow: hidden; } .lightbox__img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; } .lightbox__nav { flex: none; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line); background: rgba(11, 11, 12, 0.7); color: var(--text); font-size: 1.5rem; line-height: 1; cursor: pointer; transition: background 0.3s var(--ease), border-color 0.3s var(--ease); } .lightbox__nav:hover { background: var(--accent); border-color: var(--accent); color: #fff; } .lightbox__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-family: var(--font-mono); font-size: 0.8rem; } .lightbox__caption { color: var(--text); letter-spacing: 0.04em; text-transform: uppercase; } .lightbox__count { color: var(--muted); } @keyframes fade { from { opacity: 0; } } @keyframes rise { from { opacity: 0; transform: translateY(20px); } } /* ---------- Loader error -------------------------------- */ .loader-error { max-width: 48ch; margin: 22vh auto; padding: 0 var(--pad); text-align: center; font-family: var(--font-mono); font-size: 0.9rem; color: var(--muted); line-height: 1.7; } .loader-error[hidden] { display: none; } .loader-error strong { color: var(--text); } .loader-error code { display: inline-block; margin: 0.5rem 0; padding: 0.5em 0.9em; background: var(--surface); border: 1px solid var(--line); color: var(--text); } .loader-error a { color: var(--accent); } /* ---------- Scroll reveal ------------------------------- */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); } .reveal.in { opacity: 1; transform: none; } /* ---------- Responsive ---------------------------------- */ @media (max-width: 1023px) { .process__list { grid-template-columns: repeat(2, 1fr); border-top: 0; } .step { border-left: 0; border-top: 1px solid var(--line); padding: clamp(1.4rem,4vw,2rem) 0; } .step + .step { padding-left: 0; } } @media (max-width: 560px) { .process__list { grid-template-columns: 1fr; } } @media (max-width: 760px) { .nav { display: none; } .menu-toggle { display: inline-flex; } .services__grid, .process__list { grid-template-columns: 1fr; } .about__grid { grid-template-columns: 1fr; } .about__portrait img { aspect-ratio: 3 / 4; } .contact__title { max-width: 100%; } .work-item__btn { grid-template-columns: auto 1fr; row-gap: 0.5rem; } .work-item__meta { grid-column: 2; align-items: flex-start; } .site-footer { flex-direction: column; align-items: flex-start; gap: 0.7rem; } .lightbox__nav { width: 42px; height: 42px; font-size: 1.2rem; } } /* ---------- Reduced motion ------------------------------ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } .js .hero__center { opacity: 1 !important; transform: none !important; } .hero__dust { display: none; } .preloader__mark, .preloader__mark polygon { animation: none !important; opacity: 1 !important; transform: none !important; clip-path: none !important; } html { scroll-behavior: auto; } }