/* assets/css/site-chrome.css * The site's one header and one footer (includes/site_chrome/header_bar.php and * footer_bar.php), on every desktop page: header.php pages, the homepage, the TV * and kino pages, and news.php. Direction "refined navy": the site's navy kept * as the ground, drawn quieter — a slimmer bar, a wordmark beside the logo, a * segmented language switch, round icon buttons, one red call to action. * * Loaded right after style.css (header.php) or on its own (news.php), so it is * self-sufficient: it declares its fonts and sets every property it relies on. * style.css still carries older header layers with !important; the rules below * out-rank them by specificity, never by source order alone. * * Sub-brands keep repainting the chrome through the classes they already target * (.navbar, .footer, .nav-link): body.gnoir-page (gallery) and body.hf-page * (heroes) out-rank this file on purpose. * * Geometry: the bar is 72px from 992px up and 64px below. style.css pads * by 56px from 992px up; pages that reserve their own space keep doing so. */ @font-face { font-family: 'FiraGO'; src: url('../fonts/firago-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'FiraGO'; src: url('../fonts/firago-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'BPG Nino Mtavruli'; src: url('../fonts/bpg_nino_mtavruli_normal.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } :root { --sc-h: 64px; --sc-navy: #15305c; /* bar ground */ --sc-navy-deep: #112850; /* bar once scrolled */ --sc-ink: #0c1830; /* footer ground */ --sc-line: rgba(255, 255, 255, 0.10); --sc-wash: rgba(255, 255, 255, 0.08); --sc-wash-2: rgba(255, 255, 255, 0.14); --sc-fg: #ffffff; --sc-fg-2: #c3cee0; /* 8.3:1 on the bar, 11:1 on the footer */ --sc-fg-3: #93a3bd; /* 5.0:1 on the bar, 6.8:1 on the footer */ --sc-red: #b40000; /* the call to action; white on it 7.14:1 */ --sc-red-hover: #c90000; --sc-red-hi: #ff6b64; /* red drawn on navy: indicator, dot (4.8:1) */ --sc-text: 'FiraGO', 'Noto Sans Georgian', system-ui, sans-serif; --sc-display: 'BPG Nino Mtavruli', 'FiraGO', 'Noto Sans Georgian', sans-serif; --sc-ease: cubic-bezier(0.16, 1, 0.3, 1); } @media (min-width: 992px) { :root { --sc-h: 72px; } } :root { --sc-gutter: 24px; } @media (max-width: 575.98px) { :root { --sc-gutter: 16px; } } /* ========================================================================== Header ========================================================================== */ header.site-header { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 1030 !important; min-height: var(--sc-h); padding: 0 !important; background: var(--sc-navy) !important; border-bottom: 1px solid var(--sc-line) !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; font-family: var(--sc-text); transition: background-color 0.28s var(--sc-ease), box-shadow 0.28s var(--sc-ease) !important; } header.site-header.scrolled { background: var(--sc-navy-deep) !important; box-shadow: 0 10px 28px -16px rgba(6, 16, 36, 0.75) !important; } /* The chrome keeps its own measure: style.css makes every .container 100vw wide with overflow-x hidden, which pinned the logo and the call to action to the screen edges and would clip the blog card. */ .site-header > .container, .site-footer > .container { width: 100%; max-width: 1240px !important; margin-left: auto; margin-right: auto; padding-left: var(--sc-gutter) !important; padding-right: var(--sc-gutter) !important; overflow: visible !important; } .site-header .site-header__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; min-height: var(--sc-h); } /* Brand: the mark and the wordmark */ .site-brand { display: inline-flex !important; align-items: center; gap: 10px; margin: 0 !important; padding: 0 !important; color: var(--sc-fg) !important; text-decoration: none !important; } .site-brand img { width: 38px !important; height: 38px !important; object-fit: contain; transform: none !important; } .site-brand__word { display: flex; flex-direction: column; line-height: 1.1; } .site-brand__word b { font-family: var(--sc-text); font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; color: var(--sc-fg); } .site-brand__dot { color: var(--sc-red-hi); } .site-brand__word small { margin-top: 3px; font-family: var(--sc-text); font-size: 0.6875rem; font-weight: 400; color: var(--sc-fg-3); white-space: nowrap; } /* Main navigation */ .site-header .site-nav { align-items: center; gap: 2px !important; } .site-header .site-nav .nav-link { position: relative; padding: 9px 12px !important; border-radius: 999px !important; background: transparent !important; color: var(--sc-fg-2) !important; font-family: var(--sc-display) !important; font-size: 0.875rem !important; font-weight: 400 !important; font-synthesis: none; letter-spacing: 0.02em; white-space: nowrap !important; transition: color 0.18s var(--sc-ease), background-color 0.18s var(--sc-ease) !important; } .site-header .site-nav .nav-link:hover, .site-header .site-nav .nav-link:focus-visible { color: var(--sc-fg) !important; background: var(--sc-wash) !important; } .site-header .site-nav .nav-link.active { color: var(--sc-fg) !important; background: transparent !important; } .site-header .site-nav .nav-link::after { content: '' !important; position: absolute !important; left: 50% !important; bottom: 3px !important; width: 20px !important; height: 2px !important; border-radius: 2px; background: var(--sc-red-hi) !important; transform: translateX(-50%) scaleX(0) !important; transition: transform 0.24s var(--sc-ease) !important; } .site-header .site-nav .nav-link.active::after { transform: translateX(-50%) scaleX(1) !important; } /* Actions: blog, language, icon buttons, the one red call to action */ .site-header .site-actions { flex-direction: row !important; flex-wrap: wrap; align-items: center; gap: 8px !important; margin: 0; } .site-header .site-actions__item { display: flex; align-items: center; } .site-icon-btn { position: relative; display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; width: 38px; height: 38px; padding: 0 !important; border: 0; border-radius: 50% !important; background: var(--sc-wash) !important; color: var(--sc-fg) !important; font-size: 0.875rem; text-decoration: none !important; transition: background-color 0.18s var(--sc-ease) !important; } .site-icon-btn:hover, .site-icon-btn:focus-visible, .site-icon-btn[aria-expanded="true"] { background: var(--sc-wash-2) !important; color: var(--sc-fg) !important; } .site-icon-btn::after { display: none !important; } .site-icon-btn__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .site-header .site-badge { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--sc-red); box-shadow: 0 0 0 2px var(--sc-navy); color: #fff; font-family: var(--sc-text); font-size: 0.6875rem; font-weight: 700; line-height: 18px; text-align: center; } /* Language: a segmented control, the active language a light chip */ .site-lang { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: var(--sc-wash); box-shadow: inset 0 0 0 1px var(--sc-line); } .site-lang__opt { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 30px; padding: 0 8px; border-radius: 999px; color: var(--sc-fg-2) !important; font-family: var(--sc-text); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-decoration: none !important; transition: color 0.18s var(--sc-ease), background-color 0.18s var(--sc-ease); } .site-lang__opt:hover { color: var(--sc-fg) !important; background: var(--sc-wash); } .site-lang__opt.is-active { background: var(--sc-fg); color: var(--sc-navy) !important; } /* Blog (kartuli.news): a quiet pill that opens its card */ .site-header .site-blog { position: relative; z-index: 1050; } .site-header .site-blog .site-blog__trigger { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 12px; border: 0; border-radius: 999px; background: var(--sc-wash); box-shadow: none; color: var(--sc-fg); font-family: var(--sc-text); font-size: 0.8125rem; font-weight: 700; cursor: pointer; transition: background-color 0.18s var(--sc-ease); } .site-header .site-blog.is-open .site-blog__trigger, .site-header .site-blog:hover .site-blog__trigger { border: 0; background: var(--sc-wash-2); box-shadow: none; } .site-blog__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sc-red-hi); } .site-blog__arrow { color: var(--sc-fg-3); font-size: 0.875rem; line-height: 1; transition: transform 0.24s var(--sc-ease), color 0.18s var(--sc-ease); } .site-header .site-blog.is-open .site-blog__arrow, .site-header .site-blog:hover .site-blog__arrow { color: var(--sc-fg); transform: translate(1px, -1px); } /* A hover bridge, so the pointer can travel from the pill to its card */ .site-header .site-blog::after { content: ''; position: absolute; top: 100%; left: 0; width: 100%; height: 14px; } .site-header .site-blog .site-blog__card { position: absolute; z-index: 120; top: calc(100% + 12px); left: auto; right: 0; display: grid; gap: 4px; width: 250px; padding: 16px 18px; border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; box-shadow: 0 18px 40px -18px rgba(6, 16, 36, 0.55); color: #1a202c; text-decoration: none !important; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px); transform-origin: top right; transition: opacity 0.18s var(--sc-ease), transform 0.24s var(--sc-ease), visibility 0.18s; } .site-header .site-blog.is-open .site-blog__card { opacity: 1; visibility: visible; pointer-events: auto; transform: none; } @media (min-width: 992px) { .site-header .site-blog:hover .site-blog__card { opacity: 1; visibility: visible; pointer-events: auto; transform: none; } } .site-header .site-blog .site-blog__card::before { display: none; } .site-header .site-blog .kw-network-card-kicker { color: #5a6475; font-family: var(--sc-text); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .site-header .site-blog .site-blog__card strong { display: block; color: var(--sc-navy); font-family: var(--sc-text); font-size: 1.125rem; font-weight: 700; line-height: 1.25; transform: none; transition: color 0.18s var(--sc-ease); } .site-header .site-blog .site-blog__card:hover strong { color: var(--sc-red); transform: none; } .site-header .site-blog .kw-network-card-note { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: #5a6475; font-family: var(--sc-text); font-size: 0.75rem; font-weight: 400; } .site-header .site-blog .kw-network-card-note span { font-size: 1rem; line-height: 1; } /* The call to action: login / profile */ .site-header .site-actions .site-cta { display: inline-flex !important; align-items: center !important; gap: 8px; height: 38px; margin: 0 !important; padding: 0 18px !important; border: 0 !important; border-radius: 999px !important; background: var(--sc-red) !important; box-shadow: none !important; color: #fff !important; font-family: var(--sc-display) !important; font-size: 0.875rem !important; font-weight: 400 !important; font-synthesis: none; letter-spacing: 0.02em; text-decoration: none !important; transform: none !important; transition: background-color 0.18s var(--sc-ease) !important; } .site-header .site-actions .site-cta:hover, .site-header .site-actions .site-cta:focus-visible { background: var(--sc-red-hover) !important; box-shadow: none !important; color: #fff !important; transform: none !important; } .site-header .site-actions .site-cta i { font-size: 1rem; } /* Keyboard focus: one visible ring on every control in the bar */ .site-header a:focus-visible, .site-header button:focus-visible { outline: 2px solid var(--sc-red-hi) !important; outline-offset: 2px; box-shadow: none !important; } /* Notifications dropdown on the light menu surface */ .site-header .notification-dropdown .dropdown-menu { width: 340px; max-width: 90vw; padding: 6px 0; border: 1px solid #e2e8f0 !important; border-radius: 14px; box-shadow: 0 18px 40px -18px rgba(6, 16, 36, 0.45) !important; font-family: var(--sc-text); } /* Menu toggler (phones and tablets) */ .site-header .site-header__toggler { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: auto; padding: 0 !important; border: 0 !important; border-radius: 12px !important; background: var(--sc-wash) !important; color: var(--sc-fg) !important; font-size: 1.125rem; } .site-header .site-header__toggler:focus { box-shadow: none !important; } @media (max-width: 991.98px) { .site-header .site-header__toggler { display: inline-flex; } .site-brand__word small { display: none; } /* style.css opens this as an absolute white panel; here it unfolds inside the navy bar, in flow */ .site-header .navbar-collapse { position: static; top: auto; left: auto; width: auto; flex-basis: 100%; max-height: calc(100dvh - var(--sc-h)); overflow-y: auto; margin: 0 calc(-1 * var(--sc-gutter)); padding: 0 var(--sc-gutter); border-top: 0; background: transparent; box-shadow: none; } .site-header .navbar-collapse.show, .site-header .navbar-collapse.collapsing { border-top: 1px solid var(--sc-line); } .site-header .site-nav { padding: 10px 0 6px; align-items: stretch; } .site-header .site-nav .nav-link { padding: 12px 14px !important; border-radius: 12px !important; font-size: 0.9375rem !important; } .site-header .site-nav .nav-link.active { background: var(--sc-wash) !important; } .site-header .site-nav .nav-link::after { left: 0 !important; top: 50% !important; bottom: auto !important; width: 3px !important; height: 18px !important; transform: translateY(-50%) scaleY(0) !important; } .site-header .site-nav .nav-link.active::after { transform: translateY(-50%) scaleY(1) !important; } .site-header .site-actions { padding: 12px 0 16px; border-top: 1px solid var(--sc-line); } .site-header .site-actions__item:has(.site-cta) { flex: 1 1 100%; } .site-header .site-actions .site-cta { width: 100%; justify-content: center; height: 46px; } .site-header .site-blog .site-blog__card { left: 0; right: auto; transform-origin: top left; } } /* ========================================================================== Footer ========================================================================== */ .site-footer.footer { position: relative; margin-top: 0; padding: 64px 0 0 !important; background: var(--sc-ink); color: var(--sc-fg-2); font-family: var(--sc-text); font-size: 0.9375rem; line-height: 1.6; } .site-footer .site-footer__ad:empty { display: none; } .site-footer .site-footer__ad { margin-bottom: 48px; } .site-footer .site-footer__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1.35fr); gap: 40px 48px; padding-bottom: 48px; } .site-footer .site-brand--footer .site-brand__word small { display: block; } .site-footer .site-footer__about { max-width: 36ch; margin: 18px 0 0; color: var(--sc-fg-3); font-size: 0.875rem; line-height: 1.7; } .site-footer h5 { margin: 0 0 16px; padding: 0; border: 0; color: var(--sc-fg); font-family: var(--sc-display); font-size: 0.9375rem; font-weight: 400; font-synthesis: none; letter-spacing: 0.02em; text-transform: none; } .site-footer .site-footer__subhead { margin-top: 28px; } .site-footer ul { margin: 0; padding: 0; list-style: none; } .site-footer ul li a { display: inline-block; padding: 5px 0; color: var(--sc-fg-2); text-decoration: none; transition: color 0.18s var(--sc-ease); } .site-footer ul li a:hover, .site-footer ul li a:focus-visible { padding-left: 0; color: var(--sc-fg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } /* Social: round, quiet; the brand's white on hover */ .site-footer .site-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } .site-footer .site-social a { display: inline-flex !important; align-items: center; justify-content: center; width: 40px !important; height: 40px !important; margin: 0 !important; border-radius: 50% !important; background: var(--sc-wash) !important; color: var(--sc-fg-2) !important; font-size: 1rem !important; transform: none !important; transition: background-color 0.18s var(--sc-ease), color 0.18s var(--sc-ease) !important; } .site-footer .site-social a:hover, .site-footer .site-social a:focus-visible { background: var(--sc-fg) !important; color: var(--sc-ink) !important; transform: none !important; } /* Newsletter: one pill, the field and its button inside it */ .site-footer .site-footer__news p { max-width: none; margin: 0 0 16px; color: var(--sc-fg-3); font-size: 0.875rem; } .site-footer .site-newsletter { display: flex; align-items: center; gap: 6px; padding: 4px; border: 1px solid var(--sc-wash-2); border-radius: 999px; background: rgba(255, 255, 255, 0.05); transition: border-color 0.18s var(--sc-ease), box-shadow 0.18s var(--sc-ease); } .site-footer .site-newsletter:focus-within { border-color: var(--sc-red-hi); box-shadow: 0 0 0 3px rgba(255, 107, 100, 0.22); } .site-footer .site-newsletter .form-control { flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 14px; border: 0 !important; border-radius: 999px; background: transparent !important; box-shadow: none !important; color: var(--sc-fg) !important; font-family: var(--sc-text); font-size: 0.875rem; } .site-footer .site-newsletter .form-control::placeholder { color: var(--sc-fg-3); opacity: 1; } .site-footer .site-newsletter .btn { flex: none; height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--sc-red); box-shadow: none; color: #fff; font-family: var(--sc-display); font-size: 0.8125rem; font-weight: 400; font-synthesis: none; letter-spacing: 0.02em; text-transform: none; transform: none; } .site-footer .site-newsletter .btn:hover, .site-footer .site-newsletter .btn:focus-visible { background: var(--sc-red-hover); color: #fff; box-shadow: none; transform: none; } .site-footer #newsletter-message { margin-top: 10px; color: var(--sc-fg-2); font-size: 0.8125rem; } .site-footer #newsletter-message.text-success { color: #86e0ad !important; } .site-footer #newsletter-message.text-danger { color: #ff9d97 !important; } /* The bottom band: copyright left, legal links right */ .site-footer .site-footer__bottom.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin: 0; padding: 22px 0 26px; border-top: 1px solid var(--sc-line); color: var(--sc-fg-3); font-size: 0.8125rem; text-align: left; } .site-footer .site-footer__copy { max-width: none; margin: 0; } .site-footer .site-footer__legal { display: flex; flex-wrap: wrap; gap: 6px 20px; } .site-footer .site-footer__legal a { color: var(--sc-fg-3); text-decoration: none; } .site-footer .site-footer__legal a:hover, .site-footer .site-footer__legal a:focus-visible { color: var(--sc-fg); text-decoration: underline; text-underline-offset: 3px; } .site-footer .site-footer__counter { flex-basis: 100%; margin: 0; } .site-footer .site-footer__counter:empty { display: none; } .site-footer a:focus-visible, .site-footer button:focus-visible { outline: 2px solid var(--sc-red-hi); outline-offset: 2px; } @media (max-width: 991.98px) { .site-footer .site-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px 32px; } .site-footer .site-footer__brand, .site-footer .site-footer__news { grid-column: 1 / -1; } } @media (max-width: 575.98px) { .site-footer.footer { padding-top: 48px !important; } .site-footer .site-footer__grid { gap: 32px 20px; padding-bottom: 36px; } .site-footer .site-footer__bottom.footer-bottom { flex-direction: column; align-items: flex-start; } } /* ========================================================================== Back to top (footer.php): part of the chrome, drawn in its navy. main.js / footer.php show and hide it with an inline display + opacity. ========================================================================== */ a.back-to-top { position: fixed; left: 24px; bottom: 24px; z-index: 2000; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--sc-navy) !important; box-shadow: 0 10px 24px -10px rgba(6, 16, 36, 0.6); color: #fff !important; font-size: 1rem; text-decoration: none !important; transition: opacity 0.3s ease, background-color 0.18s var(--sc-ease); } a.back-to-top:hover, a.back-to-top:focus-visible { background: var(--sc-navy-deep) !important; color: #fff !important; transform: none; box-shadow: 0 10px 24px -10px rgba(6, 16, 36, 0.6); } a.back-to-top:focus-visible { outline: 2px solid var(--sc-red-hi); outline-offset: 2px; } /* Phones with the bottom tab bar: sit above it */ body.m-view a.back-to-top { bottom: calc(var(--m-bottomnav-h, 60px) + env(safe-area-inset-bottom, 0px) + 14px); } /* ========================================================================== The homepage: its ticker sits right under the bar, not beneath it ========================================================================== */ @media (min-width: 992px) { body:not(.m-view) main > .khub { padding-top: calc(var(--sc-h) - 56px) !important; } } @media (prefers-reduced-motion: reduce) { header.site-header, .site-header *, .site-footer * { transition-duration: 0.01ms !important; } }