/* ================================================================= Vlad Casino NL — main stylesheet Algemene klassenamen voor hergebruik over alle landingspagina's. ================================================================= */ :root{ --c-bg:#fff; --c-text:#111; --c-text-2:#454545; --c-muted:#6b6b6b; --c-header:#394F63; --c-footer:#394F63; --c-cta:#EDB500; --c-cta-2:#515B63; --c-border:#e6e6e6; --c-border-2:#dcdcdc; --c-alt-bg:#f7f8f9; --c-tbl-head:#394F63; --max-w:1180px; --pad-sec:64px; --pad-sec-thin:36px; --radius:4px; } /* ----------- Sections ----------- */ .sec{padding:var(--pad-sec) 0;border-bottom:1px solid var(--c-border)} .sec-thin{padding:var(--pad-sec-thin) 0} .sec-alt{background:var(--c-alt-bg)} .sec:last-of-type{border-bottom:0} .wrap.narrow{max-width:820px} .sec-num{display:inline-block;font-size:12px;font-weight:600;color:var(--c-cta-2);letter-spacing:.18em;margin-right:14px;vertical-align:middle;background:var(--c-alt-bg);padding:5px 10px;border-radius:3px;border:1px solid var(--c-border)} .sec-alt .sec-num{background:#fff} .sec-intro{font-size:15px;color:var(--c-muted);margin:0 0 22px;max-width:760px;font-style:italic} /* ----------- Headings ----------- */ .h-2{font-size:clamp(22px,2.4vw,30px);line-height:1.25;margin:0 0 18px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;flex-wrap:wrap;gap:4px} .h-3{font-size:clamp(17px,1.8vw,21px);line-height:1.3;margin:34px 0 12px;font-weight:600;color:var(--c-header)} /* Paragrafen */ p{margin:0 0 14px} .sec p:last-of-type{margin-bottom:18px} .muted-sm{font-size:12px;color:var(--c-muted);margin-top:12px;line-height:1.5} /* ----------- Buttons (basis in critical CSS) ----------- */ /* btn / cta / cta-2 / btn-lg al in */ /* ----------- Tables — verplicht scrollbaar op mobiel ----------- */ .tbl-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:18px 0 22px; border:1px solid var(--c-border); border-radius:var(--radius); background:#fff; scrollbar-width:thin; } .tbl{ width:100%; border-collapse:collapse; font-size:14.5px; min-width:480px; } .tbl th,.tbl td{ padding:13px 16px; text-align:left; border-bottom:1px solid var(--c-border); vertical-align:top; } .tbl th{ background:var(--c-header); color:#fff; font-weight:600; font-size:13px; letter-spacing:.02em; white-space:nowrap; } .tbl tr:last-child td{border-bottom:0} .tbl tbody tr:nth-child(even){background:#fafbfc} .tbl tbody tr:hover{background:#f3f5f7} .tbl b{color:var(--c-header)} /* Fact-tabel: 4 cellen breed */ .fact-tbl td{font-size:15px} .fact-tbl b{font-size:17px;display:inline-block;margin-top:2px} /* Voor-/nadelen */ .pc-tbl th:first-child{background:#2d6a3f} .pc-tbl th:last-child{background:#7a3535} /* ----------- Lijsten ----------- */ .list{ padding:0; margin:14px 0 22px; list-style:none; } .list li{ padding:11px 14px 11px 38px; position:relative; border-bottom:1px solid var(--c-border); font-size:15px; line-height:1.55; } .list li:last-child{border-bottom:0} .list li::before{ content:""; position:absolute; left:14px; top:18px; width:8px; height:8px; background:var(--c-cta); border-radius:2px; } .list.list-num{counter-reset:n} .list.list-num li{padding-left:48px} .list.list-num li::before{ counter-increment:n; content:counter(n); background:var(--c-header); color:#fff; width:22px; height:22px; border-radius:50%; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; top:11px; left:14px; } .list a{color:var(--c-header);text-decoration:underline;text-underline-offset:2px} .list a:hover{color:var(--c-cta-2)} /* ----------- Game grid ----------- */ .game-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:18px 0 24px; } .game{ position:relative; background:#fff; border:1px solid var(--c-border); border-radius:var(--radius); overflow:hidden; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; } .game:hover{ transform:translateY(-2px); border-color:var(--c-cta-2); box-shadow:0 6px 18px -10px rgba(57,79,99,.4); } .game-img{ background:#e9ecef; aspect-ratio:4/3; position:relative; overflow:hidden; } .game-img img{width:100%;height:100%;object-fit:cover} .game-meta{padding:12px 14px 14px} .game-meta h4{margin:0 0 4px;font-size:15px;font-weight:600;color:#111} .game-meta span{font-size:12px;color:var(--c-muted)} .game-act{ position:absolute; inset:0; background:rgba(57,79,99,.88); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; opacity:0; transition:opacity .2s ease; padding:14px; } .game-act .btn{min-width:130px} .game:hover .game-act{opacity:1} css @media (hover:none){ .game-act{ opacity:0; background:rgba(57,79,99,.88); } } .game{ touch-action: manipulation; } .game:active .game-act, .game:focus-within .game-act{ opacity:1; } /* ----------- Payment grid ----------- */ .pay-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:10px; margin:18px 0 22px; max-width:100%; } .pay-item{ border-radius:var(--radius); padding:14px; display:flex; align-items:center; justify-content:center; aspect-ratio:2/1; transition:border-color .15s; } .pay-item:hover{border-color:var(--c-cta-2)} .pay-item img{max-width:80%;max-height:50px;object-fit:contain} /* ----------- FAQ accordeon ----------- */ .faq{margin:22px 0 0} .faq-item{ border:1px solid var(--c-border); border-radius:var(--radius); margin-bottom:10px; background:#fff; overflow:hidden; } .faq-item summary{ list-style:none; cursor:pointer; padding:16px 48px 16px 18px; font-size:15px; font-weight:600; position:relative; color:var(--c-header); transition:background .15s; } .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::after{ content:""; position:absolute; right:18px; top:50%; width:10px; height:10px; border-right:2px solid var(--c-header); border-bottom:2px solid var(--c-header); transform:translateY(-70%) rotate(45deg); transition:transform .2s; } .faq-item[open] summary::after{transform:translateY(-30%) rotate(-135deg)} .faq-item summary:hover{background:var(--c-alt-bg)} .faq-item[open] summary{background:var(--c-alt-bg);border-bottom:1px solid var(--c-border)} .faq-a{padding:16px 18px 18px;font-size:14.5px;line-height:1.6;color:var(--c-text-2)} .faq-a p{margin:0} /* ============================================ MOBILE MENU ============================================ */ .mobile-menu{ display:none; background:var(--c-header); padding:8px 20px 20px; border-top:1px solid rgba(255,255,255,.1); flex-direction:column; } .mobile-menu[hidden]{display:none !important} .mobile-menu.is-open{display:flex} .mobile-menu a{ color:#fff; text-decoration:none; padding:14px 4px; font-size:15px; font-weight:500; border-bottom:1px solid rgba(255,255,255,.08); } .mobile-menu a:last-child{border-bottom:0} /* ============================================ BACK TO TOP ============================================ */ .to-top{ position:fixed; bottom:24px; right:24px; width:44px; height:44px; border-radius:50%; background:#fff; border:1px solid var(--c-border-2); color:var(--c-header); cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .2s,transform .2s,visibility .2s; box-shadow:0 4px 14px -4px rgba(0,0,0,.25); z-index:40; } .to-top.is-show{opacity:1;visibility:visible;transform:translateY(0)} .to-top:hover{background:var(--c-cta);border-color:var(--c-cta);color:#111} /* ============================================ FOOTER ============================================ */ .ftr{ background:var(--c-footer); color:#cdd5dc; padding:54px 0 22px; margin-top:0; } .ftr a{color:#fff} .ftr-top{ display:flex; flex-direction:column; align-items:center; gap:28px; text-align:center; } .ftr-logo{display:inline-flex} .ftr-logo img{height:48px;width:auto} .ftr-warn{max-width:780px;font-size:13px;line-height:1.6;color:#a8b3bd} .ftr-warn p{margin:0} .ftr-banners{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:center; padding:18px 0; border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); width:100%; max-width:600px; } .ftr-banners img{ height:40px; width:auto; opacity:.85; background:rgba(255,255,255,.05); border-radius:3px; transition:opacity .2s; } .ftr-banners img:hover{opacity:1} .ftr-apps{display:flex;flex-wrap:wrap;gap:14px;justify-content:center} .app-btn{ padding:10px 22px; text-align:left; line-height:1.1; gap:10px; } .app-btn small{font-size:11px;font-weight:400;opacity:.85;display:block} .app-btn b{font-size:14px;font-weight:700;display:block;margin-top:2px} .app-btn-ios{background:#111;color:#fff} .app-btn-ios:hover{filter:brightness(1.2)} .ftr-bottom{ margin-top:30px; padding-top:18px; border-top:1px solid rgba(255,255,255,.08); font-size:12px; color:#8a96a3; text-align:center; } /* ============================================ RESPONSIVE ============================================ */ @media (max-width:1024px){ .game-grid{grid-template-columns:repeat(3,1fr)} .pay-grid{grid-template-columns:repeat(5,1fr)} } @media (max-width:768px){ :root{--pad-sec:42px;--pad-sec-thin:28px} .wrap{padding:0 16px} .h-2{font-size:22px;gap:8px} .h-3{font-size:17px;margin-top:26px} .sec-num{font-size:11px;padding:4px 8px} .sec-intro{font-size:14px} .game-grid{grid-template-columns:repeat(2,1fr);gap:12px} .pay-grid{grid-template-columns:repeat(4,1fr)} .list li{font-size:14px} .tbl th,.tbl td{padding:11px 13px;font-size:13.5px} .ftr{padding:36px 0 18px} .ftr-apps{flex-direction:column;width:100%;max-width:280px;margin:0 auto} .app-btn{justify-content:flex-start;width:100%} .to-top{bottom:16px;right:16px;width:40px;height:40px} } @media (max-width:480px){ .game-grid{grid-template-columns:1fr 1fr;gap:10px} .game-meta{padding:10px 12px} .game-meta h4{font-size:14px} .pay-grid{grid-template-columns:repeat(3,1fr)} .hero-cta-row{flex-direction:column;align-items:stretch} .hero-cta-row .btn{justify-content:center} } /* Print + reduced motion */ @media (prefers-reduced-motion:reduce){ *{animation:none !important;transition:none !important} html{scroll-behavior:auto} } /* Focus styles voor toegankelijkheid */ a:focus-visible,button:focus-visible,summary:focus-visible{ outline:2px solid var(--c-cta); outline-offset:2px; border-radius:2px; } /* --- Глобальный шрифт --- */ body { font-family: 'Montserrat', system-ui, -apple-system, sans-serif; } /* --- Hero --- */ .hero { position: relative; padding: 80px 0 72px; background-image: url('/assets/vlad-casino-background.webp'); background-size: cover; background-position: center top; background-repeat: no-repeat; } /* Тёмный оверлей для читаемости текста */ .hero::before { content: ''; position: absolute; inset: 0; background: rgba(20, 30, 40, 0.62); pointer-events: none; } /* Всё содержимое поверх оверлея */ .hero .wrap { position: relative; z-index: 1; } /* Текст светлый на тёмном фоне */ .hero .h-1 { color: #fff; } .hero .lead { color: rgba(255, 255, 255, 0.88); max-width: 640px; } /* Chips на hero */ .hero .chip { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.18); color: #fff; } .hero .chip b { color: var(--c-cta); } /* Мобайл */ @media (max-width: 768px) { .hero { padding: 52px 0 48px; background-position: center center; } } /* --- Hero заголовок --- */ .hero .h-1 { color: #fff; font-size: clamp(28px, 3.8vw, 52px); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 18px; max-width: 720px; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45); } /* "Vlad Casino" — акцент не жёлтым, а светлее/иначе */ .hero .h-1 b { color: var(--c-cta); font-weight: 800; /* Тонкая обводка для читаемости на пёстром фоне */ -webkit-text-stroke: 0.5px rgba(0, 0, 0, 0.3); } .hero .h-1 { max-width: 760px; /* не даёт строке растягиваться на всю ширину */ } .cta-banner-inline{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(260px,.95fr); gap:24px; align-items:center; background:#1b062f; border-radius:14px; overflow:hidden; padding:28px 28px 28px 40px; position:relative; margin:24px 0; } .cta-banner-inline::before{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(27,6,47,.96) 0%, rgba(27,6,47,.88) 42%, rgba(27,6,47,.35) 74%, rgba(27,6,47,0) 100%); pointer-events:none; } .cta-banner-inline__text{ position:relative; z-index:1; max-width:520px; } .cta-banner-inline__kicker{ margin:0 0 14px; color:#fff; font-size:15px; line-height:1.4; opacity:.9; } .cta-banner-inline__title{ margin:0 0 16px; color:#fff; font-size:clamp(32px,4vw,58px); line-height:1.05; font-weight:800; letter-spacing:-.03em; max-width:12ch; } .cta-banner-inline__desc{ margin:0 0 22px; color:rgba(255,255,255,.85); font-size:15px; line-height:1.6; max-width:40ch; } .cta-banner-inline__img{ position:relative; z-index:1; align-self:stretch; display:flex; justify-content:flex-end; align-items:flex-end; } .cta-banner-inline__img img{ width:100%; max-width:520px; height:100%; object-fit:cover; object-position:center right; display:block; } @media (max-width: 900px){ .cta-banner-inline{ grid-template-columns:1fr; padding:24px; } .cta-banner-inline::before{ background:linear-gradient(180deg, rgba(27,6,47,.96) 0%, rgba(27,6,47,.9) 58%, rgba(27,6,47,.78) 100%); } .cta-banner-inline__title{ max-width:16ch; } .cta-banner-inline__img{ justify-content:center; } .cta-banner-inline__img img{ max-width:100%; height:auto; max-height:280px; } } @media (max-width: 480px){ .cta-banner-inline{ padding:20px; border-radius:12px; } .cta-banner-inline__title{ font-size:clamp(26px,8vw,40px); } .cta-banner-inline__desc{ margin-bottom:18px; } .cta-banner-inline .btn{ width:100%; justify-content:center; } } .cta-banner-bg{ position:relative; min-height:320px; border-radius:14px; overflow:hidden; margin:24px 0; background-image:url('/assets/vlad-casino-banner.webp'); background-size:cover; background-position:center right; background-repeat:no-repeat; } .cta-banner-bg::before{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(27,6,47,.94) 0%, rgba(27,6,47,.86) 44%, rgba(27,6,47,.40) 72%, rgba(27,6,47,.16) 100%); } .cta-banner-bg__content{ position:relative; z-index:1; max-width:520px; padding:34px 40px; } .cta-banner-bg__kicker{ margin:0 0 14px; color:#fff; font-size:15px; line-height:1.4; opacity:.9; } .cta-banner-bg__title{ margin:0 0 16px; color:#fff; font-size:clamp(32px,4vw,58px); line-height:1.05; font-weight:800; letter-spacing:-.03em; max-width:12ch; } .cta-banner-bg__desc{ margin:0 0 22px; color:rgba(255,255,255,.85); font-size:15px; line-height:1.6; max-width:40ch; } @media (max-width: 900px){ .cta-banner-bg{ min-height:280px; background-position:center center; } .cta-banner-bg::before{ background:linear-gradient(180deg, rgba(27,6,47,.94) 0%, rgba(27,6,47,.86) 58%, rgba(27,6,47,.72) 100%); } .cta-banner-bg__content{ padding:24px; max-width:100%; } } @media (max-width: 480px){ .cta-banner-bg{ min-height:240px; border-radius:12px; } .cta-banner-bg__title{ font-size:clamp(26px,8vw,40px); max-width:14ch; } .cta-banner-bg .btn{ width:100%; justify-content:center; } } .sec-thin>a{ text-decoration:none !important; } #bonus.sec-alt{ background:#394F63; } #bonus.sec-alt .h-2, #bonus.sec-alt .h-3, #bonus.sec-alt p, #bonus.sec-alt .muted-sm, #bonus.sec-alt .list li{ color:#fff; } #bonus.sec-alt .h-2 b, #bonus.sec-alt .h-3 b, #bonus.sec-alt p b, #bonus.sec-alt .list li b{ color:#EDB500; } #bonus.sec-alt .sec-num{ background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.18); } #bonus.sec-alt .list li{ border-bottom:1px solid rgba(255,255,255,.12); } #bonus.sec-alt .list li::before{ background:#EDB500; } .center{ margin:0 auto; margin-top:20px; } #betalingen.sec-alt{ background:#394F63; } #betalingen.sec-alt .h-2, #betalingen.sec-alt p, #betalingen.sec-alt .list li{ color:#fff; } #betalingen.sec-alt .h-2 b, #betalingen.sec-alt p b, #betalingen.sec-alt .list li b{ color:#EDB500; } #betalingen.sec-alt .sec-num{ background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.18); } #betalingen.sec-alt .list li{ border-bottom:1px solid rgba(255,255,255,.12); } #betalingen.sec-alt .list li::before{ background:#EDB500; } .pay-grid{ display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:10px; margin:18px 0 22px; } .pay-item{ min-width:0; aspect-ratio:2/1; } .pay-item img{ width:100%; max-width:none; max-height:32px; object-fit:contain; } @media (max-width:768px){ .pay-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; } .pay-item{ padding:10px; } .pay-item img{ max-height:28px; } } @media (max-width:480px){ .pay-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } } .app-layout{ display:grid; grid-template-columns:1fr 380px; gap:48px; align-items:center; } .app-content{ min-width:0; } .app-img{ display:flex; justify-content:center; align-items:center; } .app-img img{ width:100%; height:auto; max-height:520px; object-fit:contain; border-radius:16px; } @media (max-width:900px){ .app-layout{ grid-template-columns:1fr; gap:28px; } .app-img{ order:-1; } .app-img img{ max-height:320px; width:auto; margin:0 auto; } } @media (max-width:480px){ .app-img img{ max-height:240px; } }