@charset "UTF-8"; /* |-------------------------------------------------------------------------- | Destination Hero - self-contained stylesheet |-------------------------------------------------------------------------- | Recreates the exact vss-dest-hero-* visual structure used on the | real Schengen category page, so destination-template.php renders | correctly regardless of whatever conditional logic decides when the | theme's own stylesheet loads. Loaded directly via a hardcoded | tag in the template's - always loads, no dependency on any | enqueue function elsewhere. |-------------------------------------------------------------------------- */ .vss-dest-hero { padding: 60px 40px 80px; background: #f8fafc; } .vss-dest-hero-container { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 0.85fr); gap: 60px; align-items: center; } /* ── LEFT CONTENT ─────────────────────────────────────────── */ .vss-dest-hero-content { min-width: 0; } .vss-dest-hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; color: #2563eb; margin-bottom: 16px; } .vss-dest-hero-eyebrow::before { content: ""; display: inline-block; width: 18px; height: 2px; background: #2563eb; } #vss-dest-hero-title { font-size: clamp(36px, 4.5vw, 52px); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: #0f172a; margin: 0 0 20px; } #vss-dest-hero-title span { display: block; color: #2563eb; } .vss-dest-hero-description { font-size: 16px; line-height: 1.6; color: #64748b; max-width: 480px; margin: 0 0 28px; } .vss-dest-hero-form { max-width: 440px; margin-bottom: 28px; } /* ── TRUST POINTS ─────────────────────────────────────────── */ .vss-dest-hero-trust { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .vss-dest-trust-item { display: flex; align-items: center; gap: 10px; } .vss-dest-trust-icon { flex: 0 0 auto; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: #eff6ff; color: #1e40af; font-size: 14px; } .vss-dest-trust-item strong { display: block; margin-bottom: 2px; color: #0f172a; font-size: 12px; font-weight: 800; line-height: 1.3; } .vss-dest-trust-item span { display: block; color: #94a3b8; font-size: 11px; line-height: 1.4; } .vss-dest-trust-divider { width: 1px; height: 30px; background: #e2e8f0; } /* ── RIGHT VISUAL ─────────────────────────────────────────── */ .vss-dest-hero-visual { position: relative; min-height: 480px; display: flex; align-items: center; justify-content: center; } .vss-dest-hero-image-wrap { position: relative; width: 420px; height: 420px; max-width: 100%; overflow: hidden; border-radius: 50%; border: 9px solid #ffffff; background: #e9f0fb; box-shadow: 0 25px 70px rgba(7, 27, 65, 0.15); z-index: 2; } .vss-dest-hero-image { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; transition: transform 0.7s ease; } .vss-dest-hero-image-wrap:hover .vss-dest-hero-image { transform: scale(1.04); } /* Floating badge */ .vss-dest-hero-badge { position: absolute; left: 0; bottom: 50px; z-index: 5; display: flex; align-items: center; gap: 12px; width: 290px; max-width: calc(100% - 20px); padding: 15px 18px; border: 1px solid rgba(20, 35, 152, 0.08); border-radius: 15px; background: rgba(255, 255, 255, 0.97); box-shadow: 0 18px 45px rgba(7, 27, 65, 0.13); backdrop-filter: blur(12px); } .vss-dest-badge-icon { flex: 0 0 auto; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #e9f9ee; color: #159447; font-size: 14px; } .vss-dest-hero-badge strong { display: block; margin-bottom: 3px; color: #071b41; font-size: 12px; font-weight: 800; line-height: 1.35; } .vss-dest-hero-badge span { display: block; color: #7a8799; font-size: 10px; line-height: 1.45; } /* Decorative ring behind the photo */ .vss-dest-hero-decoration { position: absolute; width: 460px; height: 460px; max-width: 100%; border-radius: 50%; border: 1px solid rgba(20, 35, 152, 0.08); right: -30px; z-index: 1; } .vss-dest-hero-decoration::before { content: ""; position: absolute; inset: 32px; border-radius: 50%; border: 1px dashed rgba(20, 35, 152, 0.08); } /* ── RESPONSIVE ───────────────────────────────────────────── */ /* "Explore Other X Destinations" section — white background, scoped specifically to this destination page so it doesn't affect .visa-section used elsewhere on the site. */ .vss-dest-related-section { background: #ffffff !important; } /* Search form card — matches the white rounded-card treatment used on the real Schengen/category landing pages, just without whatever blue background color those pages' mode-specific classes (e.g. .visa-search-box--schengen) apply. Scoped to just this hero's form container so the real landing page elsewhere is unaffected. */ .vss-dest-hero-form .vsb-outer, .vss-dest-hero-form [class*="vsb-outer--"], .vss-dest-hero-form .visa-search-box, .vss-dest-hero-form [class*="visa-search-box--"] { background: #ffffff !important; border-radius: 20px !important; box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08) !important; width: 100% !important; max-width: 420px !important; } @media (max-width: 1100px) { .vss-dest-hero { padding: 50px 24px 60px; } .vss-dest-hero-container { grid-template-columns: minmax(0, 1fr) minmax(300px, 0.85fr); gap: 40px; } .vss-dest-hero-image-wrap { width: 340px; height: 340px; } .vss-dest-hero-decoration { width: 370px; height: 370px; } } @media (max-width: 768px) { .vss-dest-hero-container { grid-template-columns: 1fr; } /* The visual column is already hidden entirely at this breakpoint via .destination-hero-visual (see destination-template.php's own inline style block) - this rule is just a safety net in case that class is ever missing, so the layout still collapses sensibly. */ .vss-dest-hero-visual { display: none; } .vss-dest-hero { padding: 32px 16px 40px; } .vss-dest-hero-trust { gap: 14px; } }