143 lines
3.4 KiB
CSS
143 lines
3.4 KiB
CSS
@import 'tailwindcss';
|
|
|
|
@theme {
|
|
--color-deep-blue: #0a1219;
|
|
--color-deep-blue-light: #121e27;
|
|
--color-deep-blue-contrast: #1a2835;
|
|
|
|
--color-emerald: #10b981;
|
|
--color-emerald-dark: #059669;
|
|
--color-emerald-light: #34d399;
|
|
|
|
--color-text-primary: #ffffff;
|
|
--color-text-secondary: #94a3b8;
|
|
--color-text-tertiary: #64748b;
|
|
|
|
--color-accent-yellow: #fbbf24;
|
|
--color-accent-red: #ef4444;
|
|
--color-accent-purple: #8b5cf6;
|
|
}
|
|
|
|
body {
|
|
@apply !bg-deep-blue !text-text-primary h-full;
|
|
}
|
|
|
|
button,
|
|
a {
|
|
@apply cursor-pointer active:scale-95 !text-text-primary transition-all duration-200;
|
|
}
|
|
|
|
.card {
|
|
@apply bg-deep-blue-contrast rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300;
|
|
}
|
|
|
|
.button-base {
|
|
@apply bg-emerald hover:bg-emerald-dark !text-text-primary transition-all duration-300 active:scale-95 rounded;
|
|
}
|
|
|
|
.game-card-content {
|
|
@apply p-4;
|
|
}
|
|
|
|
.nav-button {
|
|
@apply hidden lg:block absolute top-1/2 -translate-y-1/2 bg-deep-blue-contrast hover:bg-deep-blue-contrast/90 !text-text-primary p-3 rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300 shadow-lg hover:scale-110;
|
|
}
|
|
|
|
.slider-container {
|
|
@apply flex transition-transform duration-500 ease-out;
|
|
}
|
|
|
|
.slider-grid {
|
|
@apply min-w-full grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4;
|
|
}
|
|
|
|
.welcome-bonus {
|
|
@apply !text-4xl sm:!text-5xl lg:!text-7xl !font-extrabold !text-emerald-light mb-3 sm:mb-4;
|
|
}
|
|
|
|
.bonus-description {
|
|
@apply !text-text-secondary !text-base sm:!text-lg mb-6 sm:mb-8;
|
|
}
|
|
|
|
.section-heading {
|
|
@apply !font-bold !text-text-primary;
|
|
}
|
|
|
|
.game-heading {
|
|
@apply !font-bold !text-text-primary !text-sm mb-2;
|
|
}
|
|
|
|
.game-text {
|
|
@apply !text-text-secondary !text-sm mb-4;
|
|
}
|
|
|
|
.stat-container {
|
|
@apply bg-deep-blue-contrast rounded-lg shadow-lg p-4 sm:p-6 !text-center;
|
|
}
|
|
|
|
.stat-number {
|
|
@apply !text-xl sm:!text-2xl !font-bold !text-emerald;
|
|
}
|
|
|
|
.stat-text {
|
|
@apply !text-text-secondary !text-sm;
|
|
}
|
|
|
|
.nav-brand {
|
|
@apply flex items-center !text-text-primary !text-xl !font-semibold;
|
|
}
|
|
|
|
.nav-link {
|
|
@apply px-3 py-2 rounded-md !font-normal !text-sm !text-text-secondary hover:!text-text-primary hover:bg-deep-blue-contrast transition-all duration-200;
|
|
}
|
|
|
|
.nav-toggle {
|
|
@apply !text-text-secondary hover:!text-text-primary transition-colors duration-200;
|
|
}
|
|
|
|
.nav-mobile-menu {
|
|
@apply p-2 pt-2 mb-4 space-y-1 bg-deep-blue-contrast rounded-b-lg;
|
|
}
|
|
|
|
.nav-mobile-link {
|
|
@apply block px-3 py-2 rounded-md !text-sm !text-text-secondary hover:!text-text-primary hover:bg-deep-blue-light transition-all duration-200;
|
|
}
|
|
|
|
.footer-section {
|
|
@apply col-span-2 md:col-span-1;
|
|
}
|
|
|
|
.footer-heading {
|
|
@apply !text-text-primary !text-sm !font-semibold mb-4;
|
|
}
|
|
|
|
.footer-link {
|
|
@apply !text-text-secondary hover:!text-text-primary !text-sm transition-all duration-200;
|
|
}
|
|
|
|
.footer-payment-method {
|
|
@apply bg-deep-blue rounded p-3 flex items-center justify-center space-x-2 hover:bg-deep-blue/50 transition-all duration-200;
|
|
}
|
|
|
|
.footer-payment-icon {
|
|
@apply !text-text-secondary !text-lg;
|
|
}
|
|
|
|
.footer-payment-text {
|
|
@apply !text-text-secondary !text-xs !whitespace-nowrap;
|
|
}
|
|
|
|
.footer-copyright {
|
|
@apply !text-text-secondary !text-sm;
|
|
}
|
|
|
|
.footer-disclaimer {
|
|
@apply !text-xs;
|
|
}
|
|
|
|
.mat-mdc-dialog-container {
|
|
--mdc-dialog-container-color: var(--color-deep-blue-light) important;
|
|
--mdc-dialog-subhead-color: var(--color-text-primary) important;
|
|
--mdc-dialog-supporting-text-color: var(--color-text-secondary) important;
|
|
--mdc-dialog-container-shape: 6px important;
|
|
}
|