@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400;500;600;700&display=swap'); /* ===== Brand variables ===== Same color, two forms: --brand for solid use, --brand-rgb for rgba() alpha variants (plain CSS can't derive one from the other, so both are kept in sync by hand). */ :root { --brand: #7d5a58; --brand-rgb: 125, 90, 88; --brand-dark: #6e4f4d; --brand-darker: #5e4240; --cream: #f7f6f3; --radius: 4px; } /* ===== Typography — brand font everywhere ===== Strategy: 1) Set the font on so the ENTIRE page inherits it. This automatically covers every plain text element (divs, p, span, td, dt, labels, the cookie sentence, etc.) without listing them — they have no font of their own, so they inherit. Beats SimplyBook's own `body{font-family:Avenir}` via !important. 2) SimplyBook hard-codes `font-family:Mulish` (and Avenir) directly on a set of UI selectors below — those DON'T inherit, so each is re-targeted. !important beats SB's non-important rules; for SB's own !important rules we reuse their exact selector so source order (custom CSS loads last) decides. Icon fonts are deliberately NOT touched: Font Awesome (, .fas/.far/ .fab/.fal) and Flaticon set their own font-family, and glyph :before/:after pseudo-elements keep their explicit icon font — so icons render correctly. */ body { font-family: "Fira Sans", Arial, sans-serif !important; } /* SimplyBook forces Mulish/Avenir here (non-important) — override with !important */ .btn, .cap, .modal-title, .custom-form label.control-label, .sb-widget-form .title, #header .nav-wrapper #sb_menu .nav li a, #client-login .section_top #cs_register_or_login_tabs ul li, #sb-timeline #steps #sb_back_button span:not(.fa), #sb-timeline #steps #steps-content #sb_booking_content .item .tab .name, .datepicker.dropdown-menu td, .datepicker.dropdown-menu th { font-family: "Fira Sans", Arial, sans-serif !important; } /* SimplyBook forces these WITH !important — reuse exact selectors so source order wins */ #sb-timeline #steps #steps-content #sb_booking_content .item .tab .txt.short *, #main-content .txt span { font-family: "Fira Sans", Arial, sans-serif !important; } /* ===== Language switcher (ΕΛ / EN) ===== The button itself is INJECTED by the companion JavaScript (it can't be created in pure CSS); this only styles it. Sits top-center to clear the hamburger (left) and cart (right). Adjust top/left if it overlaps anything on your layout. */ #latros-lang-switch { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 99999; display: flex; gap: 2px; padding: 2px; border: 1px solid var(--brand); border-radius: 999px; background: rgba(255, 255, 255, 0.85); box-shadow: 0 2px 8px rgba(var(--brand-rgb), 0.25); font-family: "Fira Sans", Arial, sans-serif; } #latros-lang-switch button { border: none; background: transparent; color: var(--brand); font-size: 13px; font-weight: 600; line-height: 1; padding: 5px 12px; border-radius: 999px; cursor: pointer; } #latros-lang-switch button.active { background: var(--brand); color: var(--cream); } /* ===== Text transform ===== */ #header .nav-wrapper #sb_menu .nav li a, #sb-timeline #steps-nav li:first-child .content .title-small, #sb-timeline #steps-nav li.passed + li:not(.passed) .content .title-small { text-transform: capitalize; } /* ===== Login ===== */ #client-login input.iti__tel-input::placeholder { opacity: 0; } @media (max-width: 767px) { #client-login .section_top #cs_register_or_login_tabs ul li.cs_nav_item a { padding: 18px 24px; } #client-login .section_top #cs_register_or_login_tabs ul li.cs_nav_item { margin: 18px 0; } } /* ===== Hidden elements ===== */ .filter, .pwa_install__banner-ios .pwa_install__content-ios, .company-location--caption, #sb_address_container, #main #main-buttons .btn.map, .booking-info--item_invoice, .invoice-notification, .invoice-pay-page-grid_item.right-block .right-block--header .invoice-info { display: none; } /* Override inline/JS-set styles */ #pwa_install_banner, a.btn[href="#invoice/list"] { display: none !important; } /* ===== Service list ===== */ #events h3 { color: var(--brand); font-weight: 600; } #events p.duration, #events div.duration { font-size: 0.85em; color: var(--brand); opacity: 0.8; } #events p.description, #events div.description { color: #211f1c; font-size: 0.9em; line-height: 1.5; } #events .selectedEvent { border-left: 3px solid var(--brand); background: rgba(var(--brand-rgb), 0.05); } #events input.reserve_time_btn { background: var(--brand); color: var(--cream); border: none; padding: 10px 24px; border-radius: var(--radius); cursor: pointer; } #events input.select_another_btn { background: transparent; color: var(--brand); border: 1px solid var(--brand); padding: 10px 24px; border-radius: var(--radius); cursor: pointer; } /* ===== Booking form ===== */ #eventForm #start_date-block-container h3, #eventForm #timeline-container h3 { color: var(--brand); font-weight: 600; } #eventForm #save_button { background: var(--brand); color: var(--cream); border: none; padding: 12px 28px; border-radius: var(--radius); cursor: pointer; } /* ===== Calendar ===== */ div.ui-widget-header { background: var(--brand); color: var(--cream); border: none; } div.ui-widget-content { border-color: rgba(var(--brand-rgb), 0.2); } /* ===== Time slots ===== */ .timeline td.not_worked_time { background: var(--cream); } .timeline td.free_time { background: rgba(var(--brand-rgb), 0.12); cursor: pointer; } .timeline td.selected_time { background: var(--brand); color: var(--cream); } .timeline td.reserved_time { background: #ebe8e1; color: #a0a0a0; cursor: not-allowed; } /* ===== Date form labels ===== */ /* Bug fix: original was missing # on 2nd and 3rd selectors */ #start_date-block-container .zend_form dt, #start_date-block-container .zend_form dt b, #start_date-block-container .zend_form dd label { color: var(--brand); font-weight: 500; } /* ===== Additional Fields ===== */ #sb_additional_fields .form-control { border: 1px solid rgba(var(--brand-rgb), 0.4); border-radius: var(--radius); background: #fff; padding: 8px 12px; outline: none; } #sb_additional_fields .form-control:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.15); } /* ===== Checkout login buttons ===== Shared declarations live in the combined selector; only color varies per button. */ #sb_sign_in_btn, #sign_up_btn { color: var(--cream) !important; padding: 10px 28px !important; border-radius: var(--radius) !important; font-weight: 600 !important; display: inline-block !important; transition: background 0.2s ease, box-shadow 0.2s ease; } #sb_sign_in_btn { background: var(--brand) !important; border: 1px solid var(--brand) !important; } #sign_up_btn { background: var(--brand-dark) !important; border: 1px solid var(--brand-dark) !important; } #sb_sign_in_btn:hover, #sign_up_btn:hover { background: var(--brand-darker) !important; border-color: var(--brand-darker) !important; box-shadow: 0 0 10px 0 rgba(var(--brand-rgb), 0.5); }