/* Theme Name: Go4Kora Sport Theme URI: https://go4kora.me/ Author: Go4Kora Description: A Powerful Arabic RTL WordPress Theme for Sports News and Every Moment That Matters. Version: 3.0.0-alpha.115 Requires at least: 6.3 Tested up to: 7.1 Requires PHP: 7.4 Text Domain: go4kora-sport License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html Tags: news, sports, magazine, rtl-language-support, custom-logo, featured-images */ :root { --g4s-accent: #155eef; --g4s-live: #e5484d; --g4s-accent-ui: var(--g4s-accent); --g4s-live-ui: color-mix(in srgb, var(--g4s-live) 82%, black); --g4s-ink: #172033; --g4s-heading: #101828; --g4s-text: #344054; --g4s-menu-ink: #475467; --g4s-muted: #667085; --g4s-soft: #98a2b3; --g4s-line: #e9edf3; --g4s-line-soft: #f0f2f5; --g4s-surface: #ffffff; --g4s-surface-elevated: #ffffff; --g4s-subtle: #f6f8fb; --g4s-field-border: #dce1ea; --g4s-dashed: #cfd6e2; --g4s-header-bg: rgba(255, 255, 255, .98); --g4s-header-sticky-bg: rgba(255, 255, 255, .985); --g4s-shadow: rgba(16, 24, 40, .10); --g4s-placeholder-start: #ecf2ff; --g4s-placeholder-end: #dce7ff; --g4s-on-accent: #ffffff; --g4s-radius: 14px; --g4s-container: 1240px; --g4s-logo-width: 200px; --g4s-footer-bg: #111827; --g4s-footer-ink: #f8fafc; --g4s-footer-muted: #98a2b3; --g4s-footer-line: rgba(255,255,255,.11); } html[data-theme="dark"] { color-scheme: dark; --g4s-accent-ui: color-mix(in srgb, var(--g4s-accent) 68%, white); --g4s-live-ui: color-mix(in srgb, var(--g4s-live) 80%, white); --g4s-on-accent: #0f141c; --g4s-ink: #f2f4f7; --g4s-heading: #f8fafc; --g4s-text: #d0d5dd; --g4s-menu-ink: #c6ced9; --g4s-muted: #98a2b3; --g4s-soft: #7f8a9a; --g4s-line: #29313d; --g4s-line-soft: #222a35; --g4s-surface: #0f141c; --g4s-surface-elevated: #151b25; --g4s-subtle: #1a2230; --g4s-field-border: #364152; --g4s-dashed: #475467; --g4s-header-bg: rgba(15, 20, 28, .97); --g4s-header-sticky-bg: rgba(15, 20, 28, .985); --g4s-shadow: rgba(0, 0, 0, .32); --g4s-placeholder-start: #172337; --g4s-placeholder-end: #1e3150; } * { box-sizing: border-box; } html { color-scheme: light; scroll-behavior: smooth; } body { margin: 0; background: var(--g4s-surface); color: var(--g4s-ink); font-family: "Cairo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.75; text-rendering: optimizeLegibility; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } a:hover { color: var(--g4s-accent-ui); } button, input, textarea, select { font: inherit; } button { cursor: pointer; } ::selection { background: color-mix(in srgb, var(--g4s-accent-ui) 22%, var(--g4s-surface)); } .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .g4s-skip-link { position: fixed; z-index: 100; inset-block-start: 12px; inset-inline-start: 12px; padding: 9px 13px; border-radius: 8px; background: var(--g4s-accent-ui); color: var(--g4s-on-accent); font-size: 13px; font-weight: 800; line-height: 1.4; transform: translateY(-180%); transition: transform .18s ease; } .g4s-skip-link:focus { color: var(--g4s-on-accent); outline: 3px solid color-mix(in srgb, var(--g4s-accent-ui) 32%, transparent); outline-offset: 3px; transform: translateY(0); } .screen-reader-text:focus { clip: auto; width: auto; height: auto; margin: 0; z-index: 999999; padding: 8px 12px; background: var(--g4s-surface-elevated); color: var(--g4s-ink); } .g4s-container { width: min(calc(100% - 48px), var(--g4s-container)); margin-inline: auto; } .g4s-main { min-height: 52vh; } /* Header */ .g4s-announcement { --g4s-announcement-tone: var(--g4s-accent-ui); position: relative; z-index: 31; border-bottom: 1px solid color-mix(in srgb, var(--g4s-announcement-tone) 22%, var(--g4s-line)); background: color-mix(in srgb, var(--g4s-announcement-tone) 9%, var(--g4s-surface)); color: var(--g4s-ink); } .g4s-announcement--alert { --g4s-announcement-tone: var(--g4s-live-ui); } .g4s-announcement--night { --g4s-announcement-tone: #b9c8df; border-bottom-color: rgba(185, 200, 223, .18); background: #172033; color: #f8fafc; } .g4s-announcement--night .g4s-announcement__body p { color: #f8fafc; } .g4s-announcement--night .g4s-announcement__dismiss { color: #b9c8df; } html[data-theme="dark"] .g4s-announcement--night { background: #0b111a; } .g4s-announcement__inner { display: flex; align-items: center; min-height: 43px; gap: 11px; padding: 7px 0; } .g4s-announcement__signal { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--g4s-announcement-tone); box-shadow: 0 0 0 4px color-mix(in srgb, var(--g4s-announcement-tone) 15%, transparent); } .g4s-announcement__body { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; gap: 10px; min-width: 0; } .g4s-announcement__body p { margin: 0; color: var(--g4s-ink); font-size: 12px; font-weight: 700; line-height: 1.65; overflow-wrap: anywhere; } .g4s-announcement__link { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 5px; color: var(--g4s-announcement-tone); font-size: 11px; font-weight: 800; line-height: 1.5; white-space: nowrap; } .g4s-announcement__link span { font-size: 14px; line-height: 1; transition: transform .18s ease; } .g4s-announcement__link:hover, .g4s-announcement__link:focus-visible { color: var(--g4s-announcement-tone); text-decoration: underline; outline: none; } .g4s-announcement__link:hover span, .g4s-announcement__link:focus-visible span { transform: translateX(-3px); } .g4s-announcement__dismiss, .g4s-announcement__spacer { flex: 0 0 30px; width: 30px; height: 30px; } .g4s-announcement__dismiss { display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--g4s-muted); transition: color .18s ease, background .18s ease; } .g4s-announcement__dismiss:hover, .g4s-announcement__dismiss:focus-visible { background: color-mix(in srgb, var(--g4s-announcement-tone) 10%, transparent); color: var(--g4s-announcement-tone); outline: none; } .g4s-announcement__dismiss svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; } .g4s-header { position: relative; z-index: 30; background: var(--g4s-header-bg); border-bottom: 1px solid var(--g4s-line); transition: box-shadow .2s ease, background .2s ease; } .g4s-header--sticky-standard, .g4s-header--sticky-compact { position: sticky; top: 0; } body.admin-bar .g4s-header--sticky-standard, body.admin-bar .g4s-header--sticky-compact { top: 32px; } .g4s-header.is-sticky { background: var(--g4s-header-sticky-bg); box-shadow: 0 10px 28px var(--g4s-shadow); } .g4s-header__inner { position: relative; display: grid; align-items: center; transition: min-height .22s ease; } .g4s-menu-toggle, .g4s-search-toggle, .g4s-theme-toggle { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; display: inline-grid; place-content: center; background: transparent; color: var(--g4s-ink); cursor: pointer; transition: background .18s ease, color .18s ease; } .g4s-menu-toggle { display: none; } .g4s-menu-toggle:hover, .g4s-search-toggle:hover, .g4s-theme-toggle:hover, .g4s-menu-toggle:focus-visible, .g4s-search-toggle:focus-visible, .g4s-theme-toggle:focus-visible { background: var(--g4s-subtle); color: var(--g4s-accent-ui); outline: none; } .g4s-menu-toggle span:not(.screen-reader-text) { display: block; width: 18px; height: 1.5px; margin: 2.5px auto; border-radius: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease; } .g4s-menu-toggle[aria-expanded="true"] span:nth-of-type(2) { transform: translateY(4px) rotate(45deg); } .g4s-menu-toggle[aria-expanded="true"] span:nth-of-type(3) { opacity: 0; } .g4s-menu-toggle[aria-expanded="true"] span:nth-of-type(4) { transform: translateY(-4px) rotate(-45deg); } .g4s-search-toggle svg, .g4s-theme-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .g4s-theme-toggle { position: relative; } .g4s-theme-toggle__sun { display: none; } html[data-theme="dark"] .g4s-theme-toggle__moon { display: none; } html[data-theme="dark"] .g4s-theme-toggle__sun { display: block; } .g4s-branding { min-width: 0; line-height: 0; } .g4s-branding .custom-logo-link { position: relative; display: inline-block; line-height: 0; } .g4s-branding .custom-logo { display: block; max-width: var(--g4s-logo-width); max-height: 50px; width: auto; transition: max-width .22s ease, max-height .22s ease; } .g4s-logo--dark { display: none !important; } html[data-theme="dark"] .g4s-logo-link.has-dark-logo .g4s-logo--light { display: none; } html[data-theme="dark"] .g4s-logo-link.has-dark-logo .g4s-logo--dark { display: block !important; } .g4s-wordmark { display: inline-flex; flex-direction: column; line-height: 1.1; color: var(--g4s-ink); white-space: nowrap; } .g4s-wordmark strong { color: var(--g4s-accent-ui); font-size: 24px; font-weight: 800; letter-spacing: -.7px; transition: font-size .22s ease; } .g4s-wordmark span { margin-top: 5px; color: var(--g4s-muted); font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; transition: opacity .18s ease; } .g4s-navigation { min-width: 0; } .g4s-menu { display: flex; align-items: center; gap: clamp(14px, 1.7vw, 27px); padding: 0; margin: 0; list-style: none; } .g4s-menu li { position: relative; } .g4s-menu a { display: block; color: var(--g4s-menu-ink); font-size: 13px; font-weight: 700; line-height: 1.6; white-space: nowrap; transition: color .18s ease, padding .22s ease, font-size .22s ease; } .g4s-menu a:hover, .g4s-menu .current-menu-item > a, .g4s-menu .current_page_item > a { color: var(--g4s-accent-ui); } .g4s-menu .current-menu-item > a::after, .g4s-menu .current_page_item > a::after { content: ""; position: absolute; bottom: -1px; inset-inline: 0; height: 2px; border-radius: 999px 999px 0 0; background: var(--g4s-accent-ui); } .g4s-menu .sub-menu, .g4s-menu .children { position: absolute; z-index: 50; top: calc(100% + 12px); inset-inline-start: 50%; min-width: 190px; padding: 8px; margin: 0; list-style: none; visibility: hidden; opacity: 0; transform: translateX(-50%) translateY(-5px); background: var(--g4s-surface-elevated); border: 1px solid var(--g4s-line); border-radius: 10px; box-shadow: 0 12px 30px var(--g4s-shadow); transition: opacity .18s ease, transform .18s ease, visibility .18s ease; } [dir="rtl"] .g4s-menu .sub-menu, [dir="rtl"] .g4s-menu .children { transform: translateX(50%) translateY(-5px); } .g4s-menu li:hover > .sub-menu, .g4s-menu li:focus-within > .sub-menu, .g4s-menu li:hover > .children, .g4s-menu li:focus-within > .children { visibility: visible; opacity: 1; transform: translateX(-50%) translateY(0); } [dir="rtl"] .g4s-menu li:hover > .sub-menu, [dir="rtl"] .g4s-menu li:focus-within > .sub-menu, [dir="rtl"] .g4s-menu li:hover > .children, [dir="rtl"] .g4s-menu li:focus-within > .children { transform: translateX(50%) translateY(0); } .g4s-menu .sub-menu a, .g4s-menu .children a { padding: 8px 10px; border-radius: 7px; } .g4s-menu .sub-menu a:hover, .g4s-menu .children a:hover { background: var(--g4s-subtle); } .g4s-submenu-toggle { display: none; } .g4s-header__actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; } .g4s-header__tools { display: flex; align-items: center; gap: 2px; } .g4s-social-links { display: flex; align-items: center; gap: 2px; } .g4s-social-links--header { padding-inline-end: 8px; margin-inline-end: 6px; border-inline-end: 1px solid var(--g4s-line); } .g4s-social-link { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--g4s-muted); transition: color .18s ease, background .18s ease, transform .18s ease; } .g4s-social-link svg { width: 16px; height: 16px; } .g4s-social-link:hover, .g4s-social-link:focus-visible { background: var(--g4s-subtle); color: var(--g4s-accent-ui); outline: none; transform: translateY(-1px); } .g4s-social-link--whatsapp:hover, .g4s-social-link--whatsapp:focus-visible { color: #25d366; } .g4s-social-link--telegram:hover, .g4s-social-link--telegram:focus-visible { color: #229ed9; } .g4s-social-link--facebook:hover, .g4s-social-link--facebook:focus-visible { color: #1877f2; } .g4s-social-link--instagram:hover, .g4s-social-link--instagram:focus-visible { color: #d94687; } .g4s-social-link--x:hover, .g4s-social-link--x:focus-visible { color: var(--g4s-ink); } .g4s-social-link--youtube:hover, .g4s-social-link--youtube:focus-visible { color: #ff0033; } .g4s-social-link--tiktok:hover, .g4s-social-link--tiktok:focus-visible { color: #00b8d4; } .g4s-mobile-menu-social { display: none; } .g4s-header__live { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 13px; border: 1px solid color-mix(in srgb, var(--g4s-live-ui) 28%, var(--g4s-surface)); border-radius: 999px; color: var(--g4s-live-ui); font-size: 12px; font-weight: 800; line-height: 1; white-space: nowrap; transition: background .18s ease, border-color .18s ease; } .g4s-header__live:hover, .g4s-header__live:focus-visible { border-color: color-mix(in srgb, var(--g4s-live-ui) 48%, var(--g4s-surface)); background: color-mix(in srgb, var(--g4s-live-ui) 8%, var(--g4s-surface)); color: var(--g4s-live-ui); outline: none; } .g4s-header__live-icon { display: inline-grid; flex: 0 0 auto; place-items: center; } .g4s-header__live-label { display: inline-block; } .g4s-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--g4s-live-ui); box-shadow: 0 0 0 4px color-mix(in srgb, var(--g4s-live-ui) 14%, transparent); animation: g4s-live-pulse 1.8s infinite; } @keyframes g4s-live-pulse { 50% { transform: scale(.86); box-shadow: 0 0 0 7px transparent; } } /* Modern single-row header. */ .g4s-header--modern .g4s-header__inner { grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(24px, 3vw, 46px); min-height: 76px; } .g4s-header--modern .g4s-branding { grid-column: 1; justify-self: start; } .g4s-header--modern .g4s-navigation { grid-column: 2; } .g4s-header--modern .g4s-menu { justify-content: flex-start; min-height: 76px; } .g4s-header--modern .g4s-menu > li > a { padding: 27px 0 25px; } .g4s-header--modern .g4s-header__actions { grid-column: 3; justify-self: end; } /* Centered editorial header. */ .g4s-header--editorial .g4s-header__inner { grid-template-columns: 1fr auto 1fr; grid-template-rows: 74px 48px; column-gap: 22px; min-height: 122px; } .g4s-header--editorial .g4s-branding { grid-column: 2; grid-row: 1; justify-self: center; text-align: center; } .g4s-header--editorial .g4s-navigation { grid-column: 1 / -1; grid-row: 2; align-self: stretch; border-top: 1px solid var(--g4s-line); } .g4s-header--editorial .g4s-menu { justify-content: center; min-height: 48px; } .g4s-header--editorial .g4s-menu > li > a { padding: 14px 0 13px; } .g4s-header--editorial .g4s-header__actions { display: contents; } .g4s-header--editorial .g4s-header__tools { grid-column: 1; grid-row: 1; justify-self: start; } .g4s-header--editorial .g4s-header__live { grid-column: 3; grid-row: 1; justify-self: end; } /* The compact sticky state always becomes one efficient row. */ .g4s-header--sticky-compact.is-sticky .g4s-header__inner { min-height: 62px; } .g4s-header--sticky-compact.is-sticky .g4s-branding .custom-logo { max-width: min(var(--g4s-logo-width), 176px); max-height: 40px; } .g4s-header--sticky-compact.is-sticky .g4s-wordmark strong { font-size: 20px; } .g4s-header--sticky-compact.is-sticky .g4s-wordmark span { display: none; } .g4s-header--sticky-compact.is-sticky .g4s-menu { min-height: 62px; } .g4s-header--sticky-compact.is-sticky .g4s-menu > li > a { padding: 20px 0; font-size: 12px; } .g4s-header--editorial.g4s-header--sticky-compact.is-sticky .g4s-header__inner { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: 1fr; gap: clamp(24px, 3vw, 46px); } .g4s-header--editorial.g4s-header--sticky-compact.is-sticky .g4s-branding { grid-column: 1; grid-row: 1; justify-self: start; text-align: start; } .g4s-header--editorial.g4s-header--sticky-compact.is-sticky .g4s-navigation { grid-column: 2; grid-row: 1; border-top: 0; } .g4s-header--editorial.g4s-header--sticky-compact.is-sticky .g4s-menu { justify-content: flex-start; } .g4s-header--editorial.g4s-header--sticky-compact.is-sticky .g4s-header__actions { display: flex; grid-column: 3; grid-row: 1; } .g4s-header--sticky-compact.is-sticky .g4s-social-links--header { display: none; } .g4s-search-panel { position: absolute; z-index: 70; top: 100%; inset-inline: 0; padding: 17px 0; background: var(--g4s-surface-elevated); border-bottom: 1px solid var(--g4s-line); box-shadow: 0 14px 30px var(--g4s-shadow); } .g4s-mobile-menu-search { display: none; } .g4s-search-form { display: flex; gap: 8px; } .g4s-search-form label { flex: 1; } .g4s-search-form input { width: 100%; height: 48px; border: 1px solid var(--g4s-field-border); border-radius: 9px; padding: 0 15px; background: var(--g4s-surface-elevated); color: var(--g4s-ink); outline: none; } .g4s-search-form input:focus { border-color: var(--g4s-accent-ui); box-shadow: 0 0 0 3px color-mix(in srgb, var(--g4s-accent-ui) 12%, transparent); } .g4s-search-form button, .g4s-button { min-height: 48px; padding: 0 18px; border: 0; border-radius: 9px; background: var(--g4s-accent-ui); color: var(--g4s-on-accent); font-size: 13px; font-weight: 800; } .g4s-search-form button:hover, .g4s-button:hover { color: var(--g4s-on-accent); filter: brightness(.92); } /* Front page */ .g4s-front-page { padding-top: 32px; padding-bottom: 72px; } .g4s-front-main, .g4s-home-builder, .g4s-home-layout-section, .g4s-home-layout-section__main { min-width: 0; } .g4s-home-layout-section { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; margin-top: 68px; } .g4s-home-layout-section--first { margin-top: 0; } .g4s-home-layout-section--with-sidebar { grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(32px, 4vw, 54px); align-items: stretch; direction: ltr; } [dir="rtl"] .g4s-home-layout-section--with-sidebar > * { direction: rtl; } [dir="ltr"] .g4s-home-layout-section--with-sidebar > * { direction: ltr; } .g4s-home-layout-section--sidebar-right .g4s-home-layout-section__main { grid-column: 1; } .g4s-home-layout-section--sidebar-right .g4s-home-sidebar { grid-column: 2; grid-row: 1; } .g4s-home-layout-section--sidebar-left { grid-template-columns: 300px minmax(0, 1fr); } .g4s-home-layout-section--sidebar-left .g4s-home-layout-section__main { grid-column: 2; } .g4s-home-layout-section--sidebar-left .g4s-home-sidebar { grid-column: 1; grid-row: 1; } .g4s-lead { display: grid; grid-template-areas: "primary secondary"; grid-template-columns: minmax(0, 1.56fr) minmax(280px, .9fr); gap: 26px; align-items: stretch; } .g4s-lead--single { grid-template-areas: "primary"; grid-template-columns: minmax(0, 1fr); } .g4s-lead__primary { display: flex; grid-area: primary; min-width: 0; min-height: 0; } .g4s-lead-story { position: relative; flex: 1 1 auto; width: 100%; min-width: 0; min-height: 440px; overflow: hidden; border-radius: var(--g4s-radius); background: #1c2534; } .g4s-lead-story__image, .g4s-lead-story__image .g4s-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .g4s-lead-story__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 18, 32, .01) 22%, rgba(12, 18, 32, .82) 100%); } .g4s-lead-story__content { position: absolute; inset-inline: 0; bottom: 0; z-index: 1; padding: clamp(24px, 4vw, 44px); color: #fff; } .g4s-lead-story .g4s-post-meta { color: rgba(255,255,255,.76); } .g4s-lead-story .g4s-post-meta__category { color: #fff; } .g4s-lead-story h1, .g4s-lead-story__title { max-width: 780px; margin: 8px 0 10px; color: #fff; font-size: clamp(25px, 3vw, 42px); line-height: 1.34; letter-spacing: -.7px; } .g4s-lead-story h1 a:hover, .g4s-lead-story__title a:hover { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; } .g4s-lead-story p { max-width: 690px; margin: 0; color: rgba(255,255,255,.85); font-size: 14px; } .g4s-lead__secondary { display: flex; grid-area: secondary; min-width: 0; flex-direction: column; gap: 22px; } .g4s-lead__secondary > * { min-width: 0; max-width: 100%; } .g4s-lead__secondary-list { display: flex; flex: 1 1 auto; min-width: 0; flex-direction: column; justify-content: space-between; gap: 22px; } .g4s-lead__secondary-list > * { min-width: 0; max-width: 100%; } .g4s-lead > :not(.g4s-lead__primary):not(.g4s-lead__secondary) { grid-column: 1 / -1; min-width: 0; max-width: 100%; } .g4s-lead-side { display: grid; grid-template-columns: 145px minmax(0, 1fr); gap: 16px; align-items: start; } .g4s-lead-side__image { overflow: hidden; aspect-ratio: 1.15; border-radius: 10px; background: var(--g4s-subtle); } .g4s-lead-side__image .g4s-image { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; } .g4s-lead-side:hover .g4s-image { transform: scale(1.04); } .g4s-post-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--g4s-muted); font-size: 11px; font-weight: 600; line-height: 1.4; } .g4s-post-meta__category { color: var(--g4s-accent-ui); font-weight: 800; } .g4s-post-meta__category::after { content: "•"; margin-inline-start: 8px; color: var(--g4s-soft); } .g4s-lead-side h2 { margin: 7px 0 0; color: var(--g4s-ink); font-size: 17px; line-height: 1.52; letter-spacing: -.25px; } .g4s-lead-side h2 a:hover { color: var(--g4s-accent-ui); } @media (min-width: 721px) { .g4s-lead--two-secondary .g4s-lead__secondary-list { display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); min-height: 0; justify-content: normal; gap: 22px; } .g4s-lead--two-secondary .g4s-lead-side { grid-template-columns: clamp(145px, 42%, 190px) minmax(0, 1fr); min-height: 0; align-items: stretch; } .g4s-lead--two-secondary .g4s-lead-side__image { display: block; height: 100%; aspect-ratio: auto; } .g4s-lead--two-secondary .g4s-lead-side > div { display: flex; flex-direction: column; justify-content: center; } } .g4s-hero-magazine { display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(360px, .68fr); gap: 32px; align-items: stretch; min-height: 560px; } .g4s-hero-magazine--secondary-0 { grid-template-columns: minmax(0, 1fr); } .g4s-hero-magazine__feature, .g4s-hero-magazine__feature-card { min-width: 0; height: 100%; } .g4s-hero-magazine__feature-card { display: flex; flex-direction: column; } .g4s-hero-magazine__feature-image { display: block; flex: 1 1 auto; min-height: 430px; overflow: hidden; border-radius: var(--g4s-radius); background: var(--g4s-subtle); } .g4s-hero-magazine__feature-image .g4s-image { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; } .g4s-hero-magazine__feature-card:hover .g4s-image { transform: scale(1.025); } .g4s-hero-magazine__feature-content { padding-top: 14px; } .g4s-hero-magazine__feature-content h2 { max-width: 850px; margin: 8px 0 0; color: var(--g4s-ink); font-size: clamp(25px, 3vw, 38px); line-height: 1.4; letter-spacing: -.65px; } .g4s-hero-magazine__feature-content h2 a:hover { color: var(--g4s-accent-ui); } .g4s-hero-magazine__list { display: grid; grid-auto-rows: minmax(0, 1fr); gap: 18px; min-width: 0; } .g4s-hero-magazine__list .g4s-post-row { grid-template-columns: 145px minmax(0, 1fr); gap: 15px; align-items: center; min-height: 0; padding-bottom: 18px; } .g4s-hero-magazine__list .g4s-post-row h3 { display: -webkit-box; overflow: hidden; margin: 6px 0 0; font-size: 16px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .g4s-hero-magazine__list .g4s-post-row p { display: none; } .g4s-hero-magazine__list .g4s-post-row:last-child { padding-bottom: 0; border-bottom: 0; } .g4s-hero-mosaic { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(360px, .85fr); gap: 14px; min-height: 520px; } .g4s-hero-mosaic--secondary-0 { grid-template-columns: minmax(0, 1fr); } .g4s-hero-mosaic__primary, .g4s-hero-mosaic__primary .g4s-hero-tile { min-height: 520px; } .g4s-hero-mosaic__primary .g4s-hero-tile { height: 100%; } .g4s-hero-mosaic__secondary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .g4s-hero-mosaic--secondary-1 .g4s-hero-mosaic__secondary { grid-template-columns: minmax(0, 1fr); } .g4s-hero-mosaic--secondary-3 .g4s-hero-mosaic__secondary > :last-child { grid-column: 1 / -1; } .g4s-hero-tile { position: relative; min-height: 245px; overflow: hidden; border-radius: var(--g4s-radius); background: #1c2534; } .g4s-hero-tile__image, .g4s-hero-tile__image .g4s-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .g4s-hero-tile__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 15, 26, .02) 25%, rgba(10, 15, 26, .88) 100%); } .g4s-hero-tile__content { position: absolute; z-index: 1; inset-inline: 0; bottom: 0; padding: 19px; color: #fff; } .g4s-hero-tile__content .g4s-post-meta, .g4s-hero-tile__content .g4s-post-meta__category { color: rgba(255,255,255,.82); } .g4s-hero-tile h2 { margin: 7px 0 0; color: #fff; font-size: 17px; line-height: 1.5; } .g4s-hero-tile--primary h2 { max-width: 780px; font-size: clamp(26px, 3vw, 42px); line-height: 1.36; } .g4s-hero-tile h2 a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; } .g4s-hero-slider { position: relative; } .g4s-hero-slider__viewport { overflow-x: auto; overflow-y: hidden; border-radius: var(--g4s-radius); scroll-behavior: smooth; scroll-snap-type: inline mandatory; scrollbar-width: none; overscroll-behavior-inline: contain; } .g4s-hero-slider__viewport::-webkit-scrollbar { display: none; } .g4s-hero-slider__viewport:focus-visible { outline: 2px solid var(--g4s-accent-ui); outline-offset: 4px; } .g4s-hero-slider__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 32px) / 3); gap: 16px; } .g4s-hero-slider__slide { min-height: 430px; scroll-snap-align: start; scroll-snap-stop: always; } .g4s-hero-slider__slide h2 { display: -webkit-box; overflow: hidden; font-size: clamp(19px, 2vw, 27px); -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .g4s-hero-slider__controls { display: flex; align-items: center; justify-content: center; gap: 11px; margin-top: 15px; } .g4s-hero-slider__controls[hidden] { display: none; } .g4s-hero-slider__controls button { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--g4s-line); border-radius: 50%; background: var(--g4s-surface-elevated); color: var(--g4s-ink); cursor: pointer; } .g4s-hero-slider__controls button:hover, .g4s-hero-slider__controls button:focus-visible { border-color: var(--g4s-accent-ui); color: var(--g4s-accent-ui); outline: none; } .g4s-hero-slider__controls button:disabled { opacity: .35; cursor: default; } .g4s-hero-slider__controls button span { font-size: 25px; line-height: 1; } .g4s-hero-slider__controls > span { min-width: 48px; color: var(--g4s-muted); font-size: 11px; font-weight: 800; text-align: center; unicode-bidi: isolate; } .g4s-home-slot { margin: 34px 0; } .g4s-home-slot > * { max-width: 100%; } /* Visible ad slots own alignment and spacing; provider markup remains untouched. */ .g4s-ad-slot { clear: both; min-width: 0; max-width: 100%; margin-top: 28px; margin-bottom: 28px; margin-inline: auto; text-align: center; } .g4s-ad-slot__inner { width: 100%; min-width: 0; max-width: 100%; margin-inline: auto; text-align: center; direction: ltr; unicode-bidi: isolate; } .g4s-ad-slot__inner > :where(div, ins, iframe, a, img, picture, object, embed, video, canvas) { margin-inline: auto; } .g4s-ad-slot__inner > :where(img, video, canvas), .g4s-ad-slot__inner > a > img { max-width: 100%; height: auto; margin-inline: auto; } ins.adsbygoogle[data-ad-client] { margin-inline: auto; } .g4s-ad-slot--after_header { margin-bottom: 0; } .g4s-ad-slot--before_footer { margin-top: 0; } .g4s-ad-slot--article_before { margin-top: 0; } .g4s-ad-slot--article_after { margin-bottom: 0; } .g4s-article__body > .g4s-ad-slot--article_middle { clear: both; width: 100%; margin-top: 2em; margin-bottom: 2em; line-height: normal; } .g4s-support-gate[hidden] { display: none !important; } .g4s-support-gate { position: fixed; z-index: 2147483000; inset: 0; display: grid; place-items: center; padding: 20px; visibility: hidden; opacity: 0; transition: opacity .2s ease, visibility .2s ease; } .g4s-support-gate.is-visible { visibility: visible; opacity: 1; } .g4s-support-gate__backdrop { position: absolute; inset: 0; background: rgba(8, 15, 27, .70); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } .g4s-support-gate__dialog { position: relative; width: min(440px, 100%); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow: auto; padding: 32px; border: 1px solid var(--g4s-line); border-radius: 20px; background: var(--g4s-surface-elevated); color: var(--g4s-text); box-shadow: 0 32px 90px rgba(0, 0, 0, .38); text-align: center; transform: translateY(12px) scale(.985); transition: transform .2s ease; } .g4s-support-gate.is-visible .g4s-support-gate__dialog { transform: translateY(0) scale(1); } .g4s-support-gate__dialog:focus { outline: none; } .g4s-support-gate__icon { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 17px; border: 1px solid color-mix(in srgb, var(--g4s-accent-ui) 25%, var(--g4s-line)); border-radius: 18px; background: color-mix(in srgb, var(--g4s-accent-ui) 10%, var(--g4s-surface)); color: var(--g4s-accent-ui); } .g4s-support-gate__dialog h2 { margin: 0; color: var(--g4s-heading); font-size: clamp(21px, 4vw, 26px); font-weight: 900; line-height: 1.45; } .g4s-support-gate__dialog > p:not(.g4s-support-gate__status) { margin: 11px 0 0; color: var(--g4s-muted); font-size: 14px; line-height: 1.9; } .g4s-support-gate__button { display: inline-flex; min-width: 190px; min-height: 46px; align-items: center; justify-content: center; padding: 10px 20px; margin-top: 22px; border: 1px solid var(--g4s-accent-ui); border-radius: 11px; background: var(--g4s-accent-ui); color: var(--g4s-on-accent); font: inherit; font-size: 13px; font-weight: 900; line-height: 1.4; cursor: pointer; transition: transform .18s ease, filter .18s ease, opacity .18s ease; } .g4s-support-gate__button:hover { color: var(--g4s-on-accent); filter: brightness(.93); transform: translateY(-1px); } .g4s-support-gate__button:focus-visible { outline: 3px solid color-mix(in srgb, var(--g4s-accent-ui) 34%, transparent); outline-offset: 3px; } .g4s-support-gate__button:disabled { cursor: wait; opacity: .68; transform: none; } .g4s-support-gate__status { min-height: 1.6em; margin: 10px 0 0; color: var(--g4s-live-ui); font-size: 11px; font-weight: 700; line-height: 1.6; } html.g4s-support-dialog-open, body.g4s-support-dialog-open { overflow: hidden; overscroll-behavior: none; } @media (max-width: 480px) { .g4s-support-gate { padding: 14px; } .g4s-support-gate__dialog { max-height: calc(100vh - 28px); max-height: calc(100dvh - 28px); padding: 25px 19px 22px; border-radius: 17px; } .g4s-support-gate__icon { width: 52px; height: 52px; margin-bottom: 14px; border-radius: 15px; } .g4s-support-gate__dialog h2 { font-size: 21px; } .g4s-support-gate__dialog > p:not(.g4s-support-gate__status) { font-size: 13px; } .g4s-support-gate__button { width: 100%; min-width: 0; } } @media (prefers-reduced-motion: reduce) { .g4s-support-gate, .g4s-support-gate__dialog, .g4s-support-gate__button { transition: none; } } .g4s-builder-block--ad { margin-top: 42px; margin-bottom: 42px; } .g4s-home-layout-section__main > .g4s-builder-block:first-child, .g4s-home-layout-section__main > .g4s-ad-slot:first-child { margin-top: 0; } .g4s-builder-block + .g4s-builder-block--hero, .g4s-ad-slot + .g4s-builder-block--hero { margin-top: 68px; } .g4s-builder-heading { display: flex; align-items: flex-start; gap: 15px; margin-top: 64px; padding: 20px 22px; border: 1px solid var(--g4s-line); border-radius: var(--g4s-radius); background: var(--g4s-surface-elevated); } .g4s-builder-heading > span { flex: 0 0 4px; width: 4px; min-height: 48px; border-radius: 999px; background: var(--g4s-accent-ui); } .g4s-builder-heading h2 { margin: 0; color: var(--g4s-ink); font-size: clamp(21px, 2.4vw, 29px); line-height: 1.35; } .g4s-builder-heading p { margin: 5px 0 0; color: var(--g4s-muted); font-size: 13px; line-height: 1.75; } .g4s-builder-heading + .g4s-home-section { margin-top: 30px; } .g4s-home-section { margin-top: 68px; } .g4s-section-heading { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding-bottom: 12px; margin-bottom: 22px; border-bottom: 1px solid var(--g4s-line); } .g4s-section-heading::after { content: ""; position: absolute; bottom: -1px; inset-inline-start: 0; width: 46px; height: 2px; border-radius: 2px; background: var(--g4s-accent-ui); } .g4s-section-heading h2 { margin: 0; font-size: 22px; line-height: 1.4; letter-spacing: -.35px; } .g4s-section-heading a { display: inline-flex; align-items: center; gap: 6px; color: var(--g4s-muted); font-size: 12px; font-weight: 800; } .g4s-section-heading a span { font-size: 17px; line-height: 1; } .g4s-section-heading a:hover { color: var(--g4s-accent-ui); } .g4s-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; } .g4s-card-grid--columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g4s-card-grid--columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g4s-card-grid--columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .g4s-card__image { display: block; overflow: hidden; aspect-ratio: 1.48; border-radius: 10px; background: var(--g4s-subtle); } .g4s-card__image .g4s-image { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; } .g4s-card:hover .g4s-image { transform: scale(1.035); } .g4s-card__content { padding-top: 12px; } .g4s-card__title { margin: 7px 0 0; color: var(--g4s-ink); font-size: 16px; line-height: 1.55; letter-spacing: -.25px; } .g4s-card__title a:hover { color: var(--g4s-accent-ui); } .g4s-image--placeholder { display: grid; place-items: center; min-height: 100%; background: linear-gradient(135deg, var(--g4s-placeholder-start), var(--g4s-placeholder-end)); color: var(--g4s-accent-ui); font-weight: 800; letter-spacing: .12em; } .g4s-image--placeholder span { padding: 5px 9px; border: 1px solid color-mix(in srgb, var(--g4s-accent-ui) 32%, transparent); border-radius: 6px; font-size: 12px; } /* Pages, archive and article */ .g4s-content-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(35px, 5vw, 74px); padding-top: 48px; padding-bottom: 80px; } .g4s-content-layout--no-sidebar { grid-template-columns: minmax(0, 1fr); } .g4s-content-column { min-width: 0; } .single .g4s-content-layout--no-sidebar .g4s-content-column { width: min(100%, 980px); margin-inline: auto; } /* Page sidebars can be placed independently without changing article/archive order. */ [dir="rtl"] .g4s-content-layout--sidebar-right .g4s-content-column { grid-column: 2; } [dir="rtl"] .g4s-content-layout--sidebar-right .g4s-sidebar { grid-column: 1; } [dir="ltr"] .g4s-content-layout--sidebar-left .g4s-content-column { grid-column: 2; } [dir="ltr"] .g4s-content-layout--sidebar-left .g4s-sidebar { grid-column: 1; } .g4s-content-layout--page-full .g4s-content-column { width: 100%; } .g4s-page-header { display: grid; gap: 7px; padding: 0 0 25px; margin-bottom: 27px; border-bottom: 1px solid var(--g4s-line); } .g4s-page-header__eyebrow { display: inline-flex; align-items: center; gap: 8px; width: fit-content; color: var(--g4s-accent-ui); font-size: 12px; font-weight: 800; line-height: 1.35; letter-spacing: .05em; } .g4s-page-header__eyebrow::before { width: 20px; height: 2px; border-radius: 999px; background: currentColor; content: ""; } .g4s-page-header h1 { margin: 0; color: var(--g4s-heading); font-size: clamp(28px, 4vw, 42px); line-height: 1.35; letter-spacing: -.65px; overflow-wrap: anywhere; } .g4s-page-header__description { max-width: 720px; color: var(--g4s-muted); font-size: 14px; line-height: 1.9; } .g4s-page-header__description > :first-child { margin-top: 0; } .g4s-page-header__description > :last-child { margin-bottom: 0; } .g4s-post-list { display: grid; gap: 24px; } .g4s-archive-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 22px; } .g4s-content-layout--no-sidebar .g4s-archive-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g4s-post-row { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 22px; padding-bottom: 24px; border-bottom: 1px solid var(--g4s-line); } .g4s-post-row__image { overflow: hidden; aspect-ratio: 1.42; border-radius: 10px; background: var(--g4s-subtle); } .g4s-post-row__image .g4s-image { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; } .g4s-post-row:hover .g4s-image { transform: scale(1.04); } .g4s-post-row h3 { margin: 8px 0 6px; font-size: 20px; line-height: 1.48; letter-spacing: -.35px; } .g4s-post-row h3 a:hover { color: var(--g4s-accent-ui); } .g4s-post-row p { margin: 0; color: var(--g4s-muted); font-size: 13px; line-height: 1.75; } .g4s-sidebar { min-width: 0; padding-top: 2px; } .g4s-sidebar__inner { min-width: 0; } .g4s-sidebar--sticky .g4s-sidebar__inner { position: sticky; top: var(--g4s-sticky-sidebar-top, 90px); } .g4s-sidebar--sticky .g4s-sidebar__inner.is-sticky-bottom { top: var(--g4s-sticky-sidebar-tall-top, -20px); } .g4s-widget { padding: 20px; margin-bottom: 20px; border: 1px solid var(--g4s-line); border-radius: 12px; background: var(--g4s-surface-elevated); box-shadow: 0 5px 18px var(--g4s-shadow); } .g4s-widget:last-child { margin-bottom: 0; } .g4s-widget__title, .g4s-widget > .wp-block-heading { position: relative; padding-bottom: 10px; margin: 0 0 15px; border-bottom: 1px solid var(--g4s-line); color: var(--g4s-ink); font-size: 17px; line-height: 1.4; } .g4s-widget__title::after, .g4s-widget > .wp-block-heading::after { content: ""; position: absolute; inset-inline-start: 0; bottom: -1px; width: 32px; height: 2px; background: var(--g4s-accent-ui); } .g4s-widget ul { padding: 0; margin: 0; list-style: none; } .g4s-widget li { padding: 9px 0; border-bottom: 1px solid var(--g4s-line-soft); color: var(--g4s-text); font-size: 13px; font-weight: 600; } .g4s-widget li:last-child { border-bottom: 0; } .g4s-widget select, .g4s-widget input { max-width: 100%; } .g4s-widget .wp-block-search__label { display: block; margin-bottom: 8px; color: var(--g4s-ink); font-size: 13px; font-weight: 800; } .g4s-widget .wp-block-search__inside-wrapper { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; } .g4s-widget .wp-block-search__input { min-width: 0; min-height: 40px; padding: 7px 10px; border: 1px solid var(--g4s-field-border); border-radius: 8px; background: var(--g4s-surface); color: var(--g4s-ink); } .g4s-widget .wp-block-search__button { min-height: 40px; padding: 7px 13px; margin: 0; border: 0; border-radius: 8px; background: var(--g4s-accent-ui); color: var(--g4s-on-accent); font-size: 12px; font-weight: 800; } .g4s-home-sidebar { min-width: 0; padding-top: 0; } .g4s-home-sidebar__inner { min-width: 0; } .g4s-home-sidebar--sticky .g4s-home-sidebar__inner { position: sticky; top: var(--g4s-sticky-sidebar-top, 90px); } .g4s-ready-widget { min-width: 0; } .g4s-widget-news-list { display: grid; gap: 14px; } .g4s-widget-news-item { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; align-items: start; } .g4s-widget-news-item + .g4s-widget-news-item { padding-top: 14px; border-top: 1px solid var(--g4s-line-soft); } .g4s-widget-news-item__image { display: block; overflow: hidden; aspect-ratio: 1.18; border-radius: 8px; background: var(--g4s-subtle); } .g4s-widget-news-item__image .g4s-image { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; } .g4s-widget-news-item:hover .g4s-image { transform: scale(1.05); } .g4s-widget-news-item__content { min-width: 0; padding-top: 1px; } .g4s-widget-news-item__meta { display: flex; flex-wrap: wrap; gap: 5px 8px; margin-bottom: 5px; color: var(--g4s-muted); font-size: 10px; font-weight: 700; line-height: 1.4; } .g4s-widget-news-item__meta span { color: var(--g4s-accent-ui); } .g4s-widget-news-item h3 { margin: 0; color: var(--g4s-ink); font-size: 13px; font-weight: 800; line-height: 1.58; letter-spacing: -.16px; } .g4s-widget-news-item h3 a { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .g4s-widget-news-item h3 a:hover { color: var(--g4s-accent-ui); } .g4s-widget-empty { padding: 15px; margin: 0; border: 1px dashed var(--g4s-dashed); border-radius: 9px; background: var(--g4s-subtle); color: var(--g4s-muted); font-size: 12px; line-height: 1.7; text-align: center; } .g4s-popular-list { display: grid; gap: 13px; } .g4s-popular-item { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 12px; align-items: start; } .g4s-popular-item + .g4s-popular-item { padding-top: 13px; border-top: 1px solid var(--g4s-line-soft); } .g4s-popular-item__image { display: block; overflow: hidden; aspect-ratio: 1.16; border-radius: 8px; background: var(--g4s-subtle); } .g4s-popular-item__image .g4s-image, .g4s-popular-feature__image .g4s-image { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; } .g4s-popular-item:hover .g4s-image, .g4s-popular-feature:hover .g4s-image { transform: scale(1.045); } .g4s-popular-item__content { min-width: 0; padding-top: 1px; } .g4s-popular-item h3, .g4s-popular-feature h3 { margin: 0; color: var(--g4s-ink); font-weight: 800; letter-spacing: -.16px; } .g4s-popular-item h3 { font-size: 13px; line-height: 1.55; } .g4s-popular-item h3 a, .g4s-popular-feature h3 a { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; } .g4s-popular-item h3 a { -webkit-line-clamp: 2; } .g4s-popular-item h3 a:hover, .g4s-popular-feature h3 a:hover { color: var(--g4s-accent-ui); } .g4s-popular-item__views { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; color: var(--g4s-muted); font-size: 10px; font-weight: 700; line-height: 1.35; } .g4s-popular-item__views svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.9; } .g4s-popular-feature { min-width: 0; } .g4s-popular-feature__image { display: block; overflow: hidden; aspect-ratio: 1.62; margin-bottom: 10px; border-radius: 10px; background: var(--g4s-subtle); } .g4s-popular-feature h3 { font-size: 16px; line-height: 1.55; } .g4s-popular-feature h3 a { -webkit-line-clamp: 2; } .g4s-popular-feature .g4s-popular-item__views { margin-top: 7px; } .g4s-ready-widget--featured-list .g4s-popular-list { padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--g4s-line-soft); } .g4s-ready-widget--featured .g4s-popular-feature__image { aspect-ratio: 1.5; margin-bottom: 11px; } .g4s-ready-widget--featured .g4s-popular-feature h3 { font-size: 17px; line-height: 1.58; } .g4s-social-links--widget { gap: 8px; flex-wrap: wrap; } .g4s-social-links--widget .g4s-social-link { width: 37px; height: 37px; border: 1px solid var(--g4s-line); background: var(--g4s-surface); color: var(--g4s-menu-ink); } .g4s-social-links--widget .g4s-social-link:hover, .g4s-social-links--widget .g4s-social-link:focus-visible { border-color: color-mix(in srgb, currentColor 35%, var(--g4s-line)); background: var(--g4s-subtle); } .wp-block-go4kora-sport-news-list, .wp-block-go4kora-sport-popular-posts, .wp-block-go4kora-sport-editorial-picks, .wp-block-go4kora-sport-social-follow { padding: 20px; border: 1px solid var(--g4s-line); border-radius: 12px; background: var(--g4s-surface-elevated); box-shadow: 0 5px 18px var(--g4s-shadow); } /* The standard WordPress widget wrapper owns the one card surface in every sidebar. This also covers a native Group wrapper inserted by the block widgets editor. */ .g4s-widget.widget_block .wp-block-go4kora-sport-news-list, .g4s-widget.widget_block .wp-block-go4kora-sport-popular-posts, .g4s-widget.widget_block .wp-block-go4kora-sport-editorial-picks, .g4s-widget.widget_block .wp-block-go4kora-sport-social-follow { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .wp-block-go4kora-sport-news-list .g4s-ready-widget__title, .wp-block-go4kora-sport-popular-posts .g4s-ready-widget__title, .wp-block-go4kora-sport-editorial-picks .g4s-ready-widget__title, .wp-block-go4kora-sport-social-follow .g4s-ready-widget__title { position: relative; padding-bottom: 10px; margin: 0 0 15px; border-bottom: 1px solid var(--g4s-line); color: var(--g4s-ink); font-size: 17px; line-height: 1.4; } .wp-block-go4kora-sport-news-list .g4s-ready-widget__title::after, .wp-block-go4kora-sport-popular-posts .g4s-ready-widget__title::after, .wp-block-go4kora-sport-editorial-picks .g4s-ready-widget__title::after, .wp-block-go4kora-sport-social-follow .g4s-ready-widget__title::after { content: ""; position: absolute; inset-inline-start: 0; bottom: -1px; width: 32px; height: 2px; background: var(--g4s-accent-ui); } .g4s-article__header { max-width: 920px; padding-bottom: 27px; margin-bottom: 30px; border-bottom: 1px solid var(--g4s-line); } .g4s-article-breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; color: var(--g4s-muted); font-size: 11px; font-weight: 700; line-height: 1.5; } .g4s-article-breadcrumbs a:hover { color: var(--g4s-accent-ui); } .g4s-article-breadcrumbs span { color: var(--g4s-soft); } .g4s-article__category { display: inline-flex; align-items: center; min-height: 27px; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--g4s-accent-ui) 10%, var(--g4s-surface)); color: var(--g4s-accent-ui); font-size: 11px; font-weight: 800; } .g4s-article__category:hover { background: color-mix(in srgb, var(--g4s-accent-ui) 16%, var(--g4s-surface)); color: var(--g4s-accent-ui); } .g4s-article__header h1 { max-width: 900px; margin: 11px 0 0; color: var(--g4s-heading); font-size: clamp(34px, 3.75vw, 47px); line-height: 1.35; letter-spacing: -.9px; } .g4s-article__excerpt { max-width: 820px; margin: 16px 0 0; color: var(--g4s-muted); font-size: 17px; line-height: 1.85; } .g4s-article-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; margin-top: 18px; color: var(--g4s-muted); font-size: 11px; font-weight: 700; line-height: 1.55; } .g4s-article-meta__group { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 15px; min-width: 0; } .g4s-article-meta__group > * { display: inline-flex; align-items: center; white-space: nowrap; } .g4s-article-meta__group--metrics { justify-content: flex-end; margin-inline-start: auto; } .g4s-article-meta__group--metrics:first-child { justify-content: flex-start; margin-inline-start: 0; } .g4s-article-meta__author { gap: 4px; } .g4s-article-meta__views { min-inline-size: 72px; gap: 4px; } .g4s-article-meta__views.is-loading { visibility: hidden; } .g4s-article-meta__views svg { width: 14px; height: 14px; fill: none; stroke: var(--g4s-live); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .g4s-article-meta a { color: var(--g4s-ink); font-weight: 800; } .g4s-article-meta a:hover { color: var(--g4s-accent-ui); } .g4s-article-share { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 13px; margin-top: 20px; } .g4s-article-share__label { color: var(--g4s-menu-ink); font-size: 11px; font-weight: 800; } .g4s-article-share__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; } .g4s-share-button { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--g4s-line); border-radius: 50%; background: var(--g4s-surface-elevated); color: var(--g4s-menu-ink); transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease; } .g4s-share-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .g4s-share-button--whatsapp svg, .g4s-share-button--telegram svg, .g4s-share-button--facebook svg, .g4s-share-button--x svg { fill: currentColor; stroke: none; } .g4s-share-button:hover, .g4s-share-button:focus-visible { border-color: color-mix(in srgb, var(--g4s-accent-ui) 42%, var(--g4s-line)); background: var(--g4s-subtle); color: var(--g4s-accent-ui); outline: none; transform: translateY(-1px); } .g4s-share-button.is-copied { border-color: #47a36b; background: color-mix(in srgb, #47a36b 12%, var(--g4s-surface)); color: #338553; } .g4s-article__image { overflow: hidden; margin-bottom: 30px; border-radius: var(--g4s-radius); background: var(--g4s-subtle); } .g4s-article__image .g4s-image { width: 100%; } .g4s-article__image--placeholder { aspect-ratio: 1.9; } .g4s-article__image--placeholder .g4s-image--placeholder { width: 100%; height: 100%; } .g4s-article__image--placeholder .g4s-image--placeholder span { max-width: 80%; overflow: hidden; font-size: clamp(14px, 2.2vw, 22px); text-overflow: ellipsis; white-space: nowrap; } .g4s-article__body { max-width: 760px; margin-inline: auto; color: var(--g4s-text); font-size: 17px; line-height: 2.05; } .g4s-article__body > *:first-child { margin-top: 0; } .g4s-article__body > *:last-child { margin-bottom: 0; } .g4s-article__body p { margin: 0 0 1.35em; } .g4s-article__body ul, .g4s-article__body ol { padding-inline-start: 1.35em; } .g4s-article__body li + li { margin-top: .45em; } .g4s-article__body h2, .g4s-article__body h3, .g4s-article__body h4 { color: var(--g4s-heading); line-height: 1.45; } .g4s-article__body h2 { margin-top: 2.1em; font-size: 1.6em; } .g4s-article__body h3 { margin-top: 1.9em; font-size: 1.32em; } .g4s-article__body a { color: var(--g4s-accent-ui); font-weight: 700; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--g4s-accent-ui) 40%, transparent); text-underline-offset: 3px; } .g4s-article__body blockquote { padding: 10px 22px; margin: 1.8em 0; border-inline-start: 3px solid var(--g4s-accent-ui); background: var(--g4s-subtle); color: var(--g4s-text); font-size: 1.12em; font-weight: 600; } .g4s-article__body img { border-radius: 8px; } .g4s-article__body figcaption { color: var(--g4s-muted); font-size: 12px; text-align: center; } .g4s-article__body iframe, .g4s-article__body video { max-width: 100%; } .g4s-article__body table { display: block; width: 100%; max-width: 100%; margin: 1.7em 0; overflow-x: auto; border-collapse: collapse; color: var(--g4s-text); font-size: .9em; -webkit-overflow-scrolling: touch; } .g4s-article__body th, .g4s-article__body td { padding: 10px 12px; border: 1px solid var(--g4s-line); text-align: start; } .g4s-article__body th { background: var(--g4s-subtle); color: var(--g4s-heading); font-weight: 800; } .g4s-article__body pre { max-width: 100%; padding: 16px; overflow: auto; border: 1px solid var(--g4s-line); border-radius: 8px; background: var(--g4s-subtle); color: var(--g4s-text); line-height: 1.75; direction: ltr; text-align: left; } .g4s-article__body code { padding: .12em .32em; border-radius: 4px; background: var(--g4s-subtle); color: var(--g4s-heading); } .g4s-article__body pre code { padding: 0; background: transparent; } .g4s-article__body hr { border: 0; border-top: 1px solid var(--g4s-line); } .g4s-article__footer { max-width: 760px; margin: 32px auto 0; padding-top: 20px; border-top: 1px solid var(--g4s-line); } .g4s-tags a { display: inline-block; padding: 3px 10px; margin: 3px 3px 0 0; border-radius: 999px; background: var(--g4s-subtle); color: var(--g4s-menu-ink); font-size: 11px; font-weight: 700; } .g4s-tags a:hover { background: color-mix(in srgb, var(--g4s-accent-ui) 10%, var(--g4s-surface)); color: var(--g4s-accent-ui); } .g4s-article-author { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 17px; align-items: start; max-width: 760px; padding: 20px; margin: 34px auto 0; border: 1px solid var(--g4s-line); border-radius: 12px; background: var(--g4s-surface-elevated); } .g4s-article-author__avatar { display: block; overflow: hidden; width: 72px; height: 72px; border-radius: 50%; background: var(--g4s-subtle); } .g4s-article-author__image { width: 100%; height: 100%; object-fit: cover; } .g4s-article-author > div > span { color: var(--g4s-muted); font-size: 10px; font-weight: 800; } .g4s-article-author h2 { margin: 2px 0 6px; color: var(--g4s-heading); font-size: 17px; line-height: 1.45; } .g4s-article-author__bio, .g4s-article-author__bio p { margin: 0; color: var(--g4s-muted); font-size: 12px; line-height: 1.8; } .g4s-related-posts { padding-top: 34px; margin-top: 44px; border-top: 1px solid var(--g4s-line); } .g4s-related-posts__head { margin-bottom: 18px; } .g4s-related-posts__head > span { color: var(--g4s-accent-ui); font-size: 10px; font-weight: 800; } .g4s-related-posts__head h2 { margin: 3px 0 0; color: var(--g4s-heading); font-size: 23px; line-height: 1.4; } .g4s-related-posts__grid { display: grid; gap: 22px 16px; } .g4s-related-posts--3 .g4s-related-posts__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g4s-related-posts--4 .g4s-related-posts__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .g4s-related-posts .g4s-card__title { font-size: 14px; line-height: 1.55; } .g4s-page .g4s-article__header { border-bottom: 0; margin-bottom: 12px; } .g4s-page-links { margin-top: 26px; font-weight: 800; } .nav-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 30px; } .nav-links a, .nav-links .current { min-width: 36px; height: 36px; display: inline-grid; place-content: center; padding: 0 9px; border: 1px solid var(--g4s-line); border-radius: 8px; color: var(--g4s-menu-ink); font-size: 13px; font-weight: 800; } .nav-links .current { background: var(--g4s-accent-ui); border-color: var(--g4s-accent-ui); color: var(--g4s-on-accent); } .nav-links a:hover { color: var(--g4s-accent-ui); border-color: color-mix(in srgb, var(--g4s-accent-ui) 45%, var(--g4s-surface)); } .g4s-pagination { margin-top: 34px; } .g4s-pagination .page-numbers { display: flex; flex-wrap: wrap; gap: 7px; padding: 0; margin: 0; list-style: none; } .g4s-pagination .page-numbers > li { margin: 0; } .g4s-pagination .page-numbers a, .g4s-pagination .page-numbers span { min-width: 39px; height: 39px; display: inline-grid; place-content: center; padding: 0 11px; border: 1px solid var(--g4s-line); border-radius: 9px; background: var(--g4s-surface-elevated); color: var(--g4s-menu-ink); font-size: 13px; font-weight: 800; line-height: 1; transition: color .18s ease, border-color .18s ease, background .18s ease; } .g4s-pagination .page-numbers .current { border-color: var(--g4s-accent-ui); background: var(--g4s-accent-ui); color: var(--g4s-on-accent); } .g4s-pagination .page-numbers a:hover, .g4s-pagination .page-numbers a:focus-visible { border-color: color-mix(in srgb, var(--g4s-accent-ui) 45%, var(--g4s-surface)); color: var(--g4s-accent-ui); outline: none; } .g4s-pagination .page-numbers .dots { width: auto; min-width: 25px; padding: 0; border-color: transparent; background: transparent; color: var(--g4s-soft); } .g4s-pagination .page-numbers .prev, .g4s-pagination .page-numbers .next { min-width: auto; padding-inline: 14px; } .g4s-empty { padding: 72px 24px; margin: 25px 0; border: 1px dashed var(--g4s-dashed); border-radius: var(--g4s-radius); background: var(--g4s-subtle); color: var(--g4s-muted); text-align: center; } .g4s-empty h1, .g4s-empty h2 { margin: 0 0 6px; color: var(--g4s-ink); font-size: 24px; } .g4s-empty p { margin: 0; font-size: 14px; } .g4s-empty--archive { margin: 0; } /* Not found */ .g4s-not-found-wrap { display: grid; min-height: clamp(520px, 67vh, 760px); place-items: center; padding-block: clamp(44px, 8vw, 92px); } .g4s-not-found { position: relative; width: min(100%, 820px); overflow: hidden; padding: clamp(38px, 7vw, 74px); border: 1px solid var(--g4s-line); border-radius: calc(var(--g4s-radius) + 6px); background: linear-gradient(145deg, var(--g4s-surface-elevated), color-mix(in srgb, var(--g4s-subtle) 72%, var(--g4s-surface-elevated))); box-shadow: 0 24px 64px color-mix(in srgb, var(--g4s-shadow) 55%, transparent); text-align: center; } .g4s-not-found::before { position: absolute; top: -150px; inset-inline-end: -120px; width: 320px; height: 320px; border-radius: 50%; background: color-mix(in srgb, var(--g4s-accent-ui) 8%, transparent); content: ""; pointer-events: none; } .g4s-not-found > * { position: relative; z-index: 1; } .g4s-not-found__code { display: block; color: var(--g4s-accent-ui); font-size: clamp(66px, 11vw, 108px); font-weight: 900; letter-spacing: -.055em; line-height: .92; } .g4s-not-found__eyebrow { margin: 18px 0 6px; color: var(--g4s-accent-ui); font-size: 11px; font-weight: 900; letter-spacing: .03em; } .g4s-not-found h1 { max-width: 660px; margin: 0 auto; color: var(--g4s-heading); font-size: clamp(27px, 4vw, 40px); line-height: 1.4; } .g4s-not-found__description { max-width: 610px; margin: 14px auto 0; color: var(--g4s-muted); font-size: 15px; line-height: 1.9; } .g4s-not-found__search { width: min(100%, 570px); margin: 28px auto 0; } .g4s-not-found__search .g4s-search-form button { min-width: 105px; } .g4s-not-found__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; } .g4s-not-found__actions .g4s-button { display: inline-grid; min-width: 145px; place-items: center; } .g4s-not-found__actions .g4s-button--secondary { border: 1px solid var(--g4s-field-border); background: var(--g4s-surface-elevated); color: var(--g4s-ink); } .g4s-not-found__actions .g4s-button--secondary:hover { border-color: color-mix(in srgb, var(--g4s-accent-ui) 45%, var(--g4s-field-border)); color: var(--g4s-accent-ui); filter: none; } @media (max-width: 520px) { .g4s-not-found-wrap { min-height: 0; padding-block: 34px; } .g4s-not-found { padding: 42px 20px; border-radius: calc(var(--g4s-radius) + 2px); } .g4s-not-found__description { font-size: 14px; } .g4s-not-found__search .g4s-search-form { flex-direction: column; } .g4s-not-found__search .g4s-search-form button, .g4s-not-found__actions .g4s-button { width: 100%; } .g4s-not-found__actions { flex-direction: column; } } /* Comments */ .g4s-comments { max-width: 760px; padding-top: 38px; margin: 46px auto 0; border-top: 1px solid var(--g4s-line); } .g4s-comments__header { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding-bottom: 22px; margin-bottom: 24px; border-bottom: 1px solid var(--g4s-line); } .g4s-comments__eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; color: var(--g4s-accent-ui); font-size: 11px; font-weight: 800; letter-spacing: .045em; } .g4s-comments__eyebrow::before { width: 20px; height: 2px; border-radius: 999px; background: currentColor; content: ""; } .g4s-comments h2 { display: flex; align-items: center; gap: 9px; margin: 0; color: var(--g4s-heading); font-size: clamp(21px, 2.2vw, 26px); line-height: 1.35; } .g4s-comments__count { display: inline-grid; min-width: 26px; height: 26px; place-items: center; padding: 0 7px; border-radius: 999px; background: color-mix(in srgb, var(--g4s-accent-ui) 12%, transparent); color: var(--g4s-accent-ui); font-size: 12px; line-height: 1; } .g4s-comments__intro { max-width: 245px; margin: 0; color: var(--g4s-muted); font-size: 12px; line-height: 1.7; text-align: end; } .g4s-comments .comment-list, .g4s-comments .comment-list .children { padding: 0; margin: 0; list-style: none; } .g4s-comments .comment-list { display: grid; gap: 14px; } .g4s-comments .comment-list .children { display: grid; gap: 12px; padding-inline-start: clamp(18px, 4vw, 46px); margin-top: 12px; border-inline-start: 2px solid color-mix(in srgb, var(--g4s-accent-ui) 24%, var(--g4s-line)); } .g4s-comment__article { padding: 18px 20px; border: 1px solid var(--g4s-line); border-radius: 14px; background: var(--g4s-surface-elevated); box-shadow: 0 7px 18px color-mix(in srgb, var(--g4s-shadow) 55%, transparent); } .g4s-comment__header { display: flex; align-items: center; gap: 11px; } .g4s-comment__avatar { flex: 0 0 auto; width: 44px; height: 44px; overflow: hidden; border: 1px solid var(--g4s-line); border-radius: 50%; background: var(--g4s-subtle); } .g4s-comment__avatar .avatar { width: 100%; height: 100%; object-fit: cover; } .g4s-comment__identity { display: grid; gap: 1px; min-width: 0; } .g4s-comment__author { color: var(--g4s-heading); font-size: 14px; font-style: normal; font-weight: 800; line-height: 1.45; overflow-wrap: anywhere; } .g4s-comment__author a { color: inherit; } .g4s-comment__date { color: var(--g4s-muted); font-size: 11px; line-height: 1.5; } .g4s-comment__date:hover { color: var(--g4s-accent-ui); } .g4s-comment__pending { display: flex; align-items: center; gap: 7px; padding: 9px 11px; margin: 15px 0 0; border: 1px solid color-mix(in srgb, #f59e0b 33%, var(--g4s-line)); border-radius: 8px; background: color-mix(in srgb, #f59e0b 10%, transparent); color: var(--g4s-ink); font-size: 12px; line-height: 1.7; } .g4s-comment__pending::before { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #f59e0b; content: ""; } .g4s-comment__content { margin-top: 14px; color: var(--g4s-text); font-size: 14px; line-height: 1.9; overflow-wrap: anywhere; } .g4s-comment__content > :first-child { margin-top: 0; } .g4s-comment__content > :last-child { margin-bottom: 0; } .g4s-comment__footer { display: flex; justify-content: flex-end; margin-top: 13px; } .g4s-comment__reply .comment-reply-link { display: inline-flex; align-items: center; min-height: 30px; padding: 3px 10px; border: 1px solid var(--g4s-line); border-radius: 999px; color: var(--g4s-accent-ui); font-size: 11px; font-weight: 800; } .g4s-comment__reply .comment-reply-link:hover { border-color: color-mix(in srgb, var(--g4s-accent-ui) 42%, var(--g4s-line)); background: color-mix(in srgb, var(--g4s-accent-ui) 8%, transparent); } .g4s-comments .nav-links { margin-top: 19px; } .g4s-comments .comment-respond { padding: 24px; margin-top: 28px; border: 1px solid var(--g4s-line); border-radius: 14px; background: var(--g4s-surface-elevated); box-shadow: 0 8px 22px color-mix(in srgb, var(--g4s-shadow) 42%, transparent); } .g4s-comments .comment-reply-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 6px; color: var(--g4s-heading); font-size: 20px; line-height: 1.45; } .g4s-comments .comment-reply-title small { margin-inline-start: auto; } .g4s-comments #cancel-comment-reply-link { color: var(--g4s-live-ui); font-size: 11px; font-weight: 800; } .g4s-comments .comment-notes, .g4s-comments .logged-in-as { margin: 0 0 18px; color: var(--g4s-muted); font-size: 12px; line-height: 1.75; } .g4s-comments .logged-in-as a { color: var(--g4s-accent-ui); font-weight: 700; } .g4s-comment-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 14px; margin-top: 19px; } .g4s-comment-form .comment-notes, .g4s-comment-form .logged-in-as, .g4s-comment-form .comment-form-comment, .g4s-comment-form .comment-form-url, .g4s-comment-form .comment-form-cookies-consent, .g4s-comment-form .form-submit { grid-column: 1 / -1; } .g4s-comment-form p { margin: 0; } .g4s-comment-field { display: grid; gap: 7px; } .g4s-comment-field label { color: var(--g4s-ink); font-size: 12px; font-weight: 800; } .g4s-comment-field label > span[aria-hidden="true"] { color: var(--g4s-live-ui); } .g4s-comments input[type="text"], .g4s-comments input[type="email"], .g4s-comments input[type="url"], .g4s-comments textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--g4s-field-border); border-radius: 9px; background: var(--g4s-surface); color: var(--g4s-ink); font: inherit; font-size: 13px; line-height: 1.6; outline: none; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; } .g4s-comments textarea { min-height: 170px; resize: vertical; } .g4s-comments input[type="text"]:focus, .g4s-comments input[type="email"]:focus, .g4s-comments input[type="url"]:focus, .g4s-comments textarea:focus { border-color: var(--g4s-accent-ui); box-shadow: 0 0 0 3px color-mix(in srgb, var(--g4s-accent-ui) 14%, transparent); } .g4s-comments .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 8px; color: var(--g4s-muted); font-size: 11px; line-height: 1.7; } .g4s-comments .comment-form-cookies-consent input { width: 16px; height: 16px; flex: 0 0 auto; margin: 2px 0 0; accent-color: var(--g4s-accent-ui); } .g4s-comments .comment-form-cookies-consent label { cursor: pointer; } .g4s-comments .form-submit { display: flex; justify-content: flex-end; margin-top: 2px; } .g4s-comments .g4s-comment-submit { min-height: 44px; padding: 9px 19px; border: 0; border-radius: 9px; background: var(--g4s-accent-ui); color: var(--g4s-on-accent); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; } .g4s-comments .g4s-comment-submit:hover { background: color-mix(in srgb, var(--g4s-accent-ui) 88%, #000); box-shadow: 0 8px 16px color-mix(in srgb, var(--g4s-accent-ui) 25%, transparent); transform: translateY(-1px); } .g4s-comments .g4s-comment-submit:focus-visible { outline: 3px solid color-mix(in srgb, var(--g4s-accent-ui) 34%, transparent); outline-offset: 2px; } .g4s-comments__closed { padding: 12px 14px; margin: 22px 0 0; border: 1px solid var(--g4s-line); border-radius: 9px; background: var(--g4s-subtle); color: var(--g4s-muted); font-size: 12px; } /* Footer */ .g4s-footer { padding: 18px 0; background: var(--g4s-footer-bg); color: var(--g4s-footer-ink); } .g4s-footer__panel { overflow: hidden; border: 1px solid var(--g4s-footer-line); border-radius: 16px; background: color-mix(in srgb, var(--g4s-footer-ink) 4%, transparent); box-shadow: 0 16px 38px rgba(0,0,0,.11); } .g4s-footer__main { --g4s-footer-column-gap: clamp(40px, 4.5vw, 62px); display: grid; grid-template-columns: minmax(220px, 1fr) minmax(320px, 1.22fr) minmax(220px, 1fr); column-gap: var(--g4s-footer-column-gap); align-items: stretch; padding: 23px 28px; } .g4s-footer__main--sections-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g4s-footer__main--sections-1 { grid-template-columns: minmax(0, 1fr); } .g4s-footer__main > * { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; } .g4s-footer__main > * + *::before { position: absolute; inset-block: 0; inset-inline-start: calc(0px - var(--g4s-footer-column-gap)); inline-size: var(--g4s-footer-column-gap); background: linear-gradient(to right, transparent calc(50% - .5px), var(--g4s-footer-line) calc(50% - .5px), var(--g4s-footer-line) calc(50% + .5px), transparent calc(50% + .5px)); content: ""; pointer-events: none; } .g4s-footer__main--sections-1 > * { width: min(100%, 680px); justify-self: center; } .g4s-footer__main--sections-1 .g4s-footer__identity, .g4s-footer__main--sections-1 .g4s-footer__social { align-items: center; text-align: center; } .g4s-footer__main--sections-1 .g4s-footer__identity p { margin-inline: auto; } .g4s-footer__main--sections-1 .g4s-footer-links { width: min(100%, 560px); margin-inline: auto; } .g4s-footer__main--sections-1 .g4s-social-links--footer { justify-content: center; } .g4s-wordmark--footer { color: var(--g4s-footer-ink); } .g4s-wordmark--footer strong { color: var(--g4s-footer-ink); } .g4s-wordmark--footer span { color: var(--g4s-footer-muted); } .g4s-footer__identity { text-align: start; } .g4s-logo-link--footer { display: inline-block; line-height: 0; } .g4s-logo-link--footer .g4s-logo { display: block; width: auto; max-width: min(var(--g4s-logo-width), 230px); max-height: 44px; } .g4s-footer__identity p { max-width: 360px; margin: 12px 0 0; color: var(--g4s-footer-muted); font-size: 13px; line-height: 1.75; } .g4s-footer__navigation { text-align: start; } .g4s-footer-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 14px; padding: 0; margin: 0; list-style: none; } .g4s-footer-links li { min-width: 0; padding-inline: 4px; text-align: start; } .g4s-footer-links a { display: flex; justify-content: flex-start; width: 100%; color: var(--g4s-footer-muted); font-size: 12px; font-weight: 700; text-align: start; transition: color .18s ease, transform .18s ease; } .g4s-footer-links a:hover, .g4s-footer-links a:focus-visible { color: var(--g4s-footer-ink); outline: none; transform: translateY(-1px); } .g4s-footer__social { align-items: flex-end; text-align: end; } .g4s-social-links--footer { flex-wrap: wrap; justify-content: flex-end; max-width: 100%; gap: 8px; } .g4s-social-links--footer .g4s-social-link { width: 36px; height: 36px; border: 1px solid var(--g4s-footer-line); color: var(--g4s-footer-ink); } .g4s-social-links--footer .g4s-social-link:hover, .g4s-social-links--footer .g4s-social-link:focus-visible { background: color-mix(in srgb, var(--g4s-footer-ink) 9%, transparent); } .g4s-footer__bottom { display: flex; align-items: center; min-height: 44px; gap: 24px; padding: 0 28px; border-top: 1px solid var(--g4s-footer-line); color: var(--g4s-footer-muted); font-size: 11px; } .g4s-footer__bottom--with-pages { justify-content: space-between; } .g4s-footer__copyright { flex: 0 0 auto; } .g4s-footer__pages { min-width: 0; } .g4s-footer__pages ul { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 7px 0; padding: 0; margin: 0; list-style: none; } .g4s-footer__pages li { display: flex; align-items: center; } .g4s-footer__pages li + li::before { width: 1px; height: 11px; margin-inline: 10px; background: var(--g4s-footer-line); content: ""; } .g4s-footer__pages a { color: var(--g4s-footer-muted); font-weight: 700; transition: color .18s ease; } .g4s-footer__pages a:hover, .g4s-footer__pages a:focus-visible { color: var(--g4s-footer-ink); outline: none; } /* WordPress alignment */ .alignleft { float: left; margin: .4em 1.5em 1em 0; } .alignright { float: right; margin: .4em 0 1em 1.5em; } .aligncenter { display: block; margin-inline: auto; } .wp-block-image figcaption { color: var(--g4s-muted); font-size: 12px; } .wp-block-button__link { border-radius: 8px; background: var(--g4s-accent-ui); color: var(--g4s-on-accent); } @media (min-width: 721px) and (max-width: 1080px) { .g4s-header--modern .g4s-header__inner, .g4s-header--editorial.g4s-header--sticky-compact.is-sticky .g4s-header__inner { gap: 20px; } .g4s-branding .custom-logo { max-width: min(var(--g4s-logo-width), 178px); } .g4s-wordmark strong { font-size: 21px; } .g4s-menu { gap: 14px; } .g4s-menu a { font-size: 12px; } } /* Social links remain visible in the wide header; below this point the full set moves into the menu instead of competing with the logo and navigation. */ @media (max-width: 1180px) { .g4s-header--has-social.g4s-header--modern .g4s-header__inner, .g4s-header--has-social.g4s-header--editorial .g4s-header__inner { display: flex; justify-content: center; min-height: 64px; } .g4s-header--has-social.g4s-header--sticky-compact.is-sticky .g4s-header__inner { min-height: 60px; } .g4s-header--has-social .g4s-menu-toggle { position: absolute; z-index: 2; top: 50%; inset-inline-start: 0; display: inline-grid; width: 38px; height: 38px; transform: translateY(-50%); } .g4s-header--has-social .g4s-branding { position: relative; z-index: 1; text-align: center; } .g4s-header--has-social .g4s-branding .custom-logo { max-width: min(var(--g4s-logo-width), 140px); max-height: 40px; } .g4s-header--has-social .g4s-wordmark { max-width: 150px; } .g4s-header--has-social .g4s-wordmark strong { font-size: clamp(16px, 2.5vw, 19px); } .g4s-header--has-social .g4s-wordmark span { display: none; } .g4s-header--has-social .g4s-header__actions { position: absolute; z-index: 2; top: 50%; inset-inline-end: 0; display: flex; gap: 2px; transform: translateY(-50%); } .g4s-header--has-social .g4s-search-toggle, .g4s-header--has-social .g4s-theme-toggle { width: 36px; height: 36px; } .g4s-header--has-social .g4s-social-links--header { display: none; } .g4s-header--has-social .g4s-header__live { min-height: 32px; padding: 0 9px; font-size: 10px; } .g4s-header--has-social .g4s-live-dot { width: 6px; height: 6px; } .g4s-header--has-social .g4s-navigation { position: absolute; z-index: 60; top: calc(100% + 8px); inset-inline: 0; visibility: hidden; opacity: 0; transform: translateY(-8px); border: 1px solid var(--g4s-line); border-radius: 12px; background: var(--g4s-surface-elevated); box-shadow: 0 16px 30px var(--g4s-shadow); transition: opacity .2s ease, transform .2s ease, visibility .2s ease; } .g4s-header--has-social .g4s-navigation.is-open { visibility: visible; opacity: 1; transform: translateY(0); } .g4s-header--has-social .g4s-menu { display: block; min-height: 0; max-height: calc(100vh - 180px); padding: 8px 16px 14px; overflow-y: auto; } .g4s-header--has-social .g4s-menu a { padding: 10px 0; font-size: 14px; } .g4s-header--has-social .g4s-menu .current-menu-item > a::after, .g4s-header--has-social .g4s-menu .current_page_item > a::after { display: none; } .g4s-header--has-social .g4s-menu .sub-menu, .g4s-header--has-social .g4s-menu .children, [dir="rtl"] .g4s-header--has-social .g4s-menu .sub-menu, [dir="rtl"] .g4s-header--has-social .g4s-menu .children { position: static; display: none; visibility: visible; opacity: 1; transform: none; min-width: 0; padding: 0 12px; box-shadow: none; border: 0; } .g4s-header--has-social .g4s-menu .is-submenu-open > .sub-menu, .g4s-header--has-social .g4s-menu .is-submenu-open > .children, [dir="rtl"] .g4s-header--has-social .g4s-menu .is-submenu-open > .sub-menu, [dir="rtl"] .g4s-header--has-social .g4s-menu .is-submenu-open > .children { display: block; transform: none; } .g4s-header--has-social .g4s-menu .menu-item-has-children > a, .g4s-header--has-social .g4s-menu .page_item_has_children > a { padding-inline-end: 42px; } .g4s-header--has-social .g4s-submenu-toggle { position: absolute; top: 5px; inset-inline-end: 0; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--g4s-muted); cursor: pointer; } .g4s-header--has-social .g4s-submenu-toggle::before { content: ""; width: 7px; height: 7px; border-inline-end: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .18s ease; } .g4s-header--has-social .g4s-submenu-toggle[aria-expanded="true"]::before { transform: rotate(225deg) translate(-2px, -1px); } .g4s-header--has-social .g4s-submenu-toggle:hover, .g4s-header--has-social .g4s-submenu-toggle:focus-visible { background: var(--g4s-subtle); color: var(--g4s-accent-ui); outline: none; } .g4s-header--has-social .g4s-mobile-menu-social { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px 14px; border-top: 1px solid var(--g4s-line); } .g4s-header--has-social .g4s-mobile-menu-social__label { color: var(--g4s-muted); font-size: 11px; font-weight: 800; white-space: nowrap; } .g4s-header--has-social .g4s-mobile-menu-social .g4s-social-links { gap: 4px; } .g4s-header--has-social .g4s-mobile-menu-social .g4s-social-link { width: 32px; height: 32px; } } @media (max-width: 1100px) { .g4s-home-layout-section--with-sidebar, .g4s-home-layout-section--sidebar-left { grid-template-columns: minmax(0, 1fr); gap: 52px; } .g4s-home-layout-section--sidebar-right .g4s-home-layout-section__main, .g4s-home-layout-section--sidebar-left .g4s-home-layout-section__main { grid-column: 1; grid-row: 1; } .g4s-home-layout-section--sidebar-right .g4s-home-sidebar, .g4s-home-layout-section--sidebar-left .g4s-home-sidebar { grid-column: 1; grid-row: 2; width: min(100%, 620px); padding-top: 34px; border-top: 1px solid var(--g4s-line); justify-self: center; } .g4s-home-sidebar--sticky .g4s-home-sidebar__inner { position: static; } } @media (max-width: 900px) { .g4s-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g4s-hero-mosaic { grid-template-columns: minmax(0, 1fr); min-height: 0; } .g4s-hero-mosaic__primary, .g4s-hero-mosaic__primary .g4s-hero-tile { min-height: 430px; } .g4s-hero-slider__track { grid-auto-columns: calc((100% - 16px) / 2); } .g4s-hero-magazine { grid-template-columns: minmax(0, 1fr); gap: 26px; min-height: 0; } .g4s-hero-magazine__feature, .g4s-hero-magazine__feature-card { height: auto; } .g4s-hero-magazine__feature-image { min-height: 0; aspect-ratio: 1.65; } .g4s-hero-magazine__list { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 18px 22px; } .g4s-hero-magazine__list .g4s-post-row { grid-template-columns: 115px minmax(0, 1fr); gap: 13px; align-items: center; padding-bottom: 17px; } .g4s-content-layout--no-sidebar .g4s-archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g4s-content-layout { grid-template-columns: minmax(0, 1fr); } .g4s-content-layout--sidebar-right .g4s-content-column, .g4s-content-layout--sidebar-right .g4s-sidebar, .g4s-content-layout--sidebar-left .g4s-content-column, .g4s-content-layout--sidebar-left .g4s-sidebar { grid-column: 1; } .g4s-sidebar { border-top: 1px solid var(--g4s-line); padding-top: 30px; } .g4s-sidebar--sticky .g4s-sidebar__inner { position: static; } .g4s-sidebar__inner { width: min(100%, 620px); margin-inline: auto; } .g4s-sidebar .g4s-widget { max-width: none; } .g4s-related-posts--3 .g4s-related-posts__grid, .g4s-related-posts--4 .g4s-related-posts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g4s-footer { padding: 16px 0; } .g4s-footer__main--sections-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g4s-footer__main--sections-3 .g4s-footer__identity { grid-column: 1 / -1; padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--g4s-footer-line); } .g4s-footer__main--sections-3 .g4s-footer__navigation::before { display: none; } } @media (max-width: 720px) { body { font-size: 15px; } .g4s-container { width: min(calc(100% - 32px), var(--g4s-container)); } .g4s-announcement__inner { align-items: center; min-height: 0; gap: 8px; padding: 7px 0; } .g4s-announcement__signal { width: 6px; height: 6px; margin-top: 0; } .g4s-announcement__body { display: block; padding-top: 0; text-align: start; } .g4s-announcement__body p { display: inline; font-size: 11px; line-height: 1.7; } .g4s-announcement__link { margin-inline-start: 6px; font-size: 10px; vertical-align: middle; } .g4s-announcement__dismiss, .g4s-announcement__spacer { flex-basis: 28px; width: 28px; height: 28px; } .g4s-header--modern .g4s-header__inner, .g4s-header--editorial .g4s-header__inner, .g4s-header--editorial.g4s-header--sticky-compact.is-sticky .g4s-header__inner { display: flex; justify-content: center; min-height: 64px; } .g4s-header--sticky-compact.is-sticky .g4s-header__inner { min-height: 60px; } .g4s-menu-toggle { position: absolute; z-index: 2; top: 50%; inset-inline-start: 0; display: inline-grid; width: 38px; height: 38px; transform: translateY(-50%); } .g4s-branding { position: relative; z-index: 1; text-align: center; } .g4s-branding .custom-logo, .g4s-header--sticky-compact.is-sticky .g4s-branding .custom-logo { max-width: min(var(--g4s-logo-width), 140px); max-height: 40px; } .g4s-wordmark { max-width: 150px; } .g4s-wordmark strong, .g4s-header--sticky-compact.is-sticky .g4s-wordmark strong { font-size: clamp(16px, 5vw, 19px); } .g4s-wordmark span { display: none; } .g4s-header__actions, .g4s-header--modern .g4s-header__actions, .g4s-header--editorial .g4s-header__actions, .g4s-header--editorial.g4s-header--sticky-compact.is-sticky .g4s-header__actions { position: absolute; z-index: 2; top: 50%; inset-inline-end: 0; display: flex; gap: 2px; transform: translateY(-50%); } .g4s-search-toggle, .g4s-theme-toggle { width: 36px; height: 36px; } .g4s-header__live { min-height: 32px; padding: 0 9px; font-size: 10px; } .g4s-live-dot { width: 6px; height: 6px; } .g4s-navigation, .g4s-header--editorial .g4s-navigation, .g4s-header--editorial.g4s-header--sticky-compact.is-sticky .g4s-navigation { position: absolute; z-index: 60; top: calc(100% + 8px); inset-inline: 0; visibility: hidden; opacity: 0; transform: translateY(-8px); border: 1px solid var(--g4s-line); border-radius: 12px; background: var(--g4s-surface-elevated); box-shadow: 0 16px 30px var(--g4s-shadow); transition: opacity .2s ease, transform .2s ease, visibility .2s ease; } .g4s-navigation.is-open { visibility: visible; opacity: 1; transform: translateY(0); } .g4s-menu, .g4s-header--modern .g4s-menu, .g4s-header--editorial .g4s-menu, .g4s-header--sticky-compact.is-sticky .g4s-menu { display: block; min-height: 0; max-height: calc(100vh - 110px); padding: 8px 16px 14px; overflow-y: auto; } .g4s-menu a, .g4s-header--modern .g4s-menu > li > a, .g4s-header--editorial .g4s-menu > li > a, .g4s-header--sticky-compact.is-sticky .g4s-menu > li > a { padding: 10px 0; font-size: 14px; } .g4s-menu .current-menu-item > a::after, .g4s-menu .current_page_item > a::after { display: none; } .g4s-menu .sub-menu, .g4s-menu .children, [dir="rtl"] .g4s-menu .sub-menu, [dir="rtl"] .g4s-menu .children { position: static; display: none; visibility: visible; opacity: 1; transform: none; min-width: 0; padding: 0 12px; box-shadow: none; border: 0; } .g4s-menu .is-submenu-open > .sub-menu, .g4s-menu .is-submenu-open > .children, [dir="rtl"] .g4s-menu .is-submenu-open > .sub-menu, [dir="rtl"] .g4s-menu .is-submenu-open > .children { display: block; transform: none; } .g4s-menu .menu-item-has-children > a, .g4s-menu .page_item_has_children > a { padding-inline-end: 42px; } .g4s-submenu-toggle { position: absolute; top: 5px; inset-inline-end: 0; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--g4s-muted); cursor: pointer; } .g4s-submenu-toggle::before { content: ""; width: 7px; height: 7px; border-inline-end: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .18s ease; } .g4s-submenu-toggle[aria-expanded="true"]::before { transform: rotate(225deg) translate(-2px, -1px); } .g4s-submenu-toggle:hover, .g4s-submenu-toggle:focus-visible { background: var(--g4s-subtle); color: var(--g4s-accent-ui); outline: none; } .g4s-front-page { padding-top: 20px; padding-bottom: 54px; } .g4s-home-layout-section { margin-top: 47px; } .g4s-home-layout-section--first { margin-top: 0; } .g4s-lead { grid-template-areas: "primary" "secondary"; grid-template-columns: 1fr; gap: 22px; } .g4s-lead--single { grid-template-areas: "primary"; } .g4s-lead-story { min-height: 390px; } .g4s-lead-story h1, .g4s-lead-story__title { font-size: 27px; } .g4s-lead-story p { display: none; } .g4s-lead__secondary, .g4s-lead__secondary-list { gap: 17px; } .g4s-lead-side { grid-template-columns: 120px minmax(0, 1fr); gap: 13px; } .g4s-lead-side h2 { font-size: 15px; } .g4s-hero-mosaic__primary, .g4s-hero-mosaic__primary .g4s-hero-tile { min-height: 390px; } .g4s-hero-mosaic__secondary, .g4s-hero-mosaic--secondary-1 .g4s-hero-mosaic__secondary { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); overflow: visible; padding-bottom: 0; scroll-snap-type: none; } .g4s-hero-mosaic--secondary-3 .g4s-hero-mosaic__secondary > :last-child { grid-column: auto; } .g4s-hero-mosaic__secondary .g4s-hero-tile { min-height: 230px; scroll-snap-align: none; } .g4s-hero-slider__track { grid-auto-columns: 100%; gap: 13px; } .g4s-hero-slider__slide { min-height: 360px; } .g4s-hero-slider__slide h2 { -webkit-line-clamp: 4; } .g4s-builder-block + .g4s-builder-block--hero, .g4s-ad-slot + .g4s-builder-block--hero { margin-top: 47px; } .g4s-builder-heading { margin-top: 47px; padding: 17px 18px; } .g4s-builder-heading + .g4s-home-section { margin-top: 25px; } .g4s-home-section { margin-top: 47px; } .g4s-section-heading h2 { font-size: 19px; } .g4s-card-grid { gap: 20px 14px; } .g4s-archive-grid, .g4s-content-layout--no-sidebar .g4s-archive-grid { gap: 20px 14px; } .g4s-card__content { padding-top: 9px; } .g4s-card__title { font-size: 14px; } .g4s-hero-magazine { gap: 23px; } .g4s-hero-magazine__feature-image { aspect-ratio: 1.45; } .g4s-hero-magazine__feature-content { padding-top: 11px; } .g4s-hero-magazine__feature-content h2 { font-size: 24px; line-height: 1.45; } .g4s-hero-magazine__list { grid-template-columns: minmax(0, 1fr); gap: 17px; } .g4s-hero-magazine__list .g4s-post-row { grid-template-columns: 115px minmax(0, 1fr); gap: 13px; padding-bottom: 17px; } .g4s-post-meta { gap: 5px; font-size: 10px; } .g4s-post-meta__category::after { margin-inline-start: 5px; } .g4s-content-layout { padding-top: 29px; padding-bottom: 55px; } .g4s-page-header h1 { font-size: 29px; } .g4s-post-row { grid-template-columns: 115px minmax(0, 1fr); gap: 13px; padding-bottom: 17px; } .g4s-post-row h3 { margin-top: 5px; font-size: 15px; line-height: 1.45; } .g4s-post-row p { display: none; } .g4s-article__header { padding-bottom: 23px; margin-bottom: 24px; } .g4s-article-breadcrumbs { margin-bottom: 14px; } .g4s-article__header h1 { font-size: 30px; } .g4s-article__excerpt { font-size: 15px; } .g4s-article__body { font-size: 16px; line-height: 2; } .g4s-article-meta { display: grid; justify-content: stretch; gap: 8px; margin-top: 15px; } .g4s-article-meta__group { gap: 7px 14px; } .g4s-article-meta__group--metrics { justify-content: flex-start; margin-inline-start: 0; } .g4s-article-share { margin-top: 17px; } .g4s-article__image { margin-bottom: 24px; border-radius: 11px; } .g4s-article-author { grid-template-columns: 60px minmax(0, 1fr); gap: 14px; padding: 17px; } .g4s-article-author__avatar { width: 60px; height: 60px; } .g4s-related-posts { padding-top: 28px; margin-top: 36px; } .g4s-related-posts__head h2 { font-size: 21px; } .g4s-related-posts--3 .g4s-related-posts__grid, .g4s-related-posts--4 .g4s-related-posts__grid { grid-template-columns: minmax(0, 1fr); gap: 17px; } .g4s-related-posts .g4s-card { display: grid; grid-template-columns: 115px minmax(0, 1fr); gap: 13px; align-items: start; } .g4s-related-posts .g4s-card__image { aspect-ratio: 1.25; } .g4s-related-posts .g4s-card__content { min-width: 0; padding-top: 1px; } .g4s-related-posts .g4s-card__title { margin-top: 5px; font-size: 14px; } .g4s-comments { padding-top: 30px; margin-top: 38px; } .g4s-comments__header { align-items: flex-start; flex-direction: column; gap: 8px; padding-bottom: 18px; margin-bottom: 19px; } .g4s-comments__intro { max-width: none; text-align: start; } .g4s-comments .comment-respond { padding: 18px; margin-top: 23px; } .g4s-comment-form { grid-template-columns: minmax(0, 1fr); gap: 13px; } .g4s-comment-form .comment-form-author, .g4s-comment-form .comment-form-email { grid-column: 1 / -1; } .g4s-comments textarea { min-height: 145px; } .g4s-comments .comment-list .children { padding-inline-start: 18px; } .g4s-comment__article { padding: 15px; } } @media (max-width: 720px) { .g4s-footer__panel { border-radius: 14px; } .g4s-footer__main { grid-template-columns: minmax(0, 1fr); padding: 6px 18px; } .g4s-footer__main--sections-3 .g4s-footer__identity { grid-column: auto; padding-bottom: 0; margin-bottom: 0; border-bottom: 0; } .g4s-footer__main > * { padding: 17px 0; } .g4s-footer__main > * + * { border-top: 1px solid var(--g4s-footer-line); } .g4s-footer__main > * + *::before { display: none; } .g4s-footer__identity, .g4s-footer__social { align-items: center; text-align: center; } .g4s-footer__identity p { max-width: 270px; margin: 10px auto 0; text-align: center; } .g4s-logo-link--footer { width: auto; max-width: 100%; margin-inline: auto; } .g4s-logo-link--footer .g4s-logo { max-width: min(var(--g4s-logo-width), 175px); max-height: 40px; } .g4s-footer__navigation { width: 100%; } .g4s-footer-links, .g4s-footer__main--sections-1 .g4s-footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; width: min(100%, 320px); margin-inline: auto; } .g4s-footer-links li { padding-inline: 0; } .g4s-social-links--footer, .g4s-footer__main--sections-1 .g4s-social-links--footer { justify-content: center; margin-inline: auto; } .g4s-footer__bottom, .g4s-footer__bottom--with-pages { flex-direction: column; justify-content: center; min-height: 44px; gap: 8px; padding: 12px 18px; text-align: center; } .g4s-footer__pages ul { justify-content: center; } } @media (max-width: 480px) { .g4s-search-toggle { display: none; } .g4s-mobile-menu-search { display: block; padding: 12px 14px; border-bottom: 1px solid var(--g4s-line); } .g4s-mobile-menu-search .g4s-search-form input { height: 40px; } .g4s-mobile-menu-search .g4s-search-form button { min-height: 40px; padding-inline: 13px; } .g4s-header__live, .g4s-header--has-social .g4s-header__live { flex-direction: column; justify-content: center; width: 44px; min-height: 52px; gap: 3px; padding: 1px 0 0; border-color: transparent; border-radius: 10px; font-size: 9px; line-height: 1; } .g4s-header__live:hover, .g4s-header__live:focus-visible, .g4s-header--has-social .g4s-header__live:hover, .g4s-header--has-social .g4s-header__live:focus-visible { border-color: transparent; } .g4s-header__live-icon { width: 30px; height: 30px; border: 1px solid color-mix(in srgb, var(--g4s-live-ui) 28%, var(--g4s-surface)); border-radius: 50%; } .g4s-header__live-label { font-size: 9px; font-weight: 800; line-height: 1; } .g4s-footer__bottom { padding-top: 12px; padding-bottom: 12px; } } @media (max-width: 390px) { .g4s-container { width: min(calc(100% - 24px), var(--g4s-container)); } .g4s-ad-slot--contained.g4s-container { width: min(calc(100% - 16px), var(--g4s-container)); } .g4s-branding .custom-logo, .g4s-header--sticky-compact.is-sticky .g4s-branding .custom-logo { max-width: min(var(--g4s-logo-width), 128px); } .g4s-mobile-menu-social { padding: 11px 12px; } .g4s-mobile-menu-social__label { display: none; } .g4s-mobile-menu-social .g4s-social-links { gap: 4px; } .g4s-lead-story { min-height: 350px; } .g4s-hero-magazine__feature-content h2 { font-size: 22px; } .g4s-hero-magazine__list .g4s-post-row { grid-template-columns: 104px minmax(0, 1fr); gap: 11px; } .g4s-card-grid { gap: 16px 11px; } .g4s-archive-grid, .g4s-content-layout--no-sidebar .g4s-archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 11px; } .g4s-card__title { font-size: 13px; } .g4s-article__header h1 { font-size: 27px; line-height: 1.42; } .g4s-article-share__label { width: 100%; } .g4s-related-posts .g4s-card { grid-template-columns: 104px minmax(0, 1fr); gap: 11px; } } @media (max-width: 340px) { .g4s-branding .custom-logo, .g4s-header--sticky-compact.is-sticky .g4s-branding .custom-logo { max-width: min(var(--g4s-logo-width), 118px); } } @media screen and (max-width: 782px) { body.admin-bar .g4s-header--sticky-standard, body.admin-bar .g4s-header--sticky-compact { top: 46px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* Back to top */ .g4s-back-to-top { position: fixed; z-index: 29; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); display: grid; width: 46px; height: 46px; padding: 0; place-items: center; border: 1px solid color-mix(in srgb, var(--g4s-accent-ui) 72%, var(--g4s-line)); border-radius: 50%; background: var(--g4s-accent-ui); color: var(--g4s-on-accent); box-shadow: 0 10px 25px color-mix(in srgb, var(--g4s-shadow) 50%, transparent); cursor: pointer; transition: transform .18s ease, filter .18s ease, box-shadow .18s ease; } .g4s-back-to-top--right { right: 18px; } .g4s-back-to-top--left { left: 18px; } .g4s-back-to-top:hover { filter: brightness(.96); box-shadow: 0 13px 28px color-mix(in srgb, var(--g4s-shadow) 58%, transparent); transform: translateY(-2px); } .g4s-back-to-top:focus-visible { outline: 3px solid color-mix(in srgb, var(--g4s-accent-ui) 32%, transparent); outline-offset: 3px; } .g4s-back-to-top svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.25; } .g4s-back-to-top[hidden] { display: none; } @media (max-width: 700px) { .g4s-back-to-top { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); width: 42px; height: 42px; } .g4s-back-to-top--right { right: 14px; } .g4s-back-to-top--left { left: 14px; } } /* Lightweight native contact form */ .g4s-contact-form { max-width: 760px; padding: clamp(22px, 4vw, 34px); margin: 42px auto 0; border: 1px solid var(--g4s-line); border-radius: calc(var(--g4s-radius) + 2px); background: linear-gradient(145deg, var(--g4s-surface-elevated), color-mix(in srgb, var(--g4s-subtle) 46%, var(--g4s-surface-elevated))); box-shadow: 0 16px 40px color-mix(in srgb, var(--g4s-shadow) 34%, transparent); } .g4s-contact-form__head { padding-bottom: 22px; margin-bottom: 23px; border-bottom: 1px solid var(--g4s-line); } .g4s-contact-form__head > span { display: flex; align-items: center; gap: 8px; color: var(--g4s-accent-ui); font-size: 11px; font-weight: 800; letter-spacing: .04em; } .g4s-contact-form__head > span::before { width: 20px; height: 2px; border-radius: 999px; background: currentColor; content: ""; } .g4s-contact-form__head h2 { margin: 6px 0 5px; color: var(--g4s-heading); font-size: clamp(22px, 3vw, 28px); line-height: 1.4; } .g4s-contact-form__head p { margin: 0; color: var(--g4s-muted); font-size: 13px; line-height: 1.8; } .g4s-contact-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; } .g4s-contact-field { min-width: 0; } .g4s-contact-field--full { grid-column: 1 / -1; } .g4s-contact-field label { display: block; margin-bottom: 7px; color: var(--g4s-heading); font-size: 13px; font-weight: 800; } .g4s-contact-field input, .g4s-contact-field textarea { display: block; width: 100%; border: 1px solid var(--g4s-field-border); border-radius: 10px; outline: 0; background: var(--g4s-surface); color: var(--g4s-text); font: inherit; font-size: 14px; line-height: 1.65; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; } .g4s-contact-field input { min-height: 46px; padding: 9px 12px; } .g4s-contact-field textarea { min-height: 160px; padding: 12px; resize: vertical; } .g4s-contact-field input:focus, .g4s-contact-field textarea:focus { border-color: var(--g4s-accent-ui); box-shadow: 0 0 0 3px color-mix(in srgb, var(--g4s-accent-ui) 14%, transparent); } .g4s-contact-field.is-invalid input, .g4s-contact-field.is-invalid textarea { border-color: var(--g4s-live-ui); box-shadow: 0 0 0 3px color-mix(in srgb, var(--g4s-live-ui) 12%, transparent); } .g4s-contact-field__help, .g4s-contact-field__error { margin: 6px 0 0; font-size: 11px; line-height: 1.65; } .g4s-contact-field__help { color: var(--g4s-muted); } .g4s-contact-field__error { min-height: 0; color: var(--g4s-live-ui); font-weight: 700; } .g4s-contact-field__error:empty { display: none; } .g4s-contact-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } .g4s-contact-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 13px 16px; padding-top: 23px; margin-top: 24px; border-top: 1px solid var(--g4s-line); } .g4s-contact-form__submit { min-height: 46px; padding: 0 22px; border: 1px solid var(--g4s-accent-ui); border-radius: 10px; background: var(--g4s-accent-ui); color: var(--g4s-on-accent); font-size: 13px; font-weight: 800; transition: transform .18s ease, filter .18s ease, opacity .18s ease; } .g4s-contact-form__submit:hover:not(:disabled) { filter: brightness(.95); transform: translateY(-1px); } .g4s-contact-form__submit:focus-visible { outline: 3px solid color-mix(in srgb, var(--g4s-accent-ui) 32%, transparent); outline-offset: 2px; } .g4s-contact-form__submit:disabled { cursor: wait; opacity: .72; } .g4s-contact-form__feedback { flex: 1 1 240px; outline: 0; } .g4s-contact-form__feedback:focus-visible { outline: 3px solid color-mix(in srgb, var(--g4s-accent-ui) 32%, transparent); outline-offset: 3px; } .g4s-contact-form__feedback p { padding: 9px 12px; margin: 0; border: 1px solid transparent; border-radius: 9px; font-size: 12px; font-weight: 700; line-height: 1.65; } .g4s-contact-form__feedback .is-success { border-color: color-mix(in srgb, #12b76a 40%, var(--g4s-line)); background: color-mix(in srgb, #12b76a 11%, var(--g4s-surface)); color: color-mix(in srgb, #067647 82%, var(--g4s-heading)); } .g4s-contact-form__feedback .is-error { border-color: color-mix(in srgb, var(--g4s-live-ui) 40%, var(--g4s-line)); background: color-mix(in srgb, var(--g4s-live-ui) 9%, var(--g4s-surface)); color: var(--g4s-live-ui); } @media (max-width: 560px) { .g4s-contact-form { padding: 20px 16px; margin-top: 32px; } .g4s-contact-form__grid { grid-template-columns: 1fr; gap: 15px; } .g4s-contact-field--full { grid-column: auto; } .g4s-contact-form__actions { align-items: stretch; flex-direction: column; } .g4s-contact-form__submit { width: 100%; } .g4s-contact-form__feedback { width: 100%; flex-basis: auto; } }