<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Pirate Agency — Independent Creative Studio</title> <meta name="description" content="Pirate Agency builds brands, identities and digital experiences that refuse to sink." /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,800;0,900;1,500&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet" /> <style> :root{--bg:#0c0b09;--bg2:#131210;--fg:#f4efe4;--muted:#938b7c;--accent:#d9a441;--line:rgba(244,239,228,.12);--ease:cubic-bezier(.22,1,.36,1)} *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{background:var(--bg);color:var(--fg);font-family:"Archivo",system-ui,sans-serif;line-height:1.45;-webkit-font-smoothing:antialiased;overflow-x:hidden} a{color:inherit;text-decoration:none} ::selection{background:var(--accent);color:var(--bg)} .container{width:min(1280px,90vw);margin-inline:auto} .eyebrow{font-family:"Space Mono",monospace;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;color:var(--muted);display:inline-flex;align-items:center;gap:.6rem} .eyebrow::before{content:"";width:28px;height:1px;background:var(--accent)} .lead{font-size:clamp(1.05rem,1.7vw,1.4rem);color:var(--muted);max-width:46ch;line-height:1.5} .nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:1.4rem clamp(1.2rem,5vw,3rem);mix-blend-mode:difference} .nav__logo{font-weight:900;letter-spacing:-.02em}.nav__logo .m{color:var(--accent)} .nav__links{display:flex;gap:1.5rem} .nav__link{font-family:"Space Mono",monospace;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em} @media(max-width:760px){.nav__links{display:none}} .btn{display:inline-flex;align-items:center;gap:.7rem;font-family:"Space Mono",monospace;text-transform:uppercase;letter-spacing:.05em;font-size:.8rem;padding:1rem 1.8rem;border:1px solid var(--accent);border-radius:100px;background:var(--accent);color:var(--bg);transition:background .4s var(--ease),color .4s var(--ease)} .btn:hover{background:transparent;color:var(--fg)} .hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:8rem clamp(1.2rem,5vw,3rem) 3rem} .hero h1{font-weight:900;letter-spacing:-.04em;line-height:.86;font-size:clamp(3rem,12vw,11rem)} .hero h1 em{font-style:italic;color:var(--accent);font-weight:500} .hero__foot{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-top:3rem;flex-wrap:wrap} .scroll{font-family:"Space Mono",monospace;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)} .marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:1.2rem 0} .track{display:flex;gap:3rem;width:max-content;animation:slide 26s linear infinite} .track span{font-weight:900;font-size:clamp(1.4rem,3.5vw,2.6rem);letter-spacing:-.02em;display:inline-flex;align-items:center;gap:3rem;text-transform:uppercase} .track span::after{content:"✦";color:var(--accent);font-size:.7em} @keyframes slide{to{transform:translateX(-50%)}} .section{padding:clamp(5rem,12vw,9rem) 0} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:2rem}@media(max-width:820px){.grid2{grid-template-columns:1fr}} .display{font-weight:900;letter-spacing:-.035em;line-height:.95} .work a{border-top:1px solid var(--line);padding:1.6rem 0;display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;transition:padding .5s var(--ease)} .work a:hover{padding-inline:1.2rem} .work .t{font-weight:900;font-size:clamp(1.6rem,5vw,3rem);letter-spacing:-.03em;transition:color .4s var(--ease)} .work a:hover .t{color:var(--accent)} .work .tag{font-family:"Space Mono",monospace;font-size:.76rem;color:var(--muted);text-transform:uppercase} .tiles{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}@media(max-width:820px){.tiles{grid-template-columns:1fr}} .tile{background:var(--bg2);border:1px solid var(--line);border-radius:18px;padding:2rem;transition:transform .5s var(--ease),border-color .5s} .tile:hover{transform:translateY(-6px);border-color:var(--accent)} .tile .n{font-family:"Space Mono",monospace;color:var(--accent);font-size:.85rem} .tile h3{font-weight:800;font-size:1.4rem;margin:.8rem 0 .5rem;letter-spacing:-.02em} .tile p{color:var(--muted)} .cta{text-align:center} .cta h2{font-weight:900;letter-spacing:-.04em;line-height:.9;font-size:clamp(2.6rem,10vw,7rem)} .cta h2 em{font-style:italic;color:var(--accent);font-weight:500} .footer{border-top:1px solid var(--line);padding:4rem clamp(1.2rem,5vw,3rem) 2rem} .footer .big{font-weight:900;font-size:clamp(2.6rem,11vw,8rem);letter-spacing:-.04em;line-height:.9} .footer .big .m{color:var(--accent)} .legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-top:2.5rem;font-family:"Space Mono",monospace;font-size:.74rem;color:var(--muted);text-transform:uppercase} [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)} [data-reveal].in{opacity:1;transform:none} .mt1{margin-top:1rem}.mt2{margin-top:2rem}.mt3{margin-top:3rem} </style> </head> <body> <nav class="nav"> <a href="#top" class="nav__logo">PIRATE<span class="m">✦</span>AGENCY</a> <div class="nav__links"> <a class="nav__link" href="#work">Work</a> <a class="nav__link" href="#capabilities">Capabilities</a> <a class="nav__link" href="mailto:ahoy@pirate.agency">Contact</a> </div> </nav> <header class="hero container" id="top"> <span class="eyebrow" data-reveal>Independent creative studio — Est. 2014</span> <h1 class="mt2" data-reveal>We build brands that refuse to <em>sink.</em></h1> <div class="hero__foot"> <p class="lead" data-reveal>A crew of strategists, designers and engineers charting ambitious companies into open water — through identity, product and story.</p> <span class="scroll">↓ Scroll</span> </div> </header> <div class="marquee"> <div class="track"> <span>Brand Strategy</span><span>Visual Identity</span><span>Web Design</span><span>Motion</span><span>Art Direction</span> <span>Brand Strategy</span><span>Visual Identity</span><span>Web Design</span><span>Motion</span><span>Art Direction</span> </div> </div> <section class="section container"> <div class="grid2"> <span class="eyebrow" data-reveal>What we do</span> <div> <p class="display" style="font-size:clamp(1.8rem,4vw,3rem)" data-reveal>We chart the route from a blank map to a brand the world can't ignore — and ship every mile of the journey.</p> <p class="lead mt3" data-reveal>No off-the-shelf templates, no borrowed compasses. Every engagement starts from your raw ambition.</p> </div> </div> </section> <section class="section container" id="work"> <span class="eyebrow" data-reveal>Selected work</span> <div class="work mt3"> <a href="#" data-reveal><span class="t">Saltwater Coffee</span><span class="tag">Brand · Packaging</span></a> <a href="#" data-reveal><span class="t">Northwind Bank</span><span class="tag">Identity · Product</span></a> <a href="#" data-reveal><span class="t">Harbor & Co.</span><span class="tag">Web · Motion</span></a> <a href="#" data-reveal><span class="t">Compass Outdoors</span><span class="tag">Strategy · Campaign</span></a> </div> </section> <section class="section container" id="capabilities"> <span class="eyebrow" data-reveal>Capabilities</span> <div class="tiles mt3"> <div class="tile" data-reveal><span class="n">01</span><h3>Strategy</h3><p>Positioning, naming and narrative that give your brand a heading before a pixel is drawn.</p></div> <div class="tile" data-reveal><span class="n">02</span><h3>Identity</h3><p>Logos, type and colour — design systems that fly the same in any port.</p></div> <div class="tile" data-reveal><span class="n">03</span><h3>Digital</h3><p>Sites, products and stores engineered for speed, motion and detail.</p></div> <div class="tile" data-reveal><span class="n">04</span><h3>Motion</h3><p>Title sequences, product film and social — story told in frames that move.</p></div> </div> </section> <section class="section container cta"> <span class="eyebrow" style="justify-content:center" data-reveal>Start a project</span> <h2 class="mt2" data-reveal>Let's set <em>sail.</em></h2> <a href="mailto:ahoy@pirate.agency" class="btn mt3" data-reveal>ahoy@pirate.agency →</a> </section> <footer class="footer"> <div class="big">PIRATE<span class="m">✦</span>AGENCY</div> <div class="legal"><span>© <span id="y">2026</span> Pirate Agency — Charted in open water</span><span>Privacy · Terms</span></div> </footer> <script> (function(){ var io=new IntersectionObserver(function(es){es.forEach(function(e){if(e.isIntersecting){e.target.classList.add("in");io.unobserve(e.target);}});},{threshold:.12,rootMargin:"0px 0px -8% 0px"}); document.querySelectorAll("[data-reveal]").forEach(function(el){io.observe(el);}); var y=document.getElementById("y"); if(y){y.textContent=new Date().getFullYear();} })(); </script> </body> </html>

Code & assets

Design System