/* Theme Name: Animost Theme URI: https://animost.com Description: Standalone WordPress theme for Animost Studio. Motion capture positioning, Customizer-driven throughout. Manrope only, dark surfaces, teal accent, mocap walker signature. No page builder required. Author: Animost Studio Author URI: https://animost.com Version: 2.12.0 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: animost Tags: dark, motion-capture, animation, studio */ :root{ /* palette */ --ground:#222831; --panel:#282E37; --panel-2:#393E46; --line:rgba(238,238,238,.12); --line-2:rgba(238,238,238,.26); --text:#EEEEEE; --text-dim:#92959A; --text-mute:#6C7078; --accent:#53A9AC; --accent-dim:rgba(83,169,172,.14); /* type */ --font:'Manrope',system-ui,sans-serif; --weight-heading:500; --weight-body:300; --logo-size:96px; --max:1280px; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} /* WordPress prints width/height attributes on attachment images. A used height makes aspect-ratio a no-op, so images stretch. Reset it here and let each rule set the ratio it wants. */ img{max-width:100%;height:auto} body{ background:var(--ground);color:var(--text); font-family:var(--font);font-weight:var(--weight-body);font-size:17px;line-height:1.68; -webkit-font-smoothing:antialiased;overflow-x:hidden; } body::after{ content:'';position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.035; 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'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); } ::selection{background:var(--accent);color:var(--ground)} a{color:inherit;text-decoration:none} a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px} .wrap{max-width:var(--max);margin:0 auto;padding:0 40px} .eyebrow{ font-family:var(--font);font-size:12px;font-weight:500;letter-spacing:.16em; text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:12px; } .eyebrow::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none} h1,h2,h3{font-weight:var(--weight-heading);letter-spacing:-.015em;line-height:1.04;text-wrap:balance} h1{font-size:clamp(2.6rem,5.6vw,4.6rem)} h2{font-size:clamp(2rem,4.4vw,3.3rem);margin:22px 0 0} .lede{color:var(--text-dim);max-width:60ch;text-wrap:pretty} .voice{color:var(--accent)} section{padding:110px 0} /* media placeholders */ .ph{ position:relative;overflow:hidden;border:1px solid var(--line);border-radius:4px; background: repeating-linear-gradient(45deg,transparent 0 16px,rgba(230,233,237,.028) 16px 17px), var(--panel); } .ph::after{ content:attr(data-label);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); font-family:var(--font);font-size:11px;letter-spacing:.14em;text-transform:uppercase; color:var(--text-mute);white-space:nowrap;border:1px solid var(--line-2); padding:8px 14px;border-radius:2px;background:rgba(10,12,16,.7);max-width:88%; overflow:hidden;text-overflow:ellipsis; } /* nav */ /* Scoped to .site-nav, never bare "nav". A bare selector pins every