/* ============================================================ JZ CREATES — SUB-PAGE SYSTEM Loaded AFTER css/styles.css. Everything is scoped under `.jzp` so nothing leaks into the homepage or the WP theme/Elementor globals. Sub-pages share the homepage tokens, nav, footer, buttons and logo; this file adds only what sub-pages need. ============================================================ */ /* ---------- no-JS safety ---------- Base state is VISIBLE. The hidden states only apply once JS has confirmed itself by putting `jzc-js` on . If JS fails the page still reads. (Same contract as the homepage, section 4.6.) */ .jzp .reveal { opacity: 1; transform: none; } html.jzc-js .jzp .reveal { opacity: 0; transform: translateY(28px); } html.jzc-js .jzp .reveal.is-in { opacity: 1; transform: none; transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); } /* Transitions are declared on the BASE (hidden) state, not on `.is-in`. Declaring them only on the end state meant that when the class landed in the same style recalculation as first paint there was no "from" to animate out of, and the accent word simply appeared. */ /* The heading itself is hidden until pages.js has split it. Only the .ch spans carry the hidden state, and they do not exist until JS runs, so the raw text used to paint, disappear, then animate back in. */ html.jzc-js .jzp .split { visibility: hidden; } html.jzc-js .jzp .split.is-split { visibility: visible; } html.reduced .jzp .split { visibility: visible; } html.jzc-js .jzp .split .ch { display: inline-block; vertical-align: baseline; opacity: 0; filter: blur(10px); transform: translateY(24px); transition: opacity 0.8s var(--ease-out), filter 0.8s var(--ease-out), transform 0.8s var(--ease-out); } html.jzc-js .jzp .split.is-in .ch { opacity: 1; filter: blur(0); transform: none; } /* The gradient phrase is wrapped in a plain span by pages.js and THAT span is what animates. Transforming or filtering the gradient element itself is what kept breaking it: an element using background-clip:text with a transparent text fill drops its gradient the moment a filter or 3D transform creates a new rendering context. The wrapper has no background, so it is safe to move, and the gradient inside is never touched. */ html.jzc-js .jzp .split .ch.chwrap { filter: none; } html.jzc-js .jzp .split.is-in .ch.chwrap { filter: none; } html.jzc-js .jzp .split .grad { opacity: 1; filter: none; transform: none; } html.reduced .jzp .reveal, html.reduced .jzp .split .ch { opacity: 1; filter: none; transform: none; transition: none; } /* ---------- headings run the full container (section 4.2 NEW) ---------- */ .jzp .section-head h2 { max-width: none; } .jzp .section-head__sub { max-width: 62ch; } .jzp section { position: relative; } /* ============================================================ NAV — shared, static, with a pill that follows the cursor ============================================================ */ /* No entrance animation and NO size change on scroll: both moved the bar by a few pixels, which reads as a jitter. The blurred translucent bar stays exactly as it is from first paint. */ .jzp .nav, .jzp .nav.is-scrolled { padding: 1.1rem 0; background: rgba(12, 12, 14, 0.72); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); transition: none; } /* No gap: a space between items is a dead zone where nothing is hovered, and the pill snapped back to the current page each time the pointer crossed it. The links carry their own padding, so they still read as separate. */ .jzp .nav__links { position: relative; gap: 0; align-items: center; } .jzp .nav__links a { position: relative; z-index: 1; padding: 0.55rem 1.1rem; border-radius: 999px; transition: color 0.3s var(--ease-out); } .jzp .nav__links a:hover, .jzp .nav__links a.is-current { color: var(--ink); } /* One pill for the whole menu. JS moves it to the hovered link and parks it on the current page when the pointer leaves, so it reads as a single object travelling across the menu rather than a per-link background. */ .nav__pill { position: absolute; top: 50%; left: 0; height: 2.2rem; width: 0; transform: translateY(-50%); border-radius: 999px; background: rgba(246, 243, 239, 0.1); border: 1px solid rgba(246, 243, 239, 0.08); opacity: 0; pointer-events: none; z-index: 0; transition: left 0.42s var(--ease-out), width 0.42s var(--ease-out), opacity 0.3s; } .nav__pill.is-on { opacity: 1; } @media (prefers-reduced-motion: reduce) { .nav__pill { transition: opacity 0.2s; } } /* ============================================================ PAGE HERO — full-height, looping darkened video, type in the middle ============================================================ */ .phero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; padding: 10rem var(--pad) 6rem; /* Black ground, no still underneath. Before the player is ready the hero is simply black rather than showing a photo that then swaps for video. */ background: #000; } /* Full-bleed 16:9 video, cropped to whatever the viewport is. */ .phero__video { position: absolute; inset: 0; z-index: 0; overflow: hidden; opacity: 0; transition: opacity 1.6s var(--ease-out); } /* fades up from the black ground rather than cutting in */ .phero__video.is-ready { opacity: 1; } .phero__video iframe { position: absolute; top: 50%; left: 50%; width: 100vw; height: 56.25vw; min-height: 100vh; min-width: 177.78vh; transform: translate(-50%, -50%); border: 0; pointer-events: none; } /* Veil over the video. Matches the flat 45% the homepage uses on its own video sections, so the footage stays readable instead of being crushed. The only extra is a short fade to --bg at the very bottom so the hero melts into the next section rather than ending on a hard edge. */ .phero__scrim { position: absolute; inset: 0; z-index: 1; /* Flat veil only. A darker band across the top read as a gradient that disappeared once the video faded up, so there is no vertical ramp here beyond the short fade into the next section. */ background: linear-gradient(180deg, transparent 0%, transparent 72%, var(--bg) 100%), rgba(6, 6, 7, 0.45); } .phero__inner { position: relative; z-index: 2; max-width: 1500px; } /* The headline is meant to hold one line on desktop. It is allowed to wrap below 900px, where nowrap would force the type down to an unreadable size. */ .phero h1 { font-size: clamp(2.6rem, 6vw, 5.6rem); line-height: 1.04; font-weight: 500; white-space: nowrap; } .phero__sub { margin: 1.6rem auto 0; max-width: 62ch; color: var(--muted); font-size: clamp(1.1rem, 1.35vw, 1.35rem); line-height: 1.6; } @media (max-width: 900px) { .phero h1 { white-space: normal; font-size: clamp(2.4rem, 8vw, 3.4rem); } } @media (max-width: 767px) { .phero { min-height: 92vh; padding: 8.5rem var(--pad) 4.5rem; } } /* ---------- generic section rhythm ---------- */ .psec { padding: 7rem 0; } .psec--tight { padding: 4.5rem 0; } .pwrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); } @media (max-width: 767px) { .psec { padding: 5rem 0; } } /* Section divider: a dark red hairline, present but not loud. It fades to nothing at both ends so it never reads as a drawn rule across the page. */ .psec + .psec::before, .psec + .pcta::before, .pcta + .psec::before, .psec + .located::before, .located + .psec::before { content: ""; position: absolute; top: 0; left: var(--pad); right: var(--pad); height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 36, 56, 0.21) 20%, rgba(214, 0, 237, 0.15) 50%, rgba(255, 36, 56, 0.21) 80%, transparent); } /* ============================================================ NUMBER SOP House rule: every step/index number on the site is BIG, italic Playfair, crimson, with the red-into-magenta glow. Matches `.system__num` on the homepage. Never small, never grey. ============================================================ */ /* Two classes so this out-specifies the card body rules (`.svc p`, `.step p`), which are one class plus one element and were silently shrinking it. */ .jzp .jznum, .jzp p.jznum { font-family: var(--font-display); font-style: italic; font-size: clamp(2.2rem, 2.7vw, 2.7rem); line-height: 1; color: var(--crimson); text-shadow: 0 0 18px rgba(255, 36, 56, 0.65), 0 0 42px rgba(214, 0, 237, 0.35); margin-bottom: 1.4rem; letter-spacing: 0.01em; } /* ============================================================ SERVICES PAGE ============================================================ */ .svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; } @media (max-width: 900px) { .svc-grid { grid-template-columns: 1fr; } } .svc { position: relative; display: flex; flex-direction: column; padding: 3rem 2.6rem 2.6rem; border-radius: 22px; border: 1px solid var(--line); background: linear-gradient(160deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); overflow: hidden; transition: transform 0.45s var(--ease-out), border-color 0.45s; } .svc::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%), rgba(140, 50, 230, 0.18), transparent 45%); opacity: 0; transition: opacity 0.4s; pointer-events: none; } .svc > * { position: relative; z-index: 1; } .svc:hover { transform: translateY(-6px); border-color: rgba(214, 0, 237, 0.4); } .svc:hover::before { opacity: 1; } .svc h3 { font-size: clamp(1.7rem, 2.4vw, 2.3rem); font-weight: 500; margin-bottom: 0.9rem; } .svc p { color: var(--muted); font-size: 1.05rem; line-height: 1.6; margin-bottom: 1.6rem; } .svc ul { margin: 0 0 2.2rem; list-style: none; padding: 0; } .svc ul li { position: relative; padding: 0.7rem 0 0.7rem 1.4rem; font-size: 0.98rem; color: var(--muted); border-bottom: 1px solid var(--line); } .svc ul li:last-child { border-bottom: none; } .svc ul li::before { content: ""; position: absolute; left: 0; top: 1.15rem; width: 6px; height: 6px; border-radius: 50%; background: var(--crimson); } /* The card is an , so this is a button-looking span, not a nested link. */ .svc__link { margin-top: auto; align-self: flex-start; } /* ---------- "The full studio" drag carousel ---------- Same interaction as the homepage full-studio strip: auto-scrolls slowly, and you can grab it and throw it. Cards are deliberately large. */ .disc-marquee { position: relative; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; cursor: grab; -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent); } .disc-marquee::-webkit-scrollbar { display: none; } .disc-marquee.is-drag { cursor: grabbing; } /* vertical padding so the hover glow and border are not clipped by the scroller, which needs overflow hidden on the cross axis */ .disc-track { display: flex; gap: 1.4rem; width: max-content; padding: 1.6rem 0; } .disc { position: relative; display: flex; flex-direction: column; gap: 0.8rem; width: 420px; min-height: 300px; flex-shrink: 0; padding: 2.8rem 2.4rem 2.4rem; border-radius: 20px; border: 1px solid var(--line); background: linear-gradient(160deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)); overflow: hidden; transition: border-color 0.4s; } .disc::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%), rgba(140, 50, 230, 0.18), transparent 45%); opacity: 0; transition: opacity 0.45s; pointer-events: none; } .disc > * { position: relative; z-index: 1; } .disc:hover { border-color: rgba(214, 0, 237, 0.4); } .disc:hover::before { opacity: 1; } .disc h4 { font-family: var(--font-display); font-size: 1.9rem; font-weight: 500; } .disc p { color: var(--muted); font-size: 1.05rem; line-height: 1.6; } .disc--more { align-items: center; justify-content: center; text-align: center; border-style: dashed; } .disc--more h4 { font-style: italic; color: var(--muted); } @media (max-width: 560px) { .disc { width: 78vw; min-height: 240px; padding: 2.2rem 1.8rem; } .disc h4 { font-size: 1.5rem; } } /* ---------- process strip ---------- */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.4rem; } @media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); gap: 2.6rem 2rem; } } @media (max-width: 520px) { .steps { grid-template-columns: 1fr; } } .step { position: relative; padding-top: 0.5rem; border-top: 1px solid var(--line); } .step h4 { font-size: 1.35rem; font-weight: 500; margin-bottom: 0.6rem; } .step p { color: var(--muted); font-size: 1.02rem; line-height: 1.55; } /* ============================================================ WORK PAGE — filter bar + portfolio grid ============================================================ */ .filters { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 3.4rem; justify-content: center; } .filter { font-family: var(--font-body); font-size: 0.85rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 0.7rem 1.4rem; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); cursor: pointer; transition: color 0.3s, border-color 0.3s, background 0.3s; } .filter:hover { color: var(--ink); border-color: rgba(246, 243, 239, 0.3); } .filter.is-active { color: #fff; border-color: transparent; background: var(--grad); } .filter__count { opacity: 0.6; margin-left: 0.45rem; font-size: 0.78rem; } .work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; } @media (max-width: 1100px) { .work-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 700px) { .work-grid { grid-template-columns: 1fr; } } .wcard { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); transition: transform 0.45s var(--ease-out), border-color 0.45s, box-shadow 0.45s; } .wcard:hover { transform: translateY(-6px); border-color: rgba(214, 0, 237, 0.45); box-shadow: 0 0 42px rgba(214, 0, 237, 0.22); } .wcard__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-2); } .wcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease-out); } .wcard:hover .wcard__media img { transform: scale(1.05); } .wcard__body { padding: 1.6rem 1.6rem 1.8rem; display: flex; flex-direction: column; flex: 1; } .wcard h3 { font-size: 1.45rem; font-weight: 500; margin-bottom: 0.55rem; } .wcard p { color: var(--muted); font-size: 0.96rem; line-height: 1.55; margin-bottom: 1.3rem; } .wcard__tags { margin-top: auto; display: flex; flex-wrap: wrap; gap: 0.4rem; } .wtag { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding: 0.35rem 0.75rem; border-radius: 999px; border: 1px solid rgba(246, 243, 239, 0.14); } /* Filtering hides cards outright rather than fading them: a half-visible grid of "other" work reads as broken, not as context. */ .wcard[hidden] { display: none !important; } .work-empty { color: var(--muted); padding: 3rem 0; font-size: 1.05rem; text-align: center; } /* ============================================================ STUDIO PAGE — YouTube grid + article list ============================================================ */ .yt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; } @media (max-width: 1100px) { .yt-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 700px) { .yt-grid { grid-template-columns: 1fr; } } .ytc { border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); transition: transform 0.45s var(--ease-out), border-color 0.45s, box-shadow 0.45s; } .ytc:hover { transform: translateY(-5px); border-color: rgba(214, 0, 237, 0.45); box-shadow: 0 0 38px rgba(214, 0, 237, 0.2); } .ytc__media { position: relative; aspect-ratio: 16 / 9; background: var(--bg-2); cursor: pointer; overflow: hidden; } .ytc__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease-out); } .ytc:hover .ytc__media img { transform: scale(1.06); } .ytc__media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Custom play button — deliberately ours, not the YouTube chrome, so the grid keeps the brand look until the moment someone actually presses play. */ .ytc__play { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity 0.3s; } .ytc__play span { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); box-shadow: 0 10px 40px rgba(255, 36, 56, 0.35); transition: transform 0.4s var(--ease-out); } .ytc__play span::after { content: ""; border-left: 17px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-left: 4px; } .ytc:hover .ytc__play span { transform: scale(1.08); } .ytc__body { padding: 1.3rem 1.4rem 1.5rem; } .ytc h3 { font-size: 1.15rem; font-weight: 500; line-height: 1.35; } /* ---------- article rows ---------- Big covers, and the same rollover as the homepage journal: the row lifts its background and the cover scales up inside its frame. */ .arts { display: grid; gap: 0.4rem; } .art { display: grid; grid-template-columns: 340px 1fr auto; gap: 2.6rem; align-items: center; padding: 1.8rem 1rem; border-radius: 16px; border-bottom: 1px solid var(--line); transition: background 0.35s var(--ease-out); } .art:hover { background: rgba(255, 255, 255, 0.025); } .art__thumb { display: block; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--bg-2); } .art__thumb img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 0.9s var(--ease-out); } .art:hover .art__thumb img { transform: scale(1.12); } .art__meta { min-width: 0; } .art time { font-size: 0.84rem; color: var(--muted); letter-spacing: 0.06em; } .art h3 { font-size: clamp(1.35rem, 1.9vw, 1.9rem); font-weight: 500; margin-top: 0.5rem; line-height: 1.3; } .art__arrow { font-size: 1.5rem; color: var(--muted); transition: color 0.3s, transform 0.3s var(--ease-out); } .art:hover .art__arrow { color: var(--crimson); transform: translateX(6px); } .art[hidden] { display: none !important; } @media (max-width: 980px) { .art { grid-template-columns: 240px 1fr auto; gap: 1.8rem; } } @media (max-width: 700px) { .art { grid-template-columns: 1fr; gap: 1rem; padding: 1.4rem 0; } .art__arrow { display: none; } } /* ---------- pager: cycles through every article ---------- */ .pager { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 3rem; flex-wrap: wrap; } .pager button { min-width: 2.6rem; height: 2.6rem; padding: 0 0.8rem; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); color: var(--muted); font-family: var(--font-body); font-size: 0.92rem; cursor: pointer; transition: color 0.3s, border-color 0.3s, background 0.3s; } .pager button:hover:not(:disabled) { color: var(--ink); border-color: rgba(246, 243, 239, 0.3); } .pager button.is-active { color: #fff; border-color: transparent; background: var(--grad); } .pager button:disabled { opacity: 0.3; cursor: default; } .pager__gap { color: var(--muted); padding: 0 0.2rem; } /* ============================================================ CONTACT PAGE ============================================================ */ .contact-layout { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 4rem; align-items: start; } @media (max-width: 980px) { .contact-layout { grid-template-columns: 1fr; gap: 3rem; } } .form-shell { border-radius: 22px; border: 1px solid var(--line); background: linear-gradient(160deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: 2.4rem 2rem; } /* GoHighLevel posts its own height and we resize to it in JS; the min-height is only the fallback for when that message never arrives (section 6). */ .form-shell iframe { width: 100%; border: 0; min-height: 760px; display: block; } .cinfo { display: grid; gap: 1.2rem; } .cinfo__row { display: flex; gap: 1rem; align-items: flex-start; padding: 1.5rem 1.6rem; border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); transition: border-color 0.4s; } .cinfo__row:hover { border-color: rgba(214, 0, 237, 0.4); } .cinfo__ico { color: var(--crimson); flex: none; margin-top: 2px; } .cinfo__row h4 { font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.4rem; } .cinfo__row p, .cinfo__row a { font-size: 1.05rem; color: var(--ink); } .cinfo__row a:hover { color: var(--crimson); } .cinfo__note { color: var(--muted); font-size: 0.95rem; line-height: 1.6; } .cinfo__socials { display: flex; gap: 0.7rem; margin-top: 0.4rem; } .cinfo__socials a { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); color: var(--muted); transition: color 0.3s, border-color 0.3s, transform 0.3s var(--ease-out); } .cinfo__socials a:hover { color: var(--ink); border-color: rgba(214, 0, 237, 0.5); transform: translateY(-3px); } /* ---------- located in LA, working everywhere ---------- */ .located { text-align: center; } .located h2 { font-size: clamp(2.2rem, 4.6vw, 3.8rem); line-height: 1.08; } .located p { margin: 1.4rem auto 0; max-width: 58ch; color: var(--muted); font-size: 1.15rem; line-height: 1.65; } .located__meta { margin-top: 2.4rem; display: flex; justify-content: center; gap: 0.6rem; flex-wrap: wrap; } .located__chip { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding: 0.6rem 1.2rem; border-radius: 999px; border: 1px solid rgba(246, 243, 239, 0.14); } /* ---------- reviews ---------- */ .revs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; } @media (max-width: 1100px) { .revs { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .revs { grid-template-columns: 1fr; } } /* Cards stretch to the tallest in the row (grid default) and the footer is pushed to the bottom, so every name sits on the same line no matter how long the quote above it runs. */ .rev { display: flex; flex-direction: column; padding: 2.4rem 2.4rem 2.2rem; border-radius: 20px; border: 1px solid var(--line); background: linear-gradient(160deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: border-color 0.4s, transform 0.4s var(--ease-out); } .rev:hover { border-color: rgba(214, 0, 237, 0.4); transform: translateY(-4px); } .rev__stars { color: #ffd98a; letter-spacing: 0.3em; font-size: 2rem; line-height: 1; margin-bottom: 1.4rem; text-shadow: 0 0 18px rgba(255, 210, 130, 0.55), 0 0 40px rgba(255, 190, 90, 0.25); } .jzp .rev p { font-family: var(--font-display); font-size: clamp(1.15rem, 1.7vw, 1.45rem); font-weight: 380; line-height: 1.4; margin-bottom: 1.8rem; color: var(--ink); } .rev footer { margin-top: auto; display: flex; flex-direction: column; gap: 0.2rem; } .rev footer strong { font-size: 1.02rem; font-weight: 600; } .rev footer span { font-size: 0.92rem; color: var(--muted); } .rev-badges { margin-top: 3rem; display: flex; justify-content: center; align-items: center; gap: 1rem; flex-wrap: wrap; color: var(--muted); font-size: 0.95rem; letter-spacing: 0.06em; } .rev-badges a { color: var(--muted); border-bottom: 1px solid transparent; transition: color 0.3s, border-color 0.3s; } .rev-badges a:hover { color: var(--gold); border-color: var(--gold); } /* ---------- closing CTA band ---------- */ .pcta { text-align: center; padding: 7rem var(--pad); } .pcta h2 { font-size: clamp(2.4rem, 5.4vw, 4.4rem); line-height: 1.06; } .pcta p { margin: 1.4rem auto 2.6rem; max-width: 54ch; color: var(--muted); font-size: 1.15rem; line-height: 1.6; } .pactions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } /* ============================================================ FOOTER — same measure as the header The footer previously put --pad on the outer element and the 1600px cap inside it, so its content sat on a different left edge from the nav and every section. Padding now lives on the capped rows themselves, which is exactly what .nav__inner and .pwrap do. ============================================================ */ .jzp .footer { padding: 3.4rem 0 2.4rem; } .jzp .footer__top, .jzp .footer__bottom { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); } /* ============================================================ MOBILE MENU Same type as the desktop menu rather than the display face, and the current page carries the same grey pill the desktop nav uses. ============================================================ */ .jzp .menu__links { gap: 0.5rem; } .jzp .menu__links a { font-family: var(--font-body); font-size: 1.05rem; font-weight: 450; letter-spacing: 0.04em; color: var(--muted); padding: 0.8rem 1.8rem; border-radius: 999px; transition: color 0.3s, background 0.3s; } .jzp .menu__links a:hover { color: var(--ink); } .jzp .menu__links a.is-current { color: var(--ink); background: rgba(246, 243, 239, 0.1); border: 1px solid rgba(246, 243, 239, 0.08); } /* the CTA is a real gradient button, not a red text link */ .jzp .menu__cta { font-family: var(--font-body) !important; font-size: 0.95rem !important; font-weight: 500; color: #fff !important; background: var(--grad); border: none !important; padding: 1rem 2.2rem !important; border-radius: 999px; margin-top: 1.6rem; box-shadow: 0 12px 40px rgba(255, 36, 56, 0.28); } .jzp .menu__cta:hover { color: #fff !important; } /* ============================================================ CONTACT — location block with a rotating square ============================================================ */ .loc-layout { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 4rem; align-items: center; } @media (max-width: 900px) { .loc-layout { grid-template-columns: 1fr; gap: 2.6rem; } } .loc-copy { text-align: left; } .loc-copy h2 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); line-height: 1.08; } .loc-copy > p { margin-top: 1.4rem; max-width: 52ch; color: var(--muted); font-size: 1.12rem; line-height: 1.65; } .loc-copy .located__meta { justify-content: flex-start; } .located__meta { margin-top: 2.2rem; display: flex; gap: 0.6rem; flex-wrap: wrap; } .located__chip { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding: 0.6rem 1.2rem; border-radius: 999px; border: 1px solid rgba(246, 243, 239, 0.14); } /* One square frame; the images inside cross-fade, so nothing reflows. */ .loc-shot { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 620px; margin-inline: auto; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); } .loc-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity 1.1s var(--ease-out), transform 6s linear; } .loc-shot img.is-on { opacity: 1; transform: scale(1.1); } .loc-shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(6, 6, 7, 0.55) 100%); pointer-events: none; } .loc-shot__cap { position: absolute; left: 1.6rem; bottom: 1.4rem; z-index: 1; font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); } /* ============================================================ ABOUT block (bottom of Contact) ============================================================ */ .about-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 3rem; } @media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } } .about-card { padding: 2.2rem 2rem; border-radius: 18px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); transition: border-color 0.4s, transform 0.4s var(--ease-out); } .about-card:hover { border-color: rgba(214, 0, 237, 0.4); transform: translateY(-4px); } .about-card h4 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; margin-bottom: 0.7rem; } .about-card p { color: var(--muted); font-size: 1.02rem; line-height: 1.6; } .jzp .about-lead { max-width: 70ch; color: var(--muted); font-size: clamp(1.12rem, 1.4vw, 1.32rem); line-height: 1.7; } /* ============================================================ NAV DROPDOWNS Services lists the four offers; Studio jumps to sections on its own page. Opens on hover and on keyboard focus, so it is reachable without a pointer. ============================================================ */ .jzp .nav__item { position: relative; display: flex; align-items: center; } .jzp .nav__links a.nav__top { position: relative; z-index: 1; padding: 0.55rem 1.1rem; border-radius: 999px; transition: color 0.3s var(--ease-out); } .jzp .nav__item--has > a.nav__top::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 0.45rem; vertical-align: middle; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.3s var(--ease-out); } .jzp .nav__item--has:hover > a.nav__top::after, .jzp .nav__item--has.is-open > a.nav__top::after { transform: translateY(1px) rotate(225deg); } .nav__drop { position: absolute; top: 100%; left: 50%; z-index: 5; min-width: 320px; margin-top: 0.9rem; padding: 0.6rem; border-radius: 18px; border: 1px solid rgba(246, 243, 239, 0.12); background: rgba(14, 14, 17, 0.92); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55); opacity: 0; visibility: hidden; transform: translate(-50%, -8px); transition: opacity 0.28s var(--ease-out), transform 0.28s var(--ease-out), visibility 0.28s; } .nav__drop--sm { min-width: 260px; } /* Hover bridge across the gap between the bar and the panel. It must sit ENTIRELY inside the gap. An earlier version started 1.4rem above a panel that is only 0.9rem below the bar, so it overlapped the bottom edge of the bar across a wide span -- including the Work link. Hovering the lower half of Work therefore counted as hovering the Services panel, which reopened it, and the menu flickered in and out. */ .nav__drop::before { content: ""; position: absolute; left: -120px; right: -120px; top: -0.9rem; height: 0.9rem; } .jzp .nav__item--has:hover .nav__drop, .jzp .nav__item--has.is-open .nav__drop, .jzp .nav__item--has:focus-within .nav__drop { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .jzp .nav__drop a { display: block; padding: 0.75rem 0.95rem; border-radius: 12px; color: var(--muted); transition: background 0.25s, color 0.25s; } .jzp .nav__drop a:hover { background: rgba(246, 243, 239, 0.07); color: var(--ink); } .jzp .nav__drop strong { display: block; font-size: 0.95rem; font-weight: 500; color: var(--ink); } .jzp .nav__drop span { display: block; margin-top: 0.15rem; font-size: 0.82rem; color: var(--muted); } .jzp .nav__drop-all { margin-top: 0.25rem; border-top: 1px solid rgba(246, 243, 239, 0.08); border-radius: 0 0 12px 12px; font-size: 0.85rem; color: var(--crimson) !important; } /* mobile: sub-items sit under their parent, indented and quieter */ .jzp .menu__links a.menu__sub { font-size: 0.92rem; padding: 0.45rem 1.8rem; color: rgba(192, 187, 178, 0.75); } .jzp .menu__links a.menu__sub:hover { color: var(--ink); } /* ============================================================ CONTACT — section head above the form, and the location block ============================================================ */ /* The location copy is a normal left-aligned column; nothing here should inherit the centred alignment used by other intro blocks. */ .jzp .located { text-align: left; } .jzp .loc-copy { text-align: left; padding: 0; } .jzp .loc-copy .eyebrow { margin-left: 0; } /* the shared `.located p` rule uses auto side margins, which centred this paragraph inside its column and read as an indent */ .jzp .loc-copy p { margin-left: 0; margin-right: 0; max-width: 52ch; } /* ---------- About: copy left, video right, matched heights ---------- */ .about-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 3.4rem; align-items: center; } @media (max-width: 900px) { .about-layout { grid-template-columns: 1fr; gap: 2.4rem; } } .about-copy { display: flex; flex-direction: column; justify-content: center; } .about-copy h2 { font-size: clamp(2.1rem, 4vw, 3.4rem); line-height: 1.08; } .jzp .about-copy .about-lead { margin-top: 1.4rem; max-width: 56ch; } /* holds 16:9 rather than stretching to the copy column, which distorted it */ .about-media { position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); } .about-media__inner { position: absolute; inset: 0; } .about-media iframe { width: 100%; height: 100%; border: 0; display: block; } /* the cover reuses .ytc__media, which is 16:9; inside a taller frame that left a gap under the video, so it is stretched to the frame instead */ .about-media .ytc__media { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; border-radius: 0; } .about-media__cover { position: absolute; inset: 0; cursor: pointer; } .about-media__cover img { width: 100%; height: 100%; object-fit: cover; } /* ---------- dropdown: opening is driven by JS, not :hover ---------- The pure-CSS version flickered when the pointer crossed between items, because the open panel sat under the pointer path. */ .jzp .nav__item--has:hover .nav__drop, .jzp .nav__item--has:focus-within .nav__drop { opacity: 0; visibility: hidden; transform: translate(-50%, -8px); } .jzp .nav__item--has.is-open .nav__drop { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .jzp .nav__item--has:hover > a.nav__top::after { transform: translateY(-2px) rotate(45deg); } .jzp .nav__item--has.is-open > a.nav__top::after { transform: translateY(1px) rotate(225deg); } /* ============================================================ MOBILE MENU — accordion sub-menu + close button ============================================================ */ .menu__close { position: absolute; top: 1.4rem; right: 1.4rem; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(246, 243, 239, 0.16); background: transparent; cursor: pointer; z-index: 2; } .menu__close::before, .menu__close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 1.5px; background: var(--ink); transform-origin: center; } .menu__close::before { transform: translate(-50%, -50%) rotate(45deg); } .menu__close::after { transform: translate(-50%, -50%) rotate(-45deg); } .menu__close:hover { border-color: rgba(214, 0, 237, 0.5); } .jzp .menu__group { display: flex; flex-direction: column; align-items: center; } .jzp .menu__toggle { font-family: var(--font-body); font-size: 1.05rem; font-weight: 450; letter-spacing: 0.04em; color: var(--muted); background: transparent; border: 0; padding: 0.8rem 1.8rem; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; transition: color 0.3s, background 0.3s; } .jzp .menu__toggle::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.3s var(--ease-out); } .jzp .menu__group.is-open .menu__toggle { color: var(--ink); background: rgba(246, 243, 239, 0.08); } .jzp .menu__group.is-open .menu__toggle::after { transform: translateY(1px) rotate(225deg); } /* height animates so the sheet expands rather than jumping. A fixed max-height is used rather than the 0fr grid trick, which does not collapse when the list has several direct children. */ .menu__sublist { width: 100%; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.38s var(--ease-out), opacity 0.3s var(--ease-out); } .menu__group.is-open .menu__sublist { max-height: 22rem; opacity: 1; } /* Sub-items read as a different level: left aligned, smaller, in the display face, and marked with an underline rather than the pill the top level uses. */ .jzp .menu__sublist { text-align: left; padding-left: 1.4rem; border-left: 1px solid rgba(246, 243, 239, 0.12); margin: 0.4rem auto 0.6rem; max-width: 21rem; } .jzp .menu__links a.menu__sub { /* block so each sits on its own line, fit-content so the underline hugs the text rather than running the full width of the sheet */ display: block; width: fit-content; text-align: left; font-family: var(--font-display); font-size: 1.02rem; font-weight: 400; letter-spacing: 0.01em; color: rgba(192, 187, 178, 0.8); padding: 0.42rem 0; border-radius: 0; background: none; border-bottom: 1px solid transparent; } .jzp .menu__links a.menu__sub:hover, .jzp .menu__links a.menu__sub.is-current { color: var(--ink); background: none; border-bottom-color: var(--crimson); } /* ---------- studio reels under the full-studio strip ---------- */ .studio-reels { margin-top: 2.6rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; } @media (max-width: 760px) { .studio-reels { grid-template-columns: 1fr; } } .studio-reel { border-radius: 20px; overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); } .studio-reel .ytc__media { aspect-ratio: 16 / 9; } /* ============================================================ CHROME BASE — everything the shared nav and footer need These live in styles.css for the sub-pages, but the offer pages scope their own CSS under `.jzc` and never load styles.css, so the nav had no layout there at all. Defining it here under `.jzp` makes the chrome self-contained and safe to drop onto any page. ============================================================ */ .jzp { --bg: #0c0c0e; --bg-2: #16161a; --ink: #f6f3ef; --muted: #c0bbb2; --line: rgba(246, 243, 239, 0.09); --crimson: #ff2438; --gold: #e8c47c; --grad: linear-gradient(92deg, #ff0000 0%, #d600ed 100%); --font-display: "Playfair Display", Georgia, serif; --font-body: "Inter", system-ui, sans-serif; --font-logo: "Crimson Pro", Georgia, serif; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --maxw: 1600px; --pad: 5%; } .jzp .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 300; } .jzp .nav__inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); display: flex; align-items: center; justify-content: space-between; gap: 2rem; } .jzp .nav__logo { display: inline-flex; align-items: baseline; gap: 0.5rem; text-decoration: none; } .jzp .nav__logo-jz { font-family: var(--font-logo); font-weight: 500; font-size: 1.5rem; line-height: 1; color: var(--ink); } .jzp .nav__logo-creates { font-family: var(--font-logo); font-style: italic; font-weight: 600; font-size: 1.35rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0 0.1em 0.06em 0; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .jzp .nav__links { display: flex; } .jzp .nav__links a { font-family: var(--font-body); font-size: 0.98rem; font-weight: 450; letter-spacing: 0.04em; color: var(--muted); text-decoration: none; } .jzp .nav__right { display: flex; align-items: center; gap: 1rem; } .jzp .btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-body); font-size: 0.9rem; font-weight: 500; letter-spacing: 0.03em; padding: 0.95rem 1.9rem; border-radius: 999px; text-decoration: none; cursor: pointer; transition: transform 0.35s var(--ease-out), box-shadow 0.35s, border-color 0.35s; } .jzp .btn--primary { background: var(--grad); color: #fff !important; border: none; } .jzp .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(255, 36, 56, 0.35); } .jzp .nav__cta { padding: 0.6rem 1.35rem; font-size: 0.84rem; } .jzp .nav__burger { display: none; flex-direction: column; gap: 6px; background: none; border: none; padding: 0.5rem; cursor: pointer; } .jzp .nav__burger span { width: 24px; height: 1.5px; background: var(--ink); transition: transform 0.35s, opacity 0.35s; } .jzp .nav__burger.is-open span:first-child { transform: translateY(3.75px) rotate(45deg); } .jzp .nav__burger.is-open span:last-child { transform: translateY(-3.75px) rotate(-45deg); } .jzp .menu { position: fixed; inset: 0; z-index: 250; background: rgba(6, 6, 7, 0.94); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); display: flex; align-items: flex-start; justify-content: center; padding: 7.5rem 1.5rem 4rem; overflow-y: auto; overscroll-behavior: contain; opacity: 0; pointer-events: none; transition: opacity 0.4s; } .jzp .menu.is-open { opacity: 1; pointer-events: auto; } .jzp .menu__links { display: flex; flex-direction: column; align-items: center; text-align: center; } .jzp .footer { border-top: 1px solid var(--line); background: var(--bg); color: var(--muted); font-family: var(--font-body); } .jzp .footer__top { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: 2.6rem; } .jzp .footer__nav { display: flex; gap: 2rem; flex-wrap: wrap; } .jzp .footer__nav a { color: var(--muted); text-decoration: none; transition: color 0.3s; } .jzp .footer__nav a:hover { color: var(--ink); } .jzp .footer__inquiries { margin-top: 0.8rem; font-size: 0.95rem; } .jzp .footer__inquiries a { color: var(--ink); text-decoration: none; } .jzp .footer__social { display: flex; gap: 0.7rem; } .jzp .footer__social a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); color: var(--muted); transition: color 0.3s, border-color 0.3s, transform 0.3s var(--ease-out); } .jzp .footer__social a:hover { color: var(--ink); border-color: rgba(214, 0, 237, 0.5); transform: translateY(-3px); } .jzp .footer__bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.88rem; color: rgba(192, 187, 178, 0.7); } .jzp .footer__bottom a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } .jzp .footer__made { font-family: var(--font-display); } @media (max-width: 900px) { .jzp .nav__links { display: none !important; } .jzp .nav__burger { display: flex !important; } .jzp .nav__cta { display: none !important; } .jzp .menu { padding-top: 6.5rem; } } .jzc .sticky { display: none !important; }