/* ============================================================ ADORIA DESIGN STUDIO — стилове Палитрата е извлечена от Pinterest борда: шоколад / мока / крем / бордо / маслинено / злато ============================================================ */ :root { /* --- ЦВЕТОВЕ (смяна тук = смяна навсякъде) --- */ --ink: #1C1410; /* почти черно-кафяво — основен текст */ --chocolate: #2E1F17; /* тъмен шоколад — тъмните секции и менюто */ --mocha: #6B4F3F; /* мока — второстепенен текст */ --bordo: #5E2130; /* бордо — рядък акцент */ --olive: #4A4A2F; /* маслинено — рядък акцент */ --gold: #B08D57; /* злато/бронз — тънки линии, номера */ --cream: #EFE7DD; /* крем — фон на светлите секции */ --ivory: #F7F2EB; /* слонова кост — основен фон */ --line: rgba(28, 20, 16, .14); /* --- ШРИФТОВЕ --- script = знакът „Adoria“ горе в средата serif = заглавия и дълъг текст sans = малките главни надписи, менюто, бутоните Сменяш шрифта на знака САМО тук. Вариантите, които съм заредил в на страниците: Italianno, Mrs Saint Delafield, Style Script, Pinyon Script. Напиши името на този, който избереш. */ --font-script: 'Italianno', cursive; --font-serif: 'Cormorant Garamond', Georgia, serif; --font-sans: 'Jost', 'Helvetica Neue', Arial, sans-serif; --bar: 78px; /* височина на лентата горе */ } /* --- основа --- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--ivory); color: var(--ink); font-family: var(--font-sans); font-weight: 300; font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 300; line-height: 1.25; margin: 0; letter-spacing: .01em; } h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); } h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); } h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); } /* малък главен надпис — на Sire e навсякъде така */ .eyebrow { font-family: var(--font-sans); font-size: .68rem; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; color: var(--mocha); } .wrap { max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px); } .narrow { max-width: 760px; margin: 0 auto; } section { padding: clamp(70px, 11vw, 150px) 0; } /* ============================================================ ЛЕНТА ГОРЕ ============================================================ */ .bar { position: fixed; inset: 0 0 auto 0; height: var(--bar); z-index: 60; /* Три колони, като страничните две са ЗАДЪЛЖИТЕЛНО еднакви (1fr ... 1fr). Така знакът в средата стои точно по средата на екрана, без значение че „МЕНЮ“ е по-широко от „БГ / EN“. (Преди беше space-between — там трите елемента се разполагат на равни разстояния помежду си, не спрямо екрана, и знакът излизаше с 16 px вдясно. На телефон това се виждаше.) */ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 clamp(18px, 4vw, 44px); color: #fff; /* по подразбиране бяла — над снимки и тъмни секции */ transition: color .35s ease, opacity .4s; } .bar a, .bar button { color: inherit; } /* Лентата е БЯЛА над снимките и тъмните секции и става ТЪМНА, щом отдолу мине кремав фон. Класът се слага от js/app.js (setBarContrast) според това коя секция минава под лентата — затова знакът, менюто и БГ/EN винаги се четат. */ .bar--dark { color: var(--ink); } /* при отворено меню фонът е шоколад — лентата пак е бяла */ body.menu-open .bar { color: #fff; } .bar__side { display: flex; align-items: center; gap: 12px; background: none; border: 0; cursor: pointer; font-family: var(--font-sans); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; } .bar__side--right { justify-content: flex-end; } .bar .wordmark { justify-self: center; } .burger { display: inline-flex; flex-direction: column; gap: 5px; width: 20px; } .burger i { display: block; height: 1px; background: currentColor; transition: transform .35s; } /* знакът „Adoria“ */ .wordmark { font-family: var(--font-script); font-size: clamp(2.4rem, 4vw, 3.2rem); line-height: 1; letter-spacing: .01em; padding-bottom: .18em; /* опашките на ръкописния шрифт слизат надолу */ } /* когато знакът е файл, а не изписан текст */ .wordmark img { height: clamp(40px, 5vw, 58px); width: auto; } /* Знакът горе в лентата. Рисунката се ползва като изрезка (маска), а не като снимка — така приема цвета на лентата и става ту бяла, ту тъмна. Файлът е img/adoria.svg; съотношението му е 403:235. */ .wordmark__mark { display: block; /* На телефон 5vw е под 20 px, затова долната граница държи размера. Вдигната е от 40 на 52 px — на малък екран знакът трябва да се чете. */ height: clamp(52px, 5vw, 58px); aspect-ratio: 403 / 235; background: currentColor; /* самата рисунка (mask-image) се задава от js/app.js върху елемента — пътят в content.js е спрямо страницата, а не спрямо този файл */ -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .foot .wordmark img { height: clamp(52px, 7vw, 78px); margin: 0 auto; } /* ============================================================ МЕНЮ НА ЦЯЛ ЕКРАН ============================================================ */ .menu { position: fixed; inset: 0; z-index: 55; background: var(--chocolate); color: var(--cream); display: flex; align-items: center; clip-path: inset(0 0 100% 0); transition: clip-path .75s cubic-bezier(.76,0,.24,1); pointer-events: none; } body.menu-open .menu { clip-path: inset(0 0 0 0); pointer-events: auto; } body.menu-open { overflow: hidden; } .menu__list { list-style: none; margin: 0; padding: 0 clamp(24px, 8vw, 110px); width: 100%; } .menu__list li { border-bottom: 1px solid rgba(239,231,221,.14); opacity: 0; transform: translateY(22px); transition: opacity .5s, transform .5s; } body.menu-open .menu__list li { opacity: 1; transform: none; } body.menu-open .menu__list li:nth-child(1) { transition-delay: .28s; } body.menu-open .menu__list li:nth-child(2) { transition-delay: .36s; } body.menu-open .menu__list li:nth-child(3) { transition-delay: .44s; } body.menu-open .menu__list li:nth-child(4) { transition-delay: .52s; } body.menu-open .menu__list li:nth-child(5) { transition-delay: .60s; } .menu__link { display: flex; align-items: baseline; gap: clamp(18px, 4vw, 46px); padding: clamp(14px, 2.4vw, 26px) 0; font-family: var(--font-serif); font-size: clamp(1.9rem, 5.5vw, 3.4rem); transition: padding-left .4s, color .4s; } .menu__link:hover { padding-left: 20px; color: var(--gold); } .menu__num { font-family: var(--font-sans); font-size: .7rem; letter-spacing: .18em; color: var(--gold); } .menu__foot { position: absolute; left: 0; right: 0; bottom: clamp(24px, 5vw, 54px); padding: 0 clamp(24px, 8vw, 110px); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: .78rem; letter-spacing: .1em; color: rgba(239,231,221,.72); } /* превключвател БГ / EN */ .lang { display: inline-flex; gap: 8px; align-items: center; letter-spacing: .14em; font-size: .75rem; } .lang button { background: none; border: 0; cursor: pointer; color: inherit; font: inherit; opacity: .5; padding: 2px; } .lang button.on { opacity: 1; border-bottom: 1px solid currentColor; } /* ============================================================ ГЕРОЙ — снимки на цял екран, които се сменят с бавно преливане ============================================================ */ .hero { position: relative; height: 100svh; min-height: 540px; overflow: hidden; background: var(--chocolate); } .hero__slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.06); transition: opacity 1.1s ease, transform 5.5s linear; } .hero__slide.on { opacity: 1; transform: scale(1); } .hero__slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28,20,16,.32), rgba(28,20,16,.1) 40%, rgba(28,20,16,.45)); } /* когато още няма качени снимки */ .hero__empty { position: absolute; inset: 0; background: linear-gradient(150deg, var(--chocolate), var(--mocha) 60%, var(--bordo)); display: grid; place-items: center; text-align: center; padding: 30px; } .hero__empty p { color: rgba(239,231,221,.6); font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; } .hero__line { position: absolute; left: 0; right: 0; bottom: clamp(110px, 18vh, 190px); text-align: center; color: #fff; padding: 0 24px; font-family: var(--font-serif); font-size: clamp(1.9rem, 4.4vw, 3.4rem); text-shadow: 0 2px 30px rgba(0,0,0,.35); } .hero__scroll { position: absolute; left: 0; right: 0; bottom: clamp(30px, 6vh, 56px); text-align: center; color: rgba(255,255,255,.8); font-size: .66rem; letter-spacing: .24em; text-transform: uppercase; } .hero__scroll span { display: block; width: 1px; height: 42px; margin: 12px auto 0; background: rgba(255,255,255,.5); animation: drop 2.4s infinite; } @keyframes drop { 0%{transform:scaleY(0);transform-origin:top} 45%{transform:scaleY(1);transform-origin:top} 55%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} } /* точките за смяна на снимката */ .hero__dots { position: absolute; right: clamp(18px,4vw,44px); bottom: clamp(30px,6vh,56px); display: flex; gap: 9px; } .hero__dots button { width: 7px; height: 7px; border-radius: 50%; border: 1px solid rgba(255,255,255,.7); background: none; padding: 0; cursor: pointer; } .hero__dots button.on { background: #fff; } /* при повече от десет снимки точките се смаляват, за да не запълнят реда */ .hero__dots--many { gap: 6px; } .hero__dots--many button { width: 5px; height: 5px; } /* ============================================================ МАНИФЕСТ ============================================================ */ .manifesto { text-align: center; } .manifesto p { font-family: var(--font-serif); font-size: clamp(1.25rem, 2.3vw, 1.85rem); line-height: 1.6; color: var(--chocolate); margin: 26px 0 0; } .rule { width: 46px; height: 1px; background: var(--gold); margin: 40px auto 0; } /* ============================================================ РЕШЕТКА С ПРОЕКТИ ============================================================ */ .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(22px, 4vw, 60px) clamp(18px, 3vw, 40px); } @media (max-width: 720px) { .grid { grid-template-columns: 1fr; } } .card { display: block; } .card__frame { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--cream); } .card__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s cubic-bezier(.2,.7,.3,1); } .card:hover .card__frame img { transform: scale(1.05); } .card__ph { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 20px; background: linear-gradient(150deg, var(--cream), #e2d6c8); color: var(--mocha); } .card__ph span { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; } .card__label { text-align: center; padding-top: 18px; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; } /* ============================================================ ТЪМНА СЕКЦИЯ / ПРОЦЕС / УСЛУГИ ============================================================ */ .dark { background: var(--chocolate); color: var(--cream); } .dark .eyebrow { color: var(--gold); } .dark h2 { color: var(--cream); } .steps { list-style: none; margin: 50px 0 0; padding: 0; } .steps li { display: grid; grid-template-columns: 64px 1fr; gap: clamp(14px,3vw,36px); padding: 26px 0; border-top: 1px solid rgba(239,231,221,.16); } .steps li:last-child { border-bottom: 1px solid rgba(239,231,221,.16); } .steps .n { font-size: .72rem; letter-spacing: .16em; color: var(--gold); padding-top: .5em; } .steps h3 { color: inherit; } .steps p { margin: 6px 0 0; color: rgba(239,231,221,.72); font-size: .95rem; } .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(26px, 4vw, 56px); margin-top: 50px; } .cols h3 { margin-bottom: 8px; } .cols p { color: var(--mocha); font-size: .95rem; margin: 0; } .cols .item { border-top: 1px solid var(--line); padding-top: 22px; } /* ============================================================ СТРАНИЦА НА ПРОЕКТ ============================================================ */ .page-top { padding-top: calc(var(--bar) + clamp(50px, 9vw, 110px)); } /* --- ГАЛЕРИЯТА НА ПРОЕКТА --- Снимките са на цялата ширина на екрана. Изправените кадри получават клас .half от js/app.js и застават по две една до друга. */ .gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(10px, 1.4vw, 22px); margin: clamp(40px, 7vw, 90px) auto 0; /* по-широко от текста (760px), но с въздух до ръба на екрана */ max-width: 1180px; padding: 0 clamp(20px, 5vw, 64px); width: 100%; } .gallery img { grid-column: 1 / -1; /* по подразбиране — цяла ширина */ width: 100%; height: auto; display: block; } .gallery img.half { grid-column: span 1; } @media (max-width: 700px) { .gallery img.half { grid-column: 1 / -1; } /* на телефон всичко е едно под друго */ } /* описанието на проекта */ .project-text { margin-top: 30px; } .project-text p { color: var(--mocha); margin: 0 0 1.2em; text-align: left; } @media (min-width: 700px) { .project-text p { text-align: center; } } /* ============================================================ КОНТАКТИ И ФОРМА ============================================================ */ .form { display: grid; gap: 26px; margin-top: 44px; } .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; } @media (max-width: 620px) { .row2 { grid-template-columns: 1fr; } } .field label { display: block; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--mocha); margin-bottom: 8px; } .field input, .field select, .field textarea { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line); font-family: var(--font-serif); font-size: 1.1rem; color: var(--ink); padding: 8px 0; border-radius: 0; } .field textarea { resize: vertical; min-height: 110px; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--gold); } .btn { display: inline-block; border: 1px solid var(--ink); background: none; cursor: pointer; padding: 15px 40px; font-family: var(--font-sans); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; transition: background .4s, color .4s; } .btn:hover { background: var(--ink); color: var(--ivory); } .dark .btn { border-color: var(--cream); color: var(--cream); } .dark .btn:hover { background: var(--cream); color: var(--chocolate); } .contact-lines { display: grid; gap: 4px; margin-top: 34px; } .contact-lines a { font-family: var(--font-serif); font-size: clamp(1.3rem, 3vw, 2rem); border-bottom: 1px solid transparent; transition: border-color .4s; } .contact-lines a:hover { border-bottom-color: var(--gold); } /* ============================================================ ФУТЪР ============================================================ */ .foot { background: var(--chocolate); color: rgba(239,231,221,.7); padding: clamp(50px, 7vw, 80px) 0 40px; } .foot .wordmark { color: var(--cream); text-align: center; } .foot__row { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 40px; padding-top: 26px; border-top: 1px solid rgba(239,231,221,.14); font-size: .72rem; letter-spacing: .1em; } .foot a:hover { color: var(--gold); } /* ============================================================ ПОЯВЯВАНЕ ПРИ СКРОЛ ============================================================ */ .rise { opacity: 0; transform: translateY(26px); transition: opacity 1s cubic-bezier(.2,.7,.3,1), transform 1s cubic-bezier(.2,.7,.3,1); } .rise.seen { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition-duration: .01ms !important; } .rise { opacity: 1; transform: none; } } /* ============================================================ СТРАНИЦА „СТУДИОТО“ — цитат, подпис, био, екип ============================================================ */ .quote { margin: 0; font-family: var(--font-serif); font-size: clamp(1.35rem, 2.9vw, 2.15rem); line-height: 1.5; color: var(--chocolate); } /* кавичките: български „…“ , английски “…” */ .quote::before { content: '„'; } .quote::after { content: '“'; } html[lang="en"] .quote::before { content: '“'; } html[lang="en"] .quote::after { content: '”'; } /* подписът „Аделина“ — със същия ръкописен шрифт като знака на студиото */ .sig { font-family: var(--font-script); font-size: clamp(2.6rem, 5vw, 4rem); line-height: 1; color: var(--mocha); margin-top: clamp(26px, 4vw, 44px); } .about { margin-top: 34px; } .about p { color: var(--mocha); margin: 0 0 1.3em; } .about p:first-child { font-size: 1.08rem; color: var(--ink); } .team { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: clamp(18px, 3vw, 44px); } /* без снимки екипът е текст — колоните стават по-тесни за четене и се центрират */ .team--text { max-width: 900px; margin: 0 auto; gap: clamp(34px, 5vw, 70px); } .team--text .member { text-align: left; } .team--text .member__name, .team--text .member__role { text-align: left; } .member__text { margin-top: 14px; color: var(--mocha); font-size: .95rem; } .member__text p { margin: 0 0 .9em; } .member__text p:last-child { margin-bottom: 0; } @media (max-width: 720px) { .team { grid-template-columns: 1fr; max-width: 340px; margin: 0 auto; } .team--text { max-width: 520px; } } .member__frame { position: relative; overflow: hidden; aspect-ratio: 3 / 4; background: var(--cream); } .member__frame img { width: 100%; height: 100%; object-fit: cover; } .member__name { text-align: center; padding-top: 16px; font-family: var(--font-serif); font-size: 1.2rem; } .member__role { text-align: center; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--mocha); } /* подпис като картинка (файл в img/) */ .sig__img { display: inline-block; width: auto; max-height: clamp(28px, 3.6vw, 44px); margin: 0 auto; } /* ако подписът е черен PNG на бял фон, махни коментара на следващия ред, за да се слее с кремавия фон на сайта: .sig__img { mix-blend-mode: multiply; } */ /* ============================================================ СТРАНИЦА „КОНТАКТИ“ — видове запитване, данни, изскачаща форма ============================================================ */ .contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(40px, 7vw, 110px); align-items: start; } @media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr; } } /* трите реда отляво */ .topic { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: clamp(16px, 2.4vw, 26px) 0; cursor: pointer; color: inherit; font-family: var(--font-serif); font-weight: 300; font-size: clamp(1.5rem, 3.2vw, 2.4rem); line-height: 1.25; transition: padding-left .4s, color .4s; } .topic:first-child { border-top: 1px solid var(--line); } .topic:hover { padding-left: 16px; color: var(--gold); } /* данните за връзка отдясно */ .details { margin: 26px 0 0; } .details > div { display: grid; grid-template-columns: 92px 1fr; gap: 14px; padding: 9px 0; } .details dt { font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--mocha); padding-top: .35em; } .details dd { margin: 0; font-family: var(--font-serif); font-size: 1.12rem; } .details a { border-bottom: 1px solid transparent; transition: border-color .35s; } .details a:hover { border-bottom-color: var(--gold); } /* двете опции: Имейл / Форма */ .ways { display: grid; gap: 2px; margin-top: 34px; border-top: 1px solid var(--line); padding-top: 22px; } .ways a, .ways button { display: flex; align-items: center; justify-content: space-between; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 15px 0; cursor: pointer; color: inherit; width: 100%; font-family: var(--font-sans); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; transition: padding-left .4s, color .4s; } .ways a:hover, .ways button:hover { padding-left: 12px; color: var(--gold); } .ways span { transition: transform .4s; } .ways a:hover span, .ways button:hover span { transform: translateX(6px); } /* печатът долу */ .stamp { text-align: center; padding: 0 24px clamp(60px, 9vw, 110px); } .stamp img { display: inline-block; width: auto; height: clamp(110px, 16vw, 180px); opacity: .9; } /* ============================================================ ИЗСКАЧАЩАТА ФОРМА ============================================================ */ .sheet { position: fixed; inset: 0; z-index: 70; background: var(--chocolate); color: var(--cream); overflow-y: auto; padding: clamp(60px, 9vw, 100px) clamp(20px, 5vw, 40px) clamp(50px, 8vw, 90px); } body.sheet-open { overflow: hidden; } .sheet__inner { max-width: 720px; margin: 0 auto; position: relative; } .sheet__close { position: fixed; top: clamp(16px, 3vw, 28px); right: clamp(16px, 4vw, 40px); background: none; border: 0; cursor: pointer; color: var(--cream); font-size: 2rem; line-height: 1; padding: 8px; transition: color .3s; } .sheet__close:hover { color: var(--gold); } .sheet__lead { font-family: var(--font-serif); font-size: clamp(1.25rem, 2.6vw, 1.85rem); line-height: 1.45; margin: 0 0 clamp(30px, 5vw, 50px); } /* полетата вътре в тъмния панел */ .sheet .field label { color: rgba(239,231,221,.7); } .sheet .field input, .sheet .field select, .sheet .field textarea { color: var(--cream); border-bottom-color: rgba(239,231,221,.28); } .sheet .field input::placeholder { color: rgba(239,231,221,.35); } .sheet .field select option { background: var(--chocolate); color: var(--cream); } .sheet .field input:focus, .sheet .field select:focus, .sheet .field textarea:focus { border-bottom-color: var(--gold); } .hint { font-size: .82rem; color: rgba(239,231,221,.6); margin: 0 0 10px; letter-spacing: 0; text-transform: none; } /* бутончетата за избор */ .chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; } .chip { position: relative; } .chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .chip span { display: inline-block; padding: 11px 20px; cursor: pointer; border: 1px solid rgba(239,231,221,.3); font-size: .78rem; letter-spacing: .06em; color: rgba(239,231,221,.85); transition: background .3s, color .3s, border-color .3s; } .chip input:checked + span { background: var(--cream); color: var(--chocolate); border-color: var(--cream); } .chip input:focus-visible + span { border-color: var(--gold); } /* печатът в тъмното дъно на всяка страница */ .stamp--foot { padding: 0 0 clamp(18px, 3vw, 30px); } .stamp--foot img { height: clamp(96px, 12vw, 140px); opacity: .95; } /* страницата след изпращане на формата */ .thanks { padding-bottom: clamp(70px, 11vw, 150px); } .thanks__seal { display: inline-block; width: auto; height: clamp(120px, 18vw, 190px); opacity: .9; } /* ============================================================ ПОЯВЯВАНЕ НА СНИМКИТЕ В ГАЛЕРИЯТА ПРИ СКРОЛ По-бързо от останалите елементи — при 26 кадъра бавното появяване се усеща като че сайтът се бави. ============================================================ */ .gallery img.rise { opacity: 0; transform: translateY(26px) scale(1.02); transition: opacity .65s cubic-bezier(.22,.68,.28,1), transform .8s cubic-bezier(.22,.68,.28,1); } .gallery img.rise.seen { opacity: 1; transform: none; } /* ============================================================ КАРТА НА ПРОЕКТ — сменя снимката при посочване ============================================================ */ .card__frame img { position: absolute; inset: 0; } .card__img--alt { opacity: 0; transition: opacity .8s ease; } .card__img--alt.on { opacity: 1; } /* ============================================================ КРЪГЧЕТО ВМЕСТО СТРЕЛКА Само на устройства с истинска мишка — на телефон и таблет няма показалец и кръгчето би стояло залепено в ъгъла. ============================================================ */ @media (hover: hover) and (pointer: fine) { body { cursor: none; } body a, body button, body .card, body .topic, body input, body select, body textarea, body label { cursor: none; } .cursor { position: fixed; top: 0; left: 0; z-index: 200; width: 26px; height: 26px; margin: -13px 0 0 -13px; border: 1px solid var(--gold); border-radius: 50%; pointer-events: none; transition: width .3s, height .3s, margin .3s, background-color .3s, border-color .3s, opacity .3s; will-change: transform; } /* уголемява се и се запълва, когато е върху нещо, което се натиска */ .cursor.on { width: 56px; height: 56px; margin: -28px 0 0 -28px; background: rgba(176, 141, 87, .18); border-color: var(--gold); } /* върху текстово поле става тънка чертица */ .cursor.text { width: 2px; height: 26px; margin: -13px 0 0 -1px; border-radius: 0; background: var(--gold); border-color: transparent; } .cursor.hidden { opacity: 0; } }