/* ============================================================ milo. — portfolio site ============================================================ */ :root{ --blue: #0326ED; --bg: #F0F0F1; --bg-alt: #E5E5E7; --ink: #1A1818; --ink-soft: #4A4747; --muted: #6B6767; --white: #FFFFFF; --radius-lg: 28px; --radius-md: 18px; --radius-sm: 10px; --container: 1360px; --edge: clamp(24px, 5vw, 80px); --font-display: "reross-quadratic", sans-serif; --font-body: "district-pro", sans-serif; --ease: cubic-bezier(.16,.84,.44,1); } *, *::before, *::after{ box-sizing: border-box; } html{ background: var(--bg); scroll-behavior: auto; overflow-x: hidden; } body{ margin:0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; } p{ text-wrap: pretty; } .body-lg{ text-wrap: balance; } h1, h2, h3{ text-wrap: balance; } img{ max-width:100%; display:block; } a{ color: inherit; text-decoration:none; } ul{ list-style:none; margin:0; padding:0; } h1,h2,h3,p{ margin:0; } .dot{ color: var(--blue); } .accent{ color: var(--blue); } .accent-text{ color: var(--blue); font-weight: 700; } .eyebrow{ font-family: var(--font-body); font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--blue); font-weight: 700; margin-bottom: 18px; } .section-inner{ max-width: var(--container); margin: 0 auto; padding: 0 var(--edge); } h2{ font-family: var(--font-display); font-weight: 400; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.05; letter-spacing: -0.01em; } .body-lg{ font-size: clamp(1rem, 1.4vw, 1.2rem); color: var(--ink-soft); max-width: 620px; margin-top: 22px; font-weight: 400; } .muted{ color: var(--muted); } .skip-link{ position: absolute; top: -80px; left: 12px; z-index: 1000; background: var(--blue); color: #fff; padding: 12px 20px; border-radius: 8px; font-size: .9rem; font-weight: 700; transition: top .2s ease; } .skip-link:focus{ top: 12px; } /* grain overlay */ .grain{ position: fixed; inset:0; z-index: 999; pointer-events:none; opacity: .035; mix-blend-mode: multiply; transition: opacity .2s ease; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 220px 220px; } /* custom cursor: JS-positioned dot, mouse/trackpad devices only. Stays opacity:0 (and the native cursor stays visible) until main.js confirms hover capability and adds .has-custom-cursor to — a fail-safe so a JS error never leaves the visitor with no cursor. */ .cursor-dot{ position: fixed; top:0; left:0; width:10px; height:10px; border-radius:50%; /* lighter than --muted, but not --white — the page background is already near-white (#F0F0F1), so a pure white dot would nearly disappear against it */ background: #A3A0A0; pointer-events:none; z-index:2000; opacity:0; will-change: transform; transition: opacity .2s ease, background-color .25s ease, scale .25s ease; } .cursor-dot.is-visible{ opacity:1; } .cursor-dot.is-active{ background: var(--blue); scale:1.6; } html.has-custom-cursor, html.has-custom-cursor *{ cursor:none !important; } /* magnetic hover: JS translates these toward the cursor (see main.js) */ .magnetic{ will-change: transform; } /* ============================================================ NAV ============================================================ */ .site-nav{ position: fixed; top:0; left:0; right:0; z-index: 500; } .nav-hotzone{ position: absolute; top:0; left:0; right:0; height: 110px; } .nav-bar{ position: absolute; top:0; left:0; right:0; display:flex; align-items:center; justify-content:flex-start; gap: 32px; padding: 18px var(--edge); background: rgba(20,18,18,.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transform: translateY(-115%); opacity: 0; transition: transform .55s var(--ease), opacity .4s ease; pointer-events: none; border-radius: 0 0 var(--radius-md) var(--radius-md); } .site-nav:hover .nav-bar, .site-nav.nav-open .nav-bar, .site-nav:focus-within .nav-bar{ transform: translateY(0); opacity: 1; pointer-events: auto; } .nav-mark{ display:block; flex-shrink:0; } .nav-mark img{ height: 34px; width:auto; display:block; filter: brightness(0) invert(1); opacity: .9; } .nav-links{ display:flex; align-items:center; gap: clamp(14px, 2vw, 30px); flex-wrap: wrap; } .nav-links a{ color: rgba(255,255,255,.72); font-size: .92rem; font-weight: 400; letter-spacing: .01em; position: relative; padding: 4px 0; white-space: nowrap; } .nav-links a span{ position:relative; } .nav-links a span::after{ content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); } .nav-links a:hover{ color: #fff; } .nav-links a:hover span::after{ transform: scaleX(1); } .nav-social{ display:flex; align-items:center; gap: 18px; flex-shrink: 0; margin-left: auto; } .nav-social a{ color: rgba(255,255,255,.8); display:flex; } .nav-social a:hover{ color: var(--blue); } .nav-contact-pill{ display:flex; align-items:center; gap:8px; background: var(--blue); color: #fff !important; padding: 9px 18px; border-radius: 999px; font-size: .88rem; font-weight: 700; transition: background .3s; } .nav-contact-pill:hover{ background:#3149ff; } .nav-toggle{ display:none; position: fixed; top: 18px; right: var(--edge); z-index: 600; width: 42px; height: 42px; border-radius: 50%; border: none; background: rgba(26,18,18,.55); cursor:pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); flex-direction: column; align-items:center; justify-content:center; gap:5px; transition: background .2s ease; } .nav-toggle:hover, .nav-open .nav-toggle{ background: rgba(26,18,18,.85); } .nav-toggle span{ width:16px; height:1.5px; background:#fff; transition: transform .3s, opacity .3s; } .nav-open .nav-toggle span:nth-child(1){ transform: translateY(3.5px) rotate(45deg); } .nav-open .nav-toggle span:nth-child(2){ transform: translateY(-3.5px) rotate(-45deg); } /* ============================================================ INTRO ============================================================ */ .intro{ height: 100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; position: relative; background: var(--bg); } .intro-mark{ line-height: 0; } .intro-mark .line{ display:inline-block; } .intro-mark img{ width: clamp(300px, 40vw, 780px); height: auto; display:block; } .intro-sub{ margin-top: 22px; font-size: clamp(.9rem, 1.4vw, 1.1rem); color: var(--ink-soft); letter-spacing: .04em; text-transform: uppercase; font-weight: 400; } .scroll-cue{ position:absolute; bottom: 42px; left:50%; transform: translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:10px; } .scroll-cue span{ width:1px; height: 46px; background: linear-gradient(var(--ink), transparent); } .scroll-cue p{ font-size: .72rem; text-transform: uppercase; letter-spacing:.2em; color: var(--muted); } @media (hover: hover) and (pointer: fine){ /* !important beats the inline opacity the intro GSAP tween sets on load */ .scroll-cue{ opacity:0 !important; transition: opacity .4s ease; } .scroll-cue:hover{ opacity:1 !important; } } /* ============================================================ ABOUT ============================================================ */ .about{ padding: clamp(90px,14vw,160px) 0; } .about-grid{ display:grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(40px,6vw,100px); align-items:center; } .about-photo img{ border-radius: var(--radius-lg); width:100%; aspect-ratio: 4/5; object-fit:cover; box-shadow: 0 30px 60px -20px rgba(0,0,0,.25); } .about-copy h2{ margin-top:2px; } .hi-im-milo{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; } .inline-logo{ height: 1em; width:auto; display:block; transform: translateY(0.04em); } /* ============================================================ EDUCATION ============================================================ */ .education{ padding: clamp(70px,10vw,120px) 0; background: linear-gradient(to bottom, var(--bg) 0, var(--bg-alt) 200px, var(--bg-alt) calc(100% - 200px), var(--bg) 100%); } .education-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(40px,6vw,90px); align-items:center; } .edu-block{ margin-top: 34px; } .edu-block:first-of-type{ margin-top: 26px; } .edu-block h3{ font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; margin-bottom: 8px; } .edu-block p{ color: var(--ink-soft); font-weight:400; margin-top:2px; } .skills-col .edu-block:first-child{ margin-top: 0; } .skill-list li{ position:relative; padding-left: 20px; margin-top: 10px; color: var(--ink-soft); font-weight:400; } .skill-list li::before{ content:""; position:absolute; left:0; top:9px; width:6px; height:6px; border-radius:50%; background: var(--blue); } .software-icons{ display:flex; flex-wrap:wrap; gap:20px 32px; margin-top:14px; } .sw-item{ display:flex; align-items:flex-end; gap:13px; } .sw-icon{ width:58px; height:58px; border-radius: 12px; background: var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-weight:400; font-size:1.5rem; flex-shrink:0; } .sw-bar{ width:13px; height:58px; border: 1.5px solid var(--blue); border-radius: 4px; display:flex; align-items:flex-end; overflow:hidden; flex-shrink:0; } .sw-fill{ display:block; width:100%; background: var(--blue); } /* ============================================================ WORK DIVIDER ============================================================ */ .work-divider{ height: 100vh; height: 100svh; display:flex; align-items:center; justify-content:center; position: relative; overflow: hidden; background: #000; } .wd-slide{ position:absolute; inset:-8%; width:116%; max-width:116%; height:116%; object-fit:cover; filter: blur(9px) grayscale(1); opacity:0; animation: wdFade 16s infinite; } .wd-slide:nth-child(1){ animation-delay: 0s; } .wd-slide:nth-child(2){ animation-delay: -4s; } .wd-slide:nth-child(3){ animation-delay: -8s; } .wd-slide:nth-child(4){ animation-delay: -12s; } @keyframes wdFade{ 0% { opacity:0; } 7% { opacity:1; } 23% { opacity:1; } 31% { opacity:0; } 100% { opacity:0; } } .wd-overlay{ position:absolute; inset:0; background: rgba(8,8,8,.78); } .work-divider h2{ position:relative; z-index:2; font-size: clamp(3.5rem, 12vw, 8.5rem); color: rgba(255,255,255,.95); } /* ============================================================ PROJECTS ============================================================ */ .project{ padding: clamp(60px,9vw,110px) 0 clamp(90px,12vw,140px); } .project.alt{ background: linear-gradient(to bottom, var(--bg) 0, var(--bg-alt) 200px, var(--bg-alt) calc(100% - 200px), var(--bg) 100%); } .project-title{ margin-bottom: clamp(30px,4.5vw,48px); } .project-head{ margin-bottom: clamp(44px,6vw,70px); } .project-meta{ margin-top: 14px; font-size:.85rem; color: var(--muted); text-transform: uppercase; letter-spacing:.08em; } /* Hero image that leads each project, before the description */ .project-hero{ max-width: var(--container); margin: 0 auto clamp(44px,6vw,70px); padding: 0 var(--edge); } .project-hero .hero-frame{ border-radius: var(--radius-lg); overflow:hidden; box-shadow: 0 30px 70px -30px rgba(0,0,0,.3); } .project-hero img{ width:100%; display:block; transition: transform .7s var(--ease); } .project-hero .hero-frame:hover img{ transform: scale(1.03); } /* Big variant: full-scale statement image for image-rich projects */ .project-hero.hero-big .hero-frame{ height: clamp(360px, 62vw, 760px); } .project-hero.hero-big .hero-frame img{ height:100%; object-fit:cover; } /* Portrait variant: tall cover art shown in full, contained on a soft card */ .project-hero.hero-portrait .hero-frame{ height: clamp(420px, 70vw, 820px); display:flex; align-items:center; justify-content:center; background: var(--bg-alt); } .project.alt .project-hero.hero-portrait .hero-frame{ background: var(--bg); } .project-hero.hero-portrait .hero-frame img{ height:100%; width:100%; object-fit:cover; } /* Transparent variant: mockup floats on the section background, no card — drop shadow only (matches the vinyl mockup treatment) */ .project-hero.hero-transparent{ max-width: 1500px; padding: 0 clamp(16px,3vw,40px); } .project-hero.hero-transparent .hero-frame{ background:none; box-shadow:none; border-radius:0; overflow:visible; display:flex; align-items:center; justify-content:center; } .project-hero.hero-transparent .hero-frame img{ width:85%; height:auto; object-fit:contain; filter: drop-shadow(0 18px 35px rgba(0,0,0,.3)); transform: translateZ(0); } /* Standard variant: moderate lead image for smaller projects */ .project-hero.hero-standard .hero-frame{ height: clamp(280px, 40vw, 480px); } .project-hero.hero-standard .hero-frame img{ height:100%; object-fit:cover; } .project-hero.hero-standard.hero-contain .hero-frame{ height: clamp(320px, 44vw, 560px); display:flex; align-items:center; justify-content:center; } .project-hero.hero-standard.hero-contain .hero-frame img{ height:100%; width:100%; object-fit:cover; } /* Landscape variant: frame locked to the image's own ratio so it's never cropped further */ .project-hero.hero-landscape .hero-frame{ aspect-ratio: 2600 / 1722; height:auto; } .project-hero.hero-landscape .hero-frame img{ width:100%; height:100%; object-fit:cover; } /* Video hero: same large contained treatment, with breathing room */ .project-hero.hero-video .hero-frame{ height: clamp(340px, 52vw, 700px); background:#000; } .project-hero.hero-video .hero-frame video{ width:100%; height:100%; object-fit:cover; display:block; } .project-hero .hero-caption{ margin-top: 14px; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color: var(--muted); } /* Two portrait items side by side (e.g. Instagram mockup + reel video) */ .hero-duo{ max-width: var(--container); margin: clamp(70px,10vw,150px) auto clamp(50px,7vw,90px); padding: 0 var(--edge); } .hero-duo-row{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.6vw, 34px); max-width: 700px; margin: 0 auto; } .hero-duo-item{ position:relative; } .hero-duo-item:hover{ z-index:2; } .hero-duo-row .hero-frame{ border-radius: var(--radius-lg); overflow:hidden; aspect-ratio: 9/16; box-shadow: 0 30px 70px -30px rgba(0,0,0,.3); } .hero-duo-row .hero-frame img, .hero-duo-row .hero-frame video{ width:100%; height:100%; object-fit:cover; display:block; } .hero-duo-row .hero-frame-transparent{ aspect-ratio: auto; height: 100%; background:none; box-shadow:none; border-radius:0; overflow:visible; display:flex; align-items:center; justify-content:center; filter: drop-shadow(0 20px 30px rgba(0,0,0,.3)); transform: translateZ(0); } .hero-duo-row .hero-frame-transparent img{ height:100%; width:auto; max-width:100%; object-fit:contain; transition: transform .5s var(--ease); will-change: transform; } .hero-duo-item:hover .hero-frame-transparent img{ transform: scale(1.15); } .video-wrap{ position:relative; } /* Suppress Safari's native "tap to play" overlay on paused, controls-less video — it renders in UA shadow DOM and carries its own arrow cursor that page CSS can't otherwise reach, so it fights the custom cursor. */ .video-wrap video::-webkit-media-controls-start-playback-button, .video-wrap video::-webkit-media-controls{ display:none !important; } html.has-custom-cursor .video-wrap video{ cursor:none !important; } /* video/img are natively draggable — any click with the slightest drag motion triggers the browser's own native drag cursor, which (like the overlay above) bypasses page CSS entirely. draggable="false" in the HTML covers most browsers; this covers WebKit specifically. */ .video-wrap video{ -webkit-user-drag:none; user-drag:none; } .hero-duo-row .video-wrap{ transition: transform .5s var(--ease); will-change: transform; } .hero-duo-row .video-wrap:hover{ transform: scale(1.15); z-index:2; } .vid-toggle{ /* centered via margin, not transform: translate(-50%,-50%), so the magnetic-hover JS can drive this element's transform exclusively */ position:absolute; top:50%; left:50%; margin: -28px 0 0 -28px; width:56px; height:56px; border-radius:50%; background: rgba(0,0,0,.45); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#fff; opacity:0; transition: opacity .25s ease, background .2s; z-index: 2; } .vid-toggle svg{ width:22px; height:22px; } .vid-toggle .icon-pause{ display:none; } .video-wrap.is-playing .vid-toggle .icon-play{ display:none; } .video-wrap.is-playing .vid-toggle .icon-pause{ display:block; } .video-wrap:hover .vid-toggle, .video-wrap:focus-within .vid-toggle{ opacity:1; } .vid-toggle:hover{ background: rgba(0,0,0,.65); } .vid-progress{ position:absolute; left:0; right:0; bottom:0; height:3px; background: rgba(255,255,255,.25); z-index:2; } .vid-progress-fill{ height:100%; width:0%; background:#fff; } .hero-duo .hero-caption{ margin-top: 60px; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color: var(--muted); } @media (max-width: 560px){ .hero-duo-row{ grid-template-columns: 1fr; max-width: 320px; } } /* ---- Full-bleed statement media: edge-to-edge, no card framing ---- */ .full-bleed{ width:100%; margin: clamp(50px,7vw,90px) 0; overflow:hidden; } .full-bleed img, .full-bleed video{ width:100%; height:100%; display:block; object-fit:cover; } .full-bleed.bleed-tall{ height: 82vh; height: 82svh; } .full-bleed.bleed-banner{ height: clamp(320px, 46vw, 620px); } .full-bleed.bleed-video{ height: 100vh; height: 100svh; position:relative; background:#000; } .full-bleed.bleed-video video{ object-fit:cover; } .full-bleed .bleed-caption{ position:absolute; left: var(--edge); bottom: 28px; color:#fff; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; opacity:.75; } .project-gallery{ max-width: var(--container); margin: 0 auto clamp(44px, 6vw, 70px); padding: 0 var(--edge); display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 2.6vw, 40px); } .project-gallery:last-child{ margin-bottom: 0; } .g-item{ border-radius: var(--radius-md); overflow:hidden; background: var(--bg-alt); box-shadow: 0 20px 50px -25px rgba(0,0,0,.3), 0 0 0 1px rgba(0,0,0,.07); display:flex; align-items:center; justify-content:center; } .g-item img{ width:100%; height:100%; object-fit:contain; transition: transform .7s var(--ease); } .g-item:hover img{ transform: scale(1.03); } .g-wide{ grid-column: span 2; aspect-ratio: 16/10; } .g-tall{ grid-row: span 2; aspect-ratio: 3/4.6; } .gallery-grassroot .g-item:not(.g-wide):not(.g-tall){ aspect-ratio: 1/1; } .gallery-vinyl .g-item{ aspect-ratio: auto; align-self: start; display:block; } .gallery-vinyl .g-item img{ width:100%; height:auto; display:block; object-fit: initial; } .gallery-magazine .g-item:not(.g-wide){ aspect-ratio: 4/3; } .gallery-single{ grid-template-columns: 1fr; max-width: 720px; } .gallery-single .g-item{ aspect-ratio: auto; display:block; } .gallery-single .g-item img{ width:100%; height:auto; display:block; object-fit: initial; } .gallery-vinyl-row .g-item{ aspect-ratio: 4/3; } /* Vinyl media row: two transparent mockups side by side, no card — drop shadow only (matches the Instagram mockup treatment) */ .vinyl-media-row{ width:100%; max-width: 2000px; margin: 0 auto clamp(44px,6vw,70px); padding: 0 clamp(16px,3vw,40px); display:flex; align-items:center; justify-content:center; } .vinyl-media-row .vinyl-item{ width: 62%; flex-shrink:0; position:relative; } .vinyl-media-row .vinyl-item:first-child{ z-index:2; } .vinyl-media-row .vinyl-item:last-child{ z-index:1; margin-left:-18%; } .vinyl-media-row .vinyl-item:hover{ z-index:3; } .vinyl-media-row .vinyl-shadow{ filter: drop-shadow(0 20px 30px rgba(0,0,0,.3)); transform: translateZ(0); pointer-events: none; } .vinyl-media-row .vinyl-item img{ width:100%; display:block; transition: transform .5s var(--ease); will-change: transform; } .vinyl-media-row .vinyl-item:hover img{ transform: scale(1.1); } @media (max-width: 700px){ .vinyl-media-row{ flex-direction:column; } .vinyl-media-row .vinyl-item{ width:100%; } .vinyl-media-row .vinyl-item:last-child{ margin-left:0; } } #project-vinyl .project-head .body-lg{ max-width: 900px; } /* Magazine spread grid: transparent mockups floating in a 2-col grid, drop shadow only — no card (matches the hero-transparent treatment) */ .spread-grid{ max-width: 1600px; margin: 0 auto clamp(44px, 6vw, 70px); padding: 0 var(--edge); display:grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.4vw, 34px); } .spread-grid .spread-item{ position:relative; } .spread-grid .spread-item:hover{ z-index:2; } .spread-grid .spread-shadow{ filter: drop-shadow(0 18px 35px rgba(0,0,0,.3)); transform: translateZ(0); } .spread-grid .spread-item img{ width:100%; height:auto; display:block; transition: transform .5s var(--ease); will-change: transform; } .spread-grid .spread-item:hover img{ transform: scale(1.25); } @media (max-width: 700px){ .spread-grid{ grid-template-columns: 1fr; } } /* Book front/back mockup: transparent, drop shadow only — no card (matches the spread-grid treatment) */ .book-spread-single{ max-width: 1300px; margin: 0 auto clamp(44px, 6vw, 70px); padding: 0 var(--edge); } .book-spread-item{ position:relative; } .book-spread-item:hover{ z-index:2; } .book-spread-shadow{ filter: drop-shadow(0 18px 35px rgba(0,0,0,.3)); transform: translateZ(0); } .book-spread-shadow img{ width:100%; height:auto; display:block; transition: transform .5s var(--ease); will-change: transform; } .book-spread-item:hover img{ transform: scale(1.25); } .gallery-duo{ grid-template-columns: 1fr 1fr; max-width: 1150px; align-items: start; margin-top: clamp(70px,10vw,150px); } .gallery-duo .g-item{ aspect-ratio: 4/5; } .gallery-duo .g-item img{ width:100%; height:100%; object-fit:cover; } @media (max-width: 700px){ .project-gallery.gallery-duo{ grid-template-columns: 1fr; } } /* DipHex head row: text alongside the wooden sign mockup */ .diphex-head-row{ display:grid; grid-template-columns: 1.3fr 1fr; gap: clamp(30px, 5vw, 60px); align-items:start; margin-bottom: clamp(44px, 6vw, 70px); } .diphex-head-row .project-head{ margin-bottom:0; } .diphex-head-row .project-head .body-lg{ margin-top: 68px; } .diphex-head-row .diphex-sign{ display:block; max-width: 380px; margin-top: 40px; } .diphex-head-row .diphex-sign img{ width:100%; height:auto; display:block; } @media (max-width: 900px){ .diphex-head-row{ grid-template-columns: 1fr; } } /* DipHex evolution row */ .diphex-evolution{ max-width: var(--container); margin: clamp(60px,9vw,120px) auto clamp(50px,6vw,80px); padding: 0 var(--edge); display:flex; align-items:center; justify-content:center; gap: clamp(10px, 3vw, 34px); flex-wrap: wrap; } .evo-item{ position:relative; background:#fff; border-radius: var(--radius-md); padding: 26px 30px; box-shadow: 0 20px 50px -25px rgba(0,0,0,.25); flex: 1 1 220px; max-width: 300px; display:flex; align-items:center; justify-content:center; transition: transform .5s var(--ease); } .evo-item:hover{ transform: scale(1.15); z-index:2; } .evo-item img{ max-height: 60px; width:auto; } .evo-tag{ position:absolute; top:-10px; left:-10px; background: var(--ink); color:#fff; font-size:.7rem; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; } .evo-arrow{ font-size:1.4rem; color: var(--blue); flex-shrink:0; } /* ============================================================ CONTACT ============================================================ */ .contact{ background: var(--ink); color: #fff; padding: clamp(90px,14vw,160px) 0 40px; margin-top: 0; } .contact h2{ color:#fff; } .contact h2 .accent{ color:#fff; } .contact .eyebrow-lg{ font-size: clamp(1.3rem, 2.4vw, 1.8rem); letter-spacing: .06em; margin-top: 22px; margin-bottom: 0; } .contact-grid{ display:flex; gap: clamp(46px,9vw,130px); flex-wrap:wrap; margin-top: 56px; } .contact-block h3{ font-family: var(--font-display); font-weight:400; font-size:1.1rem; text-transform: uppercase; letter-spacing:.1em; color: var(--blue); margin-bottom:16px; } .contact-block a{ display:block; font-size: clamp(1.2rem,2.2vw,1.65rem); font-weight:400; padding: 4px 0; color:#fff; opacity:.9; } .contact-block a:hover{ color: var(--blue); opacity:1; } .contact-social{ display:flex; gap: 20px; padding-top: 9px; } .contact-social a{ display:flex; color: rgba(255,255,255,.9); padding:0; } .contact-social a:hover{ color: var(--blue); } .contact-social svg{ width:29px; height:29px; } .site-footer{ max-width: var(--container); margin: clamp(70px,10vw,120px) auto 0; padding: 24px var(--edge) 0; border-top: 1px solid rgba(255,255,255,.12); display:flex; justify-content:space-between; align-items:center; font-size:.85rem; color: rgba(255,255,255,.5); } .footer-logo{ width: 68px; height:auto; filter: brightness(0) invert(1); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 900px){ .nav-links{ display:none; } .nav-bar{ justify-content:space-between; } .about-grid{ grid-template-columns: 1fr; } .about-photo{ max-width: 340px; margin: 0 auto; } .education-grid{ grid-template-columns: 1fr; } .g-wide{ grid-column: span 2; } } @media (max-width: 640px){ .nav-toggle{ display:flex; } .nav-bar{ flex-direction:column; align-items:flex-start; padding-top: 70px; gap: 22px; } .nav-links{ display:flex; flex-direction:column; gap:14px; } .nav-social{ gap:16px; } .project-gallery{ grid-template-columns: 1fr 1fr; } .g-wide{ grid-column: span 2; } .g-tall{ grid-row: span 1; aspect-ratio: 4/3; } .project-gallery.gallery-vinyl-row{ grid-template-columns: 1fr; } .software-icons{ display:grid; grid-template-columns: repeat(2, auto); gap: 20px 32px; } .project-hero.hero-video .hero-frame{ height:auto; aspect-ratio: 16/9; } .work-divider{ height: 240px; } .work-divider h2{ font-size: clamp(2.2rem, 11vw, 3.2rem); } .diphex-evolution{ flex-direction:column; } .evo-arrow{ transform: rotate(90deg); } .site-footer{ flex-direction:column; gap:10px; align-items:flex-start; } }