/* * Stiluri pentru pagina „Aparate dentare” (template `templates/orto.php`). * * E o pagină de tip landing, cu propriul limbaj vizual: în tema veche avea un * fișier separat, `includes/css/orto.css`, și grila Bootstrap 5. Fișierul e * portat aici aproape neatins, ca pagina să arate identic, și e încărcat DOAR * pe acest template — vezi `inc/assets.php`. * * Ce am scos la port: * - regulile pentru header, footer, navbar și butonul plutitor de telefon: * ar fi rescris componentele temei noi; * - paginile străine (thank-you, 404) și pluginul Popup Maker, care nu mai * există; * - `.modal*`, ca să nu strice dialogul nativ de programare; * - `url()` către patru SVG-uri care lipseau și din tema veche (404 pe live). * * `.page-template-orto-md-template` a devenit `.orto-page`, clasă adăugată pe * `` din `inc/setup.php` — numele vechi depindea de numele fișierului. * * Layerul `orto` e declarat după `components`, deci regulile de aici câștigă * fără `!important`. */ @layer orto { .lp-section--contact .white { color: white; } /* * În original selectorul era `.page-template-templates`, clasă pe care * WordPress o pune pe orice pagină cu template din `templates/` — deci se * aplica și pe „Testimoniale ortodonție”, nu doar pe pagina orto. */ :is(.orto-page, .orto-testimonials) .wpcf7-submit { border: none; border-radius: 0; font-size: 18px; font-weight: 700; line-height: 30px; letter-spacing: -0.6px; text-transform: uppercase; padding: 17px 30px; background-color: #978666; color: #fff; max-width: 440px; min-width: 440px; } .orto-page #vid-gallery { max-width: 100%; } .orto-page .orto_reviews .magnum_clinic { display: none; } .orto-page .accordion { margin-top: 20px; } @media only screen and (max-width: 640px) { .orto-page .container { padding: 0 15px; } } .bg-dark { background-color: #1e1e1e !important; } .btn-dark { background-color: #1e1e1e !important; border: none; transition: 0.4s; } .btn-dark:hover { background-color: #978666 !important; } .lp-showcase .col-lg-7 .lp-showcase__video.video-container { background-image: url(/wp-content/uploads/2024/02/daniela_osman.png); } .lp-section.lp-section--one .video-container.has-background { /* height: 660px; */ height: 510px; margin-bottom: 35px; } .lp-section.lp-section--reasons .reason-end { flex-wrap: nowrap; } .lp-section.lp-section--reasons .reason-end__cover { background-image: url(/wp-content/uploads/2024/02/orto.md_.png); height: 262px; } .lp-section.lp-section--reasons .reasons-grid .reason.reason--2 p, .lp-section.lp-section--reasons .reasons-grid .reason.reason--4 p, .lp-section.lp-section--reasons .reasons-grid .reason.reason--5 p, .lp-section.lp-section--reasons .reasons-grid .reason-end p { color: #fff; } .lp-section.lp-section--specifications .specification-item .specification-item-body p { font-size: 14px; color: #1e1e1e; } .lp-section.lp-section--reviews.lp-section--reviews2 .video-reviews.row .col-md-8, .lp-section.lp-section--reviews.lp-section--reviews2 .video-reviews.row .col-md-4 { padding: 0; } .lp-section.lp-section--reviews.lp-section--reviews2 .video-reviews.row #case_frame { width: 100%; height: 510px; } .lp-section.lp-section--cta .lp-section__cover { background-image: url(/wp-content/uploads/2024/02/brackets-metal.jpg); right: 0; top: 0; background-position: center; } .lp-section--cta .h1 { color: #fff; } .lp-section.lp-section--cta .set-strong strong { text-transform: uppercase; color: #ebc988; } .lp-section.lp-section--gallery .simple-gallery-grid .col-lg-4.item { padding: 7px; margin: 0; transform: scale(1); } .lp-section.lp-section--gallery .simple-gallery-grid .item { height: auto; opacity: inherit; } .lp-section.lp-section--reviews.lp-section--reviews .video-reviews.row .col-md-8, .lp-section.lp-section--reviews.lp-section--reviews .video-reviews.row .col-md-4, .lp-section.lp-section--case-studies .video-media.row .col-md-8, .lp-section.lp-section--case-studies .video-media.row .col-md-4 { padding: 0; } .lp-section.lp-section--reviews.lp-section--reviews .video-reviews.row #vid_frame, .lp-section.lp-section--case-studies .video-media.row #media_frame { width: 100%; height: 510px; } .video-media__list { height: 100%; max-height: 510px; overflow: auto; } .study-description-blk { margin-bottom: 0 !important; } .lp-section.lp-section--studies .studies-grid .col-lg-6 .row .col-sm-6 .study--1, .lp-section.lp-section--studies .studies-grid .col-lg-6 .row .col-sm-6 .study--2 { margin-bottom: 30px !important; } .studies-cover { height: calc(100% - 25px) !important; } .study-description-blk p { font-size: 18px; line-height: 26px; color: #fff; } .certificates-grid .certificate p { font-size: 14px; line-height: 21px; } .lp-section.lp-section--case-studies .case-item iframe { width: 100%; height: 230px; } .lp-section.lp-section--reasons .reasons-item p, .review-item__content p { font-size: 14px; line-height: 21px; } .step-item p { font-size: 15px; line-height: 24px; } .lp-section.lp-section--reasons .reasons-item:hover { color: #fff; } .steps-row .col-sm-6.col-lg-3:hover .step-item { color: #fff !important; } .steps-row .col-sm-6.col-lg-3:hover .step-item .number { color: inherit; } .lp-section--contact { background-image: url(/wp-content/uploads/2024/02/magnum-dent-1.png); } .lp-section--contact p textarea { height: 77px; background-color: rgba(255, 255, 255, .3) !important; border: none; border-radius: 0; color: #fff; padding: 10px 30px; max-width: 440px; min-width: 440px; margin-bottom: 0; } .lp-section--contact form p { margin-bottom: 20px; } .lp-section--contact ::placeholder { color: #ffffff90!important; } .lp-section.lp-section--gallery h2 { color: #fff; } .lp-section--reviews2 .video-reviews .col-md-8 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .lp-section--reviews2 .video-reviews .col-md-4 { display: none; } .lp-section.lp-section--one .video-reviews.row #aparate_frame { width: 100%; height: 510px; } .lp-section.lp-section--one .video-reviews.row .col-md-8, .lp-section.lp-section--one .video-reviews.row .col-md-4 { padding: 0; } .before-after-img-container { position: relative; width: 100%; height: 100%; overflow: hidden; margin-bottom: 30px; } .after-img { position: absolute; top: 0; right: 0; width: 100%; height: 100%; transition: 0.3s ease; background-repeat: no-repeat; background-size: 100%; background-position: center; } .lp-section.lp-section--gallery.bef-af h2, .lp-section.lp-section--gallery.customers h2 { color: #000; } .orto-page .lp-showcase h4 { font-size: 24px; line-height: 34px; font-weight: 500; margin-top: 40px; } .orto-page .specification-item:hover h6, .orto-page .specification-item:hover p { color: #fff!important; } .lp-section--contact .wpcf7-text { height: 77px; background-color: rgba(255, 255, 255, .3)!important; border: none; border-radius: 0; color: #fff; padding: 10px 30px; max-width: 440px; min-width: 440px; } .orto-page .wpcf7-submit { border: none; border-radius: 0; font-size: 18px; font-weight: 700; line-height: 30px; letter-spacing: -0.6px; text-transform: uppercase; padding: 17px 30px; background-color: #978666; color: #fff; max-width: 440px; min-width: 440px; } .lp-section-faq-accordion .accordion-content { margin-top: -15px; } .orto-page .wpcf7-submit:hover { background-color: #000; transition: .3s; } .orto-page .lp-section--contact h2 { color: #fff; } .lp-section--contact .wpcf7-form-control-wrap input::placeholder { color: #ffffff; } .lp-section--about-payment .about-cta-img img { width: 100%; } .accordion button[aria-expanded="true"] .icon::after { display: none; } .accordion button[aria-expanded="true"] { border: none !important; } .accordion-item { border-radius: 0px; border-bottom: 1px solid #ccc; } .accordion-item.is-active { border-bottom: 1px solid var(--color-brown); } .lp-section.lp-section--about-payment { background-position: center; background-repeat: no-repeat; } @media only screen and (max-width: 640px) { .lp-section--contact p textarea { width: 100%; max-width: 100%; min-width: 100%; } .lp-section--contact .container { padding: 0; } .lp-section--gallery.bef-af .row .px-lg-2 { margin-top: -20px; } .lp-section--cta-bottom .d-flex { max-width: 100%!important; } .studies-grid { margin-bottom: 0!important; } .lp-section--contact form p { margin-bottom: 10px; } .lp-section--about-payment .button_rate { max-width: 100%; } .lp-section.lp-section--studies .studies-grid .col-lg-6 .row .col-sm-6 .study--1, .lp-section.lp-section--studies .studies-grid .col-lg-6 .row .col-sm-6 .study--2, .lp-section--studies .study-description-blk { margin-bottom: 15px!important; } .before-after-img-container { margin-bottom: 15px; } .before-after--item img { height: 140px!important; } .lp-section.lp-section--reasons .reason-end__cover { height: 190px; } .lp-section.lp-section--reasons .reason-end { flex-wrap: wrap; } .lp-section__related-txt p, .lp-section--studies p { font-size: 17px; line-height: 28px; margin-bottom: 20px !important; } .lp-section.lp-section--reviews.lp-section--reviews2 .video-reviews.row #case_frame { width: 100%; height: 230px; } .video-reviews__container { height: 230px; } .lp-section.lp-section--cta .col-md-6 { padding: 0; } .lp-section.lp-section--gallery .simple-gallery-grid .col-lg-4.item { flex: 0 0 calc(50% - 10px); max-width: calc(50% - 10px); padding: 0; margin: 5px; } .lp-section.lp-section--reviews.lp-section--reviews .video-reviews.row #vid_frame { width: 100%; height: 230px; } .study-description-blk { margin-bottom: 30px !important; } .certificates-grid .col-sm-6 img { width: 100%; } .lp-section--contact .wpcf7-text { max-width: 100%; min-width: 100%; margin: 10px 0; height: 57px; } .contact-form-set .col-md-12, .contact-form-set .col-md-4 { padding: 0; } :is(.orto-page, .orto-testimonials) .wpcf7-submit { max-width: 100%; min-width: 100%; margin: 10px 0; } .contact-form-set { padding: 0; } .lp-showcase .col-lg-7 .lp-showcase__video.video-container { height: 300px !important; } .lp-section.lp-section--reviews.lp-section--reviews .video-reviews.row #vid_frame, .lp-section.lp-section--case-studies .video-media.row #media_frame { min-height: 250px; height: 250px; } .video-media.row .col-md-4 { width: 100%; height: 200px; margin-top: 20px; } .video-reviews__list { width: 100%; height: 200px; margin-top: -10px; } .section_hero .col-lg-7 { padding-right: 15px !important; } .lp-section--advantages .col-md-3 { flex: 0 0 calc(100% - 30px) !important; max-width: calc(100% - 30px) !important; } .lp-section.lp-section--reasons .reasons-item p { text-align: center; } .lp-section.lp-section--reasons .reasons-item--xxl h3 { text-align: center; } .lp-section.lp-section--reasons .reasons-item .icon { justify-content: center !important; } .lp-section--gallery.bg-dark h2 { line-height: 50px !important; } .lp-section.lp-section--reasons .review-item__author { margin-right: 15px !important; } } @media (min-width: 641px) and (max-width: 1023px) { .lp-section.lp-section--gallery .simple-gallery-grid .col-lg-4.item { flex: 0 0 calc(50% - 0px); max-width: calc(50% - 0px); padding: 0; margin: 0; } .certificates-grid .col-sm-6 img { width: 100%; } .lp-section--contact { text-align: center; } .lp-showcase .col-lg-7 .lp-showcase__video.video-container { height: 500px !important; } .lp-section--advantages .col-md-3 { flex: 0 0 calc(50% - 30px) !important; max-width: calc(50% - 30px) !important; } } @media only screen and (max-width: 1023px) { .lp-section.lp-section--about-payment .lp-section__heading .col-8 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } @media (min-width: 1024px) and (max-width: 1200px) { .lp-section--advantages .col-md-3 { flex: 0 0 calc(33% - 30px) !important; max-width: calc(33% - 30px) !important; } } @media (min-width: 1125px) and (max-width: 1440px) { .lp-section.lp-section--gallery .simple-gallery-grid .col-lg-4.item { padding: 15px; margin: 0; } .simple-gallery-grid { justify-content: center; } } :root { --bs-body-font-family: 'Montserrat', sans-serif; --bs-body-line-height: 1.5rem; --bs-body-color: #1E1E1E; --bs-dark-rgb: 30, 30, 30; --bs-light-rgb: 217, 217, 217; } /* * Fără titlul hero-ului temei (`.page-hero__title`), care apare pe * „Testimoniale ortodonție”: layerul `orto` bate layerul componentelor, iar * titlul ar fi ieșit de 48px și pe mobil, unde „TESTIMONIALE” lățea pagina. */ h1:not(.page-hero__title), .h1 { font-size: 48px; font-weight: 600; letter-spacing: -1.44px; line-height: normal; } .loader { transition: all .3s ease-in; } .lp-showcase { padding-top: 80px; padding-bottom: 70px; background: #f1f1f1; } .lp-showcase h1 { margin-bottom: 30px; font-weight: 600; } .lp-showcase h1 strong, .section_hero ul li h5 strong { font-weight: 600; } .section_hero ul li h5 { font-size: 22px; } .lp-showcase h3 { font-size: 20px; font-weight: 400; line-height: 30px; margin-bottom: 20px; } .lp-showcase p { margin-bottom: 30px; } .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; /* visibility: hidden; */ transition: all .4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .video-container.video-playing iframe { visibility: visible; transition: all .4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .video-container.video-playing .btn-play { opacity: 0; } .video-container.video-playing:hover .btn-play { opacity: 1; } .lp-section { padding-top: 60px; padding-bottom: 60px; } .lp-section__heading, .lp-section__related-txt h4 { font-size: 20px; line-height: 30px; } .lp-section__heading h2, .lp-section__heading, .lp-section--one .video-container { margin-bottom: 15px; } .lp-section__related-txt { line-height: 24px; } .lp-section__related-txt h4 { margin-bottom: 10px; } .lp-section__related-txt p { margin-bottom: 30px; } .reasons-grid { margin-bottom: 20px; } .reason { background-color: #FAFAFA; font-size: 20px; font-weight: 500; line-height: normal; letter-spacing: -0.6px; margin-bottom: 30px; padding: 34px 44px; height: calc(100% - 30px); transition: all .4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .reason img { display: block; max-width: 70px; object-fit: contain; margin-bottom: 30px; } .reason--2, .reason--4, .reason--5 { color: var(--bs-white); } .reason--2 img, .reason--4 img, .reason--5 img { filter: invert(1) brightness(100); } .reason--2 { background-color: #978666; } .reason--4, .reason--5 { background-color: #1E1E1E; } .reason-end { background-color: #978666; font-size: 20px; font-weight: 400; letter-spacing: -0.6px; line-height: 25px; color: var(--bs-white); min-height: calc(100% - 30px); } .reason-end__cover { background-size: cover; background-position: center; min-width: 50%; } .reason-end__txt { display: flex; flex-direction: column; justify-content: flex-end; padding: 30px 20px 40px 30px; } .reason-end__txt p { margin-bottom: 0; } .specifications-grid { --bs-gutter-x: 11px; } .specification-item { background-color: #FAFAFA; font-size: 14px; letter-spacing: -0.42px; margin-bottom: 30px; height: calc(100% - 30px); transition: all .3s ease-in-out; } .specification-item:hover { background-color: #978666; color: var(--bs-white); transition: all .3s ease-in-out; } .specification-item img { width: 100%; height: 160px; object-fit: cover; } .specification-item-body { padding: 25px 14px 22px 24px; } .specification-item p { margin-bottom: 0; } .specification-item h5 { background-color: #978666; color: #fff; font-size: 12px; display: inline-block; line-height: 18px; letter-spacing: -0.36px; margin-bottom: 10px; padding: 4px 14px; transition: all .3s ease-in-out; } .specification-item:hover h5 { background-color: #1E1E1E; transition: all .3s ease-in-out; } .specification-item h6 { font-size: 14px; letter-spacing: -0.42px; line-height: 21px; margin-bottom: 0; } .lp-section__cover { background-size: cover; background-origin: content-box; width: 50%; } .lp-section--cta { font-weight: 400; letter-spacing: -0.48px; line-height: 24px; margin-bottom: 60px; padding-top: 100px; padding-bottom: 100px; } .lp-section--cta h3 { font-size: 24px; line-height: 36px; letter-spacing: -0.72px; margin-bottom: 30px; } .lp-section--cta strong, .lp-section--cta .h2 { color: #978666; } .lp-section--cta .h2 { display: block; margin-bottom: 15px; font-size: 36px; font-weight: 600; line-height: 54px; } .bef-af .before-after { margin: 0px } .lp-section--cta .h1 { letter-spacing: -1.44px; margin-bottom: 30px; } .lp-section--cta .btn { width: 100%; max-width: 350px; margin-bottom: 15px; } .lp-section--gallery { padding-top: 40px; padding-bottom: 80px; } .review-item:last-child { margin-bottom: 0; } .lp-section.lp-section--reasons { margin-top: 0; padding-top: 0; } .certificate { font-size: 14px; line-height: 21px; letter-spacing: -0.42px; margin-bottom: 45px; } .certificate img { margin-bottom: 15px; } .certificate p { padding: 0 15px; } .before-after-item { margin-bottom: 30px; } .before-after-item img { height: 260px; width: 100%; object-fit: cover; } .lp-section--case-studies { padding-top: 90px; } .case-item { background-size: cover; background-position: center; height: 230px; margin-bottom: 32px; } .before-after--item img { width: 100%; height: 240px; object-fit: cover; } .simple-gallery-grid .item { margin-bottom: 30px; } .simple-gallery-grid .item img { width: 100%; height: 270px; object-fit: cover; } .lp-section--studies .lp-section__heading { margin-bottom: 60px; } .studies-cover { width: 100%; height: calc(100% - 30px); object-fit: cover; } .studies-grid { margin-bottom: 20px; } .study-description-blk { background-color: #978666; color: var(--bs-white); font-size: 15px; height: 246px; margin-bottom: 30px; padding: 23px 28px; display: flex; flex-direction: column; justify-content: flex-end; } .study-description-blk.study--2, .study-description-blk.study--3 { background-color: #1E1E1E; } .popup-form .form-control { border: 1px solid #1E1E1E; color: #1E1E1E !important; height: 50px; } .popup-form .form-control:placeholder, .popup-form .form-control:focus { color: #999 !important; } .popup-form .wpcf7-spinner { position: absolute; } .popup-form .btn { padding: 9px 30px; } .lp-section--advantages { padding-bottom: 0; padding-top: 0; } .advantage-item { background-color: #FAFAFA; margin-bottom: 50px; min-height: calc(100% - 50px); padding: 37px 32px 29px; transition: all .3s ease-in-out; } .lp-section.lp-section--reviews-1 { padding-top: 0; } .orto_reviews .videos { margin-bottom: 0px; } .advantage-item .icon { width: 75px; height: 85px; display: block; margin-bottom: 20px; transition: all .3s ease-in-out; } .advantage-item h3 { font-size: 20px; line-height: normal; letter-spacing: -0.6px; margin-bottom: 20px; } .advantage-item:hover { background-color: #978666; color: #fff; transition: all .3s ease-in-out; } .advantage-item:hover .icon { filter: invert(1) brightness(100); transition: all .3s ease-in-out; } .reasons-item { background-color: #FAFAFA; font-size: 14px; font-weight: 400; line-height: 20.5px; height: calc(100% - 32px); margin-bottom: 32px; padding: 41px 20px 30px 28px; transition: all .3s ease-in-out; } .reasons-item h4 { font-size: 16px; font-weight: 700; line-height: 21px; margin-bottom: 11px; } .reasons-item .icon { background-color: #FAFAFA; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; right: 19px; margin-top: -17px; transition: all .3s ease-in-out; } .reasons-item .icon svg { width: 20px; height: 20px; fill: #fff; } .reasons-item:hover { color: var(--bs-white); background-color: #978666; } .reasons-item:hover .icon { background-color: #978666; } .reasons-item--xxl h3 { font-size: 20px; font-weight: 700; line-height: normal; letter-spacing: -0.6px; margin-bottom: 20px; } .reasons-item--xxl .icon { margin-bottom: 24px; margin-top: 0; justify-content: flex-start; width: auto; height: auto; } .reasons-item--xxl .icon img { width: 70px; height: 70px; object-fit: contain; } .reasons-item--xxl:hover .icon img { filter: invert(1) brightness(100); } .all-reviews { height: 500px; overflow: auto; } .review-item { margin-bottom: 30px; } .review-item::before { content: ""; position: absolute; left: 19px; top: 30px; width: 2px; height: 100%; background-color: #FAFAFA; } .review-item__author { width: 40px; min-height: 40px; height: 40px; object-fit: cover; object-position: center; margin-right: 30px; position: relative; z-index: 3; } .review-item__content { padding: 25px 14px 22px 24px; background-color: #FAFAFA; flex: 1; font-size: 14px; letter-spacing: -0.42px; } .review-item__content h5 { font-size: 16px; font-weight: 700; letter-spacing: -0.42px; line-height: 21px; margin-bottom: 0; } .review-item__content p { margin-bottom: 0; } .video-reviews__list { height: 100%; max-height: 510px; overflow: auto; } .video-reviews__item { padding: 15px; border-bottom: 1px solid #6d6d6d; } .video-reviews__item a { display: flex; column-gap: 15px; color: var(--bs-white); font-size: 14px; line-height: 24px; align-items: center; color: white; } .video-reviews__item .desc { overflow: hidden; text-overflow: ellipsis; display: -webkit-box!important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .lp-section--reviews2 { margin-bottom: 51px; } .lp-section--steps .lp-section__heading h2 { margin-bottom: 20px; } .steps-row { margin-bottom: 20px; } .step-item { font-size: 15px; background-color: #FAFAFA; margin-bottom: 30px; padding: 30px 22px 20px 30px; transition: all .3s ease-in-out; height: calc(100% - 30px); } .step-item h4 { font-size: 18px; line-height: normal; letter-spacing: -0.6px; margin-bottom: 10px; } .step-item .number { font-size: 100px; font-weight: 700; line-height: normal; letter-spacing: -3px; opacity: 0.1; margin-bottom: 7px; } .step-item:hover { background-color: #978666; color: var(--bs-white); } .lp-section--team .lp-section__heading { margin-bottom: 50px; } .row--team { margin-bottom: 20px; } .card--team-member { background-color: #FAFAFA; font-size: 14px; font-weight: 400; line-height: normal; margin-bottom: 30px; height: calc(100% - 30px); transition: all .3s ease-in-out; } .card--team-member .card-img-top { width: 100%; height: 200px; object-fit: cover; object-position: top; } .card--team-member h4 { font-size: 18px; font-weight: 600; line-height: normal; margin-bottom: 9px; } .card--team-member .card-body { padding: 21px 25px; } .card--team-member:hover { background-color: #978666; color: var(--bs-white); } .lp-section--faq { padding-bottom: 34px; } .lp-section--contact { background-size: cover; background-position: center; background-attachment: fixed; padding-top: 160px; padding-bottom: 160px; z-index: 1; font-size: 20px; font-weight: 400; line-height: 27.5px; } .lp-section--contact::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.75); z-index: -1; } .lp-section--contact h2 { font-size: 48px; font-weight: 700; line-height: normal; letter-spacing: -1.44px; margin-bottom: 40px; } .lp-section--contact p { margin-bottom: 36px; } .form-group p { margin-bottom: 22px; } .wpcf7-form-control-wrap { display: block; } .form-control { height: 77px; background-color: rgba(255, 255, 255, .3); border: none; border-radius: 0; color: var(--bs-white); padding: 10px 30px; } .form-control:focus { color: var(--bs-white); background-color: rgba(255, 255, 255, .3); box-shadow: none; } .form-control::placeholder { color: var(--bs-white); } .wpcf7-not-valid-tip { position: absolute; bottom: 0; left: 0; font-size: 12px; margin-left: 28px; } .lp-section--reviews2 .yt { max-width: 70%; margin-left: auto; margin-right: auto; height: 600px; } .footer-contacts__item { align-items: baseline; } .footer-contacts__item .icon { background-size: contain; background-position: center; background-repeat: no-repeat; margin-right: 15px; min-width: 18px; height: 17px; } .copyright { font-size: 12px; font-weight: 300; opacity: .3; } .fatade-social-holder { right: 0; bottom: 0; margin: 0 30px 30px; } .fatade-social-holder__trigger { width: 60px; height: 60px; float: right; display: flex; align-items: center; justify-content: center; background-size: 50px; background-position: center; background-repeat: no-repeat; background-color: #978666; border: 2px solid #978666; cursor: pointer; transition: all .4s ease-in-out; } .fatade-social-holder__trigger .button--close-icon { opacity: 0; transition: all .4s ease-in-out; } .fatade-social-holder__buttons-body { position: absolute; bottom: 60px; right: 0; z-index: -3; } .fatade-social-holder__buttons-body .social-button { display: flex; flex-direction: row-reverse; align-items: center; transition: all .3s ease-in; opacity: 0; } .fatade-social-holder__buttons-body .social-button__link { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; color: var(--bs-white); margin: 0 5px 5px 5px; } .social-button--facebook { transform: translate(0, 225px); } .social-button--instagram { transform: translate(0, 170px); } .social-button--telegram { transform: translate(0, 115px); } .social-button--viber { transform: translate(0, 60px); } .social-button__link svg { width: 24px; height: 24px; } .social-button__title { background-color: var(--bs-white); border-radius: 14px; color: var(--primary-color); font-size: 12px; line-height: 14px; padding: 5px 10px; white-space: nowrap; opacity: 0; z-index: -1; animation: fadeOutRight .2s ease-out forwards; } .fatade-social-holder.is-open .fatade-social-holder__trigger { background-position: 100px; background-color: var(--bs-white); transition: all .4s ease-in-out; } .fatade-social-holder.is-open .fatade-social-holder__trigger .button--close-icon { color: #978666; opacity: 1; transition: all .4s ease-in-out; } .fatade-social-holder.is-open .social-button { transform: translate(0, 0); opacity: 1; } .fatade-social-holder.is-open .social-button--facebook { transition: all .4s ease-in; } .fatade-social-holder.is-open .social-button--instagram { transition: all .4s ease-in; } .fatade-social-holder.is-open .social-button--telegram { transition: all .4s ease-in; } .fatade-social-holder.is-open .social-button--viber { transition: all .4s ease-in; } .social-button:hover .social-button__title { animation: fadeInRight .4s ease-in 1 forwards; } .fatade-social-holder.is-open .fatade-social-holder__buttons-body { z-index: 1; } @-webkit-keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes fadeOutRight { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes fadeOutRight { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @media (min-width: 1400px) { .container { max-width: 1440px; } } .row { --bs-gutter-x: 30px; } a { text-decoration: none; transition: all .4s ease-in-out; } .h4 { font-size: 20px; font-weight: 400; line-height: 30px; } .has-background { background-size: cover; background-position: center; } .btn:not(.btn-link) { border-radius: 0; font-size: 18px; font-weight: 700; line-height: 30px; letter-spacing: -0.6px; text-transform: uppercase; padding: 17px 30px; } .btn-dark { --bs-btn-bg: #1E1E1E; --bs-btn-border-color: #1E1E1E; --bs-btn-focus-shadow-rgb: none; --bs-btn-active-shadow: none; --bs-btn-disabled-bg: #1E1E1E; --bs-btn-disabled-border-color: #1E1E1E; --bs-btn-hover-bg: #978666; --bs-btn-hover-border-color: #978666; } .btn-warning { --bs-btn-bg: #978666; --bs-btn-border-color: #978666; --bs-btn-color: #fff; --bs-btn-focus-shadow-rgb: none; --bs-btn-active-shadow: none; --bs-btn-disabled-bg: #978666; --bs-btn-disabled-border-color: #978666; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #000; --bs-btn-hover-border-color: #000; } .btn-outline-dark { --bs-btn-color: #1E1E1E; --bs-btn-border-color: #1E1E1E; --bs-btn-hover-bg: #1E1E1E; --bs-btn-hover-border-color: #1E1E1E; --bs-btn-active-bg: #1E1E1E; --bs-btn-active-border-color: #1E1E1E; --bs-btn-disabled-color: #1E1E1E; --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: #1E1E1E; } .btn-light { --bs-btn-hover-bg: #978666; --bs-btn-hover-border-color: #978666; } .btn-play, .btn-play-modal { padding: 0 !important; border-radius: 50% !important; opacity: .7; transition: all .4s cubic-bezier(0.175, 0.885, 0.32, 1.275); width: 110px; height: 110px; top: 50%; left: 50%; margin: -55px; z-index: 99; } .btn-play:hover, .btn-play-modal:hover { opacity: 1; transition: all .4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .btn:active { border-color: transparent !important; } @media (max-width: 767.98px) { .btn:not(.btn-link) { min-width: 100%; } .btn-play, .btn-play-modal { min-width: auto !important; } } @media (max-width: 575.98px) { .btn:not(.btn-link) { font-size: 14px; } } @media (max-width: 1199.98px) { .lp-showcase__actions { flex-wrap: wrap; row-gap: 20px; } .lp-showcase__actions li { margin: 0; min-width: 100%; } .lp-showcase__actions .btn { width: 100%; } .lp-section__heading, .lp-section__related-txt h4 { font-size: 18px; } } @media (max-width: 991.98px) { .lp-showcase { padding-top: 88px; } .lp-showcase__video { min-height: 300px; margin-top: 40px; } #contactForm { margin-top: 40px; } .lp-section__heading br { display: none; } .reason-end__cover { background-position: top; } .lp-section__cover { width: 40%; } .lp-section--contact { background-attachment: scroll; } } @media (max-width: 767.98px) { .lp-showcase { padding-top: 48px; } .lp-section { padding-top: 30px; padding-bottom: 30px; } .lp-section__cover { width: 100%; opacity: .1; } .lp-section--cta .container { position: relative; z-index: 3; } .lp-section--gallery .container { max-width: 100%; } .lp-section--gallery .lp-section__heading .col-12 { padding: 0 15px; } .steps-row { justify-content: center; } .steps-row .col { min-width: 33.3333%; flex: 0 0 33.3333%; } .card--team-member h4 { font-size: 17px; } .lp-section--contact h2 br, .lp-section__heading br { display: none; } .lp-section--contact { background-attachment: scroll; padding-top: 100px; padding-bottom: 90px; } } @media (max-width: 575.98px) { .lp-section__heading h2, .lp-section__heading .h1 { font-size: 30px; line-height: 40px; } .lp-showcase { padding-top: 28px; padding-bottom: 30px; } .lp-showcase h1 { margin-bottom: 21px; } .lp-showcase__video { margin-top: 30px; min-height: 160px; } .lp-section { padding-top: 40px; padding-bottom: 40px; } .lp-section__heading, .lp-section__related-txt { font-size: 15px; line-height: 30px; } .lp-section__heading h2 { margin-bottom: 10px; } .lp-section__related-txt p, .lp-section--team .lp-section__heading, .lp-section--studies .lp-section__heading { margin-bottom: 26px; } .study-description-blk { background-color: #978666 !important; height: auto; } .ratio-21x9 { --bs-aspect-ratio: 56.25%; } .lp-section--gallery { padding-bottom: 0; } .advantage-item { min-height: auto; margin-bottom: 30px; } .lp-section--reasons { padding-top: 0; padding-bottom: 0; } .reasons-gallery { margin-bottom: 0; } .reasons-grid { --bs-gutter-x: 15px; } .reason, .reason-end__txt { font-size: 16px; padding: 20px; } .reason img { max-width: 60px; margin-bottom: 20px; } .reason-end { flex-wrap: wrap; } .reason-end__cover { min-width: 100%; height: 190px; } .simple-gallery-grid .item img { height: 170px; } .lp-section--steps .lp-section__heading h2, .row--team { margin-bottom: 10px; } .steps-row { margin-bottom: 0px; } .steps-row .col { min-width: 50%; flex: 0 0 50%; } .lp-section--cta { margin-bottom: 0; } .lp-section--cta h3 { font-size: 18px; line-height: 30px; } .lp-section--contact { padding-top: 60px; padding-bottom: 20px; font-size: 18px; } .form-control { height: 57px; } .form-group { margin-bottom: 20px; } .lp-section--contact p { margin-bottom: 0; } } @-webkit-keyframes roll_call { 0%,12%,18%{ -webkit-transform:rotate(-10deg); transform:rotate(-10deg) } 6%{ -webkit-transform:rotate(10deg); transform:rotate(10deg) } 24%{ -webkit-transform:rotate(0); transform:rotate(0) } } @-moz-keyframes roll_call { 0%,12%,18%{ -webkit-transform:rotate(-10deg); -moz-transform:rotate(-10deg); transform:rotate(-10deg) } 6%{ -webkit-transform:rotate(10deg); -moz-transform:rotate(10deg); transform:rotate(10deg) } 24%{ -webkit-transform:rotate(0); -moz-transform:rotate(0); transform:rotate(0) } } @-o-keyframes roll_call { 0%,12%,18%{ -webkit-transform:rotate(-10deg); -o-transform:rotate(-10deg); transform:rotate(-10deg) } 6%{ -webkit-transform:rotate(10deg); -o-transform:rotate(10deg); transform:rotate(10deg) } 24%{ -webkit-transform:rotate(0); -o-transform:rotate(0); transform:rotate(0) } } @keyframes roll_call { 0%,12%,18%{ -webkit-transform:rotate(-10deg); -moz-transform:rotate(-10deg); -o-transform:rotate(-10deg); transform:rotate(-10deg) } 6%{ -webkit-transform:rotate(10deg); -moz-transform:rotate(10deg); -o-transform:rotate(10deg); transform:rotate(10deg) } 24%{ -webkit-transform:rotate(0); -moz-transform:rotate(0); -o-transform:rotate(0); transform:rotate(0) } } .lp-section--one .fw-bold strong { color: #978666; } .lp-section--specifications h2 span { color: #978666; text-transform: capitalize; display: block; } .lp-section--gallery.bg-dark h2 { margin-bottom: 30px; line-height: 68px; } .lp-section--gallery.bg-dark h2 span { color: #978666; } .lp-section--gallery.bg-dark { padding-top: 80px; padding-bottom: 20px; margin-top: 50px; } .lp-section--cta-bottom { background-color: #24262d; padding: 70px 0; } .lp-section--cta-bottom h4 { text-align: center; font-size: 28px; line-height: 1.2; font-weight: 600; } .lp-section--cta-bottom .d-flex { max-width: 70%; margin-left: auto; margin-right: auto; color: white; margin-top: 30px; text-align: center; margin-bottom: 10px; } .section_hero .row { align-items: center; margin-bottom: 10px; } .section_hero .col-lg-7 { padding-right: 50px; } .section_hero ul { padding-left: 0; list-style: none; margin-bottom: 50px; margin-top: 20px; } .section_hero ul li { position: relative; padding-left: 35px; } .section_hero ul li:before { background-image: url('/wp-content/uploads/2023/08/check-square-svgrepo-com.svg'); content: ''; width: 24px; height: 24px; position: absolute; left: 0px; background-size: cover; top: 6px; } .lp-section .yt { border-radius: 0; } .video-reviews.row { margin: 0; margin-bottom: 30px; } .lp-section--reviews2 .video-reviews.row { margin-bottom: 0; } .lp-section.lp-section--reasons { padding-top: 20px; } .lp-section.lp-section--reasons h2 span { color: #978666; } .lp-section.lp-section--specifications { padding-top: 30px; } .lp-section.lp-section--one { padding-top: 100px; } .lp-section--reviews-1 .video-reviews.row { margin-bottom: 30px; } .lp-section-faq-accordion h2 { text-align: center; margin-bottom: 0px; } .lp-section-faq-accordion .accordion-item { margin-bottom: 0; } .lp-section-faq-accordion .accordion .icon { top: 22px; } .lp-section-faq-accordion, .lp-section--studies, .lp-section--reviews2 { padding-top: 30px; } .lp-section--about-payment { background-repeat: no-repeat; background-size: cover; color: white; } .lp-section--about-payment h2 { color: white; line-height: 64px; margin-bottom: 30px; } .button_rate { margin-top: 50px; max-width: 50%; } .lp-section--about-payment { margin-bottom: 60px; } .lp-section--advantages h2 { text-align: center; color: #000; margin-bottom: 30px; } .lp-section--advantages h2 span { color: #978666; text-transform: capitalize; } .lp-section--advantages h4 { font-size: 20px; line-height: 30px; text-align: center; color: #978666; margin-bottom: 10px; } .lp-section--advantages p { text-align: center; font-size: 18px; margin-bottom: 0; } .lp-section--advantages .col-md-3 { border: 1px solid #dedede; background: #FAFAFA; -ms-flex: 0 0 calc(25% - 30px); flex: 0 0 calc(25% - 30px); max-width: calc(25% - 30px); margin: 15px; position: relative; } .lp-section--advantages .col-md-3 .advantages_item { padding: 40px 5px 25px; } .lp-section--advantages .nr { position: absolute; left: 0; top: -10px; font-weight: 900; font-size: 35px; color: #e1e1e1; } strong { font-weight: 600; } .del_price strong { font-weight: 700; font-size: 32px; } .del_price { color: #b1b1b1; font-size: 16px; } .del_price del { font-size: 21px; font-weight: 600; } .price_offer { text-transform: uppercase; color: #ebc988; font-weight: 600; margin-bottom: 10px; display: block; } .lp-section--cta .col-md-6 p { font-size: 18px; } /* ---------- „Testimoniale ortodonție” ---------- */ /* Spațiul dintre rândurile galeriei (în original venea din gutter-ul pe verticală al grilei). */ .orto-testimonials .simple-gallery-grid > * { margin-bottom: 30px; } /* * Butoanele sociale de sub formular. Regulile sunt din style.css-ul vechi * (`.cta_23`), care nu e încărcat în tema nouă: trei coloane cu 30px mai * înguste decât o treime, în rândul de 70% dat de `.lp-section--cta-bottom`. */ .orto-testimonials .whatsapp_button { background-color: #25d366; } .orto-testimonials .phone_button { background-color: #c43c3c; } .orto-testimonials .messenger_button { background-color: #186ae6; } .orto-testimonials .cta_23 .col-lg-4 { flex: 0 0 calc(33.333333% - 30px); max-width: calc(33.333333% - 30px); margin: 0 15px; padding: 0; transition: opacity 0.3s; } .orto-testimonials .cta_23 .col-lg-4:hover { opacity: 0.8; } .orto-testimonials .cta_23 a { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 12px 0; color: #fff; font-size: 18px; font-weight: 600; text-decoration: none; } .orto-testimonials .cta_23 a img { width: 28px; height: auto; } .orto-testimonials .cta_23 .phone_button a img { width: 23px; } /* Pe telefon butoanele se așază unul sub altul, pe toată lățimea. */ @media (width <= 767px) { .orto-testimonials .cta_23 { flex-direction: column; gap: 15px; } .orto-testimonials .cta_23 .col-lg-4 { flex-basis: auto; max-width: 100%; margin: 0; } } /* * Formularul cu fundal fix, pe ecrane sub 992px: textul deasupra, formularul * dedesubt, fiecare pe toată lățimea. Rândul e un `.d-flex` fără wrap, iar * sub 992px coloanele `col-lg-6` au 100% fiecare — se strângeau una lângă * alta. Pe „Aparate dentare” formularul ajungea de 132px la 375; pe * „Testimoniale” câmpurile de 440px lățeau pagina la 712px. */ @media (width <= 991.98px) { .lp-section--contact .d-flex { flex-direction: column; gap: 40px; } .lp-section--contact .d-flex > [class*="col-"] { max-width: 100%; padding-inline: 15px; } } /* * Popup-ul de programare pe paginile orto. Grila Bootstrap portată * (orto-grid.css) și regula de buton de mai sus sunt în acest layer, care * bate componentele temei — deci prindeau și formularul din popup: rândul * devenea `flex` fără wrap, coloanele ieșeau din popup, iar butonul avea * minimum 440px. Aici popup-ul revine la grila și butonul lui. */ .modal .wpcf7-form .d-flex { display: grid; } .modal .wpcf7-form .d-flex > [class*="col-"] { max-width: none; padding-inline: 0; } .modal .wpcf7-form .wpcf7-submit { width: 100%; min-width: 0; max-width: none; margin: 0; } /* * Același formular, în secțiunea cu fundal fix: câmpurile unul sub altul, * cum le cere designul (Nume, Telefon, Mesaj, TRIMITE). Markup-ul noului * formular „Orto” are un rând `.d-flex`, pe care grila portată îl punea pe * orizontală și lățea pagina la 2664px. */ .lp-section--contact .wpcf7-form .d-flex { display: block; } .lp-section--contact .wpcf7-form .d-flex > [class*="col-"] { max-width: none; padding-inline: 0; } /* * Playlistul „Aparițiile media”, aliniat cu celelalte două de pe pagină. * În tema veche rândul lui păstra marginile negative de -15px ale grilei și * ieșea lateral cât spațiul containerului, spre deosebire de restul. */ .lp-section--case-studies .video-media.row { margin-inline: 0; } /* * O imagine pe rând în galeria de pe telefon. Regula stătea în sections.css, * în afara layerelor, ca să bată `:where(.orto-page…) .col-6` din grilă; aici * e în layerul paginii, deci nu mai depinde de asta. */ @media (width <= 640px) { .row.simple-gallery-grid .col-6 { flex: 0 0 100.0%; max-width: 100.0%; /* orto.css pune `margin: 5px` pentru varianta pe două coloane; la 100% marginea laterală împingea imaginea 5px în afara ecranului. */ margin-inline: 0; } } }