/** * Glorit custom form fields (rendered by inc/forms/render.php, driven by * assets/js/forms.js). The popup chrome lives in popup.css. */ .glorit-form { display: flex; flex-direction: column; gap: 0.9rem; } /* The secondary "refine search" form ships hidden; `display:flex` above would * otherwise override the [hidden] attribute and reveal it. */ .glorit-form[hidden] { display: none; } /* 2-up rows on desktop (Nuxt .contact-form__row): stacked on mobile. */ .glorit-form__row { display: flex; flex-direction: column; gap: 0.9rem; } @media (min-width: 768px) { .glorit-form__row { flex-direction: row; gap: 1.25rem; align-items: flex-start; } .glorit-form__row > * { flex: 1 1 0; min-width: 0; } } .glorit-form__spacer { display: none; } @media (min-width: 768px) { .glorit-form__spacer { display: block; flex: 1 1 0; } } .glorit-form__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .glorit-field { display: flex; flex-direction: column; gap: 0.3rem; } .glorit-field > label, .glorit-field__group-label { font-size: 0.95rem; font-weight: 400; color: var(--wp--preset--color--primary, #03213a); } .glorit-field__req { color: inherit; /* attached asterisk, same colour as the label (matches Nuxt) */ } /* Default inputs: square / rounded-rect (Nuxt input variant="square"). The * newsletter's pill inputs are the exception (overridden below). */ .glorit-field input[type="text"], .glorit-field input[type="email"], .glorit-field input[type="tel"], .glorit-field select, .glorit-field textarea { width: 100%; padding: 0.55rem 0.75rem; border: 1px solid var(--wp--preset--color--off-white, #e3e3e3); border-radius: 0.375rem; background: #fff; color: var(--wp--preset--color--primary, #03213a); font: inherit; font-weight: 700; } .glorit-field textarea { resize: vertical; } /* Newsletter form keeps the pill inputs. */ .glorit-form--newsletter .glorit-field input[type="email"] { padding: 0.85rem 1.75rem; border-radius: 9999px; } /* Phone field: intl-tel-input wraps the input — keep it full width. */ .glorit-field--phone .iti { display: block; width: 100%; } /* iti country list is appended to in an .iti--container (z 1060); lift it * above the popup (z 9999). Higher specificity than the vendor rule (which loads * after this file). */ .iti.iti--container { z-index: 10001; } /* Multiselect dropdown (Nuxt SharedDropdown variant="square"): inline-labelled * control + a drop-down menu of square gold checkboxes. */ .glorit-multiselect { position: relative; } .glorit-multiselect__control { position: relative; width: 100%; padding: 1.25rem 2.25rem 0.5rem 0.75rem; border: 1px solid var(--wp--preset--color--off-white, #e3e3e3); border-radius: 0.375rem; background: #fff; font: inherit; cursor: pointer; text-align: left; } .glorit-multiselect__inline-label { position: absolute; top: 0.35rem; left: 0.75rem; font-size: 0.75rem; line-height: 1rem; color: var(--wp--preset--color--primary, #03213a); } .glorit-multiselect__value { display: block; font-size: 1rem; line-height: 1.5rem; font-weight: 700; color: var(--wp--preset--color--primary, #03213a); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .glorit-multiselect:not(.has-value) .glorit-multiselect__value { font-weight: 400; } .glorit-multiselect__icon { position: absolute; top: 50%; right: 0.75rem; width: 0.8rem; height: 0.8rem; transform: translateY(-50%); color: var(--wp--preset--color--primary, #03213a); transition: transform 0.2s ease; } .glorit-multiselect__control[aria-expanded="true"] .glorit-multiselect__icon { transform: translateY(-50%) rotate(180deg); } .glorit-multiselect__menu { position: absolute; top: calc(100% + 0.25rem); left: 0; right: 0; z-index: 10; max-height: 14rem; overflow-y: auto; background: #fff; border: 1px solid var(--wp--preset--color--off-white, #e3e3e3); box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); } .glorit-multiselect__menu[hidden] { display: none; } .glorit-multiselect__option { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem; border-bottom: 1px solid var(--wp--preset--color--off-white, #e3e3e3); cursor: pointer; font-size: 1rem; color: var(--wp--preset--color--primary, #03213a); } .glorit-multiselect__option:last-child { border-bottom: none; } /* Native input is visually hidden; the box shows the state. */ .glorit-multiselect__option input { position: absolute; opacity: 0; width: 0; height: 0; } .glorit-multiselect__box { flex: none; position: relative; width: 1rem; height: 1rem; border: 1px solid var(--wp--preset--color--secondary, #a47f55); border-radius: 0.125rem; background: #fff; } .glorit-multiselect__option input:checked + .glorit-multiselect__box { background: var(--wp--preset--color--secondary, #a47f55); } .glorit-multiselect__option input:checked + .glorit-multiselect__box::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .glorit-multiselect__option input:focus-visible + .glorit-multiselect__box { outline: 2px solid var(--wp--preset--color--secondary, #a47f55); outline-offset: 1px; } .glorit-field input:focus, .glorit-field select:focus, .glorit-field textarea:focus { outline: none; border-color: var(--wp--preset--color--secondary, #a47f55); } .glorit-field--checkbox .glorit-field__check, .glorit-field__opt { display: flex; align-items: flex-start; gap: 0.5rem; font-weight: 400; color: var(--wp--preset--color--grey, #545454); cursor: pointer; } .glorit-field--checkbox .glorit-field__check { font-size: 1rem; /* 16px, matches the Nuxt consent label */ } .glorit-field__opt { font-size: 0.85rem; /* denser multi-select option lists */ } /* Circular custom checkbox/radio (ported from the Nuxt checkbox--rounded): white * with a grey ring, a gold fill when checked. */ .glorit-field--checkbox .glorit-field__check input[type="checkbox"], .glorit-field__opt input[type="checkbox"], .glorit-field__opt input[type="radio"] { appearance: none; -webkit-appearance: none; flex: none; width: 1.2rem; height: 1.2rem; margin: 0.1rem 0 0; border: 1px solid var(--wp--preset--color--off-white, #e3e3e3); border-radius: 9999px; background: #fff; cursor: pointer; position: relative; } .glorit-field--checkbox .glorit-field__check input:checked, .glorit-field__opt input:checked { border-color: var(--wp--preset--color--secondary, #a47f55); } .glorit-field--checkbox .glorit-field__check input:checked::after, .glorit-field__opt input:checked::after { content: ""; position: absolute; inset: 3px; border-radius: 9999px; background: var(--wp--preset--color--secondary, #a47f55); } .glorit-field--checkbox .glorit-field__check input:focus-visible, .glorit-field__opt input:focus-visible { outline: 2px solid var(--wp--preset--color--secondary, #a47f55); outline-offset: 2px; } .glorit-field__link { color: inherit; text-decoration: underline; } .glorit-field__options { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; } .glorit-field__error { font-size: 0.78rem; color: #b32d2e; min-height: 0; } .glorit-field.has-error input, .glorit-field.has-error select, .glorit-field.has-error textarea { border-color: #b32d2e; } .glorit-form__submit { align-self: flex-start; /* w-max, like the Nuxt button */ margin-top: 0.25rem; padding: 0.7rem 1.5rem; border: 1px solid transparent; border-radius: 9999px; background: var(--wp--preset--color--secondary-dark, #93703e); color: #fff; font: inherit; font-weight: 700; cursor: pointer; transition: opacity 0.2s ease; } .glorit-form__submit:hover:not(:disabled) { opacity: 0.9; } .glorit-form__submit:disabled { opacity: 0.6; cursor: default; } .glorit-form__skip { background: none; border: none; color: var(--wp--preset--color--grey, #545454); text-decoration: underline; cursor: pointer; font: inherit; font-size: 0.85rem; } .glorit-form__status { font-size: 0.9rem; min-height: 1.2em; } .glorit-form__status.is-success { color: #1a7f37; } .glorit-form__status.is-error { color: #b32d2e; } /* ---- Secondary "refine search" step (Nuxt secondary-form) ---- */ .glorit-form__sec-intro { margin-bottom: 0.5rem; } /* Gold, centred thank-you headline. */ .glorit-form__sec-title { margin: 0 0 1rem; text-align: center; font-family: var(--wp--preset--font-family--t-star-pro, "T-Star Pro", sans-serif); font-weight: 700; font-size: 1.5rem; line-height: 2rem; color: var(--wp--preset--color--secondary, #a47f55); } /* Rich-text description, shared by the primary form (intro, inside the gold box) * and the secondary step (Nuxt .contact-form__description). Left on mobile, * centred from lg up; gold links (e.g. the phone number). */ .glorit-form__description, .glorit-form__sec-text { color: var(--wp--preset--color--primary, #03213a); font-size: 1rem; line-height: 1.5; text-align: left; } .glorit-form__description { margin: 0 0 1rem; /* + the form's 0.9rem gap ≈ Nuxt mb-8 */ } .glorit-form__sec-text { margin: 0 0 2rem; } .glorit-form__description p, .glorit-form__sec-text p { margin: 0 0 0.75rem; } .glorit-form__description p:last-child, .glorit-form__sec-text p:last-child { margin-bottom: 0; } .glorit-form__description a, .glorit-form__sec-text a { color: var(--wp--preset--color--secondary, #a47f55); text-decoration: none; } .glorit-form__description a:hover, .glorit-form__sec-text a:hover { text-decoration: underline; } @media (min-width: 1024px) { .glorit-form__description, .glorit-form__sec-text { text-align: center; } } /* Option block: bold title + square white-box / gold-checkmark options. */ .glorit-extra__title { margin: 0 0 0.5rem; font-family: var(--wp--preset--font-family--t-star-pro, "T-Star Pro", sans-serif); font-weight: 700; font-size: 1.25rem; line-height: 1.75rem; color: var(--wp--preset--color--primary, #03213a); } .glorit-extra__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } @media (min-width: 768px) { .glorit-extra__list--grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1.25rem; } } .glorit-extra__check { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 1rem; color: var(--wp--preset--color--primary, #03213a); } /* Native control hidden; the box shows the state. */ .glorit-extra__check input { position: absolute; opacity: 0; width: 0; height: 0; } .glorit-extra__box { flex: none; display: flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; border: 1px solid var(--wp--preset--color--secondary, #a47f55); border-radius: 0.375rem; background: #fff; } .glorit-extra__tick { width: 1rem; height: 1rem; color: var(--wp--preset--color--secondary, #a47f55); display: none; } .glorit-extra__check input:checked + .glorit-extra__box .glorit-extra__tick { display: block; } .glorit-extra__check input:focus-visible + .glorit-extra__box { outline: 2px solid var(--wp--preset--color--secondary, #a47f55); outline-offset: 1px; } .glorit-form__captcha:empty { display: none; } /* ---- [glorit_contact_bar] — page button that opens the contact popup ---- */ .glorit-contact-bar { display: flex; padding: 0.25rem 0; background: #fff; } .glorit-contact-bar--right { justify-content: flex-end; } .glorit-contact-bar--left { justify-content: flex-start; } .glorit-contact-bar--center { justify-content: center; } /* Gold secondary pill (matches the form submit + header "Jetzt anfragen"). */ .glorit-contact-bar__button { min-width: 10rem; padding: 0.7rem 1.5rem; border: 1px solid transparent; border-radius: 9999px; background: var(--wp--preset--color--secondary-dark, #93703e); color: #fff; font: inherit; font-weight: 700; cursor: pointer; transition: opacity 0.2s ease; } .glorit-contact-bar__button:hover, .glorit-contact-bar__button:focus-visible { opacity: 0.9; } /* Contact FAB: mail + phone marks (2rem each) overlapped with the Nuxt offsets * (mailicon translate 6px/-4px, phoneicon -8px/8px). */ .glorit-fab--contact .glorit-fab__icons { position: relative; width: 2rem; height: 2rem; display: block; } .glorit-fab--contact .glorit-fab__mail, .glorit-fab--contact .glorit-fab__phone { position: absolute; top: 0; left: 0; width: 2rem; height: 2rem; } .glorit-fab--contact .glorit-fab__mail { transform: translate(6px, -4px); } .glorit-fab--contact .glorit-fab__phone { transform: translate(-8px, 8px); }