kate522
188611b075
Align banner s-desc caption/scale-height, hero search pill and -40px cards, modal colorful header/spring scale; remove white/pink card borders and hover lifts across mainline surfaces.
455 lines
12 KiB
CSS
455 lines
12 KiB
CSS
/* ============================================================
|
||
AKSRT – Floating UI & Site Footer
|
||
============================================================
|
||
Covers:
|
||
• .floating-toolbar – fixed action buttons (scroll-top,
|
||
font-size, sidebar toggle)
|
||
• .mobile-nav-overlay – full-screen drawer nav (mobile)
|
||
• .site-footer – footer grid + bottom bar
|
||
============================================================ */
|
||
|
||
|
||
/* ═══════════════════════════════════════════════════════════
|
||
FLOATING TOOLBAR
|
||
═══════════════════════════════════════════════════════════ */
|
||
|
||
.floating-toolbar {
|
||
position: fixed;
|
||
right: var(--space-5);
|
||
bottom: var(--space-8);
|
||
z-index: var(--z-floating);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-2);
|
||
}
|
||
|
||
/* ── Individual button ────────────────────────────────────── */
|
||
.floating-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 40px;
|
||
height: 40px;
|
||
background: var(--blur-bg);
|
||
border: none;
|
||
border-radius: var(--radius-full);
|
||
box-shadow: var(--shadow-sm);
|
||
backdrop-filter: saturate(2) blur(12px);
|
||
-webkit-backdrop-filter: saturate(2) blur(12px);
|
||
cursor: pointer;
|
||
color: var(--color-ink-4);
|
||
transition:
|
||
background var(--transition-fast),
|
||
color var(--transition-fast),
|
||
box-shadow var(--transition-fast),
|
||
transform var(--transition-fast);
|
||
padding: 0;
|
||
}
|
||
|
||
.floating-btn svg {
|
||
width: 18px;
|
||
height: 18px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.floating-btn:hover,
|
||
.floating-btn:focus-visible {
|
||
background: var(--color-primary);
|
||
color: #fff;
|
||
border-color: var(--color-primary);
|
||
box-shadow: var(--shadow-lg);
|
||
transform: none;
|
||
}
|
||
|
||
.floating-btn:active {
|
||
transform: translateY(0);
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.floating-btn:focus-visible {
|
||
outline: 2px solid var(--color-primary);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
/* ── Scroll-to-top: hide until page is scrolled ───────────── */
|
||
.floating-btn--top {
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
transition:
|
||
opacity var(--transition-base),
|
||
background var(--transition-fast),
|
||
color var(--transition-fast),
|
||
box-shadow var(--transition-fast),
|
||
transform var(--transition-fast);
|
||
}
|
||
|
||
.floating-btn--top.is-visible {
|
||
opacity: 1;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
/* ── Mobile: smaller toolbar, stacked horizontally ───────── */
|
||
@media (max-width: 767px) {
|
||
.floating-toolbar {
|
||
right: var(--space-4);
|
||
bottom: var(--space-6);
|
||
flex-direction: row; /* horizontal row on mobile */
|
||
}
|
||
|
||
.floating-btn {
|
||
width: 36px;
|
||
height: 36px;
|
||
}
|
||
|
||
.floating-btn svg {
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
}
|
||
|
||
|
||
/* ═══════════════════════════════════════════════════════════
|
||
MOBILE NAV OVERLAY
|
||
═══════════════════════════════════════════════════════════ */
|
||
|
||
.mobile-nav-overlay {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: var(--z-overlay);
|
||
background: rgba(0, 0, 0, 0.45);
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transition:
|
||
opacity var(--transition-base),
|
||
visibility var(--transition-base);
|
||
/* backdrop blur on supporting browsers */
|
||
backdrop-filter: blur(2px);
|
||
-webkit-backdrop-filter: blur(2px);
|
||
}
|
||
|
||
.mobile-nav-overlay.is-open {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
|
||
/* ── Drawer panel ─────────────────────────────────────────── */
|
||
.mobile-nav-drawer {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: min(320px, 85vw);
|
||
height: 100%;
|
||
background: var(--color-surface);
|
||
box-shadow: var(--shadow-xl);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-4);
|
||
padding: var(--space-6);
|
||
overflow-y: auto;
|
||
overscroll-behavior: contain;
|
||
transform: translateX(-100%);
|
||
transition: transform var(--transition-base);
|
||
}
|
||
|
||
.mobile-nav-overlay.is-open .mobile-nav-drawer {
|
||
transform: translateX(0);
|
||
}
|
||
|
||
/* ── Close button ─────────────────────────────────────────── */
|
||
.mobile-nav-close {
|
||
align-self: flex-end;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 36px;
|
||
height: 36px;
|
||
background: var(--surface-page);
|
||
border: 1px solid var(--color-line);
|
||
border-radius: var(--radius-full);
|
||
cursor: pointer;
|
||
color: var(--color-ink-4);
|
||
transition: background var(--transition-fast), color var(--transition-fast);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.mobile-nav-close:hover {
|
||
background: var(--color-danger);
|
||
color: #fff;
|
||
border-color: var(--color-danger);
|
||
}
|
||
|
||
.mobile-nav-close svg {
|
||
width: 18px;
|
||
height: 18px;
|
||
}
|
||
|
||
/* ── Brand ────────────────────────────────────────────────── */
|
||
.mobile-nav-brand {
|
||
padding-bottom: var(--space-4);
|
||
border-bottom: 1px solid var(--color-line);
|
||
}
|
||
|
||
.mobile-nav-brand a {
|
||
font-size: 1.125rem;
|
||
font-weight: 700;
|
||
color: var(--color-ink);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.mobile-nav-brand a:hover {
|
||
color: var(--color-primary);
|
||
}
|
||
|
||
/* ── Nav menu (WordPress-generated ul) ────────────────────── */
|
||
.mobile-nav-menu {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-1);
|
||
}
|
||
|
||
.mobile-nav-menu li {
|
||
list-style: none;
|
||
}
|
||
|
||
.mobile-nav-menu a {
|
||
display: block;
|
||
padding: var(--space-2) var(--space-3);
|
||
font-size: 0.9375rem;
|
||
font-weight: 500;
|
||
color: var(--color-ink-4);
|
||
border-radius: var(--radius-md);
|
||
text-decoration: none;
|
||
transition: background var(--transition-fast), color var(--transition-fast);
|
||
}
|
||
|
||
.mobile-nav-menu a:hover,
|
||
.mobile-nav-menu .current-menu-item > a,
|
||
.mobile-nav-menu .current-page-item > a {
|
||
background: var(--color-primary-light);
|
||
color: var(--color-primary);
|
||
}
|
||
|
||
/* sub-menu indented */
|
||
.mobile-nav-menu .sub-menu {
|
||
padding-left: var(--space-4);
|
||
margin-top: var(--space-1);
|
||
}
|
||
|
||
/* ── Search form ──────────────────────────────────────────── */
|
||
.mobile-nav-search {
|
||
margin-top: auto;
|
||
padding-top: var(--space-4);
|
||
border-top: 1px solid var(--color-line);
|
||
}
|
||
|
||
.mobile-nav-search form {
|
||
display: flex;
|
||
gap: var(--space-2);
|
||
}
|
||
|
||
.mobile-nav-search input[type="search"] {
|
||
flex: 1;
|
||
padding: var(--space-2) var(--space-3);
|
||
border: 1px solid var(--color-line);
|
||
border-radius: var(--radius-md);
|
||
font-size: 0.875rem;
|
||
background: var(--surface-page);
|
||
color: var(--color-ink);
|
||
}
|
||
|
||
.mobile-nav-search input[type="search"]:focus {
|
||
outline: none;
|
||
border-color: var(--color-primary);
|
||
}
|
||
|
||
.mobile-nav-search button[type="submit"] {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: var(--space-2) var(--space-3);
|
||
background: var(--color-primary);
|
||
color: #fff;
|
||
border: none;
|
||
border-radius: var(--radius-md);
|
||
cursor: pointer;
|
||
font-size: 0.875rem;
|
||
transition: background var(--transition-fast);
|
||
}
|
||
|
||
.mobile-nav-search button[type="submit"]:hover {
|
||
background: var(--color-primary-dark);
|
||
}
|
||
|
||
/* ── Only mount overlay on mobile ─────────────────────────── */
|
||
@media (min-width: 769px) {
|
||
.mobile-nav-overlay {
|
||
display: none !important;
|
||
}
|
||
}
|
||
|
||
|
||
/* ═══════════════════════════════════════════════════════════
|
||
SITE FOOTER
|
||
═══════════════════════════════════════════════════════════ */
|
||
|
||
.site-footer {
|
||
margin-top: var(--space-16);
|
||
background: var(--color-surface);
|
||
border-top: 1px solid var(--color-line);
|
||
}
|
||
|
||
.site-footer__inner {
|
||
padding-top: var(--space-12);
|
||
padding-bottom: var(--space-10);
|
||
}
|
||
|
||
/* ── Grid of columns ──────────────────────────────────────── */
|
||
.site-footer__grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||
gap: var(--space-8);
|
||
align-items: start;
|
||
}
|
||
|
||
/* Give the about column a bit more real estate when there's room */
|
||
.site-footer__about {
|
||
grid-column: span 2;
|
||
}
|
||
|
||
@media (max-width: 900px) {
|
||
.site-footer__about {
|
||
grid-column: span 1;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 600px) {
|
||
.site-footer__grid {
|
||
grid-template-columns: 1fr 1fr;
|
||
}
|
||
|
||
.site-footer__about {
|
||
grid-column: 1 / -1;
|
||
}
|
||
}
|
||
|
||
/* ── Column headings ──────────────────────────────────────── */
|
||
.site-footer__heading {
|
||
font-size: 0.8125rem;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.06em;
|
||
color: var(--color-ink-4);
|
||
margin-bottom: var(--space-4);
|
||
}
|
||
|
||
/* ── About description ────────────────────────────────────── */
|
||
.site-footer__desc {
|
||
font-size: 0.875rem;
|
||
color: var(--color-ink-4);
|
||
line-height: 1.65;
|
||
margin-bottom: var(--space-4);
|
||
}
|
||
|
||
/* ── Contact icon row ─────────────────────────────────────── */
|
||
.site-footer__contacts {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--space-2);
|
||
}
|
||
|
||
.site-footer__contacts a {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: var(--radius-full);
|
||
border: 1px solid var(--color-line);
|
||
color: var(--color-ink-4);
|
||
transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
|
||
}
|
||
|
||
.site-footer__contacts a:hover {
|
||
background: var(--color-primary);
|
||
color: #fff;
|
||
border-color: var(--color-primary);
|
||
}
|
||
|
||
.site-footer__contacts .dashicons {
|
||
font-size: 16px;
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
|
||
/* ── Link lists ───────────────────────────────────────────── */
|
||
.site-footer__links {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-2);
|
||
}
|
||
|
||
.site-footer__links li {
|
||
list-style: none;
|
||
}
|
||
|
||
.site-footer__links a {
|
||
font-size: 0.875rem;
|
||
color: var(--color-ink-4);
|
||
text-decoration: none;
|
||
transition: color var(--transition-fast);
|
||
}
|
||
|
||
.site-footer__links a:hover {
|
||
color: var(--color-primary);
|
||
}
|
||
|
||
/* ── Friend links: wrap horizontally ─────────────────────── */
|
||
.site-footer__links--friends {
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
gap: var(--space-2) var(--space-4);
|
||
}
|
||
|
||
/* ── Bottom copyright bar ─────────────────────────────────── */
|
||
.site-footer__bottom {
|
||
border-top: 1px solid var(--color-border-light);
|
||
background: var(--surface-page);
|
||
padding: var(--space-4) 0;
|
||
}
|
||
|
||
.site-footer__bottom .container {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
gap: var(--space-2);
|
||
}
|
||
|
||
.site-footer__copy,
|
||
.site-footer__icp {
|
||
font-size: 0.8125rem;
|
||
color: var(--color-ink-4);
|
||
}
|
||
|
||
.site-footer__icp {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-3);
|
||
}
|
||
|
||
.site-footer__icp a {
|
||
color: var(--color-ink-4);
|
||
transition: color var(--transition-fast);
|
||
}
|
||
|
||
.site-footer__icp a:hover {
|
||
color: var(--color-primary);
|
||
}
|
||
|
||
@media (max-width: 600px) {
|
||
.site-footer__bottom .container {
|
||
flex-direction: column;
|
||
text-align: center;
|
||
}
|
||
}
|