/* ================================================================ DERMAESTHETIK – Booking Override CSS v2 Targets the real E-PAT / Materialize booking page classes. Include AFTER materialize.min.css. Google Fonts – add to : ================================================================ */ /* ── DESIGN TOKENS ────────────────────────────────────────────── */ :root { --da-sand: #f5f0ea; --da-cream: #faf7f3; --da-stone: #e8e0d6; --da-warm: #c9b8a4; --da-mid: #7a6a5a; --da-ink: #1e1a17; --da-accent: #8b6f5e; --da-teal: #3d6b68; --da-teal-lt: #5a8c88; --da-teal-pale: rgba(61,107,104,.07); --da-teal-grad: linear-gradient(135deg, #3d6b68 0%, #2a4e4c 100%); --da-white: #ffffff; --da-footer-bg: #14211f; /* deep forest – very dark, very readable */ --da-shadow: 0 2px 20px rgba(30,26,23,.07); --da-shadow-md: 0 4px 28px rgba(30,26,23,.10); --da-shadow-lg: 0 8px 48px rgba(30,26,23,.14); --da-r: 12px; --da-r-sm: 7px; --da-ease: cubic-bezier(.4,0,.2,1); --da-trans: all .22s var(--da-ease); } /* ════════════════════════════════════════════════════════════════ GLOBAL ════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } body { font-family: 'DM Sans', sans-serif !important; background: var(--da-cream) !important; color: var(--da-ink) !important; -webkit-font-smoothing: antialiased !important; } /* ════════════════════════════════════════════════════════════════ HEADER ════════════════════════════════════════════════════════════════ */ .client-header { background: var(--da-white) !important; box-shadow: none !important; border-bottom: 1px solid var(--da-stone) !important; padding: 0 !important; position: sticky !important; top: 0 !important; z-index: 200 !important; } .client-header .container { max-width: 1100px !important; padding: 0 2rem !important; } .client-header .row { margin-bottom: 0 !important; } .client-header h1.name { font-family: 'Cormorant Garamond', serif !important; font-size: 1.75rem !important; font-weight: 400 !important; letter-spacing: .06em !important; color: var(--da-ink) !important; line-height: 70px !important; margin: 0 !important; position: relative !important; display: inline-block !important; } /* Decorative underline accent under the logo */ .client-header h1.name::after { content: '' !important; position: absolute !important; bottom: 16px !important; left: 0 !important; width: 40px !important; height: 2px !important; background: var(--da-teal) !important; border-radius: 2px !important; } /* ════════════════════════════════════════════════════════════════ MAIN AREA ════════════════════════════════════════════════════════════════ */ main { background: var(--da-cream) !important; padding: 2.5rem 0 5rem !important; } main > .container { max-width: 1100px !important; } #bookingapp { background: transparent !important; } /* ════════════════════════════════════════════════════════════════ SECTION HEADINGS ════════════════════════════════════════════════════════════════ */ /* "Onlinebuchung" main title */ .section h5.grey-text.text-darken-2 { font-family: 'Cormorant Garamond', serif !important; font-size: 2.4rem !important; font-weight: 300 !important; color: var(--da-ink) !important; letter-spacing: .04em !important; margin-bottom: 1.75rem !important; position: relative !important; padding-bottom: .75rem !important; } .section h5.grey-text.text-darken-2::after { content: '' !important; position: absolute !important; bottom: 0 !important; left: 0 !important; width: 48px !important; height: 2px !important; background: var(--da-teal) !important; border-radius: 2px !important; } /* Sub-section headings */ .section h5 { font-family: 'Cormorant Garamond', serif !important; font-size: 1.45rem !important; font-weight: 400 !important; color: var(--da-ink) !important; letter-spacing: .03em !important; margin-bottom: 1rem !important; } /* ════════════════════════════════════════════════════════════════ VERTICAL CATEGORY TABS (left sidebar) ════════════════════════════════════════════════════════════════ */ .categories.tabs-vertical { background: var(--da-white) !important; border-radius: var(--da-r) !important; border: 1px solid var(--da-stone) !important; box-shadow: var(--da-shadow) !important; overflow: hidden !important; padding: .5rem 0 !important; } .categories.tabs-vertical .tabs { background: transparent !important; height: auto !important; overflow: visible !important; box-shadow: none !important; } .categories.tabs-vertical .tab { height: auto !important; line-height: 1 !important; width: 100% !important; float: none !important; display: block !important; } .categories.tabs-vertical .tab a { font-family: 'DM Sans', sans-serif !important; font-size: .8rem !important; font-weight: 400 !important; color: var(--da-mid) !important; padding: .9rem 1.25rem !important; display: block !important; height: auto !important; line-height: 1.45 !important; white-space: normal !important; border-left: 3px solid transparent !important; border-bottom: none !important; transition: var(--da-trans) !important; background: transparent !important; text-transform: none !important; } .categories.tabs-vertical .tab a:hover { color: var(--da-teal) !important; background: var(--da-teal-pale) !important; padding-left: 1.5rem !important; } .categories.tabs-vertical .tab a.active { color: var(--da-teal) !important; background: var(--da-teal-pale) !important; border-left-color: var(--da-teal) !important; font-weight: 500 !important; } .categories .indicator { display: none !important; } /* ════════════════════════════════════════════════════════════════ SERVICE CARDS GRID ════════════════════════════════════════════════════════════════ */ .services.row { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important; gap: 1rem !important; margin: 0 !important; float: none !important; } .service { float: none !important; width: 100% !important; padding: 0 !important; } .service .card { border-radius: var(--da-r) !important; border: 1.5px solid var(--da-stone) !important; box-shadow: var(--da-shadow) !important; display: flex !important; flex-direction: column !important; transition: var(--da-trans) !important; overflow: hidden !important; background: var(--da-white) !important; margin: 0 !important; } .service .card:hover { border-color: var(--da-teal-lt) !important; box-shadow: var(--da-shadow-md) !important; } /* ── Selected card ── */ .service .blue-grey.card, .service .card.blue-grey { border-color: var(--da-teal) !important; background: var(--da-white) !important; box-shadow: 0 0 0 3px rgba(61,107,104,.15), var(--da-shadow-md) !important; } /* ── Image strip ── */ .service .card-image { height: 115px !important; overflow: hidden !important; background: var(--da-sand) !important; flex-shrink: 0 !important; position: relative !important; } .service .card-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; opacity: .82 !important; transition: opacity .22s var(--da-ease) !important; display: block !important; } .service .card:hover .card-image img { opacity: 1 !important; } /* Subtle teal gradient overlay on image */ .service .card-image::after { content: '' !important; position: absolute !important; inset: 0 !important; background: linear-gradient(to bottom, transparent 50%, rgba(29,55,53,.18)) !important; pointer-events: none !important; } /* ── Card body ── */ .service .card-content { padding: 1rem 1rem .4rem !important; flex: 1 !important; background: transparent !important; } .service .card-content .card-title { font-family: 'Cormorant Garamond', serif !important; font-size: 1.08rem !important; font-weight: 400 !important; color: var(--da-ink) !important; margin-bottom: .3rem !important; line-height: 1.25 !important; display: block !important; } .service .blue-grey .card-title, .service .card.blue-grey .card-title { color: var(--da-ink) !important; } .service .card-content .description { font-size: .77rem !important; color: var(--da-mid) !important; line-height: 1.55 !important; margin: 0 !important; } /* ── Price row ── */ .service .facts.card-content { padding: .2rem 1rem .8rem !important; background: transparent !important; } .service .facts .flow-text.costs { font-size: .8rem !important; font-weight: 500 !important; color: var(--da-teal) !important; margin: 0 !important; line-height: 1 !important; } .service .facts .costs .costs-label { font-weight: 400 !important; color: var(--da-mid) !important; } .service .facts .duration { display: none !important; } /* ── Card action ── */ .service .card-action { padding: .7rem 1rem !important; border-top: 1px solid var(--da-stone) !important; background: transparent !important; } .service .card-action a { font-family: 'DM Sans', sans-serif !important; font-size: .7rem !important; font-weight: 500 !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--da-teal) !important; background: none !important; border: 1.5px solid var(--da-teal) !important; border-radius: 100px !important; padding: .32rem .9rem !important; display: inline-block !important; transition: var(--da-trans) !important; text-decoration: none !important; } .service .card-action a:hover { background: var(--da-teal) !important; color: var(--da-white) !important; box-shadow: 0 2px 12px rgba(61,107,104,.25) !important; } .service .blue-grey .card-action a, .service .card.blue-grey .card-action a { background: var(--da-teal) !important; color: var(--da-white) !important; border-color: var(--da-teal) !important; } /* ════════════════════════════════════════════════════════════════ LOCATION CHIP ════════════════════════════════════════════════════════════════ */ .provider.chip { background: var(--da-teal-grad) !important; color: var(--da-white) !important; border-radius: 100px !important; font-family: 'DM Sans', sans-serif !important; font-size: .82rem !important; height: auto !important; padding: .45rem 1.1rem .45rem .65rem !important; line-height: 1.45 !important; box-shadow: 0 2px 12px rgba(61,107,104,.2) !important; display: inline-flex !important; align-items: center !important; gap: .4rem !important; } .provider.chip img { width: 22px !important; height: 22px !important; border-radius: 50% !important; object-fit: cover !important; opacity: .8 !important; } /* ════════════════════════════════════════════════════════════════ CALENDAR – MONTH TABS ════════════════════════════════════════════════════════════════ */ .monthHeader .tabs { background: transparent !important; box-shadow: none !important; border-bottom: 1px solid var(--da-stone) !important; height: auto !important; overflow: visible !important; } .monthHeader .tab { height: auto !important; } .monthHeader .tab a { font-family: 'Cormorant Garamond', serif !important; font-size: 1rem !important; font-weight: 400 !important; color: var(--da-warm) !important; padding: .5rem .8rem .65rem !important; height: auto !important; line-height: 1 !important; display: inline-block !important; border-bottom: 2px solid transparent !important; transition: var(--da-trans) !important; margin-bottom: -1px !important; text-transform: none !important; background: transparent !important; } .monthHeader .tab a:hover { color: var(--da-teal) !important; } .monthHeader .tab a.active { color: var(--da-teal) !important; border-bottom-color: var(--da-teal) !important; font-weight: 500 !important; background: transparent !important; } .monthHeader .indicator { display: none !important; } /* ════════════════════════════════════════════════════════════════ CALENDAR – WEEKDAY LABELS + DAY GRID ════════════════════════════════════════════════════════════════ */ .weekdayHeader { display: grid !important; grid-template-columns: repeat(7, 1fr) !important; text-align: center !important; margin: .85rem 0 .35rem !important; gap: 2px !important; } .weekdayHeader .weekday { font-family: 'DM Sans', sans-serif !important; font-size: .6rem !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: var(--da-warm) !important; font-weight: 500 !important; } .days { display: flex !important; flex-direction: column !important; gap: 2px !important; } .week { display: grid !important; grid-template-columns: repeat(7, 1fr) !important; gap: 2px !important; } .day { aspect-ratio: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; } .day > span { font-family: 'DM Sans', sans-serif !important; font-size: .8rem !important; width: 33px !important; height: 33px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; transition: var(--da-trans) !important; cursor: default !important; position: relative !important; } /* Past / greyed */ .day > span.grey-text { color: var(--da-stone) !important; } /* Available slot days */ .day > span.teal, .day > span.teal.lighten-1, .day > span.teal.white-text { color: var(--da-teal) !important; font-weight: 600 !important; cursor: pointer !important; background: transparent !important; } .day > span.teal::after, .day > span.teal.lighten-1::after { content: '' !important; position: absolute !important; bottom: 3px !important; left: 50% !important; transform: translateX(-50%) !important; width: 4px !important; height: 4px !important; border-radius: 50% !important; background: var(--da-teal) !important; } .day > span.teal:hover, .day > span.teal.lighten-1:hover { background: rgba(61,107,104,.11) !important; } /* Today / selected */ .day > span.orange, .day > span.orange.white-text, .day > span.selected { background: var(--da-teal-grad) !important; color: var(--da-white) !important; font-weight: 500 !important; box-shadow: 0 2px 8px rgba(61,107,104,.3) !important; } .day > span.orange::after, .day > span.selected::after { display: none !important; } /* Out of month */ .day.day-outofmonth { pointer-events: none !important; opacity: 0 !important; } /* ════════════════════════════════════════════════════════════════ TIME SLOT LIST ════════════════════════════════════════════════════════════════ */ .slotday .collection.with-header { border: none !important; border-radius: var(--da-r) !important; overflow: hidden !important; background: var(--da-white) !important; box-shadow: var(--da-shadow) !important; } .slotday .collection-header { background: transparent !important; border-bottom: 1px solid var(--da-stone) !important; padding: .8rem 1.1rem !important; } .slotday .collection-header h6 { font-family: 'DM Sans', sans-serif !important; font-size: .62rem !important; letter-spacing: .16em !important; text-transform: uppercase !important; color: var(--da-mid) !important; font-weight: 500 !important; margin: 0 !important; } .slotday .collection-list { padding: .5rem !important; max-height: none !important; } .slottime-item.collection-item { border: none !important; background: transparent !important; padding: 0 !important; margin-bottom: .4rem !important; } .slottime-item .selectable-slot { display: flex !important; align-items: center !important; gap: .55rem !important; padding: .75rem 1rem !important; border-radius: var(--da-r-sm) !important; border: 1.5px solid var(--da-stone) !important; cursor: pointer !important; transition: var(--da-trans) !important; font-family: 'DM Sans', sans-serif !important; font-size: .84rem !important; color: var(--da-ink) !important; background: var(--da-white) !important; } .slottime-item .selectable-slot:hover { border-color: var(--da-teal-lt) !important; background: var(--da-teal-pale) !important; transform: translateX(2px) !important; } .slottime-item.teal .selectable-slot, .slottime-item.selected .selectable-slot { border-color: var(--da-teal) !important; background: var(--da-teal-pale) !important; color: var(--da-teal) !important; font-weight: 500 !important; } .slottime-item .selectable-slot .material-icons { font-size: .95rem !important; color: var(--da-teal) !important; flex-shrink: 0 !important; } .slottime-item .selectable-slot .secondary-content { margin-left: auto !important; position: static !important; } .slottime-item .selection-indicator { color: var(--da-teal) !important; } .slottime-item .secondary-content span { font-size: .66rem !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--da-warm) !important; } /* Override Materialize teal white-text on selected */ .slottime-item.teal.white-text .selectable-slot, .slottime-item.teal.white-text .selectable-slot * { color: var(--da-teal) !important; } .slottime-item .selection-indicator.white-text { color: var(--da-teal) !important; } /* ════════════════════════════════════════════════════════════════ CHOSEN APPOINTMENT CHIP ════════════════════════════════════════════════════════════════ */ .selectedSlots { margin-top: .85rem !important; } .selectedSlots > p { font-family: 'DM Sans', sans-serif !important; font-size: .62rem !important; letter-spacing: .16em !important; text-transform: uppercase !important; color: var(--da-mid) !important; font-weight: 500 !important; margin-bottom: .5rem !important; } .selectedSlots .chip { background: var(--da-teal-pale) !important; border: 1.5px solid rgba(61,107,104,.3) !important; color: var(--da-teal) !important; border-radius: var(--da-r-sm) !important; font-family: 'DM Sans', sans-serif !important; font-size: .83rem !important; font-weight: 500 !important; height: auto !important; padding: .5rem .8rem .5rem 1rem !important; line-height: 1.4 !important; display: inline-flex !important; align-items: center !important; gap: .35rem !important; } .selectedSlots .chip .material-icons { font-size: 1rem !important; color: var(--da-warm) !important; cursor: pointer !important; transition: var(--da-trans) !important; } .selectedSlots .chip .material-icons:hover { color: var(--da-ink) !important; } /* ════════════════════════════════════════════════════════════════ CONTACT FORM ════════════════════════════════════════════════════════════════ */ .input-field { margin-bottom: 1.25rem !important; position: relative !important; } /* Materialize floating labels: keep absolute positioning intact. Only restyle colour/font, never override position/transform. */ .input-field label { font-family: 'DM Sans', sans-serif !important; font-weight: 400 !important; color: var(--da-warm) !important; } .input-field label.active { font-size: .66rem !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--da-mid) !important; font-weight: 500 !important; } .input-field input[type="text"], .input-field input[type="email"], .input-field input[type="tel"], .input-field textarea { font-family: 'DM Sans', sans-serif !important; font-size: .9rem !important; /* Keep Materialize underline style – no box border */ border: none !important; border-bottom: 1.5px solid var(--da-stone) !important; border-radius: 0 !important; padding: .4rem 0 !important; height: 2.6rem !important; line-height: 2.6rem !important; margin: 0 !important; box-shadow: none !important; background: transparent !important; color: var(--da-ink) !important; transition: var(--da-trans) !important; width: 100% !important; box-sizing: border-box !important; } .input-field textarea { height: auto !important; line-height: 1.6 !important; padding: .4rem 0 !important; min-height: 3.5rem !important; resize: vertical !important; } .input-field input:focus, .input-field textarea:focus { border-bottom-color: var(--da-teal) !important; box-shadow: 0 1px 0 0 var(--da-teal) !important; outline: none !important; background: transparent !important; } /* ── SELECT / DROPDOWN ────────────────────────────────────────── Materialize renders: .input-field > .select-wrapper > input.select-dropdown The wrapper must NOT get the box-border treatment – only the input inside. ─────────────────────────────────────────────────────────────── */ /* Wrapper: no border, no background – just a positioning context */ .input-field .select-wrapper { border: none !important; background: transparent !important; padding: 0 !important; margin: 0 !important; display: block !important; } /* The visible fake-input that Materialize creates */ .input-field .select-wrapper input.select-dropdown { font-family: 'DM Sans', sans-serif !important; font-size: .9rem !important; /* Materialize underline style – keep consistent with other inputs */ border: none !important; border-bottom: 1.5px solid var(--da-stone) !important; border-radius: 0 !important; padding: .4rem 2rem .4rem 0 !important; /* compact, like original */ height: 2.6rem !important; line-height: 2.6rem !important; cursor: pointer !important; background: transparent !important; color: var(--da-ink) !important; margin: 0 !important; box-shadow: none !important; width: 100% !important; box-sizing: border-box !important; } .input-field .select-wrapper input.select-dropdown:focus { border-bottom-color: var(--da-teal) !important; box-shadow: 0 1px 0 0 var(--da-teal) !important; outline: none !important; } /* Caret arrow */ .input-field .select-wrapper .caret { color: var(--da-mid) !important; right: .25rem !important; top: 50% !important; transform: translateY(-50%) !important; position: absolute !important; z-index: 1 !important; } /* Dropdown list panel */ .dropdown-content.select-dropdown { border-radius: var(--da-r-sm) !important; box-shadow: var(--da-shadow-lg) !important; border: 1px solid var(--da-stone) !important; overflow: hidden !important; background: var(--da-white) !important; } .dropdown-content.select-dropdown li { min-height: auto !important; } .dropdown-content.select-dropdown li span { font-family: 'DM Sans', sans-serif !important; font-size: .88rem !important; color: var(--da-ink) !important; padding: .6rem 1rem !important; display: block !important; line-height: 1.4 !important; } .dropdown-content.select-dropdown li:hover span, .dropdown-content.select-dropdown li.selected span { background: var(--da-teal-pale) !important; color: var(--da-teal) !important; } .input-field textarea.materialize-textarea { min-height: 95px !important; padding-top: .75rem !important; resize: vertical !important; border: 1.5px solid var(--da-stone) !important; border-bottom: 1.5px solid var(--da-stone) !important; border-radius: var(--da-r-sm) !important; } .iti { padding-left: 2.6rem;width: 100% !important; } .iti input[type="tel"] { padding-left: 1.6rem !important; } /* Validation error */ .input-field input.invalid, .input-field input:invalid:not(:placeholder-shown) { border-color: #c0392b !important; } [data-error] { color: #c0392b !important; font-size: .72rem !important; } /* ════════════════════════════════════════════════════════════════ SUBMIT BUTTON ════════════════════════════════════════════════════════════════ */ #submit_booking.btn { font-family: 'DM Sans', sans-serif !important; font-size: .76rem !important; font-weight: 500 !important; letter-spacing: .13em !important; text-transform: uppercase !important; background: var(--da-teal-grad) !important; color: var(--da-white) !important; border-radius: 100px !important; padding: .9rem 2.5rem !important; height: auto !important; line-height: 1 !important; box-shadow: 0 4px 18px rgba(61,107,104,.32) !important; border: none !important; cursor: pointer !important; transition: var(--da-trans) !important; display: inline-flex !important; align-items: center !important; gap: .55rem !important; } #submit_booking.btn:hover { transform: translateY(-2px) !important; box-shadow: 0 7px 28px rgba(61,107,104,.42) !important; filter: brightness(1.08) !important; } #submit_booking .material-icons { font-size: .95rem !important; } /* ════════════════════════════════════════════════════════════════ DIVIDER ════════════════════════════════════════════════════════════════ */ .divider { background-color: var(--da-stone) !important; height: 1px !important; margin: 1.75rem 0 !important; } /* ════════════════════════════════════════════════════════════════ FOOTER Materialize sets bg via .blue-grey.lighten-5 on the