All The Feelings

<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Raleway:wght@200;300;400&display=swap" rel="stylesheet">
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--black:#060606;--dark:#0f0f0f;--mid:#181818;--border:rgba(255,255,255,0.07);--text:#ede8df;--muted:rgba(237,232,223,0.4);--accent:#b8966a;}
html{scroll-behavior:smooth}
body{background:var(--black);color:var(--text);font-family:'Raleway',sans-serif;font-weight:300;font-size:15px;line-height:1.75;overflow-x:hidden;}
nav{position:fixed;top:0;left:0;right:0;z-index:200;padding:2rem 6vw;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(to bottom,rgba(6,6,6,0.97) 0%,transparent 100%);}
.nav-logo{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:20px;letter-spacing:0.06em;color:var(--text);text-decoration:none;}
.nav-right{display:flex;gap:2.5rem;align-items:center}
.nav-right a{font-size:10px;letter-spacing:0.22em;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color 0.3s;}
.nav-right a:hover{color:var(--accent)}
.hero{margin-top:0;position:relative;height:100vh;overflow:hidden;}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block;}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,6,6,1) 0%,rgba(6,6,6,0.5) 35%,rgba(6,6,6,0.1) 65%,transparent 100%),linear-gradient(to right,rgba(6,6,6,0.4) 0%,transparent 60%);}
.hero-content{position:absolute;bottom:0;left:0;right:0;padding:0 6vw 6rem;}
.hero-eyebrow{font-size:10px;letter-spacing:0.38em;text-transform:uppercase;color:var(--accent);margin-bottom:1.5rem;opacity:0;animation:up 1s cubic-bezier(0.22,1,0.36,1) 0.3s forwards;}
.hero-name{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(4.5rem,11vw,11rem);line-height:0.88;letter-spacing:-0.02em;margin-bottom:2rem;opacity:0;animation:up 1.1s cubic-bezier(0.22,1,0.36,1) 0.5s forwards;}
.hero-name em{font-style:italic;color:var(--accent)}
.hero-tagline{max-width:480px;font-size:14px;color:var(--muted);line-height:1.9;margin-bottom:2.5rem;opacity:0;animation:up 1.1s cubic-bezier(0.22,1,0.36,1) 0.75s forwards;}
.hero-scroll{display:flex;align-items:center;gap:1rem;font-size:10px;letter-spacing:0.22em;text-transform:uppercase;color:var(--muted);opacity:0;animation:up 1.1s cubic-bezier(0.22,1,0.36,1) 1s forwards;}
.scroll-bar{width:40px;height:1px;background:var(--accent);opacity:0.6}
@keyframes up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.hero-cards{position:absolute;right:6vw;bottom:6rem;display:flex;flex-direction:column;gap:2px;width:280px;opacity:0;animation:up 1.1s cubic-bezier(0.22,1,0.36,1) 0.9s forwards;}
.hero-card{background:rgba(6,6,6,0.7);backdrop-filter:blur(12px);border:1px solid var(--border);padding:1rem 1.2rem;text-decoration:none;transition:background 0.3s,border-color 0.3s;}
.hero-card:hover{background:rgba(184,150,106,0.12);border-color:rgba(184,150,106,0.3)}
.hero-card-tag{font-size:8px;letter-spacing:0.22em;text-transform:uppercase;color:var(--accent);margin-bottom:4px;}
.hero-card-title{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:1rem;color:var(--text);line-height:1.2;}
.hero-card-arrow{float:right;color:var(--muted);font-size:12px;margin-top:2px}
.section{padding:5.5rem 6vw;border-top:1px solid var(--border)}
.eyebrow{font-size:10px;letter-spacing:0.32em;text-transform:uppercase;color:var(--accent);margin-bottom:3rem;display:flex;align-items:center;gap:1rem;}
.eyebrow::after{content:'';width:36px;height:1px;background:var(--accent);opacity:0.4}
.bio-band{display:grid;grid-template-columns:42% 58%;border-top:1px solid var(--border);min-height:600px;}
.bio-photo{overflow:hidden;border-right:1px solid var(--border);position:relative;}
.bio-photo img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;transition:transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94);}
.bio-photo:hover img{transform:scale(1.03)}
.bio-text{padding:5rem 6vw;display:flex;flex-direction:column;justify-content:center;background:var(--dark);}
.bio-heading{font-family:'Cormorant Garamond',serif;font-weight:300;font-style:italic;font-size:clamp(2rem,3.5vw,3.2rem);line-height:1.1;color:var(--text);margin-bottom:2rem;}
.bio-copy{font-size:14px;line-height:2;color:var(--muted);font-weight:300;}
.bio-copy em{color:var(--text);font-style:normal}
.scores-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;}
.score-card{position:relative;overflow:hidden;text-decoration:none;display:block;background:var(--mid);aspect-ratio:4/3;}
.score-card-bg{position:absolute;inset:0;transition:transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94);}
.score-card:hover .score-card-bg{transform:scale(1.05)}
.bg-rolf{background:linear-gradient(140deg,#1c1008 0%,#301c0e 50%,#180e06 100%)}
.bg-noah{background:linear-gradient(140deg,#0a1018 0%,#141e2e 50%,#080c14 100%)}
.bg-santa{background:linear-gradient(140deg,#0c1410 0%,#162212 50%,#0a1008 100%)}
.bg-filmgeek{background:linear-gradient(140deg,#121018 0%,#1e1828 50%,#0e0c14 100%)}
.bg-filmstudies{background:linear-gradient(140deg,#14100c 0%,#221e14 50%,#100e0a 100%)}
.score-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,6,6,0.92) 0%,rgba(6,6,6,0.2) 50%,transparent 100%);transition:background 0.4s;}
.score-card:hover .score-overlay{background:linear-gradient(to top,rgba(6,6,6,0.97) 0%,rgba(6,6,6,0.45) 60%,rgba(6,6,6,0.05) 100%);}
.score-content{position:absolute;bottom:0;left:0;right:0;padding:2rem}
.score-tag{font-size:9px;letter-spacing:0.22em;text-transform:uppercase;color:var(--accent);margin-bottom:0.5rem;opacity:0;transform:translateY(5px);transition:all 0.3s;}
.score-card:hover .score-tag{opacity:1;transform:translateY(0)}
.score-title{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:1.6rem;line-height:1.1;color:var(--text);margin-bottom:0.8rem;}
.score-listen{font-size:9.5px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px;transition:all 0.3s;}
.score-listen::after{content:'→';transition:transform 0.3s}
.score-card:hover .score-listen{color:var(--accent)}
.score-card:hover .score-listen::after{transform:translateX(4px)}
.photo-divider{position:relative;height:70vh;overflow:hidden;border-top:1px solid var(--border);}
.photo-divider img{width:100%;height:100%;object-fit:cover;object-position:center 40%;display:block;filter:grayscale(80%) contrast(1.05);}
.photo-divider-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(6,6,6,0.3) 0%,rgba(6,6,6,0.1) 40%,rgba(6,6,6,0.6) 100%);}
.photo-divider-text{position:absolute;bottom:3rem;left:6vw;right:6vw;display:flex;justify-content:space-between;align-items:flex-end;}
.photo-divider-label{font-family:'Cormorant Garamond',serif;font-weight:300;font-style:italic;font-size:clamp(3rem,7vw,7rem);color:var(--text);line-height:0.9;letter-spacing:-0.02em;}
.photo-divider-caption{font-size:10px;letter-spacing:0.22em;text-transform:uppercase;color:var(--muted);text-align:right;}
.library-band{display:grid;grid-template-columns:38% 62%;border-top:1px solid var(--border);}
.library-photo{overflow:hidden;border-right:1px solid var(--border);}
.library-photo img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;transition:transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94);}
.library-photo:hover img{transform:scale(1.03)}
.library-list{display:flex;flex-direction:column}
.lib-card{padding:2.5rem 6vw;border-bottom:1px solid var(--border);text-decoration:none;display:flex;justify-content:space-between;align-items:center;background:var(--dark);transition:background 0.3s,padding-left 0.3s;}
.lib-card:last-child{border-bottom:none}
.lib-card:hover{background:var(--mid);padding-left:calc(6vw + 12px)}
.lib-num{font-size:9px;letter-spacing:0.2em;text-transform:uppercase;color:var(--accent);margin-bottom:0.4rem;}
.lib-title{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:1.3rem;color:var(--text);line-height:1.1;margin-bottom:0.3rem;}
.lib-tag{font-size:10px;color:var(--muted);letter-spacing:0.05em}
.lib-arrow{font-size:18px;color:var(--muted);transition:all 0.3s;flex-shrink:0;}
.lib-card:hover .lib-arrow{color:var(--accent);transform:translateX(4px)}
.contact{display:grid;grid-template-columns:50% 50%;border-top:1px solid var(--border);min-height:500px;}
.contact-photo{overflow:hidden;border-right:1px solid var(--border);position:relative;}
.contact-photo img{width:100%;height:100%;object-fit:cover;object-position:center 25%;display:block;}
.contact-photo-overlay{position:absolute;inset:0;background:linear-gradient(to right,transparent 60%,rgba(6,6,6,0.4));}
.contact-right{padding:5rem 6vw;background:var(--dark);display:flex;flex-direction:column;justify-content:space-between;}
.contact-heading{font-family:'Cormorant Garamond',serif;font-weight:300;font-style:italic;font-size:clamp(3rem,6vw,6rem);line-height:0.9;color:var(--text);}
.contact-heading span{color:var(--accent)}
.contact-links{display:flex;flex-direction:column;gap:0}
.contact-link{font-size:13px;letter-spacing:0.05em;color:var(--muted);text-decoration:none;display:flex;align-items:center;gap:12px;padding:1.2rem 0;border-bottom:1px solid var(--border);transition:all 0.3s;}
.contact-link:last-child{border-bottom:none}
.contact-link::before{content:'→';color:var(--accent);font-size:14px;transition:transform 0.3s}
.contact-link:hover{color:var(--text)}
.contact-link:hover::before{transform:translateX(4px)}
footer{padding:2rem 6vw;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;background:var(--black);}
footer p{font-size:10px;letter-spacing:0.15em;text-transform:uppercase;color:var(--muted)}
.fade-in{opacity:0;transform:translateY(20px);transition:opacity 0.9s ease,transform 0.9s ease}
.fade-in.visible{opacity:1;transform:translateY(0)}
@media(max-width:768px){.hero-cards{display:none}.bio-band,.library-band,.contact{grid-template-columns:1fr}.bio-photo,.library-photo,.contact-photo{height:320px;border-right:none;border-bottom:1px solid var(--border)}.scores-grid{grid-template-columns:1fr}.score-card{aspect-ratio:3/2}.photo-divider{height:50vh}}
</style>

<nav>
  <a href="#" class="nav-logo">Oliver Claridge</a>
  <div class="nav-right">
    <a href="#scores">Scores</a>
    <a href="#library">Library</a>
    <a href="#contact">Contact</a>
  </div>
</nav>

<div class="hero">
  <img class="hero-img" src="https://images.squarespace-cdn.com/content/5637b9d6e4b06cc1aa42863a/d90e1c34-835b-4a65-b0a0-f91252a391d8/photo-hero.jpg?content-type=image%2Fjpeg" alt="Oliver Claridge pushing a piano through the jungle">
  <div class="hero-overlay"></div>
  <div class="hero-content">
    <p class="hero-eyebrow">Oliver Claridge</p>
    <h1 class="hero-name">Sonic<br><em>Storyteller</em></h1>
    <p class="hero-tagline">A composer whose work bridges the emotional depth of modern orchestral music with the exploratory edge of experimental piano and electronic soundscapes.</p>
    <div class="hero-scroll"><div class="scroll-bar"></div><span>Scroll to explore</span></div>
  </div>
  <div class="hero-cards">
    <a class="hero-card" href="https://s.disco.ac/dkawpbylkfru" target="_blank" rel="noopener">
      <span class="hero-card-arrow">↗</span>
      <div class="hero-card-tag">Netflix · Documentary</div>
      <div class="hero-card-title">Noah Kahan: Out of Body</div>
    </a>
    <a class="hero-card" href="https://s.disco.ac/jyvjcrgscvqm" target="_blank" rel="noopener">
      <span class="hero-card-arrow">↗</span>
      <div class="hero-card-tag">HBO · Documentary</div>
      <div class="hero-card-title">Santa Camp</div>
    </a>
    <a class="hero-card" href="https://s.disco.ac/vgiwjhutulmp" target="_blank" rel="noopener">
      <span class="hero-card-arrow">↗</span>
      <div class="hero-card-tag">Netflix · Documentary</div>
      <div class="hero-card-title">Rolf Harris: Primetime Predator</div>
    </a>
  </div>
</div>

<div class="bio-band fade-in">
  <div class="bio-photo">
    <img src="https://images.squarespace-cdn.com/content/5637b9d6e4b06cc1aa42863a/9f2cc426-19d4-4d49-9c06-4ed20deeb016/photo-bio.jpg?content-type=image%2Fjpeg" alt="Oliver Claridge playing piano outdoors">
  </div>
  <div class="bio-text">
    <div class="eyebrow">About</div>
    <div class="bio-heading">Composer &<br>Sonic Storyteller</div>
    <p class="bio-copy">Oliver Claridge is a composer and sonic storyteller whose work bridges the emotional depth of modern orchestral music with the exploratory edge of experimental piano and electronic soundscapes. His scores bring a cinematic intimacy to the stories they serve — music designed not just to be heard, but to be felt.<br><br>His compositions have featured across film and documentary, including the cult hit <em>Pitch Perfect</em>, Richard Shepard's <em>Film Geek</em>, HBO's <em>Santa Camp</em>, and most recently the Netflix documentary <em>Rolf Harris: Primetime Predator</em>. Working from his studio in Bali, Oliver continues to develop a catalogue that moves fluidly between the intimate and the epic.</p>
  </div>
</div>

<div class="section fade-in" id="scores">
  <div class="eyebrow">Film & Documentary Scores</div>
  <div class="scores-grid">
    <a class="score-card" href="https://s.disco.ac/dkawpbylkfru" target="_blank" rel="noopener">
      <div class="score-card-bg bg-noah"></div>
      <div class="score-overlay"></div>
      <div class="score-content">
        <div class="score-tag">Netflix · Original Score</div>
        <div class="score-title">Noah Kahan:<br>Out of Body</div>
        <div class="score-listen">Listen on Disco</div>
      </div>
    </a>
    <a class="score-card" href="https://s.disco.ac/jyvjcrgscvqm" target="_blank" rel="noopener">
      <div class="score-card-bg bg-santa"></div>
      <div class="score-overlay"></div>
      <div class="score-content">
        <div class="score-tag">HBO · Original Score</div>
        <div class="score-title">Santa Camp</div>
        <div class="score-listen">Listen on Disco</div>
      </div>
    </a>
    <a class="score-card" href="https://s.disco.ac/bvajxfhynovg" target="_blank" rel="noopener">
      <div class="score-card-bg bg-filmgeek"></div>
      <div class="score-overlay"></div>
      <div class="score-content">
        <div class="score-tag">Original Score</div>
        <div class="score-title">Film Geek</div>
        <div class="score-listen">Listen on Disco</div>
      </div>
    </a>
    <a class="score-card" href="https://s.disco.ac/vgiwjhutulmp" target="_blank" rel="noopener">
      <div class="score-card-bg bg-rolf"></div>
      <div class="score-overlay"></div>
      <div class="score-content">
        <div class="score-tag">Netflix · Original Score</div>
        <div class="score-title">Rolf Harris:<br>Primetime Predator</div>
        <div class="score-listen">Listen on Disco</div>
      </div>
    </a>
  </div>
</div>

<div class="section fade-in" style="padding-top:2rem">
  <div class="scores-grid" style="grid-template-columns:1fr 1fr">
    <a class="score-card" href="https://s.disco.ac/zownloootdap" target="_blank" rel="noopener">
      <div class="score-card-bg bg-filmstudies"></div>
      <div class="score-overlay"></div>
      <div class="score-content">
        <div class="score-tag">Compositional Work</div>
        <div class="score-title">Film Studies Vol 1</div>
        <div class="score-listen">Listen on Disco</div>
      </div>
    </a>
  </div>
</div>

<div class="photo-divider fade-in">
  <img src="https://images.squarespace-cdn.com/content/5637b9d6e4b06cc1aa42863a/aa86d24e-b43c-4fdd-a059-6c21ca11c80a/photo-bw.jpg?content-type=image%2Fjpeg" alt="Oliver Claridge performing with ocean projection">
  <div class="photo-divider-overlay"></div>
  <div class="photo-divider-text">
    <div class="photo-divider-label">Catalogue<br>& Library</div>
    <div class="photo-divider-caption">Ambient · Neo Classical</div>
  </div>
</div>

<div class="library-band fade-in" id="library">
  <div class="library-photo">
    <img src="https://images.squarespace-cdn.com/content/5637b9d6e4b06cc1aa42863a/dac1486a-1e89-46e6-a7b6-1cb01c90abe5/photo-beach.jpg?content-type=image%2Fjpeg" alt="Oliver Claridge at sunset with keyboards">
  </div>
  <div class="library-list">
    <a class="lib-card" href="https://s.disco.ac/znvgqrcvcsbt" target="_blank" rel="noopener">
      <div class="lib-left">
        <div class="lib-num">01</div>
        <div class="lib-title">Neo Classical Series 2018–2020</div>
        <div class="lib-tag">Catalogue</div>
      </div>
      <div class="lib-arrow">→</div>
    </a>
    <a class="lib-card" href="https://s.disco.ac/gdffoxzhyfhe" target="_blank" rel="noopener">
      <div class="lib-left">
        <div class="lib-num">02</div>
        <div class="lib-title">Singulara Ambient 2026</div>
        <div class="lib-tag">Catalogue</div>
      </div>
      <div class="lib-arrow">→</div>
    </a>
  </div>
</div>

<div class="section fade-in">
  <div class="eyebrow">Further Listening</div>
  <div class="library-list" style="border-top:1px solid var(--border)">
    <a class="lib-card" href="https://s.disco.ac/faeanqywbrie" target="_blank" rel="noopener">
      <div class="lib-left">
        <div class="lib-num">01</div>
        <div class="lib-title">2026 Dance</div>
        <div class="lib-tag">Electronic · Dance</div>
      </div>
      <div class="lib-arrow">→</div>
    </a>
    <a class="lib-card" href="https://s.disco.ac/voeyhowpandt" target="_blank" rel="noopener">
      <div class="lib-left">
        <div class="lib-num">02</div>
        <div class="lib-title">Indie Guitar Pop</div>
        <div class="lib-tag">Guitar · Pop · Songwriting</div>
      </div>
      <div class="lib-arrow">→</div>
    </a>
  </div>
</div>

<div class="contact fade-in" id="contact">
  <div class="contact-photo">
    <img src="https://images.squarespace-cdn.com/content/5637b9d6e4b06cc1aa42863a/da8a68d7-e555-4def-bbf6-5a6d39c006a8/photo-blue.jpg?content-type=image%2Fjpeg" alt="Oliver Claridge performing live">
    <div class="contact-photo-overlay"></div>
  </div>
  <div class="contact-right">
    <div class="contact-heading">Get in<br><span>touch.</span></div>
    <div class="contact-links">
      <a class="contact-link" href="mailto:agent@allthefeelings.life">agent@allthefeelings.life</a>
      <a class="contact-link" href="https://animal-feelings.com" target="_blank" rel="noopener">animal-feelings.com</a>
      <a class="contact-link" href="https://allthefeelings.life" target="_blank" rel="noopener">allthefeelings.life</a>
    </div>
  </div>
</div>

<footer>
  <p>© 2026 Oliver Claridge</p>
  <p>Composer · Sydney / Bali</p>
</footer>

<script>
const obs=new IntersectionObserver((entries)=>{
  entries.forEach(e=>{if(e.isIntersecting)e.target.classList.add('visible')})
},{threshold:0.08});
document.querySelectorAll('.fade-in').forEach(el=>obs.observe(el));
</script>