span.btn[data-form="fixedRequestForm"] {position: relative;}
a.js-show-contact-form.btn.btn--primary:hover:after,
span.btn[data-form="fixedRequestForm"]:hover:after {
content: '';
display: block;
position: absolute;
border-radius: 10px;
animation-duration: 1s;
animation-name: effectButton;
animation-iteration-count: once
}
@keyframes effectButton {
0% {
border: 3px solid var(--primary-color);
width: 100%;
height: 100%;
}
40% {
width: 140%;
height: 150%;
}
100% {
opacity: 0;
filter: blur(30px)
}
}
@keyframes blink {
10% {
scale: initial;
}
20% {
scale: 0.9;
}
30% {
scale: 1.05
}
40% {
scale: initial;
}
}
#ai-friendly-footer { border-top: 1px solid rgba(255, 255, 255, .1); line-height: 1.7;}
#ai-friendly-footer table {margin: initial !important; max-width: initial;}
#ai-friendly-footer table * {background-color: initial;}
.multicategory-items .description h2 { font-size: 32px;}
.multicategory-items .description p {color: var(--primary-color) ;}
.mobilemenu-footer .js-toggle-menu {display: none}
.footer-privacy {display: flex; gap: 20px; }
/**FORM 2.0 */
.contact-form-v20 .left-section svg {display: initial; top: initial;}
.form-container form {padding: 0px 50px;}
.form-container label {margin: 0px; font-weight: 600; top: 12px; position: relative; padding: 0 5px; background-color: white; left: 15px; transition: 0.2s;}
.form-container {display: flex; justify-content: center; align-items: center; background: linear-gradient(90deg, black 50%, white 50%) !important;}
.contact-form-v20-body {display: flex; height: 100%; width: 100vw;}
.left-section {background-color: black; color: #fff; width: 50%; padding: 40px; display: flex; justify-content: center; align-items: center; position: relative;}
.modal .left-section {height: 100vh;}
.right-section {width: 50%; padding: 40px; display: flex; justify-content: center; align-items: center; background-color: white; overflow: scroll; -ms-overflow-style: none; scrollbar-width: none;}
.right-section::-webkit-scrollbar {display: none;}
.step {display: none;}
.step.active {display: block;}
.step-indicator {display: flex; justify-content: space-evenly; margin-bottom: 20px;}
.step-indicator div span:not(.step--number) {font-size: 14px;}
.step-indicator div {width: 33%; padding: 10px; text-align: center; font-weight: bold; border-bottom: 2px solid #ccc; display: flex; flex-flow: column; align-items: center; margin: 20px 0;}
.step-indicator .active {border-bottom: 2px solid #41c207; color: #41c207; transition: 0.3s;}
.step-indicator .active span.step--number {background-color: #41c207; border-color: #41c207; color: #fff; transition: 0.3s;}
span.step--number {width: 40px; height: 40px; border: 2px solid #767676; display: flex; justify-content: center; align-items: center; border-radius: 50%; margin-bottom: 10px;}
.step-indicator div.active {border-bottom: 2px solid #41c207; color: #41c207;}
#contactForm input[type="checkbox"] {width: 20px; height: 20px; cursor: pointer;}
#contactForm input, #contactForm textarea {border: 1px solid #767676;}
#contactForm textarea {padding-top: 10px; min-height: 105px;}
#contactForm select {border: 1px solid #767676;}
#contactForm label {color: #000;}
#contactForm summary {cursor: pointer; text-align: left;}
.contact-form20-white-body-container {scale: 0.9;}
.contact-form20-wrap {margin-bottom: 15px; margin-top: var(--cf-mt, 3rem);}
@media (max-width: 991px) {
.contact-form20-wrap { margin-top: 1rem !important; }
}
.contact-form20-white-body {background-color: white; border: 7px solid var(--primary-color); border-radius: 10px ; height: 100%; position: sticky; top: 50px; }
.contact-form20-white-body .form-check-activator label {font-size: 12px !important}
.contact-form20-white-body .form__group:not(.form-check) {position: relative; }
.contact-form20-white-body .form__group:not(.form-check) label { position: absolute; top: -10px; left: 24px; background-color: white; }
.contact-form20-white-body .logo {margin-bottom: 20px;}
.contact-form20-white-body #contactForm textarea {min-height: 75px;}
.contact-form20-white-body .validation-error {font-size: 10px }
.contact-form20-white-body .section-title {color: black ; border-bottom: 10px; }
.contact-form20-white-body-container video {max-width: 60%; height: auto; object-fit: cover;}
.contact-form20-logos {display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: center; justify-content: flex-start; padding: 0;}
.contact-form20-logos__item {display: flex; align-items: center;}
.contact-form20-logos__item img {max-height: 140px; width: auto; height: auto; max-width: 420px; object-fit: contain;}
.contact-form20-white-body-container p,
.contact-form20-white-body-container li {font-size: 18px; line-height: 24px;}
.contact-form20-white-body-container ul {
list-style-type: disc;
}
.contact-form20-white-body-container ul li {
border: none;
}
.contact-form20-white-body-container ul li::marker {
color: var(--primary-color);
}
.step-navigation {margin-top: 30px; display: flex; justify-content: space-between;}
.step-navigation.first-step {justify-content: end;}
.right-section-content {width: 87.5%;}
.is-invalid {border: 1px solid red !important; background-color: rgb(255 238 238); transition: 0.2s;}
.rating-element {display: flex; justify-content: center; padding: 40px 40px 40px 80px;}
.form__group.form-check {display: flex; flex-direction: column; flex-wrap: initial; text-align: left;}
.form-check-activator {position: relative;}
.form-check-activator .validation-error {left: 0px; top: 31px;}
.form-check-activator label {left: 0px; top: -1px; font-size: 14px !important;}
.agreement_full_text {font-size: 12px; line-height: 25px; display: none; margin-top: 25px;}
.form__group.form-check p {padding: 0px; margin: 0px;}
.form__group.form-check label {text-align: justify; font-size: 12px;}
.form__group.form-check input {margin-right: 10px;}
.form__input.form-error {border: 1px solid crimson !important; background-color: rgb(255 241 244); }
.form__group input:focus {border: 1px solid #41c207;}
.list-of-services {width: 100%;}
.list-of-services > div {border-bottom: 1px solid #dadada;}
.service-item {padding: 5px 10px; display: flex;}
.service-item label {left: 0px; cursor: pointer; top: 0px; font-weight: normal;}
.arrow-up {transform: rotate(45deg); -webkit-transform: rotate(45deg); transition: 0.2s;}
.arrow-down {transform: rotate(-135deg); -webkit-transform: rotate(-135deg); transition: 0.2s;}
.arrow-item {border: solid #000; border-width: 0 3px 3px 0; display: inline-block; padding: 3px; cursor: pointer; top: 5px; position: relative;}
.form10-agreements .arrow-item{ top: 0px}
.form10-agreements label {font-weight :bold }
.show-full-agreement-text {width: 25px; height: 25px; display: block; text-align: center;}
.form-check-activator {display: flex;}
.form-container .contact-form__header {color: black;}
.h3.section-title.site-area-title {text-align: center;}
.btn--secondary {color: black;}
@media screen and (max-height: 1024px) {.rating-element {display: none;}}
@media screen and (max-width: 1024px) {.form-container .logo {margin-top: 40px; padding-bottom: 0px !important;} .form-container .label-title {text-align: center;} .form-container {height: 100%; background: white !important; padding: 0px } .contact-form-v20-body {display: initial;} .left-section {display: none;} .right-section {width: 100%; padding: 0px;} .form-container form {padding: 0px;} .step-indicator {margin-bottom: 0px;} .step-navigation {margin-top: 0px; flex-direction: column-reverse;} .step-navigation * {margin: 10px 0;}}
/** END FORM 2.0 */
.direct-access-link {border-top: 1px solid rgba(255, 255, 255, .1); border-bottom: 1px solid rgba(255, 255, 255, .1);}
.direct-access-link a {text-align: left; color: rgba(255, 255, 255, .7)}
.post__date_list {color: gray}
header button.js-show-contact-form {
animation-duration: 2s;
animation-name: blink;
animation-iteration-count: infinite;
}
button.js-show-contact-form:hover {
animation: none;
}
.agreement_full_text {margin-top: 0px !important}
label[for="agreement"] {text-align: justify !important ; color: #000 }
#agreement-container {text-align: justify; margin-top: 30px; }
* {outline : none }
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-thumb {
background: var(--primary-color);
border-radius: 2px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
.video-tour {position: fixed; right: 30px; top: 40vh; z-index: 1000; transition: 0.3s; width: 200px; }
.video-tour video {width: 200px; transition: 0.3s; cursor: pointer; border: 3px solid var(--primary-color); }
.video-tour.show-vt {width: 500px;}
.video-tour.show-vt video {width: 500px; transition: 0.3s;}
.video-tour .close-vt {cursor: pointer; background-color: var(--primary-color);border-radius: 50%;width: 40px;height: 40px;display: block;text-align: center;font-size: 15px;position: absolute;top: -20px;right: -20px;color: white}
.video-tour .title { width: 100%;background-color: var(--primary-color);color: white;width: 100%;position: absolute;bottom: 0px;padding: 3px 8px;}
.video-tour.show-vt .next-videos {position: absolute; z-index: 10000; width: 100%;text-align: center;bottom: 40px; padding: 0 40px ; display: flex;justify-content: space-around;}
.video-tour.show-vt .next-videos button {border: 0px; background-color: white; padding: 10px; cursor: pointer;}
.video-tour:not(.show-vt) .next-videos {display: none;}
div.first-plan-section-mask {content: '';width: 100vw;height: 100vh;position: fixed !important;background: rgb(255,255,255,0.6);top: 0px;z-index: 100 !important;left: 0px;transition: 0.5s;pointer-events: none;}
div.first-plan-section > * {position: relative; z-index: 999;}
#page-1938 .collapse-tabs .collapse-tabs__tab:first-child span.h4:first-letter {color: var(--primary-color);font-size: 60px;margin-right: 5px;}
a[rel="post-images"]::before {display: none !important}
.hero__partners {display: flex; align-items: center;}
.hero__partners span {font-size:50px; font-weight: bold;}
.categories {background-color: var(--bigmenu-background-color);}
.categories .bmenu-col:not(:first-child) {display: none ;}
.categories .nav__additional {justify-content: center; padding: 25px;}
.hide-menu { position: absolute; max-width: initial; top: -37px; right: 20px;}
.submenu-dropdown__anchors.subcategories {display: flex;}
.submenu-dropdown__anchors.subcategories .cell-items{padding-top: 1rem }
.submenu-dropdown__anchors.subcategories .cell {flex: 0 0 23%; }
.submenu-dropdown__anchors.subcategories .cell a {padding-top: .4rem; margin-top: 0px; }
.submenu-dropdown__anchors .cell-title {font-weight: bold; margin-bottom: 15px;}
.submenu-dropdown__anchors .cell-title a:hover {color: white }
.col-submenu span {font-size: 22px !important}
.main-categories {padding-right: 0px; }
.main-categories .active {background-color: var(--bigmenu-background-color); padding-right: 0px; font-weight: bold; transition: 0.2s; }
.main-categories .nav__additional {padding: 40px; justify-content: center;}
.main-categories .nav__additional button {display: flex !important;}
.main-category {display: flex; align-items: center; cursor: pointer; }
.main-category a span {color: #fff}
.main-category svg {width: 20px; fill: white ; margin-right: 10px; max-height: 50px;}
.submenu-dropdown__anchors a, .nav__container_submenu li, .nav__container_submenu p {
font-size: 16px;
}
.nav__container_submenu {
max-height: 85vh;
max-width: 92vw;
margin: 0px auto;
}
.newsletter_form i.arrow-item {border-color: #fff ; top: 0px; }
.newsletter_form input {max-width: 400px; }
.newsletter_form button {padding: 17px 17px 17px }
.contact-form-two-cols i.arrow-item, .black-two-col i.arrow-item {border-color: #fff; top: 0px;}
p .green {color: var(--primary-color) !important}
nav.nav--fixed .duty-expert,
.duty-expert {background-color: var(--secondary-color); border-color: var(--secondary-color); }
.expert-duty-contact-section span, .expert-duty-contact-section a {color :#000 !important}
.expert-duty-contact-form, .expert-duty-contact-section {justify-content: center; align-items: center; text-align: center;}
.expert-duty-contact-form .employee, .expert-duty-contact-section .employee {text-align: center; display: flex; justify-content: center; align-items: center; flex-flow: column;}
.expert-duty-contact-form .employee span , .expert-duty-contact-section .employee span{color: #fff ; margin-top: 15px; font-weight: normal;}
.expert-duty-contact-form .employee a.phone, .expert-duty-contact-section .employee a.phone {color: #fff ; font-size: 30px; font-weight: bold; display: flex; font-size :2.8em }
.contact-duty-expert .text-center * {text-align: center;}
.duty-expert-form {background-color: #fff; border: 1px solid var(--primary-color)}
.duty-expert-form .h4,
.expert-duty-contact-form .h4 {font-size: 1.3rem;}
.toast { position: fixed; z-index: 1000; bottom: 1%; padding: 15px 32px; color: #fff; border-radius: 3px; font-weight: bold; min-width: 250px; display: block;}
.toast.danger { background-color: #d91c12 }
.toast.info { background-color: #0069A5 }
.toast.success { background-color: green }
.toast.left { left: 1%;}
.toast.right { right: 1%;}
.toast.top { bottom: 90%;}
.toast.bottom { bottom: 1%;}
.text-left.text-content.wysiwyg-content {margin: 30px 0px 0px 0px !important}
.section.table-section .tbody .tr:first-child {font-weight: bold}
.company-history-vertical .group span {position: sticky;display: flex;top: 20px; border-bottom: 3px solid var(--primary-color); }
.company-history-vertical .event:last-child {border: 0px}
.company-history-vertical .event {border-bottom: 1px dotted #dadada}
#section-36823 .my-container {background-color: white; background: url('https://widoczni.com/_resources/themes/widoczni/images/artboard-pozycjonowanie3.svg') }
#section-36823 .wyswig-cols {background-color: white;}
#section-36823 .wyswig-cols > div {display: flex; align-items: center; justify-content: center;}
#section-36823 .wyswig-cols > div:nth-child(1) {flex-direction: column;}
#section-36823 .wyswig-cols img {margin-bottom: 0px }
#section-36823 .wyswig-cols img, #section-36823 .wyswig-cols, #section-36823 input {border: 1px solid #dadada; }
#section-36823 .wyswig-cols {box-shadow: #bbbbbb 0px 0px 25px;}
#section-36823 .columns .wyswig-cols {max-width: 90%;}
#section-36823 .columns {display: flex; align-items: center; justify-content: center;}
#section-36823 .section-title ,
#section-36823 .label-title {display: none;}
#section-37013 .my-container {background-color: white; background: url('https://widoczni.com/_resources/themes/widoczni/images/artboard-pozycjonowanie3.svg') }
#section-37013 .wyswig-cols {background-color: white;}
#section-37013 .wyswig-cols > div {display: flex; align-items: center; justify-content: center;}
#section-37013 .wyswig-cols > div:nth-child(1) {flex-direction: column;}
#section-37013 .wyswig-cols img {margin-bottom: 0px }
#section-37013 .wyswig-cols img, #section-37013 .wyswig-cols, #section-37013 input {border: 1px solid #dadada; }
#section-37013 .wyswig-cols {box-shadow: #bbbbbb 0px 0px 25px;}
#section-37013 .columns .wyswig-cols {max-width: 90%;}
#section-37013 .columns {display: flex; align-items: center; justify-content: center;}
#section-37013 .section-title ,
#section-37013 .label-title {display: none;}
.form-col { background-color: #000000; display: flex; justify-content: center; align-items: center;}
#fixedRequestFormContainer {display: flex; background-color:#000; width: 100%; color: #fff; padding: 20px; position: sticky; top: 10vh; border-radius: 5px; z-index: 999;}
#fixedRequestFormContainer input[type="text"], #fixedRequestFormContainer input[type="tel"], #fixedRequestFormContainer input[type="email"],#fixedRequestFormContainer select {padding: 5px 10px ; font-size: 14px !important ; height: calc(2em + 2vh) ;max-height: 50px; font-family: "Raleway", sans-serif; width: 100%; }
#fixedRequestFormContainer textarea {padding: 10px 10px ; font-size: 14px ; height: calc(2em + 2vh) ; height: 60px; font-family: "Raleway", sans-serif; width: 100%;}
#fixedRequestFormContainer .h3 {padding: 0px; text-align: center;}
#fixedRequestFormContainer p.validation-error {margin: 0px; padding: 0px; font-size: 10px; color: red !important; position: initial; right: 5px; bottom: 2px;}
#fixedRequestFormContainer a {color: white; text-decoration: underline;}
#fixedRequestFormContainer .form-check-label {font-size: 12px !important; }
#fixedRequestForm .form__group {margin-bottom: calc(0.8em + 1.2vh); position: relative;}
#fixedRequestForm .contact-form__header {margin: 10px 0 10px 0 !important; font-size: 30px}
#fixedRequestForm .simpleform-desc {font-size: 14px; line-height: 22px; text-align: center;}
.search_form__input {padding: 18px 30px; width: 60%; height: 100%; margin-right: 10px;;}
.blog--searchform {margin: 0px; }
.async-result {position: relative;}
.suggest {background-color: white; position: absolute; top: 37px; border-top: 1px solid #dadada ; width: 100%;}
.suggest { padding: 0px; max-height: 150px; overflow: scroll; overflow-x: hidden; background: white; z-index: 100; box-shadow: -2px 8px 15px #888; }
.suggest li a {cursor: pointer; width: 100%; display: block;}
.suggest li {padding: 10px;}
.suggest li:hover {background-color: #e0e0e0; }
.partner-footer-container {
border-top: 1px solid rgba(255, 255, 255, .1);
border-bottom: 1px solid rgba(255, 255, 255, .1);
margin-top: 80px;
margin-bottom: 80px;
padding-top: 80px;
padding-bottom: 80px;
}
.clutch-footer-widget {
max-height: 88px;
max-width: 120px;
}
.clutch-section-widget {display: flex; justify-content: center;}
.clutch-section-widget iframe {max-width: 977px;}
.partner-widgets iframe {max-width: 220px;}
.partner-widgets {display: flex; align-items: inherit; justify-content: center;}
.tag-list a {border: 2px solid black; border-radius: 3px; margin-bottom: 5px; font-weight: bold; color: black ; padding: 5px 10px ; display: inline-block ; transition: 0.2s}
.tag-list a:hover{background-color: var(--primary-color); transition: 0.2s; color: #fff }
.tag-list svg {width: 22px; margin-right: 10px; margin-top: 5px;}
.tag-list svg path {fill: var(--primary-color); ;}
.footer-link-cta .col { display: flex; justify-content: end;}
.cookies-layer {display: none;}
.content-table {width: 100%; position: relative; max-width: 1000px; margin: 0px auto ; margin-top: 50px; margin-bottom: 50px; }
.content-table { background-color: #f1f1f1; display: flex; justify-content: center}
.content-table-list {display: block; border: 1px solid #f1f1f1; }
.content-table p {cursor: pointer; line-height: 23px; color: #000; font-size: 16px; margin-top: 15px;}
.content-table .parent-h3 {margin-left: 15px;}
.content-table span.h4:first-of-type::first-letter,
.content-table .h4 {color: #000000 !important;
font-size: 28px !important;
line-height: initial !important;
margin-right: 0px !important;
}
.overlay-mobilemenu {
position: fixed;
top: 0px;
background-color: white;
z-index: 1100;
display: block;
height: 100vh;
width: 50vw;
right: 0px;
}
.js-close-menu {cursor: pointer;}
.overlay-mobilemenu .items {
font-size: 10px !important;
padding: 30px 10px 0 0 ;
max-width: 99%;
}
.overlay-mobilemenu .mobilemenu-item {
padding: 10px;
}
.overlay-mobilemenu .mobilemenu-item a.active{
color: var(--primary-color)
}
.overlay-mobilemenu .mobilemenu-children {
display: none;
margin-top: 10px;
margin-bottom: 10px;
}
.overlay-mobilemenu .nav__additional {
margin-top: 50px;
flex-direction: column;
display: block;
}
.overlay-mobilemenu .nav__anchor {
width: 100%;
height: 25px;
background-repeat: no-repeat;
padding: 10px;
}
.overlay-mobilemenu .nav__additional button {
margin-bottom: 15px;
}
.overlay-mobilemenu .items a.nav__anchor {
font-size: 15px;
padding-right: 35px; /* miejsce na strzałkę */
}
/* Strzałka jako ::after, żeby dało się ją obrócić o 180° po rozwinięciu (.active) */
.overlay-mobilemenu .items a.nav__anchor::after {
content: "";
position: absolute;
right: 10px;
top: 50%;
width: 21px;
height: 21px;
background: url(/_resources/themes/widoczni/images/icons/arrow-right-green.svg) no-repeat center / 21px 21px;
transform: translateY(-50%);
transition: transform .2s linear;
}
.overlay-mobilemenu .items a.nav__anchor.active::after {
transform: translateY(-50%) rotate(180deg);
}
.overlay-mobilemenu .navigation div {
padding: 10px 15px;
}
.overlay-mobilemenu .navigation .breadcrumbs-nav span.label:last-child {
font-weight: bold;
}
.overlay-mobilemenu .navigation .back {
cursor: pointer;
}
.single-post__body .gallery-images a.post-lightbox {width: initial}
.single-post .post__dates {display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0px 10px;}
.single-post .post__dates svg {width: 25px;;}
.single-post .post__dates span {margin: 0px !important; padding: 0px; }
.single-post .post__dates span::before {display: none;}
.content__image .corner-description p,
.content__image .corner-description p a {color: white}
.border-y .post__content .post__heading {color: var(--primary-color) }
.blog-item-main-image {margin: 50px 0; }
.vjs-has-started .vjs-big-play-button { display: none !important ;}
.download-section .my-container--small { background-color: #f0f0f0; }
.download-section svg {max-width: 80px}
.download-section .get-file {cursor: pointer;}
.download-section svg path{fill: var(--primary-color); }
.download-section .skip-email {background-color: #e9e9e9; color: #888}
/* Subscribe area w sekcji pobrań — wygląd zgód i pola email */
.download-section .subscribe-area > .col-md-10 { text-align: left; }
.download-section .subscribe-area input[name="email"] { padding: 14px 16px; font-size: 15px; }
.download-section .subscribe-area .form-check { margin-bottom: 12px !important; }
.download-section .subscribe-area .form-check-activator label,
.download-section .subscribe-area .form-check-label {
color: #1a1a2e !important;
font-size: 14px !important;
font-weight: 700;
line-height: 1.4;
text-align: left !important;
cursor: pointer;
}
.download-section .subscribe-area .agreement_full_text,
.download-section .subscribe-area .agreement_full_text p,
.download-section .subscribe-area .agreement_full_text li,
.download-section .subscribe-area .agreement_full_text span {
text-align: left;
color: #555;
font-size: 12px !important;
line-height: 1.5 !important;
}
.download-section .subscribe-area .agreement_full_text {
padding-left: 24px;
}
.download-section .subscribe-area .show-full-agreement-text { cursor: pointer; }
.download-section .subscribe-area + .col-md-12 { margin-top: 10px; }
.download-section .subscribe-area ~ .col-md-12 .signup,
.download-section .subscribe-area + .col-md-12 .signup,
.download-section .signup.btn--small {
padding: 18px 48px;
font-size: 14px;
min-width: 200px;
}
#f_cta { position: fixed; z-index: 99; left: 0px; color: white; background-color: black; bottom: 0px !important ; width: 100% ; padding: 10px 20px 10px 20px ; text-align: center;}
#f_cta .cta-col { display: inline-block; text-align: center ; border-radius: 50%; margin: 15px 15px 0px 15px; line-height: 58px; vertical-align: middle; height: 54px; width: 55px ; background-color: var(--primary-color) }
#f_cta .cta-options {Width: 100%; justify-content: center; }
#f_cta svg {width: 22px; margin-top: 15px }
#f_cta svg path {color: #fff }
#f_cta a {color: #fff ; cursor: pointer;}
#f_cta .cta-options > div {max-height: 30px; padding: 0 10px 0 10px }
#f_cta .cta-options > div:nth-child(1) {width: 60% ; }
#f_cta .cta-options > div:nth-child(2) {width: 40% ; }
#f_cta .cta-options > div:nth-child(2) .btn {background-color: var(--secondary-color); }
#f_cta .share-actions {display: none }
#f_cta .fb-share svg {width: 16px; margin-top: 12px;}
#f_cta .back svg {margin-top: 12px; }
#f_cta .btn {padding: 10px; }
span .h5.submenu-header {font-size: 24px !important}
.hero--static--homepage {height: 100vh}
.hero--static--homepage picture::before {height: 100vh;}
.hero--static--homepage picture img {min-height: 100vh;}
.hero--static--homepage .hero__headers {margin-top: initial;}
.hero--static--homepage video {object-fit: cover;}
.hero--static--homepage .video-js:before {content: ''; width: 100vw; height: 100vh ; background-color: rgb(0, 0, 0, .5) ; background-image: none;}
.hero--static--homepage .vjs-big-play-button {
z-index: 10;
}
.promo-section .my-container {background: url(/_resources/themes/widoczni/images/artboard-pozycjonowanie5.svg); background-size: contain; background-repeat: no-repeat; background-position: right top;}
.promo-section {background-color: transparent; }
.promo-section > .my-container > .row {border: 4px solid var(--primary-color)}
.promo-section .content__description {background-color: transparent; align-items: start}
.promo-section .content__inside--left {display: flex; align-items: center}
.promo-section .arrow {margin-right: 30px}
.promo-section .photo { display: flex; align-items: center; justify-content: center;}
.collecting-videojs {width: 100%; min-height:300px; display: block ; text-align: center;}
.collecting-videojs .pp-area { display: flex; align-items: center; justify-content: center;}
.collecting-videojs .poster {top: 0px; }
.collecting-videojs .poster img {width: 100%;}
.collecting-videojs::before {display: none;}
.collecting-videojs .play-video { position: absolute; z-index: 100;}
.post__author__image img,
.author__image img{border-radius: 50%;}
.places__description p {font-size: 17px}
.hero__video__null button{ display: none !important;}
.poor-score:before {color: #dadada !important}
.section-preview,
.section-preview body {background-color: #fff }
p.caption {margin: initial ; margin-top: 15px}
.large-cta-section {background-color: #0e0e0d;
padding-top: 100px;
padding-bottom: 70px;
color: #fff;}
.contact-form-two-cols.black-two-col .label-title {margin-bottom: 0px;}
.black-two-col p, .black-two-col p span {color: #fff ; width: 100%;}
.black-two-col .wysiwyg-content p span {color: #fff ; text-align: center; }
.black-two-col ol {float: left }
.black-two-col li {color: #fff !important; font-weight: normal; text-align: left; counter-increment: custom;}
.black-two-col ol li {float : left }
.black-two-col ol li::before { min-width: 65px;
color: #fff;
margin-right: 30px;
width: 65px;
height: 65px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--primary-color);
font-size: 21px;
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.5px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
content: counter(custom) " ";
float: left; }
.hero--blog h3 {color: #fff }
.avisers-section {padding-bottom: 50px}
h1,.h1 {font-size: 70px; font-weight: 700; letter-spacing: -1.8px;}
h2, .h2 {font-size: 40px; }
h3, .h3 {font-size: 28px}
h4, .h4 {font-size: 28px}
h5, .h5 {font-size: 21px}
.h4, .h5, .h6 {display: block ; }
.single-post__body h2.h4 {font-size: 28px !important}
.single-post__body a[rel="post-images"] {width: 100%; display: block ; text-align: center}
.accordin-target {transform: rotate(-90deg) !important;}
.cloud.client-comments__image img {border-radius: 50%;}
.pagination {text-align: right;}
.pagination span,
.pagination a {font-weight: bold; color: #000; border: 2px solid #000; padding: 10px; border-radius: 3px; }
.pagination span {border: 0px }
.pagination a.active,
.pagination a:hover {background-color: var(--primary-color); color: #fff }
.wyswig-cols {text-align: left;}
.wyswig-cols div {margin: 15px 0 }
.wysiwyg-content.menu__faq a:hover {border-bottom: 0px !important; }
.svg-pictogram {max-width: 200px; margin: 0px auto }
.counting-out-slick .slick-dots {position: relative; bottom: 0px}
.slick-track
{
display: flex !important;
}
.slick-slide
{
height: inherit !important;
}
.fa-arrow-up {color: yellowgreen}
.fa-arrow-down {color: red}
.js-animate-svg {display: none;}
.hero--subpage .hero__headers h1.title,
.hero--subpage .hero__headers h2.title,
.hero--subpage .hero__headers h3.title,
.hero--subpage .hero__headers span.title
{
font-size: 65px;
font-weight: 700;
letter-spacing: -1.8px;
}
a,
a.more-btn,
.wysiwyg-content a:not([class]) ,
.wysiwyg-content a.js-show-contact-form,
.wysiwyg-content strong a,
.author__data a {
color: var(--primary-color);
position: relative;
transition: 1s;
}
a.breadcrumbs__anchor,
.wysiwyg-content a:not([class]),
.wysiwyg-content a.js-show-contact-form,
.wysiwyg-content a
.wysiwyg-content span,
.wysiwyg-content strong a,
span.post__label a,
.author__data a,
.wysiwyg-content.menu__faq a
a.primary-anchor ,
.anchors__element.link ,
.slick-history-of-cooperation .slick-slide,
.customer-advisers a{
text-decoration: none;
background-image: linear-gradient(transparent,transparent),
linear-gradient(var(--primary-color), var(--primary-color));
background-size: 100% 2px, 0 2px;
background-position: 100% 100%, 0 100%;
background-repeat: no-repeat;
transition: background-size 0.2s linear;
}
.slick-history-of-cooperation .slick-slide:hover,
a.breadcrumbs__anchor:hover,
.wysiwyg-content a:hover:not([class]),
.wysiwyg-content a:hover,
.wysiwyg-content a.js-show-contact-form:hover,
.wysiwyg-content strong a:hover,
span.post__label a:hover,
.author__data a:hover,
.wysiwyg-content.menu__faq a:hover,
.primary-anchor:hover,
.anchors__element.link:hover,
.customer-advisers a:hover
{
background-size: 0 2px, 100% 2px;
}
a.btn.js-show-contact-form{color: #fff }
.video-section-header {padding-bottom: 30px; }
.video-section {padding-bottom: 50px; padding-top: 90px;}
.video-section .vjs-youtube-mobile .vjs-big-play-button {display: block }
.wysiwyg-content p span {color: #000 }
.cinema-mode-yt {width: 100vw; height: 100vh; max-height: 706px}
/*
formatowanie hiperlaczy
*/
.short-tags > div > a {color: #000 !important }
.short-tags > div:hover {background-color: var(--primary-color); border-color: var(--primary-color); cursor: pointer; }
.short-tags > div:hover > a {color: #fff !important ; border-bottom: 0px !important ; text-decoration:none;}
.tags a:before {
content: none !important;
}
.tags a {
font-size: 13px !important;
font-weight: 700 !important;
}
.wysiwyg-content .columns div .arrow-deco.h5::before {
content: '';
display: inline-flex;
background-image: url(/_resources/themes/widoczni/images/icons/arrow-right-green.svg);
background-size: 20px 20px;
width: 20px;
height: 20px;
margin-right: 32px;
}
h3.js-collapse-tabs {color: #000; text-decoration: none; position: relative; }
/**
end
*/
select {width: 100%; border: 0px; background-color: #fff ; height: 50px; padding:0 20px; font-family: "Raleway", sans-serif; font-size: 18px; color: #767676 }
input[name="q"] {text-align: center;}
.change-search-criteria {padding-left: 10px; }
.search-form label {width: 100%; text-align: center;}
.dataTables_wrapper {overflow: scroll }
.dataTables_wrapper .dataTables_filter input {border: 2px solid #000 !important ; border-radius: 3px !important; padding: 10px !important; margin-bottom: 30px; }
.dataTables_paginate {width: 100% !important; text-align: center !important; padding: 20px 0 !important}
.dataTables_length {display: none !important;}
.dataTables_paginate .paginate_button:hover {color: #000 !important }
.dataTables_paginate .paginate_button {border: 2px solid #000 !important ; border-radius: 3px !important; font-weight: bold !important; background: none !important; color :#fff !important}
.dataTables_paginate .current {background-color: var(--primary-color) !important; }
.sorting_desc::after,
.sorting_asc::after {display: none !important;}
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc {background-size: 10px ; }
table tr td,
.data-table tr td {border-bottom: 1px solid #dadada ; }
table tr tr:nth-child(odd),
.data-table tr:nth-child(odd) {background-color: #f9f9f9}
.data-table th {font-weight: bold !important ; }
.data-table th {font-size: 12px !important ;}
.data-table td {font-size: 16px !important ; padding: 8px 10px !important; text-align: center;}
.data-table tr:nth-child(even) td.sorting_1 {background-color: #fafafa;}
.data-table tr:nth-child(odd) td.sorting_1 {background-color: #f1f1f1;}
.data-table tr th:nth-child(1),
.data-table tr td:nth-child(1) {font-weight: bold;}
.data-table td p {padding: 5px 0; margin: 0px; font-size: 12px;}
table:not(.data-table) {margin: 0px auto !important ; max-width: 800px; width: 100%}
table:not(.data-table) tr td {text-align: center}
table:not(.data-table) tr:nth-child(odd) td {background-color: #f9f9f9; padding: 8px; text-align: center}
.section-video-eye {padding-bottom: 100px;}
.mobile-cta i{color: #fff ;}
div#scroll-bar {
position: fixed;
top: 0;
left: 0;
width: 0;
height:3px;
background-color: var(--primary-color);
z-index: 1000;
}
.collecting-list {background-color: #f3f3f3}
.collecting-list div a,
.collecting-list div span {background-color: #fff ; display: block; color: #000; position: relative;}
.collecting-list div span:after,
.collecting-list div a:after { content: ""; background-image: url(/_resources/themes/widoczni/images/icons/arrow-right-green.svg); display: block; width: 21px;height: 21px;background-repeat: no-repeat; position: absolute; top: 15px ; right: 15px; }
.collecting-list div span:after {transform: rotate(180deg)}
.btn-about-author {margin-top: 30px}
.modal span[data-function="sendrequest"] {border: 3px solid transparent}
.modal span[data-function="sendrequest"]:hover {border: 3px solid #fff !important }
#page-1651 .hero--subpage {max-height: 50vh;}
#page-7 .sections .section:nth-child(1){ padding-top: 30px; }
#page-7 #section-15646 {margin-top:45px; padding-top: 0 }
.popular-page,
.search-page {padding-top: 100px !important;}
.social-section {position: relative; top: -50px}
.social-section .footer__social-links {display: inline-block !important }
img.leftAlone {float: left ; padding-right: 15px; }
img.center {margin: 0px auto ; display: block;}
img.left {float: left; margin-right: 20px; margin-bottom: 20px;}
img.right {float: right; margin-left: 20px; margin-bottom: 20px;}
.slick-history-of-cooperation .slick-slide:hover {box-shadow: 10px 10px 10px -5px rgba(67, 86, 100, 0.17); transition: 0.2s; }
.my-container .single-post {padding: 0px}
.sorting_asc::after,
.sorting_desc::after {font-family: "FontAwesome"; margin-left: 5px}
.sorting_asc::after {content: "\f062" ; color: green }
.sorting_desc::after { content: "\f063"; color: red }
.customer-advisers a {color: #000 }
.srJobListJobTitle {text-align: left !important;}
.my-container--about div.about img {width: 100%; max-width: 382px;}
.my-container--about div.tc-item img {width: 100%; max-width: 585px;}
.my-container--about .tc-item .about__element { padding: 0px; width: 98%;}
.my-container--about .tc-item .about__element .h4 { padding: 0px; width: 100%; margin-top: 0px !important;}
/* .flatpickr-buttons { display: flex; padding: 0 10px ; justify-content: space-between;}
.flatpickr-buttons button {margin: 0 5px; }
.flatpickr-buttons button:first-child {background-color: #000; border: #000;}
select.flatpickr-monthDropdown-months {font-weight: bold !important}
*/
.switch-container .switch {position: relative;display: inline-block;width: 60px;height: 34px;}
.switch-container .switch input { opacity: 0;width: 0;height: 0;}
.switch-container .slider {position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;background-color: #ccc;-webkit-transition: .4s;transition: .4s; }
.switch-container .slider:before {position: absolute;content: "";height: 26px;width: 26px;left: 4px;bottom: 4px;background-color: white;-webkit-transition: .4s;transition: .4s;}
.switch-container input:checked + .slider {background-color: var(--primary-color);}
.switch-container input:focus + .slider {box-shadow: 0 0 1px var(--primary-color);}
.switch-container input:checked + .slider:before {-webkit-transform: translateX(26px);-ms-transform: translateX(26px);transform: translateX(26px);}
.switch-container .slider.round {border-radius: 34px;}
.switch-container .slider.round:before { border-radius: 50%;}
.switch-container {margin-bottom: 40px; }
.switch-container div {display: inline-block; float: left;}
.sticky-box {border-bottom: 10px solid var(--primary-color) ; background-color: #fafafa; position: fixed; z-index: 1000 ; height: auto; border-radius: 3px; bottom: 25px; left: 25px; text-align: center; padding: 20px; border: 1px solid #6e6e6e; box-shadow: 0px 0px 50px 0px #b3b3b3;}
.sticky-box .close-sticky{position: absolute; right: 10px; top: 10px; cursor: pointer;}
.web-tools .options {width: 100%; text-align: left;}
.web-tools .options .row .col {line-height: 30px;}
.web-tools .options .col label {margin-bottom: 0px;}
.web-tools .result-area {word-break: break-word;}
.web-tools .result-area,
.web-tools .params {position: relative; z-index: 1000;}
.web-tools .toast {position: relative; margin: 25px 5px;}
.web-tools .form__inputs p, .web-tools .form__inputs label, .web-tools .form__inputs span, .web-tools .form__inputs strong, .web-tools .form__inputs div {color: #fff }
.web-tools .result-type { text-align: left;}
.web-tools .result {background: rgb(46, 133, 6);border: 1px solid rgb(117, 194, 81); color: #fff;}
.web-tools .form__inputs {background: rgb(55,164,6); background-color: #000 }
.web-tools .form__inputs button { color: #fff ; font-weight: bold;}
.web-tools .form__inputs label {font-weight: 600; }
.web-tools .lead {text-align: left;}
.web-tools .lead ol li {padding-bottom: 1.9em; line-height: 27px;}
.web-tools .lead ol li::marker {font-size: 30px; padding: 10px;display: block; font-weight: bold;}
.web-tools #emojiDisplay span {font-size: 45px; padding: 10px; display: inline-block;}
.web-tools #emojiDisplay span:hover {box-shadow: 1px 1px 10px 0px #929292;}
.web-tools.keywords-section #wordCloud span { padding: 5px 10px; display: inline-block;}
.web-tools.keywords-section #data-table_wrapper,
.web-tools.link-counter .result-area {position: sticky; top: 20px; text-align: left;}
.web-tools.link-counter .link-counter-stats {text-align: left;}
.web-tools table {font-size: 15px;}
.web-tools table.status-domain-result {max-width: initial;}
.web-tools table.status-domain-result td,
.web-tools table.status-domain-result th { padding: 12px !important;}
.web-tools .begin-domain-result { font-weight: bold; text-align: left !important; background-color: #888888 !important; color: #fff }
.web-tools table.status-domain-result {display: none;}
.web-tools table.status-domain-result thead tr th {background-color: #000 !important; color: #fff;}
.web-tools .browser-size-result {text-align: center;padding: 50px;border: 3px solid;background-color: white ;border-radius: 15px;}
.web-tools .test-ssl-result div,
.web-tools .test-whois-result div {text-align: left !important;}
.web-tools .test-ssl-result .result-ssl,
.web-tools .test-whois-result .result-whois { text-align: left; padding: 10px 0;border-bottom: 1px solid #dadada}
.web-tools .test-ssl-result .result-ssl div:first-child,
.web-tools .test-whois-result div:first-child {font-weight: bold;}
.web-tools .google-reviews-ratings-calc input { background: transparent; text-align: center; color: #fff; font-size: 46px; font-weight: bold;}
.web-tools #wordCloud {line-height: 40px;}
.web-tools #data-table_wrapper {position: sticky; top: 35px;}
.web-tools.password-generator input#passwordLength {width: 100%;}
.web-tools.password-generator input {text-align: center;}
.web-tools.password-generator .length {text-align: left !important;}
.web-tools.password-generator .length input {width: 25%; text-align: center !important; margin-left: 15px;}
.web-tools.password-generator .length label {margin: 0px; text-align: center; width: 100%; text-align: center !important; display: block;}
.web-tools.password-generator input[type="checkbox"] {accent-color: var(--primary-color); color: #fff ; width: 18px; height: 18px;}
.web-tools.password-generator input[type="text"],
.web-tools.password-generator input[type="number"] { text-align: center !important;}
.web-tools.password-generator button#copyButton {background-color: #fff; border: 0px; padding: 0 20px; cursor: pointer;}
.web-tools .password-form .entropy .form__group { display: inline-block; max-width: 50%; float: left; text-align: left;}
.web-tools .password-form .entropy {width: 100%;}
.web-tools #LoremCopyButton {border: 1px solid red ; background-color: transparent; border: 0px ; cursor: pointer;}
.web-tools #LoremCopyButton svg path {fill: white;}
.web-tools svg {opacity: 0.4; width: 100%;}
.web-tools .result-type svg {opacity: 1; width: 10%;height: auto; margin-right: 10px;}
.web-tools .result-type .py-3 { display: flex; align-items: center}
.leave-alert-modal {top: 0; left: 0px; width: 100vw;height: 100vh; position: fixed;background: rgb(0,0,0,0.8);z-index: 1000; display: none; justify-content: center; align-items: center; ;}
.leave-alert-modal .content {font-size: 16px; line-height: 1.6; background-color: #fff; width: 600px; padding: 50px;border-radius: 15px; position: relative; transition: 0.1s; display: flex; align-items: center; justify-content: center; }
.leave-alert-modal .close {cursor: pointer;width: 40px;position: absolute;height: 40px;position: absolute;right: 10px;z-index: 100;top: 10px;}
.leave-alert-modal .container-content {position: relative;}
@media only screen and (min-width: 992px) and (max-width: 1240px) {
.content-text-image__image {display: none}
}
@media only screen and (min-width: 1350px) and (max-width: 1449px) {
.nav {padding:12px 25px;}
nav .nav__container {padding:0;}
}
@media only screen and (min-width: 1450px) and (max-width: 1920px) {
.nav {padding:25px;}
nav .nav__container {padding:0;}
}
@media only screen and (min-width: 1921px) {
.nav {padding: 25px 50px;}
nav .nav__container {padding:0;}
}
@media only screen and (max-width: 768px) {
.overlay-mobilemenu {width: 100vw;}
}
@media only screen and (min-width: 1350px) and (max-width: 1371px) {
nav .nav__menu .nav__link:nth-child(4) {width: 5%;}
}
@media only screen and (min-width: 1350px) {
nav .nav__menu .nav__link:nth-child(4) .menu__dropdown .dropdown__anchors {width: 100%; display: block; max-width: initial}
nav .nav__menu .nav__link:nth-child(4) .menu__dropdown .dropdown__anchors a {display: inline-block; width: 45%}
}
@media only screen and (min-width: 1500px) and (max-width: 1622px) {
nav .nav__menu .nav__link:nth-child(4) {width: 8%; }
nav.nav--fixed .nav__menu .nav__link:nth-child(4) {width: 5%}
.nav__link {margin-right: 0}
}
@media only screen and (min-width: 992px) {
nav.nav .duty-expert { width: 190px; min-width: 190px !important;}
.nav__link {margin-right: 18px}
.posts .border-y:not(:nth-child(3n+2)) a.post__content {border: 0px}
.posts .border-y:nth-child(3n+2) a.post__content {border-top: 0px ; border-bottom: 0px ;}
}
@media only screen and (min-width: 1622px) and (max-width: 1681px) {
.nav__link {margin-right: 18px}
}
@media (max-width: 1340px) {
.hero--static--homepage,
.hero--static--homepage picture img {height: initial !important ; min-height: 100%;}
.hero--static--homepage picture::before {height: 100% ;}
}
@media (min-width: 910px) and (max-width: 1185px) {
.nav.nav--top{top: 100px}
.nav.nav--fixed {top: 0px}
}
@media (max-width: 1280px) {
.contact-form20-white-body-container video {width: 100% !important; height: auto; max-width: 100% }
}
@media (max-width: 1135px) {
.gallery-images {justify-content: space-evenly;}
.gallery-images img {width: 100% !important; max-width: 100% !important;}
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
.posts .border-y:not(:nth-child(odd)) a.post__content {border: 0px}
.posts .border-y:nth-child(odd) a.post__content {border-top: 0px ; border-bottom: 0px ; border-left: 0px; }
}
@media only screen and (max-width: 992px) {
.section-footer { padding-bottom: 20px ; border: 1px solid transparent}
.artboard {display: none !important;}
.top-cta {display: none }
}
.flatpickr-buttons {display: flex; justify-content: right;}
.flatpickr-buttons img.close-picker{cursor: pointer; width: 35px;}
.flatpickr-day, .flatpickr-weekday{font-size: 16px !important;}
.flatpickr-monthDropdown-months {font-weight: bold !important;}
.flatpickr-calendar.pickup-hour-section {max-width: 800px;}
.flatpickr-calendar.pickup-hour-section .flatpickr-innerContainer {max-width: 75%;}
.flatpickr-calendar.hasTime .flatpickr-time {max-height: initial; height: 70%; overflow-x: hidden;padding: 0 20px; width: 25%;}
.flatpickr-time.time24hr .list-of-hour { overflow: scroll; overflow-x: hidden; padding-right: 20px; max-height: 90%;}
.flatpickr-time.time24hr .list-of-hour div {border: 1px solid #dadada; margin-bottom: 15px; margin-top: 9px; border-radius: 5px; font-size: 16px;}
.flatpickr-time.time24hr .pickup-hour {font-size: 16px; font-weight: bold; height: 100%;}
.flatpickr-day {width: auto !important; max-width: initial; height: 84px; line-height: 80px; font-weight: bold;}
.flatpickr-months {height: 70px; position: relative;}
.flatpickr-calendar.open, .flatpickr-calendar.inline {max-height: initial ;}
.list-of-hour > div > span {cursor: pointer; width: 100%; height: 100%; display: block;}
.list-of-hour > div:hover, .list-of-hour > div.active {background-color: var(--primary-color); color: #fff }
.flatpickr-day.selected {background-color: var(--primary-color) !important; color: #fff }
.flatpickr-innerContainer {width: 100%; max-width: 600px;}
.flatpickr-days , .flatpickr-rContainer, .dayContainer {width: 100%; max-width: 100%;}
.flatpickr-time.time24hr { height: 250px; position: absolute; top: 130px; right: 0px; border: 0px !important}
.flatpickr-time {flex-flow: column; max-height: 350px; }
.flatpickr-time.time24hr .numInputWrapper , .flatpickr-time.time24hr .flatpickr-time-separator {display: none;}
.flatpickr-next-month svg path, .flatpickr-prev-month svg path {fill: var(--primary-color) !important; width: 30px; height: 20px;}
select[name="ContactTime"] {width: 100%; padding: 0 0 0 20px;}
input[name="ContactTerm"] {padding: 0 0 0 10px; color: #616161; background: url(/themes/widoczni/images/icons/calendar.svg) #fff; background-repeat: no-repeat; background-size: 8%; background-position: 95% 18px;}
.filter-cs span {font-weight: bold; color: #000; font-size: 16px; display: inline-block; margin-right: 10px; cursor: pointer}
.filter-cs span:nth-child(1) {color: #c8ccc6; }
.filter-cs span:nth-child(2) {color: #41c008; }
.filter-cs span:nth-child(3) {color: #0294ff; }
.filter-cs span:nth-child(1).active {background-color: #c8ccc6; color: #fff }
.filter-cs span:nth-child(2).active {background-color: #41c008; color: #fff }
.filter-cs span:nth-child(3).active {background-color: #0294ff; color: #fff }
.case-study-posts .post__description{background-color: #fff; height: initial ; padding: 15px 40px;display: flex;flex-direction: column;justify-content: flex-start;position: absolute;top: 0px;width: 100%;}
.case-study-posts .cs-type-35 .post__description {background-color: #41c008; color: #fff }
.case-study-posts .cs-type-35 .post__description * { color: #fff }
.case-study-posts .cs-type-1795 .post__description {background-color: #0294ff; color: #fff }
.case-study-posts .cs-type-1795 .post__description * { color: #fff }
.filter-cs span {font-weight: bold; color: #000; font-size: 16px; display: inline-block; margin-right: 10px; cursor: pointer}
.filter-cs span:nth-child(1) {color: #c8ccc6; }
.filter-cs span:nth-child(2) {color: #41c008; }
.filter-cs span:nth-child(3) {color: #0294ff; }
.filter-cs span:nth-child(1).active {background-color: #c8ccc6; color: #fff }
.filter-cs span:nth-child(2).active {background-color: #41c008; color: #fff }
.filter-cs span:nth-child(3).active {background-color: #0294ff; color: #fff }
.case-study-posts .post__description{background-color: #fff; height: initial ; padding: 15px 40px;display: flex;flex-direction: column;justify-content: flex-start;position: absolute;top: 0px;width: 100%;}
.case-study-posts .cs-type-35 .post__description {background-color: #41c008; color: #fff }
.case-study-posts .cs-type-35 .post__description * { color: #fff }
.case-study-posts .cs-type-1795 .post__description {background-color: #0294ff; color: #fff }
.case-study-posts .cs-type-1795 .post__description * { color: #fff }
.simple-collecting-list .collecting-list,
.simple-collecting-list .collecting-list a,
.simple-collecting-list .collecting-list span {padding: 20px; }
.simple-collecting-list .collecting-list a {color: #000}
.simple-collecting-list .collecting-list a,
.simple-collecting-list .collecting-list span {padding-right: 46px; }
@media only screen and (max-width: 1200px) {
body.Blog .hero__uniform__headers {margin-bottom: 50px;}
}
@media only screen and (min-width: 992px) {
#f_cta {display: none }
.flatpickr-calendar {width: 100%;max-width: 600px; }
}
@media (max-width: 991px) {
.section {padding-top: 0px; }
#f_cta {border-top: 1px solid white }
#f_cta .btn {max-height: 30px;}
#f_cta .btn-contact-form-mobile {margin-top: 0px;}
#f_cta .btn-icon {margin-right: 5px; width: 15px;}
.flatpickr-calendar.animate.open {
width: 100%;
left: 0px !important
}
.sticky-box {display: none !important;}
h1, .h1 {
font-size: 35px;
}
h2, .h2, .section-title {
font-size: 28px;
}
h3, .h3 {
font-size: 21px;
font-weight: 600;
}
.h4 {
font-size: 21px;
}
.section--secondary .content__image,
.black-two-col .content__image {display: none;}
.hero--subpage .hero__headers h1.title,
.hero--subpage .hero__headers h2.title,
.hero--subpage .hero__headers h3.title,
.hero--subpage .hero__headers span.title
{
font-size: 35px;
}
.partner-widgets { justify-content: center;}
}
@media (max-width: 640px) {
.post__creator {flex-direction: column; gap: 25px;}
.leave-alert-modal .content {width: 100vw;}
.sticky-box {bottom: 0px; left: 0px; width: 100vw; border-radius: 0px; border-bottom: 0px ; border-top: 10px solid var(--primary-color) ; }
.flatpickr-day { height: 50px; line-height: 45px;}
.flatpickr-calendar.hasTime .flatpickr-time {height: 60%}
}
@media (min-width: 575px) {
h1.h3,
h2.h3,
h3.h3 {font-size: 40px; font-weight: 600; line-height: 1.25;letter-spacing: -0.6px !important;}
h3.h5,
h2.h5 {font-family: Raleway; font-size: 21px; font-weight: 600; font-stretch: normal; font-style: normal; line-height: 1.14; letter-spacing: -0.5px;}
}
@media (max-width: 768px) {
.posts .border-y a.post__content {border-left: 0px;border-right: 0px; border-top: 0px;}
/* Reguły z 1168-1169 usunięte (2026-09-04): pozostałość po starym layoucie
kafelków case study z .post__description pozycjonowanym absolutnie na
całej karcie. Nowy layout BEM (__media/__image/__logo) dalej pasuje do
selektora .case-study-posts > .post img — martwa reguła ukrywała obrazy
(miniaturę + logo klienta) na mobile <= 768px. Objaw: szary prostokąt
16:7 zamiast zdjęcia i pusta biała pigułka w rogu (bo ukrywany był
, ktory jako :first-child ma margin-top:0,
wiec odstep tytul -> lead trzymamy na wrapperze. 30px = tyle, ile dawaly
sklejone marginesy przy poprzednim (nieprawidlowym)
w
.
Typografia jak .wysiwyg-content p - na wypadek leadu bez wlasnego
(redaktor wpisal goly tekst). */
.adventures--list .adventures__text {
margin-top: 30px;
font-size: 18px;
line-height: 1.7;
color: rgba(0, 0, 0, 0.7);
}
@media (max-width: 991px) {
.adventures--list .adventures__element {
display: flex;
flex-direction: row;
align-items: flex-start;
margin: 0;
padding: 22px 0;
}
/* ikona zamiast 200px z desktopu - gora wyrownana do linii tytulu */
.adventures--list .adventures__icon {
width: 36px;
min-width: 36px;
margin: 1px 16px 0 0;
}
.adventures--list .adventures__icon img {
display: block;
width: 100%;
height: auto;
}
/* min-width:0 - inaczej dlugie slowa rozpychaja flex item poza ekran */
.adventures--list .adventures__description {
min-width: 0;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
.adventures--list .adventures__title {
display: block;
margin: 0;
font-size: 17px;
text-align: left;
}
/* odkrecamy display:none ze style.css */
.adventures--list .adventures__text {
display: block;
margin-top: 6px;
font-size: 15px;
line-height: 1.6;
}
.adventures--list .adventures__text p {
display: block;
margin: 0;
font-size: 15px;
line-height: 1.6;
}
.adventures--list .adventures__text p + p {
margin-top: 10px;
}
}
@media (max-width: 767px) {
/* .row ma margin -15px a kolumny padding 15px - zerujemy, zeby linie
rozdzielajace konczyly sie rowno z tekstem, a nie 15px poza kontenerem */
.adventures--list {
margin-left: 0;
margin-right: 0;
}
/* col-xs-12 nie istnieje w Bootstrap 4, a col-lg-6 / col-md-6 nie lapia
sie ponizej 768px - bez tego kolumny sa auto-width i po zdjeciu slicka
stanelyby obok siebie zamiast jedna pod druga */
.adventures--list > [class*="col-"] {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
padding-left: 0;
padding-right: 0;
border-bottom: 2px solid #e4e4e4;
}
.adventures--list > [class*="col-"]:last-child {
border-bottom: 0;
}
}
/* === Wyliczanki [GridNumberGray] na mobile: siatka 2 w rzedzie zamiast karuzeli ===
Bylo: .counting-out-slick robil z tego przewijanke po jednym elemencie,
wiec nie bylo widac calosci.
Jest: slider zdjety z szablonu, 2 elementy w rzedzie na calym mobile.
Motyw mial juz komplet obramowan dla 2 kolumn (dziala w 576-991px przez
col-sm-6), ale ponizej 576px style.css przelacza sie na jedna kolumne
(border-right:0 + inne reguly na border-bottom), a kolumny traca szerokosc,
bo col-sm-6 przestaje sie lapac.
Obramowania licze na nth-child zamiast nth-last-child jak motyw, bo tamta
wersja jest poprawna tylko dla parzystej liczby elementow - przy 3 lub 5
pozycjach linie wychodzily w zlych miejscach. Szablon dopuszcza
Items.limit(6), wiec nieparzyste liczby sa realne. */
@media (max-width: 991px) {
/* wyzsza specyficznosc niz .features__feature:nth-last-child(...) w style.css */
.features.features--grid2 .features__feature .features__content {
border-right: 1px solid #e4e4e4;
border-bottom: 1px solid #e4e4e4;
}
/* prawa kolumna = elementy parzyste; przy nieparzystej liczbie ostatni
element zostaje sam w lewej kolumnie i tez nie moze miec kreski */
.features.features--grid2 .features__feature:nth-child(2n) .features__content,
.features.features--grid2 .features__feature:last-child:nth-child(odd) .features__content {
border-right: 0;
}
/* ostatni rzad bez dolnej kreski: ostatni element zawsze, a przedostatni
tylko gdy stoi w lewej kolumnie (czyli gdy liczba elementow jest parzysta) */
.features.features--grid2 .features__feature:last-child .features__content,
.features.features--grid2 .features__feature:nth-last-child(2):nth-child(odd) .features__content {
border-bottom: 0;
}
}
@media (max-width: 575px) {
/* col-sm-6 nie lapie sie ponizej 576px, a col-xs-* nie istnieje w
Bootstrapie 4 - bez tego kolumny sa auto-width */
.features.features--grid2 > .features__feature {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
/* ciasniejsza komorka - przy 2 kolumnach na telefonie zostaje ok. 160px
na tekst, domyslne 30px/20px zabieraly zbyt duzo */
.features.features--grid2 .features__content {
padding: 26px 14px;
}
}
/* === Wyliczanki [ScrollList] na mobile: akordeon zamiast dwoch kolumn ===
Na desktopie sekcja to lista tytulow po lewej i tresc aktywnego po prawej.
Na telefonie ten uklad sie nie miesci, wiec scroll-list-mobile.js ponizej
768px przenosi tresci pod odpowiadajace tytuly i owija je w markup
akordeonu motywu (.collapse-tabs*) - stad wyglad bierzemy z gotowego
schematu "Elementy listy zwijane efektem Accordin", a tutaj tylko gasimy
style ukladu dwukolumnowego.
Wszystko pod .tabs-scroll--accordion, czyli klasa dokladana przez JS - bez
JS zostaje dotychczasowy widok, nic sie nie psuje. */
@media (max-width: 767px) {
.tabs-scroll--accordion {
display: block;
flex-wrap: nowrap;
}
/* zostaje puste po przeniesieniu tytulow, ale gasimy na wszelki wypadek */
.tabs-scroll--accordion > .tabs-scroll__list {
display: none;
}
.tabs-scroll--accordion .collapse-tabs {
margin-top: 0;
}
/* tytul: byl elementem kolumny z zielonym paskiem stanu po prawej,
teraz jest naglowkiem akordeonu */
.tabs-scroll--accordion .tabs-scroll__option {
width: auto;
margin: 0;
padding: 0;
text-align: left;
pointer-events: auto;
}
.tabs-scroll--accordion .tabs-scroll__option::after {
display: none;
}
/* aktywny tytul na zielono - tak jak w propozycji ukladu */
.tabs-scroll--accordion .collapse-tabs__tab--active .tabs-scroll__option {
color: var(--primary-color);
}
/* tresc: byla druga kolumna, teraz jest rozwijanym body */
.tabs-scroll--accordion .tabs-scroll__content {
width: auto;
margin-left: 0;
margin-top: 0;
text-align: left;
}
.tabs-scroll--accordion .collapse-tabs__body {
margin-top: 16px;
}
}
/* === Akordeony (.collapse-tabs): kolko ze strzalka nie moze sie sciskac ===
.collapse-tabs__header to flex, a .collapse-tabs__icon dostaje tylko
width/height, bez flex-shrink:0. Przy dlugim tytule drugi element flexa
zabieral cala szerokosc i kolko zwezalo sie w poziomie przy niezmienionej
wysokosci - z okregu robila sie elipsa, a strzalka w srodku sie krzywila.
Najbardziej widoczne na mobile, gdzie kolko ma 52px, a tytuly po kilka linii.
Do tego justify-content:space-between daje odstep tylko wtedy, gdy tytul
nie wypelnia wiersza - przy dlugim tytule tekst dochodzil do kolka, wiec
odstep trzymamy na marginesie ikony. */
.collapse-tabs__icon {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
margin-left: 20px;
}
.collapse-tabs__icon img {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
@media (max-width: 991px) {
.collapse-tabs__icon {
margin-left: 16px;
}
}
/* === Akordeony (.collapse-tabs): tytul rozwinietego punktu na zielono ===
Ten sam sygnal stanu, co w akordeonie skladanym z ScrollList wyzej. Natywny
akordeon motywu (schemat "Elementy listy zwijane efektem Accordin") mial
dotad jedyny sygnal w obroconej strzalce, wiec przy dlugiej liscie nie bylo
widac, ktory punkt jest otwarty.
0.3s to tyle samo, co animationTime w scripts.js i transition na kolku, wiec
kolor, rozwijanie tresci i obrot strzalki ida razem.
.h4 a ma w motywie color:inherit, wiec tytuly bedace linkiem tez sie
przemaluja. Bez media query - ten akordeon wyglada tak samo na desktopie
i na telefonie, wiec sygnal stanu tez powinien byc wszedzie ten sam. */
.collapse-tabs__header .h4 {
-webkit-transition: color 0.3s ease;
-moz-transition: color 0.3s ease;
-o-transition: color 0.3s ease;
transition: color 0.3s ease;
}
.collapse-tabs__tab--active .collapse-tabs__header .h4 {
color: var(--primary-color);
}
/* === Wyliczanki [ListOnRight] na mobile: odstepy w kaflu po zdjeciu karuzeli ===
Sekcja to na desktopie dwie kolumny: lead z nazwa listy po lewej, numerowane
elementy po prawej. Po prawej elementy juz stoja jeden pod drugim (bialy
kafel, kreska 1px miedzy nimi), wiec zeby dostac ten uklad na telefonie
wystarczylo zdjac klase counting-out-slick z szablonu ListOnRight.ss. Slick
i tak byl "unslick" od 768px, wiec desktop sie nie zmienia.
Klasa .tabs wystepuje w calym motywie tylko w tym jednym szablonie, wiec
regul nie trzeba niczym zawezac.
Zostaly same odstepy: ponizej 576px kafel mial 25px paddingu, a numer 30px
marginesu, co przy ekranie 320px zostawialo na tytul i lead ~220px.
Sciagniecie tych wartosci oddaje tresci ~40px szerokosci. */
@media (max-width: 575px) {
.tabs__tab {
padding: 26px 18px;
}
.tabs__number {
margin-right: 18px;
font-size: 28px;
}
}
/* =========================================================================
widoczni.com — hero strony głównej na cały ekran (mobile)
2026-09-07, kadr przerobiony 2026-09-10
Do dopisania na końcu _resources/themes/widoczni/css/symbioza.css
Poprzednia nazwa pliku: hero-mobile-WARIANT-A-pelne-zdjecie.css
PROBLEM
Na mobile hero ma sufit 350 px (zdjęcie) i 400 px (sekcja), więc tytuł,
slogan i CTA tłoczą się na wysokości poziomego kadru.
⚠️ SAM TEN PLIK NIE WYSTARCZY — patrz sekcja „WYMAGA OSTREGO ŹRÓDŁA" niżej.
Wgrany bez zmiany w szablonie da hero pełnoekranowe, ale rozmyte.
REGUŁY, KTÓRE TO TRZYMAŁY (nadpisywane niżej)
style.css @media (max-width:991px) .hero--subpage picture, …img
{ min-height:300px; max-height:350px }
symbioza.css @media (max-width:575px) .hero.hero--subpage
{ min-height:400px }
symbioza.css @media (max-width:1340px) .hero--static--homepage
{ height:initial !important }
← dlatego NIE ruszamy `height`, tylko `min-height`;
inaczej trzeba by walczyć !important-em z !important-em
WARTOŚCI ZDJĘTE Z ŻYWEJ STRONY (computed styles, 2026-09-10, 390 px)
tytuł Raleway 700 · 35px · #fff · letter-spacing -1.8px
slogan Raleway 600 · 21px/27.09px · #fff
CTA tło rgb(65,194,7) = var(--primary-color) · tekst #fff
kurtyna picture::before rgba(0,0,0,.5)
ELEMENTY FIXED, KTÓRE ZABIERAJĄ EKRAN
#topbar 50px (góra) · nav 65px (góra) · #f_cta 51px (dół)
── DLACZEGO JEST TU `transform: scale()` (zmiana 2026-09-10) ─────────────
Zmierzone na 390×844: źródło ma proporcję 1.793, okno hero 390×760 =
proporcja 0.514. Przy `object-fit: cover` skala z wysokości (2.9103)
wygrywa ze skalą z szerokości (0.8342), więc widoczne jest **100%
wysokości** zdjęcia i 29% szerokości.
Konsekwencja: `object-position` w osi Y NIE MA NA CO DZIAŁAĆ. Człon `50%`
jest bezczynny — nie da się nim podnieść zespołu ani obciąć nieba.
Pokazujemy cały kadr od nieba do jezdni, a na tym zdjęciu zespół jest
wąskim pasmem na 59–78% wysokości. Stąd na pełnym ekranie górne ~40% to
samo niebo, a dolne ~15% asfalt (zrzut WARIANT-A-390-2026-09-10-zrodlo468).
Jedyny sposób obcięcia pionu w CSS to wyjście poza `cover`, czyli zoom:
`overflow:hidden` na `picture` + `transform: scale()` na `img`.
scale(1.72) z origin 82% 61% pokazuje pasmo ~35–93% wysokości: budynek
z szyldem WIDOCZNI nad tytułem, zespół pod tytułem, minimum asfaltu.
Zoom jest jednak dostrojony do TEGO zdjęcia (szyld na 82% szerokości,
zespół na 61% wysokości). Zdjęcie ma się zmieniać, więc kadr nie jest
zaszyty w regułach — siedzi w trzech zmiennych w punkcie 0 na początku
media query. Podmiana zdjęcia = zmiana trzech wartości w jednym miejscu,
bez ruszania czegokolwiek innego. Dla zdjęcia pionowego:
`--hero-kadr-zoom: 1; --hero-kadr-x: 50%; --hero-kadr-y: 50%`.
── WYMAGA OSTREGO ŹRÓDŁA — jedna linia w szablonie hero ─────────────────
`` wybiera plik po szerokości okna, nie po DPR:
`` podaje plik **468×261 px**.
Bez zoomu to skala 2.91×, z zoomem 5.0× — a przy DPR 3 telefonu
odpowiednio więcej. Sam CSS tego nie załatwi.
Zmierzone rozmiary pochodnych (2026-09-10, HEAD):
ScaleWidth[468] webp 43 kB ← teraz na mobile
ScaleWidth[991] webp 170 kB
ScaleWidth[1920] webp 590 kB · jpg 763 kB
ScaleWidth[2560] jpg 1307 kB
FillMax[900,1600] → 403, pochodnej nie ma (SilverStripe generuje ją
przy renderze, nie na żądanie URL-em)
USTALONE 2026-09-10: docelowo na mobile pójdzie **inne zdjęcie** (kadr
pionowy, kilka osób z bliska zamiast rzędu 130 w jednej linii). Wtedy:
· punkt 0 → `--hero-kadr-zoom: 1`, `--hero-kadr-x/y: 50%`,
· mobilny `` na pochodną o szerokości ≥ 900 px,
· skala spada do ~1.3× przy DPR 3, plik lekki, LCP bezpieczny.
Do tego czasu, żeby wgrać pełny ekran z OBECNYM zdjęciem, mobilny
`` musi wskazywać ScaleWidth[1920] — ostrość potwierdzona zrzutem
WARIANT-C-390-zoom172. Koszt: 590 kB zamiast 43 kB na elemencie LCP.
Z plikiem 468 px hero będzie pełnoekranowe i rozmyte.
========================================================================= */
@media (max-width: 991px) {
/* 0 ─ KADR — jedyne miejsce do zmiany po podmianie zdjęcia.
Trzy wartości, reszta pliku jest od zdjęcia niezależna.
--hero-kadr-zoom 1 = bez zoomu (dla zdjęcia PIONOWEGO — cover
sam obetnie boki, nic więcej nie trzeba)
1.72 = obecne zdjęcie poziome (patrz nagłówek)
--hero-kadr-x która część szerokości ma być w kadrze
--hero-kadr-y punkt, wokół którego działa zoom; przy zoomie 1
nie robi nic
Po wgraniu zdjęcia pionowego wystarczy:
--hero-kadr-zoom: 1; --hero-kadr-x: 50%; --hero-kadr-y: 50%;
Nic poza tym blokiem nie wymaga wtedy ruszania. */
.hero.hero--subpage.hero--static--homepage {
--hero-kadr-zoom: 1.72;
--hero-kadr-x: 82%;
--hero-kadr-y: 61%;
}
/* Gdy w CMS wgrana MobileImage (pionowe zdjęcie mobilne) — zoom OFF,
cover sam obetnie boki, transform-origin bezczynny. Tag body dostaje
klasę hero--has-mobile-image z HomePageMultiOption.ss. */
.hero.hero--subpage.hero--static--homepage.hero--has-mobile-image {
--hero-kadr-zoom: 1;
--hero-kadr-x: 50%;
--hero-kadr-y: 50%;
}
/* 1 ─ sekcja sięga do górnej krawędzi dolnego paska #f_cta.
Druga deklaracja svh: w Safari/Chrome pasek adresu nie ucina wtedy
dołu. Przeglądarki bez svh zostają na vh — kolejność ma znaczenie.
── DLACZEGO NIE `90svh` (poprawka 2026-09-10) ────────────────────
`90svh` dawało 760 px przy oknie 844. Przy OTWARTYM #topbar hero
startuje na 50 px (`body` ma wtedy `padding-top: 49.59px`), więc
kończyło się na 809 i pasek #f_cta (fixed, 793→844) zakrywał resztę.
Po kliknięciu „×" w #topbar `body` traci padding, hero jedzie na
0→760 i między nim a paskiem zostaje **33 px białego**
`main.container-fluid.page`. To ten stan było widać na podglądzie.
── DLACZEGO ODEJMUJEMY 45 px, A NIE WYSOKOŚĆ #topbar ────────────
Notatka z 09-07 („nie calc, bo #topbar nie ma stałej wysokości")
dotyczyła odejmowania paska GÓRNEGO — tamto faktycznie się rozjeżdża
(50 px, 66 px po przewinięciu). Tu odejmujemy wysokość paska
DOLNEGO #f_cta, zmierzoną na 51 px (390) i 53 px (768). Kierunek
błędu jest bezpieczny: odjęcie MNIEJ niż wysokość paska daje
zakrycie, nigdy szparę. Dlatego 45, nie 51 — zapas na oba warianty.
Zmierzone, oba stany, okno 390×844:
#topbar otwarty → hero 50→849, szpara -56 px, poza okno 5 px
#topbar zamknięty→ hero 0→799, szpara -6 px
Ujemna szpara = pasek #f_cta nachodzi na hero, czyli brak białego.
NIE podnoś tego do `100svh`. Sprawdzone: przy otwartym #topbar hero
wystaje wtedy 50 px poza okno, a wszystko dosunięte do jego dołu
zjeżdża w dół — znaczek SEO ląduje NA przycisku „Pobierz ofertę". */
.hero.hero--subpage.hero--static--homepage {
min-height: calc(100vh - 45px);
min-height: calc(100svh - 45px);
}
/* zdejmuje 30 px oddechu nad hero — zdjęcie ma dotykać nawigacji */
header.container-fluid.page {
padding-top: 0;
}
/* 2 ─ zdjęcie wypełnia sekcję; zdjęty sufit 350 px.
object-position 82% w osi X: pionowe okno pokazuje 29% szerokości
kadru, a przy 82% trafia w szyld WIDOCZNI na budynku zamiast
w pustą cegłę. Człon Y jest bezczynny — patrz nagłówek pliku */
.hero.hero--subpage.hero--static--homepage picture,
.hero.hero--subpage.hero--static--homepage picture img {
min-height: calc(100vh - 45px);
min-height: calc(100svh - 45px);
max-height: none;
width: 100%;
object-fit: cover;
object-position: var(--hero-kadr-x) 50%;
align-self: stretch;
}
/* 2a ─ zoom kadru: jedyny sposób obcięcia nieba i asfaltu w CSS.
Sterowane zmiennymi z punktu 0. Przy `--hero-kadr-zoom: 1`
`scale(1)` jest tożsamością i blok nic nie robi — nie trzeba go
usuwać po podmianie zdjęcia na pionowe. */
.hero.hero--subpage.hero--static--homepage picture {
overflow: hidden;
}
.hero.hero--subpage.hero--static--homepage picture img {
transform: scale(var(--hero-kadr-zoom));
transform-origin: var(--hero-kadr-x) var(--hero-kadr-y);
}
/* 3 ─ kurtyna: gradient zamiast płaskich 50% czerni.
Pas 22–46% jest jaśniejszy (czyta się szyld i cegła pod tytułem),
dół ciemny (czyta się slogan na czarnych koszulkach zespołu) */
.hero.hero--subpage.hero--static--homepage picture::before {
height: 100%;
background-color: transparent;
background-image: linear-gradient(
to bottom,
rgba(0, 0, 0, .62) 0,
rgba(0, 0, 0, .34) 22%,
rgba(0, 0, 0, .52) 46%,
rgba(0, 0, 0, .60) 68%,
rgba(0, 0, 0, .82) 100%
);
}
/* 4 ─ treść dosunięta do dołu; 240 px zapasu = wyższa pozycja tytułu
(na życzenie 2026-09-10), znaczek SEO + pasek #f_cta jak wcześniej */
.hero.hero--subpage.hero--static--homepage .hero__content {
justify-content: flex-end;
margin-top: 0;
padding: 100px 20px 240px;
}
/* 5 ─ typografia: jest miejsce, więc tytuł oddycha,
a slogan przestaje zjadać całą szerokość */
.hero.hero--subpage.hero--static--homepage .hero__headers span.title,
.hero.hero--subpage.hero--static--homepage .hero__headers h1.title {
font-size: 40px;
line-height: 1.06;
letter-spacing: -1.4px;
display: block;
text-wrap: balance;
}
.hero.hero--subpage.hero--static--homepage .hero__headers .h4.slogan {
font-size: 17px;
line-height: 1.5;
max-width: 19em;
margin: 18px auto 0;
}
/* bootstrapowe mt-5/pb-5 na wewnętrznym divie robiły 48+48 px martwego pola */
.hero.hero--subpage.hero--static--homepage .hero__content .section-footer {
padding-bottom: 0;
margin-top: 26px;
}
.hero.hero--subpage.hero--static--homepage .hero__content .section-footer > div {
margin-top: 0 !important;
padding-bottom: 0 !important;
}
/* 6 ─ znaczek SEO AI-Friendly odklejony od narożnika.
bottom: 100px (2026-09-10 v2) — obniżony z 130, żeby był bliżej
paska #f_cta (nadal odsłonięty, nie zachodzi). */
.hero.hero--subpage.hero--static--homepage .hero__badge-overlay {
right: 14px;
bottom: 100px;
max-width: 104px;
margin-left: 0;
}
/* 6a ─ certyfikaty (lewa strona hero) na wysokości badge SEO
Domyślnie mobile ma bottom: 20px (znika pod paskiem #f_cta 51px).
Podnosimy na 100px — na tej samej linii co badge po prawej,
wyrównane wizualnie. */
.hero.hero--subpage.hero--static--homepage .hero__certificates-overlay {
bottom: 100px;
}
/* 7 ─ #f_cta: usunięcie białej linii nad paskiem CTA
Domyślna reguła w symbioza.css (linia ~1607) dodaje
`border-top: 1px solid white` — na tle ciemnego hero widać
białą kreskę oddzielającą hero od paska. Wyłączamy. */
#f_cta {
border-top: 0;
}
}
/* Regulaminy / polityka prywatnosci (Regulation.ss): strona bez hero, pierwsza sekcja
zaczyna sie od gory, a .nav (i topbar) sa position:fixed. Bazowe 90px .section
(na mobile 0) nie rezerwowalo miejsca pod menu - .label-title chowal sie pod nim.
Wartosci jak w .hero--subpage .hero__content wyzej. */
.regulation-section { padding-top: 160px; }
body.has-topbar .regulation-section { padding-top: calc(160px + var(--topbar-h, 50px)); }
@media (max-width: 991px) {
.regulation-section { padding-top: 90px; }
body.has-topbar .regulation-section { padding-top: calc(90px + var(--topbar-h, 50px)); }
}
/* ====================================================================
Boks newslettera, wariant A4 (/newsletter-widoczni/, sekcja 48285).
Klasa .nl-a4 i dodatkowy markup renderuje NewsletterSection.ss tylko
dla tej sekcji (NewsletterSection::isWariantA4). Inne boksy bez zmian.
==================================================================== */
/* boks: dwie kolumny — dane | karta korzyści */
.contact__section.nl-a4 {
display: grid;
grid-template-columns: 1fr 380px;
gap: 56px;
align-items: start;
padding: 50px 80px;
border-radius: 0;
}
.contact__section.nl-a4 .newsletter__data {display: block; width: auto; max-width: none;}
/* lewa kolumna */
.contact__section.nl-a4 .newsletter__data .col-md-12 {padding: 0 !important; margin: 0;}
.contact__section.nl-a4 .nl-nadtytul {
font: 700 15px/1 Raleway, sans-serif;
letter-spacing: .6px;
text-transform: uppercase;
color: var(--primary-color);
margin: 0 0 20px;
}
.contact__section.nl-a4 .newsletter__data .h2 {
font: 700 40px/1.1 Raleway, sans-serif;
letter-spacing: -1.8px;
color: #fff;
display: block;
}
.contact__section.nl-a4 .nl-lead {
font: 400 16px/1.65 Raleway, sans-serif;
color: #d4d4cf;
margin: 16px 0 30px;
max-width: 46ch;
}
/* formularz: [e-mail | CTA] / zgoda / zgoda — kolejność w DOM bez zmian */
.contact__section.nl-a4 form.form > .form__group {
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas:
"mail cta"
"zg1 zg1"
"zg2 zg2";
column-gap: 14px;
row-gap: 0;
align-items: start;
}
.contact__section.nl-a4 form.form > .form__group > *:nth-child(1) {grid-area: mail;}
.contact__section.nl-a4 form.form > .form__group > *:nth-child(2) {grid-area: zg1; margin: 18px 0 0 !important;}
.contact__section.nl-a4 form.form > .form__group > *:nth-child(3) {grid-area: zg2; margin: 11px 0 0 !important;}
.contact__section.nl-a4 form.form > .form__group > *:nth-child(4) {grid-area: cta;}
.contact__section.nl-a4 .form__input {
height: 50px;
border: 0;
border-radius: 0;
padding: 0 20px;
width: 100%;
max-width: none;
font: 400 15px/1 Raleway, sans-serif;
margin: 0 !important; /* bije mr-md-3 / mb-3 z bootstrapa */
}
.contact__section.nl-a4 .btn--primary {
height: 50px;
padding: 0 47px;
border-radius: 4px;
margin: 0;
font: 700 13px/1 Raleway, sans-serif;
letter-spacing: .4px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.contact__section.nl-a4 .form-check .form-check-label {
font: 400 14px/1.4 Raleway, sans-serif;
color: #fff;
margin: 0;
}
.contact__section.nl-a4 .nl-nota {
display: flex;
align-items: center;
gap: 9px;
margin: 22px 0 0;
font: 500 13px/1.4 Raleway, sans-serif;
color: #a6a6a1;
}
.contact__section.nl-a4 .nl-nota svg {flex: none;}
/* prawa kolumna: korzyści na kresce, bez tła i ramki */
.contact__section.nl-a4 .nl-korzysci {
border-left: 1px solid #2b2b28;
padding: 0 0 0 40px;
}
.contact__section.nl-a4 .nl-korzysci__tyt {
font: 700 15px/1 Raleway, sans-serif;
letter-spacing: .6px;
text-transform: uppercase;
color: #fff;
margin: 0;
padding-bottom: 20px;
border-bottom: 1px solid #2b2b28;
}
.contact__section.nl-a4 .nl-poz {
display: grid;
grid-template-columns: 44px 1fr;
gap: 16px;
padding: 20px 0;
border-bottom: 1px solid #2b2b28;
}
.contact__section.nl-a4 .nl-poz:last-child {border-bottom: 0; padding-bottom: 0;}
.contact__section.nl-a4 .nl-ikona {
width: 44px;
height: 44px;
border-radius: 4px;
background: rgba(65, 194, 7, .12);
display: grid;
place-items: center;
}
.contact__section.nl-a4 .nl-poz h4 {font: 700 16px/1.2 Raleway, sans-serif; margin: 0 0 5px; color: #fff;}
.contact__section.nl-a4 .nl-poz p {font: 400 13px/1.5 Raleway, sans-serif; margin: 0; color: #a6a6a1;}
/* ≤991: jedna kolumna, CTA pełną szerokością pod zgodami */
@media (max-width: 991px) {
.contact__section.nl-a4 {
grid-template-columns: 1fr;
gap: 30px;
padding: 34px 22px;
}
.contact__section.nl-a4 .newsletter__data .h2 {font-size: 28px; letter-spacing: -.8px; line-height: 1.15;}
.contact__section.nl-a4 .nl-lead {margin: 14px 0 26px;}
.contact__section.nl-a4 form.form > .form__group {
grid-template-columns: 1fr;
grid-template-areas: "mail" "zg1" "zg2" "cta";
}
.contact__section.nl-a4 .btn--primary {width: 100%; margin-top: 22px;}
.contact__section.nl-a4 .nl-korzysci {
border-left: 0;
border-top: 1px solid #2b2b28;
padding: 26px 0 0;
}
}
/* ============================================================
widoczni.com — /pozycjonowanie-cennik/
Tabela porownawcza "ROZLICZANIE ZA POZYCJE / Z WIDOCZNI"
ucieta na waskich ekranach.
Przyczyna: .table nie ma table-layout:fixed, wiec uklad
automatyczny schodzi tylko do sumy szerokosci min-content
kolumn = 446 px i nizej juz sie nie zweza. Kontener
.table-container ma overflow:hidden, wiec nadmiar jest
przycinany bez mozliwosci przewiniecia. Przy 390 px
kontener ma 360 px -> ucinane 86 px, czyli 59% trzeciej
kolumny. Zmierzone 2026-10-07.
Prog: tabela jest przycinana PONIZEJ 533 px szerokosci okna.
Uwaga — to nie jest 480 px: miedzy 481 a 532 px obowiazuje
jeszcze font 17 px i minimum tresci wynosi tam 503 px, a nie
446 px. Zmierzone: 481 px -> ucinane 52 px, 530 px -> 3 px,
533 px -> 0 px.
Uzyty prog to 575 px — najblizszy breakpoint motywu powyzej
granicy. Zapas jest celowy: minimum tresci zalezy od najdluzszego
slowa w komorkach, wiec prog ustawiony dokladnie na dzisiejszym
pomiarze peklby po pierwszej zmianie tekstu w CMS.
Zasieg: body#page-395. Klasa .section.table-section wystepuje
na 15 innych podstronach, z innymi naglowkami i inna liczba
kolumn — bez tego zawezenia etykiety ponizej rozlalyby sie
na wszystkie.
Dopisac do: _resources/themes/widoczni/css/symbioza.css
============================================================ */
@media (max-width: 575px) {
body#page-395 .section.table-section .table-container { overflow: visible; }
body#page-395 .section.table-section .table-container .table,
body#page-395 .section.table-section .tbody,
body#page-395 .section.table-section .tbody .tr,
body#page-395 .section.table-section .tbody .tr .td {
display: block;
width: auto;
overflow: visible;
}
/* wiersz naglowkowy znika — jego etykiety wracaja przy kazdym bloku nizej */
body#page-395 .section.table-section .tbody .tr:first-child { display: none; }
body#page-395 .section.table-section .tbody .tr { padding-bottom: 18px; }
body#page-395 .section.table-section .tbody .tr .td {
border-top: 0;
padding: 8px 15px;
}
/* nazwa kategorii jako naglowek bloku; #000 i 17px zdjete z naglowkow strony */
body#page-395 .section.table-section .tbody .tr .td:first-child {
padding: 18px 15px 10px;
font-size: 17px;
color: #000;
border-top: 1px solid #e4e4e4; /* kolor zdjety z .td border-top */
}
body#page-395 .section.table-section .tbody .tr .td:nth-child(2),
body#page-395 .section.table-section .tbody .tr .td:nth-child(3) {
font-weight: 400;
}
body#page-395 .section.table-section .tbody .tr .td:nth-child(2)::before,
body#page-395 .section.table-section .tbody .tr .td:nth-child(3)::before {
display: block;
margin-bottom: 4px;
font-size: 12px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: #000;
}
body#page-395 .section.table-section .tbody .tr .td:nth-child(2)::before {
content: "Rozliczanie za pozycje";
}
/* kolumna "nasza" wyrozniona akcentem strony #41c207 (--primary-color) */
body#page-395 .section.table-section .tbody .tr .td:nth-child(3)::before {
content: "Rozliczanie z Widoczni";
color: #41c207;
}
}
/* ============================================================
widoczni.com — /pozycjonowanie-sklepu-internetowego/
Tabela "Typ sklepu / witryny" ucieta na waskich ekranach.
Ta sama przyczyna co na /pozycjonowanie-cennik/: .table nie ma
table-layout:fixed, wiec nie zwezi sie ponizej sumy min-content
kolumn, a .table-container ma overflow:hidden i przycina nadmiar
bez mozliwosci przewiniecia.
Tutaj jest mocniej: przy 390 px kontener ma 360 px wobec 485 px
minimum -> ucinane 125 px. Zmierzone 2026-10-07.
Prog: granica ucięcia to 577 px (575 px -> ucinane 2 px,
576 px -> 1 px, 577 px -> 0 px). Prog 575 px zostawilby wiec
resztke — uzyty 600 px, z zapasem, bo minimum tresci zalezy od
najdluzszego slowa w komorkach. Motyw nie ma breakpointu miedzy
575 a 767 px, wiec nie ma do czego sie dowiazac.
Zasieg: body#page-184 — etykiety ponizej sa wpisane tekstem
i naleza tylko do tej tabeli.
Dopisac do: _resources/themes/widoczni/css/symbioza.css
============================================================ */
@media (max-width: 600px) {
body#page-184 .section.table-section .table-container { overflow: visible; }
body#page-184 .section.table-section .table-container .table,
body#page-184 .section.table-section .tbody,
body#page-184 .section.table-section .tbody .tr,
body#page-184 .section.table-section .tbody .tr .td {
display: block;
width: auto;
overflow: visible;
}
body#page-184 .section.table-section .tbody .tr:first-child { display: none; }
body#page-184 .section.table-section .tbody .tr { padding-bottom: 18px; }
body#page-184 .section.table-section .tbody .tr .td {
border-top: 0;
padding: 8px 15px;
}
body#page-184 .section.table-section .tbody .tr .td:first-child {
padding: 18px 15px 10px;
font-size: 17px;
color: #000;
border-top: 1px solid #e4e4e4;
}
body#page-184 .section.table-section .tbody .tr .td:nth-child(2),
body#page-184 .section.table-section .tbody .tr .td:nth-child(3) {
font-weight: 400;
}
body#page-184 .section.table-section .tbody .tr .td:nth-child(2)::before,
body#page-184 .section.table-section .tbody .tr .td:nth-child(3)::before {
display: block;
margin-bottom: 4px;
font-size: 12px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: #000;
}
body#page-184 .section.table-section .tbody .tr .td:nth-child(2)::before {
content: "Skala i specyfika";
}
/* kolumna z cena wyrozniona akcentem strony #41c207 (--primary-color) */
body#page-184 .section.table-section .tbody .tr .td:nth-child(3)::before {
/* \00017C = "z" z kropka. Escape, nie znak wprost: serwer oddaje
symbioza.css jako "text/css" BEZ charset=utf-8, wiec polska
litera w content: moze wyjsc jako krzak. Sprawdzone naglowkiem
odpowiedzi 2026-10-07. Szesc cyfr, bo "\17C" + "e" skleiloby sie
w U+17CE. */
content: "Orientacyjny bud\00017Cet netto/mies.";
color: #41c207;
}
}
/* ============================================================
widoczni.com — dwie usterki komponentow, widoczne m.in. na /seo-ai/
Zmierzone 2026-10-07. Dopisac do:
_resources/themes/widoczni/css/symbioza.css
============================================================ */
/* ------------------------------------------------------------
1. Strzalka "<-" na kafelkach, ktore nie sa klikalne
------------------------------------------------------------
Komponent .collecting-list ma dwa warianty kafelka:
— klikalny, prowadzi na podstrone
— nieklikalny, sama etykieta
symbioza.css nadaje strzalke OBU wariantom, a potem obraca ja
o 180 stopni wylacznie na wariancie nieklikalnym:
.collecting-list div span::after,
.collecting-list div a::after { background-image: arrow-right-green.svg }
.collecting-list div span::after { transform: rotate(180deg) }
Efekt: kafelek, ktory nic nie robi, dostaje strzalke — a do tego
obrocona, wiec czyta sie jako "wstecz". Kafelki nigdy nie mialy sie
rozwijac; dowodem jest sekcja "Optymalizujemy strony dla kazdego
modelu AI" na /seo-ai/, gdzie 7 kafelkow to z prawdziwym href
(ChatGPT, DeepSeek, Gemini, Perplexity, Claude, Copilot, Grok),
a osmy — "Meta AI", dla ktorego podstrona jeszcze nie istnieje —
jest em. Podzial na / jest wiec celowy, pomylka jest
tylko w tym, ze strzalka trafia takze na .
Poprawka: strzalka zostaje na (tam niesie informacje), znika
z . Razem z nia znika zarezerwowane na nia miejsce — bez tego
po kazdym nieklikalnym kafelku zostaje 46 px pustego marginesu.
ZASIEG: regula jest globalna, bo blad jest w komponencie, nie
w tresci. Dotyka 19 podstron (zmierzone na 55 sprawdzonych).
Gdyby ograniczyc do samego /seo-ai/ — dopisac "body#page-4803 "
przed kazdym selektorem; strzalka wstecz zostanie wtedy
na 18 pozostalych podstronach.
------------------------------------------------------------ */
.collecting-list div span::after {
content: none;
}
.simple-collecting-list .collecting-list span {
padding-right: 20px; /* tyle, co pozostale boki (.collecting-list padding: 20px) */
}
/* ------------------------------------------------------------
2. Nieparzysty ostatni kafelek w siatce dwukolumnowej
------------------------------------------------------------
symbioza.css wymusza ponizej 575 px dwie kolumny:
@media (max-width: 575px) {
.features.features--grid2 > .features__feature { flex: 0 0 50%; max-width: 50% }
}
Przy parzystej liczbie kafelkow (6 — tak jest na wiekszosci podstron)
wychodzi rowno. Przy trzech ostatni zostaje sam w lewej polowie,
a prawa jest pusta — sekcja wyglada na urwana. Tak jest m.in. w
"Z SEO AI Focus zyskasz znaczna przewage konkurencyjna" na /seo-ai/.
Poprawka: ostatni kafelek, jesli wypada nieparzyscie, bierze cala
szerokosc. Tresc w .features__content jest juz wysrodkowana
(justify-content:center + text-align:center), wiec wysrodkowuje sie
wtedy wzgledem calego rzedu — bez pustego pola obok.
Obramowan nie ruszam: symbioza.css ma juz regule zdejmujaca
border-right z ":last-child:nth-child(2n+1)".
ZASIEG: 6 wystapien na 5 podstronach — wszedzie tam, gdzie kafelkow
jest 3 (/seo-ai/, /audyt-ai/, /seo-ai/seo-ai-cennik/,
/kampanie-adwords/audyt-google-ads/, /audyt-konta-reklamowego/,
/tworzenie-stron-www/). Siatki o 6 kafelkach regula nie dotyka,
bo warunek :nth-child(2n+1) na ostatnim sie tam nie spelnia.
------------------------------------------------------------ */
@media (max-width: 575px) {
.features.features--grid2 > .features__feature:last-child:nth-child(2n+1) {
flex: 0 0 100%;
max-width: 100%;
}
}
/* ==========================================================================
widoczni.com — bugi z audytu CRO, partia 1 (TECH-2312, 2314, 2324)
Ustalenia i pomiary: 2026-10-07, diagnoza na zywej stronie (Playwright).
Plik docelowy: _resources/themes/widoczni/css/symbioza.css — NA SAM KONIEC.
Bez !important. Jesli regula nie dziala, przyczyna to kolejnosc albo cache.
========================================================================== */
/* --------------------------------------------------------------------------
TECH-2312 — mobile: strona szersza niz ekran (przewijanie w poziomie)
Strona: /blog/ (i kazdy listing z .row.posts)
PRZYCZYNA (zmierzona, nie zgadnieta):
`div.row.posts` lezy BEZPOSREDNIO w `div.row`, bez kolumny posredniej.
Bootstrap zaklada `.row > .col-* > .row`. Kazdy `.row` ma `margin: 0 -15px`,
ktory ma kasowac padding kolumny. Tutaj:
main.container-fluid padding 0 15px -> tresc 360.4 px
div.row margin 0 -15px -> 390.4 px (poprawnie kasuje padding)
div.row.posts margin 0 -15px -> 420.4 px (NIE MA czego kasowac)
Drugi ujemny margines nie ma pokrycia => 15 px poza ekran.
PROG (zmierzony): nadmiar zaczyna sie przy 1259 px, przy 1260 jest zero.
1260 -> 0 | 1259 -> 1 | 1255 -> 3 | 1230 -> 16 | 1199..360 -> 15 | 390 -> 16
Powyzej ~1262 px kontener (max 1200 px) jest wezszy od okna i 30 px nadmiaru
miesci sie w jego marginesie — dlatego na desktopie bug jest niewidoczny.
DLACZEGO 1260, a nie 1259: viewport bywa ulamkowy (zmierzone: przy oknie
1259 px `matchMedia('(max-width:1259px)')` zwraca false, kontener wypada na
x=29.6). 1260 lapie cale pasmo. Jedyna szerokosc, gdzie regula zmienia uklad
bez istniejacego buga, to dokladnie 1260 px — karty przesuwaja sie tam o 15 px
do srodka, czyli do tej samej osi co reszta strony.
SWIADOMIE NIE RUSZAMY DESKTOPU (>=1262 px). Tam karty sa o 30 px szersze od
kontenera — to ten sam blad, ale niewidoczny i nikt o jego poprawe nie prosil.
ZASIEG: na /blog/ wszystkie 9 zagniezdzonych `.row` to `.row.posts` —
selektor trafia komplet i nic poza nim.
ZWERYFIKOWANE: 1440/1300/1262 bez zmian; 1259/1230/1199/991/767/575/390/360
nadmiar 15-16 px -> 0. Karty ustawiaja sie na x=15, rowno z trescia strony.
-------------------------------------------------------------------------- */
@media (max-width: 1260px) {
.row > .row.posts {
margin-left: 0;
margin-right: 0;
}
}
/* --------------------------------------------------------------------------
TECH-2314 — menu mobilne nie przewija sie na niskich ekranach
Element: div.overlay-mobilemenu (rozwiniety hamburger)
PRZYCZYNA (zmierzona): overlay ma `position: fixed` i wysokosc rowna ekranowi,
a `overflow-y: visible`. Tresc menu ma 572 px. Przy `visible` nadmiar nie jest
przycinany ANI przewijalny — po prostu nie da sie do niego dojsc.
SKALA (zmierzona, szerokosc 390 px):
okno 700 px -> 0 px poza zasiegiem
okno 560 px -> 12 px
okno 480 px -> 92 px
okno 400 px -> 172 px (tu znikaja podkategorie pod „O nas")
`overscroll-behavior: contain` zatrzymuje przewijanie na menu i nie przenosi
go na strone pod spodem po dojechaniu do konca.
ZWERYFIKOWANE: po regule `scrollTop = 9999` faktycznie ustawia sie na
12 / 92 / 172 px — czyli cala tresc jest osiagalna. Przy oknie 700 px
menu miesci sie w calosci i regula niczego nie zmienia.
-------------------------------------------------------------------------- */
.overlay-mobilemenu {
overflow-y: auto;
overscroll-behavior: contain;
}
/* --------------------------------------------------------------------------
TECH-2324 — menu desktop: „Historie sukcesow" lamie sie na dwie linie
Element: a.nav__anchor w poziomym pasku nawigacji
PRZYCZYNA (zmierzona): `white-space: normal` + kurczenie elementu we flexie.
Ponizej ~1620 px szerokosc pozycji spada ze 157 px na 85.1 px i tekst
przechodzi na druga linie. Jako JEDYNA z 6 pozycji — stad rozjechany pasek.
PROG (zmierzony): 1628 px -> 1 linia (157 px) | 1608 px -> 2 linie (85.1 px)
ZASIEG: `min-width: 1501px`, bo ponizej tej szerokosci motyw przelacza sie
na hamburger i poziomego paska nie ma wcale (patrz _wiedza.md).
ZWERYFIKOWANE: przy 1588/1538/1490 px pozycja wraca na 157 px i jedna linie,
liczba zawijanych pozycji w calym menu: 0 z 6. Strona nie dostaje nowego
nadmiaru w poziomie.
-------------------------------------------------------------------------- */
@media (min-width: 1501px) {
.nav__anchor {
white-space: nowrap;
}
/* Bez tego `nowrap` wylewa tekst na sasiednia pozycje menu.
Sztywne `width: 8%` / `5%` na `.nav__link:nth-child(4)` (1500–1622 px,
wyzej w tym pliku) daje ~60 px; `min-width` ma pierwszenstwo przed `width`. */
.nav__menu > .nav__link {
min-width: max-content;
}
}
/* --------------------------------------------------------------------------
TECH-2315 — zgoda na kontakt telefoniczny wymagana, ale nieoznaczona
Element: input[name="agreement_7"] + label.form-check-label
PRZYCZYNA (ustalona z kodu + zmierzona): `landing-form.js` (PR #161) ma
funkcje `syncPhoneConsent()`, ktora na wpisanie telefonu ustawia
`consent.required = phone.value.trim() !== ''` na `agreement_7`.
Przestawia WLASCIWOSC, ale nie rusza etykiety — uzytkownik dowiaduje sie
o wymagalnosci dopiero przy wysylce.
DLACZEGO AKURAT TAK TO NAPRAWIAMY:
Strona MA juz wlasna konwencje oznaczania zgod wymaganych:
*
Jest przy agreement_1, _2, _4, _5 — i brakuje jej TYLKO przy agreement_7,
czyli dokladnie przy tej warunkowo wymaganej. Odtwarzamy ten sam znacznik.
Zmierzony wyglad wzorca: color #41c207, font-size 25.2px, font-weight 700,
margin-left 3px. Ponizsze wartosci sa z niego przepisane 1:1.
ZERO ZMIAN W JS. Etykieta jest rodzenstwem inputa, a `:required` to zywy stan
CSS — gwiazdka pojawia sie i znika sama, dokladnie wtedy, gdy skrypt przestawi
`required`. Nie trzeba dotykac `landing-form.js`.
ZWERYFIKOWANE (przelaczajac `required` tak, jak robi to skrypt):
required=false -> content: none
required=true -> content: "*", rgb(65,194,7), 25.2px, 700 = jak wzorzec
required=false -> content: none
Wymiary etykiety bez zmian (210x34 px) — brak skoku layoutu.
UWAGA DLA WDRAZAJACEGO: na formularzu `#fixedRequestForm` (artykul blogowy)
`syncPhoneConsent` NIE dziala — wpisanie telefonu nie przestawia `required`
(sprawdzone). Ta regula nic tam nie zepsuje, ale i nic nie pokaze. Wedlug
komentarza w `landing-form.js` serwer (`ContactPageController::rulesFields`)
wymaga `agreement_7` przy niepustym `Phone` NIEZALEZNIE od tego, ktory skrypt
sie wykonal — czyli ten formularz moze odbic sie dopiero z serwera.
To osobny problem, do zgloszenia, nie do zalatania tym CSS-em.
-------------------------------------------------------------------------- */
.form-check-input[name="agreement_7"]:required + .form-check-label::after {
content: "*";
color: #41c207;
font-size: 25.2px;
font-weight: 700;
margin-left: 3px;
line-height: 0;
vertical-align: middle;
}
/* --------------------------------------------------------------------------
TECH-2320 — /pozycjonowanie-cennik/, mobile: tekst obok grafiki lamie sie
po jednym slowie (sekcja #section-1868)
PRZYCZYNA (zmierzona): grafika z edytora CMS ma klase `right`
(`float: right`) i 300 px szerokosci w kontenerze 360 px — na tekst zostaje
60 px, najwezsza linia 18 px.
ZWERYFIKOWANE przy 390 px: float right -> none, linie tekstu 6 -> 4,
najwezsza linia 18 -> 305 px, nadmiar strony 0 -> 0.
UWAGA: klasy `left`/`right` nadaje edytor CMS w calym serwisie. Mala ikona
z taka klasa tez przestanie byc oplywana i wysrodkuje sie jako blok.
-------------------------------------------------------------------------- */
@media (max-width: 575px) {
.wysiwyg-content img.left,
.wysiwyg-content img.right {
float: none;
display: block;
margin-left: auto;
margin-right: auto;
}
}
/* TECH-2306: inicjal ma byc raz na wpis, nie w kazdym boksie CTA.
`:first-of-type` liczy sie per rodzic, wiec kazdy .contact__data
dostawal wlasny. Ten sam zabieg jest juz w symbioza.css dla .content-table. */
.single-post__wysiwyg .contact__data span.h4:first-of-type::first-letter,
.single-post__wysiwyg .contact__data h4:first-of-type::first-letter,
.single-post__wyswiyg-section .contact__data .h4:first-of-type::first-letter {
color: inherit;
font-size: inherit;
line-height: inherit;
margin-right: 0;
float: none;
}
/* TECH-2323: odpowiedz formularza newslettera pod przyciskiem zamiast toastu
w rogu ekranu. Element wstawia `processAsAjax` w app.jquery.js. */
/* `.newsletter_form` podnosi specyficznosc do (0,2,0): sama klasa (0,1,0)
przegrywala z `.wysiwyg-content p` (0,1,1) w style.css. */
.newsletter_form .newsletter__message {
margin: 10px 0 0;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
}
.newsletter_form .newsletter__message--success { color: #2b7d04; }
.newsletter_form .newsletter__message--danger { color: #d91c12; }