122 lines
2.5 KiB
SCSS
122 lines
2.5 KiB
SCSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer components {}
|
|
|
|
body {
|
|
@apply bg-primary-500 select-none;
|
|
}
|
|
|
|
.container {
|
|
@apply max-w-7xl mx-auto grid grid-cols-12 items-center;
|
|
}
|
|
|
|
.header {
|
|
@apply p-2 bg-slate-200;
|
|
}
|
|
|
|
.logo {
|
|
@apply text-orange-400 font-bold w-20 text-xl leading-4 col-span-2 py-4;
|
|
}
|
|
|
|
.menu {
|
|
@apply col-span-8 flex justify-between;
|
|
}
|
|
|
|
a[href^="#"] {
|
|
@apply underline decoration-dotted underline-offset-4 decoration-neutral-500;
|
|
}
|
|
|
|
.footer {
|
|
@apply px-2 py-4 bg-slate-200;
|
|
|
|
.k-logo {
|
|
@apply col-span-2 row-span-2 text-9xl text-orange-400;
|
|
|
|
svg {
|
|
@apply my-0 mx-auto;
|
|
}
|
|
}
|
|
|
|
&-text {
|
|
@apply col-span-5 text-sm prose;
|
|
|
|
&-small {
|
|
@apply col-span-10 text-xs min-w-full prose;
|
|
}
|
|
}
|
|
}
|
|
|
|
.block {
|
|
@apply py-10;
|
|
|
|
&_imgbg {
|
|
@apply py-0 bg-no-repeat bg-cover bg-bottom;
|
|
|
|
img {
|
|
max-height: 50vh;
|
|
}
|
|
}
|
|
|
|
&-content {
|
|
@apply col-span-6 h-full flex flex-col justify-between prose;
|
|
}
|
|
|
|
&-text {
|
|
@apply whitespace-break-spaces;
|
|
}
|
|
|
|
&-title {
|
|
@apply text-3xl prose-h1:font-black
|
|
}
|
|
|
|
&-image {
|
|
@apply col-span-6 flex justify-center items-center;
|
|
min-height: 50vh;
|
|
}
|
|
}
|
|
|
|
.review {
|
|
@apply col-span-4 grid grid-cols-4 items-center px-4;
|
|
|
|
&-image {
|
|
@apply rounded-full size-20 bg-slate-300 overflow-hidden col-span-1;
|
|
}
|
|
|
|
&-content {
|
|
@apply col-span-3 text-end italic;
|
|
}
|
|
|
|
&-title {
|
|
@apply col-span-4 font-bold text-lg text-end mt-4;
|
|
}
|
|
}
|
|
|
|
.modal {
|
|
@apply bg-white p-10 border rounded shadow prose;
|
|
|
|
&-backdrop {
|
|
@apply fixed top-0 left-0 right-0 bottom-0 bg-white bg-opacity-70 flex items-center justify-center;
|
|
}
|
|
|
|
form {
|
|
@apply flex flex-col gap-4 items-center;
|
|
}
|
|
}
|
|
|
|
label {
|
|
@apply block mb-2 text-sm font-medium text-gray-900 dark:text-white;
|
|
}
|
|
|
|
input {
|
|
@apply bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded focus:ring-blue-500 focus:border-blue-500 text-lg w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500;
|
|
}
|
|
|
|
button {
|
|
@apply rounded-full bg-primary hover:bg-primary-400 transition-colors px-10 py-3 inline-block text-lg font-bold shadow-lg cursor-pointer disabled:opacity-50 disabled:hover:bg-primary;
|
|
|
|
&[type="reset"] {
|
|
@apply bg-neutral hover:bg-neutral-400
|
|
}
|
|
} |