LearnPlayRecord Landing Page
:root, [data-theme=”light”] {
–text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
–text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
–text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
–text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
–text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
–text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
–space-1: 0.25rem; –space-2: 0.5rem; –space-3: 0.75rem; –space-4: 1rem; –space-5: 1.25rem; –space-6: 1.5rem; –space-8: 2rem; –space-10: 2.5rem; –space-12: 3rem; –space-16: 4rem; –space-20: 5rem; –space-24: 6rem;
–color-bg: #f7f6f2; –color-surface: #f9f8f5; –color-surface-2: #fbfbf9; –color-surface-offset: #edeae5; –color-border: #d4d1ca;
–color-text: #28251d; –color-text-muted: #6f6c64; –color-text-faint: #9f9b91; –color-text-inverse: #f9f8f4;
–color-primary: #01696f; –color-primary-hover: #0c4e54; –color-primary-highlight: #dbe8e5;
–shadow-sm: 0 1px 2px rgba(20,20,20,.06); –shadow-md: 0 8px 24px rgba(20,20,20,.08);
–radius-sm: .5rem; –radius-md: .75rem; –radius-lg: 1rem; –radius-xl: 1.5rem; –radius-full: 9999px;
–font-display: ‘Zodiak’, Georgia, serif; –font-body: ‘Satoshi’, Arial, sans-serif;
–content: 1120px;
}
[data-theme=”dark”] {
–color-bg: #171614; –color-surface: #1c1b19; –color-surface-2: #201f1d; –color-surface-offset: #22211f; –color-border: #393836;
–color-text: #ece8df; –color-text-muted: #b5b0a6; –color-text-faint: #8a867f; –color-text-inverse: #171614;
–color-primary: #4f98a3; –color-primary-hover: #66adb7; –color-primary-highlight: #263538;
–shadow-sm: 0 1px 2px rgba(0,0,0,.2); –shadow-md: 0 8px 24px rgba(0,0,0,.28);
}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font-family:var(–font-body);font-size:var(–text-base);line-height:1.6;background:var(–color-bg);color:var(–color-text)}
a{text-decoration:none;color:inherit} img,svg{display:block;max-width:100%} button{font:inherit}
.container{width:min(calc(100% – 2rem),var(–content));margin-inline:auto}
.skip-link{position:absolute;left:-9999px}.skip-link:focus{left:1rem;top:1rem;background:var(–color-primary);color:var(–color-text-inverse);padding:.75rem 1rem;border-radius:var(–radius-sm);z-index:100}
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(–color-bg) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid color-mix(in srgb,var(–color-text) 10%, transparent)}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:var(–space-4);padding:var(–space-4) 0}
.brand{display:flex;align-items:center;gap:.875rem;font-weight:700}
.brand-mark{width:42px;height:42px;padding:.55rem;border-radius:14px;background:var(–color-primary-highlight);color:var(–color-primary)}
.brand-name{display:flex;flex-direction:column;line-height:1}.brand-name span:last-child{font-size:var(–text-xs);font-weight:500;color:var(–color-text-muted);margin-top:.2rem}
.nav{display:flex;gap:var(–space-5);align-items:center}.nav a{font-size:var(–text-sm);color:var(–color-text-muted)}
.theme-toggle,.btn{border:1px solid color-mix(in srgb,var(–color-text) 10%, transparent);border-radius:var(–radius-full);background:var(–color-surface);color:var(–color-text);padding:.8rem 1.1rem;cursor:pointer}
.theme-toggle{display:grid;place-items:center;width:44px;height:44px;padding:0}
.btn-primary{background:var(–color-primary);color:var(–color-text-inverse);border-color:var(–color-primary)}
.btn-primary:hover{background:var(–color-primary-hover)}
.btn-secondary{background:transparent}
.hero{padding:clamp(4rem,9vw,7rem) 0}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(–space-8);align-items:center}
.eyebrow{display:inline-flex;gap:.5rem;align-items:center;padding:.45rem .8rem;border-radius:var(–radius-full);background:var(–color-primary-highlight);color:var(–color-primary);font-size:var(–text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.08em}
h1,h2,h3{margin:0 0 .6rem} h1{font-family:var(–font-display);font-size:var(–text-2xl);line-height:1.05;max-width:12ch} h2{font-family:var(–font-display);font-size:var(–text-xl)} h3{font-size:var(–text-lg)}
.hero p,.section-copy{color:var(–color-text-muted);max-width:58ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(–space-3);margin-top:var(–space-6)}
.hero-card{background:linear-gradient(180deg,var(–color-surface-2),var(–color-surface));padding:var(–space-6);border:1px solid color-mix(in srgb,var(–color-text) 10%, transparent);border-radius:var(–radius-xl);box-shadow:var(–shadow-md)}
.lesson-stack{display:grid;gap:var(–space-4)} .mini-card{padding:var(–space-4);border-radius:var(–radius-lg);background:var(–color-bg);border:1px solid color-mix(in srgb,var(–color-text) 9%, transparent)}
.mini-label{font-size:var(–text-xs);text-transform:uppercase;letter-spacing:.08em;color:var(–color-text-faint);margin-bottom:.4rem}
section{padding:clamp(3.5rem,7vw,6rem) 0}.section-shell{display:grid;gap:var(–space-8)}
.three-up{display:grid;grid-template-columns:repeat(3,1fr);gap:var(–space-4)}
.card{background:var(–color-surface);padding:var(–space-5);border-radius:var(–radius-lg);border:1px solid color-mix(in srgb,var(–color-text) 10%, transparent);box-shadow:var(–shadow-sm)}
.feature-icon{width:2.75rem;height:2.75rem;border-radius:.9rem;display:grid;place-items:center;background:var(–color-primary-highlight);color:var(–color-primary);margin-bottom:var(–space-4)}
.split{display:grid;grid-template-columns:.95fr 1.05fr;gap:var(–space-8);align-items:start}
.checklist{display:grid;gap:var(–space-3)} .check{display:flex;gap:.75rem;align-items:flex-start;padding:var(–space-3) 0;border-bottom:1px solid color-mix(in srgb,var(–color-text) 8%, transparent)}
.check strong{display:block}.pill{display:inline-block;padding:.35rem .7rem;border-radius:var(–radius-full);font-size:var(–text-xs);background:var(–color-primary-highlight);color:var(–color-primary);font-weight:700}
.cta{background:var(–color-surface-offset);border-top:1px solid color-mix(in srgb,var(–color-text) 10%, transparent);border-bottom:1px solid color-mix(in srgb,var(–color-text) 10%, transparent)}
.cta-box{display:grid;grid-template-columns:1fr auto;gap:var(–space-4);align-items:center;padding:var(–space-8);background:var(–color-surface);border-radius:var(–radius-xl);border:1px solid color-mix(in srgb,var(–color-text) 10%, transparent)}
.site-footer{padding:var(–space-8) 0;color:var(–color-text-muted);font-size:var(–text-sm)}
@media (max-width: 900px){.hero-grid,.split,.cta-box,.three-up{grid-template-columns:1fr}.nav{display:none}h1{max-width:16ch}.hero-card{order:-1}}
Skip to content
Learn your first instrument. Build your first studio.
Beginner-friendly music guides that take you from first notes to first recordings.
LearnPlayRecord helps new instrumentalists understand the basics, pick the right gear, and set up a simple home studio without getting overwhelmed by jargon or overpriced kit.
Path 01
Choose your first instrument
Friendly buying guides for guitar, keyboard, synth, ukulele, and more.
Path 02
Understand music theory simply
Chords, scales, rhythm, and ear training explained in plain English.
Path 03
Build a starter home studio
Budget-friendly setups for recording vocals, guitar, keyboards, and demos at home.
Start here
A simple path for complete beginners
Instead of throwing every topic at people at once, the site can guide visitors through a clear sequence: pick an instrument, learn the basics, then record at home when they are ready.
Beginner instruments
Help people choose a first instrument, understand costs, and avoid beginner mistakes.
Theory made simple
Turn intimidating theory into practical, bite-sized lessons linked to real songs and exercises.
Home-studio builds
Show exactly what beginners need for a starter recording setup at different budgets.
Guide ideas
Content pillars that can rank, help, and convert
This layout gives you room to feature your most useful categories right on the landing page while pushing visitors toward affiliate-friendly guide pages.
01 Best beginner guitar kit UK A practical first-buy guide with budget picks, upgrades, and common mistakes.
02 First keyboard or synth for beginners Explain learning goals, sizes, key counts, and what is worth paying for.
03 Complete home studio under £500 Bundle interface, mic, headphones, cables, and software in one clear setup.
04 Music theory without jargon Bridge educational content with instrument and recording recommendations.
(function(){
const t=document.querySelector(‘[data-theme-toggle]’);
const r=document.documentElement;
let d=window.matchMedia(‘(prefers-color-scheme: dark)’).matches?’dark’:’light’;
r.setAttribute(‘data-theme’,d);
const render=()=>{t.setAttribute(‘aria-label’,’Switch to ‘+(d===’dark’?’light’:’dark’)+’ mode’);t.innerHTML=d===’dark’?”:”};
render();
t.addEventListener(‘click’,()=>{d=d===’dark’?’light’:’dark’;r.setAttribute(‘data-theme’,d);render();});
})();
Learn Play Record 