suzzy-frontend/suzzy-v0-standalone/assets/styles/template-global.css

/* General Styling and Colors for all pages */
:root {
    --transition-time: 200ms;
    --background-layer-5: #1d1e2e;
    --background-layer-4: #212335;
    --background-layer-3: #282a3f;
    --background-layer-2: #2d2f47;
    --background-layer-1: #333550;
    --background-layer-0: #a1a8ff;
    --text-layer-1: #f0f0f0;
    --text-layer-2: #181818;
    --text-layer-3: #b4b4b4;
    --text-error-1: #f63232;
}

body {
    background-color: var(--background-layer-5);
    padding: 0;
    margin: 0;
}

p,
a,
pre,
tr,
td,
ul,
li,
noscript,
label,
input,
textarea,
button,
span {
    margin: 0;
    padding: 0;
    color: var(--text-layer-1);
    font-family: 'Poppins', Arial, sans-serif;
    font-weight: 400;
    font-size: 16px;
    padding: 4px 0;
}


/* Utility: Text */
.text-hero {
    font-weight: 600;
    font-size: xxx-large;
    color: var(--background-layer-0);
}

.text-headline {
    font-weight: 600;
    font-size: xx-large;
    color: var(--background-layer-0);
    line-height: 1;
    padding-top: 0;
}

.text-header {
    color: var(--background-layer-0);
    font-size: large;
    font-weight: 600;
}

.text-error {
    font-weight: bold;
    font-style: italic;
    color: var(--text-error-1);
}

.text-tip {
    font-size: small;
}

.text-muted,
s {
    color: var(--text-layer-3);
}

/* Utility: Buttons */
button.small {
    font-size: small;
    border: none;
    background-color: transparent;
    cursor: pointer;
    text-align: left;
    width: fit-content;
    color: var(--text-layer-1);
    transition: var(--transition-time) ease-in-out all;
}

button.small:focus-visible,
button.small:hover {
    color: var(--background-layer-0);
}

button.small:disabled {
    color: var(--text-layer-1) !important;
    opacity: 0.5;
    cursor: default;
}

button.default,
a.default {
    min-width: fit-content;
    width: 100px;
    text-align: center;
    text-decoration: none;
    height: fit-content;
    text-wrap: nowrap;
    border-radius: 8px;
    padding: 4px 8px;
    outline: none;
    border: none;
    cursor: pointer;
    color: var(--text-layer-1);
    background-color: var(--background-layer-3);
    border: 2px solid var(--background-layer-2);
    transition: var(--transition-time) ease-in-out all;
}

a.default:hover,
a.default:focus-visible,
button.default:hover,
button.default:focus-visible {
    color: var(--text-layer-1);
    border-color: var(--background-layer-0);
    background-color: var(--background-layer-1);
}

a.destructive:hover,
a.destructive:focus-visible,
button.destructive:hover,
button.destructive:focus-visible {
    border-color: var(--text-error-1);
}

*[disabled],
*:disabled {
    opacity: 0.75 !important;
    background-color: var(--background-layer-3) !important;
    border-color: var(--background-layer-2) !important;
    pointer-events: none !important;
}

a.wide,
button.wide {
    width: 100%;
}

a.tall,
button.tall {
    height: 100%;
}

/* Utility: Inputs */
input.text,
textarea.text {
    width: 100%;
    height: fit-content;
    text-wrap: nowrap;
    border-radius: 8px;
    box-sizing: border-box;
    padding: 8px 16px;
    color: var(--text-layer-1);
    background-color: var(--background-layer-3);
    border: 2px solid var(--background-layer-2);
    transition: var(--transition-time) ease-in-out border;
    outline: none;
}

input.text:focus-visible,
textarea.text:focus-visible {
    color: var(--text-layer-1);
    border-color: var(--background-layer-0);
    background-color: var(--background-layer-1);
}

input.text:required:focus-visible:invalid,
textarea.text:required:focus-visible:invalid {
    border: 2px solid var(--text-error-1);
}

textarea.text {
    resize: vertical;
    min-height: 45px;
    text-wrap: wrap;
}


/* Utility: Spacers */
div.divider-line {
    height: 2px;
    width: 100%;
    margin: 8px 0;
    background-color: var(--background-layer-1);
}

div.divider-dashed {
    display: none;
    width: 100%;
    margin: 8px 0;
    border: 1px dashed var(--background-layer-0);
    box-sizing: border-box;
}

div.divider-header {
    width: 100%;
    border-bottom: 2px solid var(--background-layer-1);
    padding-bottom: 8px;
    margin-bottom: 8px;
    box-sizing: border-box;
}

div.divider-spacer {
    margin: 16px 0;
}

/* Utility: Shadows & Animations */
.special-shadow {
    filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
}

.special-dropshadow {
    filter: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));
}

.special-pulse {
    animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .5;
    }
}

/* Mobile Styling */
@media (max-width: 640px) {
    div.divider-dashed {
        display: block;
    }
}