/* ============================================================ mag-d — алуминиева дограма, Пловдив Дизайн система по образец на findrealestate.com: флуиден 10px root, Onest + Lora, монохром с #151717, expo/spring easing, text-roll ховъри, pinned hero. ============================================================ */ /* ---------- Локални шрифтове (без външни заявки) ---------- */ @font-face{ font-family:'Lora'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/lora-cyrillic.woff2') format('woff2'); unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face{ font-family:'Lora'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/lora-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:'Lora'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/lora-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; } @font-face{ font-family:'Onest'; font-style:normal; font-weight:400 700; font-display:swap; src:url('fonts/onest-cyrillic.woff2') format('woff2'); unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face{ font-family:'Onest'; font-style:normal; font-weight:400 700; font-display:swap; src:url('fonts/onest-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:'Onest'; font-style:normal; font-weight:400 700; font-display:swap; src:url('fonts/onest-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; } /* ---------- Tokens ---------- */ :root{ color-scheme: light; --ink: #151717; --bg: #ffffff; --line: #ededed; --muted: #b3b3b3; --dim: rgba(21,23,23,.5); --alt: #eef3f2; /* едва доловим тийл оттенък */ --red: #d92424; /* само за грешки във формата */ --accent:#3a8286; /* тийлът от логото, леко просветлен */ --accent-ink:#3a8286; /* тийл за текстови акценти (чете се на светло) */ /* производни, за да работи и тъмната тема */ --scrim: rgba(255,255,255,.85); /* воалът на data-wipe */ --field-bg: #f2f2f2; /* фон на input полетата */ --field-bg-focus: #e9e9e9; /* Подписните криви на референтния сайт */ --ease-expo: cubic-bezier(.16,1,.3,1); --ease-spring: cubic-bezier(.34,3.56,.64,1); --font: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --serif: "Lora", Georgia, "Times New Roman", serif; --header-h: 8.4rem; } /* Тъмна тема. theme.js слага data-theme на преди рисуването; media query-то е резервът при изключен JS. */ :root[data-theme="dark"]{ color-scheme: dark; --ink: #f2f3f3; --bg: #0e1010; --line: #242727; --muted: #5f6565; --dim: rgba(242,243,243,.55); --alt: #121717; --scrim: rgba(14,16,16,.85); --field-bg: #1b1e1e; --field-bg-focus: #232727; --accent-ink:#8fc0c2; /* по-светъл тийл, четим на тъмно */ } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ color-scheme: dark; --ink: #f2f3f3; --bg: #0e1010; --line: #242727; --muted: #5f6565; --dim: rgba(242,243,243,.55); --alt: #121717; --scrim: rgba(14,16,16,.85); --field-bg: #1b1e1e; --field-bg-focus: #232727; --accent-ink:#8fc0c2; } } /* ---------- Reset ---------- */ *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; } /* Root по мобилната формула на референтния сайт (2.6667vw), с таван 9.2px — еквивалент на предишния мащаб при 80% zoom. Таванът важи за всички екрани от ~345px нагоре, така че UI-ят е еднакъв на телефон и десктоп: текст, бутони, лого, икони (всичко е rem). */ html{ font-size: clamp(8.5px, 2.6667vw, 9.2px); -webkit-text-size-adjust:100%; scroll-padding-top: var(--header-h); } body{ font-family:var(--font); font-weight:400; font-size:1.9rem; line-height:1.5; color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip; } img{ display:block; max-width:100%; } a{ color:inherit; text-decoration:none; } ul,ol{ list-style:none; } button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; } strong{ font-weight:600; } ::selection{ background:var(--accent); color:#fff; } .skip-link{ position:absolute; left:-999rem; top:0; z-index:200; padding:1rem 2rem; background:var(--ink); color:var(--bg); font-size:1.4rem; } .skip-link:focus{ left:1rem; top:1rem; } /* ---------- Container ---------- */ .container{ max-width:1920px; margin:0 auto; padding:0 2.5rem; } @media (min-width: 768px){ .container{ padding:0 5rem; } } @media (min-width: 1024px){ .container{ padding:0 clamp(5rem, 5.2vw, 10rem); } } /* Секциите след hero се плъзгат върху закования кадър */ main > section{ position:relative; z-index:2; background:var(--bg); } /* Едва доловими диагонални градиенти (30° наклон), редуващи посоката; браузър без color-mix() остава на плътния фон от реда по-горе */ main > section:nth-of-type(odd){ background:linear-gradient(60deg, var(--bg), color-mix(in srgb, var(--bg) 96%, var(--accent-ink))); } main > section:nth-of-type(even){ background:linear-gradient(300deg, var(--bg), color-mix(in srgb, var(--bg) 96%, var(--accent-ink))); } main > section.quote{ background:var(--alt); background:linear-gradient(60deg, var(--alt), color-mix(in srgb, var(--alt) 95%, var(--accent-ink))); } main > section.about{ background:var(--bg); } /* „За нас“ е без градиент */ main > section.hero{ z-index:1; background:none; } .em{ color:var(--muted); } /* ============================================================ Text-roll ховър (надписът се превърта нагоре, дубликат от data-text идва отдолу) — .9s expo ============================================================ */ .header__nav a, .header__phone .phone-roll, .footer__nav a, .footer__meta a, .footer__top-link{ display:block; overflow:hidden; } .header__nav a > span, .header__phone .phone-roll > span, .footer__nav a > span, .footer__meta a > span, .footer__top-link > span, .btn__label > span{ position:relative; display:block; transition: transform .9s var(--ease-expo); } .header__nav a > span::after, .header__phone .phone-roll > span::after, .footer__nav a > span::after, .footer__meta a > span::after, .footer__top-link > span::after, .btn__label > span::after{ content:attr(data-text); display:block; position:absolute; top:105%; left:0; right:0; } .header__nav a:hover > span, .header__phone:hover .phone-roll > span, .footer__nav a:hover > span, .footer__meta a:hover > span, .footer__top-link:hover > span{ transform:translateY(-105%); } /* Входящият дубликат при roll ховъра идва в тийл — малък brand щрих */ .header__nav a > span::after, .header__phone .phone-roll > span::after, .footer__nav a > span::after, .footer__top-link > span::after{ color:var(--accent-ink); } /* ============================================================ Бутони — черни pill-ове с пружинен scaleX + text-roll ============================================================ */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:1rem; white-space:nowrap; padding:1.4rem 2.4rem; border-radius:100px; background:var(--ink); color:var(--bg); font-size:1.7rem; font-weight:500; line-height:1.5; transition:transform .3s; will-change:transform; } .btn:hover{ transform:scaleX(1.02); transition:transform .7s var(--ease-spring); } .btn__label{ display:block; overflow:hidden; } .btn:hover .btn__label > span{ transform:translateY(-105%); } .btn__icon{ position:relative; display:block; overflow:hidden; width:1.8rem; height:1.8rem; } .btn__icon svg{ display:block; width:1.8rem; height:1.8rem; transition:transform .9s var(--ease-expo); } .btn__icon svg + svg{ position:absolute; top:105%; left:0; } .btn:hover .btn__icon svg{ transform:translateY(-105%); } .btn--sm{ padding:.9rem 1.6rem; font-size:1.5rem; } @media (min-width: 1024px){ .btn--sm{ padding:1rem 2rem; } } /* На най-тесните екрани CTA-то в хедъра не се събира; същото действие стои в hero-то и в мобилното меню */ @media (max-width: 479px){ .header__actions .btn--sm{ display:none; } .header__logo img{ height:2.4rem; } } .btn--full{ width:100%; } /* ============================================================ HEADER — sticky, прозрачен над hero, скрива се при скрол надолу ============================================================ */ .header{ position:fixed; top:0; left:0; right:0; z-index:50; background:var(--bg); transition:background-color .3s, transform .3s ease-in-out; } .header.is-top{ background:transparent; } .header.is-hidden{ transform:translateY(-100%); } .header__content{ min-height:var(--header-h); display:flex; align-items:center; justify-content:space-between; gap:3rem; } .header__logo{ display:inline-flex; align-items:center; } .header__logo img{ display:block; height:2.6rem; width:auto; } /* Видимост на елементи според темата (лога и др.) */ .only-dark{ display:none !important; } [data-theme="dark"] .only-light{ display:none !important; } [data-theme="dark"] .only-dark{ display:block !important; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .only-light{ display:none !important; } :root:not([data-theme="light"]) .only-dark{ display:block !important; } } .header__nav{ display:none; } @media (min-width: 1024px){ .header__nav{ display:flex; gap:3rem; margin:0 auto; } } .header__nav a{ font-size:1.8rem; font-weight:500; line-height:1.5; } .header__actions{ display:flex; align-items:center; gap:1.2rem; } @media (min-width: 1024px){ .header__actions{ gap:2.5rem; } } .header__phone{ display:none; font-size:1.8rem; font-weight:500; } @media (min-width: 1280px){ .header__phone{ display:flex; align-items:center; gap:.8rem; } } .header__phone-icon{ width:1.8rem; height:1.8rem; flex:0 0 auto; } /* Хедърът стои над цялоекранното меню */ .header__content{ position:relative; z-index:2; } /* ---------- Смяна на тема ---------- */ .theme-toggle{ display:grid; place-items:center; width:3.6rem; height:3.6rem; border-radius:50%; border:1px solid var(--line); transition:transform .7s var(--ease-spring), border-color .3s; } .theme-toggle:hover{ transform:scale(1.06); border-color:var(--muted); } .theme-toggle svg{ width:1.7rem; height:1.7rem; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; } .theme-toggle .icon-sun{ display:none; } [data-theme="dark"] .theme-toggle .icon-sun{ display:block; } [data-theme="dark"] .theme-toggle .icon-moon{ display:none; } /* ---------- Burger + мобилно меню ---------- */ .burger{ display:block; width:2.8rem; padding:.4rem 0; } @media (min-width: 1024px){ .burger{ display:none; } } .burger span{ position:relative; top:0; display:block; width:100%; height:2px; margin:.7rem 0; background:currentColor; border-radius:9999px; transition:top .2s .2s, transform .3s 0s; } .burger[aria-expanded="true"] span{ transition:top .2s, transform .3s .2s; } .burger[aria-expanded="true"] span:first-child{ top:.45rem; transform:rotate(45deg); } .burger[aria-expanded="true"] span:last-child{ top:-.45rem; transform:rotate(-45deg); } /* Мобилното меню е на цял екран; хедърът (лого + бутони) остава отгоре */ .menu{ display:none; position:fixed; inset:0; background:var(--bg); padding:calc(var(--header-h) + 4rem) 2.5rem 4rem; overflow:auto; } .menu.is-open{ display:flex; flex-direction:column; animation:menuDown .45s var(--ease-expo); } @keyframes menuDown{ from{ opacity:0; transform:translateY(-1.5rem); } to{ opacity:1; transform:translateY(0); } } .menu__nav{ display:flex; flex-direction:column; } .menu__nav a{ padding:2rem 0; font-size:3.4rem; font-weight:500; letter-spacing:-.02em; border-bottom:1px solid var(--line); } .menu__meta{ display:flex; flex-direction:column; gap:1rem; margin-top:auto; padding-top:4rem; font-size:1.8rem; color:var(--dim); } /* Докато менюто е отворено, страницата отдолу не скролира */ html.lenis-stopped{ overflow:hidden; } /* ============================================================ HERO — закован 100vh кадър с типографско съдържание, което избледнява нагоре при скрол; следващата секция се плъзга отгоре. ============================================================ */ .hero{ position:relative; height:320vh; /* фаза 1: заглавие · фаза 2: лого · финал: overlap */ margin-bottom:-100vh; /* следващата секция се плъзга върху кадъра */ } .hero__pin{ position:sticky; top:0; height:100vh; min-height:56rem; overflow:hidden; background:var(--bg); } /* Под 1024px чертежът е скрит и съдържанието е центрирано; от 1024px нагоре текстът е вляво, чертежът — вдясно */ .hero__content{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:var(--header-h) 2.5rem 8vh; will-change:transform, opacity; } @media (min-width: 1024px){ .hero__content{ display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr); align-items:center; text-align:left; gap:6rem; width:100%; max-width:1920px; margin:0 auto; padding:var(--header-h) clamp(5rem, 5.2vw, 10rem) 6vh; } } .hero__eyebrow{ display:inline-flex; align-items:center; gap:1rem; font-size:1.3rem; font-weight:500; color:var(--dim); text-transform:uppercase; letter-spacing:.14em; } @media (max-width: 767px){ .hero__eyebrow{ margin-top:4rem; } } .dot{ position:relative; width:.7rem; height:.7rem; border-radius:50%; background:var(--accent); display:inline-block; } /* Дискретен „радар“ пулс около точката */ .dot::after{ content:""; position:absolute; inset:0; border-radius:50%; background:var(--accent); animation:dotPulse 2.4s cubic-bezier(.16,1,.3,1) infinite; } @keyframes dotPulse{ 0%{ transform:scale(1); opacity:.7; } 70%, 100%{ transform:scale(3.4); opacity:0; } } .hero__title{ margin-top:3rem; font-weight:700; font-size:clamp(5.4rem, 12vw, 11.5rem); /* 5.4rem = hero заглавието на FIND mobile */ line-height:.98; letter-spacing:-.03em; } @media (min-width: 1024px){ /* в двуколонния layout заглавието се съобразява с колоната си */ .hero__title{ font-size:min(11.5rem, 6.6vw); } } .hline{ display:block; overflow:hidden; padding:.14em 0; margin:-.14em 0; } .hline__in{ display:block; will-change:transform; } .hline__in--em{ color:var(--accent-ink); } .hero__lead{ margin-top:3rem; max-width:72rem; font-size:2.4rem; font-weight:500; line-height:1.45; letter-spacing:-.01em; text-wrap:balance; } .hero__actions{ margin-top:4rem; } /* ---------- Чертежът на прозореца вдясно ---------- Линиите се „начертават“ с stroke-dashoffset (pathLength=1), размерите и стрелките избледняват след тях, а посоките на отваряне пълзят бавно като маркиращи пунктири. */ .hero__art{ display:none; } @media (min-width: 1024px){ .hero__art{ display:block; justify-self:end; width:min(100%, 52rem); } } .hero__art svg{ width:100%; height:auto; display:block; overflow:visible; animation:heroFloat 9s ease-in-out infinite; } .hero__art .s{ fill:none; stroke-linecap:round; } .hero__art .ink{ stroke:var(--ink); } .hero__art .teal{ stroke:var(--accent-ink); } .hero__art .f.teal{ fill:var(--accent-ink); stroke:none; } .hero__art .w1{ stroke-width:1.5; } .hero__art .w15{ stroke-width:2.25; } .hero__art .w2{ stroke-width:3; } .hero__art .half{ opacity:.45; } .hero__art .glass{ stroke:var(--ink); stroke-width:1.5; opacity:.14; } .hero__art .draw{ stroke-dasharray:1; stroke-dashoffset:1; animation:heroDraw 1.6s var(--ease-expo) forwards; } .hero__art .dash{ stroke:var(--accent-ink); stroke-width:1.25; opacity:0; stroke-dasharray:.03 .022; animation:heroDashIn .8s ease forwards, heroDash 26s linear infinite; animation-delay:.9s, .9s; } .hero__art .fade{ opacity:0; animation:heroFade .8s ease forwards; animation-delay:1.2s; } /* Каскада на „начертаването“ (CSP не допуска инлайн style атрибути) */ .hero__art .dl-1{ animation-delay:.15s; } .hero__art .dl-2{ animation-delay:.3s; } .hero__art .dl-3{ animation-delay:.45s; } .hero__art .dl-4{ animation-delay:.7s; } .hero__art .dl-5{ animation-delay:.85s; } .hero__art .dl-6{ animation-delay:1.15s; } .hero__art .dl-7{ animation-delay:1.35s; } .hero__art .dim{ font-family:var(--font); font-weight:600; font-size:22px; letter-spacing:.06em; fill:var(--accent-ink); } /* Обемните части на чертежа: фасети, стъкло, отблясък, сянка */ .hero__art .st-glass-a{ stop-color:var(--accent-ink); stop-opacity:.16; } .hero__art .st-glass-b{ stop-color:var(--accent-ink); stop-opacity:.03; } .hero__art .face-sh{ fill:#000; opacity:.2; } .hero__art .face-hi{ fill:#fff; opacity:.07; } .hero__art .sash-band{ fill:var(--ink); opacity:.08; } .hero__art .glass-fill{ fill:url(#gGlass); } .hero__art .shadow{ fill:url(#gShadow); } .hero__art .sheen{ fill:url(#gSheen); } .hero__art .sheen-move{ animation:heroSheen 8s ease-in-out 2.5s infinite; } @keyframes heroSheen{ 0%{ transform:translateX(-140px); } 55%, 100%{ transform:translateX(640px); } } @keyframes heroDraw{ to{ stroke-dashoffset:0; } } @keyframes heroFade{ to{ opacity:1; } } @keyframes heroDashIn{ to{ opacity:.75; } } @keyframes heroDash{ to{ stroke-dashoffset:-1; } } @keyframes heroFloat{ 50%{ transform:translateY(-1.2rem); } } /* Голямото лого — втора фаза на скрол сцената */ .hero__logo{ position:absolute; inset:0; z-index:1; display:grid; place-items:center; pointer-events:none; } .hero__logo img{ display:block; width:min(72vw, 96rem); height:auto; } .js .hero__logo{ opacity:0; } html:not(.js) .hero__logo{ display:none; } /* ============================================================ Типография на секциите ============================================================ */ .section{ padding:10rem 0; } @media (min-width: 1024px){ .section{ padding:15rem 0; } } .caption{ font-size:2.2rem; font-weight:600; line-height:1.4; color:var(--accent-ink); margin-bottom:3rem; } @media (min-width: 1024px){ .caption{ margin-bottom:4rem; } } .caption--center{ text-align:center; } .title{ font-weight:500; font-size:clamp(4.4rem, 10vw, 6.8rem); /* 4.4rem = секционните заглавия на FIND mobile */ line-height:1.02; letter-spacing:-.03em; max-width:100rem; } .title--center{ text-align:center; margin-inline:auto; } /* Ред-по-ред разкриване (JS обвива редовете) */ .title .l{ display:block; overflow:hidden; padding:.14em 0; margin:-.14em 0; } .title .l > span{ display:block; } /* Голямото изречение със „scrim wipe“ ефект */ .statement{ position:relative; margin-top:6rem; max-width:124rem; font-weight:500; font-size:clamp(3.2rem, 5.2vw, 5.2rem); line-height:1.15; letter-spacing:-.02em; width:fit-content; } @media (min-width: 1024px){ .statement{ margin-top:10rem; } } .wipe-scrim{ position:absolute; z-index:1; inset:-5% -1% -5% 0; background:var(--scrim); transform-origin:100% 50%; pointer-events:none; } /* ============================================================ STATS ============================================================ */ .stats{ padding:6rem 0 0; } .stats__grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:2rem; } @media (min-width: 1024px){ .stats__grid{ grid-template-columns:repeat(4, 1fr); } } .stat{ padding:4rem 2rem 4.5rem; } @media (min-width: 1024px){ .stat{ padding:6rem 4rem; } } .stat__num{ display:block; font-weight:500; font-size:clamp(5rem, 11vw, 6.8rem); line-height:1; letter-spacing:-.03em; } .stat__label{ display:block; margin-top:1.5rem; font-size:2rem; font-weight:500; color:var(--dim); } /* На телефон броячите са значително по-дребни */ @media (max-width: 767px){ .stat{ padding:2.5rem 1.5rem 3rem; } .stat__num{ font-size:3.4rem; } .stat__label{ margin-top:1rem; font-size:1.5rem; } } /* ============================================================ ABOUT ============================================================ */ .about__cols{ margin-top:6rem; display:grid; gap:3rem; font-size:2.2rem; line-height:1.55; color:var(--dim); font-weight:500; } @media (min-width: 1024px){ .about__cols{ margin-top:10rem; grid-template-columns:1fr 1fr; gap:6rem; max-width:124rem; } } .about__list{ margin-top:6rem; display:grid; gap:0; border-top:1px solid var(--line); } @media (min-width: 1024px){ .about__list{ margin-top:10rem; grid-template-columns:repeat(4, 1fr); } } .about__list li{ padding:3rem 0; border-bottom:1px solid var(--line); } @media (min-width: 1024px){ .about__list li{ padding:4rem 3rem 5rem 0; border-bottom:0; } .about__list li + li{ border-left:1px solid var(--line); padding-left:3rem; } } .about__list h3{ font-size:2.4rem; font-weight:600; line-height:1.3; letter-spacing:-.01em; } .about__list p{ margin-top:1.2rem; font-size:1.9rem; line-height:1.5; color:var(--dim); font-weight:500; } /* ============================================================ SERVICES — гигантски думи с ховър разкриване на фон ============================================================ */ .services__head{ display:flex; flex-direction:column; gap:2rem; margin-bottom:6rem; } @media (min-width: 1024px){ .services__head{ flex-direction:row; align-items:flex-end; justify-content:space-between; gap:6rem; margin-bottom:8rem; } } .services__note{ max-width:48rem; font-size:2.2rem; font-weight:500; line-height:1.5; color:var(--dim); } .svc-list li{ border-top:1px solid var(--line); } .svc-list li:last-child{ border-bottom:1px solid var(--line); } .svc{ position:relative; display:flex; flex-direction:column; gap:2rem; padding:3.5rem 2rem; overflow:hidden; transition:color .4s; } @media (min-width: 1024px){ .svc{ flex-direction:row; align-items:center; justify-content:space-between; gap:6rem; padding:4.5rem 4rem; } } .svc:hover{ color:#fff; } /* Фонът се разкрива с clip-path отдолу нагоре, като на референта */ .svc__bg{ position:absolute; inset:0; z-index:0; opacity:0; transform:scale(1.05); clip-path:inset(100% 0 0 0); transition:opacity .4s, transform 4s cubic-bezier(.5,1,.89,1), clip-path 1s var(--ease-expo); } .svc:hover .svc__bg{ opacity:1; transform:scale(1); clip-path:inset(0 0 0 0); } /* Снимката (--img) се включва чак когато секцията наближи viewport-а (клас .media-in от JS) — спестява ~500KB при първоначално зареждане. Без JS снимките са винаги включени. */ .svc__bg{ background-image:linear-gradient(rgba(21,23,23,.55), rgba(21,23,23,.55)), var(--img, none); background-size:cover; background-position:center; background-repeat:no-repeat; } .media-in .svc__bg--a, html:not(.has-js) .svc__bg--a{ --img:url("images/svc-prozorci.jpg"); } .media-in .svc__bg--b, html:not(.has-js) .svc__bg--b{ --img:url("images/svc-plazgashti.jpg"); } .media-in .svc__bg--c, html:not(.has-js) .svc__bg--c{ --img:url("images/svc-vrati.jpg"); } .media-in .svc__bg--d, html:not(.has-js) .svc__bg--d{ --img:url("images/svc-shtori.jpg"); } .svc__meta{ position:relative; z-index:1; display:flex; align-items:flex-start; gap:2rem; } @media (min-width: 1024px){ .svc__meta{ gap:3rem; flex:0 1 50rem; } } .svc__num{ font-size:2rem; font-weight:700; line-height:1.5; color:var(--accent-ink); transition:color .4s; } .svc:hover .svc__num{ color:rgba(255,255,255,.9); } .svc__text{ font-size:2rem; font-weight:500; line-height:1.5; color:var(--dim); transition:color .4s; max-width:48rem; } .svc:hover .svc__text{ color:rgba(255,255,255,.75); } .svc__name{ display:block; margin-bottom:.6rem; font-size:2.5rem; font-weight:700; letter-spacing:-.01em; color:var(--ink); transition:color .4s; } .svc:hover .svc__name{ color:#fff; } .svc__word{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:3rem; font-weight:500; font-size:clamp(4.6rem, 11vw, 11.5rem); line-height:.95; letter-spacing:-.04em; white-space:nowrap; } @media (min-width: 1024px){ .svc__word{ font-size:min(11.5rem, 6.9vw); letter-spacing:-.05em; flex:1 1 auto; min-width:0; } } .svc__word > span{ position:relative; display:inline-block; } .svc__word > span::after{ content:""; display:block; position:absolute; left:.04em; right:0; bottom:.02em; border-top:.0333em solid; transform:scaleX(0); transform-origin:left center; transition:transform 1s var(--ease-expo); } .svc:hover .svc__word > span::after{ transform:scaleX(1); } .svc__word svg{ width:.5em; height:.5em; flex:0 0 auto; opacity:0; transform:translateX(-10%); transition:opacity .4s, transform .8s; } .svc:hover .svc__word svg{ opacity:1; transform:translateX(0); } /* ============================================================ PROCESS — номерирани редове ============================================================ */ .steps{ margin-top:6rem; counter-reset:step; border-top:1px solid var(--line); } @media (min-width: 1024px){ .steps{ margin-top:8rem; } } .step{ display:flex; flex-direction:column; gap:1.5rem; padding:3.5rem 0; border-bottom:1px solid var(--line); } @media (min-width: 1024px){ .step{ flex-direction:row; align-items:baseline; gap:0; padding:5rem 0; } } .step__num{ min-width:4.6rem; font-size:2rem; font-weight:700; line-height:1.5; color:var(--accent-ink); } @media (min-width: 1024px){ .step__num{ align-self:flex-start; } } .step__name{ font-weight:600; font-size:clamp(3rem, 5vw, 4.2rem); line-height:1.15; letter-spacing:-.02em; } @media (min-width: 1024px){ .step__name{ margin-left:12rem; flex:1 0 auto; max-width:56rem; } } .step__text{ font-size:2.2rem; font-weight:500; line-height:1.5; color:var(--dim); } @media (min-width: 1024px){ .step__text{ flex:0 1 56rem; margin-left:auto; } } /* ============================================================ WORK — акордеон с ховър разширяване (grid-template-columns) ============================================================ */ .work__grid{ display:grid; gap:1rem; grid-template-columns:1fr; } @media (min-width: 1024px){ .work__grid{ grid-template-columns:1fr 1fr 1fr 1fr; transition:grid-template-columns 1s var(--ease-expo); } .work__grid:has(.work__item:nth-child(1):hover){ grid-template-columns:1.8fr 1fr 1fr 1fr; } .work__grid:has(.work__item:nth-child(2):hover){ grid-template-columns:1fr 1.8fr 1fr 1fr; } .work__grid:has(.work__item:nth-child(3):hover){ grid-template-columns:1fr 1fr 1.8fr 1fr; } .work__grid:has(.work__item:nth-child(4):hover){ grid-template-columns:1fr 1fr 1fr 1.8fr; } } .work__item{ position:relative; height:34rem; overflow:hidden; border-radius:.6rem; } @media (min-width: 1024px){ .work__item{ height:56rem; } } /* Снимки от обектите (същите файлове като в „Услуги“) + затъмняване в долния край за четимост на надписите */ .work__img{ position:absolute; inset:0; transform:scale(1.01); transition:transform 1.2s var(--ease-expo); } .work__item:hover .work__img{ transform:scale(1.06); } .work__img{ background-image:linear-gradient(180deg, rgba(21,23,23,.05), rgba(21,23,23,.55)), var(--img, none); background-size:cover; background-position:center; background-repeat:no-repeat; } .media-in .work__img--a, html:not(.has-js) .work__img--a{ --img:url("images/work-hs.jpg"); } .media-in .work__img--b, html:not(.has-js) .work__img--b{ --img:url("images/work-prozorci.jpg"); } .media-in .work__img--c, html:not(.has-js) .work__img--c{ --img:url("images/work-vrata.jpg"); } .media-in .work__img--d, html:not(.has-js) .work__img--d{ --img:url("images/work-shtori.jpg"); } .work__cap{ position:absolute; left:0; right:0; bottom:0; z-index:1; padding:2.5rem; color:#fff; } .work__name{ display:block; font-size:2.4rem; font-weight:600; letter-spacing:-.01em; line-height:1.2; } .work__place{ display:block; margin-top:.8rem; font-size:1.8rem; font-weight:500; color:rgba(255,255,255,.65); } @media (min-width: 1024px){ .work__place{ opacity:0; transition:opacity .4s; } .work__item:hover .work__place{ opacity:1; } } /* ============================================================ QUOTE — серифен цитат в стила на testimonials ============================================================ */ .quote{ position:relative; overflow:hidden; /* гигантският знак се подрязва в ръба на секцията */ padding:10rem 0; background:var(--alt); } @media (min-width: 1024px){ .quote{ padding:15rem 0; } } /* Гигантски кавичен знак — воден знак във фона на секцията, закачен в горния ляв ъгъл и леко излизащ извън кадъра */ .quote::before{ content:"\201C"; position:absolute; top:-.14em; left:-.06em; font-family:var(--serif); font-weight:500; font-size:clamp(32rem, 55vw, 58rem); line-height:1; color:var(--accent-ink); opacity:.1; pointer-events:none; } .quote blockquote{ position:relative; /* съдържанието стои над водния знак */ max-width:96rem; margin:0 auto; text-align:center; } /* Портрет на управителя — кръгъл, с тънък концентричен тийл ринг */ .quote__avatar{ width:11rem; height:11rem; margin:0 auto 5rem; border-radius:50%; overflow:hidden; outline:1px solid var(--accent-ink); outline-offset:.9rem; } @media (min-width: 1024px){ .quote__avatar{ width:14rem; height:14rem; margin-bottom:6rem; } } .quote__avatar img{ width:100%; height:100%; object-fit:cover; object-position:center 22%; } .quote__text{ font-family:var(--serif); font-weight:500; font-size:clamp(2.8rem, 4.5vw, 3.8rem); line-height:1.2; letter-spacing:-.02em; } .quote__author{ margin-top:4rem; font-family:var(--serif); font-weight:500; font-size:1.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); } .quote__sep{ margin:0 1.5rem; color:var(--muted); } /* ============================================================ CONTACT ============================================================ */ .contact .title{ margin-inline:auto; text-align:center; } .contact__grid{ margin-top:8rem; display:grid; gap:6rem; } @media (min-width: 1024px){ .contact__grid{ margin-top:12rem; grid-template-columns:1fr 1fr; gap:12rem; align-items:start; } } .contact__info{ border-top:1px solid var(--line); } .contact__row{ display:flex; flex-direction:column; gap:.5rem; padding:2.5rem 0; border-bottom:1px solid var(--line); } @media (min-width: 1024px){ .contact__row{ flex-direction:row; align-items:baseline; gap:4rem; padding:3rem 0; } } a.contact__row{ transition:opacity .3s; } a.contact__row:hover{ opacity:.55; } .contact__label{ font-size:1.8rem; font-weight:500; color:var(--muted); } @media (min-width: 1024px){ .contact__label{ flex:0 0 18rem; } } .contact__value{ font-size:2.5rem; font-weight:500; letter-spacing:-.01em; line-height:1.4; } /* ---------- Форма ---------- */ .form__title{ font-size:2.8rem; font-weight:600; letter-spacing:-.01em; margin-bottom:3rem; } .field{ margin-bottom:2.5rem; } .field label{ display:block; margin-bottom:1rem; font-size:1.6rem; font-weight:500; color:var(--dim); } .field input, .field textarea{ width:100%; padding:1.6rem 2.4rem; font:inherit; font-size:1.9rem; font-weight:500; color:var(--ink); background:var(--field-bg); border:0; border-radius:100px; transition:background-color .3s, box-shadow .3s; } .field input:focus, .field textarea:focus{ outline:none; background:var(--field-bg-focus); box-shadow:inset 0 0 0 1.5px var(--accent-ink); } .field.is-invalid input{ box-shadow:inset 0 0 0 1.5px var(--red); } .field textarea{ resize:vertical; min-height:12rem; border-radius:2.4rem; } .form__note{ margin-top:1.5rem; font-size:1.7rem; color:var(--dim); } .form__note.is-ok{ color:var(--ink); } /* ============================================================ FOOTER ============================================================ */ /* Футърът е винаги тъмен, независимо от темата — тъмните токени са скопирани локално и се наследяват от цялото му съдържание */ .footer{ --ink: #f2f3f3; --bg: #0e1010; --line: #242727; --muted: #5f6565; --dim: rgba(242,243,243,.55); --accent-ink:#8fc0c2; --scrim: rgba(14,16,16,.85); color:var(--ink); background:var(--bg); background:linear-gradient(300deg, var(--bg), color-mix(in srgb, var(--bg) 95%, var(--accent-ink))); border-top:1px solid var(--line); padding:6rem 0 3rem; } /* В тъмния футър винаги стои светлият вариант на логото */ .footer .only-light{ display:none !important; } .footer .only-dark{ display:block !important; } @media (min-width: 1024px){ .footer{ padding:10rem 0 4rem; } } .footer__top{ display:grid; gap:4rem; } @media (min-width: 1024px){ .footer__top{ grid-template-columns:2fr 1fr 1fr; gap:6rem; } } .footer__logo{ display:block; } .footer__logo img{ display:block; height:3.2rem; width:auto; } .footer__brand p{ margin-top:1.5rem; font-size:1.8rem; font-weight:500; line-height:1.6; color:var(--dim); } .footer__nav, .footer__meta{ display:flex; flex-direction:column; gap:1.2rem; align-items:flex-start; } .footer__nav a, .footer__meta a{ font-size:1.9rem; font-weight:500; } .footer__meta a{ color:var(--dim); } .footer__bottom{ margin-top:6rem; padding-top:2.5rem; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:2rem; font-size:1.6rem; color:var(--dim); } .footer__top-link{ font-weight:500; color:var(--ink); } /* ============================================================ Reveal състояния (GSAP им дава живот; без JS всичко се вижда) ============================================================ */ .js [data-reveal]{ opacity:0; transform:translateY(3rem); } .js .hline__in{ transform:translateY(115%); } .js [data-hero-fade]{ opacity:0; transform:translateY(2rem); } /* Без JS (или без GSAP): hero-то е статично, нищо не е скрито */ html:not(.js) .hero{ height:auto; margin-bottom:0; } html:not(.js) .hero__pin{ position:relative; height:auto; min-height:0; padding:calc(var(--header-h) + 6rem) 0 6rem; } html:not(.js) .hero__content{ height:auto; padding:0 2.5rem; } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } .js [data-reveal], .js .hline__in, .js [data-hero-fade]{ opacity:1; transform:none; } .hero{ height:auto; margin-bottom:0; } .hero__pin{ position:relative; height:auto; padding-bottom:6rem; } }