/* ========================================================================== Julian Teh Films — style.css Mobile-first. Breakpoints: <=480 mobile / 481-1024 tablet / 1025+ desktop. Everything brand-related lives in the :root block below. To restyle the site, change values there — you should not need to touch anything else. ========================================================================== */ /* -------------------------------------------------------------------------- 1. BRAND TOKENS -------------------------------------------------------------------------- */ :root { /* Colour — sampled from the existing site */ --sand: #d6c8ae; /* headings, buttons, accents */ --sand-bright: #e6dcc8; /* hover state */ --sand-deep: #b9a988; /* borders / dividers on sand */ --bg-top: #3a3734; /* top of the page gradient (warm charcoal) */ --bg-mid: #26241f; --bg-bottom: #0e0e0d; /* bottom of the page gradient (near black) */ --surface: #1c1b19; /* cards, lightbox chrome */ --surface-2: #2a2825; --text: #b5b0a8; /* body copy */ --text-strong: #eceae6; /* card titles, emphasis */ --text-muted: #7d786f; /* process numbers, meta */ --line: rgba(214, 200, 174, 0.22); --ink-on-sand: #2a2825; /* text sitting on a sand-filled button */ /* Type --font-display = main text (headings, nav, buttons, labels) --font-body = subtext (paragraphs, captions, card copy) */ --font-display: 'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-body: 'Noto Sans', 'Segoe UI', system-ui, -apple-system, sans-serif; --fs-hero: clamp(2.25rem, 7vw, 5rem); --fs-h1: clamp(2rem, 5.5vw, 3.5rem); --fs-h2: clamp(1.375rem, 3vw, 1.75rem); --fs-h3: clamp(1.0625rem, 2vw, 1.25rem); --fs-body: clamp(0.9375rem, 1.4vw, 1rem); --fs-small: 0.875rem; --tracking-hero: 0.06em; /* Layout */ --container: 1200px; --gutter: clamp(1.25rem, 5vw, 2rem); --grid-gap: clamp(0.5rem, 1.2vw, 0.875rem); --radius: 6px; /* Motion */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dur: 220ms; --dur-slow: 420ms; --header-h: 72px; } /* -------------------------------------------------------------------------- 2. RESET / BASE -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* Dark floor on . The home page makes transparent so the fixed hero shows through; without this, any failure to paint that layer would fall back to white and the light text would vanish. */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background-color: #0e0e0d; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } body { margin: 0; min-height: 100vh; font-family: var(--font-body); font-size: var(--fs-body); font-weight: 300; line-height: 1.65; color: var(--text); background-color: var(--bg-bottom); background-image: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 45%, var(--bg-bottom) 100%); background-attachment: fixed; -webkit-font-smoothing: antialiased; } img, picture, video, iframe { display: block; max-width: 100%; } img { height: auto; } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--sand); line-height: 1.15; margin: 0 0 0.5em; font-weight: 600; } p { margin: 0 0 1em; } a { color: var(--sand); text-decoration: none; transition: color var(--dur) var(--ease); } a:hover { color: var(--sand-bright); } button { font: inherit; color: inherit; } /* Visible focus for keyboard users only. */ :focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; border-radius: 2px; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -100px; left: var(--gutter); z-index: 200; background: var(--sand); color: var(--ink-on-sand); padding: 0.6rem 1rem; border-radius: var(--radius); font-weight: 500; transition: top var(--dur) var(--ease); } .skip-link:focus { top: 0.75rem; } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } /* -------------------------------------------------------------------------- 3. HEADER / NAV -------------------------------------------------------------------------- */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h); display: flex; align-items: center; background: transparent; transition: background-color var(--dur) var(--ease), backdrop-filter var(--dur) var(--ease); } /* Solid-ish once the user scrolls, so nav stays legible over pale images. */ .site-header.is-stuck { background: rgba(20, 19, 17, 0.9); backdrop-filter: blur(10px); } .site-header__inner { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; } /* If a wordmark is added later, this pushes the nav to the right. */ .site-header__brand { margin-right: auto; } .nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(1.25rem, 3vw, 2.25rem); } .nav__link { font-family: var(--font-display); font-weight: 500; font-size: 0.9375rem; color: var(--text-strong); padding: 0.35rem 0; border-bottom: 1.5px solid transparent; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .nav__link:hover { color: var(--sand); } .nav__link.is-current { color: var(--sand); border-bottom-color: var(--sand); } /* Mobile toggle — hidden on tablet and up. */ .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 6px; width: 44px; height: 44px; /* 44px = comfortable touch target */ padding: 0 10px; background: none; border: 0; cursor: pointer; } .nav-toggle__bar { display: block; height: 1.5px; width: 100%; background: var(--text-strong); transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:first-child { transform: translateY(3.75px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:last-child { transform: translateY(-3.75px) rotate(-45deg); } @media (max-width: 767px) { .nav { position: fixed; inset: var(--header-h) 0 auto 0; background: rgba(16, 15, 14, 0.97); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); /* The panel sits var(--header-h) down the page, so a percentage-only shift never fully clears it — translateY(-120%) left a 32px strip of the menu visible across the top of every mobile page. Subtracting the header height puts its bottom edge exactly on y=0, at any menu length. visibility:hidden is the backstop: nothing painted, nothing focusable. */ transform: translateY(calc(-100% - var(--header-h))); visibility: hidden; transition: transform var(--dur-slow) var(--ease), visibility 0s linear var(--dur-slow); } .nav.is-open { transform: translateY(0); visibility: visible; transition: transform var(--dur-slow) var(--ease), visibility 0s; } .nav__list { flex-direction: column; gap: 0; padding: 0.5rem var(--gutter) 1.25rem; } .nav__link { display: block; padding: 0.9rem 0; font-size: 1.0625rem; } } @media (min-width: 768px) { .nav-toggle { display: none; } .nav { display: block !important; transform: none; } } /* -------------------------------------------------------------------------- 4. HOME — single continuous gradient page One fixed image behind the whole document, one gradient over it running top to bottom. No section bands, no rows: the hero and the process copy sit on the same surface and the image simply darkens away as you scroll. -------------------------------------------------------------------------- */ .home-bg { position: fixed; inset: 0; z-index: -2; background: var(--bg-bottom); } .home-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .home-canvas { position: relative; z-index: 0; /* The single gradient. Adjust these four stops to retune the whole page. */ background: linear-gradient(180deg, rgba(14, 14, 13, 0.42) 0%, rgba(14, 14, 13, 0.60) 35%, rgba(14, 14, 13, 0.88) 70%, rgba(14, 14, 13, 0.99) 100%); } /* Horizontal falloff so the left-hand copy always has contrast under it. */ .home-canvas::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(14,14,13,0.72) 0%, rgba(14,14,13,0.18) 60%, rgba(14,14,13,0.42) 100%); } /* Home has no opaque body gradient — the canvas above provides it. */ body.page-home { background-image: none; background-color: transparent; } .hero { position: relative; min-height: 100svh; /* svh avoids the mobile URL-bar jump */ display: flex; align-items: center; } .hero__inner { position: relative; z-index: 1; padding-block: var(--header-h) 4rem; } .hero__title { font-size: var(--fs-hero); font-weight: 700; letter-spacing: var(--tracking-hero); text-transform: uppercase; margin-bottom: 0.35em; } /* Signature sits inline at the end of the tagline, as on the current site. */ /* Width allows the sentence AND the inline signature on one line at desktop — a ch-based cap doesn't account for the image and forced a 3-line wrap. */ .hero__tagline { color: var(--text-strong); font-size: clamp(0.9375rem, 1.6vw, 1.0625rem); max-width: min(100%, 46rem); margin-bottom: 2rem; } .hero__signature { display: inline-block; vertical-align: middle; width: 104px; height: auto; /* height:auto keeps the 355:191 ratio */ margin-left: 0.7rem; opacity: 0.9; } @media (max-width: 480px) { .hero__signature { display: block; margin: 0.5rem 0 0; } } /* Scroll cue. Centred with left/right rather than translate(-50%), so the animation is the only thing touching `transform`. DEFAULT (phones, tablets, anything touch): opacity only — it breathes, it does not move. A 7px drift over 2.4s advances ~0.006px per frame; mobile compositors round that to whole pixels and it advances in visible ticks rather than gliding. Add a fixed-position background image and a backdrop-filtered header above it and there is no reliable way to keep that smooth. Opacity has no geometry to round, so it cannot judder. The bob is re-enabled further down for mouse-driven screens only, where it renders smoothly and reads better. */ .hero__cue { position: absolute; left: 0; right: 0; bottom: 2.5rem; z-index: 1; text-align: center; color: var(--sand); font-family: var(--font-display); font-size: 1.5rem; line-height: 1; will-change: opacity; animation: cue-breathe 2.6s ease-in-out infinite; } @keyframes cue-breathe { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } } /* Desktop with a real pointer: restore the vertical bob. ease-in-out, NOT var(--ease) — that's an ease-OUT curve, so each half of the cycle decelerated then reversed direction at full speed, snapping twice per loop. ease-in-out settles at both ends, which is what a bob needs. */ @media (min-width: 768px) and (pointer: fine) { .hero__cue { will-change: transform, opacity; animation: cue-bob 2.4s ease-in-out infinite; } @keyframes cue-bob { 0%, 100% { transform: translateY(0); opacity: 0.55; } 50% { transform: translateY(8px); opacity: 0.95; } } } /* Buttons */ .btn { display: inline-block; font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem; padding: 0.85rem 1.75rem; min-height: 44px; border: 1.5px solid var(--sand); border-radius: var(--radius); background: var(--sand); color: var(--ink-on-sand); cursor: pointer; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); } .btn:hover { background: var(--sand-bright); color: var(--ink-on-sand); transform: translateY(-1px); } .btn--ghost { background: transparent; color: var(--sand); } .btn--ghost:hover { background: var(--sand); color: var(--ink-on-sand); } /* -------------------------------------------------------------------------- 5. SECTIONS -------------------------------------------------------------------------- */ .section { padding-block: clamp(3.5rem, 9vw, 7rem); } .section--tight { padding-block: clamp(2rem, 4vw, 3rem); } .section__title { font-size: var(--fs-h2); font-weight: 600; } .section__title--center { text-align: center; } /* Page header used on Portfolio + Contact */ .page-head { padding-top: calc(var(--header-h) + clamp(3rem, 8vw, 6rem)); padding-bottom: clamp(1.5rem, 3vw, 2.25rem); } .page-head__title { font-size: var(--fs-h1); font-weight: 700; margin-bottom: 0.25em; } /* No max-width: the subtitle is meant to hold a single line on desktop. It still wraps on narrow screens, where one line can't fit. */ .page-head__intro { color: var(--text); max-width: none; margin-bottom: 1.5rem; } .page-head__rule { width: min(360px, 60%); height: 3px; border: 0; margin: 0; background: var(--sand); opacity: 0.85; } /* Content that follows a page head sits close to it, not a full band away. */ .page-head + .section--tight { padding-top: clamp(1rem, 2vw, 1.5rem); } /* Process — 01 / 02 / 03. Flows straight on from the hero, no band or divider. */ .process { padding-block: clamp(2rem, 6vw, 5rem) clamp(5rem, 14vw, 11rem); } .process__title { font-size: var(--fs-h2); font-weight: 600; text-align: center; } .process__grid { display: grid; gap: clamp(2rem, 5vw, 3rem); grid-template-columns: 1fr; margin-top: clamp(2rem, 5vw, 3.25rem); } .process__step { text-align: center; } .process__num { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 4vw, 2.75rem); color: var(--text-muted); line-height: 1; margin-bottom: 0.35rem; } .process__name { font-size: var(--fs-h3); font-weight: 600; margin-bottom: 0.5rem; } .process__copy { margin: 0 auto; max-width: 34ch; font-size: var(--fs-small); } @media (min-width: 768px) { .process__grid { grid-template-columns: repeat(3, 1fr); } } /* -------------------------------------------------------------------------- 6. PORTFOLIO — filters -------------------------------------------------------------------------- */ .filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.75rem; } .filter { font-family: var(--font-display); font-weight: 500; font-size: 0.875rem; padding: 0.6rem 1.1rem; min-height: 44px; /* touch target */ display: inline-flex; align-items: center; background: transparent; color: var(--text); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .filter:hover { color: var(--sand); border-color: var(--sand); } .filter[aria-pressed="true"] { background: var(--sand); color: var(--ink-on-sand); border-color: var(--sand); } .filter__count { opacity: 0.6; margin-left: 0.4em; font-size: 0.8em; } .filter-status { font-size: var(--fs-small); color: var(--text-muted); margin-bottom: 1.25rem; } /* -------------------------------------------------------------------------- 7. PORTFOLIO — masonry grid CSS multi-column: real masonry, zero JS, no library, no licence. -------------------------------------------------------------------------- */ /* No-JS fallback: CSS multi-column. Real masonry, but it fills each column top-to-bottom, so reading order runs down rather than across. */ .grid { column-count: 1; column-gap: var(--grid-gap); } @media (min-width: 481px) { .grid { column-count: 2; } } @media (min-width: 1025px) { .grid { column-count: 3; } } /* JS-enhanced: cards are dealt across real columns, so works.json order reads left-to-right across the top row — the way you'd curate it. */ .grid.is-columns { column-count: initial; display: flex; gap: var(--grid-gap); align-items: flex-start; } .grid__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--grid-gap); } .grid.is-columns .card { margin-bottom: 0; } .card { break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; margin: 0 0 var(--grid-gap); padding: 0; border: 0; width: 100%; display: block; position: relative; background: var(--surface); border-radius: 2px; overflow: hidden; cursor: pointer; text-align: left; opacity: 1; transform: none; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); } /* display:block is required — these are s, and aspect-ratio does not apply to inline boxes. */ .card__media { display: block; position: relative; aspect-ratio: var(--ratio, 3/4); background: var(--surface-2); } .card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease), filter var(--dur) var(--ease); } .card:hover .card__media img, .card:focus-visible .card__media img { transform: scale(1.04); } /* Bottom scrim so the overlaid title stays readable on any image. */ .card__body { position: absolute; inset: auto 0 0 0; padding: 1.75rem 1rem 0.95rem; background: linear-gradient(180deg, rgba(10,10,9,0) 0%, rgba(10,10,9,0.78) 55%, rgba(10,10,9,0.92) 100%); } .card__title { display: block; font-family: var(--font-body); font-weight: 600; font-size: 0.9375rem; line-height: 1.3; color: #fff; margin: 0; } .card__subtitle { display: block; font-size: 0.875rem; font-weight: 300; line-height: 1.35; color: rgba(255,255,255,0.82); margin: 0.1rem 0 0; } .card__tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; } .card__tag { font-size: 0.6875rem; letter-spacing: 0.05em; text-transform: uppercase; font-family: var(--font-display); font-weight: 500; color: var(--sand); border: 1px solid rgba(214,200,174,0.45); border-radius: 999px; padding: 0.15rem 0.55rem; } /* Badge, top-right of a tile: play arrow for video, stacked frames + count for a photo series. Tells you what's behind the tile before you click. */ .card__badge { position: absolute; top: 0.75rem; right: 0.75rem; min-width: 34px; height: 34px; padding: 0 0.55rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; background: rgba(10,10,9,0.58); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.35); font-family: var(--font-display); font-size: 0.75rem; font-weight: 600; color: #fff; line-height: 1; } .card__badge svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 1.4; } .card__badge svg .solid { fill: #fff; stroke: none; } .card__badge--play { padding: 0; width: 34px; } .card__badge--play svg { width: 11px; height: 11px; margin-left: 2px; } /* Filtering states — fade out, reflow, fade in with a light stagger. */ .card.is-hidden { display: none; } .grid.is-filtering .card { opacity: 0; transform: translateY(8px); } .card.is-entering { opacity: 0; transform: translateY(8px); } .grid-empty { padding: 3rem 0; text-align: center; color: var(--text-muted); } /* -------------------------------------------------------------------------- 8. LIGHTBOX -------------------------------------------------------------------------- */ .lightbox { position: fixed; inset: 0; z-index: 300; display: none; place-items: center; padding: clamp(1rem, 4vw, 3rem); background: rgba(8, 8, 7, 0.93); backdrop-filter: blur(6px); } .lightbox.is-open { display: grid; } .lightbox__dialog { position: relative; width: min(1100px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: 1rem; } .lightbox__stage { position: relative; width: 100%; background: #000; border-radius: var(--radius); overflow: hidden; } .lightbox__stage--video { aspect-ratio: 16/9; } .lightbox__stage iframe { width: 100%; height: 100%; border: 0; } .lightbox__stage img { width: 100%; max-height: 72svh; object-fit: contain; margin-inline: auto; } .lightbox__caption { color: var(--text); } .lightbox__caption h2 { font-size: var(--fs-h3); color: var(--sand); margin-bottom: 0.15rem; } .lightbox__caption p { margin: 0; font-size: var(--fs-small); } /* "4 / 18" counter — only shown while stepping through a photo series. */ .lightbox__counter { font-family: var(--font-display); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; color: var(--sand); opacity: 0.85; margin-top: 0.35rem; } .lightbox__counter[hidden] { display: none; } /* Controls — all 44px+ for touch */ .lb-btn { position: absolute; z-index: 2; width: 46px; height: 46px; display: grid; place-items: center; background: rgba(20,19,17,0.7); border: 1px solid var(--line); border-radius: 50%; color: var(--sand); cursor: pointer; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); } .lb-btn:hover { background: var(--sand); color: var(--ink-on-sand); } .lb-close { top: calc(-46px - 0.5rem); right: 0; } .lb-prev { left: 0.5rem; top: 50%; translate: 0 -50%; } .lb-next { right: 0.5rem; top: 50%; translate: 0 -50%; } .lb-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; } /* --- Lightbox on phones ------------------------------------------------- The video is back to a plain 16:9 box — YouTube's native ratio, and its player scales down cleanly, so it needs no special sizing. The arrows stay below the video though. That was never a Drive fix: at 50% height they sat exactly where YouTube puts its own controls, so a tap meant for play landed on our arrow instead. Delete this block's .lb-prev/.lb-next rules to put them back on the sides. ------------------------------------------------------------------------ */ @media (max-width: 767px) { .lb-close { top: -3.25rem; } .lightbox__dialog { padding-bottom: 3.75rem; } /* room for the arrows */ .lb-prev, .lb-next { top: auto; bottom: 0; translate: none; } .lb-prev { left: 50%; margin-left: -3.25rem; } .lb-next { right: 50%; margin-right: -3.25rem; } } body.is-locked { overflow: hidden; } /* -------------------------------------------------------------------------- 9. CONTACT -------------------------------------------------------------------------- */ /* Name / Phone / Email as one row, sitting directly under the subtitle rule. Stacks on mobile, where three columns would crush the email address. */ .contact__list { list-style: none; margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.5rem clamp(2rem, 6vw, 5rem); align-items: flex-start; } .contact__item { flex: 0 1 auto; min-width: 0; } @media (max-width: 560px) { .contact__list { flex-direction: column; gap: 1.5rem; } } .contact__label { display: block; font-family: var(--font-display); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.4rem; } .contact__value { font-size: clamp(1.0625rem, 2vw, 1.25rem); font-weight: 500; color: var(--text-strong); display: inline-flex; align-items: center; min-height: 44px; border-bottom: 1px solid transparent; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); } a.contact__value:hover { color: var(--sand); border-bottom-color: var(--sand); } /* No footer styles: the site is nav-only. Contact details live on /contact. */