/* ========================================================== СЕМЕЙСТВО РАМКИ Изнесено от skin.css на 27.08.2026, за да важи на целия сайт, а не само на заглавната. Правилата тук са общи; заключените за body.home надстройки останаха в skin.css и се прилагат след този файл. ========================================================== */ /* ========================================================== РАМКА НА АКВАРЕЛИТЕ Осмоъгълник с отрязани ъгли — разчупен контур вместо правоъгълник. Двоен златен кант и шестоъгълник във всеки ъгъл. ========================================================== */ .aura-frame { --n: clamp(14px, 3.2vw, 30px); /* колко е отрязан ъгълът */ --cut: polygon( var(--n) 0, calc(100% - var(--n)) 0, 100% var(--n), 100% calc(100% - var(--n)), calc(100% - var(--n)) 100%, var(--n) 100%, 0 calc(100% - var(--n)), 0 var(--n)); position: relative; display: block; isolation: isolate; } /* златният кант — по-голям слой отдолу със същия контур */ .aura-frame::before { content: ""; position: absolute; inset: -3px; z-index: 0; background: linear-gradient(148deg, #E8C878 0%, #B8862A 34%, #8A5F16 58%, #D9A73E 82%, #F2D9A2 100%); clip-path: polygon( var(--n) 0, calc(100% - var(--n)) 0, 100% var(--n), 100% calc(100% - var(--n)), calc(100% - var(--n)) 100%, var(--n) 100%, 0 calc(100% - var(--n)), 0 var(--n)); filter: drop-shadow(0 8px 18px rgba(92, 60, 14, .28)); } /* вътрешна тънка нишка, за да е двоен кантът */ .aura-frame::after { content: ""; position: absolute; inset: 5px; z-index: 2; pointer-events: none; clip-path: polygon( var(--n) 0, calc(100% - var(--n)) 0, 100% var(--n), 100% calc(100% - var(--n)), calc(100% - var(--n)) 100%, var(--n) 100%, 0 calc(100% - var(--n)), 0 var(--n)); box-shadow: inset 0 0 0 1px rgba(138, 95, 22, .55); } .aura-frame picture { display: block; position: relative; z-index: 1; } .aura-frame img { display: block; width: 100%; height: auto; clip-path: polygon( var(--n) 0, calc(100% - var(--n)) 0, 100% var(--n), 100% calc(100% - var(--n)), calc(100% - var(--n)) 100%, var(--n) 100%, 0 calc(100% - var(--n)), 0 var(--n)); border-radius: 0 !important; box-shadow: none !important; mix-blend-mode: normal !important; mask-image: none !important; -webkit-mask-image: none !important; } /* мечтата е панорамна — режем я по височина, не я сплескваме */ .aura-frame--dream img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 58% center; } @media (max-width: 680px) { .aura-frame--dream img { aspect-ratio: 16 / 10; } } /* шестоъгълник във всеки от четирите отрязани ъгъла */ .aura-frame picture::after { content: ""; position: absolute; inset: -8px; z-index: 3; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='24' viewBox='0 0 22 24'%3E%3Cpath d='M11 1.6 20 6.8v10.4L11 22.4 2 17.2V6.8z' fill='%23F2D9A2' stroke='%238A5F16' stroke-width='1.5'/%3E%3Cpath d='M11 7.2 15.6 9.9v5.4L11 18l-4.6-2.7V9.9z' fill='none' stroke='%23B8862A' stroke-width='1.1'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='24' viewBox='0 0 22 24'%3E%3Cpath d='M11 1.6 20 6.8v10.4L11 22.4 2 17.2V6.8z' fill='%23F2D9A2' stroke='%238A5F16' stroke-width='1.5'/%3E%3Cpath d='M11 7.2 15.6 9.9v5.4L11 18l-4.6-2.7V9.9z' fill='none' stroke='%23B8862A' stroke-width='1.1'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='24' viewBox='0 0 22 24'%3E%3Cpath d='M11 1.6 20 6.8v10.4L11 22.4 2 17.2V6.8z' fill='%23F2D9A2' stroke='%238A5F16' stroke-width='1.5'/%3E%3Cpath d='M11 7.2 15.6 9.9v5.4L11 18l-4.6-2.7V9.9z' fill='none' stroke='%23B8862A' stroke-width='1.1'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='24' viewBox='0 0 22 24'%3E%3Cpath d='M11 1.6 20 6.8v10.4L11 22.4 2 17.2V6.8z' fill='%23F2D9A2' stroke='%238A5F16' stroke-width='1.5'/%3E%3Cpath d='M11 7.2 15.6 9.9v5.4L11 18l-4.6-2.7V9.9z' fill='none' stroke='%23B8862A' stroke-width='1.1'/%3E%3C/svg%3E"); background-repeat: no-repeat, no-repeat, no-repeat, no-repeat; background-size: clamp(15px, 2.4vw, 22px) auto; background-position: left top, right top, left bottom, right bottom; } .aura-frame picture { position: relative; } /* ========================================================== СЕМЕЙСТВО РАМКИ Три вида, за да не се повтаря един и същи контур: .aura-frame — осмоъгълник (по подразбиране) .aura-frame--petal — листо: два срещуположни ъгъла заоблени .aura-frame--comb — килийка: скосени горен и долен ръб ========================================================== */ /* ---- ЛИСТО ---- */ .aura-frame--petal { --r: clamp(18px, 5vw, 54px); } .aura-frame--petal::before, .aura-frame--petal::after, .aura-frame--petal img { clip-path: none !important; border-radius: var(--r) 4px var(--r) 4px !important; } .aura-frame--petal::before { inset: -3px; } .aura-frame--petal::after { inset: 5px; } .aura-frame--petal picture::after { background-position: right top, left bottom; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='24' viewBox='0 0 22 24'%3E%3Cpath d='M11 1.6 20 6.8v10.4L11 22.4 2 17.2V6.8z' fill='%23F2D9A2' stroke='%238A5F16' stroke-width='1.5'/%3E%3Cpath d='M11 7.2 15.6 9.9v5.4L11 18l-4.6-2.7V9.9z' fill='none' stroke='%23B8862A' stroke-width='1.1'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='24' viewBox='0 0 22 24'%3E%3Cpath d='M11 1.6 20 6.8v10.4L11 22.4 2 17.2V6.8z' fill='%23F2D9A2' stroke='%238A5F16' stroke-width='1.5'/%3E%3Cpath d='M11 7.2 15.6 9.9v5.4L11 18l-4.6-2.7V9.9z' fill='none' stroke='%23B8862A' stroke-width='1.1'/%3E%3C/svg%3E"); } /* ---- КИЛИЙКА ---- */ .aura-frame--comb { --s: clamp(20px, 5vw, 46px); --cell: polygon(0 var(--s), 50% 0, 100% var(--s), 100% calc(100% - var(--s)), 50% 100%, 0 calc(100% - var(--s))); } .aura-frame--comb::before, .aura-frame--comb::after, .aura-frame--comb img { clip-path: var(--cell) !important; border-radius: 0 !important; } .aura-frame--comb picture::after { background-position: left center, right center; } /* ========================================================== ПРОДУКТОВАТА СНИМКА — ЕДНА РАМКА НА ВСИЧКИ СТРАНИЦИ По-старите продуктови страници носят килийката (--comb). В началния блок обаче рамката трябва да е една и съща навсякъде: осмоъгълникът със скосени ъгли и шестоъгълник в четирите ъгъла. Килийката остава valid вариант другаде — тук само се неутрализира за .aura-intro. ========================================================== */ .aura-intro .aura-frame--comb::before, .aura-intro .aura-frame--comb::after, .aura-intro .aura-frame--comb img { clip-path: polygon( var(--n) 0, calc(100% - var(--n)) 0, 100% var(--n), 100% calc(100% - var(--n)), calc(100% - var(--n)) 100%, var(--n) 100%, 0 calc(100% - var(--n)), 0 var(--n)) !important; } .aura-intro .aura-frame--comb picture::after { background-position: left top, right top, left bottom, right bottom; } /* ========================================================== РАМКАТА НА СНИМКИТЕ В СЪДЪРЖАНИЕТО 02.09.2026 ---------------------------------------------------------- Рамката се пригажда към снимката, не снимката към рамката. Няма паспарту и няма изрязване: снимката влиза каквато си е, а рамката се разтяга около нея. Как е възможно без да се деформира украсата: рамката е нарязана на девет (`border-image`). Четирите ъгъла се рисуват цели, а се разтягат само правите участъци между тях — там няма нищо освен двойната златна нишка и текстурата. Ширината на канта е 17.6% от ширината на снимката. Числото не е произволно: при него правите участъци легват точно в естествения си размер (663/1023 от ширината), тоест по хоризонтала рамката изобщо не се разтяга. Ъглите пазят квадрата си при всякаква снимка. Пчеличката долу в средата е единствената украса, която стои насред прав участък — затова е извадена в отделен файл (`ramka-bee.png`) и се слага отгоре в естествения си размер. В `ramka-edge.png` мястото ѝ е закърпено с чисто парче от същата лента. Така пчелата никога не се разтяга и не се повтаря. Смяна на рамката = смяна на двата адреса по-долу. Първата снимка на продукта НЕ минава оттук. Тя се рисува от `intro/<адрес>.txt` и си остава с рамката `.aura-frame`. ========================================================== */ .aura-shotframe { --shotframe-edge: url('/wp-content/uploads/aura/ramka/ramka-edge.png'); --shotframe-bee: url('/wp-content/uploads/aura/ramka/ramka-bee.png'); /* кантът: 180 изходни точки от 1023 = 17.6% от ширината */ --shotframe-kant: 17.6cqw; position: relative; display: block; width: 100%; max-width: 560px; margin-inline: auto; container-type: inline-size; } .aura-shotframe__in, .aura-shotframe__in picture { display: block; } .aura-shotframe__in img { display: block; /* „!important“ е нужно: правилото на темата за банерите (`body.aura-skin .aura-banner img`) е по-силно. Снимката запълва ширината и си пази пропорцията — тя дава размера на цялата рамка. */ width: 100% !important; height: auto !important; object-fit: fill; } /* Кантът ляга върху ръба на снимката, както прави истинска рамка. */ .aura-shotframe::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: 68px solid transparent; /* за браузъри без cqw */ border-width: var(--shotframe-kant); border-image: var(--shotframe-edge) 180 / var(--shotframe-kant) / 0 stretch; } /* Пчеличката — в естествения си размер, долу в средата. */ .aura-shotframe::before { content: ""; position: absolute; left: 50%; bottom: 0; z-index: 1; width: 8.4cqw; /* 86/1023 */ height: 4.3cqw; /* 44/1023 — същият мащаб, за да не се сплеска */ transform: translateX(-50%); background: var(--shotframe-bee) center / 100% 100% no-repeat; pointer-events: none; } /* Телефон: рамката се свива с екрана, нищо не излиза встрани. */ @media (max-width: 620px) { .aura-shotframe { max-width: min(340px, 88vw); } } /* ---------------------------------------------------------- Снимката отстрани на текста 03.09.2026 Разказът не се къса на ивици: снимката застава вдясно или вляво и текстът я обтича. Редуването идва от PHP-то, което слага `--desno` на първата, `--lyavo` на следващата. Заглавията винаги започват на чист ред — иначе биха седнали до снимката и разделът щеше да се размие. ---------------------------------------------------------- */ /* `figure.` в началото не е излишно: темата държи банерите с `body.aura-skin .aura-banner`, което е също толкова силно и стои по-надолу. Едно име в повече наклонява везната насам. */ body.aura-skin figure.aura-banner--desno, body.aura-skin figure.aura-banner--lyavo { width: min(320px, 46%); margin-block: .35rem 1.1rem; /* кутията на темата (заоблен ъгъл и сянка) отстъпва на рамката */ border-radius: 0; overflow: visible; box-shadow: none; } /* Абзаците са дълги 64ch (около 660px) и са долепени вляво, а секцията е широка 1100px. Затова дясната снимка се дърпа обратно към текста: иначе увисва сама насред празното поле вдясно. */ body.aura-skin figure.aura-banner--desno { float: right; margin-right: max(0px, calc(100% - 660px)); margin-left: clamp(1.1rem, 3vw, 2.2rem); } body.aura-skin figure.aura-banner--lyavo { float: left; margin-right: clamp(1.1rem, 3vw, 2.2rem); } body.aura-skin .aura-title, body.aura-skin .aura-intro-rule, body.aura-skin .aura-notice, body.aura-skin .aura-finale, body.aura-skin .aura-prod__badges { clear: both; } /* Тесен екран: снимката се връща в реда, на цяла ширина. */ @media (max-width: 780px) { body.aura-skin figure.aura-banner--desno, body.aura-skin figure.aura-banner--lyavo { float: none; width: 100%; margin-inline: auto; } }