120 lines
2.2 KiB
CSS
120 lines
2.2 KiB
CSS
:root {
|
|
--color-bg: #f6f7fb;
|
|
--color-surface: #ffffff;
|
|
--color-text: #1c2430;
|
|
--color-muted: #5a6675;
|
|
--color-accent: #2f6fed;
|
|
--color-accent-strong: #1c4fd0;
|
|
--color-border: #e2e6ee;
|
|
--focus-ring: #f5a623;
|
|
--radius: 12px;
|
|
--shadow: 0 4px 14px rgba(28, 36, 48, 0.08);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
background: var(--color-bg);
|
|
color: var(--color-text);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
#app {
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
padding: 32px 20px 48px;
|
|
}
|
|
|
|
.page-header {
|
|
text-align: center;
|
|
margin-bottom: 28px;
|
|
}
|
|
|
|
.page-header h1 {
|
|
margin: 0 0 8px;
|
|
font-size: clamp(1.6rem, 4vw, 2.2rem);
|
|
}
|
|
|
|
.page-header .lead {
|
|
margin: 0;
|
|
color: var(--color-muted);
|
|
}
|
|
|
|
.visually-hidden {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
overflow: hidden;
|
|
clip: rect(0 0 0 0);
|
|
clip-path: inset(50%);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tiles {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
|
gap: 20px;
|
|
}
|
|
|
|
.tile {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
padding: 28px 16px;
|
|
background: var(--color-surface);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius);
|
|
box-shadow: var(--shadow);
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
color: var(--color-text);
|
|
cursor: pointer;
|
|
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
|
|
}
|
|
|
|
.tile:hover {
|
|
border-color: var(--color-accent);
|
|
box-shadow: 0 8px 20px rgba(28, 36, 48, 0.12);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.tile:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.tile img {
|
|
width: 48px;
|
|
height: 48px;
|
|
color: var(--color-accent);
|
|
pointer-events: none;
|
|
}
|
|
|
|
button:focus-visible {
|
|
outline: 3px solid var(--focus-ring);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.status {
|
|
margin-top: 32px;
|
|
text-align: center;
|
|
font-size: 1.05rem;
|
|
color: var(--color-muted);
|
|
background: var(--color-surface);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius);
|
|
padding: 14px 18px;
|
|
min-height: 1.5em;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.tile {
|
|
transition: none;
|
|
}
|
|
}
|