/* ============================================================ ЛАЗЕР · 7 — WordPress theme additions (bilingual toggle + admin-bar offset; design CSS stays 1:1) ============================================================ */ /* ---------- no horizontal page scroll (sticky-safe) ------------- */ /* `clip` clips overflow WITHOUT creating a scroll container, so the sticky header keeps working. Stops the mobile category strip (and any off-screen element) from pushing the page wider than the screen. */ html { overflow-x: clip; } /* ---------- mobile: contain the portfolio category tabs --------- */ @media (max-width: 760px) { /* one child only → block layout removes flexbox min-size quirks that let the tab row expand the page; the row stays a swipeable strip */ .portfolio-controls { display: block; } .cat-pills { width: 100%; max-width: 100%; min-width: 0; } } /* ---------- bilingual UA / EN switch ---------------------------- */ /* Both languages are printed into the DOM; JS sets data-lang on . Default (before JS) shows Ukrainian only. */ html[data-lang="en"] .lng-ua { display: none !important; } html[data-lang="ua"] .lng-en { display: none !important; } html:not([data-lang]) .lng-en { display: none !important; } /* inline languages inside headings / buttons keep flowing inline */ .hero-h1 .lng-ua, .hero-h1 .lng-en, .btn .lng-ua, .btn .lng-en, .section-head .lng-ua, .section-head .lng-en, .cta-banner h2 .lng-ua, .cta-banner h2 .lng-en, .contact h2 .lng-ua, .contact h2 .lng-en { display: inline; } html[data-lang="en"] .hero-h1 .lng-ua, html[data-lang="ua"] .hero-h1 .lng-en { display: none !important; } /* ---------- footer developer credit ---------------------------- */ .footer-credit { text-align: center; padding-top: 1rem; margin-top: 0.4rem; border-top: 1px solid var(--rule); font-size: 0.74rem; color: var(--ink-muted); } .footer-credit a { color: var(--ink-soft); text-decoration: none; font-weight: 600; } .footer-credit a:hover { color: var(--red); text-decoration: underline; } /* ---------- WP admin bar: keep sticky nav below it -------------- */ .admin-bar .nav { top: 32px; } @media screen and (max-width: 782px) { .admin-bar .nav { top: 46px; } } /* ---------- portfolio filtering (vanilla JS replaces React) ----- */ .work[hidden] { display: none !important; } /* swatch with a real photo: cover the container */ .mat-swatch.has-photo { background-size: cover; background-position: center; } .testi-media.has-photo .testi-play { position: absolute; } /* ---------- uploaded logo (theme option) ----------------------- */ .nav-logo--img { line-height: 0; display: inline-flex; align-items: center; } .brand-logo { display: block; height: 38px; width: auto; max-width: 220px; } .footer-brand .brand-logo { height: 44px; } @media (max-width: 760px) { .brand-logo { height: 34px; } } /* ---------- content photos as real (alt + SEO) ----------- */ /* keep the exact "background cover" look the prototype had */ .hero-figure-img > img, .hero-card .bg > img, .about-photo > img, .testi-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .testi-media > img { z-index: 0; } .testi-media .testi-play { z-index: 2; } /* fullscreen video overlay (testimonial play button) */ .l7-video-overlay { position: fixed; inset: 0; z-index: 320; background: rgba(10,10,14,0.92); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 1.5rem; } .l7-video-overlay video { max-width: min(1100px, 92vw); max-height: 82vh; border-radius: var(--radius-sm); background: #000; } .l7-video-overlay .l7-vclose { position: absolute; top: 1rem; right: 1rem; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.1); border: 0; color: #fff; font-size: 1.6rem; cursor: pointer; } .l7-video-overlay .l7-vclose:hover { background: var(--red); } /* ---------- cookie consent banner (site styling) --------------- */ .l7-cookie { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%) translateY(160%); z-index: 95; width: min(680px, calc(100% - 2rem)); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: transform 0.45s cubic-bezier(0.4, 0, 0.1, 1), opacity 0.45s; } .l7-cookie.is-shown { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; } /* thin "laser glow" accent line on top */ .l7-cookie::before { content: ""; position: absolute; left: 1.3rem; right: 1.3rem; top: -1px; height: 3px; background: linear-gradient(90deg, var(--red), #f6a94a); border-radius: 3px; } .l7-cookie-inner { display: flex; align-items: center; gap: 1.2rem; padding: 1.1rem 1.35rem; flex-wrap: wrap; } .l7-cookie-text { flex: 1 1 280px; font-size: 0.88rem; color: var(--ink-soft); line-height: 1.55; } .l7-cookie-link { color: var(--red); font-weight: 700; text-decoration: none; white-space: nowrap; } .l7-cookie-link:hover { text-decoration: underline; } .l7-cookie-btns { display: flex; gap: 0.6rem; flex: 0 0 auto; } .l7-cookie-btns .btn { padding: 0.7rem 1.3rem; } @media (max-width: 600px) { .l7-cookie { bottom: 0.7rem; width: calc(100% - 1.2rem); } .l7-cookie-inner { padding: 1rem; gap: 0.85rem; } .l7-cookie-btns { width: 100%; } .l7-cookie-btns .btn { flex: 1; justify-content: center; } /* keep the corner float buttons out of the way while the banner is up */ body.l7-cookie-on .qc, body.l7-cookie-on .scroll-top { opacity: 0; pointer-events: none; } } /* ---------- legal pages (privacy / cookies / terms) ------------ */ .legal .legal-wrap { max-width: 820px; } .legal-body { color: var(--ink-soft); font-size: 0.98rem; line-height: 1.75; } .legal-body h2 { font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 1.15rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--ink); margin: 1.9rem 0 0.6rem; } .legal-body p { margin: 0 0 1rem; } .legal-body ul { margin: 0 0 1rem; padding-left: 1.2rem; } .legal-body li { margin-bottom: 0.4rem; } .legal-body a { color: var(--red); } .legal-body strong { color: var(--ink); }