/* ============================================ AntonioMurrieta.com — Shared Brand Styles ============================================ */ /* Google Fonts — loaded via tags in each HTML for performance. Do NOT use @import here — it creates a render-blocking waterfall. */ /* === Palette === */ :root { --ink: #111111; --carbon: #2A2A2A; --stone: #6B6560; --bone: #E8E4DD; --paper: #F5F3EE; --linen: #FAF8F5; --roble: #8B7355; --roble-light: #A8916F; --roble-dim: rgba(139, 115, 85, 0.08); --roble-border: rgba(139, 115, 85, 0.2); /* Typography */ --serif: 'Newsreader', Georgia, serif; --sans: 'Instrument Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; --mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace; /* Easing */ --ease-snap: cubic-bezier(0.25, 1, 0.5, 1); --ease-reveal: cubic-bezier(0.61, 1, 0.88, 1); --ease-overlay: cubic-bezier(0.22, 1, 0.36, 1); --ease-gentle: cubic-bezier(0.45, 0.05, 0.55, 0.95); /* Layout */ --max-width: 1200px; --content-width: 680px; } /* === Reset === */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--sans); color: var(--ink); background: var(--linen); line-height: 1.6; font-size: 16px; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ::selection { background: var(--roble-dim); color: var(--ink); } :focus-visible { outline: 2px solid var(--roble); outline-offset: 4px; } /* === Navigation === */ nav { position: fixed; top: 0; width: 100%; background: rgba(250, 248, 245, 0.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); z-index: 1000; padding: 24px 40px; transition: all 0.3s var(--ease-snap); } nav.scrolled { padding: 16px 40px; border-bottom: 1px solid var(--bone); } .nav-container { max-width: var(--max-width); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; } .logo { font-family: var(--sans); font-size: 16px; font-weight: 600; letter-spacing: 0.5px; color: var(--ink); text-decoration: none; transition: color 0.2s var(--ease-snap); position: relative; white-space: nowrap; } .logo::after { content: '.'; color: var(--roble); font-weight: 700; position: absolute; } .logo:hover { color: var(--roble); } .nav-links { display: flex; gap: 32px; list-style: none; } .nav-links a { font-family: var(--sans); color: var(--stone); text-decoration: none; font-size: 13px; font-weight: 500; letter-spacing: 0.5px; transition: color 0.2s var(--ease-snap); position: relative; text-transform: uppercase; } .nav-links a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--roble); transition: width 0.3s var(--ease-snap); } .nav-links a:hover { color: var(--roble); } .nav-links a:hover::after, .nav-links a.active::after { width: 100%; } .nav-links a.active { color: var(--ink); font-weight: 600; border-bottom: 2px solid var(--roble); padding-bottom: 2px; } /* === Mobile Menu === */ .menu-toggle { display: none; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; padding: 5px; } .menu-toggle span { width: 25px; height: 2px; background: var(--ink); transition: all 0.3s var(--ease-snap); } .menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .menu-toggle.active span:nth-child(2) { opacity: 0; } .menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* === Footer === */ footer { padding: 60px 40px 40px; background: var(--ink); color: var(--paper); text-align: center; } .footer-content { max-width: var(--max-width); margin: 0 auto; } .footer-brand { font-family: var(--sans); font-size: 16px; font-weight: 500; color: var(--paper); margin-bottom: 12px; } .footer-studio { margin-bottom: 20px; } .footer-studio a { font-family: var(--sans); font-size: 13px; color: var(--stone); text-decoration: none; transition: color 0.2s var(--ease-snap); } .footer-studio a:hover { color: var(--roble-light); } .footer-links { display: flex; gap: 30px; justify-content: center; margin-bottom: 30px; flex-wrap: wrap; } .footer-links a { font-family: var(--sans); color: var(--stone); text-decoration: none; font-size: 14px; transition: color 0.2s var(--ease-snap); } .footer-links a:hover { color: var(--roble-light); } .footer-copyright { font-family: var(--sans); font-size: 13px; color: rgba(245, 243, 238, 0.25); } /* === Scroll Reveal === */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.5s var(--ease-reveal), transform 0.5s var(--ease-reveal); } .revealed { opacity: 1; transform: translateY(0); } /* === Section Labels === */ .section-label { font-family: var(--sans); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 3px; color: var(--roble); text-align: center; margin-bottom: 48px; } /* === Scroll Progress Bar === */ .scroll-progress { position: fixed; top: 0; left: 0; height: 1px; background: var(--roble); z-index: 1001; width: 0%; opacity: 0; transition: opacity 0.4s var(--ease-reveal); pointer-events: none; } .scroll-progress.visible { opacity: 1; } /* === Work Masonry Grid === */ .work-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 100px; gap: 12px; max-width: 1000px; margin: 0 auto; } .work-grid-item { border-radius: 8px; background-size: cover; background-position: center; position: relative; overflow: hidden; display: block; text-decoration: none; transition: transform 0.3s var(--ease-snap), box-shadow 0.3s var(--ease-snap); } .work-grid-item:hover { transform: scale(1.02); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); } .work-grid-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 16px; background: linear-gradient(180deg, transparent 0%, rgba(17, 17, 17, 0.6) 100%); display: flex; flex-direction: column; justify-content: flex-end; height: 100%; } .work-grid-category { font-family: var(--sans); font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; color: var(--roble-light); margin-bottom: 4px; } .work-grid-title { font-family: var(--serif); font-size: 18px; font-weight: 400; color: var(--paper); } .work-grid-large { grid-column: span 2; grid-row: span 2; } .work-grid-tall { grid-column: span 1; grid-row: span 2; } .work-grid-wide { grid-column: span 2; grid-row: span 1; } .work-grid-item:not(.work-grid-large):not(.work-grid-wide) .work-grid-title { font-size: 14px; } .work-grid-item:not(.work-grid-large):not(.work-grid-wide) .work-grid-category { display: none; } /* === Interactive Hero Letters === */ .hero-letter { display: inline-block; will-change: transform; transition: transform 0.4s var(--ease-gentle), text-shadow 0.4s var(--ease-gentle); } .hero-letter.active { transition: transform 60ms ease-out, text-shadow 60ms ease-out; animation: none; transform: rotate(0deg) translateY(0); } .hero-letter-roble { color: var(--roble); } .hero-letter-roble.active { text-shadow: 0 0 20px rgba(139, 115, 85, 0.15); } @keyframes letterIdle { 0% { transform: rotate(calc(var(--idle-rot) * -1)) translateY(calc(var(--idle-y) * -1)); } 100% { transform: rotate(var(--idle-rot)) translateY(var(--idle-y)); } } .hero-letter.idle { animation: letterIdle var(--idle-duration) ease-in-out infinite alternate; } /* === Dot Grid (Lab) === */ .dot-grid-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; pointer-events: none; opacity: 0.13; } /* === Reveal Stagger === */ .reveal-stagger > .reveal:nth-child(1) { transition-delay: 0ms; } .reveal-stagger > .reveal:nth-child(2) { transition-delay: 100ms; } .reveal-stagger > .reveal:nth-child(3) { transition-delay: 200ms; } .reveal-stagger > .reveal:nth-child(4) { transition-delay: 300ms; } .reveal-stagger > .reveal:nth-child(5) { transition-delay: 400ms; } .reveal-stagger > .reveal:nth-child(6) { transition-delay: 500ms; } .reveal-stagger > .reveal:nth-child(7) { transition-delay: 600ms; } .reveal-stagger > .reveal:nth-child(8) { transition-delay: 700ms; } /* === Reduced Motion === */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .hero-letter { animation: none !important; transform: none !important; } .dot-grid-container circle { animation: none !important; } } @media (prefers-reduced-motion: no-preference) { @keyframes dotPulse { 0% { opacity: 0.2; } 50% { opacity: 0.8; } 100% { opacity: 0.2; } } .dot-grid-container circle { animation: dotPulse var(--dot-duration) steps(1, end) infinite; } } /* === Mobile Responsive (shared) === */ @media (max-width: 768px) { nav { padding: 15px 20px; } .nav-links { position: fixed; top: 0; right: -100%; width: 100%; height: 100vh; background: var(--linen); flex-direction: column; align-items: center; justify-content: center; gap: 30px; transition: right 0.3s var(--ease-overlay); z-index: 1000; } .nav-links.active { right: 0; } .menu-toggle { display: flex; z-index: 1001; } .work-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; } .work-grid-large, .work-grid-tall, .work-grid-wide { grid-column: span 1; grid-row: span 1; } }