stegonography-app/public/style.css

* {
    box-sizing: border-box;
}

:root {
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color: #18181b;

    background: #f4f4f5;
}

body {
    margin: 0;

    min-height: 100vh;

    background:
        radial-gradient(
            circle at top,
            #ffffff 0,
            #f4f4f5 45%,
            #e4e4e7 100%
        );
}

button,
input,
textarea {
    font: inherit;
}

.container {
    width:
        min(
            900px,
            calc(100% - 32px)
        );

    margin:
        0 auto;

    padding:
        56px 0 80px;
}


/* Header */

.header {
    margin-bottom: 32px;
}

.header h1 {
    margin:
        0 0 8px;

    font-size:
        clamp(
            32px,
            6vw,
            46px
        );

    letter-spacing:
        -0.04em;
}

.header p {
    margin: 0;

    color: #71717a;

    font-size: 16px;
}


/* Cards */

.card {
    margin-bottom: 24px;

    padding: 28px;

    background:
        rgba(
            255,
            255,
            255,
            0.92
        );

    border:
        1px solid #e4e4e7;

    border-radius: 16px;

    box-shadow:
        0 8px 30px
        rgba(
            0,
            0,
            0,
            0.05
        );
}

.card-header {
    margin-bottom: 28px;
}

.card-header h2 {
    margin:
        0 0 6px;

    font-size: 22px;

    letter-spacing:
        -0.02em;
}

.card-header p {
    margin: 0;

    color: #71717a;

    font-size: 14px;
}


/* Forms */

.form-group {
    margin-bottom: 22px;
}

label,
.label {
    display: block;

    margin-bottom: 9px;

    font-size: 14px;

    font-weight: 650;
}

.optional {
    margin-left: 4px;

    color: #a1a1aa;

    font-weight: 400;
}

.field-hint {
    margin-top: 7px;

    color: #71717a;

    font-size: 12px;
}

input[type="password"],
input[type="file"],
textarea {
    width: 100%;

    border:
        1px solid #d4d4d8;

    border-radius: 8px;

    background: #ffffff;

    color: #18181b;
}

input[type="password"] {
    padding:
        11px 12px;
}

textarea {
    display: block;

    min-height: 130px;

    padding: 12px;

    resize: vertical;
}

input:focus,
textarea:focus {
    outline: none;

    border-color: #71717a;

    box-shadow:
        0 0 0 3px
        rgba(
            113,
            113,
            122,
            0.12
        );
}


/* Dropzone */

.dropzone {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        170px;

    padding:
        28px;

    border:
        1.5px dashed #a1a1aa;

    border-radius:
        12px;

    background:
        #fafafa;

    text-align:
        center;

    cursor:
        pointer;

    transition:
        border-color 120ms ease,
        background 120ms ease,
        transform 120ms ease;
}

.dropzone:hover,
.dropzone:focus {
    outline: none;

    border-color:
        #52525b;

    background:
        #f4f4f5;
}

.dropzone.dragging {
    border-color:
        #18181b;

    background:
        #e4e4e7;

    transform:
        scale(1.01);
}

.dropzone.has-file {
    border-style:
        solid;

    border-color:
        #a1a1aa;

    background:
        #fafafa;
}

.dropzone-icon {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        42px;

    height:
        42px;

    margin-bottom:
        12px;

    border-radius:
        50%;

    background:
        #e4e4e7;

    font-size:
        22px;

    font-weight:
        700;
}

.dropzone strong {
    max-width:
        100%;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}

.dropzone span {
    margin-top:
        5px;

    color:
        #71717a;

    font-size:
        13px;
}


/* Mode */

.mode-selector {
    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        10px;
}

.mode-option {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    padding:
        11px;

    margin: 0;

    border:
        1px solid #d4d4d8;

    border-radius:
        8px;

    background:
        #ffffff;

    cursor:
        pointer;

    font-weight:
        550;

    transition:
        background 120ms ease,
        border-color 120ms ease;
}

.mode-option:hover {
    background:
        #f4f4f5;
}

.mode-option:has(
    input:checked
) {
    border-color:
        #18181b;

    background:
        #f4f4f5;
}

.mode-option input {
    margin: 0;
}


/* Image info */

.image-info {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        12px;

    margin-top:
        10px;

    padding:
        10px 12px;

    border:
        1px solid #e4e4e7;

    border-radius:
        8px;

    background:
        #fafafa;

    color:
        #52525b;

    font-size:
        13px;
}

.image-info strong {
    color:
        #18181b;
}


/* Buttons */

.button {
    width:
        100%;

    padding:
        12px 16px;

    border:
        0;

    border-radius:
        8px;

    background:
        #18181b;

    color:
        #ffffff;

    font-weight:
        650;

    cursor:
        pointer;

    transition:
        background 120ms ease,
        transform 120ms ease;
}

.button:hover {
    background:
        #27272a;
}

.button:active {
    transform:
        translateY(1px);
}

.button:disabled {
    opacity:
        0.5;

    cursor:
        not-allowed;

    transform:
        none;
}

.secondary-button {
    padding:
        7px 11px;

    border:
        1px solid #d4d4d8;

    border-radius:
        7px;

    background:
        #ffffff;

    color:
        #18181b;

    font-size:
        13px;

    cursor:
        pointer;
}

.secondary-button:hover {
    background:
        #f4f4f5;
}


/* Status */

.status {
    min-height:
        20px;

    margin-top:
        14px;

    font-size:
        14px;
}

.status.success {
    color:
        #166534;
}

.status.error {
    color:
        #b91c1c;
}


/* Results */

.result {
    margin-top:
        24px;

    padding-top:
        22px;

    border-top:
        1px solid #e4e4e7;
}

.result-header {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    margin-bottom:
        10px;
}

.result-header h3 {
    margin:
        0;
}

.result pre {
    margin:
        0;

    padding:
        16px;

    max-height:
        400px;

    overflow:
        auto;

    border-radius:
        8px;

    background:
        #f4f4f5;

    white-space:
        pre-wrap;

    overflow-wrap:
        anywhere;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size:
        13px;

    line-height:
        1.6;
}


/* Utility */

.hidden {
    display:
        none !important;
}


/* Mobile */

@media (
    max-width: 600px
) {

    .container {
        width:
            calc(100% - 20px);

        padding:
            28px 0 50px;
    }

    .card {
        padding:
            20px;
    }

    .mode-selector {
        grid-template-columns:
            1fr;
    }

    .image-info {
        flex-direction:
            column;
    }

    .dropzone {
        min-height:
            150px;
    }
}