@charset "utf-8";

@font-face {
    font-family: "AUPassata";
    src: url("/assets/aupassata_rg-webfont.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: fallback;
}

@font-face {
    font-family: "AUPassata";
    src: url("/assets/aupassata_bold-webfont.woff2") format("woff2");
    font-weight: 600;
    font-style: bold;
    font-display: fallback;
}

:root {
    --rounded-sm: 0.5rem;
    --rounded-lg: 1rem;

    --text-size-xs: 0.69rem;
    --text-size-sm: 0.83rem;
    --text-size-md: 1rem;
    --text-size-lg: 1.2rem;
    --text-size-xl: 1.44rem;
    --text-size-2xl: 1.73rem;
    --text-size-3xl: 2.07rem;
    --text-size-4xl: 2.49rem;
    --text-size-5xl: 2.99rem;
    --text-size-6xl: 3.59rem;
    --text-size-7xl: 4.3rem;

    --color-dark: #0a0a0a;
    --color-lighter: #fefefe;
    --color-light: #eaeaea;
    --color-border: #9e9e9e;
    --color-interactive: #d4d4d4;

    --color-blue-50: oklch(0.97 0.015 251.2);
    --color-blue-100: oklch(0.848 0.077 252.2);
    --color-blue-200: oklch(0.725 0.104 252.3);
    --color-blue-300: oklch(0.603 0.105 252.7);
    --color-blue-400: oklch(0.481 0.105 252.3);
    --color-blue-500: oklch(0.359 0.108 252.3);
    --color-blue-600: oklch(0.328 0.1 252.6);
    --color-blue-700: oklch(0.289 0.088 252.7);
    --color-blue-800: oklch(0.247 0.075 252.4);
    --color-blue-900: oklch(0.209 0.064 252.7);

    --color-lilac-50: oklch(0.97 0.015 286.1);
    --color-lilac-100: oklch(0.879 0.063 289);
    --color-lilac-200: oklch(0.785 0.104 289.3);
    --color-lilac-300: oklch(0.695 0.103 289.2);
    --color-lilac-400: oklch(0.602 0.102 289);
    --color-lilac-500: oklch(0.51 0.107 289.3);
    --color-lilac-600: oklch(0.449 0.132 289.3);
    --color-lilac-700: oklch(0.37 0.157 289.1);
    --color-lilac-800: oklch(0.285 0.162 289.4);
    --color-lilac-900: oklch(0.211 0.12 289.5);

    --color-cyan-50: oklch(0.971 0.018 229);
    --color-cyan-100: oklch(0.91 0.055 229.2);
    --color-cyan-200: oklch(0.847 0.095 229.8);
    --color-cyan-300: oklch(0.788 0.109 229.5);
    --color-cyan-400: oklch(0.725 0.109 229.4);
    --color-cyan-500: oklch(0.665 0.113 229.6);
    --color-cyan-600: oklch(0.574 0.114 229.5);
    --color-cyan-700: oklch(0.451 0.089 229.4);
    --color-cyan-800: oklch(0.323 0.064 230.2);
    --color-cyan-900: oklch(0.212 0.042 229.3);

    --color-turqouise-50: oklch(0.97 0.042 189.2);
    --color-turqouise-100: oklch(0.909 0.112 189.8);
    --color-turqouise-200: oklch(0.849 0.112 189.6);
    --color-turqouise-300: oklch(0.789 0.112 190.1);
    --color-turqouise-400: oklch(0.729 0.113 189.1);
    --color-turqouise-500: oklch(0.669 0.116 189.6);
    --color-turqouise-600: oklch(0.577 0.1 189.5);
    --color-turqouise-700: oklch(0.454 0.078 190);
    --color-turqouise-800: oklch(0.325 0.056 189.3);
    --color-turqouise-900: oklch(0.208 0.036 191.6);

    --color-green-50: oklch(0.97 0.077 125);
    --color-green-100: oklch(0.915 0.137 124.5);
    --color-green-200: oklch(0.862 0.138 124.4);
    --color-green-300: oklch(0.807 0.137 124.4);
    --color-green-400: oklch(0.754 0.138 124.6);
    --color-green-500: oklch(0.7 0.142 124.6);
    --color-green-600: oklch(0.602 0.151 124.7);
    --color-green-700: oklch(0.469 0.118 124.7);
    --color-green-800: oklch(0.334 0.083 124.5);
    --color-green-900: oklch(0.21 0.052 124.5);

    --color-yellow-50: oklch(0.97 0.031 84.6);
    --color-yellow-100: oklch(0.941 0.061 84);
    --color-yellow-200: oklch(0.913 0.091 84.2);
    --color-yellow-300: oklch(0.884 0.123 84);
    --color-yellow-400: oklch(0.856 0.154 84.1);
    --color-yellow-500: oklch(0.827 0.17 84);
    --color-yellow-600: oklch(0.704 0.145 83.7);
    --color-yellow-700: oklch(0.537 0.11 83.8);
    --color-yellow-800: oklch(0.365 0.075 83.5);
    --color-yellow-900: oklch(0.21 0.043 82.5);

    --color-orange-50: oklch(0.969 0.018 54);
    --color-orange-100: oklch(0.918 0.05 56.4);
    --color-orange-200: oklch(0.866 0.086 57.2);
    --color-orange-300: oklch(0.812 0.126 57);
    --color-orange-400: oklch(0.76 0.168 56.9);
    --color-orange-500: oklch(0.707 0.172 56.7);
    --color-orange-600: oklch(0.608 0.147 57.1);
    --color-orange-700: oklch(0.475 0.115 57);
    --color-orange-800: oklch(0.334 0.082 56.2);
    --color-orange-900: oklch(0.21 0.051 57.2);

    --color-red-50: oklch(0.971 0.014 28);
    --color-red-100: oklch(0.89 0.058 26.2);
    --color-red-200: oklch(0.812 0.106 27.4);
    --color-red-300: oklch(0.733 0.164 26.7);
    --color-red-400: oklch(0.653 0.23 26.8);
    --color-red-500: oklch(0.574 0.234 26.8);
    --color-red-600: oklch(0.5 0.204 26.8);
    --color-red-700: oklch(0.403 0.164 26.8);
    --color-red-800: oklch(0.301 0.123 26.8);
    --color-red-900: oklch(0.209 0.085 26.3);

    --color-magenta-50: oklch(0.97 0.016 358);
    --color-magenta-100: oklch(0.894 0.061 358.9);
    --color-magenta-200: oklch(0.819 0.111 359);
    --color-magenta-300: oklch(0.744 0.171 359.2);
    --color-magenta-400: oklch(0.668 0.237 359.1);
    --color-magenta-500: oklch(0.592 0.24 359.2);
    --color-magenta-600: oklch(0.516 0.209 359.4);
    --color-magenta-700: oklch(0.413 0.168 359.1);
    --color-magenta-800: oklch(0.306 0.124 358.8);
    --color-magenta-900: oklch(0.211 0.085 359.7);

    --color-blue: oklch(0.359 0.108 252.3);
    --color-blue-dark: oklch(0.261 0.074 250.1);
    --color-lilac: oklch(0.51 0.107 289.3);
    --color-lilac-dark: oklch(0.262 0.068 296.4);
    --color-cyan: oklch(0.665 0.113 229.6);
    --color-cyan-dark: oklch(0.345 0.076 237.9);
    --color-turqoise: oklch(0.669 0.116 189.6);
    --color-turqoise-dark: oklch(0.353 0.061 191.5);
    --color-green: oklch(0.7 0.142 124.6);
    --color-green-dark: oklch(0.429 0.085 127.9);
    --color-yellow: oklch(0.827 0.17 84);
    --color-yellow-dark: oklch(0.427 0.086 87);
    --color-orange: oklch(0.707 0.172 56.7);
    --color-orange-dark: oklch(0.372 0.082 59.7);
    --color-red: oklch(0.574 0.234 26.8);
    --color-red-dark: oklch(0.306 0.111 26.9);
    --color-magenta: oklch(0.592 0.24 359.2);
    --color-magenta-dark: oklch(0.315 0.128 359);
}

/* Box sizing rules */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Prevent font size inflation */
html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
    margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
    list-style: none;
}

