/* ============================================================ Landing pod targi Beauty Forum & Hair 13.09.2026 Adres z QR na roll-upie: vreego.com/pl/beauty Wszystko pod .vbt, bo globalny arkusz serwisu ma *{color:#fff} i body.light *{color:#292929}. Ten plik wchodzi w PRZED light.css, stad dwie klasy w selektorach motywu. Kolory zmierzone z pliku do druku roll-upu (nie dobierane na oko): krem #f1eeeb, gradient #e430f0 -> #b40ccc -> #7824cc. ============================================================ */ .vbt { --krem: #f1eeeb; --krem2: #e7e2dc; --bialy: #ffffff; --tx: #17120f; --mut: #6b625b; --linia: #ddd6ce; --grad: linear-gradient(96deg, #e430f0 0%, #b40ccc 48%, #7824cc 100%); --akc: #a600c1; --cien: 0 1px 2px rgba(23,18,15,.04), 0 16px 40px rgba(23,18,15,.07); --disp: 'Cormorant Garamond', 'Times New Roman', serif; --ui: 'Jost', 'Saira', sans-serif; display: block; background: var(--krem); color: var(--tx); font-family: var(--ui); font-weight: 300; overflow-x: clip; } body.dark .vbt { --krem: #131110; --krem2: #1c1917; --bialy: #1e1a18; --tx: #f4f1ee; --mut: #a99f96; --linia: #2e2825; --cien: 0 1px 2px rgba(0,0,0,.5), 0 16px 40px rgba(0,0,0,.38); } .vbt *, .vbt *::before, .vbt *::after { box-sizing: border-box; } /* To samo co z kolorem: globalny arkusz ma *{font-family:'Saira'} i trafia w kazdy element z osobna, wiec sam font-family na .vbt nie wystarczy. */ .vbt * { font-family: var(--ui); } .vbt .vbt-h1, .vbt .vbt-h1 span, .vbt .vbt-h2, .vbt .vbt-card__no, .vbt .vbt-stat__no, .vbt .vbt-leaks__list li::before { font-family: var(--disp); } /* Cormorant Garamond domyslnie daje cyfry tekstowe (zerowa wysokosc x), przez co "100" czyta sie jak "IOO", a "01" jak "OI". Wymuszamy cyfry wersalikowe - sprawdzone w przegladarce, nie zalozone. */ .vbt .vbt-card__no, .vbt .vbt-stat__no, .vbt .vbt-leaks__list li::before { font-variant-numeric: lining-nums; -moz-font-feature-settings: "lnum"; -webkit-font-feature-settings: "lnum"; font-feature-settings: "lnum"; } /* UWAGA: globalny arkusz serwisu ma *{color:#fff}, ktore trafia w KAZDY element bezposrednio. Dlatego nie wolno tu uzyc color:inherit - rodzic ma juz wtedy policzona biel i dziedziczenie ja przenosi. Kolor musi byc wpisany wprost, a selektor z dwoma klasami bije gwiazdke. */ .vbt p, .vbt li, .vbt ol, .vbt ul, .vbt label, .vbt h1, .vbt h2, .vbt h3, .vbt span, .vbt strong, .vbt a, .vbt input, .vbt select, .vbt textarea, .vbt button { color: var(--tx); } .vbt .vbt-eyebrow, .vbt .vbt-lead, .vbt .vbt-note, .vbt .vbt-card p, .vbt .vbt-what__foot, .vbt .vbt-proof__lead, .vbt .vbt-leaks__lead, .vbt .vbt-leaks__list p, .vbt .vbt-src, .vbt .vbt-stat__tx, .vbt .vbt-optional, .vbt .vbt-check label, .vbt .vbt-field label, .vbt .vbt-form__intro p, .vbt .vbt-who p, .vbt .vbt-who__role, .vbt .vbt-who__contact span, .vbt .vbt-leaks__list li::before { color: var(--mut); } .vbt-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding-inline: 22px; } /* ---------- typografia ---------- */ .vbt-eyebrow { font-family: var(--ui); font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--mut); margin: 0 0 18px; } .vbt-h1 { font-family: var(--disp); font-weight: 300; font-size: clamp(40px, 10.5vw, 86px); line-height: 1.03; letter-spacing: -.01em; margin: 0 0 22px; } .vbt-h2 { font-family: var(--disp); font-weight: 300; font-size: clamp(30px, 5.6vw, 50px); line-height: 1.12; letter-spacing: -.01em; margin: 0 0 20px; } .vbt-grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .vbt-lead { font-size: clamp(16px, 2.1vw, 19px); line-height: 1.55; color: var(--mut); margin: 0 0 30px; max-width: 30ch; } /* ---------- przycisk ---------- */ .vbt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 17px 34px; border: 0; border-radius: 999px; background: var(--grad); background-size: 160% 100%; background-position: 0% 50%; color: #fff !important; font-family: var(--ui); font-size: 15px; font-weight: 500; letter-spacing: .02em; text-decoration: none; cursor: pointer; transition: background-position .5s ease, transform .25s ease, box-shadow .25s ease; box-shadow: 0 8px 24px rgba(166, 0, 193, .22); } .vbt-btn:hover, .vbt-btn:focus-visible { background-position: 100% 50%; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(166, 0, 193, .3); color: #fff !important; text-decoration: none; } .vbt-btn--full { width: 100%; } .vbt-note { font-size: 13px; letter-spacing: .04em; color: var(--mut); margin: 14px 0 0; } /* ============================================================ HERO */ .vbt-hero { position: relative; isolation: isolate; min-height: 100svh; display: flex; align-items: flex-end; padding: 150px 0 56px; overflow: hidden; } .vbt-hero__media { position: absolute; inset: 0; z-index: -2; } .vbt-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 14%; display: block; } /* Zaslona. Na telefonie zdjecie zostaje w gornej polowie, a od 46% w dol krem jest juz pelny - tekst NIGDY nie lezy na zdjeciu. Pierwsza wersja miala lagodne przejscie do 66% i naglowek wchodzil na czarna torbe: nieczytelny dokladnie tam, gdzie klientka patrzy najpierw. */ .vbt-hero__veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(241, 238, 235, 0) 0%, rgba(241, 238, 235, 0) 26%, rgba(241, 238, 235, .5) 37%, rgba(241, 238, 235, .93) 45%, var(--krem) 51%, var(--krem) 100%); } body.dark .vbt-hero__media img { opacity: .6; } body.dark .vbt-hero__veil { background: linear-gradient(180deg, rgba(19,17,16,0) 0%, rgba(19,17,16,0) 26%, rgba(19,17,16,.5) 37%, rgba(19,17,16,.93) 45%, var(--krem) 51%, var(--krem) 100%); } .vbt-hero__inner { position: relative; } .vbt-hero__cta { margin-top: 4px; } /* ============================================================ CO DOSTAJESZ */ .vbt-what { background: var(--bialy); padding: 74px 0 78px; } .vbt-cards { display: grid; gap: 18px; margin-top: 34px; } .vbt-card { position: relative; padding: 30px 26px 28px; background: var(--krem); border: 1px solid var(--linia); border-radius: 3px; } .vbt-card__no { display: block; font-family: var(--disp); font-size: 34px; line-height: 1; margin-bottom: 14px; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .vbt-card h3 { font-family: var(--ui); font-size: 17px; font-weight: 500; line-height: 1.35; margin: 0 0 10px; } .vbt-card p { font-size: 15px; line-height: 1.62; color: var(--mut); margin: 0; } .vbt-what__foot { margin: 30px 0 0; padding-top: 24px; border-top: 1px solid var(--linia); font-size: 15px; line-height: 1.62; color: var(--mut); max-width: 70ch; } /* ============================================================ SKAD MIARA */ .vbt-proof { padding: 74px 0 78px; } .vbt-proof__lead { font-size: clamp(16px, 2vw, 18px); line-height: 1.62; color: var(--mut); max-width: 64ch; margin: 0; } .vbt-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 42px; padding-top: 34px; border-top: 1px solid var(--linia); } .vbt-stat { text-align: left; } .vbt-stat__no { display: block; font-family: var(--disp); font-size: clamp(38px, 8vw, 62px); line-height: 1; letter-spacing: -.02em; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .vbt-stat__tx { display: block; margin-top: 10px; font-size: 13px; line-height: 1.45; letter-spacing: .03em; color: var(--mut); } /* ============================================================ GDZIE TRACISZ */ .vbt-leaks { background: var(--bialy); padding: 74px 0 78px; } .vbt-leaks__lead { font-size: clamp(16px, 2vw, 18px); line-height: 1.62; color: var(--mut); max-width: 56ch; margin: 0; } .vbt-leaks__list { list-style: none; counter-reset: leak; margin: 40px 0 0; padding: 0; display: grid; gap: 0; } .vbt-leaks__list li { counter-increment: leak; position: relative; padding: 26px 0 26px 62px; border-top: 1px solid var(--linia); } .vbt-leaks__list li:last-child { border-bottom: 1px solid var(--linia); } .vbt-leaks__list li::before { content: counter(leak, decimal-leading-zero); position: absolute; left: 0; top: 26px; font-family: var(--disp); font-size: 26px; line-height: 1; color: var(--mut); opacity: .75; } .vbt-leaks__list h3 { font-family: var(--ui); font-size: 17px; font-weight: 500; line-height: 1.35; margin: 0 0 8px; } .vbt-leaks__list p { font-size: 15px; line-height: 1.62; color: var(--mut); margin: 0; max-width: 62ch; } .vbt-src { margin: 26px 0 0; font-size: 12px; line-height: 1.55; color: var(--mut); opacity: .8; } /* ============================================================ FORMULARZ */ .vbt-form { padding: 74px 0 82px; } .vbt-form__grid { display: grid; gap: 34px; } .vbt-form__intro p { font-size: 16px; line-height: 1.62; color: var(--mut); margin: 0 0 16px; max-width: 46ch; } .vbt-form__open { padding: 18px 20px; border-left: 2px solid var(--akc); background: var(--bialy); } .vbt-form__open strong { font-weight: 500; color: var(--tx); } .vbt-form__box { background: var(--bialy); border: 1px solid var(--linia); border-radius: 3px; padding: 30px 26px 28px; box-shadow: var(--cien); } .vbt-field { margin-bottom: 16px; } .vbt-field label { display: block; font-size: 13px; font-weight: 400; letter-spacing: .03em; color: var(--mut); margin-bottom: 7px; } .vbt-req { color: var(--akc); } .vbt .form-control { width: 100%; padding: 13px 14px; font-family: var(--ui); font-size: 15px; font-weight: 300; color: var(--tx); background: var(--krem); border: 1px solid var(--linia); border-radius: 2px; outline: none; transition: border-color .2s ease, box-shadow .2s ease; -webkit-appearance: none; appearance: none; } .vbt select.form-control { background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 40px; } .vbt .form-control:focus { border-color: var(--akc); box-shadow: 0 0 0 3px rgba(166, 0, 193, .1); } .vbt textarea.form-control { resize: vertical; min-height: 84px; } .vbt-optional { margin: 22px 0 18px; padding-top: 18px; border-top: 1px solid var(--linia); font-size: 13px; line-height: 1.55; color: var(--mut); } .vbt-check { display: flex; align-items: flex-start; gap: 10px; margin: 20px 0 20px; } .vbt-check input { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 2px; accent-color: var(--akc); } .vbt-check label { font-size: 11.5px; line-height: 1.5; color: var(--mut); } .vbt .form_result { margin: 0 0 14px; font-size: 14px; line-height: 1.5; } .vbt .form_result.text-success { color: #1f7a3d; } .vbt .form_result.text-danger { color: #b3261e; } body.dark .vbt .form_result.text-success { color: #58d68a; } body.dark .vbt .form_result.text-danger { color: #ff8a80; } /* ============================================================ KTO PROWADZI */ .vbt-who { background: var(--bialy); padding: 68px 0 74px; border-top: 1px solid var(--linia); } .vbt-who__grid { display: grid; gap: 40px; } .vbt-who__name { margin-bottom: 4px; } .vbt-who__role { font-size: 14px; letter-spacing: .04em; color: var(--mut); margin: 0 0 18px; } .vbt-who p { font-size: 15px; line-height: 1.62; color: var(--mut); max-width: 52ch; } .vbt-who__contact { margin-top: 20px; font-size: 16px; } .vbt-who__contact a { color: var(--tx); border-bottom: 1px solid var(--linia); padding-bottom: 2px; transition: border-color .2s ease; } .vbt-who__contact a:hover { border-color: var(--akc); text-decoration: none; } .vbt-who__contact span { margin: 0 10px; color: var(--mut); } .vbt-who__services ul { list-style: none; margin: 0; padding: 0; } .vbt-who__services li { padding: 12px 0; border-bottom: 1px solid var(--linia); font-size: 15px; letter-spacing: .02em; } .vbt-who__services li:first-child { border-top: 1px solid var(--linia); } .vbt-who__services a:hover { color: var(--akc); text-decoration: none; } /* ============================================================ DESKTOP */ @media (min-width: 768px) { .vbt-wrap { padding-inline: 40px; } .vbt-hero { align-items: center; padding: 160px 0 90px; } /* Kolumna tekstu ograniczona na dzieciach, a nie na .vbt-hero__inner. Inner ma klase .vbt-wrap z margin:0 auto - zwezenie samego innera wysrodkowalo caly blok zamiast trzymac go przy lewej krawedzi. */ .vbt-hero__inner > * { max-width: 620px; } /* Zdjecie jest pionowe 1:1,74 (kadr z roll-upu). Rozciagniete na caly szeroki ekran zostaloby przyciete do samych plecow - dlatego na desktopie zajmuje prawa czesc, a tekst siedzi na kremie po lewej. */ /* Maska na lewej krawedzi zdjecia. Bez niej w ciemnym motywie widac pionowy szew dokladnie w miejscu, gdzie zaczyna sie obrazek - sama zaslona gradientowa go nie chowa, bo obrazek ma twarda krawedz. */ .vbt-hero__media { left: 44%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 24%); mask-image: linear-gradient(90deg, transparent 0%, #000 24%); } .vbt-hero__media img { object-position: 54% 22%; } .vbt-hero__veil { background: linear-gradient(90deg, var(--krem) 0%, var(--krem) 40%, rgba(241, 238, 235, .74) 52%, rgba(241, 238, 235, 0) 68%), linear-gradient(0deg, var(--krem) 0%, rgba(241, 238, 235, 0) 14%); } body.dark .vbt-hero__veil { background: linear-gradient(90deg, var(--krem) 0%, var(--krem) 40%, rgba(19,17,16,.72) 52%, rgba(19,17,16,0) 70%), linear-gradient(0deg, var(--krem) 0%, rgba(19,17,16,0) 14%); } .vbt-lead { max-width: 34ch; } .vbt-cards { grid-template-columns: repeat(3, 1fr); gap: 22px; } .vbt-card { padding: 34px 30px 32px; } .vbt-stats { gap: 28px; } .vbt-leaks__list { grid-template-columns: 1fr 1fr; column-gap: 52px; } .vbt-leaks__list li { padding-left: 66px; } .vbt-leaks__list li:nth-child(2) { border-top: 1px solid var(--linia); } .vbt-leaks__list li:nth-last-child(2) { border-bottom: 1px solid var(--linia); } .vbt-form__grid { grid-template-columns: 1fr 1.05fr; gap: 60px; align-items: start; } .vbt-form__box { padding: 38px 36px 34px; } .vbt-who__grid { grid-template-columns: 1.3fr 1fr; gap: 70px; } } @media (min-width: 1100px) { .vbt-hero__inner > * { max-width: 680px; } .vbt-what, .vbt-proof, .vbt-leaks, .vbt-form { padding: 100px 0 106px; } .vbt-who { padding: 90px 0 96px; } } /* ---------- wejscia ---------- */ .vbt-rise { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; } .vbt-rise.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .vbt-rise { opacity: 1; transform: none; transition: none; } .vbt-btn { transition: none; } } /* ============================================================ CHROME SERWISU NA JASNEJ STRONIE Ten arkusz wchodzi tylko na /pl/beauty/, wiec ponizsze reguly nie dotykaja reszty vreego.com. Naglowek serwisu ma na sztywno czarny gradient (skeleton: linear-gradient 180deg #000 31.43% -> transparent) i bialy tekst. Na ciemnych podstronach to dziala, na kremowej wyglada jak czarna plama nad trescia. To samo z pionowym "ZADZWON DO NAS" i ikonami spolecznosciowymi - biale na kremie praktycznie znikaja. ============================================================ */ body.light header { background: none !important; } body.light header .menu a { color: #17120f; } body.light header .menu .drop-menu a { color: #ffffff; } body.light header .menu a.btn { color: #ffffff; } body.light header .menu a.btn:before { background: #ffffff; } body.light header .menu a.btn span { color: #17120f; } body.light header .menu a.btn:hover span { color: #ffffff; } body.light .contact_trigger { color: #6b625b; } body.light .social_abs a, body.light .social_abs svg path { color: #6b625b; fill: #6b625b; } /* Hamburger na telefonie ma ciemne tlo i biale kreski - zostaje bez zmian, na kremie czyta sie dobrze. */