Noir — Luxury Studio Portfolio

<div class="nr-cursor" id="nrCursor"></div>
<nav class="nr-nav" data-rv><span class="nr-logo">ATLAS<span>.</span></span><div class="nr-links d-none d-md-flex"><a href="#work">Work</a><a href="#about">Studio</a><a href="#contact">Contact</a></div></nav>
<header class="nr-hero">
  <p class="nr-eyebrow" data-rv>ConvertAtlas Studio — Riga</p>
  <h1 data-rv><span>Design</span><span>that earns</span><span>attention.</span></h1>
  <p class="nr-sub" data-rv>We craft tools, interfaces and templates with obsessive attention to detail — the studio behind convertatlas.org.</p>
</header>
<section id="work" class="nr-gallery-sec">
  <div class="nr-gallery-head" data-rv><span class="nr-kick">/ selected work — drag to explore</span></div>
  <div class="nr-gallery" id="nrGallery">
    <div class="nr-item"><div class="nr-art" style="background:linear-gradient(135deg,#1a1a1f,#2c2c34)"></div><h3>ConvertAtlas Toolkit</h3><span>60+ browser tools</span></div>
    <div class="nr-item"><div class="nr-art" style="background:linear-gradient(135deg,#2a1d12,#4a3420)"></div><h3>Atlas Snippets</h3><span>435+ components</span></div>
    <div class="nr-item"><div class="nr-art" style="background:linear-gradient(135deg,#12202a,#1d3a4a)"></div><h3>Atlas Templates</h3><span>18 page designs</span></div>
    <div class="nr-item"><div class="nr-art" style="background:linear-gradient(135deg,#241226,#3a1d3f)"></div><h3>Atlas Journal</h3><span>Editorial content</span></div>
  </div>
</section>
<section id="about" class="nr-about" data-rv>
  <span class="nr-kick">/ the studio</span>
  <h2>One maker. A whole platform.</h2>
  <p>ConvertAtlas is built and operated by a single developer — every tool, every snippet, every template and every line of SEO is crafted in-house. No templates bought, no shortcuts taken.</p>
  <div class="nr-figs"><div><b>60+</b><span>Tools</span></div><div><b>435+</b><span>Snippets</span></div><div><b>18</b><span>Templates</span></div></div>
</section>
<section id="contact" class="nr-contact" data-rv>
  <h2>Start a conversation</h2>
  <a href="mailto:hello@convertatlas.org" class="nr-mail">hello@convertatlas.org</a>
</section>
<footer class="nr-foot">ATLAS. © 2026 — Built with <a href="https://convertatlas.org">ConvertAtlas</a></footer>

