/* mini-fw.css - Minimal framework base Purpose: base variables, helpers and common utilities. Keep this file linked in . */ :root{ --fw-gap: 12px; --fw-radius: 6px; --fw-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; --fw-transition: 200ms ease; } /* Reset-ish */ *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family:var(--fw-font); line-height:1.45; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; color: #111; background: #fff; } /* Core helpers */ .container{max-width:1200px;margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px;} .row{display:flex;flex-wrap:wrap} .col{flex:1 1 0%} /* Flex / Grid utilities (common ones for quick start) */ .flex{display:flex} .grid{display:grid} .inline-flex{display:inline-flex} .center{display:flex;align-items:center;justify-content:center} /* Text helpers */ .text-center{text-align:center} .text-right{text-align:right} .text-left{text-align:left} .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Visual */ .card{background:#fff;border-radius:var(--fw-radius);box-shadow:0 6px 20px rgba(0,0,0,0.06);padding:16px} .badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:12px} /* Accessibility */ .visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap} /* Utility fallbacks for common properties (runtime will apply inline styles when you use bracket syntax) Keep this file small - most utilities are created at runtime by the JS parser. */ /* Responsive breakpoint helper classes (optional, purely for non-bracket usage) */ @media (min-width:640px){ .sm-only{display:block} } @media (min-width:768px){ .md-only{display:block} } @media (min-width:1024px){ .lg-only{display:block} } @media (min-width:1280px){ .xl-only{display:block} }