/* ============================================================ MoStudio — shared theme (light pastel, narrow-column look) Loaded by every page. Tokens first, then home-page nav and buttons, then overrides that restyle the older pages. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&display=swap'); :root{ --ink:#141414; /* text */ --ink-2:#6B6B70; /* secondary text */ --ink-3:#9A9AA0; /* placeholders, captions */ --card:rgba(255,255,255,.78); --card-solid:#FFFFFF; --field:#F1F1F3; /* input fill */ --line:#E6E6EA; --sun:#FFBC01; /* logo yellow, used rarely */ --radius:24px; --font:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif; /* legacy names used by the older pages */ --paper:#FFFFFF; --violet:#141414; --grape:#141414; --grape-2:#333; --yellow:#FFBC01; --blue:#333; --mist:#E6E6EA; --glass:rgba(255,255,255,.78); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{font-family:var(--font);background:#F4F1EE;color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;font-size:16px} ::selection{background:var(--sun);color:var(--ink)} h1,h2,h3,h4{font-family:var(--font);letter-spacing:-.03em;line-height:1.08;font-variation-settings:normal} a{color:inherit} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} img,video{display:block;max-width:100%} :focus-visible{outline:2px solid var(--ink);outline-offset:3px} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} /* ---------- the pastel mesh behind every page ---------- */ .bg{position:fixed;inset:0;z-index:-1;pointer-events:none;background: radial-gradient(60% 55% at 12% 88%,#F4C4B0 0%,rgba(244,196,176,0) 70%), radial-gradient(45% 50% at 0% 45%,#F3D2DF 0%,rgba(243,210,223,0) 70%), radial-gradient(50% 55% at 100% 8%,#A9E6E2 0%,rgba(169,230,226,0) 70%), radial-gradient(40% 50% at 100% 55%,#B8E4EE 0%,rgba(184,228,238,0) 70%), radial-gradient(55% 45% at 78% 100%,#F1D6D1 0%,rgba(241,214,209,0) 70%), radial-gradient(60% 60% at 50% 40%,#FBFAF7 0%,rgba(251,250,247,0) 75%), linear-gradient(180deg,#F0F4F1 0%,#F5EFEC 100%)} .bg .grain{position:absolute;inset:0;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;background:var(--ink);color:#fff;font-weight:600;font-size:15px;text-decoration:none;border:0;cursor:pointer;transition:background .2s,transform .2s;white-space:nowrap} .btn:hover{background:#2C2C2E} .btn:active{transform:translateY(1px)} .btn svg{width:16px;height:16px} .btn.ghost{background:transparent;color:var(--ink-2);padding:0} .btn.ghost:hover{color:var(--ink)} /* ---------- home-page nav (tiny, like the reference) ---------- */ .top{position:absolute;top:24px;left:0;right:0;z-index:40;display:flex;justify-content:center;pointer-events:none} .top .row{width:min(1040px,calc(100% - 40px));display:flex;justify-content:space-between;align-items:center;pointer-events:auto} .top .logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:17px;letter-spacing:-.02em} .top .logo img{height:18px;width:auto} .top ul{display:flex;gap:22px;list-style:none;font-size:14px;font-weight:500;color:var(--ink-2)} .top ul a{text-decoration:none} .top ul a:hover{color:var(--ink)} /* ============================================================ Overrides for the older pages (they inject