*{box-sizing:border-box}body{margin:0;background:#0c0c0e;color:#e8e6e0;font-family:Georgia,'Times New Roman',serif;overflow-x:hidden;cursor:none}
a{text-decoration:none;cursor:none}.nr-sans{font-family:system-ui,sans-serif}
.nr-cursor{position:fixed;top:0;left:0;width:26px;height:26px;border:1px solid #c9a227;border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .2s,height .2s,background .2s}
.nr-cursor.big{width:60px;height:60px;background:rgba(201,162,39,.12)}
.nr-nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:20px 34px;font-family:system-ui,sans-serif}
.nr-logo{font-family:system-ui;font-weight:800;letter-spacing:.16em;font-size:1rem}.nr-logo span{color:#c9a227}
.nr-links{gap:30px}.nr-links a{color:#9b958a;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase}.nr-links a:hover{color:#c9a227}
.nr-hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:0 34px;max-width:1100px;margin:0 auto}
.nr-eyebrow{font-family:system-ui;text-transform:uppercase;letter-spacing:.2em;font-size:.74rem;color:#c9a227;margin:0 0 18px}
.nr-hero h1{font-size:clamp(2.8rem,9vw,7rem);line-height:.96;font-weight:400;margin:0;letter-spacing:-.02em}
.nr-hero h1 span{display:block}
.nr-hero h1 span:nth-child(2){font-style:italic;color:#c9a227}
.nr-sub{font-family:system-ui;color:#9b958a;font-size:1.05rem;max-width:480px;margin:26px 0 0;line-height:1.7}
.nr-kick{font-family:system-ui;text-transform:uppercase;letter-spacing:.16em;font-size:.74rem;color:#6a665d}
.nr-gallery-sec{padding:60px 0}
.nr-gallery-head{padding:0 34px;margin-bottom:24px}
.nr-gallery{display:flex;gap:24px;overflow-x:auto;padding:10px 34px 30px;scroll-snap-type:x mandatory;cursor:grab}
.nr-gallery::-webkit-scrollbar{height:6px}.nr-gallery::-webkit-scrollbar-thumb{background:#2a2a30;border-radius:3px}
.nr-item{flex:0 0 auto;width:380px;scroll-snap-align:start}
.nr-art{height:440px;border-radius:6px;margin-bottom:16px;transition:transform .4s}
.nr-item:hover .nr-art{transform:scale(.98)}
.nr-item h3{font-size:1.5rem;font-weight:400;margin:0}
.nr-item span{font-family:system-ui;color:#6a665d;font-size:.84rem;text-transform:uppercase;letter-spacing:.08em}
.nr-about{max-width:760px;margin:0 auto;padding:90px 34px;text-align:center}
.nr-about h2{font-size:clamp(2rem,5vw,3.4rem);font-weight:400;margin:14px 0 18px;font-style:italic}
.nr-about p{font-family:system-ui;color:#9b958a;line-height:1.8;font-size:1.05rem}
.nr-figs{display:flex;gap:50px;justify-content:center;margin-top:40px}
.nr-figs b{display:block;font-size:2.6rem;color:#c9a227;font-weight:400}
.nr-figs span{font-family:system-ui;text-transform:uppercase;letter-spacing:.1em;font-size:.74rem;color:#6a665d}
.nr-contact{text-align:center;padding:100px 34px}
.nr-contact h2{font-size:clamp(2rem,5vw,3rem);font-weight:400;font-style:italic;margin:0 0 24px}
.nr-mail{font-family:system-ui;font-size:1.3rem;color:#c9a227;border-bottom:1px solid #c9a227;padding-bottom:4px}
.nr-foot{font-family:system-ui;text-align:center;padding:30px;color:#6a665d;font-size:.8rem;border-top:1px solid #1c1c20}
.nr-foot a{color:#c9a227}
@media(max-width:760px){body{cursor:auto}.nr-cursor{display:none}a{cursor:pointer}.nr-links{display:none}.nr-item{width:280px}.nr-art{height:340px}}
[data-rv]{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}[data-rv].in{opacity:1;transform:none}

var cur=document.getElementById('nrCursor');
if(window.matchMedia('(min-width:761px)').matches){
  window.addEventListener('mousemove',function(e){cur.style.left=e.clientX+'px';cur.style.top=e.clientY+'px'});
  document.querySelectorAll('a,.nr-item').forEach(function(el){el.addEventListener('mouseenter',function(){cur.classList.add('big')});el.addEventListener('mouseleave',function(){cur.classList.remove('big')})});
}
var g=document.getElementById('nrGallery'),down=false,sx,sl;
g.addEventListener('mousedown',function(e){down=true;g.style.cursor='grabbing';sx=e.pageX;sl=g.scrollLeft});
window.addEventListener('mouseup',function(){down=false;g.style.cursor='grab'});
g.addEventListener('mousemove',function(e){if(!down)return;e.preventDefault();g.scrollLeft=sl-(e.pageX-sx)*1.5});
var io=new IntersectionObserver(function(es){es.forEach(function(e){if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target)}})},{threshold:.12});
document.querySelectorAll('[data-rv]').forEach(function(el,i){el.style.transitionDelay=(i%3*70)+'ms';io.observe(el)});