flask_template_codex/app/static/css/style.css

:root {
    color-scheme: light dark;
    --lavender: #b8a9c9;
    --blue: #a8d8ea;
    --yellow: #ffeaa7;
    --orange: #ffb4a2;
    --beige: #f5f0e8;
    --surface: #fffdf9;
    --text: #2d2d3a;
    --muted: #626274;
    --focus: #67547d;
    --border: #d9d2c8;
    --space: clamp(1rem, 3vw, 2rem);
}

* {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    margin: 0;
    background: var(--beige);
    color: var(--text);
    font: 1rem/1.6 system-ui, sans-serif;
}

a {
    color: #57436c;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}

.container {
    width: min(100% - 2rem, 62rem);
    margin-inline: auto;
}

.site-header {
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.nav,
.nav__actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nav {
    min-height: 4.5rem;
    justify-content: space-between;
}

.nav__actions form {
    margin: 0;
}

.brand {
    color: var(--text);
    font-size: 1.35rem;
    font-weight: 750;
    text-decoration: none;
}

.main-content {
    padding-block: clamp(2rem, 8vw, 5rem);
}

.hero,
.panel {
    max-width: 36rem;
    padding: var(--space);
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--surface);
    box-shadow: 0 0.5rem 2rem rgb(45 45 58 / 8%);
}

.eyebrow {
    color: var(--muted);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.field {
    margin-block: 1.25rem;
}

.field label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 650;
}

.field input {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: var(--surface);
    color: var(--text);
    font: inherit;
}

.field__errors {
    margin-block: 0.35rem 0;
    padding-left: 1.25rem;
    color: #754338;
}

.check-field {
    margin-block: 1rem;
}

.button {
    display: inline-block;
    min-height: 2.75rem;
    padding: 0.6rem 1rem;
    border: 1px solid #79678f;
    border-radius: 0.6rem;
    background: var(--lavender);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
}

.button--quiet {
    background: transparent;
}

.message {
    max-width: 36rem;
    padding: 0.8rem 1rem;
    border-left: 0.35rem solid var(--blue);
    border-radius: 0.4rem;
    background: var(--surface);
}

.message--error {
    border-color: var(--orange);
}

.skip-link {
    position: absolute;
    top: 0;
    left: -9999px;
    z-index: 10;
    padding: 0.75rem;
    background: var(--surface);
}

.skip-link:focus {
    left: 0;
}

button,
a,
input {
    transition: color 0.2s ease, background-color 0.2s ease,
        border-color 0.2s ease, transform 0.2s ease;
}

@media (prefers-color-scheme: dark) {
    :root {
        --beige: #1e1e24;
        --surface: #292932;
        --text: #f5f0e8;
        --muted: #c5bdcc;
        --focus: #d4c0ee;
        --border: #4b4b58;
    }

    a {
        color: #d9c5f1;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media (max-width: 38rem) {
    .nav {
        align-items: flex-start;
        flex-direction: column;
        padding-block: 1rem;
    }
}