/* ===================================================================== MUEVO · Front-end base (WordPress-safe) A SCOPED version of the prototype's base layer. Everything here lives under .muevo-frontend so it never touches the host theme's body/html or global elements. (The prototype's muevo-base.css is the standalone demo shell — it restyles globally — and is intentionally NOT shipped.) Design tokens come from muevo-tokens.css (scoped to .muevo-theme-*), component styles from muevo-components(.extra).css. ===================================================================== */ .muevo-frontend{ box-sizing:border-box; font-family:var(--muevo-font, 'Manrope', system-ui, sans-serif); color:var(--muevo-text); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; line-height:1.5; } .muevo-frontend *, .muevo-frontend *::before, .muevo-frontend *::after{ box-sizing:border-box; } .muevo-frontend img{ display:block; max-width:100%; } .muevo-frontend button{ font:inherit; color:inherit; cursor:pointer; background:none; border:none; } .muevo-frontend a{ color:inherit; text-decoration:none; } /* component group + label (catalog chrome, scoped) */ .muevo-frontend .cat-group{ margin-top:clamp(34px,5vw,64px); } .muevo-frontend .cat-group:first-child{ margin-top:0; } .muevo-frontend .cat-group-head{ display:flex; align-items:center; gap:14px; margin-bottom:22px; } .muevo-frontend .cat-group-head .n{ font-family:var(--muevo-font-mono); font-size:.72rem; color:var(--muevo-primary); border:1px solid var(--muevo-border-strong); border-radius:100px; padding:.3em .7em; } .muevo-frontend .cat-group-head h3{ font-family:var(--muevo-font-display); font-weight:var(--muevo-display-weight); font-size:clamp(1.2rem,2vw,1.5rem); color:var(--muevo-text); margin:0; letter-spacing:-.01em; } .muevo-frontend .cat-group-head .line{ flex:1; height:1px; background:var(--muevo-border); } /* a single specimen frame */ .muevo-frontend .specimen{ margin-bottom:22px; } .muevo-frontend .specimen-label{ display:flex; align-items:center; gap:8px; margin-bottom:10px; font-family:var(--muevo-font-mono); font-size:.68rem; letter-spacing:.06em; color:var(--muevo-text-muted); } .muevo-frontend .specimen-label .dot{ width:5px; height:5px; border-radius:50%; background:var(--muevo-primary); } .muevo-frontend .specimen-grid{ display:grid; gap:22px; } .muevo-frontend .specimen-grid.cols-2{ grid-template-columns:repeat(2,1fr); } .muevo-frontend .specimen-grid.cols-3{ grid-template-columns:repeat(3,1fr); } .muevo-frontend .specimen-grid.cols-4{ grid-template-columns:repeat(4,1fr); } @media (max-width:1000px){ .muevo-frontend .specimen-grid.cols-3,.muevo-frontend .specimen-grid.cols-4{ grid-template-columns:repeat(2,1fr); } } @media (max-width:680px){ .muevo-frontend .specimen-grid{ grid-template-columns:1fr !important; } } /* utilities used by the catalog output */ .muevo-frontend .mv-row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; } .muevo-frontend .mv-stack{ display:flex; flex-direction:column; } .muevo-frontend .mv-spread{ display:flex; align-items:center; justify-content:space-between; gap:14px; } /* give the wrapper the active theme's page background so components sit on the right surface even when dropped into a light/dark host theme */ .muevo-frontend{ background:var(--muevo-background); padding:clamp(20px,3vw,40px); border-radius:var(--muevo-radius-lg); }