/* PhiBrows Yolly — the brand layer over the Beautyeo template, loaded after it. * * The palette is the client's brand board: three colours, black + warm taupe + cream. The * board reads light — its panels are taupe and its black is a product colour — so the site * reads light too: cream is the page, taupe the tinted sections and the cards, near-black * is ink, the primary button and the footer, exactly the way the board uses it. * * That is also the template's own semantics, so what is left in this file is mostly the * two things that are genuinely ours — the typefaces and the hero — rather than a fight * with an inversion. * * Surfaces page cream #efe9de · tint #d8cec1 · panel #c9bcaa · deep #b7a895 * Ink near-black #16130f (headings and copy) · #3e382f (secondary) * Accent espresso #5a4835 · hairline rgba(black .14) * Type Cormorant Garamond for display, Manrope for text. Both carry Cyrillic with * Bulgarian letterforms, which lang="bg" on switches on, so the serif and * the sans agree about what a д and a т look like. */ :root { /* the template's own tokens, remapped — most of the site follows from these */ --color--white-solid: #efe9de; /* its lightest surface -> page, nav, cards */ --color--black-solid: #16130f; /* its dark ink -> near-black */ --color--brown-solid: #5a4835; /* its accent -> espresso */ --color--brown-light-1: #d8cec1; /* lightest tint -> soft taupe */ --color--brown-light-2: #e4dcd1; /* mid tint -> lighter taupe */ --color--brown-light-3: #b7a895; /* strongest tint -> deepest taupe */ --color--grey-light: #c9bcaa; /* grey panels -> the taupe panel */ --color--grey-medium: #3e382f; /* secondary text -> warm dark grey */ /* ours */ --accent-light: #3a2e20; --accent-hairline: rgba(22, 19, 15, .14); --accent-hairline-strong: rgba(22, 19, 15, .38); --ink-deep: #16130f; --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif; --font-text: Manrope, "Segoe UI", system-ui, sans-serif; } body { background-color: var(--color--white-solid); color: var(--color--black-solid); font-family: var(--font-text); -webkit-font-smoothing: antialiased; } /* ---- Typography --------------------------------------------------------- * The template names a family in exactly two places (body, and the hero's italic accent * span), so the pairing is a clean swap. The display face carries the voice — the H1s and * the section headings; card titles and anything functional stay in the sans, where a * 24px serif would only get thinner and harder to read. */ h1, h2, .heading-style-h1, .heading-style-h2, .heading-style-h3 { font-family: var(--font-display); font-weight: 400; } /* Cormorant sets loosely, and the template's 150% H1 leading was drawn for a geometric * sans; a display serif wants its lines closer than that. */ h1, .heading-style-h1 { letter-spacing: -.005em; line-height: 132%; } h2, .heading-style-h2 { line-height: 118%; } /* Card titles, questions, labels: the sans, one notch up in weight so they hold their own * under a serif heading. */ h3, h4, h5, h6 { font-family: var(--font-text); font-weight: 500; letter-spacing: -.005em; } /* ---- The accent ----------------------------------------------------------- * One accent, used three ways: the primary button, the hairline that lifts a surface off * the page, and text meant to be read as a link. Nothing else carries it. */ .button { background-color: var(--color--black-solid); border-color: var(--color--black-solid); color: var(--color--white-solid); } .button:hover { background-color: var(--color--brown-solid); border-color: var(--color--brown-solid); color: var(--color--white-solid); } /* The template's secondary button is a second filled panel; a hairline reads quieter * beside a filled primary, which is the whole point of a secondary action. */ .button.is-secondary { background-color: rgba(0, 0, 0, 0); border-color: var(--accent-hairline-strong); color: var(--color--black-solid); } .button.is-secondary:hover { background-color: rgba(0, 0, 0, 0); border-color: var(--color--brown-solid); color: var(--color--brown-solid); } .button.is-link, .button.is-link.is-icon { color: var(--color--brown-solid); } .button.is-link:hover, .button.is-link.is-icon:hover { color: var(--accent-light); } /* The bar is a dark slab now — the hero's ink, so the two fuse into one panel on the home * page and the bar bookends the light pages with the footer. Webflow's base nav rules * hard-code #222; the links take cream instead, and the hovers land on the taupe the * footer's dark slab already uses — the espresso accent would disappear into ink. The * dropdown's floating panel stays the template's cream, so its links keep their ink and * their espresso hover. */ .navbar .w-nav-link, .navbar .w-dropdown-toggle { color: var(--color--white-solid); } .navbar-link:hover, .navbar-dropdown-toggle:hover { color: var(--color--brown-light-3); } .navbar .w-nav-link.w--current { color: var(--color--brown-light-3); } .navbar-dropdown-link:hover { color: var(--color--brown-solid); } /* The booking pill was ink-on-cream; on the dark bar it becomes a cream outline, and the * hover fills with the taupe rather than the grey that no longer exists up here. */ .navbar .button.is-secondary { border-color: rgba(239, 233, 222, .5); background-color: transparent; color: var(--color--white-solid); } .navbar .button.is-secondary:hover { border-color: var(--color--brown-light-3); background-color: var(--color--brown-light-3); color: var(--ink-deep); } /* The template hovers its social mark to the accent, which was written for a light footer; * ours is the dark slab, so it joins the other two footer hovers on the taupe. */ .footer-social-link:hover { color: var(--color--brown-light-3); } /* A hairline is all the definition a card needs against the page it sits on. Inset, so * nothing in the template's layout moves. */ .global-services-card-large, .global-services-card-small, .services-faq-accordion, .testimonial-content { box-shadow: inset 0 0 0 1px var(--accent-hairline); } /* Our consult section replaced the template's newsletter form with a button group and a * closing line; the template never had to space those two, so we do. */ .section-cta-newsletter .button-group + .text-size-tiny { margin-top: 1.25rem; } /* ---- Картите в „Услуги" на десктоп ------------------------------------- * The template centres a LARGE card's content and spreads a SMALL card's with * space-between. That holds while a small card is near its content height — the two * Ламиниране cards have 64px of slack and read fine. But the bento row is as tall as * the Микроблейдинг card beside it, so Миглопластика and Обучения are stretched * to 624px and space-between threw their „Запази час" 345px below the paragraph: * measured, a hole through the middle of the card. * * It is a desktop-only fault. On a phone the grid is one column, every card hugs its * content, and the same markup looks right — which is why it survived this long. * * Centring is what the template already does with its large cards, so this makes all six * behave alike rather than inventing a third rule. */ .global-services-card-small-content { justify-content: center; } /* ---- Ink hierarchy ------------------------------------------------------ * The template gives h1-h6 no colour of their own — body is its only ink source — so * pointing body at the copy grey left every heading the exact same value as the paragraph * under it, once this file started naming the body colour itself. * The two labels that behave like headings (the FAQ questions and the course-support * titles) are divs in the template, so they are named here too. */ h1, h2, h3, h4, h5, h6, .heading-style-h1, .heading-style-h2, .heading-style-h3, .heading-style-h4, .heading-style-h5, .heading-style-h6, .services-faq-question .text-size-large, .about-members-item .text-size-large { color: var(--color--black-solid); } /* Cormorant ships oldstyle figures by default, so „230 €" and „900 €" sat at x-height * with descenders — the prices are the numbers the page exists to state. */ h1, h2, .heading-style-h1, .heading-style-h2, .heading-style-h3 { font-variant-numeric: lining-nums; } /* A display serif shows a bad rag far more than the geometric sans it replaced. */ h1, h2, .heading-style-h1, .heading-style-h2 { text-wrap: balance; } /* ---- Hairlines that actually draw a line ------------------------------- * At 20% the card outline composited to 1.43:1 against the card — the device was in the * stylesheet but not on the screen. These two values put it just above the 3:1 floor for * a control boundary while staying a hairline. */ .global-services-card-large, .global-services-card-small, .services-faq-accordion, .testimonial-content { box-shadow: inset 0 0 0 1px rgba(22, 19, 15, .16); } /* The browser paints scrollbars, form controls and the selection highlight itself, and * without this it paints them for a light page. */ :root { color-scheme: light; } ::selection { background-color: rgba(90, 72, 53, .22); color: var(--color--black-solid); } /* The bare h1 has no step at the 991 breakpoint, so 4.5rem ran all the way down to 768px * against a shrinking column — five lines of Cormorant on a tablet. */ @media screen and (min-width: 768px) and (max-width: 991px) { h1 { font-size: 3.5rem; } } /* ---- Phone --------------------------------------------------------------- * The template was drawn for the desktop first and its small-screen rules only shrink * type; nothing in it sizes a control for a thumb. Measured on a 390px viewport, the * card CTAs came out 37px tall, the "повече" links 24px, the footer links 19px and the * slider dots 8px — all under the 44px a finger can reliably hit. These rules give the * controls room without moving anything the layout depends on. */ @media screen and (max-width: 767px) { /* Every button becomes thumb-sized. is-small exists so a card CTA can be quieter than * a hero CTA — on a phone that has to stay a visual difference, not a hit-area one. */ .button, .button.is-small { min-height: 2.75rem; padding-top: .625rem; padding-bottom: .625rem; } .button.is-icon { padding-top: .625rem; padding-bottom: .625rem; } /* The text links ("повече", "виж в Instagram") are the most-tapped thing on the page * after the CTAs. Their box grows; the text does not move, because the padding is * balanced and the line box is centred. */ .button.is-link, .button.is-link.is-icon { min-height: 2.75rem; align-items: center; padding-top: .625rem; padding-bottom: .625rem; display: inline-flex; } /* In the collapsed sheet the booking CTA is the only thing a visitor came to press; * the outlined pill that reads as restraint beside desktop navigation reads as * secondary here, so it takes the accent. The extra .navbar in the selector outweighs * the cream-outline rule the pill gets on the bar itself, and the text is cream now — * the ink it used to carry was drawn for the sheet that was cream, not this dark one. */ .navbar .navbar-menu .button { background-color: var(--color--brown-solid); border-color: var(--color--brown-solid); color: var(--color--white-solid); } /* Navigation: the hamburger becomes square, and the footer's link column gets rows a * thumb can separate. */ .navbar-menu-button.w-nav-button { min-width: 3rem; min-height: 3rem; } .navbar-logo-link, .footer-logo-link { padding-top: .8rem; padding-bottom: .8rem; } .footer-link, .footer-legal-link, .footer-social-link { min-height: 2.75rem; align-items: center; display: inline-flex; } /* The Instagram mark is a 24px icon; the link around it becomes a square target. */ .footer-social-link { justify-content: center; min-width: 2.75rem; } /* The dot stays 12px; background-clip keeps the paint inside the content box while the * padding grows the target to the 44px a thumb needs. */ .services-gallery-slide-nav .w-slider-dot { box-sizing: content-box; background-clip: content-box; width: .75rem; height: .75rem; margin: 0; padding: 1rem .5rem; } /* The nav is absolutely placed at the slider's foot, so a second row of dots grows it * upward over the photographs — at 44px wide the eight dots wrapped on every phone and * their hit areas covered a third of the images. At 28px wide they stay one row. */ .services-gallery-slide-nav.w-slider-nav { height: auto; padding-top: 0; } /* The gallery's dots are 8px squares of hit area; 12px of dot inside a 44px row is the * usual compromise — the dot stays discreet, the target does not. */ /* A 32px card title next to 16px copy is a desktop proportion; on a 390px screen it * takes a third of the card's width before the text starts. */ h3 { font-size: 1.5rem; line-height: 130%; } h4 { font-size: 1.375rem; } /* The closing line under the consult buttons is set at 12px; give it a readable * measure and enough leading to be a sentence rather than fine print. */ .section-cta-newsletter .text-size-tiny { font-size: .8125rem; line-height: 160%; } /* The links already got 44px rows above; the template's 1.5rem gap on top of that * spaced them 68px apart and made the footer 1.4 screens tall on a small phone. */ .footer-link-list { grid-row-gap: .25rem; } .footer-top-wrapper { grid-row-gap: 2rem; } .footer .padding-bottom.padding-xxlarge { padding-bottom: 2rem; } /* A single column breaks wherever the words run out: „1000 / €", „гр. / Пловдив", a line * that opens on a dash. keep() (client/src/lib/keep.tsx) wraps those groups in * .yh-keep, and only here does that hold them together — on the desktop the spans are * inert. Short headings get balanced lines instead of one word left alone. */ h3, h4, .services-faq-question .text-size-large { text-wrap: balance; } .yh-keep { white-space: nowrap; } /* The results cards' one-line captions ended on a single word at several phone widths. */ .blog-text-wrapper .text-size-regular { text-wrap: pretty; } } /* Under 360px the FAQ column is 196px, and balancing a question there leaves a single word * on its first line; pretty only guards the last line. */ @media screen and (max-width: 359px) { .services-faq-question .text-size-large { text-wrap: pretty; } } /* „най-високите" would otherwise break after its hyphen at any width, the desktop too. */ .yh-keep.is-hyphenated { white-space: nowrap; } /* The hero's H1 is the first thing a phone renders and the template lets it run to 2.5rem * with the display serif's own loose leading. Tightening it fits the whole sentence — and * her name — above the fold on a 390x844 screen. */ @media screen and (max-width: 479px) { h1, .heading-style-h1 { font-size: 2.25rem; line-height: 122%; } h2, .heading-style-h2 { font-size: 1.875rem; } } /* The footer's legal row is one flex line of four items with no wrap. Below 375px it was * wider than the screen, so every page scrolled sideways and the fixed bar followed the * wider layout, pushing the hamburger off the edge; above that its items crushed into two- * and three-line stacks. It wraps whole items now. The Facebook entry is a name, not a * link — there is no address for it yet — so it stops dressing like one. */ @media screen and (max-width: 991px) { .footer-wrapper-legal-links { flex-wrap: wrap; justify-content: flex-end; column-gap: 1.25rem; row-gap: .5rem; } .footer-legal-link { white-space: nowrap; } span.footer-legal-link { text-decoration: none; } span.footer-legal-link:hover { color: var(--color--white-solid); } } @media screen and (max-width: 767px) { .footer-wrapper-legal-links { justify-content: center; row-gap: 0; } .footer-credit-text { text-align: center; } } /* The phone number at the end of the consult line is a tel: link. On the desktop it reads * exactly as the sentence around it did; on a phone it is a call button like the two above * it, so it shows the underline a link needs. */ .section-cta-newsletter .text-size-tiny a { color: inherit; text-decoration: none; } @media screen and (max-width: 767px) { /* Padding on an inline link grows what a thumb can hit without moving a line. Only * downward: the number ends the block, while padding above reached into the line over it * and made its words dial. */ .section-cta-newsletter .text-size-tiny a { text-decoration: underline; text-underline-offset: .15em; padding-bottom: .75rem; } } /* A phone on its side is 780-932px wide, so it gets the template's tablet sizes and none * of the thumb rules above: 30 of the 36 targets on the home page came out under 44px. * A coarse pointer at that width is a phone or a tablet, never a mouse. */ @media screen and (min-width: 768px) and (max-width: 991px) and (pointer: coarse) { .button, .button.is-small { min-height: 2.75rem; padding-top: .625rem; padding-bottom: .625rem; } .button.is-icon { padding-top: .625rem; padding-bottom: .625rem; } .button.is-link, .button.is-link.is-icon { min-height: 2.75rem; align-items: center; padding-top: .625rem; padding-bottom: .625rem; display: inline-flex; } .navbar-menu-button.w-nav-button { min-width: 3rem; min-height: 3rem; } .footer-link, .footer-legal-link, .footer-social-link { min-height: 2.75rem; align-items: center; display: inline-flex; } .footer-social-link { justify-content: center; min-width: 2.75rem; } .services-gallery-slide-nav .w-slider-dot { box-sizing: content-box; background-clip: content-box; width: .75rem; height: .75rem; margin: 0; padding: 1rem .625rem; } .services-gallery-slide-nav.w-slider-nav { height: auto; padding-top: 0; } .section-cta-newsletter .text-size-tiny a { text-decoration: underline; text-underline-offset: .15em; padding-bottom: .75rem; } } /* In landscape the large service cards are full width, and a portrait photograph at that * width ran two and a half screens tall. Held to most of one screen, uncropped. */ @media screen and (max-width: 991px) and (max-height: 500px) { .global-services-card-large-image { width: auto; height: auto; max-width: 100%; max-height: 80svh; } } /* With width and height both auto, a lazy photo that has not arrived has no box at all, so * an anchor tap measured the page without it and landed a screen short. A fixed height lets * the width/height attributes size the box up front. Landscape only: in a short portrait * window 80svh is taller than the card is wide. */ @media screen and (max-width: 991px) and (max-height: 500px) and (orientation: landscape) { .global-services-card-large-image { height: 80svh; max-height: none; object-fit: contain; } } /* The template dresses four of its sections with a line drawing of a figure. The client * asked for them gone, so no section paints one and the six SVGs no longer ship. */ .section-hero, .section-cta, .section-cta-newsletter, .section-about-main, .about-members-item { background-image: none; } /* ---- The hero ------------------------------------------------------------ * Built to the reference the client sent: a dark panel split down the middle — copy on the * left, her portrait filling the right and dissolving into the dark on its inner edge, a * row of facts under the buttons. It is the board's black panel with cream on it, and it * sits directly above the cream page, the way the board alternates its two grounds. * * Below 992 there is no second column to give the photograph, so it goes back behind the * copy full-bleed and the stack centres over it. */ .yh-hero { background-color: #16130f; align-items: center; /* The bar overlays the hero rather than sitting above it, so the panel takes the whole * viewport — there is no 4.5rem to subtract any more. */ min-height: min(100svh, 56rem); padding-left: 5%; padding-right: 5%; display: flex; position: relative; overflow: hidden; } .yh-hero__photo { object-fit: cover; object-position: var(--hero-photo-position, 62% 12%); width: 52%; height: 100%; position: absolute; top: 0; right: 0; /* The photograph has no business having an edge: it fades out towards the copy. */ -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .35) 22%, rgba(0, 0, 0, .82) 48%, #000 68%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .35) 22%, rgba(0, 0, 0, .82) 48%, #000 68%); /* A twenty-second drift, so the photograph is never quite still and never seen moving. */ animation: yh-hero-drift 24s ease-in-out infinite alternate; } @keyframes yh-hero-drift { from { transform: scale(1.05); } to { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .yh-hero__photo { animation: none; } } /* One wash across the copy side, one lifting the foot of the panel, and one band across * the top where the transparent bar's links sit over the photograph — so neither the * text, the navigation, nor the join with the page below depends on what the photograph * happens to be doing. */ .yh-hero__scrim { background-image: linear-gradient(180deg, rgba(22, 19, 15, .6) 0%, rgba(22, 19, 15, 0) 16%), linear-gradient(180deg, rgba(22, 19, 15, 0) 62%, rgba(22, 19, 15, .45) 100%), linear-gradient(90deg, rgba(22, 19, 15, .92) 0%, rgba(22, 19, 15, .78) 38%, rgba(22, 19, 15, .2) 62%, rgba(22, 19, 15, 0) 78%); position: absolute; inset: 0; } .yh-hero__inner { z-index: 1; width: 100%; max-width: 80rem; margin: 0 auto; /* The top padding is the fixed bar's ground: 4.5rem of bar plus the breathing room the * old 5rem gave. The copy is centre-aligned anyway, so on tall viewports this only * guards the short ones. */ padding: 9rem 0 5rem; position: relative; } .yh-hero__copy { max-width: 38rem; } .yh-hero__eyebrow { color: #d8c9b4; text-transform: uppercase; letter-spacing: .18em; align-items: center; gap: 1rem; margin: 0 0 1.5rem; font-family: var(--font-text); font-size: .75rem; font-weight: 500; display: flex; } .yh-hero__rule { background-color: #d8c9b4; flex: none; width: 3rem; height: 1px; display: inline-block; } /* The reference sets the two halves of its display line on their own rows, the second in * the accent. Ours is the client's brand line rather than her name, set the same way. */ .yh-hero__title { color: #efe9de; letter-spacing: -.005em; margin: 0; font-family: var(--font-display); font-size: clamp(2.75rem, 5vw, 4.75rem); font-weight: 400; line-height: 106%; } /* The brand line is English and set the way the board sets its logotype: caps, tracked. * A Bulgarian heading is a sentence, and tracking a sentence apart only makes it harder to * read, so the caps ride on the language rather than on the class. */ .yh-hero__title[lang="en"] { text-transform: uppercase; letter-spacing: .06em; } .yh-hero__title-accent { color: #c2a882; display: block; } .yh-hero__tagline { color: #cabfae; max-width: 30rem; margin: 1.75rem 0 0; font-family: var(--font-text); font-size: 1rem; font-weight: 300; line-height: 175%; } .yh-hero__actions { flex-wrap: wrap; gap: 1rem; margin-top: 2.25rem; display: flex; } /* Squared, uppercase, tracked — the reference's pair: one filled, one outlined. */ .yh-hero__cta { color: #16130f; text-transform: uppercase; letter-spacing: .14em; background-color: #efe9de; border: 1px solid #efe9de; justify-content: center; align-items: center; min-height: 2.75rem; padding: 1rem 2.5rem; font-family: var(--font-text); font-size: .8125rem; font-weight: 600; text-decoration: none; transition: background-color .25s, border-color .25s, color .25s; display: inline-flex; } .yh-hero__cta:hover { background-color: #c2a882; border-color: #c2a882; color: #16130f; } .yh-hero__cta.is-ghost { color: #efe9de; background-color: rgba(0, 0, 0, 0); border-color: rgba(239, 233, 222, .55); } .yh-hero__cta.is-ghost:hover { color: #16130f; background-color: #efe9de; border-color: #efe9de; } /* The row of facts. Every one of them is in the brief; nothing here is a round number * invented to look impressive. */ .yh-hero__stats { border-top: 1px solid rgba(239, 233, 222, .16); grid-column-gap: 1.5rem; grid-template-columns: repeat(3, 1fr); margin: 3rem 0 0; padding-top: 1.75rem; display: grid; } .yh-hero__stat dt { color: #efe9de; font-family: var(--font-display); font-size: 1.75rem; font-weight: 400; line-height: 110%; } .yh-hero__stat dd { color: #a99c8a; text-transform: uppercase; letter-spacing: .1em; max-width: 12rem; margin: .5rem 0 0; font-family: var(--font-text); font-size: .6875rem; font-weight: 500; line-height: 150%; } /* Below 992 there is no second column to give the photograph, and laying the copy over it * put the words on her face — measured at 2.5:1 against the brightest pixels behind them. * So the panel stacks instead: the photograph takes a band at the top and fades into the * dark, and the copy sits on solid ground underneath, where it is always readable. */ /* Without a photograph there is no second column and nothing to read the copy against, so * the panel centres what it has and stops filling the viewport. The 404 uses this. */ .yh-hero.is-plain { text-align: center; min-height: 0; } .yh-hero.is-plain .yh-hero__inner { padding: 7rem 0; } .yh-hero.is-plain .yh-hero__copy { max-width: 44rem; margin: 0 auto; } .yh-hero.is-plain .yh-hero__eyebrow, .yh-hero.is-plain .yh-hero__actions { justify-content: center; } .yh-hero.is-plain .yh-hero__rule { display: none; } .yh-hero.is-plain .yh-hero__tagline { margin-left: auto; margin-right: auto; } @media screen and (max-width: 991px) { .yh-hero { flex-direction: column; align-items: stretch; min-height: 0; padding-left: 0; padding-right: 0; } .yh-hero__photo { object-position: var(--hero-photo-position-stacked, 62% 2%); width: 100%; height: min(50svh, 24rem); position: relative; -webkit-mask-image: none; mask-image: none; } /* The top stop is deeper than the band strictly needs, because on a phone the * transparent bar's wordmark and hamburger sit directly on the photograph. */ .yh-hero__scrim { background-image: linear-gradient(180deg, rgba(22, 19, 15, .6) 0%, rgba(22, 19, 15, 0) 38%, rgba(22, 19, 15, .55) 78%, #16130f 100%); height: min(50svh, 24rem); inset: 0 0 auto; } /* The photograph's drift scales it past the band by a few pixels, and the scrim ends * exactly at the band: the copy's own ground hides the sliver of raw photo between. */ .yh-hero__inner { background-color: #16130f; padding: 2.25rem 5% 3.5rem; } /* The plain panel keeps its taller top for the bar, but needs the same side gutter — * without it the 404 and /mikrobleiding ran their copy and buttons edge to edge. */ .yh-hero.is-plain .yh-hero__inner { padding: 7rem 5% 3.5rem; } .yh-hero__copy { max-width: none; } } /* A phone on its side shows only a sliver of the portrait band, and the stacked framing — * tuned for a tall screen — put that sliver on her hair under the bar. */ @media screen and (max-width: 991px) and (orientation: landscape) and (max-height: 540px) { .yh-hero__photo { object-position: var(--hero-photo-position-landscape, var(--hero-photo-position-stacked, 62% 2%)); } } /* On a phone the first screen is a budget: the portrait band, the line, the title, the * paragraph and the booking button have to share roughly 660px of real browser viewport. * The band gives up a fifth of its height and the gaps between the lines tighten, which * brings „Запази час" above the fold on the common phones without cropping her face. */ @media screen and (max-width: 767px) { .yh-hero__photo, .yh-hero__scrim { height: min(40svh, 20rem); } .yh-hero__inner { text-align: center; padding-top: 1.5rem; } /* The desktop's .18em tracking pushed the line to two rows at 360px, stranding the „·" * at one end and a single word on the other. */ .yh-hero__eyebrow { justify-content: center; letter-spacing: .08em; text-wrap: balance; margin-bottom: 1rem; font-size: .6875rem; } .yh-hero__rule { display: none; } .yh-hero__tagline { margin-top: 1.25rem; margin-left: auto; margin-right: auto; line-height: 165%; } /* The plain panel's short sentence otherwise ends on a stranded „ето кои." */ .yh-hero.is-plain .yh-hero__tagline { text-wrap: balance; } .yh-hero__actions { justify-content: center; gap: .75rem; margin-top: 1.5rem; } /* Less side padding lets the two buttons sit side by side on wider phones without their * labels breaking; the labels are centred in grown buttons, so nothing else moves. */ .yh-hero__cta { flex: 1 1 12rem; padding-left: 1.25rem; padding-right: 1.25rem; } .yh-hero__stats { grid-column-gap: 1rem; } .yh-hero__stat dt { font-size: 1.375rem; } .yh-hero__stat dd { letter-spacing: .08em; max-width: none; text-wrap: balance; } } /* Three columns of facts leave each label about 90px on a phone, which only 10px type * fitted — and even then the labels broke into three-line stacks. Below 480 each fact * stacks, the figure over a label at a size that can be read, centred like the copy above * it (a figure | label table could only centre by chance, its columns sized by the words). */ @media screen and (max-width: 479px) { .yh-hero__title { font-size: 2.375rem; } .yh-hero__stats { grid-template-columns: 1fr; row-gap: 1rem; } .yh-hero__stat { text-align: center; } .yh-hero__stat dt { white-space: nowrap; font-variant-numeric: lining-nums; } .yh-hero__stat dd { letter-spacing: .06em; margin: .375rem 0 0; font-size: .75rem; text-wrap: balance; } } /* ---- The navbar ---------------------------------------------------------- * The bar is the hero's ink on every page — over the home hero it fuses with the panel, * over the light pages it is the dark band that answers the footer. On the home page the * component adds is-overlay: the bar comes out of the flow and lies on the hero itself, * transparent while the page is at the top, frosted glass once it scrolls (is-scrolled, * a 8px threshold the component owns). Colours live up in the palette section with the * other nav recolours; this section is the geometry and the two states. */ .navbar { background-color: var(--ink-deep); } .navbar.is-overlay { background-color: transparent; transition: background-color .25s ease, box-shadow .25s ease; position: fixed; top: 0; left: 0; right: 0; } .navbar.is-overlay.is-scrolled { background-color: rgba(22, 19, 15, .78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); /* An inset shadow, not a border: the hairline must not add a pixel to a fixed bar. */ box-shadow: inset 0 -1px 0 rgba(239, 233, 222, .12); } /* Without the blur the content would show through the .78 almost legibly; nearly solid * is the same look one step less glassy. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .navbar.is-overlay.is-scrolled { background-color: rgba(22, 19, 15, .96); } } /* While the collapsed menu is open its sheet hangs off the bar, and a transparent bar * would leave a see-through gap above the sheet. Older engines without :has() only miss * this seam — the sheet itself paints its own ground. */ .navbar.is-overlay:has(.w--open) { background-color: var(--ink-deep); } /* The fixed bar covers the top 4.5rem of whatever an anchor scrolls to; every section * the navigation links to keeps its first line out from under it. */ #uslugi, #mikroblejding, #migloplastika, #laminirane-migli, #laminirane-vezhdi, #oformiane, #rezultati, #rezultati-mikrobleiding, #ceni, #za-men, #kontakti, #konsultacia, #programa { scroll-margin-top: 5.5rem; } /* The collapsed sheet was the template's cream with ink links; under a dark bar it turns * ink with cream links, and the hamburger's hard-coded #000 lines turn cream with it. * The dropdown links only exist inside the sheet at this width — on the desktop they * live in the floating cream panel, which keeps its own ink. */ @media screen and (max-width: 991px) { /* Bounded to the screen under the bar and scrollable on its own: in landscape, with * Услуги open, the last links and the booking button hung below the viewport where no * scroll could reach them, and a drag on the sheet scrolled the page behind it. */ .navbar-menu { background-color: var(--ink-deep); box-shadow: 0 6px 16px rgba(0, 0, 0, .35); max-height: calc(100vh - 4.5rem); max-height: calc(100svh - 4.5rem); overscroll-behavior: contain; } /* The template paints the open list its cream even here, where the sheet's own media * rules already stripped the panel's border and padding — against cream links that is * an invisible menu inside a beige box. In the sheet the list is not a panel at all, * just rows on the same dark ground. */ .navbar-menu .navbar-dropdown-list.w--open { background-color: transparent; } .navbar .navbar-dropdown-link { color: var(--color--white-solid); } .navbar .navbar-dropdown-link:hover, .navbar .navbar-dropdown-link.w--current { color: var(--color--brown-light-3); } .menu-icon-line-top, .menu-icon-line-middle, .menu-icon-line-bottom { background-color: var(--color--white-solid); } } /* In landscape the sheet scrolls, and the row it cuts can end exactly at its edge, so * nothing showed there was more. The fade sits in the sheet's 2rem bottom padding and only * rises over the rows while they continue below. */ @media screen and (max-width: 991px) and (max-height: 540px) { .navbar-menu::after { content: ""; pointer-events: none; background-image: linear-gradient(rgba(22, 19, 15, 0), var(--ink-deep)); height: 2rem; margin-bottom: -2rem; display: block; position: sticky; bottom: -2rem; } } /* ---- The entry ------------------------------------------------------------ * A curtain in the brand's ink holds the wordmark for a beat, then lifts and hands the * page over; the hero rises through it as it goes. * * The curtain is painted by index.html, so it is up from the first frame. It lifts when * the app says the hero is on screen (is-ready) rather than on a timer of its own — the * two clocks are different, and a curtain that lifts before React has rendered would * reveal an empty page on a cold load. The unclassed rule below is the safety net: if the * bundle never arrives, the curtain still leaves after 4.6s on its own. * * The two lifts carry different animation names on purpose. With one name, adding * is-ready only re-times the animation that has been running since the curtain was first * styled — and 1.2s in, that re-timed animation is already finished, so the curtain * vanished in a single frame and the lift was never seen. * * The hero's entrance is keyed to the same moment (html.yh-entered), not to when React * mounted it: with a longer hold, a hero that started rising at mount would finish its * whole entrance behind the curtain and nobody would see it. * * 0.15s the wordmark fades up * 0.50s the rule draws under it * 1.20s earliest the curtain may lift (later if the app is not ready yet) * +0.10s the lift starts, taking 0.95s, and carries the wordmark up with it; the copy * rises through it a line at a time * +1.65s the last line has settled; the app removes the curtain node */ .yh-intro { z-index: 9999; background-color: #16130f; justify-content: center; align-items: center; display: flex; position: fixed; inset: 0; animation: yh-intro-lift-late .95s cubic-bezier(.76, 0, .24, 1) 4.6s forwards; } /* Later pages of the same visit get no curtain moment — but the ink stays up, without the * wordmark and without a hold, until the app has the hero on screen. Hiding it outright let * the cream page paint first on slower phones: a dark page, a cream flash, a dark hero. */ html.yh-intro-skip .yh-intro { animation: yh-intro-lift-late 0s linear 4.6s forwards; } html.yh-intro-skip .yh-intro__inner { display: none; } .yh-intro.is-ready { animation: yh-intro-lift .95s cubic-bezier(.76, 0, .24, 1) .1s forwards; } .yh-intro__inner { flex-direction: column; align-items: center; gap: 1.25rem; display: flex; } .yh-intro__mark { width: 15rem; max-width: 56vw; height: auto; animation: yh-intro-mark .8s cubic-bezier(.16, 1, .3, 1) .15s backwards; } .yh-intro__rule { transform-origin: 50%; background-color: rgba(239, 233, 222, .5); width: 9rem; height: 1px; animation: yh-intro-rule .65s cubic-bezier(.16, 1, .3, 1) .5s backwards; } @keyframes yh-intro-mark { from { opacity: 0; transform: translateY(12px); } } @keyframes yh-intro-rule { from { transform: scaleX(0); } } @keyframes yh-intro-lift { to { transform: translateY(-101%); } } @keyframes yh-intro-lift-late { to { transform: translateY(-101%); } } @keyframes yh-rise { from { opacity: 0; transform: translateY(16px); } } @keyframes yh-fade { from { opacity: 0; } } @media (prefers-reduced-motion: no-preference) { /* Held back until the curtain is told to go. Without JS there is no hero to hold. The * photograph is deliberately not in this list: it is the page's largest paint and the * curtain already covers it, so holding it at opacity 0 behind a wipe only pushed LCP * from ~0.8s to ~2.3s. It drifts from first paint instead (see the hero block). */ html:not(.yh-entered) .yh-hero__eyebrow, html:not(.yh-entered) .yh-hero__title, html:not(.yh-entered) .yh-hero__tagline, html:not(.yh-entered) .yh-hero__actions, html:not(.yh-entered) .yh-hero__stats, html:not(.yh-entered) .navbar { opacity: 0; } /* Counted from the moment the curtain is told to lift — which, on a route change with no * curtain, is already in the past, so the hero simply plays on mount. */ html.yh-entered .yh-hero__eyebrow { animation: yh-rise .9s cubic-bezier(.16, 1, .3, 1) .35s backwards; } html.yh-entered .yh-hero__title { animation: yh-rise .9s cubic-bezier(.16, 1, .3, 1) .45s backwards; } html.yh-entered .yh-hero__tagline { animation: yh-rise .9s cubic-bezier(.16, 1, .3, 1) .55s backwards; } html.yh-entered .yh-hero__actions { animation: yh-rise .9s cubic-bezier(.16, 1, .3, 1) .65s backwards; } html.yh-entered .yh-hero__stats { animation: yh-rise .9s cubic-bezier(.16, 1, .3, 1) .75s backwards; } html.yh-entered .navbar { animation: yh-fade .8s ease .5s backwards; } } /* Nothing above happens for anyone who asked for less motion — including the curtain, * which is removed rather than merely made still, so it can never cover the page. */ @media (prefers-reduced-motion: reduce) { .yh-intro { display: none; } } /* ---- Контакти ------------------------------------------------------------- * The block she ticked off on the reference site: the facts in a single centred column, * each behind a circled mark. Everything is ours, so it lives here. */ .yh-contacts__eyebrow { color: var(--color--brown-solid); text-transform: uppercase; letter-spacing: .18em; margin: 0 0 .75rem; font-family: var(--font-text); font-size: .75rem; font-weight: 500; } .yh-contacts__rule { background-color: var(--accent-hairline-strong); width: 4rem; height: 1px; margin: 1.25rem auto 0; display: block; } .yh-contacts__list { flex-direction: column; gap: 1.75rem; max-width: 26rem; margin: 0 auto; display: flex; } .yh-contacts__row { align-items: center; gap: 1.25rem; display: flex; } .yh-contacts__icon { color: var(--color--brown-solid); border: 1px solid var(--accent-hairline-strong); border-radius: 50%; flex: none; justify-content: center; align-items: center; width: 3rem; height: 3rem; display: inline-flex; } .yh-contacts__label { color: var(--color--black-solid); font-family: var(--font-text); font-size: 1.0625rem; font-weight: 600; } .yh-contacts__value { color: var(--color--grey-medium); margin: .25rem 0 0; font-size: 1rem; line-height: 150%; } /* The two links here are facts, not calls to action: they read as the text around them and * only the underline says they can be pressed. */ .yh-contacts__value a { color: inherit; text-decoration: underline; text-underline-offset: .15em; } .yh-contacts__value a:hover { color: var(--color--brown-solid); } @media screen and (max-width: 767px) { .yh-contacts__list { gap: 1.5rem; } .yh-contacts__row { gap: 1rem; } } /* ---- Често задавани въпроси (/mikrobleiding) ------------------------------ * The cards are the template's FAQ classes; the open/close is ours, because this page * runs under the home page id and the template's accordion interactions never bind here. * The question is a real