/* ============================================================ DeepClaw v2 — Shared Stylesheet ============================================================ */ /* ── Reset ── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } img { display: block; max-width: 100%; } /* ── Custom Properties ── Each page sets data-theme on to activate its palette. Default (no attribute) = company / teal. ──────────────────────────────────────────────────────────── */ :root { /* Company — teal (default) */ --primary: #4ECDC4; --primary-dark: #3BA8A0; --primary-rgb: 78, 205, 196; /* Backgrounds */ --bg-primary: #0D1B2A; --bg-secondary: #0f1f30; --bg-tertiary: #0f1f30; /* Text */ --text-primary: #FFFFFF; --text-secondary: #8899AA; --text-dim: rgba(255, 255, 255, 0.5); /* Derived / component tokens */ --glow: rgba(78, 205, 196, 0.15); --glow-strong: rgba(78, 205, 196, 0.25); --card-bg: rgba(78, 205, 196, 0.04); --card-border: rgba(78, 205, 196, 0.12); --card-hover-bg: rgba(78, 205, 196, 0.08); --card-hover-border: rgba(78, 205, 196, 0.25); --nav-bg: rgba(13, 27, 42, 0.7); --nav-active-bg: rgba(78, 205, 196, 0.12); --nav-active-border: rgba(78, 205, 196, 0.4); --nav-hover-bg: rgba(78, 205, 196, 0.08); /* Layout */ --container-max: 1100px; --section-padding: clamp(3rem, 6vh, 5rem) 2rem; --transition: 0.3s ease; --radius: 16px; } /* ── Tech (purple) ── */ [data-theme="tech"] { --primary: #7c6ff7; --primary-dark: #6358d4; --primary-rgb: 124, 111, 247; --bg-primary: #0a0a0f; --bg-secondary: #0f0f18; --bg-tertiary: #141420; --text-secondary: #8888a0; --text-dim: rgba(255, 255, 255, 0.4); --glow: rgba(124, 111, 247, 0.15); --glow-strong: rgba(124, 111, 247, 0.28); --card-bg: rgba(124, 111, 247, 0.04); --card-border: rgba(124, 111, 247, 0.12); --card-hover-bg: rgba(124, 111, 247, 0.08); --card-hover-border: rgba(124, 111, 247, 0.25); --nav-bg: rgba(10, 10, 15, 0.75); --nav-active-bg: rgba(124, 111, 247, 0.12); --nav-active-border: rgba(124, 111, 247, 0.4); --nav-hover-bg: rgba(124, 111, 247, 0.08); } /* ── Cases (emerald) ── */ [data-theme="cases"] { --primary: #10b981; --primary-dark: #059669; --primary-rgb: 16, 185, 129; --bg-primary: #0a0f0d; --bg-secondary: #0d1512; --bg-tertiary: #111a16; --text-secondary: #88a09a; --text-dim: rgba(255, 255, 255, 0.4); --glow: rgba(16, 185, 129, 0.15); --glow-strong: rgba(16, 185, 129, 0.28); --card-bg: rgba(16, 185, 129, 0.04); --card-border: rgba(16, 185, 129, 0.12); --card-hover-bg: rgba(16, 185, 129, 0.08); --card-hover-border: rgba(16, 185, 129, 0.25); --nav-bg: rgba(10, 15, 13, 0.75); --nav-active-bg: rgba(16, 185, 129, 0.12); --nav-active-border: rgba(16, 185, 129, 0.4); --nav-hover-bg: rgba(16, 185, 129, 0.08); } /* ── Media (YouTube red + black) ── */ [data-theme="media"] { --primary: #FF0000; --primary-dark: #cc0000; --primary-rgb: 255, 0, 0; --bg-primary: #000000; --bg-secondary: #0a0a0a; --bg-tertiary: #111111; --text-secondary: #909090; --text-dim: rgba(255, 255, 255, 0.4); --glow: rgba(255, 0, 0, 0.12); --glow-strong: rgba(255, 0, 0, 0.22); --card-bg: rgba(255, 0, 0, 0.04); --card-border: rgba(255, 0, 0, 0.12); --card-hover-bg: rgba(255, 0, 0, 0.08); --card-hover-border: rgba(255, 0, 0, 0.25); --nav-bg: rgba(0, 0, 0, 0.80); --nav-active-bg: rgba(255, 0, 0, 0.12); --nav-active-border: rgba(255, 0, 0, 0.4); --nav-hover-bg: rgba(255, 0, 0, 0.08); } /* ── Safety & Ethics (steel blue) ── */ [data-theme="safety"] { --primary: #3b82f6; --primary-dark: #2563eb; --primary-rgb: 59, 130, 246; --bg-primary: #040810; --bg-secondary: #081018; --bg-tertiary: #0c1620; --text-secondary: #7090b0; --text-dim: rgba(255, 255, 255, 0.4); --glow: rgba(59, 130, 246, 0.15); --glow-strong: rgba(59, 130, 246, 0.28); --card-bg: rgba(59, 130, 246, 0.04); --card-border: rgba(59, 130, 246, 0.12); --card-hover-bg: rgba(59, 130, 246, 0.08); --card-hover-border: rgba(59, 130, 246, 0.25); --nav-bg: rgba(4, 8, 16, 0.80); --nav-active-bg: rgba(59, 130, 246, 0.12); --nav-active-border: rgba(59, 130, 246, 0.4); --nav-hover-bg: rgba(59, 130, 246, 0.08); } /* ── Career (amber) ── */ [data-theme="career"] { --primary: #f59e0b; --primary-dark: #d97706; --primary-rgb: 245, 158, 11; --bg-primary: #0f0a00; --bg-secondary: #150e00; --bg-tertiary: #1a1200; --text-secondary: #a09070; --text-dim: rgba(255, 255, 255, 0.4); --glow: rgba(245, 158, 11, 0.15); --glow-strong: rgba(245, 158, 11, 0.28); --card-bg: rgba(245, 158, 11, 0.04); --card-border: rgba(245, 158, 11, 0.12); --card-hover-bg: rgba(245, 158, 11, 0.08); --card-hover-border: rgba(245, 158, 11, 0.25); --nav-bg: rgba(15, 10, 0, 0.75); --nav-active-bg: rgba(245, 158, 11, 0.12); --nav-active-border: rgba(245, 158, 11, 0.4); --nav-hover-bg: rgba(245, 158, 11, 0.08); } /* ============================================================ Typography ============================================================ */ body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background: var(--bg-primary); color: var(--text-primary); overflow-x: hidden; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 700; line-height: 1.15; color: var(--text-primary); } h1 { font-size: clamp(2.2rem, 5vw, 4.5rem); font-weight: 800; letter-spacing: -0.02em; } h2 { font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 800; } h3 { font-size: clamp(1.2rem, 2.5vw, 1.6rem); } h4 { font-size: 1.1rem; } p { font-family: 'Inter', sans-serif; color: var(--text-secondary); line-height: 1.7; max-width: 680px; } .accent { color: var(--primary); } a { color: inherit; text-decoration: none; transition: color 0.2s ease; } /* Eyebrow / label text */ .label { font-family: 'Space Grotesk', sans-serif; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--primary); } /* ============================================================ Navigation ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0.8rem 2rem; background: var(--nav-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255, 255, 255, 0.06); transition: background var(--transition), border-color var(--transition); } /* Solid background once scrolled */ .nav.scrolled { background: var(--bg-primary); border-bottom-color: rgba(255, 255, 255, 0.1); } /* Left logo */ .nav-logo-left { display: flex; align-items: center; justify-content: flex-start; } /* Right logo / hamburger area */ .nav-logo-right { display: flex; align-items: center; justify-content: flex-end; } .nav-logo-left img, .nav-logo-right img { height: 44px; width: auto; max-width: 160px; opacity: 0.85; transition: opacity 0.3s ease; } .nav-logo-left img:hover, .nav-logo-right img:hover { opacity: 1; } /* Centre nav links */ .nav-items { display: flex; align-items: center; gap: 0.5rem; } .nav-item { font-family: 'Space Grotesk', sans-serif; font-size: 0.85rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); background: none; border: 1px solid transparent; border-radius: 50px; padding: 0.55rem 1.5rem; cursor: pointer; transition: all var(--transition); text-decoration: none; white-space: nowrap; } .nav-item:hover { color: var(--text-primary); background: var(--nav-hover-bg); } .nav-item.active { color: var(--primary); background: var(--nav-active-bg); border-color: var(--nav-active-border); } .nav-divider { width: 1px; height: 20px; background: rgba(255, 255, 255, 0.1); margin: 0 0.5rem; } /* ── Hamburger (mobile) ── */ .nav-hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; background: none; border: none; cursor: pointer; padding: 4px; z-index: 101; } .nav-hamburger span { display: block; height: 2px; width: 100%; background: var(--text-secondary); border-radius: 2px; transition: all 0.3s ease; } .nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-hamburger.open span:nth-child(2) { opacity: 0; } .nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ── Mobile drawer ── */ .nav-drawer { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(10, 15, 20, 0.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); z-index: 99; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; } .nav-drawer.open { display: flex; } .nav-drawer .nav-item { font-size: 1.3rem; padding: 1rem 2rem; letter-spacing: 0.12em; } .nav-drawer .nav-divider { display: none; } /* ============================================================ Hero Section ============================================================ */ .hero { position: relative; width: 100%; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; overflow: hidden; background: var(--bg-primary); padding-top: 80px; } .hero-image-wrap { position: relative; z-index: 2; margin-bottom: 2rem; } .hero-center-img { width: 100%; max-width: 960px; height: auto; border-radius: 20px; mask-image: radial-gradient(ellipse 75% 68% at center, black 30%, transparent 65%); -webkit-mask-image: radial-gradient(ellipse 75% 68% at center, black 30%, transparent 65%); } .hero-content { position: relative; z-index: 2; max-width: 800px; padding: 0 2rem; } .hero-title { font-family: 'Space Grotesk', sans-serif; font-size: clamp(2rem, 6vw, 4.5rem); font-weight: 800; color: var(--text-primary); line-height: 1.05; margin-bottom: 0.5rem; letter-spacing: -0.02em; } .hero-sub { font-family: 'Space Grotesk', sans-serif; font-size: clamp(0.95rem, 2vw, 1.15rem); color: var(--text-secondary); font-weight: 400; margin-bottom: 2rem; letter-spacing: 0.03em; max-width: 700px; margin-left: auto; margin-right: auto; line-height: 1.6; } .hero-tagline { font-size: 1rem; color: var(--text-dim); letter-spacing: 0.08em; } /* ── Spotlight / glow (optional hero backdrop) ── */ .spotlight { position: absolute; width: 900px; height: 900px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--primary-rgb), 0.20) 0%, rgba(var(--primary-rgb), 0.06) 40%, transparent 70%); top: 50%; left: 50%; transform: translate(-50%, -55%); pointer-events: none; animation: spotlightPulse 14s ease-in-out infinite; } .spotlight-ring { position: absolute; width: 450px; height: 450px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--primary-rgb), 0.28) 0%, rgba(var(--primary-rgb), 0.10) 50%, transparent 70%); top: 50%; left: 50%; transform: translate(-50%, -55%); pointer-events: none; animation: spotlightPulse 18s ease-in-out infinite reverse; } .spotlight-halo { position: absolute; width: 1200px; height: 1200px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--primary-rgb), 0.06) 0%, transparent 60%); top: 50%; left: 50%; transform: translate(-50%, -55%); pointer-events: none; animation: spotlightPulse 22s ease-in-out infinite; } @keyframes spotlightPulse { 0%, 100% { opacity: 0.6; transform: translate(-50%, -55%) scale(1); } 50% { opacity: 0.9; transform: translate(-50%, -55%) scale(1.06); } } /* ── Section spotlights — large, overlapping content ── */ .section-spot { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; } /* Top-left — large, drifts right and down */ .section-spot--tl { width: 900px; height: 900px; top: -20%; left: 5%; background: radial-gradient(circle, rgba(var(--primary-rgb), 0.22) 0%, rgba(var(--primary-rgb), 0.08) 45%, transparent 70%); animation: spotDrift1 18s ease-in-out infinite; } /* Center-right — overlaps right side of content */ .section-spot--cr { width: 800px; height: 800px; top: 10%; right: 5%; background: radial-gradient(circle, rgba(var(--primary-rgb), 0.18) 0%, rgba(var(--primary-rgb), 0.06) 40%, transparent 65%); animation: spotDrift2 22s ease-in-out infinite; } /* Bottom-center — wide ellipse spanning content */ .section-spot--bc { width: 1100px; height: 700px; bottom: -10%; left: 50%; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(var(--primary-rgb), 0.20) 0%, rgba(var(--primary-rgb), 0.07) 40%, transparent 68%); animation: spotDrift3 25s ease-in-out infinite; } /* Top-right — medium, overlaps heading area */ .section-spot--tr { width: 700px; height: 700px; top: -5%; right: 10%; background: radial-gradient(circle, rgba(var(--primary-rgb), 0.24) 0%, rgba(var(--primary-rgb), 0.08) 40%, transparent 65%); animation: spotDrift4 20s ease-in-out infinite; } @keyframes spotDrift1 { 0% { opacity: 0.7; transform: translate(0, 0) scale(1); } 33% { opacity: 1; transform: translate(40px, 30px) scale(1.05); } 66% { opacity: 0.8; transform: translate(-20px, 15px) scale(1.02); } 100% { opacity: 0.7; transform: translate(0, 0) scale(1); } } @keyframes spotDrift2 { 0% { opacity: 0.6; transform: translate(0, 0) scale(1); } 25% { opacity: 0.9; transform: translate(-30px, 20px) scale(1.06); } 50% { opacity: 0.7; transform: translate(-10px, -15px) scale(0.98); } 75% { opacity: 1; transform: translate(20px, 10px) scale(1.04); } 100% { opacity: 0.6; transform: translate(0, 0) scale(1); } } @keyframes spotDrift3 { 0% { opacity: 0.6; transform: translateX(-50%) scale(1); } 40% { opacity: 0.9; transform: translateX(-47%) scale(1.04); } 70% { opacity: 0.7; transform: translateX(-52%) scale(1.02); } 100% { opacity: 0.6; transform: translateX(-50%) scale(1); } } @keyframes spotDrift4 { 0% { opacity: 0.7; transform: translate(0, 0) scale(1); } 30% { opacity: 1; transform: translate(-25px, 35px) scale(1.07); } 60% { opacity: 0.8; transform: translate(15px, -10px) scale(1.01); } 100% { opacity: 0.7; transform: translate(0, 0) scale(1); } } /* ── Waves (hero bottom + section dividers) ── */ .waves-container { position: absolute; bottom: 0; left: 0; width: 100%; height: 200px; pointer-events: none; opacity: 0.08; z-index: 1; } .wave { position: absolute; bottom: 0; left: 0; width: 200%; height: 100%; } .wave-1 { animation: waveFlow1 12s linear infinite; } .wave-2 { animation: waveFlow2 16s linear infinite; } .wave-3 { animation: waveFlow3 20s linear infinite; } .wave-path-1 { fill: var(--primary); } .wave-path-2 { fill: var(--primary-dark, var(--primary)); opacity: 0.6; } @keyframes waveFlow1 { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes waveFlow2 { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes waveFlow3 { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } } /* Section divider waves (top/bottom) */ .waves-top, .waves-bottom { position: absolute; left: 0; width: 100%; height: 160px; pointer-events: none; opacity: 0.08; z-index: 1; } .waves-top { top: 0; transform: rotate(180deg); } .waves-bottom { bottom: 0; } .waves-top .wave, .waves-bottom .wave { width: 200%; height: 100%; } .wave-slow-1 { animation: waveFlow1 25s linear infinite; } .wave-slow-2 { animation: waveFlow3 30s linear infinite; } /* ============================================================ Sections — Base Patterns ============================================================ */ .section { position: relative; padding: var(--section-padding); overflow: hidden; } .section--primary { background: var(--bg-primary); } .section--secondary { background: var(--bg-secondary); } .section--tertiary { background: var(--bg-tertiary); } .section-inner { position: relative; z-index: 2; max-width: var(--container-max); margin: 0 auto; } /* Section header */ .section-header { text-align: center; margin-bottom: clamp(2rem, 4vh, 3.5rem); } .section-eyebrow { font-family: 'Space Grotesk', sans-serif; font-size: 0.85rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--primary); margin-bottom: 1rem; } .section-title { font-family: 'Space Grotesk', sans-serif; font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 800; color: var(--text-primary); line-height: 1.15; margin-bottom: 1rem; } .section-subtitle { font-family: 'Inter', sans-serif; font-size: 1.1rem; color: var(--text-secondary); max-width: 550px; margin: 0 auto; line-height: 1.6; } /* Decorative section glow */ .section-glow { position: absolute; width: 800px; height: 500px; background: radial-gradient(ellipse, rgba(var(--primary-rgb), 0.14) 0%, transparent 70%); top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } /* ============================================================ Cards ============================================================ */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; max-width: var(--container-max); margin: 0 auto; } .card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 2rem 1.5rem; text-align: left; transition: all var(--transition); } .card:hover { background: var(--card-hover-bg); border-color: var(--card-hover-border); transform: translateY(-4px); } .card-icon { font-size: 2.2rem; margin-bottom: 1rem; } .card-icon-img { width: 100%; height: 160px; object-fit: cover; border-radius: 10px; margin-bottom: 1.2rem; opacity: 0.85; transition: opacity 0.3s ease; } .card:hover .card-icon-img { opacity: 1; } .card-title { font-family: 'Space Grotesk', sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.6rem; } .card-text { font-family: 'Inter', sans-serif; font-size: 0.9rem; color: var(--text-secondary); line-height: 1.6; } /* ============================================================ Buttons ============================================================ */ .btn { display: inline-block; font-family: 'Space Grotesk', sans-serif; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.05em; color: var(--bg-primary); background: var(--primary); padding: 0.7rem 2rem; border-radius: 50px; text-decoration: none; cursor: pointer; border: none; transition: all var(--transition); } .btn:hover { opacity: 0.85; transform: scale(1.03); } .btn--outline { background: transparent; color: var(--primary); border: 1px solid var(--primary); } .btn--outline:hover { background: rgba(var(--primary-rgb), 0.1); opacity: 1; } /* ============================================================ Footer ============================================================ */ .footer { position: relative; background: rgba(0, 0, 0, 0.4); border-top: 1px solid rgba(255, 255, 255, 0.06); padding: 3rem 2rem 2rem; } .footer-inner { max-width: 900px; margin: 0 auto; } .footer-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem; margin-bottom: 2.5rem; text-align: left; } .footer-logo { height: 36px; width: auto; opacity: 0.85; margin-bottom: 1rem; display: block; } .footer-tagline { font-size: 0.8rem; color: var(--text-dim); line-height: 1.6; } .footer-heading { font-family: 'Space Grotesk', sans-serif; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--primary); margin-bottom: 0.8rem; } .footer-links { font-size: 0.85rem; line-height: 2; } .footer-link { color: var(--text-secondary); text-decoration: none; display: block; transition: color 0.2s ease; } .footer-link:hover { color: var(--primary); } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.06); padding-top: 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; } .footer-copy { font-size: 0.75rem; color: var(--text-dim); } /* ============================================================ Animations — Fade-in on Scroll ============================================================ */ .fade-in { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .fade-in.visible { opacity: 1; transform: translateY(0); } /* Stagger children inside a group */ .fade-in-group > .fade-in:nth-child(1) { transition-delay: 0s; } .fade-in-group > .fade-in:nth-child(2) { transition-delay: 0.1s; } .fade-in-group > .fade-in:nth-child(3) { transition-delay: 0.15s; } .fade-in-group > .fade-in:nth-child(4) { transition-delay: 0.2s; } .fade-in-group > .fade-in:nth-child(5) { transition-delay: 0.25s; } .fade-in-group > .fade-in:nth-child(6) { transition-delay: 0.3s; } /* Also support the .reveal alias used in some pages */ .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } /* ============================================================ Utility Classes ============================================================ */ .text-center { text-align: center; } .text-left { text-align: left; } .mx-auto { margin-left: auto; margin-right: auto; } .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 0.5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; } .mb-4 { margin-bottom: 2rem; } .mb-6 { margin-bottom: 3rem; } .mb-8 { margin-bottom: 4rem; } .max-w-narrow { max-width: 680px; } .max-w-wide { max-width: var(--container-max); } /* ============================================================ Responsive ============================================================ */ /* Tablet and below */ @media (max-width: 900px) { /* Switch nav to hamburger layout */ .nav-items { display: none; } .nav-hamburger { display: flex; } .nav { display: flex; justify-content: space-between; padding: 0.6rem 1.2rem; } .nav-logo-left img, .nav-logo-right img { height: 36px; max-width: 120px; } /* Hero adjustments */ .hero { padding-top: 80px; justify-content: flex-start; padding-bottom: 3rem; } .hero-center-img { max-width: 92vw; } /* Reduce spotlight sizes */ .spotlight { width: 400px; height: 400px; } .spotlight-ring { width: 300px; height: 300px; } .spotlight-halo { width: 600px; height: 600px; } /* Tighter section padding */ .section { padding: clamp(2.5rem, 5vh, 4rem) 1.5rem; } } /* Small tablets / large phones */ @media (max-width: 768px) { .card-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } .footer-grid { grid-template-columns: 1fr; text-align: center; } .footer-bottom { flex-direction: column; text-align: center; } } /* Phones */ @media (max-width: 480px) { .hero-center-img { max-width: 98vw; } .section { padding: clamp(2rem, 5vh, 3rem) 1rem; } .section-title { font-size: clamp(1.5rem, 6vw, 2rem); } }