/* ══════════════════════════════════════════════════════════════════════════ Христофор Георгиев — портфолио. Vanilla CSS, no build step. Монохром: черно и бяло, една сива. Нула акцентни цветове — тежестта идва от размера, празното място и движението, не от цвят. Тъмната тема е по подразбиране; .lt на обръща страницата. Без бисквитки, без localStorage, без трети страни — затова няма банер. ══════════════════════════════════════════════════════════════════════════ */ @font-face{font-family:'Geologica';src:url('fonts/geologica-var-cyrillic.woff2') format('woff2');font-weight:200 700;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'Geologica';src:url('fonts/geologica-var-latin.woff2') format('woff2');font-weight:200 700;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F} @font-face{font-family:'Source Sans 3';src:url('fonts/sourcesans-var-cyrillic.woff2') format('woff2');font-weight:300 700;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'Source Sans 3';src:url('fonts/sourcesans-var-latin.woff2') format('woff2');font-weight:300 700;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F} /* ── ТЕМА ── */ html{ --tbg:#000; --tfg:#fff; --t60:rgba(255,255,255,.58); --t40:rgba(255,255,255,.34); --t16:rgba(255,255,255,.16); --tline:rgba(255,255,255,.13); --tfill:rgba(255,255,255,.045); --e:cubic-bezier(.32,.72,0,1); --e-out:cubic-bezier(.23,1,.32,1); } html.lt{ --tbg:#fff; --tfg:#000; --t60:rgba(0,0,0,.6); --t40:rgba(0,0,0,.38); --t16:rgba(0,0,0,.14); --tline:rgba(0,0,0,.12); --tfill:rgba(0,0,0,.035); } /* Кросфейд при смяна на темата. Само цветовете — нищо не се мести. */ body,body *{transition:background-color .35s var(--e),color .35s var(--e),border-color .35s var(--e)} *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;background:var(--tbg);scrollbar-width:none} /* Навигацията е fixed и висока 73px. Без това #services застава 43px ПОД нея при скок по котва - точно секцията с цените. Измерено. */ section[id],div[id]{scroll-margin-top:104px} body{background:var(--tbg);color:var(--tfg); font:400 clamp(15px,1.05vw,17px)/1.55 'Source Sans 3',system-ui,sans-serif; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;overflow-x:hidden} ::selection{background:var(--tfg);color:var(--tbg)} ::-webkit-scrollbar{width:0;height:0} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} a:focus-visible,button:focus-visible{outline:2px solid var(--tfg);outline-offset:4px;border-radius:2px} .wrap{max-width:1560px;margin:0 auto;padding:0 clamp(20px,3.6vw,58px)} .sec{padding:clamp(96px,13vw,210px) 0} .lab{font:500 clamp(10px,.78vw,11.5px)/1 'Source Sans 3',sans-serif;letter-spacing:.2em; text-transform:uppercase;color:var(--t40)} /* ── ТИПОГРАФИЯ ── */ /* Страницата говори български навсякъде - без изключения по размер. включва OpenType locl и Geologica носи формите: т става m, и става u, д става g, в става ʙ. По-рано те бяха изключени на .xl и .lg, защото заглавието изглеждаше омекнало на 124px. Това беше грешна диагноза: омекотяваше го трекингът, не буквите. .xl стоеше на -.028em, докато .num b на 118px беше на -.05em - най-едрият текст на страницата беше и най- разреденият. С поправена стълба заглавието е по-плътно И говори български. Четирите комбинации са рендирани и гледани една до друга, не по памет. Логото остава ръкописно нарочно: българският читател го чете като свое, а на английски формите изобщо не се появяват - EN бутонът транслитерира надписа ('Христофор Георгиев' -> 'Hristofor Georgiev'), тоест там няма кирилица, върху която locl да се приложи. Кликнато и измерено, не предположено. Довод срещу, който не отпада: буквите на текстов регистър върху идентичност са спорни. Ако някога се маха - маха се само от логото. */ .xl{font:500 clamp(38px,7.4vw,124px)/.94 'Geologica',sans-serif;letter-spacing:-.05em} .lg{font:500 clamp(28px,4.4vw,68px)/1.02 'Geologica',sans-serif;letter-spacing:-.038em} .dim{color:var(--t60)} /* ── КУРСОР ── */ /* cursor:none идва от клас, който JS слага. Ако JS не тръгне, курсорът си остава. */ @media (hover:hover) and (pointer:fine){ html.cur,html.cur *{cursor:none!important} } .cursor{position:fixed;top:0;left:0;width:9px;height:9px;border-radius:50%; background:#fff;mix-blend-mode:difference;pointer-events:none;z-index:200; transform:translate(-50%,-50%);opacity:0; transition:width .3s var(--e-out),height .3s var(--e-out),opacity .25s} .cursor.on{opacity:1} .cursor.grow{width:62px;height:62px} /* ── НАВИГАЦИЯ ── */ nav{position:fixed;top:0;left:0;right:0;z-index:90;display:flex;align-items:center; gap:clamp(14px,2.4vw,38px);padding:14px clamp(20px,3.6vw,58px); background:var(--tbg); background:color-mix(in srgb,var(--tbg) 74%,transparent);backdrop-filter:blur(16px); border-bottom:1px solid var(--tline)} nav .brand{display:inline-flex;align-items:center;min-height:44px; font:600 clamp(13px,1vw,15px)/1 'Geologica',sans-serif;letter-spacing:-.01em;white-space:nowrap} nav .links{display:flex;gap:clamp(12px,1.6vw,26px);margin-left:auto} nav .links a{font:400 13px/1 'Source Sans 3',sans-serif;color:var(--t60); display:inline-flex;align-items:center;min-height:44px;transition:color .2s var(--e)} nav .links a:hover{color:var(--tfg)} nav .tt{margin-left:clamp(8px,1.4vw,22px);width:44px;height:44px;display:grid;place-items:center; background:none;border:0;color:var(--tfg);border-radius:50%} nav .tt i{width:13px;height:13px;border-radius:50%;border:1.5px solid currentColor; background:linear-gradient(90deg,currentColor 50%,transparent 50%);display:block; transition:transform .45s var(--e)} html.lt nav .tt i{transform:rotate(180deg)} /* Езикът показва накъде ВОДИ, не къде си — бутон с надпис EN превключва към английски. Обратното („BG" докато си на български") кара човек да натисне и да не се случи нищо. */ nav .lang{margin-left:clamp(8px,1.4vw,22px);min-width:44px;height:44px;padding:0 10px; display:inline-flex;align-items:center;justify-content:center;background:none; border:1px solid var(--tline);border-radius:999px;color:var(--t60);cursor:pointer; font:600 12px/1 'Source Sans 3',sans-serif;letter-spacing:.06em; transition:color .2s var(--e),border-color .2s var(--e)} nav .lang:hover{color:var(--tfg);border-color:var(--tfg)} nav .lang+.tt{margin-left:clamp(4px,.8vw,10px)} @media(max-width:380px){nav .lang{min-width:38px;padding:0 7px;font-size:11px}} nav .go{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px; border:1px solid var(--tline);font:500 13px/1 'Source Sans 3',sans-serif;white-space:nowrap; transition:background-color .25s var(--e),color .25s var(--e)} nav .go:hover{background:var(--tfg);color:var(--tbg)} nav .go{background:none;color:inherit;cursor:pointer} @media(max-width:860px){nav .links{display:none}} @media(max-width:380px){nav{gap:8px;padding:12px 14px}nav .go{padding:0 12px;font-size:12px}nav .tt{width:38px}} /* ── ПАНЕЛ ЗА КОНТАКТ ── */ /* right:0, не left: на 360px панелът иначе излиза извън екрана вдясно. */ .cta{position:relative} .pop{position:absolute;top:calc(100% + 10px);right:0;min-width:226px; background:var(--tbg);border:1px solid var(--tline);border-radius:12px;padding:6px; display:grid;gap:2px;box-shadow:0 20px 54px rgba(0,0,0,.45);z-index:95} .pop[hidden]{display:none} .pl{display:grid;gap:4px;padding:10px 12px;border-radius:8px; transition:background-color .2s var(--e)} .pl:hover{background:var(--tfill)} .pk{font:500 9.5px/1 'Source Sans 3',sans-serif;letter-spacing:.2em;text-transform:uppercase; color:var(--t40)} .pv{font:500 14px/1.2 'Source Sans 3',sans-serif;color:var(--tfg);white-space:nowrap} /* ── ПОТВЪРЖДЕНИЕ ЗА КОПИРАНЕ ── */ .toast{position:fixed;left:50%;bottom:26px;z-index:210;pointer-events:none; background:var(--tfg);color:var(--tbg);padding:11px 19px;border-radius:999px; font:500 13px/1 'Source Sans 3',sans-serif;white-space:nowrap; opacity:0;transform:translate(-50%,14px); transition:opacity .25s var(--e),transform .35s var(--e-out)} .toast.on{opacity:1;transform:translate(-50%,0)} /* ── ГЕРОЙ ── */ .hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end; padding:130px 0 clamp(30px,4vw,58px);position:relative;overflow:hidden} /* Петното следва мишката. Радиален градиент, нищо повече — без слой, без blend. */ .spot{position:absolute;width:60vw;height:60vw;max-width:820px;max-height:820px; left:0;top:0;pointer-events:none;opacity:0;transform:translate(-50%,-50%); background:radial-gradient(circle,color-mix(in srgb,var(--tfg) 9%,transparent) 0%,transparent 62%); transition:opacity .6s var(--e)} .hero .wrap{position:relative;z-index:2;width:100%} .hero .top{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:clamp(30px,6vw,90px)} .hero h1{margin-bottom:clamp(22px,3vw,40px);max-width:15ch} .hero .foot{display:flex;justify-content:space-between;align-items:flex-end;gap:clamp(20px,4vw,60px);flex-wrap:wrap} .hero .foot p{color:var(--t60);max-width:34ch;font-size:clamp(15px,1.15vw,18px)} .acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center} .btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px; background:var(--tfg);color:var(--tbg);font:500 14.5px/1 'Source Sans 3',sans-serif; transition:transform .2s var(--e-out),opacity .2s} .btn:hover{opacity:.86} .btn:active{transform:scale(.98)} .btn.line{background:none;color:var(--tfg);border:1px solid var(--tline)} .btn.line:hover{background:var(--tfill);opacity:1} .mail{display:inline-flex;align-items:center;min-height:52px;padding:0 6px;color:var(--t60); font:400 14px/1 'Source Sans 3',sans-serif;transition:color .2s;word-break:break-all} .mail:hover{color:var(--tfg)} /* ── ЛЕНТА ── */ .band{border-top:1px solid var(--tline);border-bottom:1px solid var(--tline); padding:clamp(14px,1.5vw,22px) 0;overflow:hidden;white-space:nowrap} .band .run{display:flex;width:max-content;animation:run 34s linear infinite;will-change:transform} .band span{font:600 clamp(20px,2.6vw,38px)/1 'Geologica',sans-serif;letter-spacing:-.03em; padding-right:clamp(18px,2.4vw,38px);color:var(--t40);display:inline-flex;align-items:center;gap:clamp(18px,2.4vw,38px)} .band span::after{content:'—';color:var(--t16)} @keyframes run{to{transform:translateX(-50%)}} /* ── ПЪЛНА ШИРИНА ── */ /* Кадрите са екранни снимки на черен сайт — средно RGB 18. Затова: точното съотношение на оригинала (1400x669), никакво изрязване, и рамка — иначе черният панел изчезва в черната страница и мястото изглежда празно. */ .bleed{padding:0 clamp(20px,3.6vw,58px)} .bleed img{width:100%;height:auto;aspect-ratio:1400/669;object-fit:cover;border-radius:4px; border:1px solid var(--tline)} /* ── ПРОЕКТ ── */ .head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px; flex-wrap:wrap;margin-bottom:clamp(34px,5vw,74px)} .head h2{max-width:18ch} .proj{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1vw,16px)} .proj .shot{position:relative;display:block;overflow:hidden;border-radius:4px; background:var(--tfill);border:1px solid var(--tline)} .proj img{width:100%;aspect-ratio:1400/669;object-fit:cover;transition:transform 1.1s var(--e)} @media(max-width:620px){.proj{grid-template-columns:1fr}} @media (hover:hover){.proj a.shot:hover img{transform:scale(1.035)}} .projmeta{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap; margin-top:clamp(22px,2.6vw,38px);padding-top:22px;border-top:1px solid var(--tline)} .projmeta p{color:var(--t60);max-width:46ch} /* ── КОЛОНИ ── */ .cols{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(16px,2vw,32px); margin-top:clamp(30px,4vw,60px)} @media(max-width:1180px){.cols{grid-template-columns:repeat(3,1fr);gap:34px 24px}} @media(max-width:760px){.cols{grid-template-columns:repeat(2,1fr);gap:34px 24px}} @media(max-width:520px){.cols{grid-template-columns:1fr}} .col h3{font:500 12px/1 'Source Sans 3',sans-serif;letter-spacing:.16em;text-transform:uppercase; color:var(--t40);padding-bottom:14px;border-bottom:1px solid var(--tline);margin-bottom:16px} .col li{list-style:none;color:var(--t60);font-size:clamp(13.5px,1vw,15px);padding:5px 0; transition:color .2s var(--e)} .col li:hover{color:var(--tfg)} /* ── ГОЛЕМИ ДУМИ ── */ /* Дългият списък е нарочно приглушен: окото хваща първо няколкото пълни бели, а останалите дават обем. Същият похват като списъка с градове в референцията. */ .words{font:600 clamp(26px,5.4vw,86px)/1.06 'Geologica',sans-serif;letter-spacing:-.042em; color:var(--t16)} .words b{font-weight:600;color:var(--tfg)} .words i{font-style:normal;color:var(--t40)} /* ── ЧИСЛА ── */ .nums{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,30px); margin-top:clamp(34px,4vw,64px)} @media(max-width:760px){.nums{grid-template-columns:repeat(2,1fr);gap:34px 18px}} .num{border-top:1px solid var(--tline);padding-top:18px} .num b{display:block;font:600 clamp(46px,7.2vw,118px)/.9 'Geologica',sans-serif;letter-spacing:-.05em} .num span{display:block;margin-top:12px;color:var(--t40);font-size:clamp(12.5px,.9vw,14px);max-width:20ch} /* ── УСЛУГИ ── */ .rows{margin-top:clamp(30px,4vw,58px);border-top:1px solid var(--tline)} .row{display:grid;grid-template-columns:.5fr 1.5fr .8fr auto;gap:clamp(14px,2.4vw,40px); align-items:start;padding:clamp(24px,3vw,44px) 0;border-bottom:1px solid var(--tline); transition:background-color .3s var(--e)} @media (hover:hover){.row:hover{background:var(--tfill)}} .row .no{color:var(--t40);font:500 12.5px/1.6 'Source Sans 3',sans-serif;letter-spacing:.14em} .row h3{font:600 clamp(17px,1.6vw,24px)/1.15 'Geologica',sans-serif;letter-spacing:-.025em;margin-bottom:10px} .row p{color:var(--t60);max-width:52ch;font-size:clamp(14px,1vw,15.5px)} /* Единственото място на страницата, където locl се изключва - и правилото е по РОЛЯ, не по размер. Цената е данни, не глас: "от 900 €" се рисуваше "om 900 €", а ръкописното m стои плътно до 900 и €, тоест до латински цифри и латински знак, и се групира зрително с ТЯХ, не с кирилицата. Четирима независими читатели, гледали слепи A/B кадри без да знаят кой вариант е нов, посочиха един и същи ред: българският четец се спъва за половин секунда на ВСЕКИ ред от ценоразписа, а купувачът го чете като зареден наопаки шрифт. Обхваща и ~2 седмици вътре в .pr - срок с число, същата роля. Навсякъде другаде формите остават: заглавия, секции и течащ текст са глас. */ .row .pr{font:600 clamp(17px,1.5vw,23px)/1.2 'Geologica',sans-serif;letter-spacing:-.02em; white-space:nowrap;font-feature-settings:'locl' 0} .row .pr small{display:block;margin-top:6px;font:300 12.5px/1 'Source Sans 3',sans-serif;color:var(--t40)} .ask{display:inline-flex;flex-direction:column;justify-content:center;min-height:52px; padding:0 4px;white-space:nowrap} .ask b{font:500 14px/1 'Source Sans 3',sans-serif} .ask b::after{content:' →';color:var(--t40);transition:color .2s} .ask span{margin-top:6px;font:300 12px/1 'Source Sans 3',sans-serif;color:var(--t40);word-break:break-all} @media (hover:hover){.ask:hover b::after{color:var(--tfg)}} @media(max-width:900px){ .row{grid-template-columns:1fr;gap:12px} .row .pr,.ask{white-space:normal} } /* ── ПРОЦЕС ── */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,30px);margin-top:clamp(30px,4vw,58px)} @media(max-width:860px){.steps{grid-template-columns:1fr 1fr}} @media(max-width:460px){.steps{grid-template-columns:1fr}} .step{border-top:1px solid var(--tline);padding-top:20px} .step b{display:block;color:var(--t40);font:500 12px/1 'Source Sans 3',sans-serif;letter-spacing:.16em;margin-bottom:16px} .step h4{font:600 clamp(16px,1.35vw,20px)/1.2 'Geologica',sans-serif;letter-spacing:-.02em;margin-bottom:8px} .step p{color:var(--t60);font-size:clamp(13.5px,1vw,14.5px)} /* ── КОНТАКТ + ФУТЪР ── */ .end{padding:clamp(96px,13vw,200px) 0 clamp(50px,6vw,90px)} .end h2{max-width:14ch;margin-bottom:clamp(26px,3vw,44px)} /* padding-top, а не min-height: на телефон редът е 22px и целта падаше на 33px. Височината се качва нагоре, за да остане чертата долепена под текста. */ .big{display:inline-flex;align-items:flex-end;gap:14px;font:600 clamp(20px,3.2vw,50px)/1.1 'Geologica',sans-serif; letter-spacing:-.035em;padding:18px 0 12px;border-bottom:1px solid var(--tline); transition:border-color .3s var(--e);word-break:break-all} .big:hover{border-color:var(--tfg)} footer{border-top:1px solid var(--tline);padding:28px 0 40px} footer .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap; color:var(--t40);font-size:12.5px} /* ── ПРЕГЛЕД ПРИ HOVER ── */ /* Плаващата картинка на връзка. Локални файлове, никакво външно API — иначе всяко посочване щеше да прави заявка към чужд сървър. */ .peek{position:fixed;top:0;left:0;width:clamp(180px,17vw,250px);pointer-events:none;z-index:150; border-radius:4px;opacity:0;transform:translate(-50%,-50%) scale(.92); transition:opacity .22s var(--e),transform .4s var(--e-out);box-shadow:0 24px 70px rgba(0,0,0,.5)} .peek.on{opacity:1;transform:translate(-50%,-50%) scale(1)} /* ── ПОЯВА ── */ .rv{opacity:0;transform:translateY(22px); transition:opacity 1s var(--e-out),transform 1s var(--e-out)} .rv.vis{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ *,body,body *{transition:none!important;animation:none!important} .rv{opacity:1;transform:none} html{scroll-behavior:auto} .spot,.peek,.cursor{display:none} } /* ══════════════════════════════════════════════════════════════════════════ СЪДЪРЖАНИЕ ОТ ПАНЕЛА — проекти, отзиви, доказателства. Същите токени, нула нови цветове. Всичко тук се пълни от assets/work.js. ══════════════════════════════════════════════════════════════════════════ */ /* Втори и следващ проект — разделени с въздух, не с черта: чертата вече е долу в .projmeta и две черти една до друга правят стълба. */ #cases .head:not(:first-child){margin-top:clamp(70px,9vw,140px)} /* ── линк към живия сайт ── */ .pm{display:flex;align-items:center;gap:clamp(14px,2vw,26px);flex-wrap:wrap} .visit{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 20px; border-radius:999px;border:1px solid var(--tline);white-space:nowrap; font:500 13.5px/1 'Source Sans 3',sans-serif; transition:background-color .25s var(--e),color .25s var(--e),border-color .25s var(--e)} .visit span{color:var(--t40);transition:color .25s var(--e)} .visit:hover{background:var(--tfg);color:var(--tbg);border-color:var(--tfg)} .visit:hover span{color:var(--tbg)} /* ── ОТЗИВИ ── */ /* Две колони, не три: истинският отзив е дълъг, а трета колона го смачква до два реда и го прави да изглежда като измислен. */ .qs{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,30px); margin-top:clamp(30px,4vw,58px)} @media(max-width:820px){.qs{grid-template-columns:1fr}} .q{border-top:1px solid var(--tline);padding-top:22px;display:flex;flex-direction:column;gap:18px} .q blockquote{font:500 clamp(16px,1.5vw,22px)/1.42 'Geologica',sans-serif;letter-spacing:-.018em; max-width:40ch} .q blockquote::before{content:'„'} .q blockquote::after{content:'“'} .q figcaption{margin-top:auto;display:flex;flex-direction:column;gap:5px} .q figcaption b{font:500 13.5px/1.2 'Source Sans 3',sans-serif} .q figcaption span{font:300 12.5px/1.3 'Source Sans 3',sans-serif;color:var(--t40)} /* ── ДОКАЗАТЕЛСТВА ── */ .prf{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1vw,16px); margin-top:clamp(30px,4vw,58px)} @media(max-width:900px){.prf{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.prf{grid-template-columns:1fr}} .pf{position:relative;display:flex;flex-direction:column;gap:8px;min-height:112px; padding:20px 22px;border:1px solid var(--tline);border-radius:10px; transition:background-color .25s var(--e),border-color .25s var(--e)} a.pf:hover{background:var(--tfill);border-color:var(--t16)} .pf b{font:600 clamp(15px,1.2vw,18px)/1.25 'Geologica',sans-serif;letter-spacing:-.02em; max-width:24ch} .pf span{font:300 13px/1.45 'Source Sans 3',sans-serif;color:var(--t60);max-width:36ch} .pf i{position:absolute;top:18px;right:20px;font-style:normal;color:var(--t40); transition:color .25s var(--e)} a.pf:hover i{color:var(--tfg)} /* ── втори път към пощата ── */ /* mailto: е правилният линк за телефон и за човек с пощенски клиент, но на компютър без такъв кликът не прави нищо. Gmail стои до него като изричен избор, вместо да гадаем по браузъра кой път ще проработи. */ .alt{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:22px} .alt a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px; border-radius:999px;border:1px solid var(--tline); font:500 13.5px/1 'Source Sans 3',sans-serif;white-space:nowrap; transition:background-color .25s var(--e),color .25s var(--e),border-color .25s var(--e)} .alt a span{color:var(--t40);transition:color .25s var(--e)} .alt a:hover{background:var(--tfg);color:var(--tbg);border-color:var(--tfg)} .alt a:hover span{color:var(--tbg)} .alt>span{color:var(--t40);font-size:13px} /* Етикет на реда с услугата. Без цвят — само рамка, защото палитрата е монохромна и един акцент тук би счупил цялата страница. */ .row h3 .tag{display:inline-block;vertical-align:middle;margin-left:10px; padding:4px 9px;border:1px solid var(--tline);border-radius:999px; font:500 9.5px/1 'Source Sans 3',sans-serif;letter-spacing:.18em;text-transform:uppercase; font-style:normal;color:var(--t40)}