/* Set core body defaults */
body {
    min-height: 100vh;
    line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
button,
input,
label {
    line-height: 1.1;
}

/* Balance text wrapping on headings */
h1,
h2,
h3,
h4 {
    text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
    text-decoration-skip-ink: auto;
    color: currentColor;
}

/* Make images easier to work with */
img,
picture {
    max-width: 100%;
    display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
    font: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
    min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
    scroll-margin-block: 5ex;
}

* {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    padding: 0;
    background: var(--color-cyan-dark);
    color: var(--color-dark);
    font-family:
        AUPassata,
        -apple-system,
        BlinkMacSystemFont,
        avenir next,
        avenir,
        segoe ui,
        helvetica neue,
        helvetica,
        Cantarell,
        Ubuntu,
        roboto,
        noto,
        arial,
        sans-serif;
}

p {
    margin: 0;
    margin-bottom: 1em;
}

input,
textarea,
select {
    font-size: inherit;
    background: var(--color-light);
    border: 2px solid var(--color-interactive);
    border-radius: var(--rounded-sm);
    padding: 1rem;
    margin-bottom: 1.25rem;
    width: 100%;
}

input:focus,
input:hover,
select:focus,
select:hover {
    border-color: var(--color-border);
}

label {
    display: block;
    margin-bottom: 0.25em;
    font-weight: bold;
}

button,
.btn {
    border: none;
    border-radius: var(--rounded-sm);
    color: white;
    cursor: pointer;
    font-size: var(--text-size-sm);
    font-weight: bold;
    justify-self: center;
    letter-spacing: 0.05em;
    padding: 0.75rem 1rem;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition-duration: 0.25s;
    transition-property: color, background-color;
    display: inline-block;
    margin-inline: auto;
}

.btn svg {
    width: 1.5rem;
    height: 1.5rem;
    vertical-align: middle;
}

.btn-magenta {
    color: var(--color-magenta-100);
    background: var(--color-magenta-dark);
    &:hover {
        background: var(--color-magenta-700);
    }
}

.btn-green {
    color: var(--color-green-700);
    background: var(--color-green-300);
    &:hover {
        background: var(--color-green-500);
    }
}

.btn-cyan {
    color: var(--color-cyan-100);
    background: var(--color-cyan-dark);
    &:hover {
        background: var(--color-cyan-700);
    }
}

.centered {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4rem 0;
}

.container {
    padding: 2rem;
    border-radius: var(--rounded-lg);
    background-color: var(--color-lighter);
    width: 70ch;
    margin-inline: auto;
    margin-block: 1rem;
}

form {
    width: 100%;
}

form .btn {
    display: block;
    margin-inline: auto;
}

.error {
    color: var(--color-red-500);
    margin-bottom: 1em;
}

h1 {
    font-size: 200%;
    margin: 0;
    margin-bottom: 0.5em;
}

h2 {
    font-size: 125%;
    margin-block: 1.5rem 0.5rem;
}

a {
    color: var(--color-cyan-dark);
    text-decoration: underline;
    &:hover {
        text-decoration: none;
    }
}

.qr {
    display: block;
    margin: 0 auto;
}

.totp-field {
    text-align: center;
    font-size: 2.5rem;
    font-family: monospace;
    letter-spacing: 25%;
    padding: 0.5rem;
}

.card-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: auto;
    row-gap: 1rem;
}

