/* A76 foglalómotor: a Salonic adatlapjának (guestData) tömör, egy mobilképernyőre elférő megjelenése, az A76 arculatában. * * A gyógytornászom.hu (gy.css), a Medical Piercing (mp.css) és a MOSAIC (mosaic.css) Salonic-stíluslapjának lényegét veszi át: nincs Salonic-fejléc, * borítókép, lábléc, Facebook-belépés és Salonic-sütisáv, a vezetéknév és a keresztnév egy sorban van, az összegzés három tömör sor, a hozzájárulás szövege rövid, * a reCAPTCHA-jelvény helyett egysoros tájékoztatás van. Telefonon a megjegyzés mező nem látszik (a Salonic-levélben a vendég úgyis tud írni). * * ELKÉSZÍTVE, DE NEM ÉLES. Bekapcsolás (csak kifejezett kérésre, MINDKÉT Salonic-fiókban: a76 = Oktogon, a76-moricz = Móricz): * Salonic > Beállítások > Online bejelentkezés megjelenés > "Egyedi CSS URL": * https://www.a76.hu/wp-content/plugins/a76-foglalomotor/assets/salonic/a76.css (a WordPress-bővítmény szolgálja ki; a foglaló ezt a -ből ismeri fel) * A Salonic "Egyedi CSS kód" mezőjében lévő rövid szabály (a sütisáv elrejtése) maradhat. Visszavonás: az "Egyedi CSS URL" mező kiürítése. * * Csak az adatlapra hat (#page-booking-guestData-body); a Salonic többi oldalát nem változtatja. * Elrejtett szövegek (a gyógytornászom.hu-s döntés szerint; a végén, a "VISSZAKAPCSOLÁS" részben törölhetők, hogy újra látszódjanak): * - a hozzájárulás "...és kifejezetten hozzájárulásomat adom, hogy a megadott adataimat a(z) A76 Barber Queens saját célra kezelje..." része, * - "A * -gal jelölt mezők kitöltése kötelező!", "A foglalásodat lemondani ...-ig van lehetőséged." (a lemondási határidő a visszaigazoló levélben benne van). * Kipróbálás a valódi oldalon, foglalás nélkül: node tools/salonic-css-proba.mjs --css salonic/a76.css --js */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap'); #page-booking-guestData-body { --a76-fekete: #121212; --a76-sarga: #ffcc00; --a76-kozep: #585c56; --a76-halvany: #8a8d88; --a76-vonal: #e3e3e3; --a76-hiba: #990000; --a76-krem: #fff6cc; background: #fff !important; color: var(--a76-fekete) !important; font-family: Montserrat, montserratmedium, "Helvetica Neue", Arial, sans-serif !important; } #page-booking-guestData-body input, #page-booking-guestData-body button, #page-booking-guestData-body label, #page-booking-guestData-body textarea, #page-booking-guestData-body .form-control { font-family: inherit !important; } #page-booking-guestData-body h3, #page-booking-guestData-body h4, #page-booking-guestData-body strong { font-family: inherit !important; color: var(--a76-fekete) !important; letter-spacing: 0 !important; } /* ===== a foglaló saját fejlécet ad (lépéssáv + vissza), ezért a Salonic fejléce, borítóképe, menüje, lábléce és sütisávja nem kell ===== */ #page-booking-guestData-body #sectionsNav, #page-booking-guestData-body .navbar, #page-booking-guestData-body .navbar-collapse, #page-booking-guestData-body .page-header, #page-booking-guestData-body .header-filter, #page-booking-guestData-body footer, #page-booking-guestData-body .footer, #page-booking-guestData-body .cc-window, #page-booking-guestData-body .cc-revoke { display: none !important; } #page-booking-guestData-body .main, #page-booking-guestData-body .main-raised, #page-booking-guestData-body .wrapper { margin-top: 0 !important; padding-top: 0 !important; box-shadow: none !important; background: transparent !important; } #page-booking-guestData-body #widget-booking-container, #page-booking-guestData-body #widget-booking-guestData { margin: 0 !important; padding: 0 !important; background: transparent !important; } #page-booking-guestData-body .container { margin: 0 !important; padding-top: 6px !important; padding-bottom: 0 !important; background: transparent !important; } #page-booking-guestData-body .container { max-width: none !important; padding-left: 12px !important; padding-right: 12px !important; } #page-booking-guestData-body .section { padding-top: 0 !important; padding-bottom: 4px !important; box-shadow: none !important; background: transparent !important; } #page-booking-guestData-body .py-5, #page-booking-guestData-body .pt-5 { padding-top: 6px !important; } #page-booking-guestData-body .pb-5 { padding-bottom: 6px !important; } /* a Bootstrap sor negatív margója a keskeny keretben vízszintes görgetést okozna */ #page-booking-guestData-body .guest-data-container .row, #page-booking-guestData-body .row { margin-left: 0 !important; margin-right: 0 !important; } #page-booking-guestData-body .row > [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; } #page-booking-guestData-body form.form { margin-bottom: 0 !important; } #page-booking-guestData-body .order-lg-1 { margin-top: 8px !important; } html { scrollbar-width: none; } html::-webkit-scrollbar { display: none; } /* a Facebook-belépés és a "vagy" elválasztó nem kell a foglaláshoz */ #page-booking-guestData-body .fb-login-button, #page-booking-guestData-body .divider-line, #page-booking-guestData-body .panel-body .text-center.py-4 { display: none !important; } /* ===== kártyák, űrlapmezők ===== */ #page-booking-guestData-body .card { margin: 0 0 8px !important; border: 1.5px solid var(--a76-vonal) !important; border-radius: 12px !important; box-shadow: none !important; background: #fff !important; } #page-booking-guestData-body .card-body { padding: 10px 12px !important; } #page-booking-guestData-body hr { margin: 8px 0 !important; border-top: 1px solid var(--a76-vonal) !important; } #page-booking-guestData-body .my-3 { margin-top: 0 !important; margin-bottom: 4px !important; } #page-booking-guestData-body .booking-time-remain-container { margin: 0 0 2px !important; padding: 6px 10px; border-radius: 8px; background: var(--a76-krem); font-size: 12px; color: var(--a76-fekete) !important; } #page-booking-guestData-body .booking-time-remain-container .countdown { font-weight: 700; font-variant-numeric: tabular-nums; } #page-booking-guestData-body .form-group { margin: 0 0 6px !important; padding-top: 0 !important; } #page-booking-guestData-body .control-label, #page-booking-guestData-body .form-group label:not(.form-check-label) { position: static !important; transform: none !important; display: block; margin: 0 0 2px !important; line-height: 1.25 !important; font-size: 12px !important; font-weight: 700 !important; color: var(--a76-fekete) !important; } #page-booking-guestData-body .control-label .required, #page-booking-guestData-body span.required { color: var(--a76-hiba) !important; } #page-booking-guestData-body .form-control { height: 38px !important; min-height: 0 !important; padding: 4px 10px !important; font-size: 16px !important; line-height: 1.3 !important; /* 16 px: kisebb betűnél az iPhone ránagyít */ color: var(--a76-fekete) !important; background: #fff !important; background-image: none !important; border: 1.5px solid #cfcfcf !important; border-radius: 8px !important; box-shadow: none !important; } #page-booking-guestData-body textarea.form-control { height: 40px !important; resize: vertical; } #page-booking-guestData-body .form-control:focus { border-color: var(--a76-fekete) !important; outline: 3px solid var(--a76-sarga) !important; outline-offset: 0 !important; } #page-booking-guestData-body .has-error .form-control { border-color: var(--a76-hiba) !important; } #page-booking-guestData-body .iti { width: 100%; } #page-booking-guestData-body .iti input.form-control { padding-left: 90px !important; } #page-booking-guestData-body .alert-danger { margin: 4px 0 0 !important; padding: 6px 10px !important; font-size: 12px !important; background: #f6e1e1 !important; color: var(--a76-hiba) !important; border: 0 !important; border-radius: 8px !important; box-shadow: none !important; } /* vezetéknév + keresztnév egy sorban: a mezőket tartalmazó doboz rugalmas sor */ #page-booking-guestData-body .panel-body > div { display: flex !important; flex-wrap: wrap !important; column-gap: 8px; font-size: 0 !important; line-height: 0 !important; color: var(--a76-kozep); } #page-booking-guestData-body .panel-body > div > * { flex: 0 0 100%; max-width: 100%; font-size: 12px; line-height: 1.35; } #page-booking-guestData-body .panel-body > div > .form-group:has(#GuestDataForm_guestLastName), #page-booking-guestData-body .panel-body > div > .form-group:has(#GuestDataForm_guestFirstName) { flex: 1 1 0; min-width: 0; } /* kupon-sor: a "Kód ellenőrzése" gomb a mező mellett, függőlegesen középen */ #page-booking-guestData-body .input-group { align-items: center !important; flex-wrap: nowrap !important; } #page-booking-guestData-body .input-group::before, #page-booking-guestData-body .input-group::after { display: none !important; } #page-booking-guestData-body .input-group > .form-control { margin: 0 !important; } #page-booking-guestData-body .input-group-prepend { margin: 0 !important; align-self: center !important; display: flex !important; align-items: center !important; } #page-booking-guestData-body .input-group-prepend .input-group-text { padding: 0 0 0 8px !important; margin: 0 !important; background: none !important; border: 0 !important; line-height: 1 !important; } #page-booking-guestData-body .btn-check-coupon-code { margin: 0 !important; padding: 8px 10px !important; border: 1.5px solid var(--a76-fekete) !important; border-radius: 8px !important; background: #fff !important; color: var(--a76-fekete) !important; box-shadow: none !important; font-size: 11px !important; font-weight: 700 !important; } /* ===== hozzájárulás és hírlevél: kis betű, a pipa a mezők bal szélén, a szöveg mellette folyamatosan, behúzva; a hozzájárulás szövege rövid ===== */ #page-booking-guestData-body .form-check { margin: 2px 0 4px !important; padding-left: 0 !important; } #page-booking-guestData-body .form-check label { display: block !important; position: relative !important; padding-left: 26px !important; min-height: 20px; font-size: 11px !important; line-height: 1.4 !important; color: var(--a76-kozep) !important; font-weight: 400 !important; } #page-booking-guestData-body .form-check label > input[type=checkbox] { position: absolute !important; left: 0 !important; top: 1px !important; margin: 0 !important; width: 18px; height: 18px; opacity: 1 !important; accent-color: var(--a76-fekete); } #page-booking-guestData-body .form-check a, #page-booking-guestData-body .form-check a.policy { color: var(--a76-fekete) !important; font-weight: 700 !important; text-decoration: underline; text-underline-offset: 2px; } /* a hozzájárulás: "Megismertem és elfogadom az adatvédelmi tájékoztatót és a foglalási szabályzatot. *" (a "...és kifejezetten hozzájárulásomat adom..." rész el van rejtve) */ #page-booking-guestData-body .form-check:not(.newsletter-container) label { font-size: 0 !important; line-height: 0 !important; } #page-booking-guestData-body .form-check:not(.newsletter-container) label::before { content: 'Megismertem és elfogadom az '; font-size: 11px; line-height: 1.4; color: var(--a76-kozep); } #page-booking-guestData-body .form-check:not(.newsletter-container) label > a.policy { font-size: 11px !important; line-height: 1.4 !important; } #page-booking-guestData-body .form-check:not(.newsletter-container) label > a.policy:nth-of-type(2)::before { content: 'és a '; text-decoration: none; display: inline-block; color: var(--a76-kozep); font-size: 11px; font-weight: 400; margin: 0 3px 0 4px; } #page-booking-guestData-body .form-check:not(.newsletter-container) label > a.policy:nth-of-type(2)::after { content: '.'; display: inline-block; text-decoration: none; color: var(--a76-kozep); font-size: 11px; } #page-booking-guestData-body .form-check:not(.newsletter-container) label > span.required { font-size: 11px !important; line-height: 1.4 !important; color: var(--a76-hiba) !important; margin-left: 4px; } /* hirlevel-feliratkozas ("Szeretnek e-mailben ertesitest kapni az akciokrol..."): az adatlapon nem kerjuk (a tobbi urlapbol is kikerult), csak az adatvedelmi hozzajarulas marad; a kihagyott jelolonegyzet erteke 0 marad */ #page-booking-guestData-body .newsletter-container { display: none !important; } /* a "* kötelező" mondat, a lemondási sor és az elválasztó: nem kell (VISSZAKAPCSOLÁS: lásd a fájl végén) */ #page-booking-guestData-body .panel-body > div > span.d-block.mb-3 { display: none !important; } #page-booking-guestData-body .panel-body > div > hr { display: none !important; } /* ===== összegzés: 3 tömör sor (szolgáltatás, nap + idő + időtartam + ár, szakember + szalon), fotó nélkül ===== */ #page-booking-guestData-body .order-lg-2 .card { margin: 0 0 6px !important; } #page-booking-guestData-body .order-lg-2 .card-body { display: flex !important; flex-wrap: wrap !important; align-items: baseline !important; column-gap: 8px !important; row-gap: 1px !important; padding: 8px 12px !important; font-size: 12px !important; line-height: 1.3 !important; } #page-booking-guestData-body .order-lg-2 .card-body > * { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } #page-booking-guestData-body .order-lg-2 hr, #page-booking-guestData-body .order-lg-2 .divider-line { display: none !important; } #page-booking-guestData-body .order-lg-2 img, #page-booking-guestData-body .order-lg-2 a:has(> img) { display: none !important; } #page-booking-guestData-body .order-lg-2 .card-body > ul, #page-booking-guestData-body .order-lg-2 .card-body > ul > li { display: contents !important; } #page-booking-guestData-body .order-lg-2 .card-body li > strong { order: 1; flex: 0 0 100%; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px !important; font-weight: 700 !important; } #page-booking-guestData-body .order-lg-2 .card-body > h4 { order: 2; font-size: 12px !important; font-weight: 700 !important; margin: 0 !important; white-space: nowrap; } #page-booking-guestData-body .order-lg-2 .card-body li > div { order: 3; display: flex !important; gap: 8px; font-size: 12px !important; white-space: nowrap; } #page-booking-guestData-body .order-lg-2 .card-body li > div * { font-size: 12px !important; white-space: nowrap; } #page-booking-guestData-body .order-lg-2 .card-body > .d-flex { order: 4; flex: 0 0 100%; display: flex !important; } #page-booking-guestData-body .order-lg-2 .card-body > .d-flex .d-flex.flex-column { flex-direction: row !important; align-items: baseline; gap: 6px; } #page-booking-guestData-body .order-lg-2 .card-body > .d-flex h4, #page-booking-guestData-body .order-lg-2 .card-body > .d-flex span { font-size: 12px !important; margin: 0 !important; line-height: 1.3 !important; } #page-booking-guestData-body .order-lg-2 .card-body > .d-flex h4 { font-weight: 700 !important; } #page-booking-guestData-body .text-muted { color: var(--a76-kozep) !important; } /* ===== "Foglalás elküldése": az A76 sárga, kerek gomb; a reCAPTCHA-jelvény helyett egysoros tájékoztatás (a Google feltétele) ===== */ #page-booking-guestData-body .btn-submit-booking, #page-booking-guestData-body .salonic-gradient-button { min-height: 0 !important; height: 44px !important; margin-top: 4px !important; padding: 0 16px !important; border: 0 !important; border-radius: 99px !important; background: var(--a76-sarga) !important; background-image: none !important; color: var(--a76-fekete) !important; box-shadow: none !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; } #page-booking-guestData-body .btn-submit-booking[disabled] { opacity: .45 !important; } #page-booking-guestData-body .btn-submit-booking:focus-visible { outline: 3px solid var(--a76-fekete) !important; outline-offset: 2px; } #page-booking-guestData-body .grecaptcha-badge { visibility: hidden !important; position: absolute !important; bottom: 0 !important; } #page-booking-guestData-body .panel-body > div::after { content: 'reCAPTCHA védi; a Google adatvédelmi irányelvei és ÁSZF-je érvényes.'; flex: 0 0 100%; display: block; margin-top: 6px; font-size: 9.5px; line-height: 1.3; color: var(--a76-halvany); text-align: center; } /* ===== telefon (a foglaló keskeny keretében): minden együtt látszik, görgetés nélkül ===== */ @media (max-width: 599px) { #page-booking-guestData-body .form-group:has(#GuestDataForm_guestComment) { display: none !important; } /* a megjegyzés telefonon nem látszik (VISSZAKAPCSOLÁS: lásd a fájl végén) */ #page-booking-guestData-body .container { padding-left: 10px !important; padding-right: 10px !important; } #page-booking-guestData-body .form-control { height: 36px !important; padding: 2px 10px !important; } #page-booking-guestData-body .iti input.form-control { padding-left: 88px !important; } #page-booking-guestData-body .form-group { margin-bottom: 6px !important; } #page-booking-guestData-body .control-label, #page-booking-guestData-body .form-group label:not(.form-check-label) { font-size: 11.5px !important; margin-bottom: 1px !important; } #page-booking-guestData-body .order-lg-1 .card-body { padding: 8px 10px !important; } #page-booking-guestData-body .order-lg-2 .card-body { padding: 6px 10px !important; } #page-booking-guestData-body .btn-submit-booking { height: 42px !important; } #page-booking-guestData-body .booking-time-remain-container, #page-booking-guestData-body .booking-time-remain-container * { font-size: 11px !important; line-height: 1.2 !important; white-space: nowrap; } #page-booking-guestData-body .form-check { margin: 2px 0 3px !important; } } /* asztalon (a foglaló keretében) kicsit szellősebb */ @media (min-width: 600px) { #page-booking-guestData-body .form-group { margin-bottom: 8px !important; } #page-booking-guestData-body .form-control { height: 40px !important; } #page-booking-guestData-body textarea.form-control { height: 56px !important; } #page-booking-guestData-body .card { margin-bottom: 10px !important; } #page-booking-guestData-body .card-body { padding: 12px 14px !important; } #page-booking-guestData-body .form-check { margin: 4px 0 6px !important; } } /* ===== VISSZAKAPCSOLÁS: ha valamelyik rejtett szöveg vagy mező mégis kell, az alábbi sor (vagy a fentiek közül az adott szabály) törlésével / felülírásával újra látszik ===== */ /* - a megjegyzés mező telefonon: a "@media (max-width: 599px)" blokk első szabálya (.form-group:has(#GuestDataForm_guestComment)) * - a "* kötelező" mondat és a lemondási határidő: a "span.d-block.mb-3" és a ".panel-body > div > hr" szabály * - a hírlevél-feliratkozás jelölőnégyzete: a ".newsletter-container { display: none }" szabály (a "hozzájárulás" rész végén) * - a teljes hozzájárulási szöveg: a ".form-check:not(.newsletter-container) label" szabályok a "hozzájárulás" részben (font-size: 0 és a ::before / ::after tartalmak) */