/* ══════════════════════════════════════════════════════════════════════════ ROUND TABLE MEDIA — PORTFOLIO EXPERIENCE Shared stylesheet for work.html + the three production-world pages. Built on the existing RTM design language (index.html): same Bebas Neue / DM Sans pairing, same brand gradients, same pill buttons, same reveal choreography. What is new here is the WORLD THEMING layer — each page sets data-world on and every component re-skins itself from semantic tokens, so one skeleton produces three different atmospheres. ══════════════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap'); /* ── Reset ──────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } a { text-decoration: none; color: inherit; } img, video { display: block; max-width: 100%; } button { font-family: inherit; } /* ── Brand constants (identical to index.html) ──────────────────────────── */ :root { --o: #FF7835; --p: #FF3D6B; --pu: #7B2FBE; --m: #D91E8C; --ink:#0D0D0D; --brand-grad: linear-gradient(135deg, var(--p), var(--o)); --maxw: 1200px; --pad-x: 56px; /* Semantic defaults — the hub's dark neutral. Worlds override below. */ --bg: #0A0A0C; --bg-alt: #0F0F12; --fg: #FFFFFF; --fg-soft: rgba(255,255,255,.62); --fg-faint: rgba(255,255,255,.38); --surface: rgba(255,255,255,.04); --surface-2: rgba(255,255,255,.07); --line: rgba(255,255,255,.10); --accent: #FF3D6B; --accent-2: #FF7835; --grad: linear-gradient(140deg, #FF7835, #FF3D6B); --shadow: 0 28px 64px rgba(0,0,0,.45); } /* ── WORLD THEMES ─────────────────────────────────────────────────────────── Each world keeps the RTM skeleton but changes its light, palette and depth. */ /* MUSIC VIDEO — deepest black, pink→purple, cinematic and moody. */ body[data-world="music"] { --bg: #08080A; --bg-alt: #0D0B12; --fg: #FFFFFF; --fg-soft: rgba(255,255,255,.60); --fg-faint: rgba(255,255,255,.34); --surface: rgba(255,255,255,.04); --surface-2: rgba(255,255,255,.08); --line: rgba(255,255,255,.10); --accent: #FF3D6B; --accent-2: #7B2FBE; --grad: linear-gradient(140deg, #FF3D6B, #7B2FBE); } /* CORPORATE — light editorial. The one world that inverts, on purpose: trust-building brand work should feel open and printed, not nocturnal. */ body[data-world="corporate"] { --bg: #F7F6F4; --bg-alt: #FFFFFF; --fg: #0D0D0D; --fg-soft: #5A5A5A; --fg-faint: #8A8A8A; --surface: #FFFFFF; --surface-2: #FFFFFF; --line: #E6E4E0; --accent: #FF7835; --accent-2: #FF3D6B; --grad: linear-gradient(140deg, #FF7835, #FF3D6B); --shadow: 0 28px 60px rgba(0,0,0,.09); } /* AUTOMOTIVE — cold steel, purple→magenta, faster and more technical. */ body[data-world="automotive"] { --bg: #0A0B0D; --bg-alt: #101216; --fg: #FFFFFF; --fg-soft: rgba(255,255,255,.60); --fg-faint: rgba(255,255,255,.36); --surface: rgba(255,255,255,.04); --surface-2: rgba(255,255,255,.07); --line: rgba(255,255,255,.11); --accent: #7B2FBE; --accent-2: #D91E8C; --grad: linear-gradient(140deg, #7B2FBE, #D91E8C); } body { font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--fg); overflow-x: hidden; -webkit-font-smoothing: antialiased; transition: background .4s ease, color .4s ease; } /* ── Ambient background (the faq.html system, themed) ───────────────────── */ .amb { position: fixed; inset: 0; pointer-events: none; z-index: 0; } .amb::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 12% 12%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 34%), radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 28%), radial-gradient(circle at 50% 88%, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 30%); } .amb::after { content: ""; position: absolute; inset: 0; opacity: .16; background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 28px 28px; } body[data-world="corporate"] .amb::before { opacity: .55; } body[data-world="corporate"] .amb::after { background-image: linear-gradient(rgba(0,0,0,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.025) 1px, transparent 1px); } /* ── Typography ─────────────────────────────────────────────────────────── */ .eyebrow { font-size: 10px; font-weight: 600; letter-spacing: .25em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; } .sh { font-family: 'Bebas Neue', sans-serif; font-size: clamp(54px, 5.5vw, 86px); letter-spacing: .01em; line-height: .93; color: var(--fg); } .sub { font-size: 16px; font-weight: 300; line-height: 1.72; color: var(--fg-soft); max-width: 560px; } .grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ── Layout ─────────────────────────────────────────────────────────────── */ .sec { padding: 108px var(--pad-x); position: relative; z-index: 1; } .inner { max-width: var(--maxw); margin: 0 auto; } .sec-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 24px; margin-bottom: 64px; } /* ── Buttons (index.html's .bp/.bs/.bso, theme-aware) ───────────────────── */ .btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; border-radius: 100px; padding: 16px 40px; font-size: 15px; font-weight: 600; letter-spacing: .01em; border: none; transition: opacity .2s, transform .2s, background .2s, color .2s; } .btn .arrow { display: inline-block; transition: transform .2s; } .btn:hover .arrow { transform: translateX(4px); } .btn-primary { background: var(--brand-grad); color: #fff; } .btn-primary:hover { opacity: .86; transform: translateY(-2px); } .btn-ghost { background: transparent; color: var(--fg); border: 1.5px solid var(--line); padding: 14px 34px; font-weight: 500; } .btn-ghost:hover { background: var(--surface-2); transform: translateY(-1px); } .btn-sm { padding: 10px 26px; font-size: 13.5px; } /* ── Navigation ─────────────────────────────────────────────────────────── */ .rt-nav { position: fixed; inset: 0 0 auto; z-index: 200; display: flex; align-items: center; justify-content: space-between; padding: 20px var(--pad-x); transition: background .32s, box-shadow .32s, padding .32s; } .rt-nav img { height: 42px; width: auto; object-fit: contain; transition: filter .3s; } body:not([data-world="corporate"]) .rt-nav img { filter: drop-shadow(0 1px 6px rgba(0,0,0,.55)); } .rt-nav.sc { background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 1px 0 var(--line); padding-top: 14px; padding-bottom: 14px; } .rt-nav.sc img { filter: none; } .nav-links { display: flex; gap: 30px; align-items: center; } .nav-links a.nl { font-size: 13.5px; font-weight: 500; letter-spacing: .02em; color: var(--fg-soft); transition: color .2s; position: relative; } .nav-links a.nl:hover { color: var(--fg); } .nav-links a.nl.on { color: var(--fg); } .nav-links a.nl.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; border-radius: 2px; background: var(--grad); } /* Mobile */ .hbg { display: none; width: 44px; height: 44px; background: none; border: none; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; } .hbg span { display: block; width: 24px; height: 2px; background: var(--fg); transition: transform .28s, opacity .28s; } .hbg.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hbg.open span:nth-child(2) { opacity: 0; } .hbg.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mob-menu { position: fixed; inset: 0; z-index: 250; background: color-mix(in srgb, var(--bg) 97%, transparent); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; transform: translateX(100%); transition: transform .34s cubic-bezier(.77,0,.18,1); } .mob-menu.open { transform: translateX(0); } .mob-menu a { font-family: 'Bebas Neue', sans-serif; font-size: 40px; letter-spacing: .06em; color: var(--fg-soft); } .mob-menu a:hover { color: var(--accent); } /* ── Cinematic page curtain (entry + exit transition) ───────────────────── */ .curtain { position: fixed; inset: 0; z-index: 9999; pointer-events: none; } .curtain span { position: absolute; left: 0; right: 0; height: 50%; background: var(--bg); transition: transform .62s cubic-bezier(.76,0,.24,1); } .curtain span:first-child { top: 0; } .curtain span:last-child { bottom: 0; } /* Open state (default after load): panels retracted off-screen */ .curtain.open span:first-child { transform: translateY(-100%); } .curtain.open span:last-child { transform: translateY(100%); } /* Closing again for an outbound navigation */ .curtain.closing { pointer-events: all; } .curtain.closing span { transform: translateY(0); } /* ── Reveal choreography (mirrors index.html .rv / .rs) ─────────────────── */ .rv { opacity: 0; transform: translateY(26px); transition: opacity .62s ease, transform .62s ease; } .rv.v { opacity: 1; transform: translateY(0); } .rs { opacity: 0; transform: scale(.86); transition: opacity .55s ease, transform .55s cubic-bezier(.34,1.56,.64,1); } .rs.v { opacity: 1; transform: scale(1); } .rl { opacity: 0; clip-path: inset(0 100% 0 0); transition: opacity .5s ease, clip-path .9s cubic-bezier(.76,0,.24,1); } .rl.v { opacity: 1; clip-path: inset(0 0 0 0); } /* ── HERO ───────────────────────────────────────────────────────────────── */ .hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 140px var(--pad-x) 90px; overflow: hidden; z-index: 1; } .hero-media { position: absolute; inset: 0; z-index: 0; } .hero-media video, .hero-media img { width: 100%; height: 100%; object-fit: cover; } .hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 55%, transparent) 0%, color-mix(in srgb, var(--bg) 30%, transparent) 45%, var(--bg) 100%); } .hero-inner { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; width: 100%; } .hero h1 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(58px, 9vw, 132px); line-height: .86; letter-spacing: .01em; color: var(--fg); } .hero .sub { font-size: 17px; max-width: 580px; margin-top: 22px; } .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 38px; } /* Sequenced entrance — each direct child of .hero-stack lands in turn. */ .hero-stack > * { opacity: 0; animation: heroUp .8s cubic-bezier(.16,1,.3,1) forwards; } .hero-stack > *:nth-child(1) { animation-delay: .70s; } .hero-stack > *:nth-child(2) { animation-delay: .86s; } .hero-stack > *:nth-child(3) { animation-delay: 1.00s; } .hero-stack > *:nth-child(4) { animation-delay: 1.14s; } .hero-stack > *:nth-child(5) { animation-delay: 1.28s; } @keyframes heroUp { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: translateY(0); } } .scroll-cue { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 2; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--fg-faint); display: flex; flex-direction: column; align-items: center; gap: 8px; } .scroll-cue::after { content: ""; width: 1px; height: 40px; background: linear-gradient(var(--fg-faint), transparent); animation: cueDrop 1.9s ease-in-out infinite; } @keyframes cueDrop { 0%,100% { opacity: .25; transform: scaleY(.6); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } } /* ── Meta rail (film-slate style credits line) ──────────────────────────── */ .meta-rail { display: flex; flex-wrap: wrap; gap: 0 26px; align-items: center; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-faint); } .meta-rail span { display: inline-flex; align-items: center; gap: 26px; } .meta-rail span::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); opacity: .7; } .meta-rail span:last-child::after { display: none; } /* ── WORLD PANELS (the hub's "choose your universe") ────────────────────── */ .worlds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; min-height: 78vh; } .world { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 44px 36px; min-height: 460px; border-right: 1px solid var(--line); text-align: left; transition: flex-grow .5s cubic-bezier(.76,0,.24,1); } .world:last-child { border-right: none; } .world::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--w-grad, var(--grad)); opacity: .16; transition: opacity .5s ease, transform .7s cubic-bezier(.16,1,.3,1); } .world::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.72) 100%); } .world:hover::before { opacity: .34; transform: scale(1.06); } .world-media { position: absolute; inset: 0; z-index: 0; } .world-media video, .world-media img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease, transform .7s cubic-bezier(.16,1,.3,1); } .world:hover .world-media video, .world:hover .world-media img { opacity: .5; transform: scale(1.06); } .world-body { position: relative; z-index: 2; } .world-num { font-family: 'Bebas Neue', sans-serif; font-size: 13px; letter-spacing: .2em; color: rgba(255,255,255,.5); margin-bottom: 14px; } .world h2 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(34px, 3.4vw, 52px); line-height: .96; letter-spacing: .02em; color: #fff; margin-bottom: 12px; } .world p { font-size: 13.5px; font-weight: 300; line-height: 1.68; color: rgba(255,255,255,.66); max-width: 340px; } .world-enter { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #fff; transition: gap .25s ease; } .world:hover .world-enter { gap: 16px; } .world-bar { width: 40px; height: 4px; border-radius: 4px; background: var(--w-grad, var(--grad)); margin-bottom: 22px; transition: width .4s ease; } .world:hover .world-bar { width: 76px; } /* ── PROJECT CARDS (landscape worlds) ───────────────────────────────────── */ .proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(390px, 1fr)); gap: 44px 36px; } .proj-grid.wide { grid-template-columns: 1fr; gap: 96px; } .proj { position: relative; } .frame { position: relative; overflow: hidden; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); aspect-ratio: 16 / 9; transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s; } .proj:hover .frame { box-shadow: var(--shadow); } .proj .frame:not(.tilt):hover { transform: translateY(-6px); } .frame video, .frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .frame .ph { position: absolute; inset: 0; background: var(--i-grad, var(--grad)); opacity: .30; } .frame .ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.10) 50%, transparent 65%); background-size: 260% 100%; animation: shimmer 3.4s linear infinite; } @keyframes shimmer { 0% { background-position: 160% 0; } 100% { background-position: -160% 0; } } /* Phase-1 slate: makes an empty frame read as an intentional design element. */ .slate { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 24px; } .slate-mark { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid rgba(255,255,255,.42); color: #fff; font-size: 13px; background: rgba(0,0,0,.28); backdrop-filter: blur(6px); } .slate-txt { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.72); } .proj-meta { margin-top: 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; } .proj-meta h3 { font-family: 'Bebas Neue', sans-serif; font-size: 26px; letter-spacing: .04em; color: var(--fg); line-height: 1.1; } .proj-meta .who { font-size: 12.5px; font-weight: 300; color: var(--fg-soft); margin-top: 4px; } .proj-meta .yr { font-size: 11px; letter-spacing: .12em; color: var(--fg-faint); white-space: nowrap; padding-top: 5px; } .proj-role { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-faint); margin-top: 10px; } .dur-tag { position: absolute; right: 12px; bottom: 12px; z-index: 3; padding: 5px 11px; border-radius: 100px; font-size: 11px; font-weight: 500; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); color: #fff; border: 1px solid rgba(255,255,255,.2); } /* Editorial alternating layout for featured landscape pieces */ .feature { display: grid; grid-template-columns: 1.35fr 1fr; gap: 56px; align-items: center; } .feature:nth-child(even) { grid-template-columns: 1fr 1.35fr; } .feature:nth-child(even) .feature-media { order: 2; } .feature-media .frame { aspect-ratio: 16 / 9; } .feature h3 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(34px, 3.6vw, 56px); letter-spacing: .02em; line-height: .98; color: var(--fg); } .feature .who { font-size: 14px; color: var(--accent); font-weight: 500; margin-top: 8px; letter-spacing: .04em; } .feature p { font-size: 15px; font-weight: 300; line-height: 1.74; color: var(--fg-soft); margin-top: 18px; } /* ── VERTICAL RAIL (automotive — every master is 1080x1920) ─────────────── */ .vrail { display: flex; gap: 22px; overflow-x: auto; padding: 6px 0 24px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .vrail::-webkit-scrollbar { height: 4px; } .vrail::-webkit-scrollbar-track { background: var(--surface); border-radius: 4px; } .vrail::-webkit-scrollbar-thumb { background: var(--grad); border-radius: 4px; } .vcard { flex: 0 0 clamp(210px, 22vw, 268px); scroll-snap-align: start; } .vframe { position: relative; overflow: hidden; border-radius: 20px; aspect-ratio: 9 / 16; background: var(--surface); border: 1px solid var(--line); transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s, border-color .45s; } .vcard:hover .vframe { box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 45%, transparent); } .vcard .vframe:not(.tilt):hover { transform: translateY(-8px) scale(1.015); } .vframe video, .vframe img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .vframe .ph { position: absolute; inset: 0; background: var(--i-grad, var(--grad)); opacity: .30; } .vcard-meta { margin-top: 14px; } .vcard-meta h3 { font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: .04em; color: var(--fg); } .vcard-meta .who { font-size: 11.5px; font-weight: 300; color: var(--fg-faint); margin-top: 3px; } /* Grid variant for the full vertical gallery */ .vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 30px 22px; } /* ── MARQUEE (scrolling title strip) ────────────────────────────────────── */ .marquee { overflow: hidden; padding: 30px 0; border-block: 1px solid var(--line); position: relative; z-index: 1; } .marquee-track { display: flex; gap: 46px; width: max-content; animation: slide 34s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } .marquee span { font-family: 'Bebas Neue', sans-serif; font-size: clamp(34px, 4.4vw, 62px); letter-spacing: .04em; color: transparent; -webkit-text-stroke: 1px var(--fg-faint); white-space: nowrap; } .marquee span.fill { color: var(--fg); -webkit-text-stroke: 0; } @keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ── STATS ──────────────────────────────────────────────────────────────── */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 40px; } .stat-num { font-family: 'Bebas Neue', sans-serif; font-size: clamp(46px, 5.4vw, 76px); line-height: 1; letter-spacing: .02em; } .stat-lbl { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-faint); margin-top: 8px; } /* ── PROCESS / SERVICE CARDS ────────────────────────────────────────────── */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; } .card { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 38px 34px; display: flex; flex-direction: column; transition: transform .35s, box-shadow .35s, background .3s; } .card:hover { box-shadow: var(--shadow); background: var(--surface-2); } .card:not(.tilt):hover { transform: translateY(-6px); } .card-bar { width: 44px; height: 4px; border-radius: 4px; background: var(--grad); margin-bottom: 24px; transition: width .35s ease; } .card:hover .card-bar { width: 72px; } .card h3 { font-family: 'Bebas Neue', sans-serif; font-size: 26px; letter-spacing: .04em; color: var(--fg); margin-bottom: 12px; } .card p { font-size: 14px; font-weight: 300; line-height: 1.72; color: var(--fg-soft); } .card .price { margin-top: auto; padding-top: 22px; font-size: 13px; font-weight: 600; color: var(--accent); letter-spacing: .04em; } .step-n { font-family: 'Bebas Neue', sans-serif; font-size: 13px; letter-spacing: .18em; color: var(--fg-faint); margin-bottom: 14px; } /* ── BEHIND THE SCENES (offset collage) ─────────────────────────────────── */ .bts { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; } .bts figure { position: relative; overflow: hidden; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); } .bts figure .ph { position: absolute; inset: 0; background: var(--i-grad, var(--grad)); opacity: .26; } .bts figure img { width: 100%; height: 100%; object-fit: cover; } .bts .b1 { grid-column: span 7; aspect-ratio: 16/10; } .bts .b2 { grid-column: span 5; aspect-ratio: 4/5; margin-top: 44px; } .bts .b3 { grid-column: span 5; aspect-ratio: 4/3; } .bts .b4 { grid-column: span 7; aspect-ratio: 16/9; margin-top: -30px; } /* ── CTA BLOCK ──────────────────────────────────────────────────────────── */ .cta-block { position: relative; overflow: hidden; border-radius: 28px; padding: 76px 56px; background: var(--surface); border: 1px solid var(--line); text-align: center; } .cta-block::before { content: ""; position: absolute; inset: 0; background: var(--grad); opacity: .12; } .cta-block > * { position: relative; z-index: 1; } .cta-block h2 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(42px, 5vw, 74px); line-height: .96; letter-spacing: .02em; color: var(--fg); } .cta-block p { font-size: 16px; font-weight: 300; line-height: 1.7; color: var(--fg-soft); max-width: 520px; margin: 18px auto 0; } .cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 34px; } /* Soft inline nudge used after project blocks */ .nudge { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 22px 26px; border-radius: 16px; border: 1px dashed var(--line); background: var(--surface); margin-top: 30px; } .nudge p { font-size: 14.5px; font-weight: 300; color: var(--fg-soft); } .nudge strong { color: var(--fg); font-weight: 600; } /* ── STICKY BOOKING BAR (light touch — appears after 40% scroll) ────────── */ .sticky-cta { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 130%); z-index: 300; display: flex; align-items: center; gap: 18px; padding: 12px 12px 12px 24px; border-radius: 100px; background: color-mix(in srgb, var(--bg-alt) 92%, transparent); border: 1px solid var(--line); box-shadow: 0 18px 44px rgba(0,0,0,.34); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: transform .45s cubic-bezier(.16,1,.3,1); max-width: calc(100vw - 32px); } .sticky-cta.show { transform: translate(-50%, 0); } .sticky-cta p { font-size: 13.5px; font-weight: 300; color: var(--fg-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sticky-cta strong { color: var(--fg); font-weight: 600; } /* ── LIGHTBOX ───────────────────────────────────────────────────────────── */ .lb { position: fixed; inset: 0; z-index: 2000; display: none; background: rgba(5,5,7,.95); backdrop-filter: blur(8px); flex-direction: column; opacity: 0; transition: opacity .3s ease; } .lb.open { display: flex; } .lb.in { opacity: 1; } .lb-top { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; flex-shrink: 0; } .lb-top img { height: 30px; width: auto; } .lb-close { width: 40px; height: 40px; border-radius: 50%; cursor: pointer; color: #fff; font-size: 20px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); display: grid; place-items: center; transition: background .2s; } .lb-close:hover { background: rgba(255,255,255,.16); } .lb-body { flex: 1; display: flex; gap: 24px; overflow: hidden; padding: 0 24px 24px; } .lb-stage { flex: 1; display: flex; align-items: center; justify-content: center; min-width: 0; } .lb-stage video { max-width: 100%; max-height: 100%; border-radius: 14px; box-shadow: 0 24px 64px rgba(0,0,0,.5); } .lb-stage .ph-stage { width: min(100%, 900px); aspect-ratio: 16/9; border-radius: 14px; background: var(--grad); opacity: .3; display: grid; place-items: center; } .lb-stage .ph-stage.vert { aspect-ratio: 9/16; width: auto; height: 100%; } .lb-side { width: 268px; flex-shrink: 0; overflow-y: auto; padding-left: 24px; border-left: 1px solid rgba(255,255,255,.1); } .lb-side h4 { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.42); margin-bottom: 16px; } .lb-item { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; cursor: pointer; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 8px; margin-bottom: 10px; transition: background .2s, border-color .2s; } .lb-item:hover, .lb-item.on { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); } .lb-thumb { width: 62px; height: 40px; border-radius: 6px; overflow: hidden; flex-shrink: 0; background: var(--grad); opacity: .8; } .lb-item span { font-size: 12.5px; color: rgba(255,255,255,.84); line-height: 1.3; } .lb-caption { padding: 14px 0 0; color: rgba(255,255,255,.6); font-size: 13px; } .lb-caption b { color: #fff; font-weight: 600; } /* ── FOOTER ─────────────────────────────────────────────────────────────── */ .rt-foot { position: relative; z-index: 1; padding: 64px var(--pad-x) 40px; border-top: 1px solid var(--line); } .foot-grid { max-width: var(--maxw); margin: 0 auto; display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; } .foot-grid h4 { font-family: 'Bebas Neue', sans-serif; font-size: 14px; letter-spacing: .08em; color: var(--fg); margin-bottom: 14px; } .foot-grid a { display: block; font-size: 13.5px; font-weight: 300; color: var(--fg-soft); margin-bottom: 9px; transition: color .2s; } .foot-grid a:hover { color: var(--accent); } .foot-btm { max-width: var(--maxw); margin: 44px auto 0; padding-top: 22px; border-top: 1px solid var(--line); font-size: 12px; color: var(--fg-faint); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; } /* ── RESPONSIVE ─────────────────────────────────────────────────────────── */ @media (max-width: 1024px) { .worlds { grid-template-columns: 1fr; min-height: 0; } .world { border-right: none; border-bottom: 1px solid var(--line); min-height: 340px; } .feature, .feature:nth-child(even) { grid-template-columns: 1fr; gap: 28px; } .feature:nth-child(even) .feature-media { order: 0; } .bts .b1, .bts .b2, .bts .b3, .bts .b4 { grid-column: span 6; margin-top: 0; } } @media (max-width: 768px) { :root { --pad-x: 20px; } .sec { padding: 72px var(--pad-x); } .nav-links { display: none; } .hbg { display: flex; } .sh { font-size: clamp(40px, 11vw, 54px); } .hero { min-height: 92vh; padding-top: 120px; } .hero h1 { font-size: clamp(52px, 14vw, 82px); } .proj-grid { grid-template-columns: 1fr; gap: 40px; } .proj-grid.wide { gap: 56px; } .cta-block { padding: 52px 26px; } .lb-body { flex-direction: column; overflow-y: auto; } .lb-side { width: 100%; border-left: none; padding-left: 0; border-top: 1px solid rgba(255,255,255,.1); padding-top: 16px; margin-top: 16px; } .sticky-cta { left: 16px; right: 16px; transform: translateY(130%); max-width: none; } .sticky-cta.show { transform: translateY(0); } .sticky-cta p { display: none; } .sticky-cta { justify-content: center; padding: 12px; } .bts .b1, .bts .b2, .bts .b3, .bts .b4 { grid-column: span 12; } .stats { gap: 28px; } } @media (max-width: 420px) { .sh { font-size: clamp(32px, 9vw, 42px); } } /* ══════════════════════════════════════════════════════════════════════════ EXTRA POLISH LAYER — cursor glow, magnetic buttons, split-text reveal, world switcher, scroll progress, hover-scrub, waveform motif, custom cursor, grain variation, hub entry choreography. Additive only — nothing above this line depends on anything below it. ══════════════════════════════════════════════════════════════════════════ */ /* ── Scroll progress bar ────────────────────────────────────────────────── Thin, themed-per-world bar pinned to the very top edge of the viewport. */ .sprog { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: var(--grad); z-index: 260; transition: width .1s linear; } /* ── Cursor-reactive glow (hub world panels) ───────────────────────────── A soft light that tracks the pointer inside each panel via --mx/--my custom properties set from JS. Layered above the existing ::before tint. */ .world { --mx: 50%; --my: 50%; } .world .glow { position: absolute; inset: 0; z-index: 1; opacity: 0; pointer-events: none; background: radial-gradient(320px circle at var(--mx) var(--my), rgba(255,255,255,.16), transparent 70%); transition: opacity .35s ease; } .world:hover .glow { opacity: 1; } /* ── Custom cursor on hub panels ───────────────────────────────────────── A small "Enter" pill that follows the pointer while hovering a world. Real cursor stays hidden only within the panel, not site-wide. */ .world { cursor: none; } .hub-cursor { position: fixed; top: 0; left: 0; z-index: 500; pointer-events: none; transform: translate(-50%, -50%) scale(.6); opacity: 0; display: flex; align-items: center; gap: 7px; padding: 11px 20px 11px 16px; border-radius: 100px; background: rgba(255,255,255,.94); color: #0D0D0D; font-family: 'DM Sans', sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; box-shadow: 0 14px 34px rgba(0,0,0,.28); transition: opacity .22s ease, transform .22s cubic-bezier(.16,1,.3,1); white-space: nowrap; } .hub-cursor.show { opacity: 1; transform: translate(-50%, -50%) scale(1); } .hub-cursor svg { width: 13px; height: 13px; } @media (hover: none) { .world { cursor: pointer; } .hub-cursor { display: none; } } /* ── Magnetic buttons ───────────────────────────────────────────────────── JS sets --mx/--my (px offset from center); the button nudges toward the cursor within a small radius, snapping back on leave via transition. */ .btn-magnetic { --mx: 0px; --my: 0px; transform: translate(var(--mx), var(--my)); transition: transform .25s cubic-bezier(.16,1,.3,1), opacity .2s, background .2s; } /* ── Split-text headline reveal ─────────────────────────────────────────── [data-split] wraps each line in a clip-path mask; JS staggers the wipe. Falls back to the existing .rv fade if JS never runs (progressive). */ [data-split] .split-line { display: block; overflow: hidden; } [data-split] .split-line > span { display: inline-block; transform: translateY(110%); transition: transform .9s cubic-bezier(.16,1,.86,1); } [data-split].split-in .split-line > span { transform: translateY(0); } /* ── Automotive rail auto-drift ─────────────────────────────────────────── The rail scrolls itself slowly via JS (requestAnimationFrame), pausing on hover, touch, or manual scroll. This just marks the state for styling. */ .vrail.autodrift { scroll-behavior: auto; } .vrail.autodrift.paused { scroll-behavior: smooth; } /* ── Hover-scrub project frames ─────────────────────────────────────────── Until real video exists, a faint moving highlight sweeps across the frame following pointer X, previewing where a future frame-scrub would read. */ .frame[data-scrub], .vframe[data-scrub] { overflow: hidden; } .frame[data-scrub] .scrub-sweep, .vframe[data-scrub] .scrub-sweep { position: absolute; top: 0; bottom: 0; width: 34%; z-index: 1; left: var(--sx, -40%); pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent); opacity: 0; transition: opacity .25s ease; } .frame[data-scrub]:hover .scrub-sweep, .vframe[data-scrub]:hover .scrub-sweep { opacity: 1; } /* ── Music Video hero waveform motif ────────────────────────────────────── Bars pulse at slightly randomized speeds so it never looks like a loop. */ .wave-motif { position: absolute; left: 0; right: 0; bottom: 0; height: 140px; z-index: 1; display: flex; align-items: flex-end; justify-content: center; gap: 5px; padding: 0 var(--pad-x) 0; pointer-events: none; opacity: .55; mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); } .wave-motif span { width: 4px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--accent), transparent); animation: waveBar 1.6s ease-in-out infinite; } @keyframes waveBar { 0%,100% { transform: scaleY(.22); } 50% { transform: scaleY(1); } } /* ── Grain variation per world ──────────────────────────────────────────── Automotive gets a harder-edged, higher-contrast grain to read "technical" next to Music's softer cinematic grain; Corporate stays minimal (set in the base .amb rule already). */ body[data-world="automotive"] .amb::after { opacity: .26; background-size: 22px 22px; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); } /* ── Extended hub entry choreography ────────────────────────────────────── On work.html only, the curtain holds a beat longer and the logo does a small confident settle — marked via [data-hub-entry] on . */ body[data-hub-entry] .rt-nav img { animation: hubLogoIn .9s cubic-bezier(.16,1,.3,1) .55s both; } @keyframes hubLogoIn { from { opacity: 0; transform: translateY(-10px) scale(.92); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ══════════════════════════════════════════════════════════════════════════ STUDIO-GRADE LAYER — branded pre-loader ident, world-tinted page transitions, and 3D tilt depth on cards/panels/frames. ══════════════════════════════════════════════════════════════════════════ */ /* ── Cinematic pre-loader ident ─────────────────────────────────────────── Plays once per browser session (first page load only — see JS). Sits above the curtain, fully opaque black; plays RTM's own logo-animation bumper, then fades so the curtain-open sequence continues under it. */ .ident { position: fixed; inset: 0; z-index: 10000; background: #000; display: flex; align-items: center; justify-content: center; opacity: 1; transition: opacity .5s ease; } .ident.hide { opacity: 0; pointer-events: none; } .ident video { width: min(72vw, 520px); height: auto; object-fit: contain; } /* Fallback if video can't play (blocked, unsupported): static mark, still branded. */ .ident .ident-fallback { height: 54px; width: auto; object-fit: contain; filter: drop-shadow(0 0 18px rgba(255,120,53,.4)); } /* ── World-tinted curtain wash ──────────────────────────────────────────── Just before an outbound navigation, JS sets --wash on the curtain to the destination world's gradient; this class fades the panels toward it so the close reads as a colour-graded cut into the next world. */ .curtain span { background: var(--bg); } .curtain.washed span { background: var(--wash, var(--grad)); transition: background .3s ease, transform .62s cubic-bezier(.76,0,.24,1); } /* ── 3D tilt depth ───────────────────────────────────────────────────────── JS sets --rx/--ry (rotation degrees) and --tz (lift) per element on pointer move; CSS just applies them so no per-frame style recalculation of anything but transform happens. */ .tilt { --rx: 0deg; --ry: 0deg; --tz: 0px; transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(var(--tz)); transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s ease; will-change: transform; } .tilt.tilting { transition: transform .06s linear; } .world.tilt { transform: perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(var(--tz)); } @media (hover: none) { .tilt { transform: none !important; } } /* ── Respect reduced motion ─────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .rv, .rs, .rl { opacity: 1; transform: none; clip-path: none; } .hero-stack > * { opacity: 1; animation: none; } .curtain { display: none; } [data-split] .split-line > span { transform: none; } .world { cursor: pointer; } .hub-cursor, .world .glow, .sprog, .wave-motif span { display: none; } .btn-magnetic { transform: none !important; } .vrail.autodrift { scroll-behavior: smooth; } .ident { display: none; } .tilt { transform: none !important; } }