.card {
    display: grid;
    grid-template-areas:
        "thumbnail header "
        "thumbnail content"
        "thumbnail footer ";
    grid-template-columns: min-content auto;
    grid-template-rows: min-content auto;
    grid-gap: 0.25rem 1rem;

    width: 100%;
    padding: 1rem;
    background: var(--color-light);
    border: 2px solid var(--color-interactive);
    border-radius: var(--rounded-sm);
    text-decoration: none;
    color: var(--color-dark);

    transition-duration: 0.25s;
    transition-property: color, background-color, border;

    .card-header {
        grid-area: header;
        width: 100%;
    }

    .card-header h3 {
        margin-block: 0;
    }

    .card-content {
        grid-area: content;
    }

    .card-thumbnail {
        grid-area: thumbnail;
        align-self: center;
        width: 100px;
        height: 100px;
        line-height: 1;

        align-content: center;
        justify-content: center;

        background: var(--color-interactive);
        border-radius: calc(var(--rounded-sm) - 4px);

        display: grid;
        grid-template-areas: "overlay";
    }

    .card-thumbnail svg {
        grid-area: overlay;

        border-radius: calc(var(--rounded-sm) - 4px);
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: contain;
        padding: 1.25rem;
        opacity: 0.9;
        color: white;
        filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.8));
    }

    .card-thumbnail .lds-heart {
        grid-area: overlay;
        filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.8));
    }

    .card-label {
        font-weight: bold;
    }

    .card-footer {
        align-self: end;
    }
}

a.card:hover {
    border-color: var(--color-border);
    cursor: pointer;
}

.label {
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: var(--text-size-sm);
    font-weight: bold;
    color: var(--color-border);
}

.desktop-status {
    margin-bottom: 0.5rem;
}

.desktop-screenshot {
    grid-area: overlay;

    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: calc(var(--rounded-sm) - 4px);
}

.text-logo {
    font-size: 1.35rem;
    letter-spacing: 20%;
    text-decoration: none;
    margin: 0;
    font-weight: bold;
    white-space: nowrap;
    color: var(--color-cyan-dark);

    span:nth-child(2) {
        color: var(--color-cyan-500);
    }
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}
header nav {
    display: flex;
    align-items: end;
    column-gap: 1rem;
}

.lds-heart {
    animation: lds-heart 1.8s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}

@keyframes lds-heart {
    0% {
        transform: scale(0.95);
    }

    5% {
        transform: scale(1.1);
    }

    39% {
        transform: scale(0.85);
    }

    45% {
        transform: scale(1);
    }

    60% {
        transform: scale(0.95);
    }

    100% {
        transform: scale(0.9);
    }
}