/* ═══════════════════════════════════════════ odd.cut media — shared.css Global styles, navigation, transitions ═══════════════════════════════════════════ */ /* Fonts loaded via in each HTML page — see (preconnect + no @import penalty) */ :root { --ink: #07070a; --ink2: #0c0c10; --ink3: #111118; --white: #ffffff; --dim: rgba(255,255,255,0.68); --faint: rgba(255,255,255,0.16); --border: rgba(255,255,255,0.10); /* Brand gradient colours extracted from logo */ --c-blue: #1e9bff; --c-cyan: #44d7ff; --c-red: #ff4a34; --c-orange: #ff7a3d; --c-purple: #7c35e8; --grad: linear-gradient(135deg, var(--c-cyan), var(--c-blue), var(--c-red), var(--c-orange)); --grad-conic: conic-gradient(from 200deg, var(--c-cyan), var(--c-blue), var(--c-red), var(--c-orange), var(--c-cyan)); --ease: cubic-bezier(0.16, 1, 0.3, 1); --ease2: cubic-bezier(0.4, 0, 0.2, 1); --nav-h: 80px; --max: 1480px; --pad: 56px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { background: var(--ink); color: var(--white); font-family: 'Inter Tight', sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; cursor: none; } img { display: block; max-width: 100%; } a { text-decoration: none; color: inherit; } button, input, textarea, select { font: inherit; color: inherit; } button { cursor: none; } /* ─── GRAIN OVERLAY ─── */ body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9990; opacity: .032; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 200px; } /* ─── SKIP LINK (WCAG 2.4.1) ─── */ .skip-link { position: fixed; top: -100%; left: 16px; z-index: 10000; padding: 10px 20px; background: #fff; color: #07070a; font-size: 13px; font-weight: 700; letter-spacing: 1px; border-radius: 0 0 6px 6px; text-decoration: none; transition: top .2s; } .skip-link:focus { top: 0; outline: 2px solid rgba(30,155,255,.8); outline-offset: 2px; } /* ─── PAGE TRANSITION ─── */ .page-wrap { opacity: 0; transform: translateY(16px); transition: opacity .65s var(--ease), transform .65s var(--ease); } .page-wrap.ready { opacity: 1; transform: none; } /* ─── INNER PAGE BEAM CANVAS ─── */ #pgBeam { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 0; } /* ─── CURSOR ─── */ #oc-dot, #oc-ring { position: fixed; border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); } #oc-dot { width: 7px; height: 7px; background: var(--white); mix-blend-mode: difference; transition: width .35s var(--ease), height .35s var(--ease); } #oc-ring { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.28); transition: width .45s var(--ease), height .45s var(--ease), border-color .3s; } .cursor-hover #oc-dot { width: 14px; height: 14px; } .cursor-hover #oc-ring { width: 64px; height: 64px; border-color: rgba(249,113,26,.5); } .cursor-link #oc-ring { border-color: rgba(124,53,232,.6); } /* ─── NAVIGATION ─── */ .oc-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 800; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--pad); transition: background .4s, border-color .4s, height .4s var(--ease); border-bottom: 1px solid transparent; } .oc-nav.scrolled { background: rgba(7,7,10,.92); backdrop-filter: blur(20px); border-bottom-color: var(--border); height: 64px; } .nav-logo{ display:flex; align-items:center; gap:0; flex-shrink:0; } .nav-logo-img{ display:block; height:36px; width:auto; object-fit:contain; filter:drop-shadow(0 0 0 rgba(0,0,0,0)); transition:opacity .3s ease, transform .35s var(--ease); } .nav-logo:hover .nav-logo-img{ opacity:.92; transform:translateY(-1px); } .nav-links { display: flex; align-items: center; gap: 36px; } .nav-link { font-size: 10px; font-weight: 600; letter-spacing: 3.5px; text-transform: uppercase; color: rgba(255,255,255,.46); position: relative; padding: 6px 0; transition: color .25s; } .nav-link::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px; background: linear-gradient(to right, var(--c-blue), var(--c-orange)); transition: width .4s var(--ease); } .nav-link:hover, .nav-link.active { color: var(--white); } .nav-link:hover::after, .nav-link.active::after { width: 100%; } .nav-cta { font-size: 10px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--white); border: 1px solid rgba(255,255,255,.18); padding: 10px 22px; border-radius: 100px; transition: all .35s; } .nav-cta:hover { background: rgba(255,255,255,.06); border-color: rgba(245,113,26,.5); box-shadow: 0 0 20px rgba(245,113,26,.15); } .nav-cta::after { display: none !important; } /* Mobile hamburger */ .nav-hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 4px; } .nav-hamburger span { display: block; width: 22px; height: 1.5px; background: var(--white); transition: all .35s var(--ease); } .nav-hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(4.7px, 4.7px); } .nav-hamburger.open span:nth-child(2) { opacity: 0; transform: translateX(-8px); } .nav-hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(4.7px, -4.7px); } /* Mobile overlay */ .nav-mobile { position: fixed; inset: 0; z-index: 790; background: var(--ink); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s; } .nav-mobile.open { opacity: 1; visibility: visible; } .nav-mobile-links { display: flex; flex-direction: column; align-items: center; gap: 20px; } .nav-mobile-link { font-family: 'Inter Tight', sans-serif; font-size: clamp(44px, 9vw, 72px); letter-spacing: 2px; color: rgba(255,255,255,.15); transition: color .4s var(--ease), letter-spacing .4s var(--ease); } .nav-mobile-link:hover { color: var(--white); letter-spacing: 4px; } /* ─── CONTAINER ─── */ .container { width: min(var(--max), calc(100% - var(--pad) * 2)); margin-inline: auto; } /* ─── SECTION SPACING ─── */ .section { position: relative; overflow: hidden; } .section-pad { padding-block: 140px; } .section-pad-sm { padding-block: 100px; } /* ─── LABELS ─── */ .s-label { display: inline-flex; align-items: center; gap: 12px; font-size: 9px; font-weight: 700; letter-spacing: 5px; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 20px; } .s-label::before { content: ''; width: 22px; height: 1px; background: linear-gradient(to right, var(--c-blue), var(--c-purple)); } /* ─── REVEAL ANIMATIONS ─── */ [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); } [data-reveal].visible { opacity: 1; transform: none; } [data-reveal="left"] { transform: translateX(-28px); } [data-reveal="left"].visible { transform: none; } [data-reveal="scale"] { transform: scale(.96); } [data-reveal="scale"].visible { transform: none; } [data-delay="1"] { transition-delay: .1s; } [data-delay="2"] { transition-delay: .2s; } [data-delay="3"] { transition-delay: .3s; } [data-delay="4"] { transition-delay: .4s; } [data-delay="5"] { transition-delay: .5s; } /* ─── GRADIENT TEXT ─── */ .grad-text { background: linear-gradient(135deg, var(--c-blue) 0%, var(--c-purple) 40%, var(--c-orange) 100%); background-size: 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: gradShift 5s ease-in-out infinite alternate; } @keyframes gradShift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } } /* ─── BUTTONS ─── */ .btn { display: inline-flex; align-items: center; gap: 10px; font-size: 10px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; border-radius: 100px; transition: all .35s var(--ease); white-space: nowrap; } .btn-primary { background: var(--white); color: var(--ink); padding: 16px 32px; border: none; } .btn-primary:hover { background: rgba(255,255,255,.88); transform: translateY(-2px); } .btn-outline { border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.6); padding: 16px 32px; background: transparent; } .btn-outline:hover { border-color: rgba(255,255,255,.6); color: var(--white); transform: translateY(-2px); } .btn-grad { background: linear-gradient(135deg, var(--c-blue), var(--c-purple)); color: var(--white); padding: 16px 32px; border: none; box-shadow: 0 0 24px rgba(124,53,232,.3); } .btn-grad:hover { background: linear-gradient(135deg, var(--c-purple), var(--c-orange)); box-shadow: 0 0 36px rgba(245,113,26,.35); transform: translateY(-2px); } .btn-icon { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid currentColor; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; top: -1px; } .btn-icon::after { content: ''; width: 0; height: 0; border: 4px solid transparent; border-left: 7px solid currentColor; margin-left: 1px; } /* ─── TICKER ─── */ .ticker-section { padding: 40px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .ticker-label { text-align: center; margin-bottom: 24px; font-size: 9px; font-weight: 600; letter-spacing: 5px; text-transform: uppercase; color: rgba(255,255,255,.18); } .ticker-row { overflow: hidden; position: relative; margin-bottom: 12px; } .ticker-row:last-child { margin-bottom: 0; } .ticker-row::before, .ticker-row::after { content: ''; position: absolute; top: 0; bottom: 0; width: 100px; z-index: 2; } .ticker-row::before { left: 0; background: linear-gradient(to right, var(--ink), transparent); } .ticker-row::after { right: 0; background: linear-gradient(to left, var(--ink), transparent); } .ticker-track { display: flex; gap: 40px; width: max-content; align-items: center; } .ticker-track.left { animation: tickL 30s linear infinite; } .ticker-track.right { animation: tickR 38s linear infinite; } @keyframes tickL { to { transform: translateX(-50%); } } @keyframes tickR { from { transform: translateX(-50%); } to { transform: translateX(0); } } .ticker-logo { flex: 0 0 82px; height: 28px; background: rgba(255,255,255,.07); border-radius: 3px; /* REPLACE: use client */ } /* ─── FOOTER ─── */ .site-footer { background: var(--ink); border-top: 1px solid var(--border); padding: 60px var(--pad) 40px; } .footer-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 40px; margin-bottom: 48px; } .footer-logo{ display:flex; align-items:center; gap:0; } .footer-logo-img{ display:block; height:34px; width:auto; object-fit:contain; transition:opacity .3s ease, transform .35s var(--ease); } .footer-logo:hover .footer-logo-img{ opacity:.92; transform:translateY(-1px); } .footer-nav { display: flex; gap: 28px; flex-wrap: wrap; justify-content: center; } .footer-nav a { font-size: 9px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: rgba(255,255,255,.3); transition: color .3s; } .footer-nav a:hover { color: var(--white); } .footer-contact { text-align: right; } .footer-contact a { display: block; font-size: 12px; font-weight: 300; color: rgba(255,255,255,.3); transition: color .3s; margin-bottom: 4px; } .footer-contact a:hover { color: var(--white); } .footer-bottom { border-top: 1px solid rgba(255,255,255,.04); padding-top: 28px; display: flex; justify-content: space-between; font-size: 10px; font-weight: 300; color: rgba(255,255,255,.18); flex-wrap: wrap; gap: 12px; } /* ─── RESPONSIVE ─── */ @media (max-width: 900px) { :root { --pad: 24px; --nav-h: 72px; } .nav-links, .nav-cta { display: none; } .nav-hamburger { display: flex; } .footer-top { grid-template-columns: 1fr; } .footer-contact { text-align: left; } .footer-bottom { flex-direction: column; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } [data-reveal] { opacity: 1 !important; transform: none !important; } } /* ─── PATCH v1 — official logo / clearer service cards ─── */ @media (max-width: 900px){ .nav-logo-img{height:30px} } /* ─── PATCH v2 — brighter palette / footer alignment / symbol ─── */ body{ color: rgba(255,255,255,.94); } .nav-logo-img{ height: 38px; } .btn-primary{ box-shadow: 0 10px 26px rgba(255,255,255,.08); } .btn-outline{ border-color: rgba(255,255,255,.18); color: rgba(255,255,255,.86); } .btn-outline:hover{ border-color: rgba(255,255,255,.42); } .reel-wrap{ border-color: rgba(255,255,255,.10); } .reel-placeholder{ background: radial-gradient(circle at 18% 18%, rgba(68,215,255,.15), transparent 32%), radial-gradient(circle at 84% 78%, rgba(255,74,52,.16), transparent 28%), linear-gradient(135deg, #0b1017 0%, #09090c 45%, #120d0d 100%); } .featured-section{ background: linear-gradient(180deg, rgba(255,255,255,.01), rgba(255,255,255,.005)), var(--ink3); } /* ═══════════════════════════════════════════ PATCH v3 — nav centre · rail · play btn · services · animations ═══════════════════════════════════════════ */ /* ── NAV: 3-zone layout ── */ .oc-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; } .nav-logo--left { justify-self: start; display: flex; align-items: center; } .nav-logo--center { justify-self: center; display: flex; align-items: center; } .nav-links { justify-self: end; display: flex; align-items: center; gap: 36px; } .nav-hamburger { justify-self: end; } /* Symbol in nav — smaller, clean */ .nav-symbol-img { height: 36px; width: 36px; object-fit: contain; opacity: .82; filter: saturate(1.1); transition: opacity .35s var(--ease), transform .6s var(--ease); border-radius: 50%; } .nav-logo--center:hover .nav-symbol-img { opacity: 1; transform: rotate(180deg) scale(1.08); } /* Shrink hero margin from top (pull content up) */ .hero { padding-top: 0; } .hero-content { padding-top: 0; } /* ── REEL PLAY BTN: no ring variant ── */ .reel-play-btn--clean::before { display: none !important; } .reel-play-btn--clean { border: 1.5px solid rgba(255,255,255,.32) !important; background: rgba(255,255,255,.06) !important; transition: background .4s var(--ease), border-color .4s, transform .5s var(--ease), box-shadow .4s !important; } .reel-wrap:hover .reel-play-btn--clean { background: rgba(255,255,255,.13) !important; border-color: rgba(255,255,255,.6) !important; transform: scale(1.12) !important; box-shadow: 0 0 32px rgba(255,255,255,.08), 0 0 64px rgba(36,97,196,.15) !important; } /* ── SERVICES: tags row ── */ .svcs-head-right { display: flex; flex-direction: column; gap: 28px; justify-content: flex-end; } .svcs-tags { display: flex; flex-wrap: wrap; gap: 8px; } .svcs-tag { font-size: 9px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,.48); border: 1px solid rgba(255,255,255,.12); padding: 6px 14px; border-radius: 100px; transition: color .3s, border-color .3s, background .3s; cursor: default; } .svcs-tag:hover { color: rgba(255,255,255,.9); border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.05); } /* ── WORK RAIL: 4-card expand-on-hover ── */ .featured-section { padding-bottom: 0; } .work-rail { display: flex; height: clamp(380px, 42vw, 600px); gap: 3px; border-radius: 16px; overflow: hidden; cursor: none; } .work-card { position: relative; flex: 1; min-width: 0; overflow: hidden; transition: flex .6s cubic-bezier(.16,1,.3,1); cursor: none; } /* On hover, the hovered card expands and siblings shrink */ .work-rail:hover .work-card { flex: 0.5; } .work-rail:hover .work-card:hover { flex: 2.8; } /* Background panels */ .work-card-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .7s cubic-bezier(.16,1,.3,1), filter .5s; } .work-card:hover .work-card-bg { transform: scale(1.04); } /* Placeholder colour backgrounds (replace with images) */ .work-card-bg--1 { background-color: #0d1520; background-image: radial-gradient(circle at 30% 40%, rgba(30,155,255,.28), transparent 55%), radial-gradient(circle at 80% 80%, rgba(255,74,52,.14), transparent 45%); } .work-card-bg--2 { background-color: #140f20; background-image: radial-gradient(circle at 60% 30%, rgba(124,53,232,.30), transparent 55%), radial-gradient(circle at 20% 80%, rgba(68,215,255,.12), transparent 45%); } .work-card-bg--3 { background-color: #1a0e0c; background-image: radial-gradient(circle at 50% 60%, rgba(255,74,52,.26), transparent 55%), radial-gradient(circle at 90% 20%, rgba(255,122,61,.14), transparent 45%); } .work-card-bg--4 { background-color: #0a1518; background-image: radial-gradient(circle at 40% 50%, rgba(68,215,255,.22), transparent 55%), radial-gradient(circle at 80% 90%, rgba(30,155,255,.16), transparent 45%); } /* Dark overlay + info at bottom */ .work-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient( to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.18) 40%, transparent 70% ); transition: opacity .4s; } .work-card-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 28px 28px 32px; z-index: 2; transform: translateY(8px); opacity: 0; transition: opacity .45s var(--ease), transform .45s var(--ease); display: flex; flex-direction: column; gap: 6px; } .work-card:hover .work-card-info { opacity: 1; transform: translateY(0); } .work-card-tag { font-size: 8px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: rgba(255,255,255,.5); } .work-card-title { font-size: 20px; font-weight: 700; line-height: 1.2; color: #fff; } .work-card-arrow { font-size: 18px; color: rgba(255,255,255,.4); margin-top: 4px; display: inline-block; transition: transform .3s var(--ease), color .3s; } .work-card:hover .work-card-arrow { transform: translateX(6px); color: rgba(255,255,255,.8); } /* Thin colour accent line at top of each card */ .work-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 3; opacity: 0; transition: opacity .4s; } .work-card:nth-child(1)::before { background: linear-gradient(to right, #1e9bff, #44d7ff); } .work-card:nth-child(2)::before { background: linear-gradient(to right, #7c35e8, #1e9bff); } .work-card:nth-child(3)::before { background: linear-gradient(to right, #ff4a34, #ff7a3d); } .work-card:nth-child(4)::before { background: linear-gradient(to right, #44d7ff, #7c35e8); } .work-card:hover::before { opacity: 1; } /* ── CTA: cleaner section ── */ .cta-section { padding: 160px var(--pad); text-align: center; position: relative; overflow: hidden; } .cta-section::before { content: ''; position: absolute; width: 800px; height: 800px; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); background: conic-gradient(from 0deg, rgba(36,97,196,.06), rgba(124,53,232,.07), rgba(245,113,26,.05), rgba(36,97,196,.06)); filter: blur(80px); pointer-events: none; } .cta-h2 { font-family: 'Inter Tight', sans-serif; font-size: clamp(64px, 9vw, 140px); line-height: .9; letter-spacing: 2px; margin-bottom: 20px; position: relative; z-index: 1; } .cta-sub { font-size: 18px; font-weight: 300; color: rgba(255,255,255,.5); margin-bottom: 52px; position: relative; z-index: 1; } /* ── GLOBAL PREMIUM ANIMATIONS ── */ /* Subtle parallax float on hero symbol */ @keyframes floatSymbol { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-12px) rotate(3deg); } } .hero-symbol { animation: floatSymbol 8s ease-in-out infinite !important; } .symbol-watermark { animation: floatSymbol 10s ease-in-out 1s infinite !important; } /* Magnetic-style stat cards */ .stat-card { transition: transform .4s var(--ease), border-color .4s, box-shadow .4s !important; } .stat-card:hover { transform: translateY(-5px) !important; border-color: rgba(255,255,255,.16) !important; box-shadow: 0 24px 48px rgba(0,0,0,.4) !important; } /* Service items — smoother lift */ .svc-item { transition: transform .4s var(--ease), background .4s !important; } .svc-item:hover { transform: translateY(-3px) !important; } /* Reel wrap subtle lift */ .reel-wrap { transition: transform .5s var(--ease), border-color .4s, box-shadow .5s !important; } .reel-wrap:hover { transform: scale(1.004) !important; box-shadow: 0 56px 140px rgba(0,0,0,.8) !important; } /* CTA button pulse */ @keyframes ctaPulse { 0%, 100% { box-shadow: 0 0 24px rgba(124,53,232,.3); } 50% { box-shadow: 0 0 44px rgba(124,53,232,.55), 0 0 80px rgba(245,113,26,.18); } } .btn-grad { animation: ctaPulse 3s ease-in-out infinite; } .btn-grad:hover { animation: none; } /* Smooth s-label reveal line */ .s-label::before { transition: width .6s var(--ease); width: 0; } .visible .s-label::before, [data-reveal].visible .s-label::before { width: 22px; } /* ── RESPONSIVE ── */ @media (max-width: 900px) { .oc-nav { grid-template-columns: auto 1fr auto; } .nav-logo--left { display: none; } .nav-logo--center { justify-self: start; } .nav-hamburger { grid-column: 3; } .work-rail { height: clamp(260px, 55vw, 380px); } .svcs-tags { display: none; } } /* ═══════════════════════════════════════════ PATCH v4 — symbol centre · hero entrance · reel watch ═══════════════════════════════════════════ */ /* ── NAV: logo left, symbol centre (bigger) ── */ .nav-logo--left .nav-logo-img { height: 34px; width: auto; object-fit: contain; opacity: .9; transition: opacity .3s var(--ease), transform .4s var(--ease); } .nav-logo--left:hover .nav-logo-img { opacity: 1; transform: translateY(-1px); } /* Centre symbol — larger, more presence */ .nav-logo--center .nav-symbol-img { height: 52px; width: 52px; object-fit: contain; opacity: .88; filter: saturate(1.15) brightness(1.05); transition: opacity .35s var(--ease), transform .7s var(--ease), filter .4s; border-radius: 50%; } .nav-logo--center:hover .nav-symbol-img { opacity: 1; transform: rotate(200deg) scale(1.1); filter: saturate(1.4) brightness(1.15); } /* Scrolled state — shrink symbol slightly */ .oc-nav.scrolled .nav-logo--center .nav-symbol-img { height: 44px; width: 44px; } /* ── HERO: cinematic entrance ── */ /* Content centred vertically, not flush to bottom */ .hero--cinematic { align-items: center; padding-top: var(--nav-h); padding-bottom: 0; } .hero--cinematic .hero-content { padding-top: 0; padding-bottom: 0; } /* Stagger the eyebrow + h1 + sub with a cinematic wipe feel */ .hero--cinematic .hero-eyebrow { animation-delay: .25s; } .hero--cinematic .hero-line:nth-child(1) { animation-delay: .44s; } .hero--cinematic .hero-line:nth-child(2) { animation-delay: .58s; } .hero--cinematic .hero-sub { animation-delay: .82s; } .hero--cinematic .hero-actions { animation-delay: .98s; } /* Cinematic horizontal line that sweeps in under the eyebrow */ .hero--cinematic .hero-content::before { content: ''; display: block; height: 1px; width: 0; background: linear-gradient(to right, rgba(30,155,255,.7), rgba(255,74,52,.5), transparent); margin-bottom: 32px; animation: sweepLine .9s var(--ease) .18s forwards; } @keyframes sweepLine { from { width: 0; opacity: 0; } to { width: clamp(120px, 16vw, 260px); opacity: 1; } } /* Scroll indicator repositioned for centred hero */ .hero--cinematic .hero-scroll { bottom: 48px; } /* Reduce gap between nav and first visible content */ .hero--cinematic .hero-year { top: calc(var(--nav-h) + 16px); } /* ── REEL: WATCH button ── */ .reel-watch { position: relative; width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; cursor: none; transition: transform .5s var(--ease); } .reel-wrap:hover .reel-watch { transform: scale(1.08); } /* SVG ring */ .reel-watch-ring { position: absolute; inset: 0; width: 100%; height: 100%; } /* The coloured arc animates in on hover */ .reel-watch-arc { transition: stroke-dashoffset .7s var(--ease); transform-origin: 60px 60px; transform: rotate(-90deg); } .reel-wrap:hover .reel-watch-arc { stroke-dashoffset: 0; } /* Text label */ .reel-watch-label { font-family: 'Inter Tight', sans-serif; font-size: 16px; letter-spacing: 6px; color: rgba(255,255,255,.72); position: relative; z-index: 1; transition: color .35s, letter-spacing .4s var(--ease); user-select: none; } .reel-wrap:hover .reel-watch-label { color: rgba(255,255,255,1); letter-spacing: 8px; } /* Hide old play-label if leftover */ .reel-play-label { display: none; } /* ── Responsive ── */ @media (max-width: 900px) { .nav-logo--center .nav-symbol-img { height: 40px; width: 40px; } .reel-watch { width: 88px; height: 88px; } .reel-watch-label { font-size: 13px; letter-spacing: 4px; } .hero--cinematic { align-items: flex-end; padding-bottom: 72px; } } /* ═══════════════════════════════════════════ PATCH v5 — intro · section spacing · symbol size · white CTA ═══════════════════════════════════════════ */ /* ── SECTION SPACING +20% ── */ .section-pad { padding-block: 168px; } /* was 140 → +20% */ .section-pad-sm{ padding-block: 120px; } /* was 100 → +20% */ .reel-section { padding-bottom: 168px; } /* sync */ .featured-section { padding-top: 168px; padding-bottom: 168px; } /* ── NAV SYMBOL — same height as logo ── */ .nav-logo--center .nav-symbol-img { height: 34px !important; /* match logo height */ width: 34px !important; } .oc-nav.scrolled .nav-logo--center .nav-symbol-img { height: 30px !important; width: 30px !important; } /* ── CTA — all white ── */ .cta-h2--white { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } .cta-h2--white .grad-text, .cta-h2--white span { background: none !important; -webkit-background-clip: unset !important; -webkit-text-fill-color: #ffffff !important; background-clip: unset !important; animation: none !important; color: #ffffff !important; } .cta-sub--white { color: rgba(255,255,255,.7) !important; } .btn-cta-white { display: inline-flex; align-items: center; gap: 10px; font-size: 10px; font-weight: 700; letter-spacing: 3.5px; text-transform: uppercase; border-radius: 100px; transition: all .35s var(--ease); white-space: nowrap; background: #ffffff; color: #07070a; padding: 18px 40px; border: none; box-shadow: 0 0 40px rgba(255,255,255,.12), 0 12px 32px rgba(0,0,0,.4); position: relative; overflow: hidden; } .btn-cta-white::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.0), rgba(255,255,255,.06)); opacity: 0; transition: opacity .35s; } .btn-cta-white:hover { transform: translateY(-3px); box-shadow: 0 0 60px rgba(255,255,255,.18), 0 20px 48px rgba(0,0,0,.5); background: rgba(255,255,255,.92); } .btn-cta-white:hover::before { opacity: 1; } /* ── INTRO OVERLAY ── */ .intro { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #07070a; opacity: 0; transition: opacity .3s ease; pointer-events: all; } .intro--visible { opacity: 1; } /* Background gradient bloom */ .intro-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(30,155,255,.09), transparent 70%), radial-gradient(ellipse 40% 40% at 30% 70%, rgba(255,74,52,.07), transparent 60%); opacity: 0; transition: opacity 1.2s ease; } .intro--symbol .intro-bg { opacity: 1; } /* Content stack */ .intro-content { display: flex; flex-direction: column; align-items: center; gap: 20px; position: relative; z-index: 2; } /* Symbol */ .intro-symbol { width: clamp(80px, 10vw, 130px); height: clamp(80px, 10vw, 130px); object-fit: contain; opacity: 0; transform: scale(.6) rotate(-30deg); filter: saturate(1.2) brightness(1.1); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); } .intro--symbol .intro-symbol { opacity: 1; transform: scale(1) rotate(0deg); } /* Wordmark */ .intro-wordmark { overflow: hidden; } .intro-logo { height: clamp(28px, 3.5vw, 44px); width: auto; opacity: 0; transform: translateY(100%); transition: opacity .7s var(--ease), transform .7s var(--ease); } .intro--wordmark .intro-logo { opacity: 1; transform: translateY(0); } /* Horizontal line */ .intro-line { width: 0; height: 1px; background: linear-gradient(to right, transparent, rgba(255,255,255,.3), transparent); transition: width .6s var(--ease); } .intro--line .intro-line { width: clamp(160px, 20vw, 280px); } /* Sub text */ .intro-sub { font-size: 9px; font-weight: 600; letter-spacing: 5px; text-transform: uppercase; color: rgba(255,255,255,.0); transition: color .5s ease; } .intro--sub .intro-sub { color: rgba(255,255,255,.52); } /* Exit — vertical bars wipe */ .intro-bars { position: absolute; inset: 0; display: flex; pointer-events: none; } .intro-bars span { flex: 1; background: #07070a; transform: scaleY(0); transform-origin: bottom; transition: transform 0s; } .intro--exit .intro-bars span { transform: scaleY(1); transition: transform .55s cubic-bezier(.76,0,.24,1); } /* Stagger each bar */ .intro--exit .intro-bars span:nth-child(1) { transition-delay: .00s; } .intro--exit .intro-bars span:nth-child(2) { transition-delay: .04s; } .intro--exit .intro-bars span:nth-child(3) { transition-delay: .08s; } .intro--exit .intro-bars span:nth-child(4) { transition-delay: .12s; } .intro--exit .intro-bars span:nth-child(5) { transition-delay: .16s; } .intro--exit .intro-bars span:nth-child(6) { transition-delay: .20s; } .intro--exit .intro-bars span:nth-child(7) { transition-delay: .24s; } .intro--exit .intro-bars span:nth-child(8) { transition-delay: .28s; } .intro--exit .intro-bars span:nth-child(9) { transition-delay: .32s; } .intro--exit .intro-bars span:nth-child(10) { transition-delay: .36s; } /* After bars close, fade out whole overlay */ .intro--exit { transition: opacity .3s ease .9s !important; opacity: 0 !important; } /* ── Reduced motion: skip intro ── */ @media (prefers-reduced-motion: reduce) { .intro { display: none !important; } } /* ═══════════════════════════════════════════ PATCH v6 — symbol bigger · hero no dead space ═══════════════════════════════════════════ */ /* ── NAV: symbol bigger — matches logo visual weight ── */ .nav-logo--center .nav-symbol-img { height: 48px !important; width: 48px !important; opacity: .95 !important; } .oc-nav.scrolled .nav-logo--center .nav-symbol-img { height: 38px !important; width: 38px !important; } /* ── HERO: kill the cinematic patch that fought the grid ── */ .hero--cinematic { align-items: unset !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* Content now vertically centred via grid, no extra padding needed */ .hero--cinematic .hero-content { padding-top: calc(var(--nav-h) + 40px) !important; padding-bottom: 64px !important; } /* Remove the sweep line — it added unexpected spacing */ .hero--cinematic .hero-content::before { display: none !important; } /* Tighten bottom of hero — scroll indicator */ .hero--cinematic .hero-scroll { bottom: 36px !important; } /* ── Global: ensure hero uses full height properly ── */ .hero { min-height: 100svh !important; } /* ═══════════════════════════════════════════ PATCH v7 — reel play icon · services panels ═══════════════════════════════════════════ */ /* ── REEL: more top breathing room + play icon ── */ .reel-section { padding-top: 48px !important; /* extra space from hero */ padding-bottom: 168px; } .reel-play-ui { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; pointer-events: none; } .reel-play-icon { width: 80px; height: 80px; background: none; border: none; padding: 0; cursor: none; pointer-events: all; transition: transform .5s var(--ease), filter .4s; display: flex; align-items: center; justify-content: center; } .reel-play-icon svg { width: 80px; height: 80px; transition: transform .5s var(--ease); filter: drop-shadow(0 0 0px rgba(255,255,255,0)); } /* Circle pulse ring */ .reel-play-icon svg circle { transition: stroke .4s, r .4s; } .reel-wrap:hover .reel-play-icon svg { transform: scale(1.12); filter: drop-shadow(0 0 18px rgba(255,255,255,.22)); } .reel-wrap:hover .reel-play-icon svg circle { stroke: rgba(255,255,255,.52); } /* Second pulse ring — animated */ .reel-play-icon::after { content: ''; position: absolute; width: 80px; height: 80px; border-radius: 50%; border: 1px solid rgba(255,255,255,.0); transition: width .6s var(--ease), height .6s var(--ease), border-color .4s, opacity .5s; opacity: 0; } .reel-wrap:hover .reel-play-icon::after { width: 110px; height: 110px; border-color: rgba(255,255,255,.12); opacity: 1; } /* ── SERVICES: new panel layout ── */ /* Kill old svc-item styles that may bleed in */ .svcs-section { background: var(--ink2); } /* Intro block */ .svcs-intro { padding: 120px 0 80px; } .svcs-intro-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; } .svcs-intro-left {} .svcs-h2 { font-family: 'Inter Tight', sans-serif; font-size: clamp(52px, 6.5vw, 100px); line-height: .9; letter-spacing: 2px; } .svcs-intro-right { display: flex; flex-direction: column; gap: 24px; } .svcs-desc { font-size: 17px; font-weight: 300; line-height: 1.75; color: rgba(255,255,255,.5); } /* Three panels — edge-to-edge, equal height */ .svcs-panels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid rgba(255,255,255,.07); } .svc-panel { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(340px, 36vw, 520px); overflow: hidden; text-decoration: none; border-right: 1px solid rgba(255,255,255,.07); cursor: none; } .svc-panel:last-child { border-right: none; } /* Colour background per panel */ .svc-panel-bg { position: absolute; inset: 0; transition: transform .8s cubic-bezier(.16,1,.3,1), opacity .5s; background-size: cover; background-position: center; } .svc-panel-bg--1 { background: radial-gradient(ellipse 80% 60% at 20% 80%, rgba(30,155,255,.22), transparent 55%), radial-gradient(ellipse 60% 80% at 80% 20%, rgba(30,155,255,.08), transparent 60%), linear-gradient(160deg, #0c1523 0%, #080810 100%); } .svc-panel-bg--2 { background: radial-gradient(ellipse 80% 60% at 50% 80%, rgba(124,53,232,.22), transparent 55%), radial-gradient(ellipse 60% 80% at 20% 20%, rgba(124,53,232,.06), transparent 60%), linear-gradient(160deg, #100c1e 0%, #080810 100%); } .svc-panel-bg--3 { background: radial-gradient(ellipse 80% 60% at 80% 80%, rgba(255,74,52,.2), transparent 55%), radial-gradient(ellipse 60% 80% at 10% 20%, rgba(255,122,61,.06), transparent 60%), linear-gradient(160deg, #180e0c 0%, #080810 100%); } .svc-panel:hover .svc-panel-bg { transform: scale(1.04); opacity: 1; } /* Panel bottom gradient for text legibility */ .svc-panel::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.1) 50%, transparent 100%); transition: opacity .4s; } /* Number — top left, big ghost */ .svc-panel-num { position: absolute; top: 32px; left: 36px; font-family: 'Inter Tight', sans-serif; font-size: 88px; line-height: 1; letter-spacing: -2px; color: rgba(255,255,255,.06); z-index: 2; transition: color .4s, transform .5s var(--ease); } .svc-panel:hover .svc-panel-num { color: rgba(255,255,255,.12); transform: scale(1.05) translateY(-4px); } /* Content block */ .svc-panel-inner { position: relative; z-index: 2; padding: 36px; display: flex; align-items: flex-end; gap: 20px; } .svc-panel-body { flex: 1; } .svc-panel-name { font-family: 'Inter Tight', sans-serif; font-size: clamp(38px, 4vw, 56px); letter-spacing: 1px; line-height: 1; color: rgba(255,255,255,.9); margin-bottom: 10px; transition: letter-spacing .4s var(--ease), color .3s; } .svc-panel:hover .svc-panel-name { color: #fff; letter-spacing: 2px; } .svc-panel-text { font-size: 13px; font-weight: 300; line-height: 1.6; color: rgba(255,255,255,.46); max-width: 30ch; opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .4s var(--ease); } .svc-panel:hover .svc-panel-text { opacity: 1; transform: translateY(0); } /* Arrow icon */ .svc-panel-arrow { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.5); transition: border-color .35s, color .35s, background .35s, transform .4s var(--ease); align-self: flex-end; margin-bottom: 4px; } .svc-panel:nth-child(1):hover .svc-panel-arrow { border-color: rgba(30,155,255,.7); color: #1e9bff; background: rgba(30,155,255,.08); transform: translateX(4px); } .svc-panel:nth-child(2):hover .svc-panel-arrow { border-color: rgba(124,53,232,.7); color: #7c35e8; background: rgba(124,53,232,.08); transform: translateX(4px); } .svc-panel:nth-child(3):hover .svc-panel-arrow { border-color: rgba(255,74,52,.7); color: #ff4a34; background: rgba(255,74,52,.08); transform: translateX(4px); } /* Colour accent top line per panel */ .svc-panel::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 3; opacity: 0; transition: opacity .4s; } .svc-panel:nth-child(1)::after { background: linear-gradient(to right, #1e9bff, #44d7ff); } .svc-panel:nth-child(2)::after { background: linear-gradient(to right, #7c35e8, #1e9bff); } .svc-panel:nth-child(3)::after { background: linear-gradient(to right, #ff4a34, #ff7a3d); } .svc-panel:hover::after { opacity: 1; } /* Mobile */ @media (max-width: 900px) { .svcs-intro-inner { grid-template-columns: 1fr; gap: 28px; } .svcs-intro { padding: 80px 0 48px; } .svcs-panels { grid-template-columns: 1fr; } .svc-panel { border-right: none; border-bottom: 1px solid rgba(255,255,255,.07); min-height: 260px; } .svc-panel-text { opacity: 1; transform: none; } } /* ═══════════════════════════════════════════ PATCH v23 — hero--cinema FINAL Editorial split · Prismatic beam · Clean logo ═══════════════════════════════════════════ */ /* Kill all old hero canvas/logo classes */ .grad-canvas,.prism-canvas,.flare-canvas,.hero-canvas, .hero-fx-canvas,.hero-bg-canvas,.rings-canvas { display:none!important; } .logo3d-wrap,.sw-stage { display:none!important; } /* ── Nav logo: no black bg ── */ .nav-logo-img { height: 36px !important; width: auto !important; object-fit: contain !important; mix-blend-mode: screen; /* kills any residual black bg */ filter: brightness(1.05); } /* ── Hero base ── */ .hero--cinema { min-height: 100svh !important; display: grid !important; grid-template-rows: 1fr auto auto !important; position: relative !important; overflow: hidden !important; background: #080810 !important; padding: 0 !important; } /* Canvas */ .hero-main-canvas { position: absolute!important; inset:0!important; width:100%!important; height:100%!important; z-index:0!important; display:block!important; pointer-events:none!important; } /* Grain */ .hero-grain { z-index:2!important; opacity:.034!important; } /* Thin horizontal rule — bisects the hero, adds editorial structure */ .hero-rule { position: absolute; left: 0; right: 0; top: 52%; height: 1px; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,.06) 15%, rgba(255,255,255,.10) 50%, rgba(255,255,255,.06) 85%, transparent 100% ); z-index: 3; pointer-events: none; } /* ── Logo zone — upper 52% ── */ .hero-logo-zone { position: absolute; top: var(--nav-h); left: 0; right: 0; bottom: 48%; display: flex; align-items: center; justify-content: flex-start; padding-left: var(--pad); z-index: 4; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 78%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 78%, transparent 100%); } .hero-logo-cinematic { width: clamp(220px, 30vw, 480px); height: auto; mix-blend-mode: screen; filter: brightness(1.08) drop-shadow(0 0 24px rgba(255,255,255,.08)); opacity: 0; animation: logoReveal 1.1s cubic-bezier(.16,1,.3,1) 3.85s forwards, logoFloat 9s ease-in-out 5.2s infinite; } @keyframes logoReveal { from { opacity:0; transform:translateX(-18px) skewX(-2deg); } to { opacity:1; transform:translateX(0) skewX(0deg); } } @keyframes logoFloat { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-6px) rotate(.2deg); } } /* ── Cinema content — lower 48%, split layout ── */ .hero-cinema-content { grid-row: 2; display: grid; grid-template-columns: 1fr auto; gap: 0 48px; align-items: end; padding: 0 var(--pad) 60px; position: relative; z-index: 5; } /* Eyeline label */ .hero-eyeline { display: inline-flex; align-items: center; gap: 10px; font-size: 9px; font-weight: 700; letter-spacing: 5px; text-transform: uppercase; color: rgba(255,255,255,.48); margin-bottom: 22px; display: flex; opacity: 0; animation: fadeUp .6s var(--ease) 3.8s forwards; } .hero-eyeline-tick { width: 20px; height: 1px; background: linear-gradient(to right, #1e9bff, #ff7a3d); flex-shrink: 0; } /* Giant headline — each line massive */ .hero-h1-cinema { font-family: 'Inter Tight', sans-serif; font-size: clamp(88px, 13.5vw, 216px); line-height: .84; letter-spacing: -.5px; color: #fff; overflow: visible; margin: 0; } .hline { display: block; opacity: 0; transform: translateY(110%); animation: lineReveal 1s var(--ease) forwards; overflow: hidden; } .hline-1 { animation-delay: 3.72s; } .hline-2 { animation-delay: 3.86s; } .hline-3 { animation-delay: 4.00s; /* "comunica." picks up beam colour via mix-blend */ background: linear-gradient(95deg, #fff 0%, #fff 40%, rgba(255,200,80,.9) 65%, rgba(80,180,255,.9) 100% ); background-size: 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: lineReveal 1s var(--ease) 4.00s forwards, gradDrift 8s ease-in-out 5s infinite alternate; } @keyframes gradDrift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } } /* ── Right meta column ── */ .hero-meta-block { display: flex; flex-direction: column; align-items: flex-end; gap: 20px; padding-bottom: 8px; opacity: 0; animation: fadeUp .8s var(--ease) 4.1s forwards; } .hero-meta-item { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; } .hero-meta-num { font-family: 'Inter Tight', sans-serif; font-size: 38px; line-height: 1; letter-spacing: -1px; color: rgba(255,255,255,.9); } .hero-meta-label { font-size: 8px; font-weight: 700; letter-spacing: 5px; text-transform: uppercase; color: rgba(255,255,255,.48); } .hero-meta-divider { width: 32px; height: 1px; background: linear-gradient(to left, rgba(255,255,255,.15), transparent); } .hero-meta-actions { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; } /* ── Bottom bar ── */ .hero-cinema-bar { grid-row: 3; display: flex; align-items: center; justify-content: space-between; padding: 13px var(--pad); border-top: 1px solid rgba(255,255,255,.06); font-size: 9px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: rgba(255,255,255,.55); position: relative; z-index: 5; opacity: 0; animation: fadeUp .5s var(--ease) 4.3s forwards; } .hcb-centre { color: rgba(255,255,255,.1); } /* Scroll indicator */ .hero--cinema .hero-scroll { position: absolute; bottom: 52px; right: var(--pad); z-index: 6; } /* Mobile */ @media (max-width: 900px) { .hero-cinema-content { grid-template-columns: 1fr; padding-bottom: 80px; } .hero-meta-block { display: none; } .hero-h1-cinema { font-size: clamp(62px, 16vw, 100px); } .hero-logo-cinematic { width: clamp(180px, 58vw, 320px); } .hero-cinema-bar { display: none; } } /* ═══════════════════════════════════════════ PATCH v24 — beam fix · no yellow · nav clean ═══════════════════════════════════════════ */ /* ── "comunica." — only blue & orange, no yellow ── */ .hline-3 { background: linear-gradient(95deg, #ffffff 0%, #ffffff 35%, rgba(255,120,30,.92) 62%, rgba(30,160,255,.92) 100% ) !important; background-size: 200% !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } /* ── Nav: only symbol, centred, bigger ── */ .nav-slot-left { /* Mirrors the nav-links width to keep symbol centred */ flex-shrink: 0; width: 0; /* invisible, grid handles centering */ } /* Symbol size */ .nav-logo--center .nav-symbol-img { height: 62px !important; width: 62px !important; } .oc-nav.scrolled .nav-logo--center .nav-symbol-img { height: 48px !important; width: 48px !important; } /* Nav grid: left = 0, centre = auto, right = links */ .oc-nav { grid-template-columns: 0 1fr auto !important; } /* ═══════════════════════════════════════════ PATCH v25 — logo bigger · nav centred · no rule · header height ═══════════════════════════════════════════ */ /* ── 1. Intro logo: no black background ── */ .intro-logo { mix-blend-mode: screen !important; filter: brightness(1.1) !important; } .intro-wordmark { background: none !important; } /* ── 2. Hero logo — bigger ── */ .hero-logo-cinematic { width: clamp(340px, 46vw, 720px) !important; } /* ── 3. Nav — reduce height, symbol truly centred ── */ :root { --nav-h: 62px !important; } .oc-nav { height: 62px !important; /* 3-col grid: left side = width of nav-links so symbol is centred */ display: grid !important; grid-template-columns: 1fr auto 1fr !important; align-items: center !important; padding: 0 var(--pad) !important; } .oc-nav.scrolled { height: 52px !important; } /* Left slot: invisible but same width as links so centre is true */ .nav-slot-left { width: auto !important; justify-self: start; } /* Centre: symbol */ .nav-logo--center { justify-self: center !important; } /* Links: right-aligned */ .nav-links { justify-self: end !important; display: flex !important; } .nav-hamburger { justify-self: end !important; } /* Symbol size — kept at 62px but nav is now shorter so it breathes */ .nav-logo--center .nav-symbol-img { height: 56px !important; width: 56px !important; } .oc-nav.scrolled .nav-logo--center .nav-symbol-img { height: 44px !important; width: 44px !important; } /* ── 4. Hero rule — hidden ── */ .hero-rule { display: none !important; } /* ── 5. Hero h1 — bigger ── */ .hero-h1-cinema { font-size: clamp(100px, 15.5vw, 240px) !important; line-height: .82 !important; } @media (max-width: 900px) { :root { --nav-h: 58px !important; } .oc-nav { height: 58px !important; } .hero-logo-cinematic { width: clamp(240px, 74vw, 420px) !important; } .hero-h1-cinema { font-size: clamp(68px, 17vw, 110px) !important; } } /* PATCH v26 — h1 smaller · logo hero bigger */ .hero-h1-cinema { font-size: clamp(52px, 8.5vw, 240px) !important; line-height: .82 !important; } .hero-logo-cinematic { width: clamp(340px, 76vw, 720px) !important; } /* PATCH v27 — single line h1 · reduce logo-to-header gap */ /* Single line — no wrapping */ .hero-h1-cinema { white-space: nowrap !important; } .hline { display: inline !important; } /* "comunica." inline gradient */ .hline-3-inline { background: linear-gradient(95deg, #ffffff 0%, #ffffff 30%, rgba(255,120,30,.92) 58%, rgba(30,160,255,.92) 100% ); background-size: 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: gradDrift 8s ease-in-out 5s infinite alternate; } /* Reduce gap between logo zone and content */ .hero-logo-zone { bottom: 44% !important; /* was 48%, closer to content */ } .hero-cinema-content { padding-bottom: 48px !important; } @media (max-width: 900px) { .hero-h1-cinema { white-space: normal !important; font-size: clamp(42px, 11vw, 80px) !important; } } /* ═══════════════════════════════════════════ PATCH v28 — hero centred · nav with logo ═══════════════════════════════════════════ */ /* ── Nav: back to 3-col with logo left ── */ .oc-nav { grid-template-columns: 1fr auto 1fr !important; } .nav-logo--left { justify-self: start; display: flex; align-items: center; } .nav-logo-img { height: 32px !important; width: auto !important; mix-blend-mode: screen; filter: brightness(1.05); transition: opacity .3s; } .nav-logo--left:hover .nav-logo-img { opacity: .8; } /* ── Hero: kill logo zone, show centred block ── */ .hero-logo-zone { display: none !important; } .hero-logo-cinematic { display: none !important; } .hero-cinema-content { display: none !important; } .hero-meta-block { display: none !important; } /* Centred content block */ .hero-centred { position: relative; z-index: 5; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 0 var(--pad); grid-row: 1; /* fills the main row */ align-self: center; } /* Eyeline — same as before */ .hero-eyeline { display: inline-flex; align-items: center; gap: 10px; font-size: 9px; font-weight: 700; letter-spacing: 5px; text-transform: uppercase; color: rgba(255,255,255,.30); margin-bottom: 20px; opacity: 0; animation: fadeUp .6s var(--ease) 3.8s forwards; } .hero-eyeline-tick { width: 20px; height: 1px; background: linear-gradient(to right, #1e9bff, #ff7a3d); flex-shrink: 0; } /* H1 — huge, tight */ .hero-h1-cinema { font-size: clamp(64px, 10vw, 160px) !important; line-height: .86 !important; white-space: nowrap !important; margin-bottom: 44px; } /* Actions */ .hero-centred-actions { display: flex; gap: 14px; align-items: center; opacity: 0; animation: fadeUp .7s var(--ease) 4.15s forwards; } /* Bottom bar stays */ .hero-cinema-bar { z-index: 5 !important; } @media (max-width: 900px) { .hero-h1-cinema { white-space: normal !important; font-size: clamp(48px, 13vw, 90px) !important; } .hero-centred { padding: 0 var(--pad); } } /* PATCH v29 — hero half height · fix overlap */ /* Hero: half viewport height */ .hero--cinema { min-height: 52vh !important; max-height: 52vh !important; } /* Centred block: flex col with proper gap */ .hero-centred { padding-top: 0 !important; gap: 16px; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-end !important; padding-bottom: 44px !important; } /* Eyeline: reset any conflicting margin */ .hero-eyeline { margin-bottom: 0 !important; position: static !important; } /* H1: no extra bottom margin */ .hero-h1-cinema { margin-bottom: 0 !important; font-size: clamp(48px, 7vw, 110px) !important; } /* Actions: no extra top spacing */ .hero-centred-actions { margin-top: 4px; } /* Bottom bar */ .hero-cinema-bar { position: relative !important; } /* PATCH v30 — spacing + polish */ /* More breathing between eyeline and h1, and h1 and buttons */ .hero-centred { gap: 0 !important; } .hero-eyeline { margin-bottom: 18px !important; } .hero-h1-cinema { margin-bottom: 32px !important; letter-spacing: -.5px !important; } /* Eyeline tick — use brand colours */ .hero-eyeline-tick { background: linear-gradient(to right, #1e9bff, #ff7a3d) !important; width: 24px !important; } /* "comunica." — slightly stronger orange→blue sweep */ .hline-3-inline { background: linear-gradient(95deg, rgba(255,110,25,1) 0%, rgba(255,80,15,.9) 40%, rgba(30,155,255,.95) 100% ) !important; background-size: 200% !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } /* Buttons: slightly larger for visual weight at this scale */ .hero-centred-actions .btn { padding: 16px 34px !important; } /* Hero scroll indicator: keep visible */ .hero--cinema .hero-scroll { bottom: 16px !important; } /* ═══════════════════════════════════════════ HERO V2 — clean rebuild ═══════════════════════════════════════════ */ /* Hide every previous hero class */ .hero--final, .hero--cinema, .hero--clean, .hero--v2, .hero--3d, .hero--cam, .hero--gradient { display: none !important; } /* ── Section ── */ .hero-v2 { position: relative; min-height: 100svh; overflow: hidden; background: #07070a; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 var(--pad) 80px; } /* Canvas: behind everything */ .hv2-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; pointer-events: none; } /* Grain */ .hv2-grain { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .03; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 180px; mix-blend-mode: overlay; } /* ── Content block: bottom-left, above canvas ── */ .hv2-content { position: relative; z-index: 4; display: flex; flex-direction: column; gap: 0; max-width: 820px; } /* Eyebrow */ .hv2-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 9px; font-weight: 700; letter-spacing: 5px; text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: 20px; opacity: 0; animation: fadeUp .6s var(--ease) 3.7s forwards; } .hv2-dot { width: 5px; height: 5px; border-radius: 50%; background: linear-gradient(135deg, #1e9bff, #ff7a3d); box-shadow: 0 0 8px rgba(255,122,61,.5); flex-shrink: 0; } /* H1 */ .hv2-h1 { font-family: 'Inter Tight', sans-serif; font-size: clamp(72px, 10vw, 156px); line-height: .88; letter-spacing: -.5px; margin-bottom: 28px; overflow: hidden; } .hv2-line { display: block; opacity: 0; transform: translateY(105%); animation: hv2up 1s var(--ease) forwards; } .hv2-l1 { color: #ffffff; animation-delay: 3.76s; } .hv2-l2 { animation-delay: 3.90s; /* orange left → blue right — brand colours only */ background: linear-gradient(100deg, #ff6010 0%, #ff4010 38%, #1e9bff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; background-size: 200%; animation: hv2up 1s var(--ease) 3.90s forwards, gradDrift 10s ease-in-out 5.5s infinite alternate; } @keyframes hv2up { from { opacity: 0; transform: translateY(105%); } to { opacity: 1; transform: translateY(0); } } /* Sub */ .hv2-sub { font-size: 16px; font-weight: 300; line-height: 1.7; color: rgba(255,255,255,.48); margin-bottom: 36px; opacity: 0; animation: fadeUp .7s var(--ease) 4.05s forwards; } /* Actions */ .hv2-actions { display: flex; gap: 14px; align-items: center; opacity: 0; animation: fadeUp .6s var(--ease) 4.2s forwards; } /* ── Bottom bar ── */ .hv2-bar { position: relative; z-index: 4; display: flex; justify-content: space-between; padding-top: 24px; margin-top: 24px; border-top: 1px solid rgba(255,255,255,.06); font-size: 9px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: rgba(255,255,255,.2); opacity: 0; animation: fadeUp .5s var(--ease) 4.3s forwards; } /* Scroll */ .hero-v2 .hero-scroll { position: absolute; bottom: 80px; right: var(--pad); z-index: 5; } /* Mobile */ @media (max-width: 900px) { .hero-v2 { padding: 0 var(--pad) 72px; } .hv2-h1 { font-size: clamp(52px, 14vw, 88px); } .hv2-sub { font-size: 15px; } .hv2-bar { display: none; } } /* ═══════════════════════════════════════════ PATCH v32 — stats · dramatic reveal · beam fix ═══════════════════════════════════════════ */ /* ── Ponto 5: more dramatic H1 reveal ── */ /* Each line clips from bottom and slides up with spring */ .hv2-h1 { overflow: visible !important; /* let gradient text breathe */ } .hv2-line { display: block; clip-path: inset(0 0 100% 0); /* hidden by clip */ animation: hv2Clip 0.9s cubic-bezier(.16,1,.3,1) forwards !important; opacity: 1 !important; transform: none !important; } .hv2-l1 { animation-delay: 3.74s !important; } .hv2-l2 { animation-delay: 3.90s !important; } @keyframes hv2Clip { from { clip-path: inset(0 0 100% 0); transform: translateY(12px); } to { clip-path: inset(0 0 0% 0); transform: translateY(0); } } /* Override the old hv2up animation on hv2-l2 */ .hv2-l2 { animation: hv2Clip 0.9s cubic-bezier(.16,1,.3,1) 3.90s forwards, gradDrift 10s ease-in-out 5.5s infinite alternate !important; clip-path: inset(0 0 100% 0); } /* ── Ponto 2: stats row ── */ .hv2-stats { display: flex; align-items: center; gap: 20px; margin-bottom: 36px; opacity: 0; animation: fadeUp .6s var(--ease) 4.08s forwards; } .hv2-stat { display: flex; flex-direction: column; gap: 2px; } .hv2-stat-n { font-family: 'Inter Tight', sans-serif; font-size: 32px; line-height: 1; letter-spacing: -1px; color: rgba(255,255,255,.88); } .hv2-stat-l { font-size: 8px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: rgba(255,255,255,.48); } .hv2-stat-div { width: 1px; height: 32px; background: rgba(255,255,255,.12); flex-shrink: 0; } /* Sub margin to breathe after h1 */ .hv2-sub { margin-bottom: 24px !important; } /* PATCH v33 — play button properly centred */ .reel-play-ui { position: absolute !important; inset: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 2 !important; pointer-events: none !important; } .reel-play-clean { pointer-events: all !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 12px !important; } .rpc-icon { width: 64px !important; height: 64px !important; border-radius: 50% !important; border: 1px solid rgba(255,255,255,.3) !important; background: rgba(255,255,255,.06) !important; backdrop-filter: blur(8px) !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: transform .4s var(--ease), border-color .3s, background .3s !important; } .rpc-icon svg { width: 18px !important; height: 18px !important; color: rgba(255,255,255,.85) !important; margin-left: 2px !important; /* optical centre for triangle */ } .reel-wrap:hover .rpc-icon { transform: scale(1.1) !important; border-color: rgba(255,255,255,.6) !important; background: rgba(255,255,255,.1) !important; } .rpc-label { font-family: 'Inter Tight', sans-serif !important; font-size: 11px !important; letter-spacing: 6px !important; color: rgba(255,255,255,.46) !important; transition: color .3s !important; } .reel-wrap:hover .rpc-label { color: rgba(255,255,255,.8) !important; } /* PATCH v34 — hide play label */ .rpc-label { display: none !important; } /* ═══════════════════════════════════════════ SERVICES V2 — editorial horizontal rows ═══════════════════════════════════════════ */ .svc2-section { background: var(--ink2); padding: 120px 0 0; } /* Header */ .svc2-header { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; margin-bottom: 72px; } .svc2-h2 { font-family: 'Inter Tight', sans-serif; font-size: clamp(44px, 5.5vw, 84px); line-height: .92; letter-spacing: 1px; color: #fff; margin-top: 12px; } .svc2-header-desc { font-size: 16px; font-weight: 300; line-height: 1.75; color: rgba(255,255,255,.46); align-self: end; } /* List */ .svc2-list { border-top: 1px solid rgba(255,255,255,.07); } /* Each row */ .svc2-item { display: block; text-decoration: none; position: relative; border-bottom: 1px solid rgba(255,255,255,.07); transition: background .35s; overflow: hidden; } .svc2-item:hover { background: rgba(255,255,255,.025); } /* Colour accent bar — left edge, 0px → full height on hover */ .svc2-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; transform: scaleY(0); transform-origin: bottom; transition: transform .5s var(--ease); } .svc2-item:hover .svc2-bar { transform: scaleY(1); } .svc2-bar--1 { background: linear-gradient(to bottom, #1e9bff, #44d7ff); } .svc2-bar--2 { background: linear-gradient(to bottom, #7c35e8, #1e9bff); } .svc2-bar--3 { background: linear-gradient(to bottom, #ff6010, #ff4010); } /* Inner grid: num | body | tags | arrow */ .svc2-item-inner { display: grid; grid-template-columns: 72px 1fr auto 48px; gap: 0 48px; align-items: center; padding: 44px var(--pad); transition: padding .35s var(--ease); } .svc2-item:hover .svc2-item-inner { padding-left: calc(var(--pad) + 12px); } /* Number */ .svc2-num { font-family: 'Inter Tight', sans-serif; font-size: 52px; line-height: 1; letter-spacing: -1px; color: rgba(255,255,255,.08); transition: color .35s; flex-shrink: 0; } .svc2-item:hover .svc2-num { color: rgba(255,255,255,.18); } /* Body: name + desc */ .svc2-body { display: flex; flex-direction: column; gap: 10px; } .svc2-name { font-family: 'Inter Tight', sans-serif; font-size: clamp(36px, 4vw, 58px); line-height: 1; letter-spacing: .5px; color: rgba(255,255,255,.88); transition: color .3s, letter-spacing .4s var(--ease); } .svc2-item:hover .svc2-name { color: #fff; letter-spacing: 1.5px; } .svc2-desc { font-size: 14px; font-weight: 300; line-height: 1.65; color: rgba(255,255,255,.38); max-width: 52ch; height: 0; overflow: hidden; transition: height .4s var(--ease), opacity .35s; opacity: 0; } .svc2-item:hover .svc2-desc { height: 4.5em; /* ~3 lines */ opacity: 1; } /* Tags */ .svc2-tags { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .4s var(--ease); } .svc2-item:hover .svc2-tags { opacity: 1; transform: translateY(0); } .svc2-tags span { font-size: 8px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,.52); border: 1px solid rgba(255,255,255,.1); padding: 4px 10px; border-radius: 100px; white-space: nowrap; } /* Arrow */ .svc2-arrow { color: rgba(255,255,255,.55); transition: color .3s, transform .4s var(--ease); display: flex; align-items: center; justify-content: center; } .svc2-item:hover .svc2-arrow { color: rgba(255,255,255,.7); transform: translateX(6px); } @media (max-width: 900px) { .svc2-header { grid-template-columns: 1fr; gap: 20px; } .svc2-item-inner { grid-template-columns: 48px 1fr 32px; gap: 0 24px; padding: 32px var(--pad); } .svc2-tags { display: none; } .svc2-desc { display: none; } .svc2-item:hover .svc2-name { letter-spacing: .5px; } } /* ═══════════════════════════════════════════ PATCH v35 — trust metrics · work header · footer v2 ═══════════════════════════════════════════ */ /* ── TRUST METRICS ── */ .trust-section { background: var(--ink); padding: 80px 0; border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); } .trust-grid { display: flex; align-items: center; gap: 0; margin-bottom: 52px; } .trust-metric { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 0 40px; } .trust-metric:first-child { padding-left: 0; } .trust-n { font-family: 'Inter Tight', sans-serif; font-size: clamp(52px, 6vw, 84px); line-height: 1; letter-spacing: -1px; background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,.7) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .trust-l { font-size: 10px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,.3); line-height: 1.5; } .trust-div { width: 1px; height: 56px; background: rgba(255,255,255,.1); flex-shrink: 0; } /* Statement / micro-testimonial */ .trust-statement { display: flex; align-items: flex-start; gap: 16px; padding-top: 40px; border-top: 1px solid rgba(255,255,255,.06); } .trust-quote { font-family: 'Inter Tight', sans-serif; font-size: 64px; line-height: .7; color: rgba(255,255,255,.12); flex-shrink: 0; } .trust-statement p { font-size: 17px; font-weight: 300; line-height: 1.72; color: rgba(255,255,255,.46); max-width: 68ch; font-style: italic; } /* ── WORK HEADER ── */ .work-header { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; margin-bottom: 56px; } .work-header-h2 { font-family: 'Inter Tight', sans-serif; font-size: clamp(42px, 5vw, 76px); line-height: .9; letter-spacing: 1px; margin-top: 12px; } .work-header-right { display: flex; flex-direction: column; gap: 20px; padding-bottom: 4px; } .work-header-desc { font-size: 15px; font-weight: 300; line-height: 1.72; color: rgba(255,255,255,.42); } .work-header-link { font-size: 9px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: rgba(255,255,255,.35); text-decoration: underline; text-underline-offset: 4px; transition: color .3s; } .work-header-link:hover { color: rgba(255,255,255,.8); } /* ── FOOTER V2 ── */ .footer-v2 { background: var(--ink); border-top: 1px solid rgba(255,255,255,.07); padding: 72px 0 40px; } .fv2-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 64px; margin-bottom: 56px; align-items: start; } .fv2-logo { height: 30px; width: auto; mix-blend-mode: screen; filter: brightness(1.05); margin-bottom: 20px; display: block; } .fv2-tagline { font-size: 13px; font-weight: 300; line-height: 1.7; color: rgba(255,255,255,.52); } .fv2-nav-label { display: block; font-size: 8px; font-weight: 700; letter-spacing: 5px; text-transform: uppercase; color: rgba(255,255,255,.2); margin-bottom: 18px; } .fv2-nav, .fv2-contact { display: flex; flex-direction: column; gap: 12px; } .fv2-nav a, .fv2-contact a { font-size: 13px; font-weight: 400; color: rgba(255,255,255,.46); transition: color .25s; text-decoration: none; } .fv2-nav a:hover, .fv2-contact a:hover { color: rgba(255,255,255,.9); } .fv2-bottom { display: flex; justify-content: space-between; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.05); font-size: 10px; font-weight: 300; color: rgba(255,255,255,.18); flex-wrap: wrap; gap: 10px; } @media (max-width: 900px) { .trust-grid { flex-wrap: wrap; gap: 32px; } .trust-metric { flex: 0 0 40%; padding: 0; } .trust-div { display: none; } .work-header { grid-template-columns: 1fr; gap: 24px; } .fv2-top { grid-template-columns: 1fr; gap: 40px; } .fv2-bottom { flex-direction: column; } } /* ═══════════════════════════════════════════ PATCH v36 — animated titles · kinetic type ═══════════════════════════════════════════ */ /* ── Base: titles clip-reveal from bottom on scroll ── */ .title-anim { overflow: hidden; } /* Each direct text node treated as a block that slides up */ .title-anim.visible { animation: none; /* handled below per element */ } /* Section headings: clip-path wipe upward */ .svc2-h2.title-anim, .work-header-h2.title-anim { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(10px); transition: clip-path .85s cubic-bezier(.16,1,.3,1), opacity .4s ease, transform .85s cubic-bezier(.16,1,.3,1); } .svc2-h2.title-anim.visible, .work-header-h2.title-anim.visible { opacity: 1; clip-path: inset(0 0 0% 0); transform: translateY(0); } /* Service names: slide left + fade */ .svc2-name.title-anim { opacity: 0; transform: translateX(-16px); transition: opacity .5s var(--ease), transform .5s var(--ease); } .svc2-name.title-anim.visible { opacity: 1; transform: translateX(0); } /* em inside svc2-h2 — italic accent, colour shift */ .svc2-h2 em { font-style: italic; background: linear-gradient(95deg, #ff6010, #1e9bff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-style: normal; } /* Section labels: small underline sweep */ .s-label { position: relative; overflow: visible; } .s-label::after { content: ''; position: absolute; left: 0; bottom: -4px; width: 0; height: 1px; background: linear-gradient(to right, #1e9bff, #ff6010); transition: width .7s var(--ease); } [data-reveal].visible .s-label::after, .s-label.visible::after { width: 100%; } /* Work header h2 + grad-text: staggered reveal */ .work-header-h2 .grad-text { display: block; opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease) .15s, transform .7s var(--ease) .15s; } .work-header-h2.visible .grad-text { opacity: 1; transform: translateY(0); } /* Trust numbers: count up already handled by JS, but also scale in */ .trust-n { display: inline-block; transition: transform .6s var(--ease); } .trust-metric.visible .trust-n { animation: trustPop .5s cubic-bezier(.34,1.56,.64,1) both; } @keyframes trustPop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } } .trust-metric:nth-child(1).visible .trust-n { animation-delay: .0s; } .trust-metric:nth-child(3).visible .trust-n { animation-delay: .1s; } .trust-metric:nth-child(5).visible .trust-n { animation-delay: .2s; } .trust-metric:nth-child(7).visible .trust-n { animation-delay: .3s; } /* svc2-h2 oversize on large screens */ .svc2-h2 { font-size: clamp(44px, 6vw, 96px) !important; line-height: .88 !important; letter-spacing: -.5px !important; } /* work-header-h2 bigger */ .work-header-h2 { font-size: clamp(44px, 5.5vw, 86px) !important; line-height: .90 !important; } /* svc2-name bigger + bolder */ .svc2-name { font-size: clamp(40px, 4.5vw, 68px) !important; letter-spacing: .5px !important; transition: letter-spacing .4s var(--ease), color .3s !important; } /* CTA h2 bigger */ .cta-h2--white { font-size: clamp(72px, 11vw, 172px) !important; line-height: .84 !important; } /* ═══════════════════════════════════════════ PATCH v37 — titles much bigger ═══════════════════════════════════════════ */ /* Services section title */ .svc2-h2 { font-size: clamp(64px, 9vw, 140px) !important; line-height: .84 !important; letter-spacing: -1px !important; } /* Work section title */ .work-header-h2 { font-size: clamp(60px, 8vw, 128px) !important; line-height: .86 !important; letter-spacing: -.5px !important; } /* Service names in rows */ .svc2-name { font-size: clamp(48px, 6vw, 88px) !important; line-height: 1 !important; letter-spacing: -.5px !important; } /* CTA */ .cta-h2--white { font-size: clamp(80px, 12vw, 192px) !important; line-height: .82 !important; letter-spacing: -1px !important; } /* Trust numbers */ .trust-n { font-size: clamp(64px, 8vw, 110px) !important; line-height: 1 !important; } /* Hero h1 */ .hv2-h1 { font-size: clamp(80px, 12vw, 188px) !important; line-height: .84 !important; } /* Section labels: slightly bigger for legibility */ .s-label { font-size: 10px !important; letter-spacing: 6px !important; } /* ═══════════════════════════════════════════ PATCH v38 — FIX: remove broken clip-path animations titles visible by default, animate only on data-reveal ═══════════════════════════════════════════ */ /* RESET — kill all the broken clip-path hiding */ .title-anim { overflow: visible !important; opacity: 1 !important; clip-path: none !important; transform: none !important; transition: none !important; animation: none !important; } .svc2-h2.title-anim, .work-header-h2.title-anim, .svc2-name.title-anim { opacity: 1 !important; clip-path: none !important; transform: none !important; } .svc2-h2.title-anim.visible, .work-header-h2.title-anim.visible, .svc2-name.title-anim.visible { opacity: 1 !important; clip-path: none !important; transform: none !important; } /* Also fix hv2-line — was using clip-path which could hide them */ .hv2-line { clip-path: none !important; opacity: 0; transform: translateY(105%); animation: hv2up 1s var(--ease) forwards !important; } .hv2-l1 { animation-delay: 3.76s !important; } .hv2-l2 { animation-delay: 3.90s !important; } /* ═══════════════════════════════════════════ PATCH v39 — LAYOUT AUDIT: normalise all sections ═══════════════════════════════════════════ */ /* ── 1. Consistent section rhythm ── */ /* Every section gets same vertical padding */ .reel-section { padding: 100px var(--pad) 120px !important; } .svc2-section { padding: 120px 0 100px !important; } .trust-section { padding: 100px 0 !important; } .featured-section { padding: 120px 0 120px !important; } .cta-section { padding: 140px var(--pad) 140px !important; } /* ── 2. s-label: consistent spacing below in every context ── */ .s-label { display: block !important; margin-bottom: 16px !important; font-size: 9px !important; letter-spacing: 6px !important; color: rgba(255,255,255,.48) !important; } /* ── 3. Section titles: kill ALL broken animation states ── */ .svc2-h2, .work-header-h2 { opacity: 1 !important; clip-path: none !important; transform: none !important; animation: none !important; transition: none !important; } /* grad-text inside work header: also always visible */ .work-header-h2 .grad-text { opacity: 1 !important; transform: none !important; transition: none !important; } /* ── 4. svc2-header: consistent internal spacing ── */ .svc2-header { padding: 0 var(--pad) !important; margin-bottom: 56px !important; align-items: start !important; } .svc2-header-left { display: flex; flex-direction: column; gap: 0; } /* ── 5. work-header: align with rail below ── */ .work-header { margin-bottom: 48px !important; padding: 0 !important; } /* ── 6. svc2-h2: size + tight leading on multi-line ── */ .svc2-h2 { font-size: clamp(56px, 7.5vw, 116px) !important; line-height: .86 !important; margin-top: 0 !important; margin-bottom: 0 !important; } /* ── 7. work-header-h2: match same scale ── */ .work-header-h2 { font-size: clamp(52px, 7vw, 108px) !important; line-height: .88 !important; margin-top: 0 !important; } /* ── 8. svc2-item-inner: tighter vertical padding ── */ .svc2-item-inner { padding: 36px var(--pad) !important; } .svc2-item:hover .svc2-item-inner { padding-left: calc(var(--pad) + 14px) !important; } /* ── 9. trust-section: consistent left padding for grid ── */ .trust-grid { padding: 0 !important; } .trust-metric:first-child { padding-left: 0 !important; } /* ── 10. reel-section s-label: margin below ── */ .reel-section .s-label { margin-bottom: 24px !important; } /* ── 11. featured-section container: no extra top padding ── */ .featured-section .container { padding-top: 0 !important; } /* ── 12. hv2-bar: border consistent ── */ .hv2-bar { border-top: 1px solid rgba(255,255,255,.07) !important; padding-top: 20px !important; margin-top: 20px !important; } /* ═══════════════════════════════════════════ PATCH v40 — TYPOGRAPHIC VARIETY Break visual monotony — each section has a distinct typographic personality ═══════════════════════════════════════════ */ /* Load a serif font for editorial contrast */ /* legacy import removed — using Inter Tight + Instrument Serif from main import */ /* ── HERO: stays Bebas — max impact ── No change — hero is the loudest moment */ /* ── SERVICES h2: serif italic, editorial ── */ .svc2-h2 { font-family: 'Instrument Serif', serif, Georgia, serif !important; font-weight: 400 !important; font-style: italic !important; font-size: clamp(48px, 6.5vw, 100px) !important; line-height: .92 !important; letter-spacing: -.5px !important; color: rgba(255,255,255,.92) !important; } /* "próximo" accent inside: bold serif, gradient */ .svc2-h2 em { font-style: normal !important; font-weight: 700 !important; background: linear-gradient(95deg, #ff6010, #1e9bff) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } /* ── SERVICE NAMES: League Spartan bold, tighter ── */ .svc2-name { font-family: 'Inter Tight', sans-serif !important; font-weight: 800 !important; font-size: clamp(28px, 3.2vw, 52px) !important; letter-spacing: -1px !important; text-transform: uppercase !important; line-height: 1 !important; } /* ── WORK header: split personality ── "O trabalho" = thin serif "não mente." = Bebas bold gradient */ .work-header-h2 { font-family: 'Instrument Serif', serif, Georgia, serif !important; font-weight: 400 !important; font-style: italic !important; font-size: clamp(48px, 6vw, 96px) !important; line-height: .90 !important; color: rgba(255,255,255,.88) !important; } .work-header-h2 .grad-text { font-family: 'Inter Tight', sans-serif !important; font-style: normal !important; font-weight: 400 !important; font-size: 1.18em !important; letter-spacing: -.5px !important; display: block !important; line-height: .88 !important; opacity: 1 !important; transform: none !important; } /* ── CTA: League Spartan extra-light, huge ── Counterpoint — quiet but massive */ .cta-h2--white { font-family: 'Inter Tight', sans-serif !important; font-weight: 300 !important; font-size: clamp(60px, 9vw, 148px) !important; line-height: .88 !important; letter-spacing: -3px !important; text-transform: none !important; color: #fff !important; } /* ── TRUST numbers: Bebas stays, but labels get serif ── */ .trust-l { font-family: 'Instrument Serif', serif, Georgia, serif !important; font-style: italic !important; font-size: 13px !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important; color: rgba(255,255,255,.38) !important; line-height: 1.5 !important; } /* ── Section labels: keep as-is (small caps, track) ── They work as neutral anchors between the varied titles */ @media (max-width: 900px) { .svc2-h2 { font-size: clamp(38px, 10vw, 64px) !important; } .work-header-h2 { font-size: clamp(36px, 9vw, 60px) !important; } .cta-h2--white { font-size: clamp(44px, 12vw, 80px) !important; } } /* ═══════════════════════════════════════════ PATCH v41 — refined serif + CTA impact ═══════════════════════════════════════════ */ /* ── CTA: back to Bebas, maximum impact ── */ .cta-h2--white { font-family: 'Inter Tight', sans-serif !important; font-weight: 400 !important; font-size: clamp(80px, 12vw, 190px) !important; line-height: .82 !important; letter-spacing: -1px !important; text-transform: uppercase !important; color: #fff !important; } /* ── Services h2: serif but grounded ── Less pure italic, more authoritative */ .svc2-h2 { font-family: 'Instrument Serif', serif, Georgia, serif !important; font-weight: 700 !important; font-style: italic !important; font-size: clamp(48px, 6vw, 92px) !important; line-height: .90 !important; letter-spacing: -.5px !important; color: #fff !important; } /* ── Work h2: serif roman (not italic) + Bebas accent ── More grounded, less "editorial magazine" */ .work-header-h2 { font-family: 'Instrument Serif', serif, Georgia, serif !important; font-weight: 700 !important; font-style: normal !important; font-size: clamp(48px, 6vw, 92px) !important; line-height: .90 !important; color: #fff !important; } .work-header-h2 .grad-text { font-family: 'Inter Tight', sans-serif !important; font-style: normal !important; font-weight: 400 !important; font-size: 1.15em !important; letter-spacing: 0 !important; display: block !important; line-height: .88 !important; } /* ── Service names: slightly less aggressive ── */ .svc2-name { font-family: 'Inter Tight', sans-serif !important; font-weight: 700 !important; font-size: clamp(26px, 3vw, 46px) !important; letter-spacing: -.5px !important; text-transform: none !important; line-height: 1 !important; } /* ── Trust labels: keep the serif lightness ── */ .trust-l { font-family: 'Instrument Serif', serif, Georgia, serif !important; font-style: italic !important; font-weight: 400 !important; font-size: 13px !important; letter-spacing: 0 !important; text-transform: none !important; color: rgba(255,255,255,.35) !important; } /* ═══════════════════════════════════════════ PRICING SECTION — animated, premium ═══════════════════════════════════════════ */ .pricing-section { background: var(--ink); padding: 120px 0 100px; overflow: hidden; } /* Header */ .pricing-header { max-width: 640px; margin-bottom: 72px; } .pricing-h2 { font-family: 'Instrument Serif', serif, Georgia, serif !important; font-weight: 700; font-style: italic; font-size: clamp(44px, 5.5vw, 84px); line-height: .90; color: #fff; margin: 12px 0 18px; } .pricing-h2 em { font-style: normal; background: linear-gradient(95deg, #ff6010, #1e9bff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .pricing-sub { font-size: 16px; font-weight: 300; line-height: 1.65; color: rgba(255,255,255,.42); } /* Grid */ .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; } /* Card base */ .pricing-card { border-radius: 16px; padding: 36px 32px 32px; position: relative; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); display: flex; flex-direction: column; gap: 0; /* Entrance animation */ opacity: 0; transform: translateY(32px); transition: opacity .7s var(--ease), transform .7s var(--ease), border-color .35s, background .35s, box-shadow .35s; } .pricing-card.visible { opacity: 1; transform: translateY(0); } .pricing-card:nth-child(2) { transition-delay: .1s; } .pricing-card:nth-child(3) { transition-delay: .2s; } .pricing-card:hover { border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.05); box-shadow: 0 32px 80px rgba(0,0,0,.4); transform: translateY(-6px); } /* Featured card */ .pricing-card--featured { border-color: rgba(255,255,255,.18) !important; background: rgba(255,255,255,.055) !important; box-shadow: 0 24px 64px rgba(0,0,0,.5); } .pricing-card--featured:hover { transform: translateY(-10px) !important; box-shadow: 0 40px 100px rgba(0,0,0,.6) !important; } /* Badge */ .pc-badge { position: absolute; top: -13px; left: 32px; background: linear-gradient(90deg, #ff6010, #1e9bff); color: #fff; font-size: 9px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; padding: 5px 14px; border-radius: 100px; } /* Top block */ .pc-top { margin-bottom: 28px; } .pc-label { font-family: 'Inter Tight', sans-serif; font-size: 28px; letter-spacing: 1px; color: rgba(255,255,255,.9); display: block; margin-bottom: 10px; } .pc-desc { font-size: 13px; font-weight: 300; line-height: 1.65; color: rgba(255,255,255,.38); } /* Price */ .pc-price { display: flex; align-items: flex-end; gap: 4px; margin-bottom: 8px; } .pc-amount { font-family: 'Inter Tight', sans-serif; font-size: clamp(52px, 6vw, 72px); line-height: 1; color: #fff; letter-spacing: -1px; } .pc-currency { font-family: 'Inter Tight', sans-serif; font-size: 28px; color: rgba(255,255,255,.5); margin-bottom: 6px; } .pc-original { font-size: 13px; color: rgba(255,255,255,.25); text-decoration: line-through; margin-bottom: 8px; margin-left: 4px; } .pc-saving { font-size: 9px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: #ff6010; margin-bottom: 24px; } /* Divider */ .pc-divider { width: 100%; height: 1px; background: rgba(255,255,255,.07); margin-bottom: 24px; } /* Features list */ .pc-features { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; flex: 1; } .pc-features li { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 400; color: rgba(255,255,255,.62); } .pc-check { color: rgba(255,255,255,.8); font-size: 11px; flex-shrink: 0; } .pc-muted { color: rgba(255,255,255,.18); font-size: 11px; flex-shrink: 0; } .pc-features li:has(.pc-muted) { color: rgba(255,255,255,.55); } /* Buttons */ .pc-btn { display: block; text-align: center; padding: 15px 24px; border-radius: 100px; font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; text-decoration: none; transition: all .3s var(--ease); margin-top: auto; } .pc-btn--primary { background: #fff; color: #07070a; } .pc-btn--primary:hover { background: rgba(255,255,255,.88); transform: scale(1.02); box-shadow: 0 8px 24px rgba(255,255,255,.15); } .pc-btn--outline { border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.7); } .pc-btn--outline:hover { border-color: rgba(255,255,255,.5); color: #fff; } /* Footer note */ .pricing-note { margin-top: 40px; font-size: 11px; font-weight: 400; color: rgba(255,255,255,.55); line-height: 1.7; max-width: 72ch; } @media (max-width: 960px) { .pricing-grid { grid-template-columns: 1fr; max-width: 480px; } } /* ═══════════════════════════════════════════ PRICING V2 — 4 cards · neon glow · canvas bg ═══════════════════════════════════════════ */ .pricing-section { position: relative !important; background: #06060a !important; padding: 120px 0 100px !important; overflow: hidden !important; } /* Neon canvas behind everything */ .pricing-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; } /* Header */ .pricing-header { margin-bottom: 64px; max-width: 680px; } .pricing-h2 { font-family: 'Instrument Serif', serif, Georgia, serif !important; font-weight: 700 !important; font-style: italic !important; font-size: clamp(44px, 5.5vw, 80px) !important; line-height: .90 !important; color: #fff !important; margin: 12px 0 16px !important; } .pricing-h2 em { font-style: normal !important; background: linear-gradient(95deg, #ff6010, #1e9bff) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } .pricing-sub { font-size: 15px; font-weight: 300; line-height: 1.7; color: rgba(255,255,255,.38); } /* Grid — 4 cols */ .pricing-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 16px !important; align-items: stretch !important; } /* Card */ .pricing-card { border-radius: 18px; padding: 32px 26px 28px; position: relative; border: 1px solid rgba(255,255,255,.08); background: rgba(12,12,18,.85); backdrop-filter: blur(12px); display: flex; flex-direction: column; gap: 0; overflow: hidden; /* entrance */ opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease), border-color .4s, box-shadow .4s; } .pricing-card.visible { opacity: 1; transform: translateY(0); } .pricing-card:nth-child(2) { transition-delay: .08s; } .pricing-card:nth-child(3) { transition-delay: .16s; } .pricing-card:nth-child(4) { transition-delay: .24s; } .pricing-card:hover { transform: translateY(-8px) !important; border-color: rgba(255,255,255,.16) !important; } /* Featured */ .pc--featured { border-color: rgba(255,255,255,.18) !important; background: rgba(18,18,28,.92) !important; } .pc--featured:hover { transform: translateY(-12px) !important; } /* Badge */ .pc-badge { position: absolute; top: -1px; left: 50%; transform: translateX(-50%); background: linear-gradient(90deg, #7c35e8, #1e9bff); color: #fff; font-size: 8px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; padding: 5px 16px; border-radius: 0 0 10px 10px; white-space: nowrap; } /* Neon glow — absolute behind content */ .pc-neon { position: absolute; border-radius: 50%; width: 180px; height: 180px; filter: blur(60px); opacity: 0; right: -40px; top: -40px; pointer-events: none; transition: opacity .6s ease; } .pricing-card:hover .pc-neon { opacity: .55; } .pc--featured .pc-neon { opacity: .35; } .pc--featured:hover .pc-neon { opacity: .7; } .pc-neon--blue { background: #1e9bff; } .pc-neon--orange { background: #ff6010; } .pc-neon--purple { background: #7c35e8; } .pc-neon--red { background: #d42820; } /* Also subtle box-shadow glow per card */ .pc--starter:hover { box-shadow: 0 20px 60px rgba(30,155,255,.18) !important; } .pc--content:hover { box-shadow: 0 20px 60px rgba(255,96,16,.18) !important; } .pc--studio:hover { box-shadow: 0 24px 72px rgba(124,53,232,.24) !important; } .pc--scale:hover { box-shadow: 0 20px 60px rgba(212,40,32,.18) !important; } /* Label */ .pc-label { font-family: 'Inter Tight', sans-serif; font-size: 32px; letter-spacing: 1px; color: #fff; display: block; margin-bottom: 10px; } .pc-top { margin-bottom: 24px; } .pc-desc { font-size: 12px; font-weight: 300; line-height: 1.65; color: rgba(255,255,255,.35); } /* Price — fixed */ .pc-price { margin-bottom: 20px; } .pc-price--fixed { display: flex; align-items: flex-end; gap: 3px; } .pc-amount { font-family: 'Inter Tight', sans-serif; font-size: 58px; line-height: 1; letter-spacing: -1px; color: #fff; } .pc-currency { font-family: 'Inter Tight', sans-serif; font-size: 24px; color: rgba(255,255,255,.46); margin-bottom: 7px; } .pc-per { font-size: 11px; color: rgba(255,255,255,.48); margin-bottom: 9px; margin-left: 2px; } /* Price — quote */ .pc-price--quote { display: flex; flex-direction: column; gap: 5px; padding: 16px 0 4px; } .pc-quote-label { font-family: 'Inter Tight', sans-serif; font-size: 38px; letter-spacing: 1px; color: rgba(255,255,255,.75); } .pc-quote-sub { font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.25); } /* Divider */ .pc-divider { width: 100%; height: 1px; background: rgba(255,255,255,.07); margin: 0 0 20px; } /* Features */ .pc-features { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; flex: 1; } .pc-features li { display: flex; align-items: flex-start; gap: 9px; font-size: 12px; font-weight: 400; color: rgba(255,255,255,.55); line-height: 1.5; } .pc-check { color: rgba(255,255,255,.7); font-size: 10px; flex-shrink: 0; margin-top: 2px; } /* Buttons */ .pc-btn { display: block; text-align: center; padding: 13px 20px; border-radius: 100px; font-size: 9px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; text-decoration: none; transition: all .3s var(--ease); margin-top: auto; } .pc-btn--primary { background: #fff; color: #07070a; } .pc-btn--primary:hover { background: rgba(255,255,255,.9); transform: scale(1.02); } .pc-btn--ghost { border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.55); } .pc-btn--ghost:hover { border-color: rgba(255,255,255,.45); color: #fff; } /* Note */ .pricing-note { margin-top: 36px; font-size: 10px; font-weight: 300; color: rgba(255,255,255,.2); line-height: 1.8; max-width: 80ch; } @media (max-width: 1100px) { .pricing-grid { grid-template-columns: repeat(2,1fr) !important; } } @media (max-width: 600px) { .pricing-grid { grid-template-columns: 1fr !important; } } /* ═══════════════════════════════════════════ PRICING V3 — editorial table, no cards Horizontal rows, clean comparison, neon bg ═══════════════════════════════════════════ */ .pricing-section { position: relative !important; background: #06060a !important; padding: 120px 0 100px !important; overflow: hidden !important; } .pricing-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } .pricing-header { margin-bottom: 56px; } .pricing-h2 { font-family: 'Instrument Serif', serif, Georgia, serif !important; font-weight: 700 !important; font-style: italic !important; font-size: clamp(40px, 5vw, 76px) !important; line-height: .92 !important; color: #fff !important; margin: 12px 0 0 !important; } .pricing-h2 em { font-style: normal !important; background: linear-gradient(95deg, #ff6010, #1e9bff) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } /* Table */ .pricing-table { width: 100%; border-top: 1px solid rgba(255,255,255,.08); } /* Grid columns: name | para-quem | inclui | entrega | preço | cta */ .pt-head, .pt-row { display: grid; grid-template-columns: 200px 1fr 1.6fr 120px 160px 48px; gap: 0 32px; align-items: center; border-bottom: 1px solid rgba(255,255,255,.06); padding: 0 0; } /* Header labels */ .pt-head { padding: 14px 0; } .pt-head .pt-cell { font-size: 8px; font-weight: 700; letter-spacing: 5px; text-transform: uppercase; color: rgba(255,255,255,.2); } /* Rows */ .pt-row { text-decoration: none; padding: 28px 0; position: relative; transition: background .3s; cursor: pointer; } .pt-row::before { content: ''; position: absolute; left: calc(-1 * var(--pad)); right: calc(-1 * var(--pad)); top: 0; bottom: 0; background: rgba(255,255,255,0); transition: background .35s; pointer-events: none; } .pt-row:hover::before { background: rgba(255,255,255,.025); } /* Left colour accent on hover */ .pt-row::after { content: ''; position: absolute; left: calc(-1 * var(--pad)); top: 0; bottom: 0; width: 2px; transform: scaleY(0); transform-origin: bottom; transition: transform .5s var(--ease); } .pt-row:hover::after { transform: scaleY(1); } .pt-row--starter::after { background: #1e9bff; } .pt-row--content::after { background: #ff6010; } .pt-row--studio::after { background: #7c35e8; } .pt-row--scale::after { background: #d42820; } /* Featured row */ .pt-row--featured { background: rgba(255,255,255,.02); } .pt-row--featured::before { background: rgba(255,255,255,.02) !important; } .pt-row--featured:hover::before { background: rgba(255,255,255,.04) !important; } /* Name cell */ .pt-name-cell { display: flex !important; align-items: baseline; gap: 12px; flex-wrap: wrap; } .pt-num { font-family: 'Inter Tight', sans-serif; font-size: 13px; letter-spacing: 2px; color: rgba(255,255,255,.2); } .pt-name { font-family: 'Inter Tight', sans-serif; font-size: 32px; letter-spacing: .5px; color: rgba(255,255,255,.88); transition: color .3s, letter-spacing .4s var(--ease); } .pt-row:hover .pt-name { color: #fff; letter-spacing: 1.5px; } .pt-badge { font-size: 7px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: #7c35e8; border: 1px solid rgba(124,53,232,.4); padding: 3px 8px; border-radius: 100px; white-space: nowrap; align-self: center; } /* Meta text */ .pt-meta { font-size: 12px; font-weight: 300; line-height: 1.65; color: rgba(255,255,255,.38); transition: color .3s; } .pt-row:hover .pt-meta { color: rgba(255,255,255,.58); } /* Price cell */ .pt-price-cell { display: flex !important; flex-direction: column; gap: 3px; } .pt-amount { font-family: 'Inter Tight', sans-serif; font-size: 28px; letter-spacing: -.5px; color: #fff; } .pt-fixed { font-size: 8px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: #1e9bff; } .pt-quote { font-size: 11px; font-weight: 400; color: rgba(255,255,255,.35); font-style: italic; } /* CTA cell */ .pt-cta-cell { justify-self: end; } .pt-arrow { font-size: 18px; color: rgba(255,255,255,.2); transition: color .3s, transform .4s var(--ease); display: block; } .pt-row:hover .pt-arrow { color: rgba(255,255,255,.8); transform: translateX(6px); } .pricing-note { margin-top: 36px; font-size: 10px; color: rgba(255,255,255,.18); line-height: 1.8; } @media (max-width: 1000px) { .pt-head { display: none; } .pt-row { grid-template-columns: 1fr auto !important; grid-template-rows: auto auto; gap: 6px 16px; padding: 24px 0; } .pt-name-cell { grid-column: 1; } .pt-price-cell { grid-column: 2; grid-row: 1; align-items: flex-end; } .pt-meta:nth-child(2) { grid-column: 1 / 3; font-size: 11px; } .pt-meta:nth-child(3), .pt-meta:nth-child(4), .pt-cta-cell { display: none; } } /* ═══════════════════════════════════════════ PRICING V3 CARDS — 3 col, scale featured ═══════════════════════════════════════════ */ .pricing-grid-v3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; } /* Card */ .pcv3-card { border-radius: 20px; padding: 36px 30px 30px; border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.03); position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 0; opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease), border-color .4s, box-shadow .4s; } .pcv3-card.visible { opacity:1; transform:translateY(0); } .pcv3-card:hover { transform: translateY(-8px) !important; border-color: rgba(255,255,255,.14) !important; } /* Featured */ .pcv3--featured { border-color: rgba(255,255,255,.14) !important; background: rgba(255,255,255,.05) !important; box-shadow: 0 28px 72px rgba(0,0,0,.5); } .pcv3--featured:hover { transform: translateY(-14px) !important; } /* Neon blob */ .pcv3-neon { position: absolute; right: -50px; top: -50px; width: 200px; height: 200px; border-radius: 50%; filter: blur(70px); opacity: 0; transition: opacity .6s ease; pointer-events: none; } .pcv3-card:hover .pcv3-neon { opacity: .45; } .pcv3--featured .pcv3-neon { opacity: .28; } .pcv3--featured:hover .pcv3-neon { opacity: .62; } /* Hover glow per card */ .pcv3--starter:hover { box-shadow: 0 20px 64px rgba(30,155,255,.16) !important; } .pcv3--studio:hover { box-shadow: 0 20px 64px rgba(124,53,232,.16) !important; } .pcv3--scale:hover { box-shadow: 0 28px 80px rgba(255,96,16,.22) !important; } /* Badge */ .pcv3-badge { position: absolute; top: -1px; left: 50%; transform: translateX(-50%); background: linear-gradient(90deg, #ff6010, #ff4010); color: #fff; font-size: 8px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; padding: 5px 18px; border-radius: 0 0 12px 12px; white-space: nowrap; } /* Label row */ .pcv3-label-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .pcv3-name { font-family: 'Inter Tight', sans-serif; font-size: 34px; letter-spacing: 1px; color: #fff; } .pcv3-discount { font-size: 9px; font-weight: 800; letter-spacing: 2px; color: #1e9bff; background: rgba(30,155,255,.12); border: 1px solid rgba(30,155,255,.25); padding: 3px 9px; border-radius: 100px; } .pcv3-discount--big { color: #ff6010 !important; background: rgba(255,96,16,.12) !important; border-color: rgba(255,96,16,.25) !important; font-size: 10px !important; } .pcv3-top { margin-bottom: 24px; } .pcv3-desc { font-size: 13px; font-weight: 300; line-height: 1.65; color: rgba(255,255,255,.35); } /* Price block */ .pcv3-price-block { margin-bottom: 20px; } .pcv3-price-line { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 5px; } .pcv3-amount { font-family: 'Inter Tight', sans-serif; font-size: 64px; line-height: 1; letter-spacing: -1px; color: #fff; } .pcv3-curr { font-size: 30px; color: rgba(255,255,255,.4); margin-bottom: 8px; display: inline-block; } .pcv3-was { font-size: 14px; color: rgba(255,255,255,.2); text-decoration: line-through; margin-bottom: 10px; } .pcv3-quote-word { font-family: 'Instrument Serif', serif, Georgia, serif; font-style: italic; font-size: 36px; color: rgba(255,255,255,.72); letter-spacing: -.5px; } .pcv3-per { font-size: 9px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,.55); display: block; } /* Divider */ .pcv3-divider { height: 1px; background: rgba(255,255,255,.07); margin: 0 0 22px; } /* List */ .pcv3-list { list-style: none; flex: 1; display: flex; flex-direction: column; gap: 11px; margin-bottom: 28px; } .pcv3-list li { font-size: 13px; font-weight: 300; line-height: 1.5; color: rgba(255,255,255,.5); padding-left: 16px; position: relative; } .pcv3-list li::before { content: '·'; position: absolute; left: 0; color: rgba(255,255,255,.48); font-size: 16px; line-height: 1; } /* Buttons */ .pcv3-btn { display: block; text-align: center; padding: 14px 24px; border-radius: 100px; font-size: 9px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; text-decoration: none; transition: all .3s var(--ease); margin-top: auto; } .pcv3-btn--primary { background: #fff; color: #07070a; } .pcv3-btn--primary:hover { background: rgba(255,255,255,.9); transform: scale(1.02); } .pcv3-btn--outline { border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.5); } .pcv3-btn--outline:hover { border-color: rgba(255,255,255,.4); color: #fff; } @media (max-width: 860px) { .pricing-grid-v3 { grid-template-columns: 1fr; max-width: 460px; } } /* PATCH v42 — 4 pricing cards grid */ .pricing-grid-v3 { grid-template-columns: repeat(4,1fr) !important; gap: 16px !important; } .pcv3--essencial:hover { box-shadow: 0 20px 64px rgba(68,215,255,.14) !important; } @media (max-width: 1100px) { .pricing-grid-v3 { grid-template-columns: repeat(2,1fr) !important; } } @media (max-width: 600px) { .pricing-grid-v3 { grid-template-columns: 1fr !important; } } /* ═══════════════════════════════════════════ PATCH v43 — pricing fixes + work title + nav ═══════════════════════════════════════════ */ /* ── Cards equal height ── */ .pricing-grid-v3 { align-items: stretch !important; } .pcv3-card { height: 100% !important; } /* ── Pack number tag ── */ .pcv3-num-tag { font-family: 'Inter Tight', sans-serif; font-size: 11px; letter-spacing: 3px; color: rgba(255,255,255,.2); flex-shrink: 0; } /* ── Add-on line ── */ .pcv3-addon { margin-top: 6px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.06); color: rgba(255,255,255,.38) !important; font-style: italic; } .pcv3-addon-price { font-style: normal; color: rgba(255,255,255,.55); font-weight: 600; } /* ── Eventos neon hover ── */ .pcv3--eventos:hover { box-shadow: 0 20px 64px rgba(212,40,32,.16) !important; } /* ── Work section: distinctive title ── */ .work-title-statement { font-family: 'Instrument Serif', serif, Georgia, serif !important; font-weight: 400 !important; font-style: italic !important; font-size: clamp(40px, 5vw, 72px) !important; line-height: .90 !important; color: rgba(255,255,255,.88) !important; margin-top: 14px !important; } .work-title-statement em { font-style: normal !important; font-weight: 700 !important; font-family: 'Inter Tight', sans-serif !important; font-size: 1.2em !important; display: block !important; line-height: .88 !important; background: linear-gradient(95deg, #ff6010 0%, #1e9bff 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } /* ── Nav: symbol bigger, logo smaller ── */ .nav-logo-img { height: 26px !important; } .nav-logo--center .nav-symbol-img { height: 72px !important; width: 72px !important; } .oc-nav.scrolled .nav-logo--center .nav-symbol-img { height: 54px !important; width: 54px !important; } /* ═══════════════════════════════════════════ PATCH v44 — price teaser + layout fixes ═══════════════════════════════════════════ */ /* ── Price teaser strip ── */ .price-teaser-section { background: var(--ink2); border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); padding: 40px 0; } .price-teaser-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; } .price-teaser-left { display: flex; flex-direction: column; gap: 8px; } .price-teaser-text { font-size: 18px; font-weight: 300; line-height: 1.5; color: rgba(255,255,255,.55); } .price-teaser-text strong { color: #fff; font-weight: 600; } .price-teaser-btn { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.2); padding: 15px 28px; border-radius: 100px; text-decoration: none; white-space: nowrap; transition: all .3s var(--ease); flex-shrink: 0; } .price-teaser-btn:hover { color: #fff; border-color: rgba(255,255,255,.5); transform: translateX(4px); } /* ── Layout fixes: prevent overlap ── */ /* hv2-stats: was overlapping due to z-index */ .hv2-stats { position: relative !important; z-index: 5 !important; } /* Hero content clears nav properly */ .hv2-content { padding-top: calc(var(--nav-h) + 20px) !important; padding-bottom: 0 !important; } /* work-header: grid alignment */ .work-header { grid-template-columns: 1fr 1.2fr !important; } /* work-title-statement: no extra margin that pushes rail */ .work-title-statement { margin-bottom: 0 !important; } /* featured-section: clean padding */ .featured-section { padding-top: 100px !important; padding-bottom: 120px !important; } /* trust-section: no gap at bottom */ .trust-section { padding-bottom: 80px !important; } /* reel-section: consistent top */ .reel-section { padding-top: 80px !important; } /* hv2-bar: sits at very bottom, no floating */ .hv2-bar { position: relative !important; z-index: 5 !important; margin-top: 24px !important; } @media (max-width: 768px) { .price-teaser-inner { flex-direction: column; align-items: flex-start; } } /* ═══════════════════════════════════════════ PRECOS PAGE — dedicated pricing ═══════════════════════════════════════════ */ /* Hero */ .precos-hero { position: relative; overflow: hidden; background: #06060a; padding: calc(var(--nav-h) + 80px) 0 80px; min-height: 42vh; display: flex; align-items: flex-end; } .precos-h1 { font-family: 'Instrument Serif', serif, Georgia, serif !important; font-weight: 700; font-style: italic; font-size: clamp(52px, 7vw, 110px); line-height: .88; color: #fff; margin: 14px 0 20px; } .precos-h1 em { font-style: normal; background: linear-gradient(95deg, #ff6010, #1e9bff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .precos-sub { font-size: 17px; font-weight: 300; line-height: 1.65; color: rgba(255,255,255,.42); max-width: 56ch; } /* Packs section */ .precos-packs { padding: 80px 0 0; background: #06060a; } /* What's included */ .precos-includes { background: var(--ink2); padding: 100px 0; border-top: 1px solid rgba(255,255,255,.06); } .pi-header { margin-bottom: 64px; } .pi-h2 { font-family: 'Instrument Serif', serif, Georgia, serif !important; font-weight: 700; font-style: italic; font-size: clamp(40px, 5vw, 72px); line-height: .90; color: #fff; margin-top: 12px; } .pi-h2 em { font-style: normal; background: linear-gradient(95deg, #ff6010, #1e9bff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .pi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.06); border-radius: 16px; overflow: hidden; } .pi-item { background: var(--ink2); padding: 36px 32px; transition: background .3s; } .pi-item:hover { background: rgba(255,255,255,.03); } .pi-icon { font-family: 'Inter Tight', sans-serif; font-size: 13px; letter-spacing: 3px; color: rgba(255,255,255,.2); display: block; margin-bottom: 16px; } .pi-name { font-family: 'Inter Tight', sans-serif; font-weight: 700; font-size: 17px; color: rgba(255,255,255,.88); margin-bottom: 10px; } .pi-desc { font-size: 13px; font-weight: 300; line-height: 1.7; color: rgba(255,255,255,.38); } /* FAQ */ .precos-faq { background: var(--ink); padding: 100px 0; border-top: 1px solid rgba(255,255,255,.06); } .faq-list { display: flex; flex-direction: column; border-top: 1px solid rgba(255,255,255,.07); } .faq-item { border-bottom: 1px solid rgba(255,255,255,.07); } .faq-q { display: flex; justify-content: space-between; align-items: center; padding: 24px 0; font-size: 16px; font-weight: 500; color: rgba(255,255,255,.78); cursor: pointer; list-style: none; transition: color .3s; } .faq-q:hover { color: #fff; } .faq-q::after { content: '+'; font-size: 22px; font-weight: 300; color: rgba(255,255,255,.3); flex-shrink: 0; transition: transform .3s; } .faq-item[open] .faq-q::after { transform: rotate(45deg); } .faq-a { font-size: 14px; font-weight: 300; line-height: 1.8; color: rgba(255,255,255,.42); padding: 0 0 24px; max-width: 72ch; } /* ─── FAQ JS-COLLAPSE (btn/ico pattern) ─── */ .faq-btn { width: 100%; text-align: left; background: none; border: none; padding: 20px 0; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 15px; font-weight: 500; color: rgba(255,255,255,.55); font-family: 'Inter Tight', sans-serif; transition: color .25s; } .faq-btn:hover { color: #fff; } .faq-ico { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; font-size: 13px; color: rgba(255,255,255,.3); transition: all .3s; } .faq-item.open .faq-ico { transform: rotate(45deg); background: rgba(30,155,255,.14); border-color: rgba(30,155,255,.35); color: #fff; } .faq-body { font-size: 14px; font-weight: 300; line-height: 1.75; color: rgba(255,255,255,.55); max-height: 0; overflow: hidden; transition: max-height .4s ease, padding .35s; } .faq-item.open .faq-body { max-height: 180px; padding-bottom: 20px; } /* nav active link */ .nav-link--active { color: rgba(255,255,255,.9) !important; } @media (max-width: 900px) { .pi-grid { grid-template-columns: 1fr 1fr; } .precos-h1 { font-size: clamp(40px, 12vw, 72px); } } @media (max-width: 600px) { .pi-grid { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════ PATCH v50 — Aesthetic refinements Tighter typography, better spacing, sharper interactions, consistent borders ═══════════════════════════════════════════ */ /* ── Typography: tighten body text line-height ── */ body { line-height: 1.6; } /* ── s-label refinement ── */ .s-label { font-size: 9px !important; font-weight: 700 !important; letter-spacing: 5px !important; text-transform: uppercase !important; color: rgba(255,255,255,.55) !important; display: flex !important; align-items: center; gap: 10px; } .s-label::before { content: ''; width: 16px; height: 1px; background: rgba(255,255,255,.22); flex-shrink: 0; } /* ── Nav refinement ── */ .nav-link--active { color: rgba(255,255,255,.88) !important; position: relative; } .nav-link--active::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 1px; background: linear-gradient(to right,#1e9bff,#ff6010); } /* ── Btn-primary refinement ── */ .btn-primary { display: inline-flex !important; align-items: center; gap: 10px; background: #fff !important; color: #07070a !important; border: none !important; border-radius: 100px !important; font-family: 'Inter Tight', sans-serif !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 5px !important; text-transform: uppercase !important; text-decoration: none !important; padding: 16px 36px !important; transition: all .35s cubic-bezier(.16,1,.3,1) !important; cursor: pointer; } .btn-primary:hover { background: rgba(255,255,255,.9) !important; transform: translateY(-3px) !important; box-shadow: 0 14px 36px rgba(255,255,255,.12) !important; } /* ── Footer v2 refinement ── */ .footer-v2 { background: #06060a !important; border-top: 1px solid rgba(255,255,255,.07) !important; } .fv2-logo { max-height: 28px !important; width: auto !important; mix-blend-mode: screen !important; } .fv2-tagline { font-size: 13px !important; font-weight: 300 !important; color: rgba(255,255,255,.3) !important; line-height: 1.6 !important; margin-top: 14px !important; } .fv2-nav a, .fv2-contact a { font-size: 13px !important; color: rgba(255,255,255,.42) !important; text-decoration: none !important; transition: color .22s !important; } .fv2-nav a:hover, .fv2-contact a:hover { color: rgba(255,255,255,.82) !important; } .fv2-nav-label { font-size: 8px !important; font-weight: 700 !important; letter-spacing: 5px !important; text-transform: uppercase !important; color: rgba(255,255,255,.2) !important; display: block !important; margin-bottom: 16px !important; } .fv2-bottom { border-top: 1px solid rgba(255,255,255,.06) !important; padding: 20px 0 !important; display: flex !important; justify-content: space-between !important; font-size: 11px !important; color: rgba(255,255,255,.2) !important; margin-top: 40px !important; } /* ── Reveal animation refinement ── */ [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); } [data-reveal].visible { opacity: 1; transform: translateY(0); } /* ── Scrollbar refinement ── */ ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: #07070a; } ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 2px; } ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.22); } /* ── Selection colour ── */ ::selection { background: rgba(30,155,255,.28); color: #fff; } /* ── Focus ring ── */ :focus-visible { outline: 2px solid rgba(30,155,255,.6); outline-offset: 3px; } button:focus-visible, a:focus-visible { border-radius: 4px; } /* ── Smooth transitions on interactive cards ── */ .tw-card, .pc-col, .sb-svc, .sb-val, .sb-step { transition-timing-function: cubic-bezier(.16,1,.3,1) !important; } /* ── Gradient text utility ── */ .grad-text { background: linear-gradient(100deg,#ff6010,#1e9bff) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } /* ═══════════════════════════════════════════ ANALYTICS & COOKIE CONSENT BANNER ═══════════════════════════════════════════ */ .cookie-banner { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(120px); z-index: 9000; width: calc(100% - 48px); max-width: 680px; background: #0e0e18; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 20px 24px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; box-shadow: 0 24px 64px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.05); backdrop-filter: blur(20px); transition: transform .55s cubic-bezier(.16,1,.3,1), opacity .4s; opacity: 0; } .cookie-banner.show { transform: translateX(-50%) translateY(0); opacity: 1; } .cookie-banner-text { flex: 1; min-width: 200px; font-size: 13px; font-weight: 300; line-height: 1.55; color: rgba(255,255,255,.46); } .cookie-banner-text strong { color: rgba(255,255,255,.75); font-weight: 600; } .cookie-banner-text a { color: rgba(255,255,255,.55); text-decoration: underline; text-underline-offset: 3px; } .cookie-btns { display: flex; gap: 8px; flex-shrink: 0; } .cookie-btn { font-size: 9px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; padding: 10px 18px; border-radius: 100px; cursor: pointer; transition: all .25s; border: none; font-family: 'Inter Tight', sans-serif; } .cookie-btn--accept { background: #fff; color: #07070a; } .cookie-btn--accept:hover { background: rgba(255,255,255,.88); transform: translateY(-1px); } .cookie-btn--decline { background: transparent; color: rgba(255,255,255,.4); border: 1px solid rgba(255,255,255,.15); } .cookie-btn--decline:hover { color: rgba(255,255,255,.7); border-color: rgba(255,255,255,.35); } @media(max-width:520px) { .cookie-banner { bottom: 16px; left: 16px; right: 16px; width: auto; transform: translateY(120px); } .cookie-banner.show { transform: translateY(0); } .cookie-btns { width: 100%; } .cookie-btn { flex: 1; text-align: center; } } /* ═══════════════════════════════════════════ PATCH v51 — Cursor spotlight on cards Cards glow where the cursor is. Applied to .tw-card, .pc-col ═══════════════════════════════════════════ */ /* Spotlight radial gradient follows cursor via JS var */ .tw-card, .pc-col { --mx: 50%; --my: 50%; } .tw-card::before { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: radial-gradient( 180px circle at var(--mx) var(--my), rgba(255,255,255,.06), transparent 70% ); opacity: 0; transition: opacity .4s; pointer-events: none; } .tw-card:hover::before { opacity: 1; } /* ── Trabalho hero entrance ── */ .tw-hero .tw-tag, .tw-hero .tw-h1, .tw-hero .tw-header-right { opacity: 0; animation: fadeUp .85s cubic-bezier(.16,1,.3,1) forwards; } .tw-hero .tw-tag { animation-delay: .2s; } .tw-hero .tw-h1 { animation-delay: .35s; } .tw-hero .tw-header-right{ animation-delay: .5s; } /* ── Filters sticky refinement ── */ .tw-filters { position: sticky !important; top: var(--nav-h) !important; background: rgba(7,7,10,.95) !important; backdrop-filter: blur(24px) !important; border-bottom: 1px solid rgba(255,255,255,.07) !important; z-index: 50 !important; } /* ── Trust strip refinement ── */ .tw-trust { background: rgba(255,255,255,.015); border-color: rgba(255,255,255,.07) !important; } .tw-trust-icon { background: rgba(255,255,255,.04); color: rgba(255,255,255,.6); } /* ── Card counter refinement ── */ .tw-counter { font-variant-numeric: tabular-nums; letter-spacing: 6px !important; } /* ── Lightbox refinement ── */ .tw-lb-box { box-shadow: 0 48px 100px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.07), inset 0 1px 0 rgba(255,255,255,.06) !important; } /* ═══════════════════════════════════════════ PATCH v52 — Lighter aesthetic Reduced padding, gentler typography, softer borders ═══════════════════════════════════════════ */ /* Reduce section vertical padding site-wide */ .section { padding-top: 80px !important; padding-bottom: 80px !important; } .cta-section { padding: 72px var(--pad) !important; } .cta-h2 { font-size: clamp(32px,4.5vw,60px) !important; line-height:.9 !important; } .cta-h2--white { font-size: clamp(32px,4.5vw,60px) !important; } /* Lighter borders */ .footer-v2 { border-top-color: rgba(255,255,255,.06) !important; } /* Titles — Playfair italic as accent, smaller */ .ct-form-title { font-size: clamp(20px,2.2vw,28px) !important; } /* PC / SB section headers — consistent */ .pc-inc-h2, .pc-faq-h2, .sb-val-h2, .sb-proc-h2, .sb-team-h2 { font-size: clamp(28px,3.5vw,48px) !important; letter-spacing: -.5px !important; } /* Softer beam on non-hero pages */ .ct-faq, .ct-faq ~ * { position: relative; z-index: 1; } /* ═══════════════════════════════════════════ CTA v2 — homepage final section Split: statement left / card right Balanced, not aggressive ═══════════════════════════════════════════ */ .cta-section-v2 { background: #06060a; border-top: 1px solid rgba(255,255,255,.07); padding: 80px 0 100px; position: relative; z-index: 1; } .cta-v2-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } /* Left */ .cta-v2-label { font-size: 9px; font-weight: 700; letter-spacing: 5px; text-transform: uppercase; color: rgba(255,255,255,.55); display: flex; align-items: center; gap: 10px; margin-bottom: 24px; } .cta-v2-label::before { content: ''; width: 16px; height: 1px; background: rgba(255,255,255,.22); } .cta-v2-h2 { font-family: 'Inter Tight', sans-serif; font-size: clamp(36px, 4.8vw, 68px); line-height: .88; letter-spacing: -1px; color: #fff; margin-bottom: 20px; } .cta-v2-h2 em { font-style: normal; background: linear-gradient(100deg, #ff6010, #1e9bff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .cta-v2-sub { font-size: 14px; font-weight: 300; line-height: 1.75; color: rgba(255,255,255,.55); max-width: 38ch; } /* Right card */ .cta-v2-card { background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 36px; display: flex; flex-direction: column; gap: 28px; } .cta-v2-items { display: flex; flex-direction: column; gap: 14px; } .cta-v2-item { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 300; color: rgba(255,255,255,.52); line-height: 1.4; } .cta-v2-check { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; background: rgba(30,155,255,.12); border: 1px solid rgba(30,155,255,.25); display: flex; align-items: center; justify-content: center; font-size: 10px; color: rgba(30,155,255,.8); } .cta-v2-btn { display: flex; align-items: center; justify-content: center; gap: 10px; background: #fff; color: #07070a; border: none; border-radius: 100px; font-size: 10px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; font-family: 'Inter Tight', sans-serif; padding: 16px 28px; text-decoration: none; transition: all .35s cubic-bezier(.16,1,.3,1); } .cta-v2-btn:hover { background: rgba(255,255,255,.88); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(255,255,255,.1); } .cta-v2-fine { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,.15); text-align: center; } @media (max-width: 860px) { .cta-v2-inner { grid-template-columns: 1fr; gap: 40px; } } /* ═══════════════════════════════════════════════ PATCH v53 — CONSISTENCY POLISH Apply same logic as trabalho rebuild: simpler spacing, tighter typography, keep colours and luminances intact ═══════════════════════════════════════════════ */ /* ── Universal section rhythm ── */ section { scroll-margin-top: var(--nav-h); } /* ── Eyebrow labels — unified across pages ── */ .s-label, .tw-eyebrow, .pc-tag, .tw-tag, .cs-tag { font-size: 9px !important; font-weight: 700 !important; letter-spacing: 5px !important; text-transform: uppercase !important; color: rgba(255,255,255,.55) !important; display: flex !important; align-items: center !important; gap: 10px !important; margin-bottom: 18px !important; } .s-label::before, .tw-eyebrow::before, .cs-tag::before { content: '' !important; width: 16px !important; height: 1px !important; background: rgba(255,255,255,.22) !important; flex-shrink: 0 !important; } /* pc-tag has gradient dot — keep custom */ .pc-tag::before { width: 5px !important; height: 5px !important; border-radius: 50% !important; background: linear-gradient(135deg, #1e9bff, #ff6010) !important; } /* ── Card / surface unification ── */ .pc-col, .sb-svc, .sb-val, .sb-step, .sb-member, .pc-inc-item { transition: background .25s, border-color .25s !important; } /* lighter borders for breathing room */ .sb-val, .sb-step, .sb-member, .pc-inc-item { border-color: rgba(255,255,255,.06) !important; } /* ── Hover states more subtle ── */ .sb-val:hover, .sb-step:hover, .sb-member:hover, .pc-inc-item:hover { background: rgba(255,255,255,.018) !important; } /* ── CTA buttons — unified ── */ .btn-primary, .tw-cta-btn, .pc-btn--primary { font-family: 'Inter Tight', sans-serif !important; font-weight: 700 !important; letter-spacing: 4px !important; text-transform: uppercase !important; border-radius: 100px !important; transition: all .3s cubic-bezier(.16,1,.3,1) !important; } /* ── Reduce excessive padding on section headers ── */ .pc-inc-header, .pc-faq-header, .sb-val-header, .sb-team-header { padding-top: 56px !important; padding-bottom: 40px !important; } /* ── Heading sizes — keep cinematic but consistent ── */ .pc-inc-h2, .pc-faq-h2, .sb-val-h2, .sb-team-h2, .sb-proc-h2, .sb-cta-h2, .pc-cta-h2 { font-size: clamp(28px, 3.5vw, 52px) !important; line-height: .9 !important; letter-spacing: -.5px !important; } /* ── Body text — slightly more legible ── */ .tw-desc, .pc-desc, .sb-intro, .sb-st-body, .sb-val-text, .sb-step-desc, .sb-member-bio, .pc-inc-desc, .faq-body { line-height: 1.7 !important; } /* ── Filter/active states — unified ── */ .pc-col--featured { position: relative; } .pc-col--featured::before { background: linear-gradient(to right, #1e9bff, #7c35e8) !important; } /* ── Footer tightening ── */ .fv2-top { padding: 56px 0 40px !important; } .fv2-bottom { padding: 18px 0 !important; font-size: 10px !important; } /* ── Anchor smooth scroll for accordions / sections ── */ html { scroll-behavior: smooth; } /* ── Better focus visibility ── */ button:focus-visible, a:focus-visible { outline: 2px solid rgba(30,155,255,.6); outline-offset: 3px; border-radius: 4px; } /* ── Consistent card shadow on hover ── */ .tw-card:hover { box-shadow: 0 10px 30px rgba(0,0,0,.35); } /* ── Scrollbar unified ── */ ::-webkit-scrollbar { width: 4px; height: 4px; } ::-webkit-scrollbar-track { background: #06060a; } ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; } ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.2); } /* ── Selection ── */ ::selection { background: rgba(30,155,255,.28); color: #fff; } /* ═════════════════════════════════════════════════════ PATCH v54 — PROFESSIONAL POLISH Applied learnings from: Pulse Films, Stink, Bindery, Vidico, BAM (Cologne), Stanislav Adam (FAMU) Principles: • Less, but with more confidence • Generous whitespace, restrained ornament • Tighter typography, consistent rhythm • Subtle interactions, no "wow" effects ═════════════════════════════════════════════════════ */ /* ── Universal section spacing rhythm ── */ .svc2-section { padding-top: 100px !important; padding-bottom: 0 !important; } .trust-section { padding: 64px 0 !important; } .featured-section { padding: 80px 0 !important; } .price-teaser-section { padding: 56px 0 !important; } /* ── Hero hierarchy ── */ .hv2-eyebrow { font-size: 9px !important; font-weight: 700 !important; letter-spacing: 5px !important; text-transform: uppercase !important; color: rgba(255,255,255,.46) !important; margin-bottom: 24px !important; display: inline-flex !important; align-items: center !important; gap: 10px !important; } .hv2-dot { width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(135deg, #1e9bff, #ff6010); box-shadow: 0 0 10px rgba(255,96,16,.5); } .hv2-h1 { letter-spacing: -2px !important; line-height: .85 !important; } .hv2-sub { font-size: clamp(15px, 1.4vw, 18px) !important; font-weight: 300 !important; line-height: 1.65 !important; color: rgba(255,255,255,.55) !important; max-width: 56ch !important; margin-bottom: 36px !important; } /* ── Stats: more refined ── */ .hv2-stat-n { font-weight: 400 !important; letter-spacing: -1px !important; } .hv2-stat-l { font-size: 8px !important; letter-spacing: 4px !important; color: rgba(255,255,255,.52) !important; } .hv2-stat-div { height: 28px !important; width: 1px !important; background: rgba(255,255,255,.1) !important; } /* ── Bottom hero bar ── */ .hv2-bar { font-size: 9px !important; letter-spacing: 4px !important; color: rgba(255,255,255,.18) !important; text-transform: uppercase !important; } /* ── Hero scroll indicator — subtle ── */ .hero-scroll { opacity: .5 !important; } .hero-scroll-text { font-size: 8px !important; letter-spacing: 4px !important; color: rgba(255,255,255,.35) !important; } /* ── Buttons: outline style refined ── */ .btn-outline { border: 1px solid rgba(255,255,255,.25) !important; background: transparent !important; color: rgba(255,255,255,.75) !important; padding: 14px 32px !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 4px !important; text-transform: uppercase !important; border-radius: 100px !important; transition: all .3s cubic-bezier(.16,1,.3,1) !important; } .btn-outline:hover { border-color: rgba(255,255,255,.5) !important; color: #fff !important; background: rgba(255,255,255,.04) !important; transform: translateY(-2px); } /* ── Service items: more editorial, less card-like ── */ .svc2-item { border-bottom: 1px solid rgba(255,255,255,.06) !important; transition: background .25s !important; } .svc2-item:hover { background: rgba(255,255,255,.018) !important; } .svc2-num { font-size: 12px !important; letter-spacing: 4px !important; color: rgba(255,255,255,.55) !important; } .svc2-name { font-family: 'Inter Tight', sans-serif !important; font-size: clamp(28px, 3.5vw, 48px) !important; letter-spacing: -.5px !important; line-height: 1 !important; } .svc2-desc { font-size: 14px !important; line-height: 1.65 !important; color: rgba(255,255,255,.46) !important; max-width: 50ch !important; } .svc2-tags span { font-size: 8px !important; letter-spacing: 3px !important; border: 1px solid rgba(255,255,255,.1) !important; padding: 5px 10px !important; border-radius: 100px !important; color: rgba(255,255,255,.4) !important; } .svc2-arrow { width: 36px !important; height: 36px !important; border-radius: 50% !important; border: 1px solid rgba(255,255,255,.15) !important; color: rgba(255,255,255,.4) !important; transition: all .3s !important; } .svc2-item:hover .svc2-arrow { border-color: rgba(255,255,255,.5) !important; color: #fff !important; background: rgba(255,255,255,.04) !important; } /* ── Trust statement — refined ── */ .trust-statement { border-top: 1px solid rgba(255,255,255,.06) !important; padding-top: 40px !important; margin-top: 48px !important; max-width: 720px !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; } .trust-statement p { font-size: clamp(15px, 1.5vw, 20px) !important; font-weight: 300 !important; line-height: 1.6 !important; color: rgba(255,255,255,.55) !important; font-style: italic !important; } .trust-quote { font-family: 'Inter Tight', sans-serif !important; font-size: 48px !important; color: rgba(255,255,255,.15) !important; line-height: .8 !important; display: block !important; margin-bottom: -10px !important; } /* ── Featured work — match cleaner aesthetic ── */ .featured-h2 { font-size: clamp(36px, 4.5vw, 64px) !important; letter-spacing: -1px !important; line-height: .9 !important; } /* ── Price teaser — strip not block ── */ .price-teaser-inner { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 32px !important; padding: 24px 0 !important; } .price-teaser-text { font-size: 14px !important; color: rgba(255,255,255,.5) !important; line-height: 1.55 !important; margin: 0 !important; } .price-teaser-text strong { color: #fff !important; font-weight: 600 !important; } .price-teaser-btn { flex-shrink: 0 !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; font-size: 9px !important; font-weight: 700 !important; letter-spacing: 4px !important; text-transform: uppercase !important; color: rgba(255,255,255,.7) !important; border: 1px solid rgba(255,255,255,.2) !important; padding: 13px 24px !important; border-radius: 100px !important; text-decoration: none !important; transition: all .25s !important; } .price-teaser-btn:hover { color: #fff !important; border-color: rgba(255,255,255,.5) !important; background: rgba(255,255,255,.04) !important; } /* ── Reduce hv2-grain noise — was distracting ── */ .hv2-grain { opacity: .35 !important; } /* ── Final touch: heading rhythm ── */ .svc2-h2, .featured-h2, .cta-v2-h2, .pc-h1, .sb-h1, .tw-h1, .ct-h1 { letter-spacing: -1px !important; } /* ── Ensure footer has breathing room ── */ .footer-v2 .container { padding-top: 64px !important; padding-bottom: 24px !important; } /* ════════════════════════════════════════════════════ PATCH v55 — CLIENT LOGOS + TESTIMONIAL Two new sections added to homepage for B2B credibility This is the #1 conversion driver in production sites ════════════════════════════════════════════════════ */ /* ── Client logos strip ── */ .clients-strip { padding: 56px 0; border-top: 1px solid rgba(255,255,255,.07); border-bottom: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.012); } .clients-label { text-align: center; font-size: 9px; font-weight: 700; letter-spacing: 5px; text-transform: uppercase; color: rgba(255,255,255,.52); margin-bottom: 36px; } .clients-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; align-items: center; } .client-logo { display: flex; align-items: center; justify-content: center; height: 50px; font-family: 'Inter Tight', sans-serif; font-size: 13px; letter-spacing: 4px; color: rgba(255,255,255,.55); border-right: 1px solid rgba(255,255,255,.06); transition: color .3s; } .client-logo:last-child { border-right: none; } .client-logo:hover { color: rgba(255,255,255,.55); } @media (max-width: 768px) { .clients-grid { grid-template-columns: repeat(3, 1fr); } .client-logo:nth-child(3n) { border-right: none; } .client-logo:nth-child(n+4) { border-top: 1px solid rgba(255,255,255,.06); } } /* ── Testimonial ── */ .testim-section { padding: 96px 0 104px; border-top: 1px solid rgba(255,255,255,.07); position: relative; } .testim-inner { max-width: 760px; margin: 0 auto; text-align: center; position: relative; } .testim-mark { font-family: 'Inter Tight', sans-serif; font-size: 120px; line-height: .7; color: rgba(255,255,255,.06); display: block; margin-bottom: -28px; user-select: none; } .testim-q { font-family: 'Inter Tight', sans-serif; font-size: clamp(22px, 2.5vw, 34px); line-height: 1.25; letter-spacing: -.3px; color: rgba(255,255,255,.85); margin: 0 0 32px; font-style: normal; font-weight: 400; border: none; padding: 0; } .testim-author { display: flex; flex-direction: column; gap: 6px; } .testim-name { font-size: 11px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: rgba(255,255,255,.7); } .testim-role { font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,.52); } /* ════════════════════════════════════════════════════ PATCH v56 — MARQUEE + MANIFESTO Two pro-grade additions: scrolling client logos and a strong manifesto statement ════════════════════════════════════════════════════ */ /* ── Client logos: infinite marquee ── */ .clients-marquee { padding: 56px 0 60px; border-top: 1px solid rgba(255,255,255,.07); border-bottom: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.012); overflow: hidden; position: relative; } .clients-marquee .clients-label { text-align: center; font-size: 9px; font-weight: 700; letter-spacing: 5px; text-transform: uppercase; color: rgba(255,255,255,.52); margin-bottom: 32px; padding: 0 24px; } .marquee-track { display: flex; width: max-content; animation: marquee-scroll 50s linear infinite; gap: 0; } .clients-marquee:hover .marquee-track { animation-play-state: paused; } .marquee-row { display: flex; align-items: center; flex-shrink: 0; padding: 0 32px 0 0; gap: 0; } .m-logo { font-family: 'Inter Tight', sans-serif; font-size: 18px; letter-spacing: 5px; color: rgba(255,255,255,.52); padding: 0 32px; white-space: nowrap; transition: color .22s; } .m-logo:hover { color: rgba(255,255,255,.85); } .m-dot { color: rgba(255,255,255,.15); font-size: 16px; user-select: none; } /* edge fade — let logos bleed into darkness on the sides */ .clients-marquee::before, .clients-marquee::after { content: ''; position: absolute; top: 0; bottom: 0; width: 80px; pointer-events: none; z-index: 2; } .clients-marquee::before { left: 0; background: linear-gradient(to right, #07070a, transparent); } .clients-marquee::after { right: 0; background: linear-gradient(to left, #07070a, transparent); } @keyframes marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ── Manifesto big statement ── */ .manifesto-section { padding: 120px 0 130px; border-top: 1px solid rgba(255,255,255,.07); border-bottom: 1px solid rgba(255,255,255,.07); position: relative; } .manifesto-eyebrow { text-align: center; font-size: 9px; font-weight: 700; letter-spacing: 6px; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 40px; display: flex; align-items: center; justify-content: center; gap: 12px; } .manifesto-eyebrow::before, .manifesto-eyebrow::after { content: ''; width: 24px; height: 1px; background: rgba(255,255,255,.22); } .manifesto-line { font-family: 'Inter Tight', sans-serif; font-size: clamp(36px, 5vw, 76px); line-height: 1.05; letter-spacing: -1.5px; color: rgba(255,255,255,.78); text-align: center; max-width: 22ch; margin: 0 auto; } .manifesto-line em { font-style: normal; background: linear-gradient(100deg, #ff6010, #1e9bff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ════════════════════════════════════════════════════════ PATCH v57 — TYPOGRAPHIC OVERHAUL Bebas → Inter Tight (architectural sans, more sophisticated) Playfair → Instrument Serif (editorial italic moments) League Spartan → Inter Tight (mono-typography unification) Inter Tight needs tighter tracking + heavier weights to match the impact Bebas had at smaller weights. ═══════════════════════════════════════════════════════════ */ /* ── Body baseline ── */ body { font-family: 'Inter Tight', sans-serif !important; font-weight: 400; letter-spacing: -.005em; } /* ── Hero h1: huge, very tight ── */ .hv2-h1, .tw-h1, .pc-h1, .sb-h1, .ct-h1, .cs-h1 { font-family: 'Inter Tight', sans-serif !important; font-weight: 800 !important; letter-spacing: -3.5px !important; line-height: .92 !important; } /* h1 italic accent: use serif italic */ .hv2-h1 em, .tw-h1 em, .pc-h1 em, .sb-h1 em, .sb-h1 span, .ct-h1 em { font-family: 'Instrument Serif', serif !important; font-style: italic !important; font-weight: 400 !important; letter-spacing: -1.5px !important; /* keep gradient */ background: linear-gradient(100deg, #ff6010, #1e9bff) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } /* ── Section h2: large, tight, uppercase optional ── */ .svc2-h2, .featured-h2, .cta-v2-h2, .pc-cta-h2, .pc-inc-h2, .pc-faq-h2, .sb-val-h2, .sb-team-h2, .sb-proc-h2, .sb-cta-h2, .sb-wp-h2, .ct-faq-h2 { font-family: 'Inter Tight', sans-serif !important; font-weight: 700 !important; letter-spacing: -2px !important; line-height: .95 !important; } .svc2-h2 em, .featured-h2 em, .cta-v2-h2 em, .pc-cta-h2 em, .pc-inc-h2 em, .pc-faq-h2 em, .sb-val-h2 em, .sb-team-h2 em, .sb-proc-h2 em, .sb-cta-h2 em, .sb-wp-h2 em, .ct-faq-h2 em { font-family: 'Instrument Serif', serif !important; font-style: italic !important; font-weight: 400 !important; letter-spacing: -1px !important; } /* ── Manifesto — biggest moment, hybrid ── */ .manifesto-line { font-family: 'Inter Tight', sans-serif !important; font-weight: 600 !important; letter-spacing: -2.5px !important; line-height: 1.05 !important; } .manifesto-line em { font-family: 'Instrument Serif', serif !important; font-style: italic !important; font-weight: 400 !important; letter-spacing: -1.2px !important; } /* ── Service item names ── */ .svc2-name { font-family: 'Inter Tight', sans-serif !important; font-weight: 600 !important; letter-spacing: -1.2px !important; text-transform: none !important; } /* ── Stats: tabular numbers ── */ .hv2-stat-n, .trust-n, .tw-stat-n, .tw-cred-n, .sb-stat-n { font-family: 'Inter Tight', sans-serif !important; font-weight: 500 !important; letter-spacing: -1px !important; font-variant-numeric: tabular-nums !important; } /* small italic + on numbers */ .tw-stat-n em, .tw-cred-n em, .sb-stat-n em, .hv2-stat-n[data-suffix], .trust-n[data-suffix] { font-family: 'Instrument Serif', serif !important; font-style: italic !important; font-weight: 400 !important; } /* ── Pack column titles & prices ── */ .pc-col-name { font-family: 'Inter Tight', sans-serif !important; font-weight: 600 !important; letter-spacing: -1px !important; } .pc-price-main { font-family: 'Inter Tight', sans-serif !important; font-weight: 500 !important; letter-spacing: -2px !important; font-variant-numeric: tabular-nums !important; } .pc-price-custom { font-family: 'Instrument Serif', serif !important; font-style: italic !important; font-weight: 400 !important; letter-spacing: -.5px !important; } /* ── Trust statement quote: serif italic ── */ .trust-statement p { font-family: 'Instrument Serif', serif !important; font-style: italic !important; font-weight: 400 !important; font-size: clamp(18px, 1.8vw, 24px) !important; letter-spacing: -.3px !important; line-height: 1.5 !important; } .trust-quote { font-family: 'Instrument Serif', serif !important; font-style: italic !important; font-weight: 400 !important; font-size: 60px !important; line-height: .8 !important; } /* ── Testimonial: hybrid ── */ .testim-q { font-family: 'Inter Tight', sans-serif !important; font-weight: 400 !important; letter-spacing: -.8px !important; line-height: 1.35 !important; } .testim-mark { font-family: 'Instrument Serif', serif !important; font-style: italic !important; font-weight: 400 !important; font-size: 140px !important; line-height: .6 !important; } /* ── Eyebrow labels: keep size, tighter tracking ── */ .s-label, .tw-eyebrow, .pc-tag, .cs-tag, .hv2-eyebrow, .tw-bc-cat, .svc2-tags span, .sb-tag, .ct-eyebrow { font-family: 'Inter Tight', sans-serif !important; font-weight: 600 !important; letter-spacing: 3px !important; text-transform: uppercase !important; font-size: 9px !important; } /* ── Card titles in trabalho grid ── */ .tw-card-t, .tw-bc-name, .sb-wp-name, .tw-name { font-family: 'Inter Tight', sans-serif !important; font-weight: 600 !important; letter-spacing: -.5px !important; text-transform: none !important; } /* ── Filter pills, buttons, CTAs ── */ .tw-pill, .tw-cta-btn, .btn-primary, .btn-outline, .pc-btn, .sb-wp-link, .price-teaser-btn, .cta-v2-btn { font-family: 'Inter Tight', sans-serif !important; font-weight: 600 !important; letter-spacing: 2.5px !important; } /* ── Numbers in cards: keep tracking but Inter Tight ── */ .tw-card-n, .tw-num, .svc2-num, .pc-col-num, .sb-val-num, .pc-inc-n { font-family: 'Inter Tight', sans-serif !important; font-weight: 600 !important; letter-spacing: 3px !important; } /* ── Body text ── */ .hv2-sub, .svc2-desc, .pc-desc, .sb-intro, .tw-desc, .faq-body, .testim-q, .cta-v2-sub, .pc-cta-sub, .tw-cta-sub, .sb-st-body p, .sb-val-text, .sb-step-desc, .sb-member-bio, .pc-inc-desc, .pc-col-desc { font-family: 'Inter Tight', sans-serif !important; font-weight: 300 !important; letter-spacing: -.005em !important; } /* ── Form labels & inputs ── */ .f-lbl, .f-inp, .f-sel, .f-tx { font-family: 'Inter Tight', sans-serif !important; } /* ── Footer ── */ .fv2-tagline, .fv2-nav a, .fv2-contact a, .fv2-bottom { font-family: 'Inter Tight', sans-serif !important; } /* ── Manifesto eyebrow & client labels ── */ .manifesto-eyebrow, .clients-label, .tw-cta-h em { font-family: 'Inter Tight', sans-serif !important; } /* ── Marquee logos: Inter Tight bolder ── */ .m-logo, .client-logo { font-family: 'Inter Tight', sans-serif !important; font-weight: 600 !important; letter-spacing: 4px !important; text-transform: uppercase !important; } /* ── Values, steps, member names: tighter ── */ .sb-val-name, .sb-step-name, .sb-member-name, .pc-inc-name { font-family: 'Inter Tight', sans-serif !important; font-weight: 600 !important; letter-spacing: -.5px !important; text-transform: none !important; } /* ── Sidebar/category labels in trabalho ── */ .tw-sb-text, .tw-pill-dot + *, .cat-hdr-name, .tw-cat-sep-name { font-family: 'Inter Tight', sans-serif !important; font-weight: 500 !important; } .cat-hdr-name, .tw-cat-sep-name { font-weight: 700 !important; letter-spacing: -1px !important; } /* ════════════════════════════════════════════════════════ PATCH v58 — EDITORIAL POLISH Less bordering, more whitespace, subtler hovers. The work breathes when there's less around it. ═══════════════════════════════════════════════════════════ */ /* ── Backgrounds: let beam canvas show through .pg ── */ body { background: #07070a !important; } .pg { background: transparent !important; position: relative; z-index: 1; } /* ── Borders: lighter throughout ── */ .svc2-item, .sb-val, .sb-step, .sb-member, .pc-col, .pc-inc-item, .faq-item, .clients-marquee, .manifesto-section, .testim-section, .trust-section, .featured-section, .price-teaser-section, .tw-creds, .cta-section-v2, .cat-hdr, .cat-section, .tw-filters, .tw-cta { border-color: rgba(255,255,255,.05) !important; } /* ── Reduce hover elaboration: spring out, just opacity & subtle move ── */ .tw-card { transition: transform .35s cubic-bezier(.16,1,.3,1), opacity .25s !important; } .tw-card:hover { transform: translateY(-2px) !important; box-shadow: none !important; } .tw-card-bg { transition: opacity .5s !important; } .tw-card:hover .tw-card-bg { transform: none !important; opacity: 1 !important; } .tw-card-bg { opacity: .85; } .svc2-item:hover { background: rgba(255,255,255,.012) !important; } .svc2-item:hover .svc2-arrow { border-color: rgba(255,255,255,.35) !important; background: transparent !important; } .btn-outline:hover, .btn-primary:hover, .tw-cta-btn:hover, .tw-pill:hover { transform: none !important; } /* ── Subtler arrows ── */ .svc2-arrow { background: transparent !important; border-color: rgba(255,255,255,.1) !important; } /* ── Section spacing: more air ── */ .svc2-header, .pc-inc-header, .pc-faq-header, .sb-val-header, .sb-team-header, .sb-proc-header, .sb-wp-header { padding-top: 88px !important; padding-bottom: 64px !important; } /* ── Headlines: more breathing room ── */ .hv2-h1 { margin-bottom: 28px !important; } .svc2-h2, .featured-h2, .cta-v2-h2, .pc-cta-h2 { margin-bottom: 16px !important; } /* ── Manifesto: more dramatic, less ornament ── */ .manifesto-section { padding: 140px 0 150px !important; border-top: 1px solid rgba(255,255,255,.05) !important; border-bottom: 1px solid rgba(255,255,255,.05) !important; } .manifesto-eyebrow { margin-bottom: 56px !important; } .manifesto-line { max-width: 16ch !important; } /* ── Manifesto eyebrow: simpler, no flanking lines ── */ .manifesto-eyebrow::before, .manifesto-eyebrow::after { display: none !important; } /* ── Eyebrows: simpler ── */ .s-label::before, .tw-eyebrow::before, .cs-tag::before { width: 24px !important; background: rgba(255,255,255,.25) !important; } /* ── Pricing columns: less divided ── */ .pc-col { border-right: 1px solid rgba(255,255,255,.05) !important; } .pc-col:last-child { border-right: none !important; } /* ── Featured section: more air ── */ .featured-section { padding: 120px 0 130px !important; } .featured-header { margin-bottom: 64px !important; } /* ── Footer: more breathing ── */ .footer-v2 .container { padding-top: 88px !important; } .fv2-top { padding-bottom: 56px !important; } /* ── Service tags: subtler ── */ .svc2-tags span { border-color: rgba(255,255,255,.07) !important; color: rgba(255,255,255,.52) !important; } /* ── Stats divider: subtler ── */ .hv2-stat-div, .tw-stat-div, .trust-div { background: rgba(255,255,255,.06) !important; } /* ── Hero scroll: less prominent ── */ .hero-scroll { opacity: .35 !important; } /* ── Reduce noise grain ── */ .hv2-grain { opacity: .2 !important; } /* ── Cleaner cards in tw-grid: opacity hover ── */ .tw-card::after { background: linear-gradient(to top, rgba(0,0,0,.78) 0%, transparent 60%) !important; } /* ── Featured work cards: cleaner ── */ .fw-cell, .fw-card, .fw-grid-cell { border-radius: 0 !important; } /* ── Testimonial: more dramatic, less padding ── */ .testim-section { padding: 110px 0 120px !important; } .testim-mark { margin-bottom: -42px !important; } .testim-q { margin-bottom: 40px !important; } /* ── Trust statement: cleaner ── */ .trust-statement { padding-top: 56px !important; margin-top: 64px !important; } /* ════════════════════════════════════════════════════════ PATCH v59 — BREATHING ROOM + ALIGNMENT Fix: cramped sections, inconsistent vertical rhythm, inconsistent left alignment, packed CTAs. ═══════════════════════════════════════════════════════════ */ /* ── Hide deprecated client/testimonial sections completely ── */ .clients-marquee, .testim-section { display: none !important; } /* ── Universal section vertical rhythm ── */ .section, .svc2-section, .trust-section, .featured-section, .price-teaser-section, .cta-section-v2, .manifesto-section, .reel-section { padding-top: 120px !important; padding-bottom: 120px !important; } /* Manifesto and CTA get more breathing */ .manifesto-section { padding: 160px 0 !important; } .cta-section-v2 { padding: 140px 0 !important; } /* ── Section headers: consistent breathing ── */ .svc2-header, .featured-header, .pc-inc-header, .pc-faq-header, .sb-val-header, .sb-team-header, .sb-proc-header, .sb-wp-header, .ct-faq-header { padding-top: 0 !important; padding-bottom: 80px !important; } /* ── Hero spacing ── */ .hv2-hero { min-height: 92svh !important; } .hv2-content { padding-top: calc(var(--nav-h) + 64px) !important; padding-bottom: 96px !important; } /* ── H1 to sub spacing ── */ .hv2-h1 { margin-bottom: 36px !important; } .hv2-sub { margin-bottom: 56px !important; } /* ── Sub to CTAs spacing ── */ .hv2-actions { margin-bottom: 80px !important; } /* ── Stats: more separation ── */ .hv2-stats { gap: 48px !important; } .trust-grid { gap: 0 !important; } .trust-metric { padding: 0 32px !important; } /* ── Service items: more vertical room each ── */ .svc2-item { padding: 56px 0 !important; } /* ── Pricing columns: more padding ── */ .pc-col { padding: 48px 32px 32px !important; } .pc-col-header { padding-bottom: 32px !important; } .pc-col-list { padding: 24px 0 !important; } /* ── Trust statement: more padding ── */ .trust-statement { padding-top: 72px !important; margin-top: 80px !important; } /* ── Manifesto: tighter line, generous padding ── */ .manifesto-line { max-width: 18ch !important; } /* ── Featured work header: more space below ── */ .featured-header { margin-bottom: 80px !important; } /* ── Price teaser strip: more padding ── */ .price-teaser-section { padding: 80px 0 !important; } .price-teaser-inner { padding: 32px 0 !important; } /* ── Footer: significantly more breathing ── */ .footer-v2 .container { padding-top: 120px !important; padding-bottom: 32px !important; } .fv2-top { padding-bottom: 80px !important; } /* ── Universal container: align reading width consistently ── */ .container { max-width: 1280px !important; margin: 0 auto !important; padding-left: var(--pad) !important; padding-right: var(--pad) !important; } /* ── CTA section v2: cleaner alignment ── */ .cta-v2-inner { align-items: start !important; gap: 80px !important; } .cta-v2-h2 { line-height: .9 !important; } .cta-v2-list { gap: 16px !important; } .cta-v2-list li { padding: 6px 0 !important; } /* ── Section eyebrows: keep aligned consistently ── */ .s-label, .tw-eyebrow, .cs-tag, .hv2-eyebrow, .manifesto-eyebrow, .svc2-eyebrow { margin-bottom: 24px !important; } /* ── Headers wrapping line: more space below ── */ .svc2-h2, .featured-h2, .cta-v2-h2, .pc-cta-h2, .pc-inc-h2, .pc-faq-h2, .sb-val-h2, .sb-team-h2, .sb-proc-h2, .sb-cta-h2, .sb-wp-h2, .ct-faq-h2 { margin-bottom: 24px !important; } /* ── Section subtitle / desc consistent spacing ── */ .svc2-desc-header, .pc-desc, .sb-team-desc, .sb-val-desc, .featured-sub { margin-top: 0 !important; max-width: 56ch !important; } /* ── Sticky sections: align to nav properly ── */ .tw-filters { padding: 18px var(--pad) !important; } /* ── About hero: ensure breathing room ── */ .sb-hero { padding-top: calc(var(--nav-h) + 120px) !important; padding-bottom: 100px !important; } /* ── Member team spacing ── */ .sb-team { border-top: 1px solid rgba(255,255,255,.05) !important; padding-top: 0 !important; } .sb-team-header { padding: 96px var(--pad) 64px !important; } /* ── CTA content centring (cleaner alignment) ── */ .tw-cta { padding: 64px var(--pad) !important; } .pc-cta { padding: 64px var(--pad) !important; } .sb-cta { padding: 96px var(--pad) !important; } /* ── Footer rows: align consistently ── */ .fv2-top { display: grid !important; grid-template-columns: 2fr 1fr 1fr !important; gap: 64px !important; align-items: start !important; } @media (max-width: 800px) { .fv2-top { grid-template-columns: 1fr !important; gap: 48px !important; } .hv2-stats { gap: 24px !important; } .section, .svc2-section, .trust-section, .featured-section, .cta-section-v2, .manifesto-section { padding: 80px 0 !important; } } /* ════════════════════════════════════════════════════════ PATCH v60 — PREÇOS HEADING HIERARCHY FIX - H1 letter-spacing softer for short titles - H2 section sizes properly differentiated - H3 items legible ═══════════════════════════════════════════════════════════ */ /* H1 hero on preços — short title needs less aggressive tracking */ .pc-h1 { letter-spacing: -2.5px !important; line-height: .9 !important; } /* Pack name and price both at 40px max — same visual weight */ .pc-col-name { font-size: clamp(28px, 3vw, 40px) !important; letter-spacing: -1px !important; } .pc-price-main { font-size: clamp(28px, 3vw, 40px) !important; letter-spacing: -1.5px !important; } .pc-price-custom { font-family: 'Instrument Serif', serif !important; font-style: italic !important; font-size: clamp(28px, 3vw, 40px) !important; letter-spacing: -.5px !important; color: rgba(255,255,255,.55) !important; } /* H2 sections — 64 max, CTA final 48 max (subtle variation) */ .pc-inc-h2, .pc-faq-h2 { font-size: clamp(36px, 4.5vw, 64px) !important; line-height: .9 !important; letter-spacing: -2px !important; } .pc-cta-h2 { font-size: clamp(28px, 3.5vw, 48px) !important; line-height: .92 !important; letter-spacing: -1.5px !important; } /* H3 items — readable size */ .pc-inc-name { font-size: 19px !important; line-height: 1.2 !important; letter-spacing: -.4px !important; } .pc-inc-desc { margin-top: 4px !important; } /* Pack number "01 02 03 04" — slightly bigger, more breathing */ .pc-col-num { font-size: 12px !important; margin-bottom: 16px !important; letter-spacing: 5px !important; } /* Spacing fix — give the price block proper room */ .pc-price { margin-top: 8px !important; margin-bottom: 32px !important; } /* Pack name → desc breathing */ .pc-col-name { margin-bottom: 14px !important; } .pc-col-desc { margin-bottom: 32px !important; line-height: 1.6 !important; } /* Move sub label "preço fixo / por ciclo / sob proposta" to a clearer scale */ .pc-price-sub { margin-top: 8px !important; font-size: 9px !important; letter-spacing: 3px !important; color: rgba(255,255,255,.52) !important; } /* Featured badge alignment */ .pc-badge { position: absolute; top: 14px; left: 28px; margin: 0 !important; } .pc-col--featured { padding-top: 56px !important; } /* ════════════════════════════════════════════════════════════ PATCH v61 — UNIFIED BREATHING SYSTEM (FINAL) Replaces inconsistent line-heights and margins across patches v54-v60 with a single coherent rhythm. This is the LAST patch — designed to win specificity wars from previous patches and impose order. SCALE: Equilibrado (sections 120-160px, titles 32px below) ═══════════════════════════════════════════════════════════════ */ :root { /* Spacing tokens — single source of truth */ --space-section-y: 140px; /* vertical padding inside sections */ --space-section-y-lg: 160px; /* manifesto, CTA hero moments */ --space-section-y-sm: 96px; /* compact rows: trust, price teaser */ --space-header-bottom: 48px; /* between section header and content below */ --space-eyebrow-h: 20px; /* eyebrow → h2 */ --space-h-sub: 32px; /* h1/h2 → sub paragraph */ --space-sub-cta: 56px; /* sub → CTAs/buttons */ /* Line heights tokens */ --lh-display: .92; /* huge h1 */ --lh-heading: .98; /* h2 sections */ --lh-tight: 1.15; /* small h3, item names */ --lh-body: 1.65; /* body text — ONE value, not 5 */ --lh-loose: 1.75; /* big intro paragraphs */ } /* ─── Section padding system ─────────────────────────── */ .section, .svc2-section, .trust-section, .featured-section, .cta-section-v2, .reel-section, .pc-table-section, .pc-includes, .pc-faq-section, .pc-cta-section, .sb-manifesto, .sb-values, .sb-team, .sb-work-preview, .sb-process, .sb-cta-section, .tw-creds { padding-top: var(--space-section-y) !important; padding-bottom: var(--space-section-y) !important; } .manifesto-section { padding-top: var(--space-section-y-lg) !important; padding-bottom: var(--space-section-y-lg) !important; } .trust-section, .price-teaser-section, .tw-creds { padding-top: var(--space-section-y-sm) !important; padding-bottom: var(--space-section-y-sm) !important; } /* ─── Section headers — consistent rhythm ────────────── */ .svc2-header, .featured-header, .pc-inc-header, .pc-faq-header, .sb-val-header, .sb-team-header, .sb-proc-header, .sb-wp-header, .ct-faq-header { padding-top: 0 !important; padding-bottom: var(--space-header-bottom) !important; margin-bottom: 0 !important; } /* ─── Eyebrow → heading ─────────────────────────────── */ .s-label, .tw-eyebrow, .cs-tag, .hv2-eyebrow, .manifesto-eyebrow, .svc2-eyebrow, .pc-tag, .sb-tag, .ct-eyebrow { margin-bottom: var(--space-eyebrow-h) !important; } /* ─── Heading → sub paragraph ───────────────────────── */ .hv2-h1, .tw-h1, .pc-h1, .sb-h1, .ct-h1 { margin-bottom: var(--space-h-sub) !important; line-height: var(--lh-display) !important; } .svc2-h2, .featured-h2, .cta-v2-h2, .pc-cta-h2, .pc-inc-h2, .pc-faq-h2, .sb-val-h2, .sb-team-h2, .sb-proc-h2, .sb-cta-h2, .sb-wp-h2, .ct-faq-h2, .work-title-statement { margin-bottom: var(--space-h-sub) !important; line-height: var(--lh-heading) !important; } /* ─── Sub paragraph → CTA buttons ─────────────────────── */ .hv2-sub, .tw-desc, .pc-desc, .sb-intro, .cta-v2-sub, .featured-sub, .svc2-desc-header, .sb-team-desc, .sb-val-desc, .sb-proc-desc, .pc-inc-desc-header, .pc-cta-sub, .tw-cta-sub { line-height: var(--lh-body) !important; margin-bottom: 0 !important; } .hv2-actions, .cta-v2-actions { margin-top: var(--space-sub-cta) !important; } /* ─── Body text everywhere — ONE line-height ────────── */ .svc2-desc, .svc2-item-desc, .faq-body, .sb-st-body p, .sb-val-text, .sb-step-desc, .sb-member-bio, .pc-inc-desc, .pc-col-desc, .pc-list li, .cs-body p, .testim-q, .fv2-tagline, .fv2-contact a, .fv2-nav a, .tw-card-desc, .cta-v2-list li, p { line-height: var(--lh-body) !important; } /* ─── Big editorial paragraphs ──────────────────────── */ .hv2-sub, .sb-intro, .manifesto-body p { line-height: var(--lh-loose) !important; } /* ─── Tight elements (titles inside small cards) ────── */ .svc2-name, .sb-val-name, .sb-step-name, .sb-member-name, .pc-inc-name, .tw-card-t, .tw-bc-name, .cat-hdr-name, .sb-wp-name, .pc-col-name { line-height: var(--lh-tight) !important; margin-bottom: 12px !important; } /* ─── List item rhythm — consistent ───────────────────── */ .pc-list, .pc-inc-grid, .sb-val-grid, .svc2-tags { gap: 12px !important; } .pc-list li, .cta-v2-list li { padding: 6px 0 !important; } /* ─── Cards inside grids — internal padding ─────────── */ .svc2-item { padding: 48px 0 !important; } .sb-val, .sb-step { padding: 40px 0 !important; } .pc-col { padding: 48px 32px 36px !important; } .pc-inc-item { padding: 36px 32px !important; } .faq-item { padding: 0 !important; } .faq-btn { padding: 22px 0 !important; } .faq-body { /* respect collapse state — only apply padding when open */ padding: 0 !important; } .faq-item.open .faq-body { padding: 0 0 22px 0 !important; } /* ─── Featured pack badge — centred pill on top edge ─── */ .pc-col--featured { position: relative !important; overflow: visible !important; padding: 64px 32px 36px !important; } .pc-col--featured .pc-badge { position: absolute !important; top: 0 !important; left: 50% !important; transform: translate(-50%, -50%) !important; margin: 0 !important; z-index: 5; white-space: nowrap; display: inline-flex !important; align-items: center; gap: 6px; font-size: 8px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: #fff !important; background: linear-gradient(100deg, #1e9bff, #7c35e8) !important; padding: 7px 14px !important; border-radius: 100px !important; box-shadow: 0 4px 18px rgba(30,155,255,.35), 0 1px 0 rgba(255,255,255,.1) inset; } .pc-col--featured .pc-badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #fff !important; box-shadow: 0 0 6px rgba(255,255,255,.7); } /* ─── Hero — vertical breathing ───────────────────── */ .hv2-hero { min-height: 90svh !important; } .hv2-content { padding-top: calc(var(--nav-h) + 80px) !important; padding-bottom: 96px !important; } .hv2-stats { gap: 56px !important; margin-top: 0 !important; } .hv2-bar { margin-top: 64px !important; } /* ─── Trust grid — better internal spacing ───────── */ .trust-grid { gap: 0 !important; } .trust-metric { padding: 16px 32px !important; } .trust-statement { margin-top: 64px !important; padding-top: 56px !important; } /* ─── Manifesto — generous ─────────────────────────── */ .manifesto-eyebrow { margin-bottom: 48px !important; } .manifesto-line { max-width: 18ch !important; } /* ─── CTA section v2 — internal alignment ────────── */ .cta-v2-inner { align-items: start !important; gap: 96px !important; } .cta-v2-list { gap: 14px !important; margin-top: 32px !important; } /* ─── Footer — final breath ───────────────────────── */ .footer-v2 { border-top: 1px solid rgba(255,255,255,.05) !important; } .footer-v2 .container { padding-top: 96px !important; padding-bottom: 32px !important; } .fv2-top { display: grid !important; grid-template-columns: 2fr 1fr 1fr !important; gap: 80px !important; align-items: start !important; padding-bottom: 64px !important; border-bottom: 1px solid rgba(255,255,255,.04) !important; } .fv2-bottom { padding-top: 24px !important; font-size: 11px !important; letter-spacing: .3px !important; color: rgba(255,255,255,.3) !important; } /* ─── Container — consistent ─────────────────────── */ .container { max-width: var(--max) !important; padding-left: var(--pad) !important; padding-right: var(--pad) !important; } /* ─── Responsive: scale down breathing on mobile ─── */ @media (max-width: 800px) { :root { --space-section-y: 80px; --space-section-y-lg: 100px; --space-section-y-sm: 64px; --space-header-bottom: 32px; --space-eyebrow-h: 16px; --space-h-sub: 24px; --space-sub-cta: 40px; } .fv2-top { grid-template-columns: 1fr !important; gap: 48px !important; } .hv2-stats { gap: 32px !important; } } /* ─── Cursor: disable on touch devices ─── */ @media (pointer: coarse) { body, button { cursor: auto; } #oc-dot, #oc-ring { display: none; } }