/* ───────────────────────────────────────────────────────────── Questomatica — Main Stylesheet v3 Brand: dark atmospheric, purple accents, Montserrat Rebuilt for UX clarity, conversion, and readability ───────────────────────────────────────────────────────────── */ /* Font-display: optional — use system font if Montserrat not cached yet. Eliminates CLS from font-swap layout shift on first visit. */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400 700; font-display: optional; src: url('https://fonts.gstatic.com/s/montserrat/v29/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Google Fonts moved to in for non-blocking load */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --purple-nav: #220038; --purple-link: #B252DB; --purple-label: #A54ED5; --purple-btn-l: #662ea1; --purple-btn-r: #8d2fc4; --purple-map: #7f2fb7; --purple-sep-l: #4a2e88; --purple-sep-r: #b252db; --review-grad-l: #742fad; --review-grad-r: #492e89; --bg: #000; --bg-section: #1e1c24; --bg-header: #0a0a0a; --text: #f0ecf5; --text-muted: #8a8a9a; --text-dim: #666680; --font: 'Montserrat', 'Open Sans', Helvetica, Arial, sans-serif; --max-w: 1200px; --max-w-mid: 1000px; --max-w-narrow: 800px; --grad-btn: linear-gradient(to right, var(--purple-btn-l), var(--purple-btn-r)); --grad-review: linear-gradient(135deg, var(--review-grad-l), var(--review-grad-r)); --radius: 10px; --transition: .2s ease; } html { font-size: 16px; scroll-behavior: smooth; overflow-x: hidden; max-width: 100%; } body { background: var(--bg); font-family: var(--font); font-size: 15px; color: var(--text); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.65; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } /* ── HEADER ─────────────────────────────────────────────── */ .site-header { position: fixed; top: 0; left: 0; right: 0; height: 66px; background: var(--purple-nav); padding: 0 24px; z-index: 300; box-shadow: 0 2px 20px rgba(0,0,0,.4); } .site-header__inner { max-width: var(--max-w); margin: 0 auto; height: 66px; display: flex; align-items: center; gap: 0; } .site-header__logo-wrap { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; } .site-header__logo-icon { display: none; } .site-header__logo-text { height: 36px; width: auto; max-width: 200px; display: block; object-fit: contain; object-position: left center; } /* Nav */ .site-nav { display: flex; align-items: center; list-style: none; margin-left: 44px; gap: 24px; flex: 1; } .site-nav > li { position: relative; height: 66px; display: flex; align-items: center; } .site-nav > li > a { font-size: 14px; font-weight: 500; color: rgba(255,255,255,.85); transition: color var(--transition); white-space: nowrap; padding: 4px 0; letter-spacing: .01em; } .site-nav > li > a:hover { color: #fff; } .site-nav .nav-rooms > a { color: var(--purple-link); } .site-nav .nav-rooms > a:hover { color: #d9abed; } .nav-spacer { flex: 1; } /* Dropdown */ .nav-dropdown__menu { display: none; position: absolute; top: 62px; left: 0; background: #1a0030; border: 1px solid rgba(178,82,219,.2); border-radius: 8px; padding: 6px 0; min-width: 200px; z-index: 500; list-style: none; box-shadow: 0 12px 40px rgba(0,0,0,.6); } .nav-dropdown.is-open .nav-dropdown__menu { display: block; } .nav-dropdown__menu li a { display: block; padding: 12px 20px; font-size: 14px; font-weight: 500; color: var(--purple-link); transition: background var(--transition); line-height: normal; } .nav-dropdown__menu li a:hover { background: rgba(255,255,255,.05); } /* Language */ .nav-lang { position: relative; } .nav-lang__btn { background: none; border: none; cursor: pointer; color: rgba(255,255,255,.6); font-size: 18px; padding: 4px 6px; display: flex; align-items: center; transition: color var(--transition); line-height: 1; } .nav-lang__btn:hover { color: #fff; } .nav-lang__menu { display: none; position: absolute; top: 54px; right: 0; background: #1a0030; border: 1px solid rgba(178,82,219,.2); border-radius: 8px; padding: 6px 0; min-width: 90px; z-index: 500; list-style: none; box-shadow: 0 12px 40px rgba(0,0,0,.6); } .nav-lang.is-open .nav-lang__menu { display: block; } .nav-lang__menu a { display: block; padding: 9px 18px; font-size: 13px; font-weight: 500; color: rgba(255,255,255,.75); transition: background var(--transition); } .nav-lang__menu a:hover { background: rgba(255,255,255,.05); color: #fff; } .nav-lang__menu a.current { color: var(--purple-link); } /* Book button */ .btn-book { flex-shrink: 0; display: inline-block; height: 42px; line-height: 38px; padding: 0 26px; border: 2px solid rgba(255,255,255,.7); border-radius: 30px; font-family: var(--font); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #fff; transition: background var(--transition), border-color var(--transition); } .btn-book:hover { background: #fff; border-color: #fff; color: #000; } /* Mobile button */ .mobile-menu-btn { display: none; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 30px; height: 24px; background: url('https://questomatica.nl/new/img/mobile-menu.png') no-repeat center / contain; border: none; cursor: pointer; appearance: none; } .mobile-menu-btn.is-active { background-image: url('https://questomatica.nl/new/img/mobile-menu__close.png'); } /* Mobile menu */ .mobile-menu { display: none; position: fixed; inset: 0; background: var(--purple-nav); z-index: 200; padding: 80px 28px 28px; overflow-y: auto; list-style: none; } .mobile-menu.is-open { display: block; } .mobile-menu li + li { margin-top: 22px; } .mobile-menu a { font-size: 20px; font-weight: 500; color: rgba(255,255,255,.85); display: block; } .mobile-menu a:hover { color: #fff; } .mobile-menu .m-room a { color: var(--purple-link); } .mobile-menu .m-book a { display: block; text-align: center; height: 48px; line-height: 44px; border: 2px solid #fff; border-radius: 30px; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; } .mobile-menu .m-book a:hover { background: #fff; color: #000; } /* ── HERO — video background, text left ─────────────────── */ .hero { position: relative; height: 100vh; min-height: 600px; overflow: hidden; display: flex; align-items: center; } /* Video fills the hero */ .hero__video-wrap { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #0a0218 url('https://questomatica.nl/new/img/arcade-invasion-bar-1.avif') no-repeat center / cover; } .hero__video-wrap video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* Dark gradient overlay — heavier on left for text readability */ .hero__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient( 105deg, rgba(4,2,36,.92) 0%, rgba(10,5,50,.85) 35%, rgba(20,5,60,.6) 60%, rgba(0,0,0,.3) 100% ); } /* Content sits above video and overlay */ .hero__content { position: relative; z-index: 2; width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 66px 24px 0; } .hero__inner { max-width: 580px; } .hero__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .18em; color: var(--purple-link); text-transform: uppercase; margin-bottom: 20px; display: block; } .hero__h1 { font-size: 44px; font-weight: 700; color: #fff; line-height: 1.15; margin-bottom: 20px; letter-spacing: -.01em; } .hero__h1 em { font-style: normal; color: #c084fc; } .hero__sub { font-size: 16px; color: rgba(255,255,255,.8); line-height: 1.7; margin-bottom: 12px; font-weight: 400; } .hero__reassurance { font-size: 14px; color: rgba(255,255,255,.65); margin-bottom: 32px; display: flex; align-items: center; gap: 6px; } .hero__reassurance::before { content: '✓'; color: var(--purple-link); font-weight: 700; } .hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 36px; } .hero__cta-primary { display: inline-block; padding: 16px 34px; background: var(--grad-btn); border-radius: 30px; font-family: var(--font); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #fff; transition: opacity var(--transition), transform var(--transition); box-shadow: 0 4px 20px rgba(102,46,161,.4); } .hero__cta-primary:hover { opacity: .9; transform: translateY(-1px); } .hero__cta-secondary { display: inline-block; padding: 15px 28px; border: 1.5px solid rgba(255,255,255,.45); border-radius: 30px; font-size: 14px; font-weight: 500; color: rgba(255,255,255,.85); transition: border-color var(--transition), color var(--transition); } .hero__cta-secondary:hover { border-color: rgba(255,255,255,.8); color: #fff; } /* Trust strip inline in hero */ .hero__trust { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; } .hero__trust-item { font-size: 12px; color: rgba(255,255,255,.55); display: flex; align-items: center; gap: 5px; } .hero__trust-item strong { color: rgba(255,255,255,.85); font-weight: 600; } .hero__trust-sep { color: rgba(255,255,255,.2); font-size: 10px; } /* ── TRUST BAR ──────────────────────────────────────────── */ .trust-bar { background: var(--bg-header); border-bottom: 1px solid rgba(255,255,255,.06); padding: 20px 24px; } .trust-bar__inner { max-width: var(--max-w); margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 0; flex-wrap: nowrap; } .trust-bar__item { display: flex; align-items: center; gap: 12px; padding: 8px 24px; flex-shrink: 0; } .trust-bar__item img { height: 72px; width: auto; max-width: 130px; object-fit: contain; flex-shrink: 0; opacity: .9; } .trust-bar__text {} .trust-bar__score { font-size: 17px; font-weight: 700; color: var(--purple-link); line-height: 1; display: block; margin-bottom: 2px; } .trust-bar__label { font-size: 11px; color: var(--text-muted); line-height: 1.4; display: block; } .trust-bar__divider { width: 1px; height: 36px; background: rgba(255,255,255,.08); flex-shrink: 0; } /* ── ROOMS SECTION ──────────────────────────────────────── */ .rooms-section { padding: 80px 24px; background: #050310; } .rooms-section__inner { max-width: var(--max-w); margin: 0 auto; } .rooms-section__header { text-align: center; margin-bottom: 50px; } .rooms-section__label { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--purple-label); display: block; margin-bottom: 14px; } .rooms-section__title { font-size: 32px; font-weight: 700; color: #fff; line-height: 1.2; } .rooms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } .room-card { border-radius: var(--radius); overflow: hidden; background: #0d0818; border: 1px solid rgba(178,82,219,.15); transition: border-color var(--transition), transform var(--transition); display: flex; flex-direction: column; } .room-card:hover { border-color: rgba(178,82,219,.4); transform: translateY(-4px); } .room-card__image { position: relative; height: 300px; overflow: hidden; } .room-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .room-card:hover .room-card__image img { transform: scale(1.04); } .room-card__image-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, rgba(4,2,36,.9) 100%); } .room-card__difficulty { position: absolute; top: 16px; right: 16px; background: rgba(0,0,0,.65); backdrop-filter: blur(8px); border: 1px solid rgba(178,82,219,.3); border-radius: 20px; padding: 4px 12px; font-size: 11px; color: rgba(255,255,255,.8); font-weight: 500; } .room-card__body { padding: 28px; flex: 1; display: flex; flex-direction: column; } .room-card__tag { font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--purple-link); margin-bottom: 10px; } .room-card__title { font-size: 26px; font-weight: 700; color: #fff; margin-bottom: 12px; line-height: 1.2; letter-spacing: -.01em; } .room-card__desc { font-size: 14px; color: rgba(255,255,255,.65); line-height: 1.7; margin-bottom: 22px; flex: 1; } .room-card__details { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; } .room-card__detail { font-size: 12px; color: rgba(255,255,255,.55); display: flex; align-items: center; gap: 5px; } .room-card__detail strong { color: rgba(255,255,255,.85); font-weight: 600; } .room-card__cta { display: inline-block; padding: 14px 28px; background: var(--grad-btn); border-radius: 30px; font-family: var(--font); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #fff; transition: opacity var(--transition), transform var(--transition); text-align: center; box-shadow: 0 4px 16px rgba(102,46,161,.35); } .room-card__cta:hover { opacity: .9; transform: translateY(-1px); } .room-card__note { font-size: 12px; color: rgba(255,255,255,.35); margin-top: 10px; text-align: center; } /* ── USP ────────────────────────────────────────────────── */ .usp { padding: 80px 24px; background: var(--bg-section); background-image: url('https://questomatica.nl/new/img/about-bg.webp'); background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; } .usp::before { content: ''; position: absolute; inset: 0; background: rgba(10,5,30,.75); pointer-events: none; } .usp__inner { max-width: var(--max-w-mid); margin: 0 auto; position: relative; z-index: 1; } .usp__icons { display: flex; justify-content: center; flex-wrap: wrap; gap: 0; margin-bottom: 52px; } .usp__item { width: 16.6%; min-width: 120px; padding: 0 12px; text-align: center; } .usp__item img { width: 90px; height: 90px; object-fit: contain; margin: 0 auto 16px; display: block; filter: brightness(1.1); } .usp__item p { font-size: 13px; font-weight: 500; line-height: 1.5; color: rgba(255,255,255,.85); } .usp__text { font-size: 16px; color: rgba(255,255,255,.8); line-height: 1.85; max-width: 780px; margin: 0 auto; text-align: center; } .usp__text p + p { margin-top: 18px; } /* ── AUDIENCE ───────────────────────────────────────────── */ .audience { padding: 80px 24px; background-color: #080418; background-image: url('https://questomatica.nl/new/img/reviews-bg.webp'); background-repeat: repeat-x; background-position: 0 0; background-size: auto 100%; } .audience__inner { max-width: var(--max-w-mid); margin: 0 auto; } .audience__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .audience__card { border: 1px solid rgba(178,82,219,.15); border-radius: var(--radius); padding: 32px 26px; background: rgba(20,10,40,.6); display: flex; flex-direction: column; transition: border-color var(--transition), background var(--transition), transform var(--transition), box-shadow var(--transition); } .audience__card:hover { border-color: rgba(178,82,219,.5); background: rgba(40,20,72,.85); transform: translateY(-4px); box-shadow: 0 14px 32px rgba(102,46,161,.28); } .audience__card--highlight { border-color: rgba(178,82,219,.4); background: rgba(80,20,130,.2); } .audience__card--highlight:hover { border-color: rgba(178,82,219,.95); background: rgba(108,38,176,.92); transform: translateY(-4px); box-shadow: 0 18px 44px rgba(140,60,200,.5), 0 0 50px rgba(178,82,219,.28); } .audience__card h3 { font-size: 17px; font-weight: 600; color: #fff; margin-bottom: 14px; line-height: 1.35; } .audience__card p { font-size: 14px; color: rgba(255,255,255,.65); line-height: 1.75; flex: 1; margin-bottom: 22px; } .audience__card a { font-size: 13px; font-weight: 600; color: var(--purple-link); display: inline-flex; align-items: center; gap: 4px; transition: gap var(--transition); } .audience__card a:hover { gap: 8px; } /* ── SECTION SHARED ─────────────────────────────────────── */ .section-label { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(178,82,219,.9); text-align: center; display: block; margin-bottom: 14px; text-shadow: 0 0 20px rgba(178,82,219,.4); } .section-title { font-size: 30px; font-weight: 700; color: #fff; text-align: center; margin-bottom: 48px; line-height: 1.2; letter-spacing: -.01em; } .sep { height: 3px; background: linear-gradient(to right, var(--purple-sep-l), var(--purple-sep-r)); position: relative; margin: 16px 0; border-radius: 2px; } .sep::before, .sep::after { content: ''; position: absolute; width: 6px; height: 6px; border-radius: 50%; border: 3px solid; background: var(--bg-section); top: 50%; transform: translateY(-50%); } .sep::before { left: 0; border-color: var(--purple-sep-l); } .sep::after { right: 0; border-color: var(--purple-sep-r); } /* ── REVIEWS ────────────────────────────────────────────── */ .reviews { padding: 80px 24px; background-color: #0a0520; background-image: url('https://questomatica.nl/new/img/reviews-bg.webp'); background-repeat: repeat-x; background-position: 0 0; background-size: auto 100%; position: relative; } .reviews::before { content: ''; position: absolute; inset: 0; background: rgba(5,0,20,.55); pointer-events: none; } .reviews__inner { max-width: var(--max-w); margin: 0 auto; position: relative; z-index: 1; } .reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .review-card { border-radius: var(--radius); background: var(--grad-review); padding: 26px 22px; display: flex; flex-direction: column; transition: transform var(--transition); } .review-card:hover { transform: translateY(-3px); } .review-card__stars { font-size: 14px; letter-spacing: 3px; color: #f5c518; margin-bottom: 6px; } .review-card__label { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 14px; } .review-card__text { font-size: 14px; line-height: 1.7; color: rgba(255,255,255,.9); flex: 1; margin-bottom: 18px; font-style: normal; } .review-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12); } .review-card__author { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.65); } .review-card__link { font-size: 11px; color: rgba(255,255,255,.7); border-bottom: 1px solid rgba(255,255,255,.3); padding-bottom: 1px; white-space: nowrap; transition: color var(--transition), border-color var(--transition); } .review-card__link:hover { color: #fff; border-color: #fff; } .reviews__cta { text-align: center; margin-top: 36px; } .reviews__cta a { font-size: 14px; font-weight: 600; color: var(--purple-link); border-bottom: 1px solid rgba(178,82,219,.4); padding-bottom: 2px; transition: border-color var(--transition); } .reviews__cta a:hover { border-color: var(--purple-link); } /* ── FAQ ────────────────────────────────────────────────── */ .faq-section { padding: 80px 24px; background-color: var(--bg-section); background-image: url('https://questomatica.nl/new/img/faq-bg.webp'); background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; position: relative; } .faq-section::before { content: ''; position: absolute; inset: 0; background: rgba(5,2,20,.82); pointer-events: none; } .faq-section__inner { position: relative; z-index: 1; } .faq-section__inner { max-width: var(--max-w-narrow); margin: 0 auto; } .faq-item { border-bottom: 1px solid rgba(255,255,255,.08); } .faq-item:first-of-type { border-top: 1px solid rgba(255,255,255,.08); } .faq-item__q { width: 100%; background: none; border: none; font-family: var(--font); font-size: 16px; font-weight: 500; color: rgba(255,255,255,.9); text-align: left; cursor: pointer; padding: 20px 48px 20px 0; display: flex; justify-content: space-between; align-items: center; outline: none; position: relative; line-height: 1.4; transition: color var(--transition); } .faq-item__q:hover { color: #fff; } .faq-item__q::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M14.83 16.42l9.17 9.17 9.17-9.17 2.83 2.83-12 12-12-12z' fill='%23B252DB'/%3E%3C/svg%3E") no-repeat center / contain; transition: transform .3s ease; flex-shrink: 0; } .faq-item__q.open { color: #fff; } .faq-item__q.open::after { transform: translateY(-50%) rotate(-180deg); } .faq-item__a { display: none; padding: 0 0 22px; } .faq-item__a.open { display: block; } .faq-item__a p { font-size: 15px; line-height: 1.8; color: rgba(255,255,255,.72); margin-bottom: 10px; } .faq-item__a a { color: var(--purple-link); } .faq-item__a a:hover { text-decoration: underline; } .faq-section__more { display: inline-block; margin-top: 32px; font-size: 14px; font-weight: 500; color: rgba(255,255,255,.4); border-bottom: 1px solid rgba(255,255,255,.15); padding-bottom: 2px; transition: color var(--transition), border-color var(--transition); } .faq-section__more:hover { color: rgba(255,255,255,.7); border-color: rgba(255,255,255,.35); } /* ── ABOUT ──────────────────────────────────────────────── */ .about-section { padding: 80px 24px; background: var(--bg-section); background-image: url('https://questomatica.nl/new/img/about-bg.webp'); background-repeat: no-repeat; background-position: center; background-size: cover; text-align: center; position: relative; } .about-section::before { content: ''; position: absolute; inset: 0; background: rgba(8,4,24,.82); pointer-events: none; } .about-section__inner { max-width: var(--max-w-mid); margin: 0 auto; position: relative; z-index: 1; } .about-section__text { font-size: 17px; line-height: 1.85; color: rgba(255,255,255,.82); margin-bottom: 28px; } .about-section__link { font-size: 14px; font-weight: 600; color: var(--purple-link); border-bottom: 1px solid rgba(178,82,219,.35); padding-bottom: 2px; transition: border-color var(--transition); } .about-section__link:hover { border-color: var(--purple-link); } /* ── MAP ────────────────────────────────────────────────── */ .q-map__area { height: 460px; background: var(--bg-section); } .q-map__area iframe, .q-map__area > div { width: 100%; height: 100%; border: none; display: block; } .q-map__bar { background: var(--purple-map); padding: 30px 24px; } .q-map__bar-inner { max-width: var(--max-w-narrow); margin: 0 auto; display: flex; gap: 20px; align-items: flex-start; } .q-map__bar-icon { flex-shrink: 0; margin-top: 2px; } .q-map__bar-icon img { width: 52px; height: auto; opacity: .9; } .q-map__bar-text { font-size: 15px; color: #fff; line-height: 1.7; } .q-map__bar-text strong { display: block; font-size: 16px; font-weight: 700; margin-bottom: 6px; } .q-map__cta { text-align: center; padding: 32px 24px; background: var(--bg); } .q-map__cta a { display: inline-block; height: 48px; line-height: 48px; background: var(--grad-btn); padding: 0 34px; border-radius: 30px; font-size: 14px; font-weight: 600; color: #fff; text-transform: uppercase; letter-spacing: .05em; box-shadow: 0 4px 20px rgba(102,46,161,.4); transition: opacity var(--transition), transform var(--transition); } .q-map__cta a:hover { opacity: .9; transform: translateY(-1px); } /* ── FOOTER ─────────────────────────────────────────────── */ .site-footer { padding: 52px 24px 36px; background: #080610; border-top: 1px solid rgba(255,255,255,.06); } .site-footer__inner { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr 1fr; gap: 32px; } .site-footer__col h5 { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 16px; } .site-footer__col p { font-size: 14px; color: rgba(255,255,255,.55); line-height: 1.8; } .site-footer__col a { font-size: 14px; color: rgba(255,255,255,.65); display: block; line-height: 2; transition: color var(--transition); } .site-footer__col a:hover { color: rgba(255,255,255,.95); } .site-footer__copy { font-size: 13px; color: rgba(255,255,255,.3); margin-top: 8px; } .site-footer__lang { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; } .site-footer__lang a { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.45); padding: 4px 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 4px; display: inline-block; line-height: 1.5; transition: border-color var(--transition), color var(--transition); } .site-footer__lang a:hover, .site-footer__lang a.current { border-color: rgba(178,82,219,.5); color: var(--purple-link); } .site-footer__social { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; } .site-footer__social a { width: 38px; height: 38px; background: url('https://questomatica.nl/new/img/social-circle.png') no-repeat center / 38px; display: block; transition: transform var(--transition), opacity var(--transition); opacity: .7; } .site-footer__social a:hover { transform: translateY(-3px); opacity: 1; } .site-footer__divider { border: none; border-top: 1px solid rgba(255,255,255,.05); margin: 36px 0 0; } /* ── RESPONSIVE ─────────────────────────────────────────── */ @media (max-width: 1023px) { .site-nav, .btn-book { display: none; } .mobile-menu-btn { display: block; } .hero__h1 { font-size: 32px; } .rooms-grid { grid-template-columns: 1fr; } .room-card__image { height: 240px; } .trust-bar__inner { flex-wrap: wrap; gap: 4px; } .trust-bar__item { padding: 8px 14px; } .trust-bar__divider { display: none; } .audience__grid { grid-template-columns: 1fr; gap: 16px; } .reviews__grid { grid-template-columns: 1fr; } .site-footer__inner { grid-template-columns: 1fr 1fr; gap: 24px; } .q-map__area { height: 300px; } .q-map__bar-icon { display: none; } } @media (max-width: 767px) { .hero { height: auto; min-height: 100vh; padding: 120px 0 60px; } .hero__h1 { font-size: 26px; } .hero__sub { font-size: 15px; } .hero__ctas { flex-direction: column; } .hero__cta-primary, .hero__cta-secondary { text-align: center; } .usp__item { width: 33.33%; margin-bottom: 24px; } .rooms-section__title { font-size: 24px; } .section-title { font-size: 22px; } .site-footer__inner { grid-template-columns: 1fr 1fr; gap: 20px 28px; } /* "Book now" col spans full width at bottom — most important action */ .site-footer__inner > .site-footer__col:last-child { grid-column: 1 / -1; } .trust-bar__inner { justify-content: flex-start; } } @media (max-width: 480px) { .usp__item { width: 50%; } .hero__h1 { font-size: 22px; } .hero__trust { flex-direction: column; gap: 8px; } .hero__trust-sep { display: none; } } /* Tablet: USP icons 3-across to avoid awkward 6-across wrapping (768–1023px) */ @media (min-width: 768px) and (max-width: 1023px) { .usp__item { width: 33.33%; margin-bottom: 24px; } } /* Language button - styled like the reference image */ .nav-lang__btn { background: rgba(255,255,255,.08) !important; border: 1.5px solid rgba(255,255,255,.2) !important; border-radius: 30px !important; padding: 6px 12px !important; display: flex !important; align-items: center !important; gap: 6px !important; cursor: pointer; transition: background .2s, border-color .2s; } .nav-lang__btn:hover { background: rgba(255,255,255,.14) !important; border-color: rgba(255,255,255,.35) !important; } .nav-lang__globe { font-size: 14px; line-height: 1; } .nav-lang__label { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.85); font-family: var(--font); } .nav-lang__arrow { font-size: 10px; color: rgba(255,255,255,.5); } /* Review cards - fix link showing Google Maps when should be TripAdvisor */ .review-card__link { font-size: 11px; color: rgba(255,255,255,.7); border-bottom: 1px solid rgba(255,255,255,.3); padding-bottom: 1px; white-space: nowrap; transition: color .2s, border-color .2s; } .review-card__link:hover { color: #fff; border-color: #fff; } /* USP section text contrast improvement */ .usp__item p { color: rgba(255,255,255,.9); font-size: 13px; font-weight: 500; } .usp__text { color: rgba(255,255,255,.85); } /* Audience card text contrast */ .audience__card p { color: rgba(255,255,255,.78); } /* FAQ question text */ .faq-item__q { color: rgba(255,255,255,.95) !important; } .faq-item__a p { color: rgba(255,255,255,.8) !important; } /* Footer text contrast */ .site-footer__col a { color: rgba(255,255,255,.72); } .site-footer__col a:hover { color: #fff; } .site-footer__col p { color: rgba(255,255,255,.55); } /* ── SCROLL INDICATOR ───────────────────────────────────── */ .hero__scroll-indicator { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; flex-direction: column; align-items: center; } .scroll-arrow { font-size: 22px; color: rgba(255,255,255,.5); animation: arrowBounce 1.6s ease-in-out infinite; display: block; line-height: 1; } @keyframes arrowBounce { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: .85; transform: translateY(6px); } } /* ── ROOM CARD BONUS TASK ───────────────────────────────── */ .room-card__bonus { font-size: 13px; color: #c084fc; background: rgba(178,82,219,.12); border: 1px solid rgba(178,82,219,.25); border-radius: 6px; padding: 10px 14px; margin-bottom: 20px; line-height: 1.5; } /* ── ROOM CARD DETAILS — better readability ─────────────── */ .room-card__details { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin-bottom: 24px; } .room-card__detail { font-size: 14px; color: rgba(255,255,255,.7); display: flex; align-items: center; gap: 7px; } .room-card__detail strong { color: rgba(255,255,255,.95); font-weight: 700; } .detail-icon { font-size: 13px; flex-shrink: 0; opacity: .7; display: none; } /* ── NOT SCARY — more prominent in hero ─────────────────── */ .hero__reassurance { font-size: 16px !important; color: rgba(255,255,255,.9) !important; margin-bottom: 32px; display: flex; align-items: center; gap: 8px; background: rgba(178,82,219,.15); border: 1px solid rgba(178,82,219,.3); border-radius: 8px; padding: 10px 16px; width: fit-content; } .hero__reassurance strong { color: #c084fc; } .hero__reassurance::before { content: "✓"; color: #c084fc; font-weight: 700; font-size: 18px; } /* ── CONTACT NAV ITEM ────────────────────────────────────── */ .nav-contact a { color: var(--purple-link) !important; } .nav-contact a:hover { color: #d9abed !important; } /* ── YELLOW STARS ────────────────────────────────────────── */ .stars-yellow { color: #FFD700; font-size: 16px; letter-spacing: 2px; } /* ── SECTION HEADINGS — larger ───────────────────────────── */ .section-title { font-size: 36px !important; } /* ── AUDIENCE CARD — highlighted middle card ─────────────── */ .audience__card--highlight { border-color: rgba(178,82,219,.7); background: rgba(60,15,110,.85); box-shadow: 0 0 40px rgba(178,82,219,.2), inset 0 1px 0 rgba(178,82,219,.3); position: relative; } .audience__card--highlight::before { display: none; } .audience__card--highlight h3 { color: #ffffff; } /* ── FOOTER SOCIAL ICONS ─────────────────────────────────── */ .site-footer__social a { background-size: 60% !important; background-repeat: no-repeat !important; background-position: center !important; background-color: rgba(255,255,255,.07) !important; } .social-fb { background-image: url('https://questomatica.nl/new/img/social-circle.png') !important; } .social-tw { background-image: url('https://questomatica.nl/new/img/social-circle.png') !important; } .social-ig { background-image: url('https://questomatica.nl/new/img/social-circle.png') !important; } .social-li { background-image: url('https://questomatica.nl/new/img/social-circle.png') !important; } /* Better approach — use font icons since image approach fails */ .site-footer__social a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: rgba(255,255,255,.6); transition: background .2s, color .2s; text-indent: 0; } .site-footer__social a:hover { background: rgba(178,82,219,.3); color: #fff; } .social-fb::after { content: "f"; font-family: serif; } .social-tw::after { content: "𝕏"; font-size: 12px; } .social-ig::after { content: "▣"; font-size: 14px; } .social-li::after { content: "in"; font-size: 11px; } /* ── FOOTER AWARDS — equal sizes ─────────────────────────── */ .footer-awards { display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 14px; } .footer-awards a { display: block; } .footer-awards img { width: 70px; height: auto; object-fit: contain; opacity: .8; transition: opacity .2s; } .footer-awards a:hover img { opacity: 1; } .footer-awards__fb { width: 56px; height: 56px; opacity: .8; transition: opacity .2s; } .footer-awards a:hover .footer-awards__fb { opacity: 1; } /* ── FAQ — All questions link fix ────────────────────────── */ .faq-section__more { display: inline-block; margin-top: 32px; font-size: 15px; font-weight: 600; color: var(--purple-link); border-bottom: 1px solid rgba(178,82,219,.4); padding-bottom: 2px; transition: border-color .2s; } .faq-section__more:hover { border-color: var(--purple-link); } /* Room detail items */ .detail-icon { display: none; } .room-card__detail { gap: 0; padding-left: 14px; position: relative; } .room-card__detail::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: var(--purple-link); opacity: .6; } /* ── DIFFICULTY DOTS ─────────────────────────────────────── */ .diff-dots { letter-spacing: 2px; font-size: 10px; color: var(--purple-link); margin-right: 5px; } .room-card__difficulty { position: absolute; top: 16px; right: 16px; background: rgba(0,0,0,.72); backdrop-filter: blur(8px); border: 1px solid rgba(178,82,219,.25); border-radius: 20px; padding: 5px 14px; font-size: 11px; font-weight: 600; color: rgba(255,255,255,.8); letter-spacing: .04em; } /* ── HINT SYSTEM NOTE ────────────────────────────────────── */ .rooms-hint-note { text-align: center; font-size: 14px; color: rgba(255,255,255,.5); margin-top: 32px; padding: 12px 20px; border-top: 1px solid rgba(255,255,255,.06); } .rooms-hint-note { max-width: var(--max-w); margin-left: auto; margin-right: auto; } /* ── CSS LOCK DIFFICULTY INDICATORS ─────────────────────── */ .diff-locks { display: flex; align-items: center; gap: 3px; } .dl { width: 12px; height: 14px; position: relative; display: inline-block; } /* Lock body */ .dl::after { content: ""; position: absolute; bottom: 0; left: 0; width: 12px; height: 8px; background: currentColor; border-radius: 2px; } /* Lock shackle */ .dl::before { content: ""; position: absolute; top: 0; left: 2px; width: 8px; height: 8px; border: 2px solid currentColor; border-bottom: none; border-radius: 4px 4px 0 0; } .dl-on { color: var(--purple-link); } .dl-off { color: rgba(178,82,219,.2); } /* ── HINT NOTE — under section title ────────────────────── */ .rooms-hint-note { font-size: 14px; color: rgba(255,255,255,.65); text-align: center; margin-top: 12px; padding: 0; border-top: none; max-width: 500px; margin-left: auto; margin-right: auto; line-height: 1.6; } /* ── SCROLL ARROW — bigger and brighter ─────────────────── */ .scroll-arrow { font-size: 32px !important; color: rgba(255,255,255,.75) !important; } /* ── USP POINTS — two column scannable layout ────────────── */ .usp__points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 900px; margin: 0 auto; text-align: left; } .usp__point { display: flex; gap: 14px; align-items: flex-start; } .usp__point-icon { font-size: 22px; flex-shrink: 0; margin-top: 2px; } .usp__point strong { display: block; font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 8px; line-height: 1.3; } .usp__point p { font-size: 14px; color: rgba(255,255,255,.7); line-height: 1.7; margin: 0; text-align: left; } /* ── AUDIENCE CARD LINKS — more clearly clickable ────────── */ .audience__card-link { display: inline-flex !important; align-items: center; gap: 6px; font-size: 14px !important; font-weight: 600; color: #fff !important; background: rgba(178,82,219,.25); border: 1px solid rgba(178,82,219,.4); border-radius: 20px; padding: 8px 18px !important; transition: background .2s, border-color .2s !important; border-bottom: none !important; } .audience__card-link:hover { background: rgba(178,82,219,.45) !important; border-color: rgba(178,82,219,.7) !important; gap: 10px !important; } /* ── OUTLINE BUTTON STYLE for FAQ and About links ─────────── */ .btn-outline { display: inline-block; padding: 12px 28px; border: 1.5px solid rgba(178,82,219,.5); border-radius: 30px; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.85); transition: background .2s, border-color .2s, color .2s; } .btn-outline:hover { background: rgba(178,82,219,.2); border-color: var(--purple-link); color: #fff; } .faq-section__more.btn-outline { border-bottom: none; padding-bottom: 12px; margin-top: 0; } /* ── READABILITY AUDIT FIXES ─────────────────────────────── */ /* Ensure all body text meets minimum contrast */ .audience__card p { color: rgba(255,255,255,.82) !important; } .room-card__desc { color: rgba(255,255,255,.78) !important; } .review-card__text { color: rgba(255,255,255,.92) !important; } .faq-item__q { color: rgba(255,255,255,.95) !important; font-size: 17px !important; } .faq-item__a p { color: rgba(255,255,255,.82) !important; font-size: 15px !important; } .about-section__text { color: rgba(255,255,255,.85) !important; } .usp__text { color: rgba(255,255,255,.82) !important; } .hero__sub { color: rgba(255,255,255,.88) !important; font-size: 17px !important; } .trust-bar__label { color: rgba(255,255,255,.6) !important; font-size: 12px !important; } /* Section labels - simple uppercase text, no button */ .section-label { color: var(--purple-label) !important; font-size: 12px !important; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; display: block !important; text-align: center; background: none !important; border: none !important; padding: 0 !important; border-radius: 0 !important; margin-bottom: 12px; } @media (max-width: 767px) { .usp__points { grid-template-columns: 1fr; } } /* ── TRIPADVISOR BADGE — dark theme fit ──────────────────── */ .ta-badge-link { display: block; flex-shrink: 0; } .ta-badge-img { height: 72px; width: auto; object-fit: contain; display: block; filter: brightness(.9) drop-shadow(0 0 8px rgba(0,0,0,.3)); mix-blend-mode: screen; } /* ── ROOM CARD DETAILS — label/value layout ──────────────── */ .room-card__detail { display: flex; flex-direction: column; gap: 2px; padding-left: 0; } .room-card__detail::before { display: none; } .detail-label { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.4); line-height: 1; } .detail-value { font-size: 14px; font-weight: 600; color: rgba(255,255,255,.92); line-height: 1.3; } /* ── USP POINTS — remove emoji gap ──────────────────────── */ .usp__point-icon { display: none; } .usp__point { display: block; } .usp__point strong { display: block; font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(178,82,219,.2); } .usp__point p { font-size: 14px; color: rgba(255,255,255,.75); line-height: 1.7; } /* ── ROOM CARD NOTE ──────────────────────────────────────── */ .room-card__note { font-size: 12px; color: rgba(255,255,255,.4); text-align: center; margin-top: 12px; line-height: 1.6; } /* ── USP POINT TITLES — purple ───────────────────────────── */ .usp__point strong { color: var(--purple-link) !important; border-bottom-color: rgba(178,82,219,.25) !important; } /* ── SCROLL INDICATOR — clean chevron ───────────────────── */ .hero__scroll-indicator { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 0; } .scroll-dash { display: none; } .scroll-arrow { display: block; width: 24px; height: 24px; border-right: 2px solid rgba(255,255,255,.55); border-bottom: 2px solid rgba(255,255,255,.55); transform: rotate(45deg); animation: chevronBounce 1.6s ease-in-out infinite; margin-top: -8px; font-size: 0 !important; color: transparent !important; } @keyframes chevronBounce { 0%, 100% { opacity: .3; transform: rotate(45deg) translate(0, 0); } 50% { opacity: .85; transform: rotate(45deg) translate(4px, 4px); } } /* ── USP BLOCKS — equal height, more space between ──────── */ .usp__points { gap: 40px !important; align-items: stretch !important; } .usp__point { background: rgba(178,82,219,.06); border: 1px solid rgba(178,82,219,.15); border-radius: 10px; padding: 28px 24px; display: flex !important; flex-direction: column; } .usp__point strong { color: #d4a0ff !important; font-size: 16px !important; margin-bottom: 12px !important; padding-bottom: 10px !important; border-bottom: 1px solid rgba(178,82,219,.2) !important; } .usp__point p { flex: 1; font-size: 14px !important; color: rgba(255,255,255,.72) !important; line-height: 1.75 !important; } /* ── ROOM CARD NAME — prominent, above subtitle ──────────── */ .room-card__name { display: block; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--purple-link); margin-bottom: 8px; } /* Remove old tag style since it's now inside h3 */ .room-card__tag { display: none; } .room-card__title { font-size: 26px !important; font-weight: 700 !important; color: #fff !important; line-height: 1.2 !important; margin-bottom: 14px !important; } /* ── ROOM CARD DETAILS — tighter label/value ─────────────── */ .room-card__details { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; margin-bottom: 24px; } .room-card__detail { display: flex; flex-direction: column; gap: 1px; padding-left: 0; } .room-card__detail::before { display: none !important; } .detail-label { font-size: 10px !important; font-weight: 700 !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: rgba(255,255,255,.35) !important; line-height: 1 !important; } .detail-value { font-size: 17px !important; font-weight: 700 !important; color: #fff !important; line-height: 1.2 !important; } /* Price spans the full card width as a centered row, balancing the 2-col stat grid */ .room-card__detail--price { grid-column: 1 / -1; align-items: center; text-align: center; margin-top: 6px; } /* Players label override — show "players" under the number */ /* ── ROOM CARD H3 STRUCTURE ──────────────────────────────── */ .room-card__title { display: flex; flex-direction: column; gap: 4px; } .room-card__subtitle { font-size: 24px; font-weight: 700; color: #fff; line-height: 1.2; } /* ── WAKE UP BONUS PILL — softer colour than Arcade ─────── */ .room-card__bonus--wakeup { background: rgba(100,60,180,.2) !important; border-color: rgba(140,100,220,.3) !important; color: #c4a0f0 !important; } /* ── HINT NOTE — single line, wider ─────────────────────── */ .rooms-hint-note { white-space: nowrap !important; max-width: none !important; font-size: 14px; color: rgba(255,255,255,.55); text-align: center; margin-top: 14px; } /* ── USP POINTS — wider blocks ───────────────────────────── */ .usp__points { max-width: var(--max-w-mid) !important; width: 100%; } /* ── USP WIDTH FIX — force wider blocks ─────────────────── */ .usp__inner { max-width: var(--max-w) !important; } .usp__points { max-width: 100% !important; width: 100% !important; grid-template-columns: repeat(3, 1fr) !important; gap: 32px !important; } .usp__point { padding: 32px 28px !important; } /* ── USP CARDS — fix text wrapping ──────────────────────── */ .usp__point p { font-size: 15px !important; line-height: 1.7 !important; color: rgba(255,255,255,.75) !important; } .usp__point strong { font-size: 17px !important; line-height: 1.3 !important; } .usp__icons { margin-bottom: 52px !important; } /* min-width removed — caused overflow on mobile */ /* ── USP TEXT CONTAINER — remove width constraint on points ─ */ .usp__text { max-width: 100% !important; width: 100% !important; } /* ── LOGO — remove black background ─────────────────────── */ .site-header__logo-text { mix-blend-mode: screen; filter: brightness(1.1); } /* ── BONUS PILLS — unify both to Wake Up style ───────────── */ .room-card__bonus { font-size: 14px !important; color: rgba(255,255,255,.8) !important; background: rgba(80,20,130,.25) !important; border: 1px solid rgba(140,80,220,.3) !important; border-radius: 8px !important; padding: 12px 16px !important; margin-bottom: 20px !important; line-height: 1.5 !important; } .room-card__bonus--wakeup { background: rgba(80,20,130,.25) !important; border-color: rgba(140,80,220,.3) !important; color: rgba(255,255,255,.8) !important; } /* ── SOCIAL ICONS — Font Awesome ─────────────────────────── */ .site-footer__social a { width: 40px !important; height: 40px !important; border-radius: 50% !important; background: rgba(255,255,255,.07) !important; border: 1px solid rgba(255,255,255,.12) !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 0 !important; transition: background .2s, border-color .2s !important; } .site-footer__social a:hover { background: rgba(178,82,219,.3) !important; border-color: rgba(178,82,219,.5) !important; } .site-footer__social a i { font-size: 15px !important; color: rgba(255,255,255,.65) !important; transition: color .2s !important; } .site-footer__social a:hover i { color: #fff !important; } /* Remove old pseudo-element text icons */ .social-fb::after, .social-tw::after, .social-ig::after, .social-li::after { content: none !important; } /* ── LOGO — remove border completely ────────────────────── */ .site-header__logo { border: none !important; border-radius: 0 !important; background: none !important; } .site-header__logo-wrap { border: none !important; } /* ── LOGO — gear icon + CSS text wordmark ───────────────── */ .site-header__logo-wrap { display: flex !important; align-items: center !important; gap: 10px !important; text-decoration: none !important; border: none !important; } .site-header__logo-icon { display: block !important; width: 36px !important; height: 36px !important; background: url('https://questomatica.nl/new/img/main-logo.webp') no-repeat center / contain !important; flex-shrink: 0 !important; border: none !important; border-radius: 0 !important; } .site-header__logo-wordmark { font-family: var(--font) !important; font-size: 18px !important; font-weight: 700 !important; color: #fff !important; letter-spacing: .08em !important; text-transform: uppercase !important; white-space: nowrap !important; } .logo-dot { color: var(--purple-link) !important; margin: 0 1px !important; } /* Hide old logo text image */ .site-header__logo-text { display: none !important; } /* ── LOGO — O in purple ──────────────────────────────────── */ .logo-dot { color: var(--purple-link) !important; margin: 0 !important; font-style: normal !important; } /* ── LOGO O — white like other letters ──────────────────── */ .logo-dot { color: #fff !important; } /* ════════════════════════════════════════════════════════════ SUBPAGE STYLES — FAQ and About ════════════════════════════════════════════════════════════ */ .subpage-main { padding-top: 66px; min-height: 80vh; } /* ── SUBPAGE HERO ────────────────────────────────────────── */ .subpage-hero { background: var(--purple-nav); background-image: url('https://questomatica.nl/new/img/faq-bg.webp'); background-repeat: no-repeat; background-position: center; background-size: cover; padding: 60px 24px; text-align: center; position: relative; } .subpage-hero::before { content: ''; position: absolute; inset: 0; background: rgba(5,0,25,.75); } .subpage-hero__inner { position: relative; z-index: 1; max-width: var(--max-w-narrow); margin: 0 auto; } .subpage-hero__h1 { font-size: 38px; font-weight: 700; color: #fff; margin: 12px 0 16px; line-height: 1.2; } .subpage-hero__sub { font-size: 16px; color: rgba(255,255,255,.72); line-height: 1.7; } .subpage-hero__sub a { color: var(--purple-link); } /* ── FAQ PAGE ────────────────────────────────────────────── */ .faq-page { padding: 60px 24px; background: var(--bg); } .faq-page__inner { max-width: var(--max-w-narrow); margin: 0 auto; } .faq-group { margin-bottom: 52px; } .faq-group__title { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--purple-label); margin-bottom: 24px; padding-bottom: 10px; border-bottom: 1px solid rgba(178,82,219,.2); } /* FAQ CTA */ .faq-cta { text-align: center; padding: 48px 24px; border-top: 1px solid rgba(255,255,255,.06); margin-top: 20px; } .faq-cta p { font-size: 18px; color: rgba(255,255,255,.75); margin-bottom: 20px; } .faq-cta__buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .faq-cta__btn { display: inline-block; padding: 14px 28px; border-radius: 30px; font-size: 14px; font-weight: 600; transition: opacity .2s; } .faq-cta__btn--primary { background: var(--grad-btn); color: #fff; } .faq-cta__btn--secondary { border: 1.5px solid rgba(255,255,255,.35); color: rgba(255,255,255,.85); } .faq-cta__btn:hover { opacity: .85; } /* ── ABOUT PAGE ──────────────────────────────────────────── */ .about-page { padding: 60px 24px; background: var(--bg); } .about-page__inner { max-width: 760px; margin: 0 auto; } .about-section-block { margin-bottom: 48px; } .about-section-block h2 { font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 18px; line-height: 1.3; } .about-section-block p { font-size: 16px; color: rgba(255,255,255,.78); line-height: 1.85; margin-bottom: 16px; } .about-section-block p:last-child { margin-bottom: 0; } .about-section-block em { color: #c4a0f0; font-style: normal; } .about-section-block strong { color: #fff; } /* About stats row */ .about-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 48px 0; padding: 32px 24px; background: rgba(178,82,219,.07); border: 1px solid rgba(178,82,219,.15); border-radius: 10px; } .about-stat { text-align: center; } .about-stat__number { display: block; font-size: 20px; font-weight: 700; color: var(--purple-link); margin-bottom: 6px; } .about-stat__label { font-size: 12px; color: rgba(255,255,255,.5); line-height: 1.4; display: block; } /* About CTA */ .about-cta { text-align: center; padding: 48px 0 0; border-top: 1px solid rgba(255,255,255,.06); margin-top: 20px; } .about-cta h2 { font-size: 26px; font-weight: 700; color: #fff; margin-bottom: 24px; } .about-cta__buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* Footer book button */ .footer-book-btn { display: inline-block; padding: 10px 20px; background: var(--grad-btn); border-radius: 20px; font-size: 13px; font-weight: 600; color: #fff; margin-top: 4px; transition: opacity .2s; } .footer-book-btn:hover { opacity: .85; color: #fff; } @media (max-width: 767px) { .subpage-hero__h1 { font-size: 28px; } .about-stats { grid-template-columns: 1fr 1fr; } } /* ── SAFARI FIXES ────────────────────────────────────────── */ /* Safari doesn't support mix-blend-mode on video the same way */ @supports (-webkit-appearance: none) { .hero__video-wrap video { -webkit-transform: translateZ(0); transform: translateZ(0); } } /* Safari flex gap fallback */ .site-nav { gap: 22px; } .hero__ctas { gap: 12px; } .trust-bar__inner { gap: 0; } /* Safari backdrop-filter */ .hero__cta-secondary { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .room-card__difficulty { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } /* Safari font smoothing */ * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Room card image broken icon fix */ .room-card__image img { background: var(--bg-section); } /* ── SCROLL INDICATOR — purple chevron ──────────────────── */ .scroll-arrow { border-color: rgba(178,82,219,.7) !important; } @keyframes chevronBounce { /* border-color removed — not GPU-compositable, caused CLS 0.146 */ /* Use opacity + transform only: both are composited on GPU */ 0%, 100% { opacity: .4; transform: rotate(45deg) translate(0, 0); } 50% { opacity: 1; transform: rotate(45deg) translate(4px, 4px); } } /* ── PICTURE ELEMENT — fill container like img ───────────── */ .room-card__image picture { display: block; width: 100%; height: 100%; } .room-card__image picture img { width: 100%; height: 100%; object-fit: cover; } /* ── ROOM CARD NOTE — more visible ──────────────────────── */ .room-card__note { font-size: 13px !important; color: rgba(255,255,255,.6) !important; background: rgba(255,255,255,.04) !important; border-top: 1px solid rgba(255,255,255,.08) !important; padding: 12px 16px !important; margin: 12px -28px -28px !important; border-radius: 0 0 10px 10px !important; line-height: 1.6 !important; text-align: center !important; } .room-card__note strong { color: rgba(255,255,255,.85) !important; } /* ── HERO SUBTEXT — tighter, more scannable ─────────────── */ .hero__sub { font-size: 16px !important; line-height: 1.8 !important; color: rgba(255,255,255,.85) !important; margin-bottom: 28px !important; } .hero__sub br { display: block; content: ""; margin-top: 2px; } /* ── HIDE REASSURANCE PILL — integrated into subtext now ─── */ .hero__reassurance { display: none !important; } /* ══════════════════════════════════════════════════════════ USP DUAL TEXT — desktop full / mobile short Google indexes both (display:none is visible to crawlers). aria-hidden="true" on mobile paragraphs keeps screen readers from reading duplicate content aloud. ══════════════════════════════════════════════════════════ */ /* Desktop: show long copy, hide short */ .usp__text--mobile { display: none; } .usp__text--desktop { display: block; } /* Mobile: show short copy, hide long */ @media (max-width: 767px) { .usp__text--desktop { display: none; } .usp__text--mobile { display: block; } } /* ══════════════════════════════════════════════════════════ MOBILE FIXES v1.3 — USP grid, hint note, language switcher ══════════════════════════════════════════════════════════ */ /* ── HINT NOTE — fix nowrap overflow on mobile ──────────── */ @media (max-width: 767px) { .rooms-hint-note { white-space: normal !important; max-width: 100% !important; padding: 0 16px; font-size: 13px; } } /* ── USP ICONS — equal 3-column on mobile, centred ──────── */ @media (max-width: 767px) { .usp__icons { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 16px 8px !important; justify-items: center; } .usp__item { width: auto !important; display: flex; flex-direction: column; align-items: center; text-align: center; } .usp__item img { width: 64px !important; height: 64px !important; } .usp__item p { font-size: 11px !important; margin-top: 6px; } } /* ── USP POINTS — single column on mobile ───────────────── */ @media (max-width: 767px) { .usp__points { grid-template-columns: 1fr !important; gap: 16px !important; max-width: 100% !important; } .usp__point { padding: 20px 18px !important; } .usp__point strong { font-size: 15px !important; } .usp__point p { font-size: 14px !important; line-height: 1.65 !important; } } /* ── MOBILE LANGUAGE SWITCHER ────────────────────────────── */ .m-lang-switcher { margin-top: 8px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); } .m-lang-label { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 12px; } .m-lang-pills { display: flex; gap: 8px; flex-wrap: wrap; } .m-lang-pill { font-size: 13px !important; font-weight: 600; color: rgba(255,255,255,.7) !important; border: 1.5px solid rgba(255,255,255,.2); border-radius: 20px; padding: 6px 14px; display: inline-block !important; transition: background .2s, border-color .2s, color .2s; } .m-lang-pill:hover { background: rgba(178,82,219,.2); border-color: rgba(178,82,219,.5); color: #fff !important; } .m-lang-active { background: rgba(178,82,219,.25) !important; border-color: var(--purple-link) !important; color: #fff !important; } /* ══════════════════════════════════════════════════════════ MOBILE FIXES v1.4 — icon grid, trust bar alignment ══════════════════════════════════════════════════════════ */ /* ── USP ICONS — prevent overflow, proper 3-col grid ──────── The images are ~90px each. On a 360px screen, 3 cols at equal width = ~120px each with gap, which clips the outer icons because the section has 24px padding each side. Fix: smaller icons + contained grid with overflow hidden. ──────────────────────────────────────────────────────────── */ @media (max-width: 767px) { .usp { overflow: hidden; } .usp__inner { padding-left: 16px !important; padding-right: 16px !important; } .usp__icons { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 12px 4px !important; width: 100% !important; overflow: hidden; } .usp__item { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; overflow: hidden; } .usp__item img { width: 56px !important; height: 56px !important; max-width: 100% !important; } .usp__item p { font-size: 10px !important; line-height: 1.4 !important; margin-top: 5px !important; word-break: break-word; } } /* ── TRUST BAR — consistent item alignment on mobile ──────── Each item: image left, text right. Make all images same height so scores and labels align at same vertical position. ──────────────────────────────────────────────────────────── */ @media (max-width: 767px) { .trust-bar { padding: 16px 20px; } .trust-bar__inner { flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; } .trust-bar__item { width: 100% !important; padding: 0 !important; gap: 14px !important; align-items: center !important; } /* Uniform image container so all badges take same space */ .trust-bar__item img, .trust-bar__item svg { width: 60px !important; height: 60px !important; object-fit: contain !important; flex-shrink: 0 !important; } .trust-bar__score { font-size: 20px !important; } .trust-bar__label { font-size: 13px !important; } } /* ══════════════════════════════════════════════════════════ USP ICONS MOBILE — DEFINITIVE FIX v1.5 Overrides min-width:120px base rule and any flex layout ══════════════════════════════════════════════════════════ */ @media (max-width: 767px) { .usp { padding: 60px 0 !important; overflow: hidden !important; } .usp__inner { padding-left: 16px !important; padding-right: 16px !important; overflow: hidden !important; } .usp__icons { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 20px 8px !important; width: 100% !important; overflow: hidden !important; flex-wrap: unset !important; } .usp__item { width: 100% !important; min-width: 0 !important; max-width: 100% !important; padding: 0 4px !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; overflow: hidden !important; } .usp__item img { width: 54px !important; height: 54px !important; max-width: 100% !important; margin: 0 auto 8px !important; } .usp__item p { font-size: 10px !important; line-height: 1.35 !important; margin-top: 0 !important; word-break: break-word !important; overflow-wrap: break-word !important; } } /* ══════════════════════════════════════════════════════════ PERFORMANCE + ACCESSIBILITY FIXES v1.5 ══════════════════════════════════════════════════════════ */ /* ── Footer h3 styled same as old h5 ────────────────────── */ .footer-col-title { font-size: 11px !important; font-weight: 600 !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: rgba(255,255,255,.55) !important; margin-bottom: 14px !important; } /* ── CLS fix — force GPU compositing on animated element ── */ /* chevronBounce uses transform which should be composited, but opacity change alongside it can trigger layout. will-change promotes to own layer, contain prevents the animation from affecting surrounding layout. */ .scroll-arrow { will-change: transform, opacity !important; contain: layout style !important; transform: translateZ(0); /* force GPU layer */ } /* ── Fix non-composited animation — opacity only on wrapper */ /* Move opacity animation to a wrapper, keep transform only on the arrow itself so browser can composite independently */ .hero__scroll-indicator { will-change: auto; } /* ══════════════════════════════════════════════════════════ ACCESSIBILITY + PERFORMANCE FIXES v1.6 ══════════════════════════════════════════════════════════ */ /* ── Contrast fix: detail-label (LANGUAGES text) ────────── */ /* Was rgba(255,255,255,.4) — fails WCAG AA on dark bg */ .detail-label { color: rgba(255,255,255,.65) !important; } /* ── Contrast fix: footer address text ──────────────────── */ .site-footer p[style*=".45"] { color: rgba(255,255,255,.6) !important; } /* ── TERPECA image — constrain to displayed size ─────────── */ /* Image is 800x800 served at ~105x105 — waste 75KB */ /* Instruct browser to not render beyond display size */ .trust-bar__item img[alt*="TERPECA"], img[alt*="TERPECA"] { width: 72px !important; height: 72px !important; max-width: 72px !important; } /* ══════════════════════════════════════════════════════════ FAMILY OUTING PAGE ══════════════════════════════════════════════════════════ */ .family-page { background: var(--bg); padding: 60px 24px 80px; } .family-page__inner { max-width: var(--max-w-mid); margin: 0 auto; } /* Subpage hero CTAs */ .subpage-hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; } /* ── REASSURANCE GRID ──────────────────────────────────────── */ .family-reassurance { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 64px; padding: 36px; background: rgba(178,82,219,.06); border: 1px solid rgba(178,82,219,.15); border-radius: 16px; } .family-reassurance__item { display: flex; gap: 14px; align-items: flex-start; } .family-reassurance__icon { color: var(--purple-link); font-size: 18px; font-weight: 700; flex-shrink: 0; margin-top: 2px; } .family-reassurance__item strong { display: block; font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 4px; } .family-reassurance__item p { font-size: 13px; color: rgba(255,255,255,.7); line-height: 1.6; margin: 0; } /* ── CONTENT BLOCKS ──────────────────────────────────────── */ .family-section-block { margin-bottom: 60px; } .family-section-block h2 { font-size: 26px; font-weight: 700; color: #fff; margin-bottom: 20px; line-height: 1.3; } .family-section-block p { font-size: 16px; color: rgba(255,255,255,.8); line-height: 1.8; margin-bottom: 16px; } /* ── ROOM CHOICE CARDS ───────────────────────────────────── */ .family-rooms { margin-bottom: 64px; } .family-rooms h2 { font-size: 26px; font-weight: 700; color: #fff; margin-bottom: 28px; } .family-rooms__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-bottom: 20px; } .family-room-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 28px 26px; position: relative; } .family-room-card--recommended { border-color: rgba(178,82,219,.4); background: rgba(178,82,219,.07); } .family-room-card__badge { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--purple-link); background: rgba(178,82,219,.15); border: 1px solid rgba(178,82,219,.3); border-radius: 20px; padding: 4px 12px; margin-bottom: 16px; } .family-room-card h3 { font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 4px; } .family-room-card__tagline { font-size: 14px; color: var(--purple-link); font-weight: 500; margin-bottom: 14px !important; } .family-room-card p { font-size: 14px; color: rgba(255,255,255,.75); line-height: 1.7; margin-bottom: 12px; } .family-room-card__note-inline { font-size: 13px !important; color: rgba(255,255,255,.55) !important; font-style: italic; border-left: 2px solid rgba(178,82,219,.3); padding-left: 12px; } .family-room-card__facts { list-style: none; margin: 16px 0 20px; padding: 0; } .family-room-card__facts li { font-size: 13px; color: rgba(255,255,255,.7); padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.06); padding-left: 16px; position: relative; } .family-room-card__facts li::before { content: '·'; position: absolute; left: 4px; color: var(--purple-link); } .family-room-card__cta { display: inline-block; font-size: 14px; font-weight: 600; color: #fff; background: rgba(178,82,219,.25); border: 1px solid rgba(178,82,219,.5); border-radius: 24px; padding: 10px 22px; transition: background .2s, border-color .2s; } .family-room-card__cta:hover { background: rgba(178,82,219,.45); border-color: var(--purple-link); } .family-rooms__help { font-size: 14px; color: rgba(255,255,255,.6); text-align: center; margin-top: 8px; } .family-rooms__help a { color: var(--purple-link); border-bottom: 1px solid rgba(178,82,219,.4); } /* ── FAMILY REVIEWS ──────────────────────────────────────── */ .family-reviews { margin-bottom: 64px; } .family-reviews h2 { font-size: 26px; font-weight: 700; color: #fff; margin-bottom: 28px; } .family-reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .family-review-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 24px; margin: 0; } .family-review-card__stars { margin-bottom: 8px; } .stars-yellow { color: #f5c518; font-size: 15px; } .family-review-card__label { font-size: 12px; color: rgba(255,255,255,.5); margin-bottom: 12px; font-style: italic; } .family-review-card__text { font-size: 14px; color: rgba(255,255,255,.85); line-height: 1.7; margin-bottom: 16px; } .family-review-card__footer { display: flex; justify-content: space-between; align-items: center; font-size: 13px; } .family-review-card__footer span { color: rgba(255,255,255,.6); } .family-review-card__footer a { color: var(--purple-link); font-size: 12px; } /* ── FAMILY FAQ ──────────────────────────────────────────── */ .family-faq { margin-bottom: 64px; } .family-faq h2 { font-size: 26px; font-weight: 700; color: #fff; margin-bottom: 28px; } /* ── FAMILY CTA ──────────────────────────────────────────── */ .family-cta { text-align: center; padding: 52px 32px; background: rgba(178,82,219,.08); border: 1px solid rgba(178,82,219,.2); border-radius: 20px; } .family-cta h2 { font-size: 28px; font-weight: 700; color: #fff; margin-bottom: 12px; } .family-cta > p { font-size: 16px; color: rgba(255,255,255,.7); margin-bottom: 28px; } .family-cta__buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; } .family-cta__address { font-size: 13px !important; color: rgba(255,255,255,.5) !important; margin: 0 !important; } /* ── MOBILE ──────────────────────────────────────────────── */ @media (max-width: 767px) { .family-reassurance { grid-template-columns: 1fr; gap: 16px; padding: 24px 20px; } .family-rooms__grid { grid-template-columns: 1fr; } .family-reviews__grid { grid-template-columns: 1fr; } .subpage-hero__ctas { flex-direction: column; align-items: stretch; } .subpage-hero__ctas .hero__cta-primary, .subpage-hero__ctas .hero__cta-secondary { text-align: center; } .family-cta__buttons { flex-direction: column; align-items: stretch; } .family-cta__buttons .hero__cta-primary, .family-cta__buttons .hero__cta-secondary, .family-cta__buttons .hero__cta-call, .family-cta__buttons .hero__cta-whatsapp { text-align: center; } } /* ══════════════════════════════════════════════════════════ FAMILY PAGE HERO + CELEBRATION SECTION ══════════════════════════════════════════════════════════ */ /* Override subpage hero background for family page */ .family-hero { background-image: url('/wp-content/uploads/rooms/arcade-invasion-bar-1.avif') !important; background-position: center 30% !important; padding: 80px 24px 70px !important; } .family-hero::before { background: rgba(5,0,20,.72) !important; } /* Trust strip under hero CTAs */ .family-hero__trust { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); } .family-hero__trust span { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.75); letter-spacing: .02em; } /* Family celebration section */ .family-celebration { margin-bottom: 64px; padding: 36px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; } .family-celebration h2 { font-size: 24px; font-weight: 700; color: #fff; margin-bottom: 16px; } .family-celebration p { font-size: 15px; color: rgba(255,255,255,.78); line-height: 1.8; margin-bottom: 14px; } .family-celebration p:last-child { margin-bottom: 0; } .family-celebration a { color: var(--purple-link); border-bottom: 1px solid rgba(178,82,219,.35); } @media (max-width: 767px) { .family-hero__trust { gap: 10px; flex-direction: column; align-items: flex-start; padding-left: 4px; } .family-celebration { padding: 24px 20px; } } /* ══════════════════════════════════════════════════════════ FAMILY PAGE REDESIGN v1.1 — more visual, more playful ══════════════════════════════════════════════════════════ */ /* Hero — lighter overlay so the room photo actually shows */ .family-hero { background-image: url('/wp-content/uploads/rooms/arcade-invasion-bar-1.jpg') !important; background-position: center 25% !important; padding: 100px 24px 80px !important; } .family-hero::before { background: linear-gradient( to bottom, rgba(5,0,20,.38) 0%, rgba(5,0,20,.50) 60%, rgba(5,0,20,.75) 100% ) !important; } /* Hero inner — centred */ .family-hero .subpage-hero__inner { text-align: center !important; } .family-hero .subpage-hero__ctas { justify-content: center !important; } .family-hero .section-label { color: var(--purple-link) !important; font-size: 13px !important; } /* Purple accent on the "parents play with" heading */ .family-section-block h2 em, h2.family-h2-accent { color: var(--purple-link); font-style: normal; } /* Break the text wall — shorter line length, larger text */ .family-section-block { max-width: 760px !important; margin-left: auto !important; margin-right: auto !important; margin-bottom: 56px !important; text-align: left; } .family-section-block h2 { font-size: 28px !important; margin-bottom: 24px !important; } .family-section-block p { font-size: 15px !important; line-height: 1.85 !important; color: rgba(255,255,255,.82) !important; margin-bottom: 18px !important; } /* Photo strip between text sections */ .family-photo-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 64px; border-radius: 14px; overflow: hidden; } .family-photo-strip img { width: 100%; height: 240px; object-fit: cover; display: block; transition: transform .3s; } .family-photo-strip img:hover { transform: scale(1.02); } /* Room cards — centred heading */ .family-rooms h2 { text-align: center !important; margin-bottom: 32px !important; } /* Reviews — centred heading */ .family-reviews h2 { text-align: center !important; } /* Birthday section — more visual with a photo */ .family-celebration { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; margin-bottom: 64px; padding: 0 !important; background: none !important; border: none !important; border-radius: 0 !important; } .family-celebration__text { padding: 36px; background: rgba(178,82,219,.06); border: 1px solid rgba(178,82,219,.15); border-radius: 16px; height: 100%; box-sizing: border-box; } .family-celebration__text h2 { font-size: 24px !important; color: #fff; margin-bottom: 16px; } .family-celebration__text p { font-size: 14px; color: rgba(255,255,255,.78); line-height: 1.8; margin-bottom: 14px; } .family-celebration__text p:last-child { margin-bottom: 0; } .family-celebration__text a { color: var(--purple-link); border-bottom: 1px solid rgba(178,82,219,.35); } .family-celebration__photo { border-radius: 14px; overflow: hidden; height: 100%; min-height: 280px; } .family-celebration__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Fallback if no photo uploaded yet */ .family-celebration__photo--placeholder { background: rgba(178,82,219,.1); border: 2px dashed rgba(178,82,219,.3); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.4); font-size: 14px; text-align: center; padding: 24px; } @media (max-width: 767px) { .family-celebration { grid-template-columns: 1fr !important; } .family-celebration__photo { min-height: 220px; order: -1; /* photo above text on mobile */ } } /* ══════════════════════════════════════════════════════════ FAMILY PAGE v1.2 — two-col text, pull-quote, room photos ══════════════════════════════════════════════════════════ */ /* Hero background — Wake Up! photo */ .family-hero { background-image: url('/wp-content/uploads/rooms/WakeUp__escape_game.jpeg') !important; background-position: center 35% !important; } /* Call CTA button — solid coloured, no arrow */ .hero__cta-call { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,.15); border: 2px solid rgba(255,255,255,.5); border-radius: 50px; padding: 14px 28px; transition: background .2s, border-color .2s; white-space: nowrap; } .hero__cta-call:hover { background: rgba(255,255,255,.25); border-color: rgba(255,255,255,.8); } /* Two-column text layout */ .family-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 32px; } .family-two-col__left p, .family-two-col__right p { font-size: 15px !important; line-height: 1.85 !important; color: rgba(255,255,255,.8) !important; margin-bottom: 16px !important; } /* Pull-quote */ .family-pullquote { font-size: 20px; font-weight: 600; font-style: italic; color: rgba(255,255,255,.9); text-align: center; border-left: none; border-top: 1px solid rgba(178,82,219,.3); border-bottom: 1px solid rgba(178,82,219,.3); padding: 24px 40px; margin: 0 0 0; position: relative; } .family-pullquote::before { content: '"'; position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: 60px; color: var(--purple-link); line-height: 1; font-style: normal; } /* Photo strip — 4 photos, 2×2 on mobile */ .family-photo-strip { grid-template-columns: repeat(4, 1fr) !important; } .family-photo-strip img { height: 200px !important; object-position: center top; } /* Room card photos */ .family-room-card__img { margin: -28px -26px 20px; border-radius: 13px 13px 0 0; overflow: hidden; height: 200px; } .family-room-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; } /* em in section headings = purple */ .family-section-block h2 em { color: var(--purple-link); font-style: normal; } /* Mobile adjustments */ @media (max-width: 900px) { .family-two-col { grid-template-columns: 1fr; gap: 0; } .family-pullquote { font-size: 17px; padding: 20px 20px; } } /* ── Family text layout — lead + two-col insights ───────── */ .family-lead { font-size: 17px !important; color: rgba(255,255,255,.9) !important; line-height: 1.8 !important; margin-bottom: 32px !important; font-weight: 500 !important; max-width: 700px; } .family-insights { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; margin-bottom: 0; } .family-insight p { font-size: 15px !important; color: rgba(255,255,255,.78) !important; line-height: 1.85 !important; margin-bottom: 16px !important; } .family-insight--quote { display: flex; align-items: center; } .family-pull-quote { font-size: 18px; font-style: italic; font-weight: 500; color: rgba(255,255,255,.88); line-height: 1.7; border-left: 3px solid var(--purple-link); padding-left: 24px; margin: 0; } /* Photo strip — 4 col on desktop */ .family-photo-strip { grid-template-columns: repeat(4, 1fr) !important; } .family-photo-strip img { height: 200px !important; object-position: center top !important; } @media (max-width: 900px) { .family-insights { grid-template-columns: 1fr; gap: 0; } .family-photo-strip { grid-template-columns: repeat(2, 1fr) !important; } .family-photo-strip img { height: 170px !important; } } @media (max-width: 480px) { .family-photo-strip { grid-template-columns: repeat(2, 1fr) !important; /* 2-col even on small phones */ } .family-photo-strip img { height: 150px !important; } } /* ══════════════════════════════════════════════════════════ FAMILY PAGE v1.3 — bg-style room cards, birthday banner ══════════════════════════════════════════════════════════ */ /* Hero H1 — em purple */ .family-hero .subpage-hero__h1 em { color: var(--purple-link); font-style: normal; } /* Room cards — background image style, compact */ .family-room-card--bg { background-size: cover !important; background-position: center !important; border: 1px solid rgba(255,255,255,.1) !important; background-color: var(--bg-card) !important; position: relative; overflow: hidden; min-height: 460px; display: flex; flex-direction: column; justify-content: flex-end; } .family-room-card__overlay { position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(5,0,20,.2) 0%, rgba(5,0,20,.6) 40%, rgba(5,0,20,.92) 100% ); z-index: 0; } .family-room-card--bg .family-room-card__body { position: relative; z-index: 1; padding: 24px 26px 26px; } .family-room-card--bg h3 { color: #fff; font-size: 22px; font-weight: 700; margin-bottom: 3px; } .family-room-card--bg .family-room-card__tagline { color: var(--purple-link) !important; font-size: 13px; font-weight: 500; margin-bottom: 12px !important; } .family-room-card--bg p { font-size: 13px !important; color: rgba(255,255,255,.8) !important; line-height: 1.65 !important; margin-bottom: 10px !important; } .family-room-card--bg .family-room-card__note-inline { font-size: 12px !important; color: rgba(255,255,255,.55) !important; border-left: 2px solid rgba(178,82,219,.3); padding-left: 10px; margin-bottom: 12px !important; } .family-room-card--bg .family-room-card__facts { margin: 10px 0 16px !important; } .family-room-card--bg .family-room-card__facts li { font-size: 12px !important; color: rgba(255,255,255,.7) !important; border-bottom-color: rgba(255,255,255,.08) !important; padding: 4px 0 4px 14px !important; } /* Birthday section — banner image with heading overlay */ .family-celebration-v2 { margin-bottom: 64px; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); } .family-celebration-v2__header { position: relative; height: 220px; overflow: hidden; } .family-celebration-v2__header img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; } .family-celebration-v2__overlay { position: absolute; inset: 0; background: linear-gradient( to right, rgba(5,0,20,.85) 0%, rgba(5,0,20,.5) 60%, rgba(5,0,20,.2) 100% ); display: flex; align-items: center; padding: 0 36px; } .family-celebration-v2__overlay h2 { font-size: 26px !important; font-weight: 700; color: #fff; max-width: 480px; line-height: 1.3; margin: 0 !important; } .family-celebration-v2__body { padding: 32px 36px; background: rgba(178,82,219,.05); } .family-celebration-v2__body p { font-size: 15px; color: rgba(255,255,255,.78); line-height: 1.8; margin-bottom: 14px; } .family-celebration-v2__body p:last-child { margin-bottom: 0; } .family-celebration-v2__body a { color: var(--purple-link); border-bottom: 1px solid rgba(178,82,219,.35); } @media (max-width: 767px) { .family-room-card--bg { min-height: 400px; } .family-celebration-v2__header { height: 180px; } .family-celebration-v2__overlay { padding: 0 20px; } .family-celebration-v2__overlay h2 { font-size: 20px !important; } .family-celebration-v2__body { padding: 24px 20px; } } /* ══════════════════════════════════════════════════════════ FAMILY PAGE v1.4 — hero, card bg, birthday sign ══════════════════════════════════════════════════════════ */ /* Hero — birthday girl photo */ .family-hero { background-image: url('/wp-content/uploads/rooms/birthday-girl.webp') !important; background-position: center 20% !important; } /* Arcade card — sign on blue bg needs darker overlay for text legibility */ .family-room-card--bg:first-child .family-room-card__overlay, .family-rooms__grid .family-room-card--bg:first-child .family-room-card__overlay { background: linear-gradient( to bottom, rgba(5,0,20,.45) 0%, rgba(5,0,20,.72) 45%, rgba(5,0,20,.95) 100% ) !important; } /* Wake Up card — children in room, warm colours, lighter overlay at top */ .family-room-card--bg:last-child .family-room-card__overlay { background: linear-gradient( to bottom, rgba(5,0,20,.3) 0%, rgba(5,0,20,.65) 45%, rgba(5,0,20,.95) 100% ) !important; } /* Birthday banner — sign image needs center focus */ .family-celebration-v2__header img { object-position: center center !important; } /* ══════════════════════════════════════════════════════════ FAMILY CARD READABILITY FIX v1.5 ══════════════════════════════════════════════════════════ */ /* Stronger overlay on ALL background cards — text must be readable */ .family-room-card__overlay { background: linear-gradient( to bottom, rgba(5,0,20,.55) 0%, /* darker at top — text starts here */ rgba(5,0,20,.75) 35%, rgba(5,0,20,.96) 100% ) !important; } /* Override the per-card gradients — keep unified strong overlay */ .family-rooms__grid .family-room-card--bg:first-child .family-room-card__overlay, .family-room-card--bg:first-child .family-room-card__overlay, .family-room-card--bg:last-child .family-room-card__overlay { background: linear-gradient( to bottom, rgba(5,0,20,.55) 0%, rgba(5,0,20,.78) 35%, rgba(5,0,20,.97) 100% ) !important; } /* Ensure text contrast */ .family-room-card--bg h3 { text-shadow: 0 1px 4px rgba(0,0,0,.6) !important; } .family-room-card--bg p, .family-room-card--bg .family-room-card__facts li { text-shadow: 0 1px 3px rgba(0,0,0,.5) !important; } /* Birthday banner — simpler filename */ /* (file needs renaming on server — see instructions below) */ /* ══════════════════════════════════════════════════════════ ROOM CARDS v2 — split photo top / text body bottom ══════════════════════════════════════════════════════════ */ .family-room-card--split { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); background: #0d0a1a; /* Remove old bg-style rules */ background-image: none !important; min-height: unset !important; position: relative; } /* Photo zone — top 40% of card, photo shows clearly */ .family-room-card__photo { height: 220px; background-size: cover; background-position: center; position: relative; flex-shrink: 0; } /* Subtle fade from photo into card body */ .family-room-card__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient( to bottom, transparent 40%, rgba(13,10,26,1) 100% ); } /* Room label — on the photo, bottom-left */ .family-room-card__room-label { position: absolute; bottom: 16px; left: 20px; font-size: 22px; font-weight: 700; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.6); z-index: 1; line-height: 1; } /* Arcade accent — electric blue left border */ .family-room-card--arcade { border-color: rgba(100,180,255,.25) !important; } .family-room-card--arcade .family-room-card__room-label { color: #90d4ff; } .family-room-card--arcade .family-room-card__tagline { color: #90d4ff !important; } /* Wake Up accent — warm pink/purple left border */ .family-room-card--wakeup { border-color: rgba(220,130,255,.25) !important; } .family-room-card--wakeup .family-room-card__room-label { color: #e8b4ff; } .family-room-card--wakeup .family-room-card__tagline { color: #e8b4ff !important; } /* Card body — clean dark surface, readable */ .family-room-card--split .family-room-card__body { padding: 20px 24px 24px; flex: 1; display: flex; flex-direction: column; position: static; z-index: auto; } .family-room-card--split .family-room-card__tagline { font-size: 13px; font-weight: 500; margin-bottom: 12px !important; display: block; } .family-room-card--split p { font-size: 14px !important; color: rgba(255,255,255,.8) !important; line-height: 1.65 !important; margin-bottom: 10px !important; text-shadow: none !important; } .family-room-card--split .family-room-card__note-inline { font-size: 12px !important; color: rgba(255,255,255,.5) !important; border-left: 2px solid rgba(178,82,219,.3); padding-left: 10px; font-style: italic; margin-bottom: 12px !important; text-shadow: none !important; } .family-room-card--split .family-room-card__facts { margin: 10px 0 16px !important; list-style: none; padding: 0; } .family-room-card--split .family-room-card__facts li { font-size: 12px !important; color: rgba(255,255,255,.65) !important; padding: 5px 0 5px 14px !important; border-bottom: 1px solid rgba(255,255,255,.06) !important; position: relative; text-shadow: none !important; } .family-room-card--split .family-room-card__facts li::before { content: '·'; position: absolute; left: 4px; color: var(--purple-link); } .family-room-card--split .family-room-card__cta { margin-top: auto; align-self: flex-start; display: inline-block; font-size: 13px; font-weight: 600; color: #fff; background: rgba(178,82,219,.2); border: 1px solid rgba(178,82,219,.45); border-radius: 24px; padding: 10px 22px; transition: background .2s, border-color .2s; } .family-room-card--split .family-room-card__cta:hover { background: rgba(178,82,219,.4); border-color: var(--purple-link); } @media (max-width: 767px) { .family-room-card__photo { height: 180px; } .family-room-card--split .family-room-card__cta { align-self: stretch; text-align: center; } } /* ══════════════════════════════════════════════════════════ CTA BUTTONS + BIRTHDAY IMAGE FIX v1.6 ══════════════════════════════════════════════════════════ */ /* WhatsApp button — green tinted, same pill shape as call button */ .hero__cta-whatsapp { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgba(37,211,102,.15); border: 2px solid rgba(37,211,102,.5); border-radius: 50px; padding: 14px 28px; transition: background .2s, border-color .2s; white-space: nowrap; } .hero__cta-whatsapp:hover { background: rgba(37,211,102,.28); border-color: rgba(37,211,102,.8); } /* Family CTA section — centred, generous spacing */ .family-cta { text-align: center; padding: 52px 32px; background: rgba(178,82,219,.06); border: 1px solid rgba(178,82,219,.15); border-radius: 20px; } .family-cta__buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; } /* All three buttons same height */ .family-cta__buttons .hero__cta-primary, .family-cta__buttons .hero__cta-call, .family-cta__buttons .hero__cta-whatsapp { min-width: 160px; text-align: center; } /* Birthday banner — try alternate filename patterns */ /* If we-did-it-sign.webp doesn't load, this ensures the block still looks good with the purple background */ .family-celebration-v2__header { background: rgba(178,82,219,.2); } /* ══════════════════════════════════════════════════════════ BIRTHDAY BANNER — show full sign, not cropped ══════════════════════════════════════════════════════════ */ .family-celebration-v2__header img { object-fit: cover; object-position: center 30% !important; } /* Also add fetchpriority to preload link — PageSpeed flagged this */ /* (handled in PHP preload link — add fetchpriority="high" attribute) */ /* ══════════════════════════════════════════════════════════ FAMILY PAGE v1.7 — FAQ center, birthday heading, sign zoom ══════════════════════════════════════════════════════════ */ /* FAQ — center the heading and questions */ .family-faq { text-align: center; } .family-faq h2 { text-align: center !important; } /* Keep FAQ answer text left-aligned for readability */ .family-faq .faq-item { text-align: left; max-width: 800px; margin-left: auto; margin-right: auto; } /* Birthday heading — allow wider single line */ .family-celebration-v2__overlay h2 { font-size: 24px !important; max-width: 600px !important; white-space: nowrap; } @media (max-width: 900px) { .family-celebration-v2__overlay h2 { white-space: normal !important; font-size: 20px !important; } } /* Birthday sign image — zoom out more to show full sign */ .family-celebration-v2__header img { object-fit: cover; object-position: center 10% !important; transform: scale(0.85); transform-origin: center center; } /* Birthday body — two-column layout matches intro section */ .family-celebration-v2__body .family-insights { margin-bottom: 0; } .family-celebration-v2__body .family-insight p { font-size: 15px; color: rgba(255,255,255,.78); line-height: 1.8; margin-bottom: 14px; } .family-celebration-v2__body .family-insight a { color: var(--purple-link); border-bottom: 1px solid rgba(178,82,219,.35); } /* ══════════════════════════════════════════════════════════ BIRTHDAY SECTION v3 — proper two-column feature block ══════════════════════════════════════════════════════════ */ .family-celebration-v3 { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-bottom: 64px; border-radius: 20px; overflow: hidden; border: 1px solid rgba(178,82,219,.15); background: rgba(178,82,219,.05); } /* Text column — left side */ .family-celebration-v3__text { padding: 48px 44px; display: flex; flex-direction: column; justify-content: center; } .family-celebration-v3__text .section-label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--purple-link); margin-bottom: 12px; display: block; } .family-celebration-v3__text h2 { font-size: 26px !important; font-weight: 700; color: #fff; line-height: 1.25; margin-bottom: 20px !important; } .family-celebration-v3__text p { font-size: 15px; color: rgba(255,255,255,.78); line-height: 1.8; margin-bottom: 14px; } .family-celebration-v3__text p:last-child { margin-bottom: 0; } .family-celebration-v3__text a { color: var(--purple-link); font-weight: 600; border-bottom: 1px solid rgba(178,82,219,.4); transition: border-color .2s; } .family-celebration-v3__text a:hover { border-color: var(--purple-link); } /* Photo column — right side */ .family-celebration-v3__photo { position: relative; min-height: 400px; } .family-celebration-v3__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; } @media (max-width: 767px) { .family-celebration-v3 { grid-template-columns: 1fr; } .family-celebration-v3__photo { min-height: 260px; order: -1; /* photo above text on mobile */ } .family-celebration-v3__text { padding: 32px 24px; } .family-celebration-v3__text h2 { font-size: 22px !important; } } /* ══════════════════════════════════════════════════════════ HERO HEIGHT + BIRTHDAY PHOTO FIXES ══════════════════════════════════════════════════════════ */ /* Hero — taller so all 4 faces show, text pushed to bottom */ .family-hero { padding: 120px 24px 90px !important; min-height: 600px !important; display: flex !important; align-items: flex-end !important; } .family-hero .subpage-hero__inner { padding-bottom: 0; padding-top: 0; } .family-hero .subpage-hero__h1 { margin-top: 0 !important; } /* Birthday photo — zoom out so full logo and both signs show */ .family-celebration-v3__photo img { object-fit: contain !important; object-position: center center !important; background: #f5f5f7; /* light bg matching the photo */ padding: 12px; } /* ══════════════════════════════════════════════════════════ HERO + CELEBRATIONS FIXES ══════════════════════════════════════════════════════════ */ /* Hero — even taller to show all faces including left girl */ .family-hero { padding: 160px 24px 90px !important; min-height: 680px !important; } /* Celebrations — fix white space, use cover not contain */ .family-celebration-v3__photo img { object-fit: cover !important; object-position: center top !important; background: none !important; padding: 0 !important; } /* Make photo column taller to use the full image better */ .family-celebration-v3__photo { min-height: 480px !important; } /* Remove the contain override from previous round */ /* ══════════════════════════════════════════════════════════ CELEBRATIONS v4 — banner top, text + pull-quote below ══════════════════════════════════════════════════════════ */ .family-celebration-v4 { margin-bottom: 64px; border-radius: 20px; overflow: hidden; border: 1px solid rgba(178,82,219,.15); background: rgba(178,82,219,.05); } /* Banner — shows just the signs, bottom portion of the photo */ .family-celebration-v4__banner { height: 200px; overflow: hidden; position: relative; } .family-celebration-v4__banner img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; /* show the signs at the bottom of photo */ display: block; } /* Subtle fade at bottom of banner into card body */ .family-celebration-v4__banner::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 60px; background: linear-gradient(to bottom, transparent, rgba(12,6,30,.95)); } /* Body — two-column: text left, pull-quote right */ .family-celebration-v4__body { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 36px 44px 44px; align-items: start; } .family-celebration-v4__text h2 { font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 16px; line-height: 1.3; } .family-celebration-v4__text p { font-size: 15px; color: rgba(255,255,255,.78); line-height: 1.8; margin-bottom: 12px; } .family-celebration-v4__text p:last-child { margin-bottom: 0; } .family-celebration-v4__text a { color: var(--purple-link); font-weight: 600; border-bottom: 1px solid rgba(178,82,219,.35); } /* Pull-quote — right column, vertically centred */ .family-celebration-v4__pull { font-size: 16px; font-style: italic; font-weight: 500; color: rgba(255,255,255,.88); line-height: 1.75; border-left: 3px solid var(--purple-link); padding: 16px 0 16px 24px; margin: 0; align-self: center; } @media (max-width: 767px) { .family-celebration-v4__body { grid-template-columns: 1fr; padding: 28px 24px 32px; gap: 24px; } .family-celebration-v4__banner { height: 160px; } } /* ══════════════════════════════════════════════════════════ CELEBRATIONS BANNER — show signs not purple table ══════════════════════════════════════════════════════════ */ .family-celebration-v4__banner img { object-position: center 15% !important; /* shift up to show speechbubbles */ } /* ══════════════════════════════════════════════════════════ CELEBRATIONS — short cropped image, no position offset needed ══════════════════════════════════════════════════════════ */ .family-celebration-v4__banner img { object-position: center center !important; /* cropped image already shows signs */ } /* ══════════════════════════════════════════════════════════ BIRTHDAY BANNER — show signs (lower portion of image) ══════════════════════════════════════════════════════════ */ .family-celebration-v4__banner img { object-position: center 85% !important; /* show bottom of photo = signs */ } /* Section label above the card */ .family-section-title { margin-bottom: 12px; text-align: left; } /* ══════════════════════════════════════════════════════════ FAMILY HERO — mobile height & font-size fixes ══════════════════════════════════════════════════════════ */ @media (max-width: 767px) { .family-hero { padding: 90px 24px 60px !important; min-height: 520px !important; align-items: flex-end !important; } .subpage-hero__h1 { font-size: 24px !important; } .family-hero__trust { gap: 8px; flex-direction: column; align-items: flex-start; padding-left: 4px; margin-top: 20px; } } /* ══════════════════════════════════════════════════════════ FAMILY HERO — mobile background-position to show all faces ══════════════════════════════════════════════════════════ */ @media (max-width: 767px) { .family-hero { background-position: center top !important; /* show faces at top of photo */ } } /* ══════════════════════════════════════════════════════════ FAMILY PAGE — overflow-x fix (horizontal scroll on mobile) Only on the outermost wrapper, not on grids/strips ══════════════════════════════════════════════════════════ */ .family-page { overflow-x: clip; /* clip instead of hidden — doesn't affect position:sticky/absolute */ } /* ══════════════════════════════════════════════════════════ HINT NOTE — under "Which room is right for your family?" ══════════════════════════════════════════════════════════ */ .family-room-hint-note { font-size: 14px; color: rgba(255,255,255,.65); margin: -8px 0 24px; padding: 10px 14px; border-left: 2px solid var(--purple-link); background: rgba(178,82,219,.08); border-radius: 0 6px 6px 0; } /* ══════════════════════════════════════════════════════════ FOOTER AWARDS — uniform size so all three badges align ══════════════════════════════════════════════════════════ */ .footer-awards a { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; } .footer-awards img { width: 62px !important; height: auto !important; max-height: 62px; object-fit: contain; } /* ══════════════════════════════════════════════════════════ FOOTER SOCIAL — force single row, proper spacing ══════════════════════════════════════════════════════════ */ .site-footer__social { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 14px !important; align-items: center; } .site-footer__social a { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.08); transition: background .2s; flex-shrink: 0; } .site-footer__social a:hover { background: rgba(255,255,255,.16); } /* ══════════════════════════════════════════════════════════ FOOTER — mobile 2-col: tighten col titles, breathing room ══════════════════════════════════════════════════════════ */ @media (max-width: 767px) { .footer-col-title { font-size: 12px !important; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.45) !important; margin-bottom: 10px !important; } .site-footer__col a, .site-footer__col p { font-size: 13px !important; line-height: 1.9 !important; } .site-footer__lang { display: flex; flex-wrap: wrap; gap: 6px; } .footer-awards { gap: 10px !important; } .footer-awards a { width: 60px; height: 60px; } .footer-awards img { width: 50px !important; } } /* Below 480px: single column so nothing gets cut */ @media (max-width: 480px) { .site-footer__inner { grid-template-columns: 1fr !important; } .site-footer__inner > .site-footer__col:last-child { grid-column: 1 !important; } } /* ══════════════════════════════════════════════════════════ FAMILY REVIEWS SECTION — audience-style background ══════════════════════════════════════════════════════════ */ .family-reviews-section { padding: 80px 24px; background-color: #080418; background-image: url('https://questomatica.nl/new/img/reviews-bg.webp'); background-repeat: repeat-x; background-position: 0 0; background-size: auto 100%; position: relative; } .family-reviews-section::before { content: ''; position: absolute; inset: 0; background: rgba(5,0,20,.50); pointer-events: none; } .family-reviews-section__inner { max-width: var(--max-w); margin: 0 auto; position: relative; z-index: 1; } /* ══════════════════════════════════════════════════════════ SAFARI COMPAT — family hero & hint note ══════════════════════════════════════════════════════════ */ /* Force -webkit-background-size for older Safari */ .family-hero { -webkit-background-size: cover; background-size: cover !important; } /* hint note: Safari doesn't render rgba background on some elements without isolation */ .family-room-hint-note { -webkit-transform: translateZ(0); /* force layer */ isolation: isolate; } /* ══════════════════════════════════════════════════════════ MOBILE HERO — tighter layout so all info fits on screen ══════════════════════════════════════════════════════════ */ @media (max-width: 767px) { /* Reduce hero height and padding so trust strip is visible */ .family-hero { min-height: 100svh !important; /* use svh for iOS Safari — excludes browser chrome */ padding: 80px 20px 32px !important; align-items: flex-start !important; /* content from top, not bottom */ background-position: center top !important; } /* Smaller H1 so text doesn't push trust strip off screen */ .family-hero .subpage-hero__h1 { font-size: 22px !important; margin-bottom: 10px !important; } .family-hero .subpage-hero__sub { font-size: 13px !important; margin-bottom: 16px !important; } .subpage-hero__ctas { gap: 10px !important; margin-bottom: 16px !important; } /* Trust strip: smaller text, tighter gap */ .family-hero__trust { flex-direction: column !important; gap: 4px !important; margin-top: 12px !important; font-size: 12px !important; } .family-hero__trust span { font-size: 12px !important; } } /* ══════════════════════════════════════════════════════════ CONTACT PAGE ══════════════════════════════════════════════════════════ */ /* Hero */ .contact-hero { min-height: 320px !important; padding: 80px 24px 60px !important; align-items: center !important; } .contact-hero .subpage-hero__inner { text-align: center !important; } .contact-hero .subpage-hero__ctas { justify-content: center !important; flex-wrap: wrap; gap: 12px; } /* Contact section layout */ .contact-section { padding: 64px 24px 0; } .contact-section__inner { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } .contact-details__heading { font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 32px; } /* Contact detail rows */ .contact-detail-row { display: flex; gap: 16px; margin-bottom: 28px; align-items: flex-start; } .contact-detail-row__icon { color: var(--purple-link); flex-shrink: 0; margin-top: 2px; } .contact-detail-row__label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--purple-link); margin-bottom: 4px; } .contact-detail-row__value { font-size: 15px; color: #fff; font-weight: 500; line-height: 1.5; display: block; } a.contact-detail-row__value { transition: color .2s; } a.contact-detail-row__value:hover { color: var(--purple-link); } .contact-detail-row__note { font-size: 13px; color: rgba(255,255,255,.5); margin-top: 4px; line-height: 1.6; } .contact-legal { margin-top: 32px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.08); font-size: 12px; color: rgba(255,255,255,.35); line-height: 2; } /* Contact form wrap */ .contact-form-wrap { background: rgba(255,255,255,.03); border: 1px solid rgba(178,82,219,.12); border-radius: var(--radius); padding: 36px 32px; } .contact-form__success { background: rgba(178,82,219,.15); border: 1px solid rgba(178,82,219,.3); border-radius: 8px; padding: 14px 18px; font-size: 14px; color: #fff; margin-bottom: 20px; } /* Style contact form */ .contact-form__field { margin-bottom: 14px; } .contact-form__field input, .contact-form__field textarea { width: 100%; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15); border-radius: 8px; padding: 12px 16px; font-family: var(--font); font-size: 14px; color: #fff; outline: none; transition: border-color .2s; -webkit-appearance: none; appearance: none; } .contact-form__field input:focus, .contact-form__field textarea:focus { border-color: rgba(178,82,219,.6); } .contact-form__field input::placeholder, .contact-form__field textarea::placeholder { color: rgba(255,255,255,.35); } .contact-form__field textarea { resize: vertical; min-height: 110px; } .contact-form__submit { background: var(--grad-btn); color: #fff; font-family: var(--font); font-weight: 600; font-size: 14px; letter-spacing: .04em; padding: 13px 32px; border: none; border-radius: 50px; cursor: pointer; transition: opacity .2s; width: 100%; margin-top: 4px; } .contact-form__submit:hover { opacity: .88; } .contact-form__alt { margin-top: 16px; font-size: 13px; color: rgba(255,255,255,.4); text-align: center; } .contact-form__alt a { color: var(--purple-link); } /* Map */ #q-map-area { margin-top: 48px; } /* Mobile */ @media (max-width: 767px) { .contact-section__inner { grid-template-columns: 1fr; gap: 40px; } .contact-form-wrap { padding: 24px 20px; } .contact-hero .subpage-hero__ctas { flex-direction: column; align-items: stretch; } .contact-hero .hero__cta-primary, .contact-hero .hero__cta-call, .contact-hero .hero__cta-whatsapp { text-align: center; } #q-map-area { height: 260px !important; margin-top: 32px; } } /* ══════════════════════════════════════════════════════════ SAFARI COMPATIBILITY — comprehensive fixes ══════════════════════════════════════════════════════════ */ /* 1. Reviews section ::before — needs explicit z-index so it sits above the background but below the content */ .family-reviews-section::before { z-index: 0; } .family-reviews-section__inner { z-index: 1; position: relative; } /* 2. Celebration banner — Safari doesn't reliably apply object-fit: cover to an img with height: 100% inside a fixed-height parent. Fix: use absolute positioning on the img instead */ .family-celebration-v4__banner { position: relative; height: 200px; overflow: hidden; } .family-celebration-v4__banner img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 85%; display: block; /* Safari fallback */ min-width: 100%; min-height: 100%; } /* 3. FAQ centering — Safari sometimes ignores text-align:center on flex children. Use margin:auto on the h2 block instead */ .family-faq { text-align: center; } .family-faq > h2 { display: block; text-align: center !important; margin-left: auto !important; margin-right: auto !important; } .family-faq .faq-item__q { text-align: left; } /* 4. Photo strip images — Safari image stretch fix */ .family-photo-strip img { -webkit-object-fit: cover; object-fit: cover; max-width: 100%; } /* 5. Replace all inset: 0 on ::before overlays with explicit sides for Safari < 14 */ .family-reviews-section::before, .reviews::before, .subpage-hero::before, .family-hero::before { top: 0; right: 0; bottom: 0; left: 0; } /* ══════════════════════════════════════════════════════════ MOBILE HERO — darker overlay on mobile only + no crop ══════════════════════════════════════════════════════════ */ @media (max-width: 767px) { /* Slightly darker overlay on mobile for text legibility */ .family-hero::before { background: linear-gradient( to bottom, rgba(5,0,20,.52) 0%, rgba(5,0,20,.65) 60%, rgba(5,0,20,.88) 100% ) !important; } /* Prevent horizontal crop — ensure image fills width without being cut */ .family-hero { background-size: cover !important; background-position: 50% 0% !important; /* top-centre: shows faces */ -webkit-background-size: cover !important; } } /* ══════════════════════════════════════════════════════════ MOBILE REVIEWS HEADING — smaller to fit 1 line ══════════════════════════════════════════════════════════ */ @media (max-width: 767px) { .family-reviews-section .section-title, #family-reviews-heading { font-size: 20px !important; margin-bottom: 24px !important; } } /* ══════════════════════════════════════════════════════════ DEFINITIVE SAFARI FIXES — overrides all earlier rules ══════════════════════════════════════════════════════════ */ /* 1. CELEBRATION BANNER — single definitive rule, no conflicts position:absolute on img is the only reliable cross-browser way to fill a fixed-height container without stretching */ .family-celebration-v4__banner { position: relative !important; height: 200px !important; overflow: hidden !important; } .family-celebration-v4__banner img { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center 85% !important; display: block !important; /* belt-and-suspenders for very old Safari */ min-width: 100%; min-height: 100%; max-width: none !important; } @media (max-width: 767px) { .family-celebration-v4__banner { height: 160px !important; } } /* 2. FAQ HEADING — force centre regardless of parent text-align */ .family-faq, .family-section-block .family-faq { text-align: center !important; } .family-faq h2, .family-section-block .family-faq h2, .family-section-block .family-faq > h2 { text-align: center !important; margin-left: auto !important; margin-right: auto !important; display: block !important; } /* Keep accordion items left-aligned */ .family-faq .faq-item, .family-faq .faq-item__q, .family-faq .faq-item__a { text-align: left !important; } /* ══════════════════════════════════════════════════════════ FAMILY HERO MOBILE — full bleed photo, no black strip ══════════════════════════════════════════════════════════ */ @media (max-width: 767px) { .family-hero { background-size: 130% auto !important; background-position: center top !important; background-repeat: no-repeat !important; background-color: #050014 !important; min-height: 100svh !important; padding: 0 20px 32px !important; align-items: center !important; /* centre vertically — between bottom and top */ justify-content: center !important; } /* Darker overlay — especially in the middle where text sits */ .family-hero::before { background: linear-gradient( to bottom, rgba(5,0,20,.15) 0%, rgba(5,0,20,.60) 30%, rgba(5,0,20,.72) 55%, rgba(5,0,20,.88) 100% ) !important; } .family-hero .subpage-hero__inner { padding-bottom: 0 !important; padding-top: 40px !important; /* text higher, left girl more visible */ padding-bottom: 20px !important; min-height: auto !important; /* remove forced full-screen height — no black gap */ width: 100% !important; } .family-hero .subpage-hero__h1 { font-size: 22px !important; margin-bottom: 8px !important; margin-top: 0 !important; } .family-hero .subpage-hero__sub { font-size: 13px !important; margin-bottom: 12px !important; line-height: 1.5 !important; } .subpage-hero__ctas { gap: 8px !important; margin-bottom: 10px !important; } .family-hero__trust { flex-direction: column !important; gap: 3px !important; margin-top: 8px !important; padding-bottom: 8px !important; } .family-hero__trust span { font-size: 12px !important; } } @media (max-width: 480px) { .family-hero { background-size: 140% auto !important; background-position: 40% top !important; } } /* ══ TEAM BUILDING / FOR COMPANIES PAGE ══════════════════════ */ .tb-hero .subpage-hero__inner { text-align: center !important; } .tb-hero .subpage-hero__ctas { justify-content: center; } .tb-hero .family-hero__trust { justify-content: center; } .tb-hero { background-image: url('/wp-content/uploads/rooms/team-building-hero.avif') !important; background-position: center 35% !important; padding: 80px 24px 70px !important; } @supports not (background-image: url('x.avif')) { .tb-hero { background-image: url('/wp-content/uploads/rooms/team-building-hero.webp') !important; } } .tb-hero::before { background: rgba(5,0,20,.58) !important; } /* Package cards — mirrors .audience__card visual language for a unified look */ .tb-packages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 20px; } .tb-package { display: flex; flex-direction: column; background: rgba(20,10,40,.6); border: 1px solid rgba(178,82,219,.15); border-radius: var(--radius); padding: 32px 26px; transition: border-color var(--transition), background var(--transition), transform var(--transition), box-shadow var(--transition); } .tb-package:hover { border-color: rgba(178,82,219,.5); background: rgba(40,20,72,.85); transform: translateY(-4px); box-shadow: 0 14px 32px rgba(102,46,161,.28); } .tb-package--highlight { border-color: rgba(178,82,219,.4); background: rgba(80,20,130,.2); } .tb-package--highlight:hover { border-color: rgba(178,82,219,.95); background: rgba(108,38,176,.92); box-shadow: 0 18px 44px rgba(140,60,200,.5), 0 0 50px rgba(178,82,219,.28); } .tb-package__badge { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--grad-btn, linear-gradient(135deg,#b252db,#662ea1)); padding: 4px 12px; border-radius: 20px; margin-bottom: 14px; } .tb-package__name { font-size: 17px; font-weight: 600; color: #fff; margin-bottom: 10px; line-height: 1.35; } .tb-package__desc { font-size: 14px; color: rgba(255,255,255,.72); line-height: 1.75; flex: 1; margin-bottom: 18px; } .tb-package__meta { font-size: 12px; color: rgba(255,255,255,.55); margin: 0 0 10px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.1); } .tb-package__price { font-size: 24px; font-weight: 700; color: #fff; margin: 0; } .tb-package__price span { font-size: 13px; font-weight: 500; color: rgba(255,255,255,.55); } /* Escape and Grow — demoted to a single quiet line, not a competing card */ .tb-addon-note { text-align: center; font-size: 14px; color: rgba(255,255,255,.6); margin: 0 0 40px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.08); } .tb-addon-note strong { color: rgba(255,255,255,.85); } /* Client logo wall */ .tb-logos { margin-bottom: 60px; text-align: center; } .tb-logos__intro { font-size: 15px; color: rgba(255,255,255,.7); line-height: 1.7; max-width: 640px; margin: 0 auto 36px; } .tb-logos__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 30px 32px; align-items: center; justify-items: center; } .tb-logos__grid img { max-width: 120px; max-height: 36px; width: auto; height: auto; object-fit: contain; opacity: .7; filter: brightness(0) invert(1); transition: opacity var(--transition); } .tb-logos__grid img:hover { opacity: 1; } /* Logo source files vary in internal padding, so several render at very different visual sizes despite the same box — correct each individually */ .tb-logos__grid img[alt="Ernst & Young"] { transform: scale(1.7); } .tb-logos__grid img[alt="Salesforce"] { transform: scale(1.3); } .tb-logos__grid img[alt="Rituals"] { transform: scale(1.05); } .tb-logos__grid img[alt="Under Armour"] { transform: scale(0.95); } /* Team-building photo strip has 3 photos, not 4 — override the global 4-column rules used by the family page's strip. Middle column wider since that photo works better with more room. Heights forced with !important because earlier global rules also use !important on .family-photo-strip img and would otherwise win by source order. */ .tb-photo-strip { grid-template-columns: 1fr 1.3fr 1fr !important; align-items: stretch; } #tb-faq-heading { text-align: center; margin-bottom: 44px; } .tb-photo-cell { overflow: hidden; height: 240px !important; } .tb-photo-cell img { width: 100% !important; height: 240px !important; object-fit: cover !important; display: block; transition: transform .3s; } /* Photo 1 — crop the white photobooth-frame edges on the sides, but show more background above their heads (shift crop window toward the top). Uniform scale only — non-uniform scaleX/scaleY stretches and distorts the image rather than just cropping it. */ .tb-photo-cell--1 img { transform: scale(1.16); object-position: center 15%; } .tb-photo-cell--1:hover img { transform: scale(1.2); } /* Photo 2 — zoom in and crop out the shop windows at the top */ .tb-photo-cell--2 img { transform: scale(1.45); object-position: center 88%; } .tb-photo-cell--2:hover img { transform: scale(1.5); } .tb-photo-cell--3:hover img { transform: scale(1.04); } @media (max-width: 1023px) { .tb-packages { grid-template-columns: 1fr 1fr; } .tb-logos__grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 600px) { .tb-packages { grid-template-columns: 1fr; } .tb-logos__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } .tb-logos__grid img { max-height: 30px; } } /* ══ TERMS & CONDITIONS PAGE ══════════════════════════════════ */ .terms-hero { min-height: 0 !important; padding: 90px 24px 50px !important; } .terms-hero .subpage-hero__inner { text-align: center; } .terms-audience { padding-top: 40px; } .terms-audience__inner { max-width: 760px; } .terms-updated { text-align: center; font-size: 13px; color: rgba(255,255,255,.5); margin-bottom: 32px; } .terms-block { margin-bottom: 20px; display: block; } .terms-block:hover { transform: none; border-color: rgba(178,82,219,.15); background: rgba(20,10,40,.6); box-shadow: none; } .terms-block h3 { font-size: 18px; font-weight: 600; color: #fff; margin-bottom: 12px; } .terms-block p { font-size: 14px; color: rgba(255,255,255,.72); line-height: 1.75; margin-bottom: 12px; } .terms-block p:last-child { margin-bottom: 0; } .terms-block a { color: var(--purple-link); } .terms-block a:hover { text-decoration: underline; }