/** * Theme: warm editorial (shadcn-style tokens). * Tailwind @import / @theme / @apply are not used — plain CSS only, loads after single-slot.css. * Dark: add class "dark" on for .dark variables. */ @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Poppins:wght@400;500;600;700&display=swap"); :root { --background: #faf7f5; --foreground: #1a1a1a; --card: #faf7f5; --card-foreground: #1a1a1a; --popover: #faf7f5; --popover-foreground: #1a1a1a; --primary: #9b2c2c; --primary-foreground: #ffffff; --secondary: #fdf2d6; --secondary-foreground: #805500; --muted: #f0ebe8; --muted-foreground: #57534e; --accent: #fef3c7; --accent-foreground: #7f1d1d; --destructive: #991b1b; --destructive-foreground: #ffffff; --border: #f5e8d2; --input: #f5e8d2; --ring: #9b2c2c; --chart-1: #b91c1c; --chart-2: #9b2c2c; --chart-3: #7f1d1d; --chart-4: #b45309; --chart-5: #92400e; --sidebar: #f0ebe8; --sidebar-foreground: #1a1a1a; --sidebar-primary: #9b2c2c; --sidebar-primary-foreground: #ffffff; --sidebar-accent: #fef3c7; --sidebar-accent-foreground: #7f1d1d; --sidebar-border: #f5e8d2; --sidebar-ring: #9b2c2c; --font-sans: "Poppins", system-ui, sans-serif; --font-serif: "Libre Baskerville", Georgia, serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; --radius: 0.375rem; --shadow-x: 1px; --shadow-y: 1px; --shadow-blur: 16px; --shadow-spread: -2px; --shadow-opacity: 0.12; --shadow-color: hsl(0 63% 18%); --shadow-2xs: 1px 1px 16px -2px hsl(0 63% 18% / 0.06); --shadow-xs: 1px 1px 16px -2px hsl(0 63% 18% / 0.06); --shadow-sm: 1px 1px 16px -2px hsl(0 63% 18% / 0.12), 1px 1px 2px -3px hsl(0 63% 18% / 0.12); --shadow: 1px 1px 16px -2px hsl(0 63% 18% / 0.12), 1px 1px 2px -3px hsl(0 63% 18% / 0.12); --shadow-md: 1px 1px 16px -2px hsl(0 63% 18% / 0.12), 1px 2px 4px -3px hsl(0 63% 18% / 0.12); --shadow-lg: 1px 1px 16px -2px hsl(0 63% 18% / 0.12), 1px 4px 6px -3px hsl(0 63% 18% / 0.12); --shadow-xl: 1px 1px 16px -2px hsl(0 63% 18% / 0.12), 1px 8px 10px -3px hsl(0 63% 18% / 0.12); --shadow-2xl: 1px 1px 16px -2px hsl(0 63% 18% / 0.3); --tracking-normal: 0em; --spacing: 0.25rem; /* layout */ --layout-max: min(1175px, 100% - 2 * clamp(12px, 4vw, 28px)); --header-h: 72px; } .dark { --background: #1c1917; --foreground: #f5f5f4; --card: #292524; --card-foreground: #f5f5f4; --popover: #292524; --popover-foreground: #f5f5f4; --primary: #b91c1c; --primary-foreground: #faf7f5; --secondary: #92400e; --secondary-foreground: #fef3c7; --muted: #1f1c1a; --muted-foreground: #d6d3d1; --accent: #b45309; --accent-foreground: #fef3c7; --destructive: #ef4444; --destructive-foreground: #ffffff; --border: #44403c; --input: #44403c; --ring: #b91c1c; --chart-1: #f87171; --chart-2: #ef4444; --chart-3: #dc2626; --chart-4: #fbbf24; --chart-5: #f59e0b; --sidebar: #1c1917; --sidebar-foreground: #f5f5f4; --sidebar-primary: #b91c1c; --sidebar-primary-foreground: #faf7f5; --sidebar-accent: #b45309; --sidebar-accent-foreground: #fef3c7; --sidebar-border: #44403c; --sidebar-ring: #b91c1c; --shadow-2xs: 1px 1px 16px -2px hsl(0 63% 18% / 0.06); --shadow-xs: 1px 1px 16px -2px hsl(0 63% 18% / 0.06); --shadow-sm: 1px 1px 16px -2px hsl(0 63% 18% / 0.12), 1px 1px 2px -3px hsl(0 63% 18% / 0.12); --shadow: 1px 1px 16px -2px hsl(0 63% 18% / 0.12), 1px 1px 2px -3px hsl(0 63% 18% / 0.12); --shadow-md: 1px 1px 16px -2px hsl(0 63% 18% / 0.12), 1px 2px 4px -3px hsl(0 63% 18% / 0.12); --shadow-lg: 1px 1px 16px -2px hsl(0 63% 18% / 0.12), 1px 4px 6px -3px hsl(0 63% 18% / 0.12); --shadow-xl: 1px 1px 16px -2px hsl(0 63% 18% / 0.12), 1px 8px 10px -3px hsl(0 63% 18% / 0.12); --shadow-2xl: 1px 1px 16px -2px hsl(0 63% 18% / 0.3); } html { color-scheme: light; font-size: clamp(15px, 2.5vw, 16px); } html.dark { color-scheme: dark; } *, *::before, *::after { border-color: var(--border); font-family: var(--font-sans); } *:focus-visible { outline: 2px solid color-mix(in srgb, var(--ring) 55%, transparent); outline-offset: 2px; } body { min-height: 100vh; background-color: var(--background); background-image: radial-gradient(1200px 480px at 8% -8%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 55%), radial-gradient(800px 400px at 100% 0%, color-mix(in srgb, var(--secondary) 55%, transparent), transparent 50%); color: var(--foreground); } main { background: linear-gradient(180deg, var(--muted) 0%, var(--background) 35%, var(--background) 100%) !important; } header { min-height: var(--header-h); background: color-mix(in srgb, var(--card) 92%, var(--muted)) !important; border-bottom: 1px solid var(--border) !important; backdrop-filter: blur(10px); box-shadow: var(--shadow-sm); } .header-wrapper { max-width: var(--layout-max) !important; } .logo img { max-height: 44px; width: auto; } header nav, .navigation-left, .navigation-right { color: var(--muted-foreground) !important; } header nav a:hover { color: var(--primary) !important; } .burger span { background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 65%, white)) !important; } .burger-menu { background: var(--popover) !important; border-top: 1px solid var(--border) !important; color: var(--foreground) !important; } .burger-menu li { color: var(--foreground) !important; border-bottom-color: var(--border) !important; } .second-menu li a { color: var(--muted-foreground) !important; } .second-menu li a:hover { color: var(--primary) !important; } .wrapper { max-width: var(--layout-max) !important; padding-left: clamp(12px, 4vw, 22px) !important; padding-right: clamp(12px, 4vw, 22px) !important; } /* Article card */ .content { background: var(--card) !important; border: 1px solid var(--border) !important; border-radius: calc(var(--radius) + 10px) !important; box-shadow: var(--shadow-md) !important; padding: clamp(1rem, 3vw, 2rem) !important; color: var(--card-foreground) !important; } .title, .content h1:not(.main-title), .content h2:not(.main-title), .content h3:not([class]), .content h4:not([class]), .content-title, .content-top-title, .main-title { color: var(--foreground) !important; font-family: var(--font-sans); } .content h1:not(.main-title), .content-top-title { font-family: var(--font-serif) !important; font-size: clamp(1.75rem, 5vw, 2.75rem) !important; line-height: 1.15 !important; } .content h2:not(.main-title), .content-title { font-family: var(--font-serif) !important; font-size: clamp(1.2rem, 3.2vw, 1.65rem) !important; line-height: 1.25 !important; } .content > p, .content p, .last-text-section, .content ul:not([class]), .main-text { color: var(--muted-foreground) !important; } .content a:not([class]) { color: var(--primary) !important; text-decoration: underline; text-underline-offset: 2px; } /* Primary CTA (was gold/green) */ .green-main-btn, .main-btn.gray-btn { background: var(--primary) !important; color: var(--primary-foreground) !important; border: 1px solid color-mix(in srgb, var(--primary) 88%, black) !important; border-radius: calc(var(--radius) + 6px) !important; box-shadow: var(--shadow-sm); font-family: var(--font-sans) !important; transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; } .green-main-btn:hover, .main-btn.gray-btn:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: var(--shadow-md); color: var(--primary-foreground) !important; border-color: var(--primary) !important; background: color-mix(in srgb, var(--primary) 92%, black) !important; } .table-btn { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 70%, var(--secondary)), var(--secondary)) !important; color: var(--secondary-foreground) !important; border-radius: calc(var(--radius) + 6px) !important; border: 1px solid var(--border) !important; font-family: var(--font-sans) !important; } .offer-button { border-radius: calc(var(--radius) + 6px) !important; } .red-main-btn { background: var(--secondary) !important; color: var(--secondary-foreground) !important; border: 1px solid var(--border) !important; } .red-main-btn:hover { background: var(--accent) !important; color: var(--accent-foreground) !important; } /* Bonus / casino cards */ .bonus-cards__wrapper .bonus-card__center { background: var(--muted) !important; border: 1px solid var(--border) !important; border-radius: 0 0 calc(var(--radius) + 8px) calc(var(--radius) + 8px) !important; } .bonus-cards__wrapper .bonus-card__name { color: var(--foreground) !important; } .bonus-cards__wrapper .bonus-card__bonus-info span { color: var(--muted-foreground) !important; } .bonus-cards__wrapper .bonus-card__logo { border-radius: calc(var(--radius) + 8px) calc(var(--radius) + 8px) 0 0 !important; } /* Tables — main content + payout (overrides single-slot dark blues / white text) */ .slot-table, .about-casino-table { width: 100%; border-radius: calc(var(--radius) + 8px) !important; overflow: hidden; border: 1px solid var(--border) !important; border-collapse: collapse !important; background: var(--card) !important; box-shadow: var(--shadow-sm); table-layout: auto; } .about-casino-table tr, .slot-table tr { border-bottom: 1px solid var(--border) !important; } .about-casino-table tr:last-child, .slot-table tr:last-child { border-bottom: 0 !important; } /* Zebra: easier to scan (payout table has its own header + stripes) */ .content .slot-table:not(.slot-table--alt):not(.payout-table) tbody tr:nth-child(odd), .content .about-casino-table tbody tr:nth-child(odd) { background: var(--muted) !important; } .content .slot-table:not(.slot-table--alt):not(.payout-table) tbody tr:nth-child(even), .content .about-casino-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--muted) 88%, var(--card)) !important; } .content .slot-table.payout-table tbody tr:first-child { background: color-mix(in srgb, var(--muted) 72%, var(--border)) !important; } .content .slot-table.payout-table tbody tr:not(:first-child):nth-child(odd) { background: var(--muted) !important; } .content .slot-table.payout-table tbody tr:not(:first-child):nth-child(even) { background: color-mix(in srgb, var(--muted) 88%, var(--card)) !important; } .about-casino-table tr td, .slot-table tr td { color: var(--foreground) !important; border-right: 1px solid var(--border) !important; font-family: var(--font-sans) !important; font-size: clamp(0.8125rem, 2.2vw, 1rem) !important; line-height: 1.45 !important; vertical-align: top; word-wrap: break-word; overflow-wrap: anywhere; } .slot-table tr td:last-child, .about-casino-table tr td:last-child { border-right: 0 !important; } .content .slot-table:not(.slot-table--alt) tr td, .content .about-casino-table tr td { padding: 0.65rem 0.75rem !important; } .content .about-casino-table tr td { padding-left: clamp(0.75rem, 3vw, 1.25rem) !important; } .content .payout-table tr td { padding: 0.55rem 0.5rem !important; } .content .payout-table tr td p { color: var(--foreground) !important; font-family: var(--font-sans) !important; font-size: inherit !important; font-weight: 500 !important; margin: 0.15rem 0 0 !important; line-height: 1.35 !important; } .content .payout-table tr:first-child td p { font-weight: 600 !important; color: var(--foreground) !important; } .content .payout-table tbody tr:first-child td { vertical-align: middle !important; } .content .payout-table tr td:first-child { display: flex !important; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.75rem; min-width: 0; } .content .payout-table tr:first-child td:first-child { display: table-cell !important; } .content .payout-table tr td:first-child img { max-width: 48px !important; width: 48px !important; height: 48px !important; margin: 0 !important; flex-shrink: 0; object-fit: contain; } @media (max-width: 767px) { .content .payout-table tr td:first-child img { max-width: 40px !important; width: 40px !important; height: 40px !important; } } .table-wrapper { -webkit-overflow-scrolling: touch; width: 100%; max-width: 100%; margin-bottom: clamp(1.25rem, 4vw, 2rem); padding: clamp(0.35rem, 1.5vw, 0.5rem); border: 1px solid var(--border); border-radius: calc(var(--radius) + 10px); background: var(--card); box-shadow: var(--shadow-xs); } .table-wrapper .slot-table, .table-wrapper .about-casino-table { box-shadow: none !important; border: 0 !important; border-radius: calc(var(--radius) + 4px) !important; } @media (max-width: 767px) { .table-wrapper table { min-width: 0 !important; } .content .slot-table:not(.slot-table--alt) tr td, .content .about-casino-table tr td { padding: 0.5rem 0.45rem !important; font-size: clamp(0.78rem, 2.8vw, 0.9rem) !important; } } /* FAQ */ .faq__question { background: var(--muted) !important; border-bottom: 1px solid var(--border) !important; color: var(--foreground) !important; } .faq__question__visible-text h3 { color: var(--foreground) !important; } .faq__question__close-text { color: var(--muted-foreground) !important; } /* Aside */ aside .aside-title { color: var(--foreground) !important; } .aside-list { border-bottom-color: var(--border) !important; color: var(--muted-foreground) !important; } .aside-casino-name { color: var(--foreground) !important; } #offer-card-fixed { background: var(--card) !important; border-color: var(--border) !important; } .offer-card { border-bottom-color: var(--border) !important; } .offer-card__row span { color: var(--foreground) !important; } /* Aside “Spiel-Infos” + mobile duplicate — readable, on-theme, responsive */ .aside-table, .aside-table-mobile { background: var(--card) !important; border: 1px solid var(--border) !important; border-radius: calc(var(--radius) + 10px) !important; box-shadow: var(--shadow-sm); padding: clamp(1rem, 3.5vw, 1.5rem) !important; } .aside-table .aside-title { font-family: var(--font-sans) !important; font-size: clamp(1rem, 2.8vw, 1.125rem) !important; font-weight: 600 !important; letter-spacing: 0.02em; color: var(--foreground) !important; margin: 0 0 0.75rem !important; line-height: 1.3 !important; } .aside-table .slot-table-wrap, .aside-table-mobile .slot-table-wrap { width: 100%; margin: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; } .aside-table .slot-table.slot-table--alt, .aside-table-mobile .slot-table.slot-table--alt { width: 100%; min-width: 0; max-width: 100%; border: 0 !important; border-radius: 0 !important; border-collapse: collapse !important; table-layout: fixed; } .aside-table .slot-table--alt tr, .aside-table-mobile .slot-table--alt tr { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--border) !important; } .aside-table .slot-table--alt tr:last-child, .aside-table-mobile .slot-table--alt tr:last-child { border-bottom: 0 !important; } .aside-table .slot-table--alt tr td, .aside-table-mobile .slot-table--alt tr td { padding: 0.625rem 0.4rem !important; font-family: var(--font-sans) !important; font-size: clamp(0.8125rem, 2.4vw, 0.9375rem) !important; line-height: 1.45 !important; font-weight: 500 !important; color: var(--foreground) !important; border: 0 !important; vertical-align: top; word-wrap: break-word; overflow-wrap: anywhere; } .aside-table .slot-table--alt tr td:first-child, .aside-table-mobile .slot-table--alt tr td:first-child { width: 44%; max-width: 11rem; padding-right: 0.75rem !important; color: var(--muted-foreground) !important; font-weight: 600 !important; } @media (max-width: 420px) { .aside-table .slot-table--alt tr td:first-child, .aside-table-mobile .slot-table--alt tr td:first-child { width: 48%; max-width: none; } } /* Breadcrumbs */ .breadcrumbs-list__link { color: var(--muted-foreground) !important; } .breadcrumbs-list__current { color: var(--primary) !important; } /* Main block / hero typography */ .main-block { padding-top: clamp(5.5rem, 12vw, 7.5rem) !important; padding-bottom: clamp(1.5rem, 4vw, 3rem) !important; gap: clamp(1rem, 3vw, 2rem); } .row-direction { flex-wrap: wrap; gap: clamp(0.75rem, 2vw, 1.5rem); } .main-left { flex: 1 1 560px; min-width: 0; } article { min-width: 0; } aside { flex: 0 1 300px; min-width: 0; } .main-header { margin-top: var(--header-h); } .main-header .top-title { font-size: clamp(1.75rem, 5vw, 2.75rem) !important; text-wrap: balance; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35); } .game-wrap iframe { width: 100%; max-width: 100%; border: 0; border-radius: calc(var(--radius) + 6px); aspect-ratio: 16 / 9; height: auto !important; min-height: 220px; box-shadow: var(--shadow-md); } /* Cookie bar — popover on warm surface */ .cookie-popup { background: var(--popover) !important; color: var(--popover-foreground) !important; border: 1px solid var(--border) !important; border-radius: calc(var(--radius) + 8px) 0 0 0 !important; max-width: min(725px, 100%) !important; box-shadow: var(--shadow-lg) !important; align-items: flex-start; gap: 0.75rem 1rem; flex-wrap: wrap; box-sizing: border-box; } .cookie-popup .cookie-popup__img { margin-right: 1rem; flex-shrink: 0; width: 56px; height: 56px; object-fit: contain; } .cookie-popup .cookie-center { flex: 1 1 200px; min-width: 0; margin-right: 0; } .cookie-popup .cookie-text, .cookie-popup .cookie-title { color: var(--popover-foreground) !important; } .cookie-popup .cookie-text a { color: var(--primary) !important; font-weight: 600; } .cookie-popup .main-btn.green-main-btn { box-shadow: var(--shadow-sm); } .cookie-popup .info-btn { color: var(--muted-foreground) !important; } .cookie-popup .close-cookie::before, .cookie-popup .close-cookie::after { background: var(--foreground) !important; } .cookie-popup .cookie-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-top: 0.5rem; margin-bottom: 0; } /* Footer */ footer::after { background: linear-gradient(180deg, color-mix(in srgb, var(--foreground) 88%, transparent), color-mix(in srgb, var(--foreground) 96%, var(--background))) !important; } footer .title, .footer-disclaimer, .footer-bottom, .footer-bottom a, .footer-items__tel { color: color-mix(in srgb, var(--background) 92%, transparent) !important; } .footer-navigation { gap: 0.5rem 1rem; border-bottom-color: color-mix(in srgb, var(--background) 22%, transparent) !important; } /* Author / gallery */ .author-block { background: var(--card) !important; border-color: var(--border) !important; border-radius: calc(var(--radius) + 10px) !important; } .author__name { color: var(--foreground) !important; } .author__text, .author__position { color: var(--muted-foreground) !important; } .gallery-section h2 { color: var(--foreground) !important; } /* Casino review cards (light) */ .casino-review { background: var(--card) !important; color: var(--foreground) !important; border-color: var(--border) !important; box-shadow: var(--shadow-sm) !important; } .casino-review__name, .casino-review__left-bottom strong { color: var(--foreground) !important; } .casinos-review-section .top-casino-review { background: var(--muted) !important; color: var(--foreground) !important; } /* Pros/cons */ .pros-cons-block.pros { background: color-mix(in srgb, var(--accent) 35%, var(--card)) !important; border-color: var(--border) !important; } .pros-cons-block.cons { background: color-mix(in srgb, var(--destructive) 12%, var(--card)) !important; border-color: var(--border) !important; } .pros-cons__bottom li { color: var(--muted-foreground) !important; } .checked-list { color: var(--muted-foreground) !important; } .checked-list li::before { background-color: var(--primary) !important; } .square-link { color: var(--primary-foreground) !important; box-shadow: var(--shadow-md) !important; } .slot__heading { color: var(--foreground) !important; } .slot { box-shadow: var(--shadow-sm) !important; } /* Popular slots links */ .popular-slots h3 { color: var(--foreground) !important; } /* Lang dropdown */ .header-flags-section { background: var(--popover) !important; border-color: var(--border) !important; box-shadow: var(--shadow-md) !important; } .header-flags-block li a { color: var(--foreground) !important; } .header-flags-button { border-color: var(--border) !important; } @media (max-width: 768px) { .cookie-popup { max-width: 100% !important; width: 100%; left: 0; right: 0; padding: 3rem 1rem 1.25rem 1rem !important; align-items: center; text-align: center; } .cookie-popup .cookie-popup__img { position: static !important; margin: 0 auto 0.5rem; width: 56px !important; height: 56px !important; } .cookie-popup .cookie-title { margin-bottom: 0.75rem !important; } .cookie-popup .cookie-btns { width: 100%; justify-content: center; flex-direction: row !important; margin-top: 1rem !important; } .main-header .main-header__btns-wrapper .main-btn { width: min(100%, 280px) !important; } .square-link { width: min(174px, 42vw) !important; height: auto !important; aspect-ratio: 1; } } @media (max-width: 1050px) { aside { display: none !important; } .main-left { width: 100% !important; } } @media (max-width: 480px) { .content h1:not(.main-title) { font-size: clamp(1.45rem, 7vw, 2rem) !important; } .footer-items-row { align-items: stretch !important; } }