/* ========================================================================== DMORAES — Editorial Monochrome System Display: Fraunces (variable serif) · Body: Inter Tight Dual theme (light/dark) via [data-theme] on ========================================================================== */ :root { --font-display: 'Fraunces', 'Times New Roman', serif; --font-body: 'Inter Tight', system-ui, sans-serif; --font-mono: 'Inter Tight', system-ui, sans-serif; --ease-premium: cubic-bezier(0.16, 1, 0.3, 1); --ease-stand: cubic-bezier(0.4, 0, 0.2, 1); /* shared geometry */ --rad-sm: 12px; --rad-md: 20px; --rad-lg: 28px; --rad-full: 999px; } /* ---------- DARK (default) ---------- */ :root, [data-theme="dark"] { --bg: #07070a; --bg-elev-1: #0d0d11; --bg-elev-2: #14141a; --bg-elev-3: #1c1c24; --ink: #f6f5f0; /* main text */ --ink-soft: rgba(246, 245, 240, 0.72); --ink-muted: rgba(246, 245, 240, 0.50); --ink-faint: rgba(246, 245, 240, 0.28); --line: rgba(246, 245, 240, 0.10); --line-strong: rgba(246, 245, 240, 0.22); --line-bright: rgba(246, 245, 240, 0.45); --accent: #f6f5f0; --accent-contrast: #07070a; --grain-opacity: 0.05; --ambient-1: rgba(246, 245, 240, 0.05); --ambient-2: rgba(246, 245, 240, 0.035); --shadow-card: 0 30px 80px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.04) inset; --logo-invert: 1; --logo-opacity: 0.95; --bg-portfolio-overlay: rgba(7, 7, 10, 0.45); } /* ---------- LIGHT ---------- */ [data-theme="light"] { --bg: #faf8f3; /* warm bone */ --bg-elev-1: #f3f0e8; --bg-elev-2: #ebe7dc; --bg-elev-3: #ddd8c9; --ink: #111111; --ink-soft: rgba(17, 17, 17, 0.80); --ink-muted: rgba(17, 17, 17, 0.58); --ink-faint: rgba(17, 17, 17, 0.32); --line: rgba(17, 17, 17, 0.10); --line-strong: rgba(17, 17, 17, 0.22); --line-bright: rgba(17, 17, 17, 0.55); --accent: #111111; --accent-contrast: #faf8f3; --grain-opacity: 0.04; --ambient-1: rgba(17, 17, 17, 0.03); --ambient-2: rgba(17, 17, 17, 0.02); --shadow-card: 0 20px 60px rgba(17, 17, 17, 0.10), 0 1px 0 rgba(255, 255, 255, 0.5) inset; --logo-invert: 0; --logo-opacity: 1; --bg-portfolio-overlay: rgba(250, 248, 243, 0.25); } /* ========================================================================== Base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 1.55; color: var(--ink); background: var(--bg); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01", "cv01", "cv02", "cv05", "cv11"; transition: background-color 0.5s var(--ease-premium), color 0.5s var(--ease-premium); } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: transparent; border: 0; cursor: pointer; } img { display: block; max-width: 100%; } ::selection { background: var(--ink); color: var(--bg); } /* Editorial display utilities */ em { font-style: italic; font-family: var(--font-display); font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; letter-spacing: -0.01em; font-weight: 400; } .container { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 60px); } /* ========================================================================== Grain Overlay ========================================================================== */ .noise { position: fixed; inset: 0; pointer-events: none; z-index: 9998; opacity: var(--grain-opacity); mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .noise-overlay { display: none; } .cursor-dot, .cursor-follower { display: none !important; } /* ========================================================================== Header ========================================================================== */ .header { position: fixed; top: 0; left: 0; width: 100%; padding: clamp(18px, 2.4vw, 28px) clamp(20px, 4vw, 50px); display: flex; justify-content: space-between; align-items: center; z-index: 100; backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); background: color-mix(in srgb, var(--bg) 70%, transparent); border-bottom: 1px solid var(--line); transition: background 0.5s var(--ease-premium), border-color 0.5s var(--ease-premium); } .logo-link { display: inline-flex; align-items: center; text-decoration: none; } .header-logo-img { height: clamp(40px, 4.4vw, 56px); width: auto; filter: invert(var(--logo-invert)); opacity: var(--logo-opacity); transition: filter 0.5s var(--ease-premium), opacity 0.3s ease, transform 0.5s var(--ease-premium); } .logo-link:hover .header-logo-img { transform: scale(1.04); } .legacy-hidden { display: none !important; } .header-nav { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); } .header-meta { display: inline-flex; align-items: center; gap: 10px; font-size: 0.74rem; letter-spacing: 0.02em; color: var(--ink-muted); } .meta-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 15%, transparent); animation: pulse 2.4s infinite ease-out; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 12%, transparent); } 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--ink) 4%, transparent); } } .meta-label { display: inline-block; } @media (max-width: 720px) { .header-meta { display: none; } } /* Theme toggle */ .theme-toggle { position: relative; width: 42px; height: 42px; border-radius: var(--rad-full); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; color: var(--ink); transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s var(--ease-premium); overflow: hidden; } .theme-toggle:hover { border-color: var(--line-strong); background: color-mix(in srgb, var(--ink) 6%, transparent); } .theme-icon { position: absolute; width: 18px; height: 18px; transition: transform 0.5s var(--ease-premium), opacity 0.3s ease; } [data-theme="dark"] .theme-icon-sun { transform: translateY(120%) rotate(40deg); opacity: 0; } [data-theme="dark"] .theme-icon-moon { transform: translateY(0) rotate(0); opacity: 1; } [data-theme="light"] .theme-icon-sun { transform: translateY(0) rotate(0); opacity: 1; } [data-theme="light"] .theme-icon-moon { transform: translateY(-120%) rotate(-40deg); opacity: 0; } .menu-btn { display: inline-flex; align-items: center; gap: 10px; padding: 11px 22px; border: 1px solid var(--line-strong); border-radius: var(--rad-full); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.01em; color: var(--ink); background: transparent; transition: background 0.3s var(--ease-premium), color 0.3s var(--ease-premium), border-color 0.3s var(--ease-premium); } .menu-btn-arrow { display: inline-block; transition: transform 0.4s var(--ease-premium); } .menu-btn:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); } .menu-btn:hover .menu-btn-arrow { transform: translate(3px, -3px); } /* ========================================================================== Hero ========================================================================== */ .hero { position: relative; min-height: 100vh; padding: clamp(140px, 16vh, 200px) clamp(20px, 5vw, 60px) clamp(60px, 8vh, 90px); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; } #heroCanvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.4; pointer-events: none; } [data-theme="light"] #heroCanvas { opacity: 0.55; mix-blend-mode: multiply; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 20% 20%, var(--ambient-1), transparent 60%), radial-gradient(ellipse 70% 70% at 90% 90%, var(--ambient-2), transparent 60%); pointer-events: none; z-index: 1; } .hero-content { position: relative; z-index: 5; width: 100%; max-width: 1280px; margin-inline: auto; display: flex; flex-direction: column; justify-content: space-between; flex: 1; padding-inline: 0; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 14px; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.04em; color: var(--ink-soft); margin-bottom: clamp(32px, 4vh, 56px); } .hero-eyebrow-mark { width: 36px; height: 1px; background: var(--ink); } .hero-title { font-family: var(--font-display); font-weight: 400; font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 0; font-size: clamp(2.6rem, 9.4vw, 9.4rem); line-height: 0.94; letter-spacing: -0.035em; color: var(--ink); max-width: 16ch; text-wrap: balance; } .hero-title em { font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; color: var(--ink); } .hero-bottom { position: relative; margin-top: clamp(48px, 8vh, 96px); display: grid; grid-template-columns: minmax(0, 1.5fr) auto auto; align-items: end; gap: clamp(32px, 5vw, 80px); padding-top: 36px; border-top: 1px solid var(--line); } .hero-desc { max-width: 56ch; font-size: clamp(0.98rem, 1.15vw, 1.12rem); line-height: 1.55; color: var(--ink-soft); letter-spacing: 0.005em; } .hero-meta { display: inline-flex; align-items: center; gap: clamp(20px, 3vw, 36px); } .stat-item { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } .stat-num { font-family: var(--font-display); font-weight: 400; font-variation-settings: "opsz" 144, "SOFT" 50; font-size: clamp(2rem, 2.8vw, 2.8rem); line-height: 1; color: var(--ink); letter-spacing: -0.02em; display: inline-flex; align-items: baseline; } .stat-num-plus { font-size: 0.55em; margin-left: 2px; color: var(--ink-muted); } .stat-label { font-family: var(--font-body); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-muted); font-weight: 500; } .stat-divider { width: 1px; height: 36px; background: var(--line-strong); } .scroll-indicator { display: flex; align-items: center; gap: 14px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-muted); } .scroll-line { width: 56px; height: 1px; background: var(--line-strong); position: relative; overflow: hidden; } .scroll-line span { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--ink), transparent); animation: scrollLineAnim 2.4s infinite ease-in-out; } @keyframes scrollLineAnim { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } @media (max-width: 900px) { .hero-bottom { grid-template-columns: 1fr; gap: 28px; } .hero-meta { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: 16px; } } /* ========================================================================== Section eyebrow ========================================================================== */ .section-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-body); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 24px; } .section-eyebrow i { width: 28px; height: 1px; background: var(--ink); display: inline-block; } /* ========================================================================== Scrub Text Section ========================================================================== */ .scrub-text-section { min-height: 100vh; display: flex; align-items: center; padding: clamp(100px, 18vh, 180px) clamp(20px, 6vw, 100px); position: relative; } #scrub-text { font-family: var(--font-display); font-weight: 300; font-variation-settings: "opsz" 144, "SOFT" 30; font-size: clamp(1.6rem, 4vw, 4rem); line-height: 1.18; letter-spacing: -0.018em; text-align: left; text-wrap: balance; max-width: 24ch; } .scrub-word { color: var(--scrub-inactive, var(--ink-faint)); transition: color 0.25s ease; } .scrub-word.active { color: var(--ink); } [data-theme="light"] { --scrub-inactive: rgba(17, 17, 17, 0.38); } [data-theme="dark"] { --scrub-inactive: rgba(246, 245, 240, 0.22); } /* ========================================================================== Horizontal Scroll (Frentes) ========================================================================== */ .horizontal-section { position: relative; height: 100vh; background: var(--bg-elev-1); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .sticky-wrapper { position: relative; width: 100%; height: 100vh; overflow: hidden; display: flex; align-items: center; } .horizontal-container { display: flex; flex-flow: row nowrap; height: 72vh; min-height: 500px; padding-left: clamp(20px, 6vw, 80px); align-items: stretch; } .horizontal-panel { flex-shrink: 0; width: 38vw; min-width: 380px; max-width: 520px; height: 100%; padding-right: 32px; } .title-panel { width: 36vw; min-width: 360px; display: flex; flex-direction: column; justify-content: center; } .huge-title { font-family: var(--font-display); font-weight: 400; font-variation-settings: "opsz" 144, "SOFT" 30; font-size: clamp(2.4rem, 5.6vw, 6rem); line-height: 0.96; letter-spacing: -0.03em; margin-bottom: 20px; color: var(--ink); text-wrap: balance; } .title-panel p { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.55; max-width: 32ch; } .h-card { height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(28px, 3vw, 48px); position: relative; border-radius: var(--rad-lg); border: 1px solid var(--line); background: var(--bg-elev-2); box-shadow: var(--shadow-card); overflow: hidden; transition: transform 0.55s var(--ease-premium), border-color 0.4s ease, background 0.4s ease; } .h-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--line-bright), transparent); } .h-card:hover { transform: translateY(-8px); border-color: var(--line-strong); background: var(--bg-elev-3); } .h-card-num { font-family: var(--font-display); font-weight: 300; font-variation-settings: "opsz" 144, "SOFT" 50; font-size: clamp(2.6rem, 3.6vw, 3.8rem); line-height: 1; color: var(--ink-faint); letter-spacing: -0.02em; transition: color 0.4s ease; } .h-card:hover .h-card-num { color: var(--ink); } .h-card h3 { font-family: var(--font-display); font-weight: 400; font-variation-settings: "opsz" 144, "SOFT" 30; font-size: clamp(1.5rem, 1.9vw, 1.9rem); line-height: 1.1; letter-spacing: -0.018em; margin-block: 8px 14px; color: var(--ink); text-wrap: balance; } .h-card p { color: var(--ink-soft); line-height: 1.55; font-size: 0.98rem; margin-bottom: 24px; } .tag-list { display: flex; gap: 8px; list-style: none; flex-wrap: wrap; } .tag-list li { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.14em; padding: 6px 14px; border: 1px solid var(--line); border-radius: var(--rad-full); background: color-mix(in srgb, var(--ink) 4%, transparent); color: var(--ink-soft); font-weight: 500; } /* ========================================================================== Method (Stacking Cards) ========================================================================== */ .stack-section { padding: clamp(100px, 16vh, 160px) 0; position: relative; } .stack-header { text-align: center; margin-bottom: clamp(60px, 10vh, 110px); display: flex; flex-direction: column; align-items: center; padding-inline: 24px; } .section-title { font-family: var(--font-display); font-weight: 400; font-variation-settings: "opsz" 144, "SOFT" 30; font-size: clamp(2.4rem, 5.4vw, 5.8rem); line-height: 0.96; letter-spacing: -0.03em; margin-bottom: 20px; color: var(--ink); text-wrap: balance; } .stack-header p { color: var(--ink-soft); font-size: 1.18rem; line-height: 1.5; max-width: 44ch; } .cards-stack { position: relative; width: 90%; max-width: 1080px; margin: 0 auto; } .stack-card { height: 50vh; min-height: 380px; position: sticky; top: 22vh; margin-bottom: 7vh; transform-origin: top center; } #card-1 { z-index: 1; } #card-2 { z-index: 2; } #card-3 { z-index: 3; } .card-inner { background: var(--bg-elev-1); border: 1px solid var(--line); border-radius: var(--rad-lg); width: 100%; height: 100%; padding: clamp(32px, 4vw, 60px); display: flex; align-items: center; justify-content: space-between; box-shadow: var(--shadow-card); position: relative; overflow: hidden; gap: clamp(24px, 4vw, 60px); } .card-inner::before { content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, var(--line-bright), transparent); } .card-left { flex: 0.9; } .big-num { font-family: var(--font-display); font-weight: 300; font-variation-settings: "opsz" 144, "SOFT" 50; font-size: clamp(3.4rem, 6vw, 5.4rem); line-height: 1; color: var(--ink-faint); letter-spacing: -0.03em; display: block; margin-bottom: 8px; } .card-left h2 { font-family: var(--font-display); font-weight: 400; font-variation-settings: "opsz" 144, "SOFT" 30; font-size: clamp(1.8rem, 2.8vw, 2.6rem); line-height: 1.05; letter-spacing: -0.022em; color: var(--ink); } .card-right { flex: 1.1; } .card-right p { font-size: clamp(1rem, 1.2vw, 1.2rem); line-height: 1.55; color: var(--ink-soft); max-width: 50ch; } @media (max-width: 768px) { .card-inner { flex-direction: column; align-items: flex-start; gap: 20px; } .stack-card { height: auto; min-height: 0; top: 16vh; } } /* ========================================================================== Portfolio (Cases) ========================================================================== */ .portfolio-section { padding: clamp(100px, 16vh, 160px) clamp(20px, 6vw, 90px); position: relative; } .portfolio-header { margin-bottom: clamp(60px, 10vh, 110px); max-width: 1200px; margin-inline: auto; } .portfolio-item { display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; gap: clamp(40px, 6vw, 90px); margin-bottom: clamp(80px, 12vh, 160px); max-width: 1280px; margin-inline: auto; } .portfolio-item.reverse { grid-template-columns: 1fr 1.3fr; } .portfolio-item.reverse .p-image-wrapper { order: 2; } .portfolio-item.reverse .p-content { order: 1; } .p-image-wrapper { position: relative; height: clamp(360px, 60vh, 620px); overflow: hidden; border-radius: var(--rad-lg); border: 1px solid var(--line); background: var(--bg-elev-1); } .p-image-overlay { position: absolute; inset: 0; background: var(--bg-portfolio-overlay); z-index: 2; transition: background 0.6s var(--ease-premium); pointer-events: none; } .portfolio-item:hover .p-image-overlay { background: transparent; } .p-image { width: 100%; height: 125%; object-fit: cover; position: absolute; top: -12%; transition: transform 1.2s var(--ease-premium); } .portfolio-item:hover .p-image { transform: scale(1.04); } .p-content { display: flex; flex-direction: column; justify-content: center; gap: 18px; } .p-content h3 { font-family: var(--font-display); font-weight: 400; font-variation-settings: "opsz" 144, "SOFT" 30; font-size: clamp(2rem, 3.6vw, 3.4rem); line-height: 1; letter-spacing: -0.025em; color: var(--ink); text-wrap: balance; } .p-content p { font-size: 1.05rem; color: var(--ink-soft); line-height: 1.6; max-width: 52ch; } .p-link { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; margin-top: 8px; padding: 13px 26px; border: 1px solid var(--line-strong); border-radius: var(--rad-full); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; color: var(--ink); background: transparent; transition: background 0.4s var(--ease-premium), color 0.4s var(--ease-premium), border-color 0.4s var(--ease-premium), transform 0.4s var(--ease-premium); } .p-link:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); transform: translateY(-2px); } @media (max-width: 900px) { .portfolio-item, .portfolio-item.reverse { grid-template-columns: 1fr; } .portfolio-item.reverse .p-image-wrapper, .portfolio-item.reverse .p-content { order: initial; } } /* ========================================================================== Founders ========================================================================== */ .founders-section { padding: clamp(100px, 16vh, 160px) clamp(20px, 6vw, 90px); position: relative; border-top: 1px solid var(--line); } .founders-header { margin-bottom: clamp(60px, 9vh, 100px); max-width: 720px; } .founders-header p { font-size: 1.18rem; color: var(--ink-soft); line-height: 1.5; margin-top: 8px; } .founders-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(40px, 5vw, 80px); max-width: 1280px; margin-inline: auto; } .founder-card { position: relative; } .mt-offset { margin-top: clamp(40px, 12vh, 120px); } .f-image-wrapper { width: 100%; aspect-ratio: 3.2 / 4; overflow: hidden; position: relative; border-radius: var(--rad-lg); border: 1px solid var(--line); background: var(--bg-elev-1); } .f-image { width: 100%; height: 120%; object-fit: cover; position: absolute; top: -10%; filter: grayscale(0.15) contrast(1.02); transition: transform 1.2s var(--ease-premium), filter 1.2s var(--ease-premium); } .founder-card:hover .f-image { transform: scale(1.04); filter: grayscale(0) contrast(1.05); } .f-info { margin-top: 28px; } .f-info h3 { font-family: var(--font-display); font-weight: 400; font-variation-settings: "opsz" 144, "SOFT" 30; font-size: clamp(1.7rem, 2.4vw, 2.4rem); letter-spacing: -0.025em; margin-bottom: 6px; color: var(--ink); } .f-info p.f-role { font-family: var(--font-body); font-size: 0.78rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: 14px; font-weight: 500; } .f-info p.f-bio { font-family: var(--font-body); font-size: 1rem; color: var(--ink-soft); line-height: 1.6; max-width: 50ch; } @media (max-width: 800px) { .founders-grid { grid-template-columns: 1fr; } .mt-offset { margin-top: 0; } .f-image-wrapper { aspect-ratio: 1.1 / 1; } } /* ========================================================================== Footer ========================================================================== */ .big-footer { min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(100px, 14vh, 160px) clamp(20px, 6vw, 90px) 40px; background: var(--bg-elev-1); border-top: 1px solid var(--line); position: relative; } .footer-cta { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 24px; } .cta-title { font-family: var(--font-display); font-weight: 400; font-variation-settings: "opsz" 144, "SOFT" 30; font-size: clamp(2.6rem, 8vw, 8.5rem); line-height: 0.94; letter-spacing: -0.04em; margin-bottom: 8px; color: var(--ink); text-wrap: balance; } .cta-button { display: inline-flex; align-items: center; gap: 12px; padding: 20px 40px; border: 1px solid var(--ink); border-radius: var(--rad-full); background: var(--ink); color: var(--bg); font-family: var(--font-body); font-size: 1.02rem; font-weight: 500; letter-spacing: 0.01em; transition: background 0.4s var(--ease-premium), color 0.4s var(--ease-premium), transform 0.4s var(--ease-premium); } .cta-arrow { display: inline-block; transition: transform 0.4s var(--ease-premium); } .cta-button:hover { background: transparent; color: var(--ink); transform: translateY(-3px); } .cta-button:hover .cta-arrow { transform: translate(4px, -4px); } .cta-note { font-size: 0.78rem; color: var(--ink-muted); letter-spacing: 0.06em; } .footer-bottom { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px; border-top: 1px solid var(--line); padding-top: 32px; margin-top: 80px; font-size: 0.78rem; color: var(--ink-muted); letter-spacing: 0.04em; } .footer-logo-img { height: 44px; width: auto; filter: invert(var(--logo-invert)); opacity: 0.9; } .footer-links { display: flex; gap: 28px; justify-content: center; } .footer-links a { color: var(--ink-soft); transition: color 0.3s ease; position: relative; } .footer-links a::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: right; transition: transform 0.4s var(--ease-premium); } .footer-links a:hover { color: var(--ink); } .footer-links a:hover::after { transform: scaleX(1); transform-origin: left; } .footer-rights { text-align: right; display: flex; flex-direction: column; gap: 6px; } .footer-cnpj { font-size: 0.7rem; letter-spacing: 0.08em; color: var(--ink-faint); } @media (max-width: 720px) { .footer-bottom { grid-template-columns: 1fr; text-align: center; gap: 20px; } .footer-rights { text-align: center; } .footer-links { justify-content: center; } } /* ========================================================================== Native scroll-driven fallback (kept for browsers that support it) ========================================================================== */ @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) { .scrub-text-section { view-timeline: --scrub-tl block; } .stack-card { view-timeline: --card-tl block; } .stack-card:not(:last-child) .card-inner { animation: deckScaling linear both; animation-timeline: --card-tl; animation-range: exit 0% exit 100%; } @keyframes deckScaling { to { transform: scale(0.94) translateY(-20px); opacity: 0.7; } } } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 1024px) { .horizontal-panel { width: 60vw; min-width: 340px; } } @media (max-width: 600px) { .header-logo-img { height: 40px; } .hero-title { font-size: clamp(2.4rem, 11vw, 4rem); } } /* ========================================================================== Reduced Motion ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; } .parallax-img, .p-image { position: static !important; height: 100% !important; transform: none !important; } }