@media (max-width: 1100px) {
.work-layout {
grid-template-columns: 210px 1fr;
}
.material-grid {
grid-template-columns: 1fr 1fr;
}
.kpis {
grid-template-columns: 1fr 1fr;
}
.today-grid {
grid-template-columns: 1fr;
}
.app-header {
padding: 0 1rem;
}
.header-links {
gap: 0.8rem;
}
.workspace {
padding: 2mm 2mm 3rem;
}
.hero-copy {
padding: 1.2rem 1.3rem;
}
.store-hero {
min-height: 210px;
}
.split {
grid-template-columns: 1fr;
}
}
@media (max-width: 760px) {
.app-header {
height: auto;
min-height: 75px;
padding: 0.8rem 1rem;
flex-wrap: wrap;
gap: 0.6rem;
}
.brand strong {
font-size: 1.06rem;
}
.header-links {
font-size: 0.8rem;
gap: 0.65rem;
}
.header-links .desktop-only,
.desktop-only {
display: none;
}
.store-main {
padding: 1.2rem 1rem 3rem;
}
.store-hero {
grid-template-columns: 1fr;
}
.hero-copy {
padding: 1.1rem 1.1rem 1.2rem;
}
.hero-copy h1 {
font-size: 1.45rem;
}
.hero-copy .row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.45rem;
}
.hero-copy .row .btn {
width: 100%;
justify-content: center;
padding: 0.55rem 0.5rem;
font-size: 0.85rem;
text-align: center;
}
.hero-image {
height: 148px;
min-height: 148px;
object-position: center;
}
.art-banner {
padding: 1rem 1.1rem;
gap: 0.6rem;
}
.products {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.8rem;
}
.product-card figure {
height: 170px;
}
.product-card .product-info {
padding: 0.9rem;
}
.product-card h3 {
font-size: 1rem;
}
.art-banner {
grid-template-columns: auto 1fr;
padding: 1rem;
gap: 0.5rem 0.7rem;
}
.art-banner .big-icon {
font-size: 1.9rem;
}
.art-banner h2 {
font-size: 1.2rem;
}
.art-banner p {
font-size: 0.9rem;
}
.art-banner .promise {
font-size: 0.85rem;
padding: 0.3rem 0.6rem;
}
.art-banner .stack,
.art-banner .btn {
grid-column: 1/-1;
}
.art-banner .stack {
gap: 0.45rem;
}
.work-layout {
display: block;
}
.sidebar {
display: none;
position: fixed;
z-index: 20;
top: 0;
bottom: 0;
width: 270px;
box-shadow: 10px 0 50px var(--line-pink-2-veil);
overflow: auto;
}
.sidebar.open {
display: flex;
}
.mobile-menu {
display: inline-flex;
}
.workspace {
padding: 2mm 2mm 4rem;
}
.page-heading {
align-items: flex-start;
margin-bottom: 1.2rem;
}
.page-heading h1 {
font-size: 1.7rem;
}
.greeting {
padding: 1.2rem;
grid-template-columns: 1fr 85px;
}
.greeting h2 {
font-size: 1.6rem;
}
.greeting img {
width: 85px;
height: 85px;
}
.grid.three {
grid-template-columns: 1fr;
}
.material-grid {
grid-template-columns: 1fr 1fr;
}
.grid.two,
.form-grid {
grid-template-columns: 1fr;
}
.welcome-grid {
grid-template-columns: 1fr;
}
.sync {
max-width: 100%;
font-size: 0.75rem;
}
.kpi {
padding: 1rem;
}
.kpi strong {
font-size: 1.6rem;
}
.order-row {
grid-template-columns: auto 1fr;
}
.order-row > .btn {
grid-column: 2;
width: max-content;
}
.dialog-body {
padding: 1rem;
}
.dialog-head {
padding: 1rem;
}
.dialog-foot {
padding: 1rem;
}
.welcome {
padding: 2.5rem 1rem;
}
.welcome h1 {
font-size: 2.3rem;
}
.form-grid .wide {
grid-column: auto;
}
.benefits {
justify-content: flex-start;
font-size: 0.82rem;
}
.store-footer {
padding: 1rem 1.1rem 1.3rem;
justify-content: center;
text-align: center;
}
.footer-actions {
justify-content: center;
}
.card {
padding: 1.15rem;
}
}
@media (max-width: 420px) {
.products,
.material-grid {
grid-template-columns: 1fr;
}
.footer-actions {
gap: 0.45rem;
}
.footer-pill {
padding: 0.4rem 0.8rem;
font-size: 0.86rem;
}
.product-card figure {
height: 230px;
}
.kpis {
gap: 0.6rem;
}
.greeting {
grid-template-columns: 1fr;
}
.greeting img {
display: none;
}
.header-links {
width: 100%;
justify-content: flex-end;
}
}
@media (max-width: 760px) {
input,
select,
textarea {
font-size: 16px;
}
.toolbar > input {
flex: 1 1 100%;
width: 100%;
}
.icon-pill {
width: 44px;
height: 44px;
}
.chip,
.chip.small,
.btn.small,
.link-btn {
min-height: 44px;
}
input[type='checkbox'] {
min-width: 24px;
min-height: 24px;
}
.pill-choice input {
min-width: 0;
min-height: 0;
width: 1px;
height: 1px;
}
small,
.small {
font-size: 0.8rem;
}
.header-links {
flex-wrap: nowrap;
overflow-x: auto;
justify-content: flex-start;
scrollbar-width: none;
}
.header-links::-webkit-scrollbar {
display: none;
}
.header-links > * {
flex: 0 0 auto;
white-space: nowrap;
}
.header-links .owner-pill {
order: 4;
}
.header-links .live-dot {
order: 5;
}
.header-links .sync {
order: 6;
}
}
@supports (height: 100dvh) {
@media (max-width: 760px) {
.work-layout {
min-height: calc(100dvh - 112px);
}
.lg-gate {
min-height: 100dvh;
}
}
}
@media (prefers-reduced-motion: reduce) {
* {
scroll-behavior: auto !important;
transition: none !important;
animation: none !important;
}
}
@media print {
.sidebar,
.app-header,
.demo-strip,
.toolbar,
button,
.no-print,
.toast-area {
display: none !important;
}
.work-layout,
.workspace {
display: block;
padding: 0;
}
.card {
box-shadow: none;
break-inside: avoid;
}
.print-only {
display: block;
}
body {
background: var(--surface-neutral-9);
color: var(--ink-neutral-0);
}
.dialog {
position: static;
border: 0;
max-height: none;
}
.dialog::backdrop {
background: none;
}
}