/* ============================================================================ DESIGN-BUILDER SECTION VARIANTS Each section (nav / hero / cards / bands / footer) has several independent "design patterns". The Design Builder writes the chosen variant per section onto as data-* attributes: These rules are decoupled — any nav works with any hero/cards/footer — so a user can mix & match. Colours come from the theme (--b / --y); "default" (no data-* value) = the built-in baseline look, so only non-default variants need rules here. Loaded AFTER templates.css so it wins. ============================================================================ */ /* ══════════════ HEADER / NAV ══════════════ */ /* dark — slim dark bar, logo left on a white chip, uppercase links right */ body.bld[data-nav="dark"] .main-header { display: none; } body.bld[data-nav="dark"] .menu-row { background: color-mix(in srgb, var(--b) 92%, #000) !important; border-bottom: 1px solid color-mix(in srgb, var(--y) 30%, transparent) !important; display: flex; align-items: center; gap: 18px; padding: 4px 26px; } body.bld[data-nav="dark"] .menu-brand { display: block; } body.bld[data-nav="dark"] .menu-brand img { height: 46px; background: #fff; padding: 4px 9px; border-radius: 6px; } body.bld[data-nav="dark"] .menu-row nav { margin-left: auto; } body.bld[data-nav="dark"] .menu-row nav > ul.menu { justify-content: flex-end !important; } body.bld[data-nav="dark"] .menu-row nav ul.menu > li > a { color: #e8eaf0 !important; text-transform: uppercase; font-size: 12.5px; letter-spacing: .4px; } body.bld[data-nav="dark"] .menu-row nav > ul.menu > li:hover > a, body.bld[data-nav="dark"] .menu-row nav > ul.menu > li.active > a { color: var(--y) !important; border-bottom-color: var(--y) !important; background: transparent !important; } body.bld[data-nav="dark"] .menu-toggle { color: #fff; } /* white — clean white bar, logo left, dark links */ body.bld[data-nav="white"] .main-header { display: none; } body.bld[data-nav="white"] .menu-row { background: #fff !important; border-bottom: 1px solid #eef1f5 !important; box-shadow: 0 4px 18px -12px rgba(15,23,42,.2) !important; display: flex; align-items: center; gap: 18px; padding: 6px 26px; } body.bld[data-nav="white"] .menu-brand { display: block; } body.bld[data-nav="white"] .menu-brand img { height: 50px; } body.bld[data-nav="white"] .menu-row nav { margin-left: auto; } body.bld[data-nav="white"] .menu-row nav > ul.menu { justify-content: flex-end !important; } body.bld[data-nav="white"] .menu-row nav ul.menu > li > a { color: #1f2937 !important; font-weight: 600; font-size: 14px; } body.bld[data-nav="white"] .menu-row nav > ul.menu > li:hover > a, body.bld[data-nav="white"] .menu-row nav > ul.menu > li.active > a { color: var(--b) !important; border-bottom-color: var(--y) !important; background: transparent !important; } body.bld[data-nav="white"] .menu-toggle { color: #1f2937; } /* pill — floating rounded bar (theme gradient), round logo, pill links */ body.bld[data-nav="pill"] .main-header { display: none; } body.bld[data-nav="pill"] .menu-row { display: flex; align-items: center; gap: 16px; padding: 10px 22px; border-bottom: none !important; box-shadow: 0 12px 32px -12px rgba(0,0,0,.4) !important; } body.bld[data-nav="pill"] .menu-brand { display: block; } /* white rounded chip (NOT a circle) so wide/rectangular logos are never clipped */ body.bld[data-nav="pill"] .menu-brand img { height: 46px; width: auto; max-width: 190px; object-fit: contain; background: #fff; border-radius: 10px; padding: 4px 9px; } body.bld[data-nav="pill"] .menu-row nav { margin-left: auto; } body.bld[data-nav="pill"] .menu-row nav > ul.menu { justify-content: flex-end !important; gap: 4px; } body.bld[data-nav="pill"] .menu-row nav > ul.menu > li > a { border-radius: 30px !important; padding: 8px 16px !important; border-bottom: none !important; } body.bld[data-nav="pill"] .menu-row nav > ul.menu > li:hover > a, body.bld[data-nav="pill"] .menu-row nav > ul.menu > li.active > a { background: rgba(255,255,255,.22) !important; border-bottom: none !important; color: #fff !important; } /* ══════════════ HERO ══════════════ */ /* quicklinks — plain slider + a row of quick-info cards under it */ body.bld[data-hero="quicklinks"] .hero-quicklinks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 1180px; margin: -46px auto 34px; padding: 0 20px; position: relative; z-index: 5; } body.bld[data-hero="quicklinks"] .ql-card { background: #fff; border-radius: 12px; padding: 22px 16px; text-align: center; text-decoration: none; box-shadow: 0 16px 38px -18px rgba(15,35,71,.35); border-top: 4px solid var(--y); display: flex; flex-direction: column; align-items: center; gap: 4px; } body.bld[data-hero="quicklinks"] .ql-ic { font-size: 26px; color: var(--b); } body.bld[data-hero="quicklinks"] .ql-t { font-weight: 800; color: var(--b); font-size: 15px; } body.bld[data-hero="quicklinks"] .ql-s { font-size: 12px; color: #64748b; } /* center — big centered heading + CTA overlaid on the slider */ body.bld[data-hero="center"] .home-slider { position: relative; min-height: 480px; background: var(--b); } body.bld[data-hero="center"] .home-slider .carousel-caption { display: none !important; } body.bld[data-hero="center"] .hero-overlay { display: flex; position: absolute; inset: 0; z-index: 4; align-items: center; justify-content: center; text-align: center; pointer-events: none; } body.bld[data-hero="center"] .hero-overlay-inner { max-width: 820px; padding: 0 24px; } body.bld[data-hero="center"] .hero-eyebrow { display: inline-block; color: #fff; background: rgba(255,255,255,.18); padding: 5px 16px; border-radius: 30px; text-transform: uppercase; letter-spacing: 2px; font-size: 11px; font-weight: 700; margin-bottom: 12px; } body.bld[data-hero="center"] .hero-title { color: #fff; line-height: 1.12; margin: 0; text-shadow: 0 2px 24px rgba(0,0,0,.5); } body.bld[data-hero="center"] .hero-sub { color: rgba(255,255,255,.92); margin-top: 12px; } body.bld[data-hero="center"] .hero-cta { pointer-events: auto; display: inline-flex; align-items: center; gap: 9px; margin-top: 22px; background: var(--y); color: #fff; padding: 13px 30px; border-radius: 8px; font-weight: 700; text-decoration: none; } /* left — left-aligned heading + CTA overlaid on the slider */ body.bld[data-hero="left"] .home-slider { position: relative; min-height: 480px; background: var(--b); } body.bld[data-hero="left"] .home-slider .carousel-caption { display: none !important; } body.bld[data-hero="left"] .hero-overlay { display: flex; position: absolute; inset: 0; z-index: 4; align-items: center; pointer-events: none; } body.bld[data-hero="left"] .hero-overlay-inner { max-width: 1180px; margin: 0 auto; width: 100%; padding: 0 26px; text-align: left; } body.bld[data-hero="left"] .hero-eyebrow { display: block; color: var(--y); text-transform: uppercase; letter-spacing: 3px; font-size: 12px; font-weight: 700; } body.bld[data-hero="left"] .hero-title { color: #fff; margin: 6px 0; text-shadow: 0 2px 18px rgba(0,0,0,.55); } body.bld[data-hero="left"] .hero-sub { color: rgba(255,255,255,.95); } body.bld[data-hero="left"] .hero-cta { pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; background: var(--y); color: #fff; padding: 12px 24px; border-radius: 6px; font-weight: 700; text-decoration: none; } /* ══════════════ CARDS ══════════════ */ body.bld[data-cards="soft"] :is(.na-ev-card,.na-fac-card,.na-testi-card,.na-gallery-item,.na-ev-list-item) { border-radius: 14px !important; border: 1px solid #eef1f5 !important; box-shadow: 0 14px 36px -24px rgba(15,40,90,.3) !important; } body.bld[data-cards="soft"] .sc-about-img { border-radius: 14px !important; } body.bld[data-cards="flat"] :is(.na-ev-card,.na-fac-card,.na-testi-card,.na-gallery-item,.na-ev-list-item) { border-radius: 4px !important; border: 1px solid #e5e7eb !important; box-shadow: none !important; transition: border-color .18s, transform .18s, box-shadow .18s !important; } body.bld[data-cards="flat"] :is(.na-ev-card,.na-fac-card,.na-testi-card):hover { border-color: var(--b) !important; transform: translateY(-4px) !important; box-shadow: 0 12px 30px -18px rgba(15,23,42,.45) !important; } body.bld[data-cards="flat"] .sc-about-img { border-radius: 6px !important; } body.bld[data-cards="round"] :is(.na-ev-card,.na-fac-card,.na-testi-card,.na-gallery-item,.na-ev-list-item,.na-star-card) { border-radius: 22px !important; border: none !important; overflow: hidden !important; box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--b) 55%, transparent) !important; transition: transform .2s, box-shadow .2s !important; } body.bld[data-cards="round"] :is(.na-ev-card,.na-fac-card,.na-testi-card):hover { transform: translateY(-7px) scale(1.01) !important; } body.bld[data-cards="round"] .sc-about-img { border-radius: 26px !important; } body.bld[data-cards="accent"] :is(.na-ev-card,.na-fac-card,.na-testi-card,.na-ev-list-item) { border-radius: 4px !important; border: none !important; border-left: 4px solid var(--b) !important; box-shadow: 0 10px 26px -18px rgba(15,23,42,.4) !important; transition: border-color .18s, transform .18s !important; } body.bld[data-cards="accent"] :is(.na-ev-card,.na-fac-card,.na-testi-card):hover { border-left-color: var(--y) !important; transform: translateY(-4px) !important; } body.bld[data-cards="accent"] .sc-about-img { border-radius: 4px !important; } /* ══════════════ SECTIONS / BANDS ══════════════ */ /* alt — gentle alternating light-grey bands */ body.bld[data-bands="alt"] #sec-about, body.bld[data-bands="alt"] #sec-testimonials { background: #f6f8fc !important; } /* bubbles — floating theme-coloured circles behind the main sections (universal, stays light) */ body.bld[data-bands="bubbles"] #sec-about, body.bld[data-bands="bubbles"] #sec-facilities, body.bld[data-bands="bubbles"] #sec-testimonials { background: radial-gradient(circle at 8% 22%, color-mix(in srgb, var(--y) 26%, transparent) 0 55px, transparent 56px), radial-gradient(circle at 90% 18%, color-mix(in srgb, var(--b) 12%, transparent) 0 42px, transparent 43px), radial-gradient(circle at 72% 86%, color-mix(in srgb, var(--y) 20%, transparent) 0 60px, transparent 61px), #eef4ff !important; background-repeat: no-repeat !important; } body.bld[data-bands="bubbles"] #sec-facilities .na-sec-heading { color: var(--b) !important; -webkit-text-fill-color: var(--b) !important; } body.bld[data-bands="bubbles"] #sec-facilities .na-sec-sub { color: #5b6b82 !important; } body.bld[data-bands="bubbles"] #sec-facilities .na-fac-card { background: #dbe9ff !important; border: none !important; } body.bld[data-bands="bubbles"] #sec-facilities .na-fac-title { color: var(--b) !important; } body.bld[data-bands="bubbles"] #sec-facilities .na-fac-desc { color: #5b6b82 !important; } /* ══════════════ FOOTER ══════════════ */ /* rule — gold top rule, uppercase headings, square social (premium) */ body.bld[data-footer="rule"] .site-footer { border-top: 3px solid var(--y); padding-top: 60px; } body.bld[data-footer="rule"] .footer-col h3 { text-transform: uppercase; letter-spacing: 2px; font-size: 13px; } body.bld[data-footer="rule"] .footer-social a { border-radius: 3px; } body.bld[data-footer="rule"] .footer-bottom { text-transform: uppercase; letter-spacing: 1px; font-size: 11.5px; } /* rounded — rounded top skirt, round social pills (friendly) */ body.bld[data-footer="rounded"] .site-footer { border-radius: 30px 30px 0 0; padding-top: 56px; } body.bld[data-footer="rounded"] .footer-social a { width: 38px; height: 38px; border-radius: 50%; } body.bld[data-footer="rounded"] .footer-links a { border-radius: 6px; } @media (max-width: 768px) { body.bld[data-nav="dark"] .menu-row nav, body.bld[data-nav="white"] .menu-row nav, body.bld[data-nav="pill"] .menu-row nav { margin-left: 0; } body.bld[data-hero="center"] .home-slider, body.bld[data-hero="left"] .home-slider { min-height: 320px; } body.bld[data-footer="rounded"] .site-footer { border-radius: 20px 20px 0 0; } }