/* ═══════════════════════════════════════════════════════════════════ CINEMATIK STUDIOS — Site · layout de páginas Sobe em cima de cinematik.css (tokens + componentes do sistema). Home + Project. Mono, type-led, o trabalho é o herói. ═══════════════════════════════════════════════════════════════════ */ /* ── A11y: skip link + focus visível adaptativo ── */ .skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper-hi); font-family: var(--tech); font-size: 11px; letter-spacing: var(--trk-tech-sm); text-transform: uppercase; padding: 10px 16px; border-radius: 3px; transition: top var(--d-fast) var(--ease); } .skip-link:focus { top: 12px; } a:focus-visible, button:focus-visible { outline: 2px solid var(--paper-hi); outline-offset: 1px; box-shadow: 0 0 0 4px var(--cobalt); border-radius: 2px; } /* Chrome do site (sobrescreve o doc): fundo que reage ao scroll */ .chrome { transition: background var(--d-base) var(--ease), border-color var(--d-base) var(--ease); border-bottom: 1px solid transparent; } .chrome.on-dark .mk, .chrome.on-dark .nav a, .chrome.on-dark > .tech { color: var(--paper-hi); } .chrome.on-dark .nav a:hover { color: #fff; } .chrome.scrolled { background: var(--paper); border-bottom-color: var(--line); } .chrome.scrolled .mk, .chrome.scrolled .nav a, .chrome.scrolled > .tech { color: var(--ink); } .chrome.scrolled .nav a { color: var(--ink-2); } .chrome.scrolled .nav a:hover { color: var(--ink); } .chrome .nav a[aria-current="page"] { color: var(--ink); } .chrome.on-dark .nav a[aria-current="page"] { color: #fff; } /* ═══════════════════════════════════════ HOME · reel hero ══ */ .reel { position: relative; min-height: 100svh; min-height: 100vh; background: var(--frame); color: var(--paper-hi); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; } .reel video, .reel .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .reel .poster { background: var(--frame); display: flex; align-items: flex-start; justify-content: center; } .reel .poster .ph { margin-top: 108px; font-family: var(--tech); font-size: 11px; letter-spacing: var(--trk-tech); text-transform: uppercase; color: rgba(255,255,255,0.22); } .reel .scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(18,17,13,0.62) 0%, rgba(18,17,13,0.22) 45%, rgba(18,17,13,0.34) 100%); z-index: 1; } .reel .play { position: absolute; inset: 0; z-index: 2; margin: auto; width: 92px; height: 92px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.5); background: rgba(20,19,16,0.18); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform var(--d-base) var(--ease), border-color var(--d-fast) var(--ease), background var(--d-fast) var(--ease); } .reel .play:hover { transform: scale(1.06); border-color: #fff; background: rgba(20,19,16,0.32); } .reel .play svg { width: 26px; height: 26px; margin-left: 4px; fill: var(--paper-hi); } .reel .reel-foot { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-4); padding: var(--gutter); padding-bottom: var(--s-7); } .reel .reel-foot .kick { display: flex; flex-direction: column; gap: var(--s-2); max-width: 30ch; } .reel .reel-foot .kick .lead { font-family: var(--sans); font-weight: 500; font-size: clamp(18px, 2.2vw, 26px); line-height: 1.18; letter-spacing: var(--trk-tight); color: var(--paper-hi); text-wrap: balance; } .reel .reel-foot .kick .lead b { font-weight: var(--wt-display); } .reel .reel-foot .tech { color: rgba(255,255,255,0.85); } .reel .scroll-cue { font-family: var(--tech); font-size: 11px; letter-spacing: var(--trk-tech-sm); text-transform: uppercase; color: rgba(255,255,255,0.82); white-space: nowrap; display: flex; align-items: center; gap: 8px; } .reel .scroll-cue::after { content: ''; width: 1px; height: 28px; background: rgba(255,255,255,0.4); display: inline-block; } @media (max-width: 700px) { .reel .reel-foot { flex-direction: column; align-items: flex-start; gap: var(--s-5); } .reel .scroll-cue { display: none; } } /* ═══════════════════════════════════════ HOME · selected work ══ */ .work-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: var(--s-4); border-bottom: 1px solid var(--ink); margin-bottom: var(--s-7); } .work-head h2 { font-family: var(--sans); font-weight: var(--wt-display); font-size: clamp(28px, 4vw, 40px); letter-spacing: var(--trk-display); line-height: 1; } .work-item { display: flex; flex-direction: column; gap: var(--s-3); } .work-item .fr { position: relative; display: block; background: var(--frame); border-radius: 3px; overflow: hidden; transition: transform var(--d-base) var(--ease); } .work-item .fr video, .work-item .fr .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .work-item .fr .poster { background: var(--frame); } .work-item .fr .ratio { position: absolute; top: var(--s-4); right: var(--s-4); z-index: 2; font-family: var(--tech); font-size: 10px; letter-spacing: var(--trk-tech-sm); color: rgba(255,255,255,0.4); } .work-item .fr .hint { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity var(--d-base) var(--ease); } .work-item .fr .hint svg { width: 18px; height: 18px; margin-left: 3px; fill: var(--paper-hi); } .work-item .fr .hint span { width: 56px; height: 56px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.55); display: flex; align-items: center; justify-content: center; background: rgba(20,19,16,0.25); } .work-item .fr:hover { transform: translateY(-4px); } .work-item .fr:hover .hint, .work-item .fr:focus-visible .hint { opacity: 1; } .work-item .cap { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); } .work-item .cap .t { font-family: var(--sans); font-weight: 600; font-size: var(--t-base); letter-spacing: var(--trk-snug); color: var(--ink); } .work-item .cap .d { font-family: var(--tech); font-size: 10px; letter-spacing: var(--trk-tech-sm); text-transform: uppercase; color: var(--ink-3); white-space: nowrap; } .work-more { display: flex; justify-content: center; margin-top: var(--s-8); } /* ═══════════════════════════════════════ HOME · faixa studio ══ */ .studio-strip { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s-7); align-items: end; } @media (max-width: 760px) { .studio-strip { grid-template-columns: 1fr; gap: var(--s-5); } } .studio-strip .line { font-family: var(--sans); font-weight: 500; font-size: clamp(24px, 3.4vw, 44px); line-height: 1.1; letter-spacing: var(--trk-tight); color: var(--ink); text-wrap: balance; max-width: 20ch; } .studio-strip .line b { font-weight: var(--wt-display); } .studio-strip .aside { display: flex; flex-direction: column; gap: var(--s-4); } .studio-strip .aside p { font-size: var(--t-sm); line-height: 1.6; color: var(--ink-2); max-width: 42ch; } /* ═══════════════════════════════════════ PROJECT ══ */ .proj-hero { position: relative; height: 78svh; height: 78vh; min-height: 460px; background: var(--frame); color: var(--paper-hi); overflow: hidden; display: flex; align-items: flex-end; } .proj-hero video, .proj-hero .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .proj-hero .poster { background: var(--frame); } .proj-hero .scrim { position: absolute; inset: 0; background: rgba(18,17,13,0.30); z-index: 1; } .proj-hero .play { position: absolute; inset: 0; margin: auto; z-index: 3; width: 88px; height: 88px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.5); background: rgba(20,19,16,0.18); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform var(--d-base) var(--ease), background var(--d-fast) var(--ease); } .proj-hero .play:hover { transform: scale(1.06); background: rgba(20,19,16,0.32); } .proj-hero .play svg { width: 24px; height: 24px; margin-left: 4px; fill: var(--paper-hi); } .proj-hero .tag { position: relative; z-index: 2; padding: var(--gutter); } .proj-hero .tag .tech { color: rgba(255,255,255,0.65); } .proj-head { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s-7); align-items: start; padding-top: var(--s-8); } @media (max-width: 820px) { .proj-head { grid-template-columns: 1fr; gap: var(--s-5); } } .proj-head h1 { font-family: var(--sans); font-weight: var(--wt-display); font-size: var(--t-3xl); line-height: 0.98; letter-spacing: var(--trk-display); color: var(--ink); text-wrap: balance; } .proj-meta { display: grid; grid-template-columns: auto 1fr; gap: 10px var(--s-5); align-content: start; } .proj-meta dt { font-family: var(--tech); font-size: var(--t-2xs); letter-spacing: var(--trk-tech-sm); text-transform: uppercase; color: var(--ink-3); } .proj-meta dd { font-family: var(--tech); font-size: var(--t-2xs); letter-spacing: var(--trk-tech-sm); text-transform: uppercase; color: var(--ink); margin: 0; } .proj-lede { font-size: var(--t-md); line-height: 1.55; color: var(--ink-2); max-width: 60ch; margin-top: var(--s-7); text-wrap: pretty; } .stills { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s-4); margin-top: var(--s-8); } @media (max-width: 760px) { .stills { grid-template-columns: repeat(2, 1fr); } .stills .still { grid-column: span 1 !important; aspect-ratio: 16/9 !important; } .stills .still.c-span-12 { grid-column: 1 / -1 !important; } } .stills .still { background: var(--frame); border-radius: 3px; position: relative; overflow: hidden; } .stills .still .ratio { position: absolute; top: var(--s-4); right: var(--s-4); font-family: var(--tech); font-size: 10px; letter-spacing: var(--trk-tech-sm); color: rgba(255,255,255,0.35); } .credits { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--line); } @media (max-width: 760px) { .credits { grid-template-columns: repeat(2, 1fr); } } .credits .c { display: flex; flex-direction: column; gap: 4px; } .credits .c .r { font-family: var(--tech); font-size: 10px; letter-spacing: var(--trk-tech-sm); text-transform: uppercase; color: var(--ink-3); } .credits .c .n { font-family: var(--sans); font-weight: 600; font-size: var(--t-sm); letter-spacing: var(--trk-snug); color: var(--ink); } .next-proj { display: flex; justify-content: space-between; align-items: center; gap: var(--s-5); padding: var(--s-8) 0; border-top: 1px solid var(--ink); margin-top: var(--s-9); transition: padding-left var(--d-base) var(--ease); } .next-proj:hover { padding-left: 12px; } .next-proj .lbl { display: flex; flex-direction: column; gap: var(--s-2); } .next-proj .lbl .t { font-family: var(--sans); font-weight: var(--wt-display); font-size: clamp(30px, 5vw, 64px); line-height: 0.98; letter-spacing: var(--trk-display); color: var(--ink); } .next-proj .arr { font-size: clamp(30px, 5vw, 56px); color: var(--ink); transition: transform var(--d-base) var(--ease); } .next-proj:hover .arr { transform: translateX(10px); } /* ═══════════════════════════════════════ FOOTER do site ══ */ .site-foot { border-top: 1px solid var(--ink); padding: var(--s-7) 0 var(--s-6); margin-top: var(--s-9); } .site-foot .top { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--s-6); align-items: start; } @media (max-width: 760px) { .site-foot .top { grid-template-columns: 1fr; gap: var(--s-5); } } .site-foot .big { font-family: var(--sans); font-weight: var(--wt-display); font-size: clamp(36px, 6vw, 84px); line-height: 0.92; letter-spacing: var(--trk-display); color: var(--ink); } .site-foot .col h4 { font-family: var(--tech); font-size: 10px; letter-spacing: var(--trk-tech); text-transform: uppercase; color: var(--ink-3); font-weight: 400; margin-bottom: var(--s-3); } .site-foot .col a, .site-foot .col span { display: block; font-family: var(--tech); font-size: var(--t-xs); letter-spacing: var(--trk-tech-sm); text-transform: uppercase; color: var(--ink); line-height: 2; } .site-foot .col a { transition: color var(--d-fast) var(--ease); } .site-foot .col a:hover { color: var(--accent); } .site-foot .base { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); margin-top: var(--s-7); padding-top: var(--s-4); border-top: 1px solid var(--line); } .site-foot .base .tech { color: var(--ink-3); } @media (max-width: 600px) { .site-foot .base { flex-direction: column; align-items: flex-start; gap: var(--s-3); } } /* utilitário de span no grid de 12 (home) */ .c-span-7 { grid-column: span 7; } .c-span-6 { grid-column: span 6; } .c-span-5 { grid-column: span 5; } .c-span-4 { grid-column: span 4; } .c-span-8 { grid-column: span 8; } .c-span-12 { grid-column: span 12; } @media (max-width: 760px) { .work-grid > .work-item { grid-column: span 1 !important; } } /* ═══════════════════════════════════════ NAV MOBILE ══ */ .nav-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: none; cursor: pointer; color: inherit; padding: 0; } .nav-toggle .bars { position: relative; width: 24px; height: 11px; display: block; } .nav-toggle .bars::before, .nav-toggle .bars::after { content: ''; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; } .nav-toggle .bars::before { top: 0; } .nav-toggle .bars::after { top: 10px; } @media (max-width: 860px) { .nav-toggle { display: inline-flex; } .chrome > .tech { display: none; } } .mobile-menu { position: fixed; inset: 0; z-index: 60; background: var(--paper); color: var(--ink); transform: translateY(-101%); transition: transform var(--d-base) var(--ease); display: flex; flex-direction: column; padding: var(--s-4) var(--gutter) var(--s-7); visibility: hidden; } .mobile-menu.open { transform: none; visibility: visible; } .mobile-menu .mm-top { display: flex; justify-content: space-between; align-items: center; height: 44px; } .mobile-menu .mm-top .mk { font-family: var(--sans); font-weight: var(--wt-display); font-size: var(--t-sm); letter-spacing: var(--trk-snug); color: var(--ink); } .mobile-menu .mm-close { background: none; border: none; cursor: pointer; display: flex; align-items: center; gap: 8px; font-family: var(--tech); font-size: 11px; letter-spacing: var(--trk-tech-sm); text-transform: uppercase; color: var(--ink); height: 44px; } .mobile-menu .mm-nav { display: flex; flex-direction: column; gap: var(--s-3); margin: auto 0; } .mobile-menu .mm-nav a { font-family: var(--sans); font-weight: var(--wt-display); font-size: clamp(40px, 13vw, 72px); letter-spacing: var(--trk-display); line-height: 1.0; color: var(--ink); } .mobile-menu .mm-foot { display: flex; justify-content: space-between; font-family: var(--tech); font-size: 10px; letter-spacing: var(--trk-tech-sm); text-transform: uppercase; color: var(--ink-3); } body.menu-open { overflow: hidden; } /* ═══════════════════════════════════════ SUB-PÁGINAS — header ══ */ .page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-5); padding-bottom: var(--s-5); border-bottom: 1px solid var(--ink); } .page-head h1 { font-family: var(--sans); font-weight: var(--wt-display); font-size: var(--t-3xl); line-height: 0.98; letter-spacing: var(--trk-display); color: var(--ink); } .page-head .tech { white-space: nowrap; } .page-top { padding-top: var(--s-9); } /* ═══════════════════════════════════════ WORK — filtros ══ */ .filters { display: flex; gap: var(--s-5); flex-wrap: wrap; padding: var(--s-6) 0 var(--s-7); } .filters button { background: none; border: none; cursor: pointer; font-family: var(--tech); font-size: var(--t-xs); letter-spacing: var(--trk-tech-sm); text-transform: uppercase; color: var(--ink-2); padding: 10px 6px; margin-left: -6px; position: relative; transition: color var(--d-fast) var(--ease); } .filters button:hover { color: var(--ink); } .filters button[aria-pressed="true"] { color: var(--ink); } .filters button[aria-pressed="true"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); } .work-item.hide { display: none; } /* ═══════════════════════════════════════ STUDIO ══ */ .studio-statement { font-family: var(--sans); font-weight: 500; font-size: clamp(28px, 4.6vw, 62px); line-height: 1.06; letter-spacing: var(--trk-tight); color: var(--ink); max-width: 19ch; text-wrap: balance; margin-top: var(--s-7); } .studio-statement b { font-weight: var(--wt-display); } .approach { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-7); margin-top: var(--s-8); } @media (max-width: 760px) { .approach { grid-template-columns: 1fr; gap: var(--s-6); } } .approach .a { display: flex; flex-direction: column; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--line); } .approach .a .no { font-family: var(--tech); font-size: var(--t-xs); letter-spacing: var(--trk-tech); color: var(--ink-3); } .approach .a h3 { font-family: var(--sans); font-weight: 700; font-size: var(--t-lg); letter-spacing: var(--trk-tight); color: var(--ink); } .approach .a p { font-size: var(--t-sm); line-height: 1.6; color: var(--ink-2); } .cap-block { margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--line); } .cap-block .tech.lbl { display: block; margin-bottom: var(--s-4); } .caps-list { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); } .caps-list span { font-family: var(--tech); font-size: var(--t-sm); letter-spacing: var(--trk-tech-sm); text-transform: uppercase; color: var(--ink); } /* ═══════════════════════════════════════ CONTACT — form ══ */ .contact-email { font-family: var(--sans); font-weight: var(--wt-display); font-size: clamp(30px, 6.6vw, 86px); letter-spacing: var(--trk-display); line-height: 0.98; color: var(--ink); display: inline-block; margin-top: var(--s-6); transition: color var(--d-fast) var(--ease); } .contact-email:hover { color: var(--ink-2); } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); margin-top: var(--s-8); } @media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; gap: var(--s-7); } } .contact-info { display: flex; flex-direction: column; gap: var(--s-6); } .contact-info .blk h4 { font-family: var(--tech); font-size: 10px; letter-spacing: var(--trk-tech); text-transform: uppercase; color: var(--ink-3); font-weight: 400; margin-bottom: var(--s-3); } .contact-info .blk a, .contact-info .blk span { display: block; font-family: var(--tech); font-size: var(--t-xs); letter-spacing: var(--trk-tech-sm); text-transform: uppercase; color: var(--ink); line-height: 2; } .form-row { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-5); } .form-row label { font-family: var(--tech); font-size: 10px; letter-spacing: var(--trk-tech-sm); text-transform: uppercase; color: var(--ink-3); } .form-row label .req { color: var(--ink); } .form-row input, .form-row textarea { width: 100%; min-height: 48px; background: var(--paper-hi); color: var(--ink); font-family: var(--sans); font-size: var(--t-base); padding: 13px 16px; border: 1px solid var(--ink); border-radius: 3px; outline: none; transition: box-shadow var(--d-fast) var(--ease); } .form-row input:focus, .form-row textarea:focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 32%, transparent); } .form-row input::placeholder, .form-row textarea::placeholder { color: var(--ink-3); } .form-row textarea { min-height: 130px; resize: vertical; } .form-row .err { font-family: var(--tech); font-size: 10px; letter-spacing: var(--trk-tech-sm); text-transform: uppercase; color: #B23A2E; display: none; } .form-row.invalid .err { display: block; } .form-row.invalid input, .form-row.invalid textarea { border-color: #B23A2E; } .form-sent { font-family: var(--tech); font-size: var(--t-xs); letter-spacing: var(--trk-tech-sm); text-transform: uppercase; color: var(--ink); margin-top: var(--s-4); display: none; } .form-sent.show { display: block; } /* ═══════════════════════════════════════ HOME — REEL WALL (uniforme) ══ */ .reel-wall { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); } @media (max-width: 760px) { .reel-wall { grid-template-columns: 1fr; } } .reel-item { display: flex; flex-direction: column; gap: var(--s-3); } .reel-tile { position: relative; display: block; aspect-ratio: 16/9; background: var(--frame); border-radius: 3px; overflow: hidden; color: var(--paper-hi); } .reel-tile .poster, .reel-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-slow) var(--ease); } .reel-tile .poster { background: var(--frame); } .reel-tile:hover .poster, .reel-tile:hover video { transform: scale(1.045); } .reel-tile .num { position: absolute; top: var(--s-4); left: var(--s-4); z-index: 3; font-family: var(--tech); font-size: var(--t-xs); letter-spacing: var(--trk-tech-sm); color: rgba(255,255,255,0.72); } .reel-tile .ratio { position: absolute; top: var(--s-4); right: var(--s-4); z-index: 3; font-family: var(--tech); font-size: 10px; letter-spacing: var(--trk-tech-sm); color: rgba(255,255,255,0.4); } .reel-tile .ov { position: absolute; inset: 0; z-index: 2; background: rgba(18,17,13,0); display: flex; align-items: flex-end; justify-content: flex-end; padding: var(--s-4); opacity: 0; transition: opacity var(--d-base) var(--ease), background var(--d-base) var(--ease); } .reel-tile:hover .ov, .reel-tile:focus-visible .ov { opacity: 1; background: rgba(18,17,13,0.36); } .reel-tile .ov .view { font-family: var(--tech); font-size: 10px; letter-spacing: var(--trk-tech-sm); text-transform: uppercase; color: #fff; } .reel-tile .play-c { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity var(--d-base) var(--ease); } .reel-tile:hover .play-c, .reel-tile:focus-visible .play-c { opacity: 1; } .reel-tile .play-c span { width: 60px; height: 60px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.6); display: flex; align-items: center; justify-content: center; background: rgba(20,19,16,0.22); } .reel-tile .play-c svg { width: 19px; height: 19px; margin-left: 3px; fill: #fff; } .reel-item .cap { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); } .reel-item .cap .t { font-family: var(--sans); font-weight: 600; font-size: var(--t-base); letter-spacing: var(--trk-snug); color: var(--ink); } .reel-item .cap .d { font-family: var(--tech); font-size: 10px; letter-spacing: var(--trk-tech-sm); text-transform: uppercase; color: var(--ink-3); white-space: nowrap; } /* ═══════════════════════════════════════ WORK — ÍNDICE EDITORIAL ══ */ .index-list { border-top: 1px solid var(--ink); } .index-row { display: grid; grid-template-columns: 66px 1fr auto; gap: var(--s-5); align-items: baseline; padding: var(--s-6) 0; border-bottom: 1px solid var(--line); position: relative; transition: padding-left var(--d-base) var(--ease); } .index-row:hover { padding-left: 16px; } .index-row .n { font-family: var(--tech); font-weight: 500; font-size: var(--t-sm); letter-spacing: var(--trk-tech-sm); color: var(--ink-3); } .index-row .ti { font-family: var(--sans); font-weight: var(--wt-display); font-size: clamp(24px, 3.6vw, 44px); line-height: 0.98; letter-spacing: var(--trk-display); color: var(--ink); transition: color var(--d-fast) var(--ease); } .index-row .me { font-family: var(--tech); font-size: var(--t-2xs); letter-spacing: var(--trk-tech-sm); text-transform: uppercase; color: var(--ink-3); white-space: nowrap; text-align: right; align-self: center; } .index-row.hide { display: none; } @media (max-width: 720px) { .index-row { grid-template-columns: 40px 1fr; gap: var(--s-3); } .index-row .me { grid-column: 2; text-align: left; align-self: baseline; } } .index-preview { position: fixed; top: 0; left: 0; z-index: 40; width: 360px; max-width: 38vw; aspect-ratio: 16/9; background: var(--frame); border-radius: 3px; overflow: hidden; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(0.96); transition: opacity var(--d-fast) var(--ease), transform var(--d-fast) var(--ease); box-shadow: 0 24px 60px rgba(18,17,13,0.28); } .index-preview.show { opacity: 1; transform: translate(-50%, -50%) scale(1); } .index-preview .pv-ratio { position: absolute; top: 12px; right: 12px; font-family: var(--tech); font-size: 10px; letter-spacing: var(--trk-tech-sm); color: rgba(255,255,255,0.4); } .index-preview .pv-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .index-preview .pv-play span { width: 48px; height: 48px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.6); display: flex; align-items: center; justify-content: center; background: rgba(20,19,16,0.22); } .index-preview .pv-play svg { width: 16px; height: 16px; margin-left: 3px; fill: #fff; } @media (hover: none) { .index-preview { display: none; } } /* posters que recebem background-image precisam cobrir (shorthand reseta size) */ .reel-tile .poster, .work-item .fr .poster, .proj-hero .poster, .reel .poster { background-size: cover; background-position: center; background-repeat: no-repeat; } /* ═══════════════════════════════════════ HOME — showreel a tocar ══ */ .reel-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--frame); } .reel.playing .scrim, .reel.playing .play, .reel.playing .reel-foot { opacity: 0; pointer-events: none; transition: opacity var(--d-base) var(--ease); } .reel.playing .reel-video { object-fit: contain; background: #000; z-index: 3; } .reel.playing { background: #000; } /* ═══════════════════════════════════════ FAIXA FULL-BLEED (divisor) ══ */ .band { position: relative; height: 72vh; min-height: 420px; display: flex; align-items: flex-end; overflow: hidden; background: var(--frame); color: var(--paper-hi); } .band.tall { height: 86vh; } .band.short { height: 52vh; min-height: 340px; } .band .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background-size: cover; background-position: center; transition: transform var(--d-slow) var(--ease); } .band:hover .bg { transform: scale(1.03); } .band .scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(18,17,13,0.82) 0%, rgba(18,17,13,0.30) 46%, rgba(18,17,13,0.20) 72%, rgba(18,17,13,0.34) 100%); z-index: 1; } .band .label { position: relative; z-index: 2; padding: var(--gutter); padding-bottom: var(--s-8); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); max-width: 52ch; border: 0; border-radius: 0; } .band .label .k { font-family: var(--tech); font-size: var(--t-2xs); letter-spacing: var(--trk-tech); text-transform: uppercase; color: rgba(255,255,255,0.7); } .band .label .t { font-family: var(--sans); font-weight: var(--wt-display); font-size: clamp(34px, 6vw, 84px); line-height: 0.96; letter-spacing: var(--trk-display); color: var(--paper-hi); text-wrap: balance; max-width: 18ch; } .band .label .sub { font-size: var(--t-base); line-height: 1.5; color: rgba(255,255,255,0.82); max-width: 46ch; } .band .corner { position: absolute; top: var(--gutter); right: var(--gutter); z-index: 2; font-family: var(--tech); font-size: var(--t-2xs); letter-spacing: var(--trk-tech-sm); text-transform: uppercase; color: rgba(255,255,255,0.55); } /* ═══════════════════════════════════════ WORK — disciplina (intro + grids) ══ */ .work-intro { font-family: var(--sans); font-weight: 500; font-size: clamp(20px, 2.6vw, 30px); line-height: 1.28; letter-spacing: var(--trk-tight); color: var(--ink); max-width: 30ch; text-wrap: balance; padding: var(--s-7) 0 var(--s-6); } .work-intro b { font-weight: var(--wt-display); } .disc-head { display: flex; align-items: baseline; gap: var(--s-4); padding-bottom: var(--s-4); border-bottom: 1px solid var(--ink); margin-bottom: var(--s-6); } .disc-head .no { font-family: var(--tech); font-weight: 500; font-size: var(--t-sm); letter-spacing: var(--trk-tech); color: var(--accent); } .disc-head h2 { font-family: var(--sans); font-weight: var(--wt-display); font-size: clamp(28px, 4vw, 44px); letter-spacing: var(--trk-display); line-height: 1; color: var(--ink); } .disc-head .pg { margin-left: auto; font-family: var(--tech); font-size: var(--t-xs); letter-spacing: var(--trk-tech-sm); text-transform: uppercase; color: var(--ink-3); white-space: nowrap; } .disc-lede { font-size: var(--t-md); line-height: 1.55; color: var(--ink-2); max-width: 56ch; margin-bottom: var(--s-7); text-wrap: pretty; } /* ═══════════════════════════════════════ PROCESS — página ══ */ .proc-hero { padding-top: var(--s-9); padding-bottom: var(--s-9); } .proc-hero .eyebrow { display: block; margin-bottom: var(--s-5); } .proc-hero h1 { font-family: var(--sans); font-weight: var(--wt-display); font-size: var(--t-3xl); line-height: 0.98; letter-spacing: var(--trk-display); color: var(--ink); text-wrap: balance; max-width: 16ch; } .proc-hero .lede { font-size: var(--t-md); line-height: 1.55; color: var(--ink-2); max-width: 58ch; margin-top: var(--s-6); text-wrap: pretty; } .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); margin-top: var(--s-8); } @media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); gap: var(--s-6) var(--s-5); } } @media (max-width: 520px) { .steps { grid-template-columns: 1fr; } } .steps .st { display: flex; flex-direction: column; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--ink); } .steps .st .no { font-family: var(--tech); font-weight: 500; font-size: var(--t-xs); letter-spacing: var(--trk-tech); color: var(--accent); } .steps .st h3 { font-family: var(--sans); font-weight: 700; font-size: var(--t-lg); letter-spacing: var(--trk-tight); color: var(--ink); } .steps .st p { font-size: var(--t-sm); line-height: 1.6; color: var(--ink-2); } /* vinheta (signature) */ .sig { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s-7); align-items: center; margin-top: var(--s-7); } @media (max-width: 860px) { .sig { grid-template-columns: 1fr; gap: var(--s-6); } } .sig .player { position: relative; border-radius: 4px; overflow: hidden; background: #000; aspect-ratio: 16/9; } .sig .player video { width: 100%; height: 100%; object-fit: cover; display: block; } .sig .txt h3 { font-family: var(--sans); font-weight: var(--wt-display); font-size: var(--t-xl); letter-spacing: var(--trk-tight); color: var(--ink); margin-bottom: var(--s-3); } .sig .txt p { font-size: var(--t-sm); line-height: 1.6; color: var(--ink-2); max-width: 46ch; margin-bottom: var(--s-3); } /* galeria de mundos / character sheets */ .tile-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-4); margin-top: var(--s-6); } @media (max-width: 900px) { .tile-row { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 560px) { .tile-row { grid-template-columns: repeat(2, 1fr); } } .tile-row.cols-3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 700px) { .tile-row.cols-3 { grid-template-columns: 1fr; } } .ptile { display: flex; flex-direction: column; gap: var(--s-2); } .ptile .im { aspect-ratio: 16/9; background: var(--frame) center/cover; border-radius: 3px; overflow: hidden; } .ptile.tall .im { aspect-ratio: 4/5; } .ptile .cap { font-family: var(--tech); font-size: 10px; letter-spacing: var(--trk-tech-sm); text-transform: uppercase; color: var(--ink-3); } /* frame → final */ .beforeafter { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-top: var(--s-6); } @media (max-width: 700px) { .beforeafter { grid-template-columns: 1fr; } } .beforeafter .ba { position: relative; aspect-ratio: 16/9; background: var(--frame) center/cover; border-radius: 3px; overflow: hidden; } .beforeafter .ba .tag { position: absolute; left: var(--s-4); bottom: var(--s-4); font-family: var(--tech); font-size: 10px; letter-spacing: var(--trk-tech-sm); text-transform: uppercase; color: #fff; background: rgba(20,19,16,0.55); padding: 5px 10px; border-radius: 999px; } /* prompt quote (process artefact) */ .prompt-card { border: 1px solid var(--line); border-radius: 4px; padding: var(--s-6); margin-top: var(--s-6); background: var(--paper-hi); } .prompt-card .k { font-family: var(--tech); font-size: 10px; letter-spacing: var(--trk-tech-sm); text-transform: uppercase; color: var(--ink-3); display: block; margin-bottom: var(--s-3); } .prompt-card p { font-family: var(--tech); font-size: var(--t-sm); line-height: 1.7; color: var(--ink); } /* ═══════════════════════════════════════ PROJECT — process strip ══ */ .proj-process { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--line); } @media (max-width: 760px) { .proj-process { grid-template-columns: repeat(2, 1fr); } } .proj-process .ps { display: flex; flex-direction: column; gap: 6px; } .proj-process .ps .r { font-family: var(--tech); font-size: 10px; letter-spacing: var(--trk-tech-sm); text-transform: uppercase; color: var(--ink-3); } .proj-process .ps .n { font-family: var(--sans); font-weight: 600; font-size: var(--t-sm); letter-spacing: var(--trk-snug); color: var(--ink); } .stills-head { display: flex; align-items: baseline; gap: var(--s-4); margin-top: var(--s-8); padding-bottom: var(--s-3); border-bottom: 1px solid var(--line); } .stills-head .k { font-family: var(--tech); font-size: var(--t-2xs); letter-spacing: var(--trk-tech); text-transform: uppercase; color: var(--ink-3); } .stills .still { background-size: cover; background-position: center; aspect-ratio: 16/9; } .stills .still.c-span-12 { aspect-ratio: 21/9; } .stills .still.c-span-4 { aspect-ratio: 4/5; } /* ═══════════════════════════════════════ CTA strip ══ */ .cta-strip { display: flex; justify-content: space-between; align-items: center; gap: var(--s-5); padding: var(--s-8) 0; border-top: 1px solid var(--ink); } @media (max-width: 700px) { .cta-strip { flex-direction: column; align-items: flex-start; gap: var(--s-5); } } .cta-strip .big { font-family: var(--sans); font-weight: var(--wt-display); font-size: clamp(28px, 4.6vw, 60px); line-height: 1; letter-spacing: var(--trk-display); color: var(--ink); max-width: 18ch; text-wrap: balance; } /* ═══════════════════════════════════════ FIX — alinhar texto das faixas full-bleed ao eixo de conteúdo (.wrap) ══ */ /* sem isso, em telas largas a manchete da faixa começa a 56px da borda enquanto o conteúdo começa ~336px (max-width 1360 centrado) */ .reel .reel-foot { padding-left: max(var(--gutter), calc(50% - (var(--max) / 2) + var(--gutter))); padding-right: max(var(--gutter), calc(50% - (var(--max) / 2) + var(--gutter))); } /* .band .label tem max-width 30ch (border-box): usar margin-left, não padding, p/ deslocar ao eixo de conteúdo */ .band .label { margin-left: max(0px, calc(50% - (var(--max) / 2))); } .band .corner { right: max(var(--gutter), calc(50% - (var(--max) / 2) + var(--gutter))); } .proj-hero .tag { padding-left: max(var(--gutter), calc(50% - (var(--max) / 2) + var(--gutter))); padding-right: max(var(--gutter), calc(50% - (var(--max) / 2) + var(--gutter))); } /* ═══════════════════════════════════════ HOME — mosaico dos 148 takes (craft wall) ══ */ .mosaic-wall { position: relative; background: var(--paper); color: var(--ink); padding: var(--s-7) 0 calc(var(--s-8) - 8px); overflow: hidden; } .mosaic-wall .mw-head { position: relative; z-index: 3; margin-bottom: var(--s-5); display: flex; justify-content: space-between; align-items: center; gap: var(--s-5); } .mosaic-wall .mw-head .kt { display: flex; flex-direction: column; gap: 10px; max-width: none; } .mosaic-wall .mw-head .k { font-family: var(--tech); font-size: var(--t-2xs); letter-spacing: var(--trk-tech); text-transform: uppercase; color: var(--ink-3); } .mosaic-wall .mw-head h2 { font-family: var(--sans); font-weight: var(--wt-display); font-size: clamp(36px, 4.8vw, 66px); line-height: 0.98; letter-spacing: var(--trk-tight); color: var(--ink); text-wrap: balance; } .mosaic-wall .mw-head h2 b { color: var(--cobalt); } .mosaic-wall .mw-head .sub { font-size: var(--t-sm); line-height: 1.55; color: rgba(255,255,255,0.78); max-width: 42ch; } .mosaic-wall .mw-head .count { font-family: var(--tech); font-size: clamp(28px, 3.4vw, 54px); font-weight: 500; letter-spacing: -.02em; color: rgba(20,19,16,0.13); line-height: 1; white-space: nowrap; } .mw-stream { display: flex; flex-direction: column; gap: 10px; position: relative; z-index: 1; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%); mask-composite: intersect; } .mw-row { display: flex; gap: 10px; width: max-content; animation: mw-drift 120s linear infinite; } .mw-row.rev { animation-direction: reverse; } .mw-row img { height: 144px; width: 256px; aspect-ratio: 16/9; object-fit: cover; display: block; border-radius: 0; opacity: 1; transition: opacity var(--d-base) var(--ease), transform var(--d-base) var(--ease); } .mw-row img:hover { opacity: 1; transform: scale(1.06); position: relative; z-index: 3; box-shadow: 0 14px 40px rgba(20,19,16,0.22); } @keyframes mw-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .mw-row { animation: none !important; } } /* mosaico em loop contínuo — não pausa no hover; animação para com prefers-reduced-motion */ .mosaic-wall .mw-foot { position: relative; z-index: 3; margin-top: var(--s-6); display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); font-family: var(--tech); font-size: var(--t-2xs); letter-spacing: var(--trk-tech-sm); text-transform: uppercase; color: var(--ink-3); } @media (max-width: 760px) { .mw-row img { height: 90px; width: 160px; } .mosaic-wall .mw-head { flex-direction: row; align-items: center; } .mosaic-wall .mw-head .count { display: block; } } /* ═══════════════════════════════════ bordas arredondadas — toda mídia enquadrada ══ */ .work-item .fr, .stills .still, .reel-tile, .index-preview, .sig .player, .ptile .im, .beforeafter .ba { border-radius: 14px; } .mw-row img { border-radius: 0; } /* cantos arredondados são assados no WebP (AA real, sem serrilhado no movimento) */ /* ═══════════════════════════════════ PROCESS — mundos tipográficos da vinheta (logos reais) ══ */ .worlds { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); margin-top: var(--s-6); } @media (max-width: 900px) { .worlds { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 560px) { .worlds { grid-template-columns: repeat(2, 1fr); } } .world { margin: 0; display: flex; flex-direction: column; gap: var(--s-2); } .world .im { aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; padding: var(--s-4); background: transparent; } .world .im img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 6px 16px rgba(20,17,12,0.16)); transition: transform var(--d-base) var(--ease); } .world:hover .im img { transform: scale(1.05); } .world .cap { font-family: var(--tech); font-size: 10px; letter-spacing: var(--trk-tech-sm); text-transform: uppercase; color: var(--ink-3); } /* ── PROCESS — tributo Rocky + feature do personagem ── */ .sig .txt .tribute { display: inline-block; margin-top: var(--s-4); font-family: var(--tech); font-size: var(--t-2xs); letter-spacing: var(--trk-tech); text-transform: uppercase; color: var(--cobalt); } .char-feature { max-width: 720px; margin: var(--s-6) auto 0; display: flex; flex-direction: column; gap: var(--s-2); } .char-feature .im { aspect-ratio: 16/9; background-color: var(--paper-hi); background-position: center; background-size: contain; background-repeat: no-repeat; border-radius: 14px; border: 1px solid var(--line); } .char-feature .cap { font-family: var(--tech); font-size: 10px; letter-spacing: var(--trk-tech-sm); text-transform: uppercase; color: var(--ink-3); text-align: center; } /* ── Work: cabeçalho de grupo (Client work / Language studies) ── */ .group-lead { padding-bottom: 0; } .group-head { border-top: 1px solid var(--ink, #141310); padding-top: 28px; } .group-head .tech { display: block; color: var(--ink-3, #837D71); margin-bottom: 10px; } .group-title { font-size: clamp(2rem, 5vw, 3.4rem); line-height: .98; margin: 0 0 12px; } .group-lede { max-width: 46ch; color: var(--ink-2, #4B473F); } .disc-head--sep { margin-top: 56px; } .reel-tile { position: relative; } .tag-study { position: absolute; top: 12px; right: 12px; z-index: 2; font-family: "Space Grotesk", monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: rgba(20,17,12,.62); color: #FAF9F5; backdrop-filter: blur(2px); } /* ── Process: repertório de linguagens (estudos de estilo) ── */ .lang-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); margin-top: var(--s-6); } @media (max-width: 900px) { .lang-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 560px) { .lang-grid { grid-template-columns: repeat(2, 1fr); } } .lang-tile { margin: 0; } .lang-tile .im { width: 100%; aspect-ratio: 4/5; background-size: cover; background-position: center; border-radius: 14px; display: block; transition: transform var(--d-base) var(--ease); } .lang-tile:hover .im { transform: scale(1.02); } .lang-tile figcaption { display: flex; flex-direction: column; gap: 3px; margin-top: 10px; } .lang-tile .t { font-family: var(--sans); font-weight: 600; font-size: var(--t-base); letter-spacing: var(--trk-snug); color: var(--ink); } .lang-tile .k { font-family: var(--tech); font-size: var(--t-xs); letter-spacing: var(--trk-tech-sm); text-transform: uppercase; color: var(--ink-2); } /* ═══════════════════════════════════════════════════════════════════ YouTube — tiles de vídeo (pôster + play → abre o lightbox) e o lightbox. Servido por youtube.js. O tile substitui os