diff --git a/assets/css/frontend/footer/zibll-shell.css b/assets/css/frontend/footer/zibll-shell.css index 653792d3..92fff7dd 100644 --- a/assets/css/frontend/footer/zibll-shell.css +++ b/assets/css/frontend/footer/zibll-shell.css @@ -1,50 +1,223 @@ /** - * Footer zibll shell dual-class bridge + * Footer — Zibll template_1 shell (list-inline) */ -.footer.site-footer { - position: relative; +.footer { + color: var(--footer-color, var(--color-ink-4)); + background: var(--footer-bg, var(--surface-1)); + padding: 30px; + font-size: 13px; + margin-top: auto; + border-top: 1px solid rgba(255, 255, 255, 0.55); +} + +.footer a:not(.but):not(.focus-color) { + color: var(--footer-color, var(--color-ink-4)); +} + +.footer a:hover { + color: var(--focus-color, var(--color-primary)); +} + +.footer .container-footer { + max-width: calc(var(--mian-max-width, var(--container, 1200px)) + 180px); + margin: 0 auto; width: 100%; } -.footer .container-footer, -.footer .container-fluid.container-footer { - width: 100%; - max-width: var(--container, 1200px); - margin-left: auto; - margin-right: auto; - padding-left: 15px; - padding-right: 15px; +.footer .list-inline { + display: flex; + flex-wrap: wrap; + align-items: flex-start; + justify-content: space-between; + list-style: none; + margin: 0 0 12px; + padding: 0; + gap: 10px 0; } -.footer .footer-logo { - max-height: 48px; +.footer .list-inline > li { + margin: 5px 15px; + vertical-align: top; + display: inline-block; +} + +@media (min-width: 992px) { + .footer .list-inline > li + li + li { + margin-left: auto; + } +} + +.footer .footer-logo, +.footer .footer-logo-img, +.footer a.footer-logo img { + height: 40px; width: auto; + max-width: 180px; + display: inline-block; + vertical-align: middle; +} + +.footer .site-footer__logo--night { + display: none; +} + +html.dark .footer .site-footer__logo--day, +body.dark-theme .footer .site-footer__logo--day { + display: none; +} + +html.dark .footer .site-footer__logo--night, +body.dark-theme .footer .site-footer__logo--night { display: inline-block; } -.footer .footer-contact a { - display: inline-flex; - align-items: center; - justify-content: center; - margin-right: 10px; +.footer .title-h-left, +.footer .site-footer__title { + margin: 8px 0 10px; + font-size: 15px; + font-weight: 700; + color: var(--color-ink, #333); } -.footer .fcode-links a { - display: inline-block; - margin-right: 12px; - margin-bottom: 6px; -} - -.footer .footer-conter { - margin: 0; +.footer .footer-muted, +.footer .em09 { + font-size: 0.92em; + color: var(--muted-2-color, var(--color-ink-4)); line-height: 1.7; } -/* Keep float-right above content, zibll-like */ +.footer .fcode-links { + margin: 0 0 8px; + line-height: 1.9; +} + +.footer .fcode-links > a + a:before { + content: ""; + width: 4px; + height: 4px; + margin: 0 0.5em; + border-radius: 50%; + display: inline-block; + vertical-align: middle; + background: var(--main-color, var(--color-ink-2)); + opacity: 0.3; + vertical-align: 0.2em; +} + +.footer .footer-contact { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 4px; + margin-top: 10px; +} + +.footer .footer-contact > a, +.footer .footer-contact__item { + font-size: 18px; + margin: 5px; + width: 35px; + height: 35px; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 50%; + background: var(--surface-2, #f3f3f3); + color: var(--footer-color, var(--color-ink-3)); + text-decoration: none; + transition: color 0.15s ease, background 0.15s ease, transform 0.15s ease; +} + +.footer .footer-contact > a:hover, +.footer .footer-contact__item:hover { + color: #fff; + background: var(--focus-color, var(--color-primary)); + transform: translateY(-1px); +} + +.footer .footer-wechat-img { + display: none; + position: absolute; + width: 140px; + bottom: 90%; + left: -55px; + padding-bottom: 12px; + z-index: 5; +} + +.footer .hover-show { + position: relative; +} + +.footer .hover-show:hover .footer-wechat-img, +.footer .hover-show:focus .footer-wechat-img { + display: block; +} + +.footer .footer-wechat-img img { + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + border-radius: 4px; + width: 100%; + height: auto; + background: #fff; +} + +.footer .footer-miniimg { + width: 90px; + margin: 0 10px; + text-align: center; + vertical-align: text-top; + display: inline-block; +} + +.footer .footer-miniimg img { + width: 90px; + height: 90px; + object-fit: cover; + border-radius: 4px; + background: var(--surface-2); +} + +.footer .footer-conter, +.footer .site-footer__copyright { + margin: 8px 0 0; + line-height: 1.8; + color: var(--footer-color, var(--color-ink-4)); + font-size: 13px; + text-align: left; +} + +.footer .footer-conter a:hover { + color: var(--focus-color, var(--color-primary)); +} + +.footer .mt10 { + margin-top: 10px; +} + #float-right-btns.float-right, .float-right { position: fixed; right: 16px; bottom: 80px; z-index: 90; + display: flex; + flex-direction: column; + gap: 8px; +} + +@media (max-width: 767px) { + .footer { + padding: 24px 16px 28px; + } + + .footer .list-inline { + display: block; + } + + .footer .list-inline > li { + display: block; + margin: 12px 0; + max-width: none !important; + } } diff --git a/assets/css/frontend/nav/base.css b/assets/css/frontend/nav/base.css index 0c1fa63b..9000f37a 100644 --- a/assets/css/frontend/nav/base.css +++ b/assets/css/frontend/nav/base.css @@ -1,3 +1,14 @@ +/* Zibll body.nav-fixed: reserve header space then pull hero under nav */ +body.nav-fixed { + padding-top: var(--nav-height, 60px); +} + +body.nav-fixed .header-slider-container, +body.nav-fixed .header-components.slide-header, +body.nav-fixed .header-components-container { + margin-top: calc(var(--nav-height, 60px) * -1); +} + /* ============================================================ * AKSRT Navigation — Zibll-aligned * @@ -331,3 +342,125 @@ ul.nav-desktop .sub-menu .sub-menu { margin: 0; } + + +/* ============================================================ + * Zibll .header.show-slide — transparent gradient over hero + * ============================================================ */ +.header.show-slide { + --header-bg: linear-gradient(0, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0.1) 80%); + --header-color: #fff; + -webkit-backdrop-filter: unset; + backdrop-filter: unset; +} + +body.nav-fixed .header.show-slide { + position: absolute; + top: 0; + left: 0; + right: 0; + width: 100%; + z-index: 30; + background: transparent; + box-shadow: none; + border: 0; +} + +.header.show-slide .navbar.navbar-top, +.header.show-slide .site-nav { + background: var(--header-bg, transparent); + border-bottom-color: transparent; + box-shadow: none; + color: var(--header-color, #fff); + backdrop-filter: none; + -webkit-backdrop-filter: none; +} + +.header.show-slide .site-nav:not(.is-scrolled) a, +.header.show-slide .site-nav:not(.is-scrolled) .icon-btn, +.header.show-slide .site-nav:not(.is-scrolled) .site-brand__name { + color: #fff; +} + +.header.show-slide .site-nav.is-scrolled, +.site-nav.is-scrolled { + background: var(--blur-bg); + color: var(--header-color, var(--color-ink-2)); + border-bottom-color: rgba(255, 255, 255, 0.45); + backdrop-filter: saturate(5) blur(20px); + -webkit-backdrop-filter: saturate(5) blur(20px); + box-shadow: 0 4px 10px var(--main-shadow, rgba(116, 116, 116, 0.08)); +} + +.navbar.navbar-top { + margin: 0; + border-radius: 0 !important; + font-size: 15px; +} + +.container-header, +.container-footer { + max-width: calc(var(--mian-max-width, var(--container, 1200px)) + 180px); + margin-left: auto; + margin-right: auto; + width: 100%; + padding-left: 15px; + padding-right: 15px; +} + +.navbar-top .navbar-brand { + padding: 7px 10px; +} + +.navbar-logo > img, +.navbar-logo .site-brand__logo-img, +.site-brand__logo-img { + height: 36px !important; + width: auto !important; + max-width: 180px; + padding: 0; + object-fit: contain; +} + +.navbar-top .navbar-nav, +.navbar-top ul.nav-desktop { + margin-left: 20px; + margin-right: 20px; + display: flex; + align-items: center; + gap: 0; + list-style: none; + padding: 0; +} + +.navbar-top .navbar-nav > li > a, +.navbar-top ul.nav-desktop > li > a { + padding-left: 10px; + padding-right: 10px; + border-radius: 4px; + display: inline-flex !important; + align-items: center; + min-height: 36px; + font-size: 15px; +} + +.navbar-top .site-nav__row { + display: flex; + align-items: center; + width: 100%; + min-height: var(--nav-height, 60px); +} + +.navbar-top .nav-actions { + margin-left: auto; + display: flex; + align-items: center; + gap: 8px; +} + +.scroll-down.nav-fixed .header.scroll-down-hide, +body.scroll-down.nav-fixed .header.scroll-down-hide { + transform: translate3d(0, -105%, 0); + -webkit-backdrop-filter: none; + backdrop-filter: none; +} diff --git a/footer.php b/footer.php index d42f5715..f66c388d 100644 --- a/footer.php +++ b/footer.php @@ -105,200 +105,181 @@ $render_link_url = function ($raw) { +