nusqool-replica/src/app/globals.css

70 lines
1.3 KiB
CSS

@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
--foreground-rgb: 74, 55, 40;
--background-rgb: 250, 248, 245;
}
html {
scroll-behavior: smooth;
}
body {
color: rgb(var(--foreground-rgb));
background: rgb(var(--background-rgb));
}
@layer base {
h1, h2, h3, h4 {
@apply font-serif;
}
}
@layer components {
.btn-primary {
@apply inline-block px-8 py-3 bg-nusqool-yellow text-nusqool-brown font-medium
rounded-sm hover:bg-opacity-90 transition-all duration-300;
}
.btn-secondary {
@apply inline-block px-8 py-3 border-2 border-nusqool-brown text-nusqool-brown
font-medium rounded-sm hover:bg-nusqool-brown hover:text-white transition-all duration-300;
}
.section-padding {
@apply py-16 md:py-24 lg:py-32 px-6 md:px-12 lg:px-20;
}
.heading-xl {
@apply text-3xl md:text-4xl lg:text-5xl font-serif leading-tight;
}
.heading-lg {
@apply text-2xl md:text-3xl lg:text-4xl font-serif leading-tight;
}
.body-text {
@apply text-base md:text-lg leading-relaxed text-nusqool-warmGray;
}
}
/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #FAF8F5;
}
::-webkit-scrollbar-thumb {
background: #E8C547;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #d4b03e;
}