/* * FCVarcelona 1.6.15 — Variant One visual system. * Global header, homepage polish, article surfaces and responsive rules. */ :root { --vc1-bg: #040b16; --vc1-header: #091525; --vc1-panel: #172438; --vc1-panel-deep: #0c1828; --vc1-line: rgba(151, 175, 205, .2); --vc1-line-strong: rgba(151, 175, 205, .32); --vc1-text: #f7f8fb; --vc1-muted: #b9c3d0; --vc1-faint: #8493a5; --vc1-gold: #edbb00; --vc1-claret: #c00046; --vc1-blue: #0877c9; --vc1-radius: 14px; --vc1-shadow: 0 24px 65px rgba(0, 0, 0, .32); } html { scroll-padding-top: 112px; } body { color: var(--vc1-text); background: radial-gradient(44vw 72vh at -8% 28%, rgba(165, 0, 68, .3), transparent 72%), radial-gradient(46vw 78vh at 108% 24%, rgba(0, 77, 152, .34), transparent 72%), linear-gradient(180deg, #06101e 0, var(--vc1-bg) 560px) !important; background-attachment: fixed !important; font-family: "Arsenal", Arial, sans-serif !important; } body #page, body .blog-over-site-content { background: transparent !important; } /* The old two-storey header stays in the markup for parent-theme compatibility. */ body .blog-over-topbar, body .vc-legacy-header, body .blog-over-header-placeholder { display: none !important; } .vc-global-header { position: sticky; z-index: 9999; top: 0; min-height: 104px; border-bottom: 0 !important; border-image: none !important; background: linear-gradient(90deg, rgba(165, 0, 68, .08), transparent 24%, transparent 72%, rgba(0, 77, 152, .11)), rgba(8, 20, 36, .97); box-shadow: 0 14px 42px rgba(0, 0, 0, .28); backdrop-filter: blur(16px); } html body .vc-global-header::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; z-index: 3; display: block; width: 100%; height: 2px !important; border: 0 !important; background-color: #edbb00 !important; background-image: none !important; box-shadow: none !important; pointer-events: none; } body.admin-bar .vc-global-header { top: 32px; } .vc-global-header__shell { display: grid; width: min(1320px, 100%); min-height: 102px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; grid-template-columns: minmax(292px, 1fr) auto minmax(292px, 1fr); align-items: center; gap: 22px; } .vc-global-header__brand, .vc-global-header__brand .blog-over-site-branding { display: flex; min-width: 0; align-items: center; } .vc-global-header__brand { justify-self: start; } .vc-global-header__brand .custom-logo-link { display: flex; line-height: 0; } .vc-global-header__brand .custom-logo { display: block; width: auto !important; height: 74px !important; max-width: 286px !important; max-height: 74px !important; object-fit: contain; } .vc-global-header__brand .site-title, .vc-global-header__brand .blog-over-site-title { margin: 0; color: #fff; font-size: clamp(24px, 2.2vw, 34px); font-style: italic; font-weight: 900; line-height: 1; text-transform: uppercase; } .vc-global-header__brand .site-description, .vc-global-header__brand .blog-over-site-description { display: none; } .vc-global-header__nav, .vc-global-header__nav .blog-over-primary-menu-container { min-width: 0; } .vc-global-header__nav { justify-self: center; } .vc-global-header__nav ul { display: flex; margin: 0; padding: 0; align-items: center; justify-content: center; gap: clamp(14px, 1.55vw, 27px); list-style: none; } .vc-global-header__nav li { margin: 0; padding: 0; } .vc-global-header__nav a { position: relative; display: inline-flex; padding: 12px 0; color: #f7f8fb !important; font-size: 13px; font-weight: 800; line-height: 1; letter-spacing: .015em; text-decoration: none; text-transform: uppercase; white-space: nowrap; transition: color .18s ease; } .vc-global-header__nav a::after { content: ""; position: absolute; right: 50%; bottom: 3px; left: 50%; height: 2px; border-radius: 3px; background: var(--vc1-gold); transition: right .18s ease, left .18s ease; } .vc-global-header__nav a:hover, .vc-global-header__nav a:focus-visible, .vc-global-header__nav .current-menu-item > a, .vc-global-header__nav .current-menu-ancestor > a { color: var(--vc1-gold) !important; } .vc-global-header__nav a:hover::after, .vc-global-header__nav a:focus-visible::after, .vc-global-header__nav .current-menu-item > a::after, .vc-global-header__nav .current-menu-ancestor > a::after { right: 0; left: 0; } .vc-global-header__actions { display: flex; align-items: center; justify-content: flex-end; justify-self: end; gap: 10px; } .vc-global-header__search { display: inline-flex !important; width: 38px; height: 38px; padding: 0 !important; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .12) !important; border-radius: 50% !important; background: rgba(255, 255, 255, .07) !important; color: #fff !important; box-shadow: none !important; cursor: pointer; transition: border-color .18s ease, background .18s ease, color .18s ease; } .vc-global-header__search:hover, .vc-global-header__search:focus-visible { border-color: rgba(237, 187, 0, .5) !important; background: rgba(237, 187, 0, .1) !important; color: var(--vc1-gold) !important; } .vc-global-header__account { display: flex; align-items: center; gap: 8px; } .vc-global-header__login, .vc-global-header__register { display: inline-flex; min-height: 38px; padding: 0 12px; align-items: center; justify-content: center; gap: 7px; border-radius: 7px; color: #fff !important; font-size: 11px; font-weight: 900; line-height: 1; text-decoration: none !important; text-transform: uppercase; white-space: nowrap; } .vc-global-header__login { border: 1px solid transparent; background: transparent; } .vc-global-header__login:hover { border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05); } .vc-global-header__register { border: 1px solid rgba(255, 255, 255, .08); background: linear-gradient(135deg, #d1004d, #a50044); box-shadow: 0 8px 22px rgba(165, 0, 68, .28); } .vc-global-header__register:hover { transform: translateY(-1px); background: linear-gradient(135deg, #e00054, #b8004b); } .vc-global-header .varcelona-language-switcher { min-height: 34px; border-color: rgba(255, 255, 255, .14); background: rgba(2, 10, 20, .62); } .vc-global-header__mobile-toggle { display: none; } /* Shared panel language used across homepage, archives, pages and posts. */ html body .blog-over-box-style, html body .blog-over-modern-card-inner, html body .blog-over-sidebar .widget, html body .widget-area .widget, html body.single-post .blog-over-comments-area, html body.single-post .comments-area { border: 1px solid var(--vc1-line) !important; border-radius: var(--vc1-radius) !important; background: linear-gradient(145deg, rgba(25, 39, 59, .98), rgba(16, 29, 46, .98)) !important; box-shadow: 0 18px 48px rgba(0, 0, 0, .2) !important; } html body #page .widget .widget-title, html body #page .blog-over-sidebar .widget-title, html body #page .widget-area .widget-title, html body #page .widget:has(.wp-polls) :is(h2, h3):first-of-type, html body #page .widget:has(.varcelona-glos-trybun) :is(h2, h3):first-of-type { position: relative !important; z-index: 0 !important; display: flex !important; min-height: 58px !important; width: calc(100% + 40px) !important; max-width: none !important; margin: -20px -20px 18px !important; padding: 0 20px !important; box-sizing: border-box !important; overflow: hidden !important; align-items: center !important; justify-content: center !important; border: 0 !important; border-bottom: 2px solid var(--vc1-gold) !important; border-radius: 13px 13px 0 0 !important; background: linear-gradient(100deg, #0b1828 0%, #0d2b4a 72%, #0b4c7f 100%) !important; color: #fff !important; box-shadow: none !important; text-align: center !important; isolation: isolate !important; } html body #page .widget .widget-title::before, html body #page .widget .widget-title::after, html body #page .blog-over-sidebar .widget-title::before, html body #page .blog-over-sidebar .widget-title::after, html body #page .widget-area .widget-title::before, html body #page .widget-area .widget-title::after, html body #page .widget:has(.wp-polls) :is(h2, h3):first-of-type::before, html body #page .widget:has(.wp-polls) :is(h2, h3):first-of-type::after, html body #page .widget:has(.varcelona-glos-trybun) :is(h2, h3):first-of-type::before, html body #page .widget:has(.varcelona-glos-trybun) :is(h2, h3):first-of-type::after { content: none !important; display: none !important; } /* Homepage top — same visual language as the selected article mockup. */ body.varcelona-home .vc-dashboard { padding: 24px 20px 12px; } @media (min-width: 1101px) { body.varcelona-home .vc-dashboard { min-height: calc(100vh - 104px); min-height: calc(100dvh - 104px); box-sizing: border-box; } } @media (min-width: 901px) and (max-width: 1100px) { body.varcelona-home .vc-dashboard { min-height: calc(100vh - 86px); min-height: calc(100dvh - 86px); box-sizing: border-box; } } body.varcelona-home .vc-shell { width: min(1280px, 100%); padding: 16px; box-sizing: border-box; border: 1px solid var(--vc1-line); border-radius: 16px; background: linear-gradient(150deg, rgba(25, 39, 59, .98), rgba(10, 23, 39, .99)); box-shadow: var(--vc1-shadow); } body.varcelona-home .vc-news-grid { height: clamp(430px, 50vh, 500px); height: clamp(430px, 50dvh, 500px); grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 18px; } body.varcelona-home .vc-news-side { gap: 18px; } body.varcelona-home .vc-news { border-color: var(--vc1-line-strong); border-radius: 14px; background: var(--vc1-panel-deep); box-shadow: 0 12px 30px rgba(0, 0, 0, .18); } body.varcelona-home .vc-news:hover { border-color: rgba(237, 187, 0, .48); box-shadow: 0 20px 45px rgba(0, 0, 0, .34); } body.varcelona-home .vc-news__shade { background: linear-gradient(180deg, rgba(3, 10, 20, .02) 22%, rgba(3, 10, 20, .96) 100%), linear-gradient(90deg, rgba(165, 0, 68, .08), transparent 52%, rgba(0, 77, 152, .09)); } body.varcelona-home .vc-news__content { padding: clamp(20px, 2.4vw, 34px); } body.varcelona-home .vc-news__eyebrow span { padding: 7px 12px; border-radius: 6px; background: linear-gradient(135deg, #d1004d, #a50044); box-shadow: 0 8px 20px rgba(165, 0, 68, .25); } body.varcelona-home .vc-news--lead h1 { max-width: 94%; font-size: clamp(34px, 3vw, 48px); font-style: italic; font-weight: 900; line-height: 1.03; letter-spacing: -.025em; text-transform: uppercase; text-wrap: balance; } body.varcelona-home .vc-news--lead p { max-width: 650px; color: #d1d8e2; font-size: 15px; line-height: 1.55; } body.varcelona-home .vc-news--small h2, body.varcelona-home .vc-news--wide h2 { font-size: 18px; line-height: 1.15; } body.varcelona-home .vc-match-grid { gap: 14px; margin-top: 14px; } body.varcelona-home .vc-match { min-height: 188px; padding: 12px 16px 13px; border-color: var(--vc1-line); border-radius: 13px; background: linear-gradient(145deg, rgba(14, 30, 48, .99), rgba(9, 21, 36, .99)); box-shadow: 0 12px 30px rgba(0, 0, 0, .16); } body.varcelona-home .vc-match header { margin-bottom: 7px; } body.varcelona-home .vc-match header h2 { font-size: 17px !important; } body.varcelona-home .vc-match header span { width: 34px !important; height: 34px !important; font-size: 14px !important; } body.varcelona-home .vc-team__badge { width: 66px !important; height: 52px !important; padding: 6px !important; } body.varcelona-home .vc-team__badge img { max-width: 54px !important; max-height: 40px !important; } body.varcelona-home .vc-team strong { font-size: 12.5px !important; } body.varcelona-home .vc-result { margin-top: 14px; font-size: 24px !important; } body.varcelona-home .vc-match__meta { gap: 6px !important; font-size: 11.5px !important; } body.varcelona-home .vc-match__button { min-width: 158px !important; margin-top: 7px; padding: 8px 14px !important; font-size: 11px !important; } body.varcelona-home .blog-over-site-main > .blog-over-container, body.varcelona-home .blog-over-site-main > .blog-over-container-wide, body.archive .blog-over-site-main > .blog-over-container, body.archive .blog-over-site-main > .blog-over-container-wide, body.search .blog-over-site-main > .blog-over-container, body.search .blog-over-site-main > .blog-over-container-wide { width: min(1280px, 100%) !important; padding-right: 20px !important; padding-left: 20px !important; box-sizing: border-box !important; } body.varcelona-home .blog-over-modern-card-inner { overflow: hidden; border-radius: 14px !important; background: linear-gradient(145deg, #172438, #101d2e) !important; } body.varcelona-home .blog-over-modern-card-inner:hover { border-color: rgba(237, 187, 0, .45) !important; } body.varcelona-home .blog-over-modern-category a, body.archive .blog-over-modern-category a, body.search .blog-over-modern-category a { border-radius: 5px; background: var(--vc1-claret) !important; color: #fff !important; } /* Article view. */ html body.single-post .blog-over-single-main > .blog-over-container { width: min(1480px, 100%) !important; padding-top: 28px !important; padding-right: 20px !important; padding-left: 20px !important; box-sizing: border-box; } @media (min-width: 1101px) { html body.single-post .blog-over-content-wrapper { gap: 26px !important; } html body.single-post .blog-over-main-content { min-width: 0; flex: 1 1 0 !important; } html body.single-post .blog-over-sidebar { width: 356px !important; max-width: 356px !important; flex: 0 0 356px !important; } } html body.single-post .blog-over-single-content-box { padding: 0 0 24px !important; overflow: hidden; border-radius: 16px !important; background: linear-gradient(180deg, #13253a 0%, #0d1d30 100%) !important; box-shadow: var(--vc1-shadow) !important; } html body.single-post .blog-over-single-thumbnail.varcelona-single-hero { position: relative !important; width: 100%; container-type: inline-size; aspect-ratio: 16 / 9; margin: 0 0 24px !important; overflow: hidden !important; border: 0 !important; border-bottom: 1px solid rgba(151, 175, 205, .25) !important; border-radius: 14px !important; background: #07111f; box-shadow: 0 18px 44px rgba(0, 0, 0, .26); } html body.single-post .blog-over-single-thumbnail.varcelona-single-hero img { position: absolute !important; inset: 0; display: block !important; width: 100% !important; height: 100% !important; min-height: 0 !important; max-height: none !important; border-radius: inherit !important; object-fit: cover !important; object-position: center top !important; } html body.single-post .varcelona-single-hero::after { background: linear-gradient(90deg, rgba(3, 8, 15, .94) 0%, rgba(3, 8, 15, .76) 34%, rgba(3, 8, 15, .25) 63%, rgba(3, 8, 15, .04) 82%), linear-gradient(180deg, rgba(3, 8, 15, .04) 20%, rgba(3, 8, 15, .18) 58%, rgba(3, 8, 15, .78) 100%) !important; } html body.single-post .varcelona-single-hero-overlay { right: auto !important; bottom: clamp(22px, 2.8vw, 38px) !important; left: clamp(26px, 3.2vw, 42px) !important; width: min(70%, 700px); max-width: none !important; } html body.single-post .varcelona-single-hero-title { max-width: none !important; margin: 0 !important; color: #fff !important; font-family: "Arsenal", Arial, sans-serif !important; font-size: clamp(40px, 6.2cqw, 64px) !important; font-style: italic; font-weight: 900 !important; line-height: .98 !important; letter-spacing: -.045em !important; text-transform: uppercase; text-shadow: 0 3px 20px rgba(0, 0, 0, .82); overflow-wrap: normal; word-break: normal; hyphens: none; text-wrap: balance; } html body.single-post .varcelona-single-hero-cat { min-height: 32px !important; padding: 8px 14px !important; border-radius: 6px !important; background: linear-gradient(135deg, #d1004d, #a50044) !important; box-shadow: 0 8px 20px rgba(165, 0, 68, .26); } html body.single-post .varcelona-single-hero-date { display: flex !important; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 16px !important; color: #eef1f6 !important; font-size: 14px !important; font-weight: 700 !important; } html body.single-post .blog-over-single-content { max-width: none; margin-right: auto; margin-left: auto; padding: 0 32px 8px; box-sizing: border-box; color: #d3dbe6; font-size: 20px !important; line-height: 1.62 !important; } html body.single-post .blog-over-single-content p { margin: 0 0 24px !important; color: inherit !important; font-size: inherit !important; line-height: inherit !important; } html body.single-post .blog-over-single-content > p:first-of-type { margin-bottom: 24px !important; padding: 0; border: 0; border-radius: 0; background: none; color: inherit !important; font-size: inherit !important; font-weight: 400; line-height: inherit !important; } html body.single-post .blog-over-single-content :is(h2, h3) { position: relative; margin: 38px 0 18px !important; padding-left: 16px; color: #fff !important; font-weight: 900 !important; line-height: 1.16 !important; text-wrap: balance; } html body.single-post .blog-over-single-content :is(h2, h3)::before { content: ""; position: absolute; top: .1em; bottom: .08em; left: 0; width: 4px; border-radius: 3px; background: var(--vc1-gold); } html body.single-post .blog-over-single-content h2 { font-size: clamp(25px, 2.2vw, 32px) !important; } html body.single-post .blog-over-single-content h3 { font-size: clamp(21px, 1.8vw, 26px) !important; } html body.single-post .blog-over-single-content blockquote { margin: 30px 0 !important; padding: 22px 24px !important; border: 1px solid rgba(151, 175, 205, .2) !important; border-radius: 12px; background: rgba(7, 18, 32, .55); color: #f4f6f9; font-size: 19px; line-height: 1.65; } html body.single-post .blog-over-single-content a { color: #ffd229 !important; text-decoration-color: rgba(255, 210, 41, .42); text-underline-offset: 3px; } html body.single-post .blog-over-single-content :is(ul, ol) { margin: 0 0 26px !important; padding-left: 26px; } html body.single-post .blog-over-single-content li { margin-bottom: 9px; } html body.single-post .blog-over-single-share { margin: 28px 28px 0 !important; padding: 18px 20px !important; border: 1px solid rgba(151, 175, 205, .16); border-radius: 12px; background: linear-gradient(100deg, rgba(5, 15, 28, .82), rgba(12, 31, 52, .72)); } html body.single-post .varcelona-continue { margin: 32px 28px 0; padding-top: 26px; } html body.single-post .varcelona-continue > h2 { display: flex; min-height: 56px; margin: 0 0 16px; align-items: center; justify-content: center; border-bottom: 2px solid var(--vc1-gold); border-radius: 11px 11px 0 0; background: linear-gradient(100deg, #0b1828, #0d2b4a 72%, #0b4c7f); font-size: 21px; } html body.single-post .varcelona-continue > h2::after { display: none; } html body.single-post .varcelona-continue-card { border-color: rgba(151, 175, 205, .18); border-radius: 11px; background: #0b1726; } html body.single-post .varcelona-continue-card:hover { border-color: rgba(237, 187, 0, .45); background: #102137; } html body.single-post .blog-over-comments-area, html body.single-post .comments-area { padding: clamp(22px, 3vw, 34px) !important; } html body.single-post .comment-form-comment textarea { min-height: 170px; } html body.single-post .comment-form input:not([type="checkbox"]):not([type="submit"]), html body.single-post .comment-form textarea { border: 1px solid rgba(151, 175, 205, .22) !important; border-radius: 8px !important; background: rgba(7, 17, 31, .45) !important; color: #fff !important; } /* Pages, categories and search results start with the same breathing room. */ body.page .blog-over-site-main, body.archive .blog-over-site-main, body.search .blog-over-site-main { padding-top: 34px; } body .blog-over-page-header, body .blog-over-page-header-container { border-color: var(--vc1-line) !important; background: linear-gradient(115deg, rgba(165, 0, 68, .14), rgba(12, 29, 48, .96) 38%, rgba(0, 77, 152, .18)) !important; } .vc-mobile-account-actions { display: grid; gap: 10px; margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .12); } .vc-mobile-account-actions > a { display: flex; min-height: 44px; padding: 0 14px; align-items: center; gap: 10px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 8px; background: rgba(255, 255, 255, .05); color: #fff !important; font-weight: 800; text-decoration: none; } /* Compact desktop mode keeps both match cards inside a short laptop viewport. */ @media (min-width: 1101px) and (max-height: 820px) { .vc-global-header, .vc-global-header__shell { min-height: 86px; } .vc-global-header__brand .custom-logo { height: 62px !important; max-height: 62px !important; } body.varcelona-home .vc-dashboard { min-height: calc(100vh - 86px); min-height: calc(100dvh - 86px); padding-top: 14px; padding-bottom: 8px; } body.varcelona-home .vc-shell { padding: 12px; } body.varcelona-home .vc-news-grid { height: clamp(330px, 44vh, 390px); height: clamp(330px, 44dvh, 390px); gap: 12px; } body.varcelona-home .vc-news-side, body.varcelona-home .vc-match-grid { gap: 12px; } body.varcelona-home .vc-match-grid { margin-top: 12px; } body.varcelona-home .vc-match { min-height: 160px; padding: 9px 14px 10px; } body.varcelona-home .vc-match header { margin-bottom: 4px; } body.varcelona-home .vc-match header h2 { font-size: 16px !important; } body.varcelona-home .vc-match header span { width: 30px !important; height: 30px !important; } body.varcelona-home .vc-team__badge { width: 58px !important; height: 46px !important; } body.varcelona-home .vc-team__badge img { max-width: 48px !important; max-height: 36px !important; } body.varcelona-home .vc-result { margin-top: 10px; font-size: 21px !important; } body.varcelona-home .vc-match__meta { gap: 4px !important; font-size: 10.5px !important; } body.varcelona-home .vc-match__button { min-width: 148px !important; margin-top: 4px; padding: 7px 12px !important; font-size: 10px !important; } } /* Use the full desktop viewport instead of leaving an empty strip below the hero. */ @media (min-width: 1101px) { body.varcelona-home .vc-dashboard { display: flex; flex-direction: column; } body.varcelona-home .vc-shell { display: flex; flex: 1 1 auto; min-height: 0; flex-direction: column; } body.varcelona-home .vc-news-grid { flex: 1 1 auto; min-height: 430px; height: auto; } body.varcelona-home .vc-match-grid { flex: 0 0 auto; } } @media (min-width: 1101px) and (max-height: 820px) { body.varcelona-home .vc-news-grid { min-height: 330px; height: auto; } } @media (max-width: 1260px) { .vc-global-header__shell { grid-template-columns: minmax(250px, 1fr) auto minmax(250px, 1fr); gap: 14px; } .vc-global-header__brand .custom-logo { height: 66px !important; max-width: 244px !important; } .vc-global-header__nav ul { gap: 16px; } .vc-global-header__nav a { font-size: 12px; } .vc-global-header__login span { display: none; } } @media (max-width: 1100px) { .vc-global-header { min-height: 86px; } .vc-global-header__shell { min-height: 84px; grid-template-columns: minmax(210px, 1fr) auto; } .vc-global-header__nav { display: none; } .vc-global-header__mobile-toggle { display: block; } .vc-global-header__mobile-toggle .blog-over-mobile-toggle, .vc-global-header__mobile-toggle button { display: inline-flex !important; width: 42px; height: 42px; padding: 0 !important; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .13) !important; border-radius: 8px !important; background: rgba(255, 255, 255, .06) !important; color: #fff !important; } body.varcelona-home .vc-news-grid { height: auto; grid-template-columns: 1fr; } body.varcelona-home .vc-news--lead { min-height: 540px; } body.varcelona-home .vc-news-side { min-height: 420px; } } @media (max-width: 782px) { body.admin-bar .vc-global-header { top: 46px; } .vc-global-header__shell { padding: 0 14px; } .vc-global-header__brand .custom-logo { height: 58px !important; max-width: 210px !important; } .vc-global-header__account { display: none; } body.varcelona-home .vc-dashboard { padding: 20px 10px 16px; } body.varcelona-home .vc-shell { padding: 10px; border-radius: 12px; } html body.single-post .blog-over-single-main > .blog-over-container { padding-top: 22px !important; padding-right: 10px !important; padding-left: 10px !important; } html body.single-post .blog-over-single-content-box { padding: 0 0 20px !important; border-radius: 12px !important; } html body.single-post .varcelona-single-hero-overlay { right: 18px !important; left: 18px !important; width: auto; max-width: none; } } @media (max-width: 640px) { .vc-global-header { min-height: 76px; } .vc-global-header__shell { min-height: 74px; padding: 0 10px; grid-template-columns: minmax(154px, 1fr) auto; gap: 7px; } .vc-global-header__brand .custom-logo { height: 50px !important; max-width: 174px !important; } .vc-global-header__actions { gap: 6px; } .vc-global-header__search { width: 34px; height: 34px; } .vc-global-header .varcelona-language-switcher { min-height: 30px; } .vc-global-header .varcelona-language-option { min-width: 24px; padding: 0 4px; } .vc-global-header__mobile-toggle .blog-over-mobile-toggle, .vc-global-header__mobile-toggle button { width: 36px; height: 36px; } body.varcelona-home .vc-news--lead { min-height: 450px; } body.varcelona-home .vc-news--lead h1 { font-size: clamp(29px, 8.5vw, 38px); } body.varcelona-home .vc-news-side { display: grid; min-height: 0; grid-template-columns: 1fr; grid-template-rows: repeat(3, 270px); } html body.single-post .blog-over-single-thumbnail.varcelona-single-hero img { min-height: 0 !important; max-height: none !important; } html body.single-post .blog-over-single-thumbnail.varcelona-single-hero { min-height: 420px; aspect-ratio: auto; } html body.single-post .varcelona-single-hero::after { background: linear-gradient(180deg, rgba(3, 8, 15, .05) 10%, rgba(3, 8, 15, .88) 75%, rgba(3, 8, 15, .98)) !important; } html body.single-post .varcelona-single-hero-title { font-size: clamp(30px, 9vw, 42px) !important; } html body.single-post .blog-over-single-content { padding: 0 18px 6px; font-size: 19px !important; line-height: 1.68 !important; } html body.single-post .blog-over-single-share { margin-right: 14px !important; margin-left: 14px !important; } html body.single-post .varcelona-continue { margin-right: 14px; margin-left: 14px; } html body .widget .widget-title, html body .blog-over-sidebar .widget-title, html body .widget-area .widget-title { min-height: 54px !important; font-size: 19px !important; } } @media (max-width: 380px) { .vc-global-header__brand .custom-logo { max-width: 150px !important; } .vc-global-header .varcelona-language-switcher { display: none; } } /* 1.6.15 — compact, single-row mobile header. Desktop remains unchanged. */ @media (max-width: 782px) { html body .vc-global-header { min-height: 78px !important; height: auto !important; } html body .vc-global-header__shell { display: grid !important; width: 100% !important; min-height: 76px !important; height: 76px !important; margin: 0 !important; padding: 0 12px !important; grid-template-columns: minmax(0, 1fr) auto !important; grid-template-rows: 76px !important; align-items: center !important; gap: 8px !important; } html body .vc-global-header__brand, html body .vc-global-header__brand .blog-over-site-branding { width: auto !important; min-width: 0 !important; height: 76px !important; margin: 0 !important; padding: 0 !important; align-items: center !important; justify-content: flex-start !important; overflow: hidden !important; } html body .vc-global-header__brand .custom-logo-link { display: flex !important; width: auto !important; max-width: 100% !important; height: 60px !important; margin: 0 !important; padding: 0 !important; align-items: center !important; transform: none !important; line-height: 0 !important; } html body .vc-global-header__brand .custom-logo { display: block !important; width: auto !important; height: 54px !important; max-width: min(190px, 100%) !important; max-height: 54px !important; margin: 0 !important; object-fit: contain !important; object-position: left center !important; } html body .vc-global-header__actions { display: flex !important; min-width: 0 !important; height: 76px !important; margin: 0 !important; align-items: center !important; justify-content: flex-end !important; justify-self: end !important; gap: 6px !important; flex-wrap: nowrap !important; white-space: nowrap !important; } html body .vc-global-header__account, html body .vc-global-header__nav { display: none !important; } html body .vc-global-header .varcelona-language-switcher { display: inline-flex !important; min-height: 34px !important; height: 34px !important; padding: 2px !important; flex: 0 0 auto !important; border-radius: 9px !important; } html body .vc-global-header .varcelona-language-option { min-width: 27px !important; height: 28px !important; padding: 0 5px !important; font-size: 11px !important; } html body .vc-global-header__search, html body .vc-global-header__mobile-toggle .blog-over-mobile-toggle, html body .vc-global-header__mobile-toggle button { display: inline-flex !important; width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; margin: 0 !important; padding: 0 !important; align-items: center !important; justify-content: center !important; flex: 0 0 40px !important; } html body .vc-global-header__search { border-radius: 50% !important; font-size: 17px !important; } html body .vc-global-header__mobile-toggle { display: block !important; width: 40px !important; height: 40px !important; flex: 0 0 40px !important; } } @media (max-width: 410px) { html body .vc-global-header__shell { padding: 0 9px !important; gap: 5px !important; } html body .vc-global-header__brand .custom-logo { height: 50px !important; max-width: 166px !important; max-height: 50px !important; } html body .vc-global-header__actions { gap: 5px !important; } html body .vc-global-header__search, html body .vc-global-header__mobile-toggle, html body .vc-global-header__mobile-toggle .blog-over-mobile-toggle, html body .vc-global-header__mobile-toggle button { width: 38px !important; min-width: 38px !important; height: 38px !important; min-height: 38px !important; flex-basis: 38px !important; } } @media (max-width: 355px) { html body .vc-global-header__brand .custom-logo { max-width: 150px !important; } html body .vc-global-header .varcelona-language-switcher { display: none !important; } } /* 1.6.16 — final mobile header polish. Desktop remains unchanged. */ @media (max-width: 782px) { html body .vc-global-header { min-height: 72px !important; } html body .vc-global-header__shell { height: 72px !important; min-height: 72px !important; grid-template-rows: 72px !important; padding: 0 13px !important; gap: 10px !important; } html body .vc-global-header__brand, html body .vc-global-header__brand .blog-over-site-branding, html body .vc-global-header__actions { height: 72px !important; } html body .vc-global-header__brand .custom-logo-link { height: 56px !important; } html body .vc-global-header__brand .custom-logo { height: 50px !important; max-height: 50px !important; max-width: 178px !important; } html body .vc-global-header__actions { gap: 7px !important; } html body .vc-global-header .varcelona-language-switcher { height: 36px !important; min-height: 36px !important; border-radius: 10px !important; } html body .vc-global-header .varcelona-language-option { height: 30px !important; min-width: 29px !important; padding: 0 6px !important; font-size: 11px !important; line-height: 30px !important; } html body .vc-global-header__search, html body .vc-global-header__mobile-toggle, html body .vc-global-header__mobile-toggle .blog-over-mobile-toggle, html body .vc-global-header__mobile-toggle button { width: 42px !important; min-width: 42px !important; height: 42px !important; min-height: 42px !important; flex: 0 0 42px !important; box-sizing: border-box !important; } html body .vc-global-header__mobile-toggle, html body .vc-global-header__mobile-toggle .blog-over-mobile-toggle, html body .vc-global-header__mobile-toggle button { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; line-height: 1 !important; } html body .vc-global-header__search i, html body .vc-global-header__mobile-toggle i, html body .vc-global-header__mobile-toggle svg { margin: 0 !important; transform: none !important; } } @media (max-width: 410px) { html body .vc-global-header__shell { padding: 0 10px !important; gap: 6px !important; } html body .vc-global-header__brand .custom-logo { height: 47px !important; max-height: 47px !important; max-width: 164px !important; } html body .vc-global-header__actions { gap: 6px !important; } html body .vc-global-header__search, html body .vc-global-header__mobile-toggle, html body .vc-global-header__mobile-toggle .blog-over-mobile-toggle, html body .vc-global-header__mobile-toggle button { width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; flex-basis: 40px !important; } } /* 1.10.7 — wider classic single-post layout (desktop). */ @media (min-width: 1101px) { html body.single-post .blog-over-single-main > .blog-over-container { width: calc(100% - 48px) !important; max-width: 1400px !important; margin-left: auto !important; margin-right: auto !important; } html body.single-post .blog-over-content-wrapper { width: 100% !important; max-width: none !important; display: flex !important; gap: 24px !important; } html body.single-post .blog-over-main-content { width: auto !important; max-width: none !important; flex: 1 1 auto !important; min-width: 0 !important; } html body.single-post .blog-over-sidebar { width: 330px !important; max-width: 330px !important; flex: 0 0 330px !important; } }