/* * site.css — Motion & interaction layer for the BGS recovery. * Loaded AFTER the vendored production Tailwind build (app.css). Recreates the * live site's GSAP-driven reveals with vanilla CSS transitions + IntersectionObserver * (see app.js). All effects degrade gracefully when JS is off or reduced-motion is set. */ /* ---- Font family bindings ---- * The vendored build defines --font-sans / --font-mono on the next/font wrapper * classes (applied to in the original). We rebind them on :root so the * GeneralSans + JetBrains Mono @font-face families resolve everywhere. */ :root { --font-sans: "generalSans", "generalSans Fallback"; --font-mono: "JetBrains Mono", "JetBrains Mono Fallback"; } /* ---- Header scrolled state (translucent, dark text) ---- */ header[data-site-header].is-scrolled { background: color-mix(in srgb, #ffffff 82%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom-color: rgba(20, 20, 20, 0.09); } header[data-site-header].is-scrolled .hdr-inner, header[data-site-header].is-scrolled .hdr-nav a, header[data-site-header].is-scrolled a { color: #141414; } header[data-site-header].is-scrolled .bar { background: #141414; } /* ---- Reveal animations ---- * The hidden state is set here; app.js reveals each element by writing an inline * transform/opacity (inline styles are deterministic and transition smoothly * between two explicit values — transitioning to an *unset* rule proved flaky * in some renderers). */ html.js [data-hero-line] { transform: translateY(110%); transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; } html.js [data-hero-tag] { opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); } html.js [data-reveal-line] { transform: translateY(110%); transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; } html.js [data-fade] { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); } /* ---- Page-transition cover ---- * Reveal is a pure CSS animation (no JS timer dependency). The base resting state * is "hidden" (translateY(-100%)), so if animations don't run the page is still * fully visible. JS only re-covers on internal navigation (.down). No-JS users * never see the cover at all. */ html:not(.js) [data-page-cover] { display: none; } html.js [data-page-cover] { transform: translateY(-100%); animation: cover-reveal 0.7s cubic-bezier(0.76, 0, 0.24, 1); } @keyframes cover-reveal { from { transform: translateY(0); } to { transform: translateY(-100%); } } [data-page-cover].down { animation: none; transform: translateY(0); transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1); } /* ---- Mobile menu ---- */ [data-menu-root] { transition: opacity 0.35s ease; } [data-menu-root].open { visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } [data-menu-root] [data-menu-panel] { transform: translateX(100%); transition: transform 0.45s cubic-bezier(0.76, 0, 0.24, 1); } [data-menu-root].open [data-menu-panel] { transform: translateX(0); } [data-menu-root].open > [data-menu-close] { opacity: 1 !important; } /* ---- Contact form confirmation ---- */ .form-sent-msg { display: none; } form.is-sent .form-sent-msg { display: block; } form.is-sent > *:not(.form-sent-msg) { display: none; } @media (prefers-reduced-motion: reduce) { html.js [data-hero-line], html.js [data-reveal-line] { transform: none; transition: none; } html.js [data-hero-tag], html.js [data-fade] { opacity: 1; transform: none; transition: none; } [data-page-cover] { display: none; } } /* ============================================================ Practice accordion — smooth inline expand (no page navigation) ============================================================ */ .acc { border-bottom: 1px solid rgba(20,20,20,.09); } .acc-trigger { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; } .acc-row { display: flex; align-items: center; gap: 1.5rem; max-width: 1400px; margin: 0 auto; padding: 1.6rem 1.5rem; transition: padding .3s ease; } .acc-num { flex: none; } .acc-title { flex: 1 1 auto; transition: color .35s ease; } .acc-trigger:hover .acc-title { color: #141414; } .acc-summary { display: none; max-width: 22rem; } .acc-icon { position: relative; flex: none; width: 1rem; height: 1rem; margin-left: .75rem; color: #6e6e6e; transition: color .35s ease; } .acc-trigger:hover .acc-icon { color: #141414; } .acc-icon::before, .acc-icon::after { content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; border-radius: 2px; transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .35s ease; } .acc-icon::before { width: 100%; height: 1.5px; transform: translate(-50%,-50%); } .acc-icon::after { width: 1.5px; height: 100%; transform: translate(-50%,-50%); } .acc.is-open .acc-icon::after { transform: translate(-50%,-50%) scaleY(0); opacity: 0; } .acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s cubic-bezier(.22,1,.36,1); } .acc-panel > .acc-panel-inner { overflow: hidden; min-height: 0; } .acc.is-open > .acc-panel { grid-template-rows: 1fr; } .acc-outer { max-width: 1400px; margin: 0 auto; padding: 0 1.5rem 2.2rem; } .acc-body { display: grid; gap: 1.15rem; max-width: 56rem; } .acc-para { margin: 0; color: #565a63; font-size: 1rem; line-height: 1.7; opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); } .acc.is-open .acc-para { opacity: 1; transform: none; } .acc.is-open .acc-para:nth-child(1){ transition-delay:.10s; } .acc.is-open .acc-para:nth-child(2){ transition-delay:.17s; } .acc.is-open .acc-para:nth-child(3){ transition-delay:.24s; } .acc.is-open .acc-para:nth-child(4){ transition-delay:.31s; } .acc.is-open .acc-para:nth-child(5){ transition-delay:.38s; } @media (min-width: 768px) { .acc-row { gap: 3rem; padding: 2.4rem 3rem; } .acc-big .acc-row { padding: 3.2rem 3rem; } .acc-num { width: 2.5rem; } .acc-summary { display: block; } .acc-outer { padding: 0 3rem 3.2rem 5.5rem; } .acc-body { gap: 1.4rem; } .acc-para { font-size: 1.075rem; } } @media (prefers-reduced-motion: reduce) { .acc-panel, .acc-para, .acc-icon::before, .acc-icon::after { transition: none; } .acc-para { opacity: 1; transform: none; } } /* ============================================================ Team member profile drawer — slides in, no page navigation ============================================================ */ button.team-card { border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; } .mm-modal { position: fixed; inset: 0; z-index: 60; visibility: hidden; pointer-events: none; } .mm-modal.open { visibility: visible; pointer-events: auto; } .mm-backdrop { position: absolute; inset: 0; border: 0; padding: 0; background: rgba(18,18,26,.45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .45s ease; cursor: pointer; } .mm-modal.open .mm-backdrop { opacity: 1; } .mm-panel { position: absolute; top: 0; right: 0; height: 100dvh; width: 100%; max-width: 560px; background: #fff; box-shadow: -20px 0 60px rgba(0,0,0,.18); transform: translateX(100%); transition: transform .55s cubic-bezier(.22,1,.36,1); overflow-y: auto; overscroll-behavior: contain; } .mm-modal.open .mm-panel { transform: translateX(0); } .mm-close { position: absolute; top: 1.15rem; right: 1.15rem; z-index: 2; display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 999px; background: rgba(255,255,255,.75); color: #141414; cursor: pointer; transition: background .3s ease; } .mm-close:hover { background: rgba(20,20,20,.08); } .mm-photo { position: relative; aspect-ratio: 4/5; background: #f3f7f9; overflow: hidden; } .mm-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; } .mm-body { padding: 2rem 1.75rem 3rem; } .mm-name { font-size: 2rem; line-height: 1.05; margin: .6rem 0 .35rem; } .mm-sub { font-size: .95rem; line-height: 1.5; } .mm-email { display: inline-block; margin-top: 1rem; color: #141414; border-bottom: 1px solid rgba(20,20,20,.28); padding-bottom: 2px; transition: border-color .3s ease; } .mm-email:hover { border-color: #141414; } .mm-blocks { margin-top: 2rem; display: grid; gap: 1.5rem; border-top: 1px solid rgba(20,20,20,.09); padding-top: 1.75rem; } .mm-block-h { margin: 0 0 .6rem; } .mm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; } .mm-list li { font-size: .95rem; line-height: 1.5; color: #565a63; } /* staggered content reveal when the drawer opens */ .mm-content > * { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); } .mm-modal.open .mm-content > .mm-photo { transition-delay: .10s; } .mm-modal.open .mm-content > .mm-body { transition-delay: .18s; } .mm-modal.open .mm-content > * { opacity: 1; transform: none; } @media (min-width: 768px) { .mm-body { padding: 2.5rem 2.5rem 3.5rem; } .mm-name { font-size: 2.5rem; } } @media (prefers-reduced-motion: reduce) { .mm-panel, .mm-backdrop, .mm-content > * { transition: none; } } /* ============================================================ Effects pass — cursor accent, marquee band, image clip-reveal ============================================================ */ /* Editorial marquee band */ .marquee-band { border-top: 1px solid rgba(20,20,20,.09); border-bottom: 1px solid rgba(20,20,20,.09); background: #f3f7f9; overflow: hidden; padding: 1.5rem 0; } .marquee-track { display: flex; width: max-content; animation: marquee-scroll 42s linear infinite; } .marquee-band:hover .marquee-track { animation-play-state: paused; } .marquee-group { display: flex; align-items: center; flex: none; } .marquee-item { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .24em; text-transform: uppercase; color: #6e6e6e; white-space: nowrap; padding: 0 1.6rem; } .marquee-sep { color: #a3d2e2; font-size: .6rem; padding: 0 .1rem; } @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; justify-content: center; width: 100%; flex-wrap: wrap; } } /* Feature-image clip reveal on scroll (only with JS; safe fallback otherwise) */ html.js .reveal-img { clip-path: inset(0 0 100% 0); transition: clip-path 1.05s cubic-bezier(.22,1,.36,1); will-change: clip-path; } html.js .reveal-img.in { clip-path: inset(0 0 0 0); } @media (prefers-reduced-motion: reduce) { html.js .reveal-img { clip-path: none !important; transition: none; } } /* ============================================================ Commitments — editorial numbered list (two-column section) ============================================================ */ .commit-list { display: flex; flex-direction: column; } .commit-row { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 1.25rem 1.5rem; align-items: start; padding: 1.9rem 0; border-top: 1px solid rgba(20,20,20,.09); } .commit-row:last-child { border-bottom: 1px solid rgba(20,20,20,.09); } .commit-num { padding-top: .4rem; letter-spacing: .1em; transition: color .35s ease; } .commit-title { font-size: 1.35rem; line-height: 1.2; margin-bottom: .5rem; transition: color .35s ease; } .commit-desc { font-size: .95rem; line-height: 1.65; max-width: 34rem; } .commit-line { position: absolute; left: 0; bottom: -1px; height: 1px; width: 0; background: #161833; transition: width .55s cubic-bezier(.22,1,.36,1); } .commit-row:hover .commit-num, .commit-row:hover .commit-title { color: #161833; } .commit-row:hover .commit-line { width: 100%; } @media (min-width: 768px) { .commit-title { font-size: 1.55rem; } .commit-row { padding: 2.1rem 0; } } @media (min-width: 768px) { .commit-aside { position: sticky; top: 8rem; } } /* ============================================================ Language toggle (desktop header) — clear EN / BG control ============================================================ */ .lang-toggle { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; padding: .4rem .8rem; border-radius: 999px; border: 1px solid color-mix(in srgb, currentColor 26%, transparent); transition: border-color .3s ease, background-color .3s ease; } .lang-toggle:hover { border-color: color-mix(in srgb, currentColor 55%, transparent); } .lang-cur { font-weight: 600; } .lang-sep { opacity: .4; } .lang-alt { display: inline-flex; align-items: center; gap: .4rem; opacity: .55; transition: opacity .3s ease; } .lang-alt:hover { opacity: 1; } .lang-flag { display: inline-block; height: 11px; width: 18px; border-radius: 1px; overflow: hidden; box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent); } /* ---- Header visibility: frosted language pill + hero scrim ---- */ .lang-toggle { background: color-mix(in srgb, currentColor 10%, transparent); border-color: color-mix(in srgb, currentColor 42%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .lang-toggle:hover { background: color-mix(in srgb, currentColor 16%, transparent); border-color: color-mix(in srgb, currentColor 64%, transparent); } /* darken behind the header on the hero so nav + toggle read clearly over the video */ header[data-site-header][data-home]::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgba(16,18,32,.55), rgba(16,18,32,0)); transition: opacity .4s ease; } header[data-site-header][data-home].is-scrolled::before { opacity: 0; } /* Decorative elements should not be text-selectable */ .marquee-band, .cursor-ring, .acc-num, .commit-num, .commit-line, .acc-icon { -webkit-user-select: none; user-select: none; } /* ---- Header controls always visible: dark frosted chips over the hero video ---- */ .menu-btn { border-radius: 999px; } [data-site-header][data-home] .lang-toggle, [data-site-header][data-home] .menu-btn { background: rgba(18,20,34,.5) !important; border: 1px solid rgba(255,255,255,.4) !important; -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); } [data-site-header][data-home] .lang-toggle:hover, [data-site-header][data-home] .menu-btn:hover { background: rgba(18,20,34,.65) !important; border-color: rgba(255,255,255,.65) !important; } /* scrolled home + inner pages: light chip (dark controls on a light header) */ [data-site-header].is-scrolled .lang-toggle, [data-site-header].is-scrolled .menu-btn, [data-site-header]:not([data-home]) .lang-toggle, [data-site-header]:not([data-home]) .menu-btn { background: rgba(20,20,20,.045) !important; border: 1px solid rgba(20,20,20,.2) !important; } /* FIX: the vendored app.css hides the home header at >=768px (opacity:0) as an intro state the original revealed via GSAP. We don't run that reveal, so the desktop home header was invisible. Force it permanently visible. */ [data-site-header][data-home="true"] { opacity: 1 !important; transform: none !important; } @font-face{font-family:'Manrope';font-style:normal;font-weight:300 800;font-display:swap;src:url(/assets/fonts/manrope/manrope-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;} @font-face{font-family:'Manrope';font-style:normal;font-weight:300 800;font-display:swap;src:url(/assets/fonts/manrope/manrope-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;} @font-face{font-family:'Manrope';font-style:normal;font-weight:300 800;font-display:swap;src:url(/assets/fonts/manrope/manrope-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Manrope';font-style:normal;font-weight:300 800;font-display:swap;src:url(/assets/fonts/manrope/manrope-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} /* ---- Bulgarian pages: stylish Cyrillic typeface (Manrope). GeneralSans has no Cyrillic so BG text fell back to Arial. Mono role stays JetBrains Mono. ---- */ html[lang="bg"] { --font-sans: "Manrope", "Manrope Fallback", system-ui, sans-serif; } html[lang="bg"] body { font-family: "Manrope", "Manrope Fallback", system-ui, sans-serif; } html[lang="bg"] .font-display { font-family: "Manrope", "Manrope Fallback", system-ui, sans-serif; } /* ---- "Solicitors" descriptor beside the wordmark (makes the discipline obvious) ---- */ .brand-tag { display: none; } @media (min-width: 640px) { .brand-tag { display: inline-flex; align-items: center; gap: .7rem; font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; opacity: .74; white-space: nowrap; } } .brand-tag-line { display: inline-block; width: 1px; height: 13px; background: currentColor; opacity: .4; }