/* Pali_RevokeContract — /vertrag-widerrufen (§356a BGB). Baby-Lucien rose default. */ /* Tokens on only — `.page-revoke-contract` is also the CMS content wrapper class. */ body.page-revoke-contract { --rc-primary: #c59b9c; --rc-primary-dark: #a87760; --rc-light: #f0e8dc; /* Warm Beige */ --rc-page: #fdf8f3; /* Cream */ --rc-border: #edd5c8; /* Rose Light */ --rc-text: #333; --rc-muted: #7a6b62; } /* Pali-World override per TZ p.6 — `pl-thm-paliworld` body class is added by the theme. */ body.pl-thm-paliworld.page-revoke-contract { --rc-primary: #4a7bc4; /* Soft Blue */ --rc-primary-dark: #355c9b; --rc-light: #f0f6fc; /* Light Blue-White */ --rc-page: #fafcff; /* Near White */ --rc-border: #c8e0f4; /* Blue Light */ } /* Page header — beats Porto theme's orange page-title via body-prefixed selectors. */ body.page-revoke-contract .page-title-wrapper .page-title, body.page-revoke-contract .page-title-wrapper .page-title span, body.page-revoke-contract h1.page-title, .page-revoke-contract .column.main h1 { color: var(--rc-primary); font-weight: 700; font-size: 32px; } .page-revoke-contract .column.main > [data-content-type="html"] > .page-revoke-contract > p, .page-revoke-contract .column.main > .page-revoke-contract > p { color: var(--rc-text); font-size: 15px; line-height: 1.55; margin-bottom: 24px; } /* Form wrapper card */ .page-revoke-contract .amform-form { max-width: 760px; margin: 24px auto; background: #fff; border: 1px solid var(--rc-primary); border-radius: 8px; padding: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); } .page-revoke-contract .amform-form-fieldset { padding: 0; margin: 0; border: 0; background: transparent; } /* Step tabs */ .page-revoke-contract .amcform-multi-page.ui-tabs { background: transparent; border: 0; } .page-revoke-contract .amcform-page-titles.ui-tabs-nav { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; background: var(--rc-light); border: 0; border-radius: 8px 8px 0 0; padding: 0; margin: 0; list-style: none; overflow: hidden; width: 100%; } .page-revoke-contract .amcform-page-titles .amcform-title-wrap { margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; text-align: center; display: block; float: none; position: static; top: auto; width: 100%; min-width: 0; } /* Reset jQuery UI Theme defaults (gradient bg + borders on ui-state-*). */ .page-revoke-contract .amcform-page-titles .ui-tabs-tab.ui-state-default, .page-revoke-contract .amcform-page-titles .ui-tabs-tab.ui-state-active, .page-revoke-contract .amcform-page-titles .ui-tabs-tab.ui-tabs-active { background: transparent; background-image: none; border: 0; color: inherit; } .page-revoke-contract .amcform-page-wrap.ui-tabs-panel.ui-widget-content { background: transparent; border: 0; color: var(--rc-text); } .page-revoke-contract .amcform-page-titles .amcform-title { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 18px; color: var(--rc-muted); text-decoration: none; font-weight: 600; font-size: 14px; border-bottom: 3px solid transparent; width: 100%; height: 100%; box-sizing: border-box; float: none; min-width: 0; } .page-revoke-contract .amcform-page-titles .amcform-label { min-width: 0; white-space: normal; word-wrap: break-word; } .page-revoke-contract .amcform-page-titles .amcform-step { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 28px; width: 28px; min-width: 28px; height: 28px; margin: 0; padding: 0; border-radius: 50%; background: var(--rc-border); color: var(--rc-primary); font-size: 14px; font-weight: 700; line-height: 1; } .page-revoke-contract .amcform-page-titles .ui-tabs-active .amcform-title, .page-revoke-contract .amcform-page-titles .ui-state-active .amcform-title { color: var(--rc-primary); background: #fff; border-bottom-color: var(--rc-primary); } .page-revoke-contract .amcform-page-titles .ui-tabs-active .amcform-step, .page-revoke-contract .amcform-page-titles .ui-state-active .amcform-step { background: var(--rc-primary); color: #fff; } .page-revoke-contract .amcform-page-titles .-disabled .amcform-title { color: var(--rc-muted); opacity: 0.7; pointer-events: none; } .page-revoke-contract .amcform-page-titles .-done .amcform-step { background: var(--rc-primary); color: #fff; } /* Page panel — no side padding; fields/toolbar own their inset so toolbar fills card edges. */ .page-revoke-contract .amcform-page-wrap { padding: 28px 0 0; background: transparent; border: 0; box-sizing: border-box; width: 100%; } /* Reinforce jQuery UI's inline display:none on inactive panels. */ .page-revoke-contract .amcform-page-wrap[aria-hidden="true"] { display: none !important; } /* Fields stacked full-width */ .page-revoke-contract .amcform-page-wrap .field.form-group { display: block; width: 100%; margin: 0 0 18px; padding: 0 32px; float: none; clear: both; box-sizing: border-box; } .page-revoke-contract .amcform-page-wrap .field > label, .page-revoke-contract .amcform-page-wrap .field .label { display: block; color: var(--rc-text); font-weight: 700; font-size: 14px; margin: 0 0 6px; text-align: left; width: auto; float: none; } .page-revoke-contract .amcform-page-wrap .field .control { width: 100%; margin: 0; float: none; } .page-revoke-contract .amcform-page-wrap .field input[type="text"], .page-revoke-contract .amcform-page-wrap .field input[type="email"], .page-revoke-contract .amcform-page-wrap .field textarea { display: block; width: 100%; box-sizing: border-box; border-radius: 4px; padding: 11px 14px; font-size: 14px; line-height: 1.4; background: #fff; color: var(--rc-text); } /* Required asterisk (injected by Amasty next to label) */ .page-revoke-contract .amcform-page-wrap .field .required, .page-revoke-contract .amcform-page-wrap label .required { color: var(--rc-primary); margin-left: 4px; } /* Toolbar — full-width rose-light footer band (per TZ wireframe) */ .page-revoke-contract .amcform-toolbar { display: flex; justify-content: center; align-items: center; gap: 16px; width: 100%; margin: 14px 0 0; padding: 10px 24px; border-radius: 0 0 8px 8px; border-top: 0; box-sizing: border-box; } /* Step 2 has Prev + Submit — push to opposite edges */ .page-revoke-contract .amcform-page-wrap:not(:first-of-type) .amcform-toolbar { justify-content: space-between; } .page-revoke-contract .amform-form button.amcform-next, .page-revoke-contract .amform-form button.amcform-submit, .page-revoke-contract .amform-form button.amcform-prev, .page-revoke-contract .amform-form button[type="submit"] { border: 1px solid var(--rc-primary); border-radius: 4px; padding: 9px 26px; font-weight: 700; font-size: 15px; line-height: 1.2; cursor: pointer; text-transform: none; letter-spacing: 0; min-width: 200px; } .page-revoke-contract .amform-form button.amcform-next { background: var(--rc-primary); color: #fff; } .page-revoke-contract .amform-form button.amcform-prev { background: #fff; color: var(--rc-primary); } .page-revoke-contract .amform-form button.amcform-submit, .page-revoke-contract .amform-form button[type="submit"] { color: #fff; background: var(--rc-primary); } .page-revoke-contract .amform-form button.amcform-submit:disabled, .page-revoke-contract .amform-form button[type="submit"]:disabled { color: #fff; background: var(--rc-primary); } .page-revoke-contract .amform-form button.amcform-next:hover { background: var(--rc-primary); } .page-revoke-contract .amform-form button.amcform-prev:hover { background: var(--rc-primary); color: #fff; } .page-revoke-contract .amform-form button.amcform-submit:hover, .page-revoke-contract .amform-form button[type="submit"]:hover { background: var(--rc-primary); } /* Step 1 Next — dominant action, wider */ .page-revoke-contract .amform-form button.amcform-next { min-width: 280px; } /* Prev (Zurück) — outlined secondary */ .page-revoke-contract .amform-form button.amcform-prev { background: #fff; color: var(--rc-primary); border-color: var(--rc-primary); min-width: 140px; } /* Step 2 readonly mirror — looks like a disabled input prefilled with Step 1 value. */ .page-revoke-contract .amcform-page-wrap .field input.rc-readonly, .page-revoke-contract .amcform-page-wrap .field input[readonly] { background: var(--rc-light); color: var(--rc-text); border-color: var(--rc-border); cursor: not-allowed; box-shadow: none; } .page-revoke-contract .amcform-page-wrap .field input.rc-readonly:focus, .page-revoke-contract .amcform-page-wrap .field input[readonly]:focus { outline: 0; border-color: var(--rc-border); box-shadow: none; } /* Success message */ .page-revoke-contract .amcform-response-message, .page-revoke-contract .message.success { background: var(--rc-light); color: var(--rc-primary-dark); border: 1px solid var(--rc-border); border-radius: 4px; padding: 16px 20px; margin: 20px 0; } /* ========================================================= * Wireframe iteration 2 — single rose band, both steps visible, * active highlighted. * ========================================================= */ /* Header: rose band, both steps side by side */ .page-revoke-contract .amcform-page-titles.ui-tabs-nav { display: flex; background: var(--rc-primary); border-radius: 8px 8px 0 0; overflow: hidden; padding: 0; margin: 0; } .page-revoke-contract .amcform-page-titles .amcform-title-wrap { flex: 1 1 0; min-width: 0; margin: 0; background: transparent; border: 0; border-radius: 0; float: none; position: static; } .page-revoke-contract .amcform-page-titles .amcform-title-wrap + .amcform-title-wrap { border-left: 1px solid rgba(255, 255, 255, 0.25); } .page-revoke-contract .amcform-page-titles .amcform-title { display: block; float: none; width: 100%; max-width: none; box-sizing: border-box; text-align: left; padding: 10px 24px; line-height: 1.25; background: transparent; border-bottom: 0; } /* All step text white — beats theme link-blue + Amasty active-blue */ .page-revoke-contract .amcform-page-titles .amcform-title, .page-revoke-contract .amcform-page-titles .amcform-title:hover, .page-revoke-contract .amcform-page-titles .amcform-label, .page-revoke-contract .amcform-page-titles .ui-tabs-active .amcform-title, .page-revoke-contract .amcform-page-titles .ui-tabs-active .amcform-label, .page-revoke-contract .amcform-page-titles .amcform-title-wrap.ui-state-active .amcform-label { color: #fff; text-decoration: none; } /* No step-number circle in this layout */ .page-revoke-contract .amcform-page-titles .amcform-step { display: none; } .page-revoke-contract .amcform-page-titles .amcform-label { display: block; width: 100%; max-width: none; white-space: normal; } /* Active = contrast only (opacity). A filled bg would pop a notch below * the band due to jQuery UI's 1px tab overhang — reset margin/border instead. */ .page-revoke-contract .amcform-page-titles .ui-tabs-active, .page-revoke-contract .amcform-page-titles .ui-state-active { margin: 0; padding: 0; border: 0; } .page-revoke-contract .amcform-page-titles .ui-tabs-active .amcform-title { opacity: 1; background: transparent; box-shadow: none; } .page-revoke-contract .amcform-page-titles .amcform-title-wrap:not(.ui-tabs-active) .amcform-title { opacity: 0.5; } /* Mobile: stack step headers vertically */ @media (max-width: 767px) { .page-revoke-contract .amform-form { margin: 16px auto; } .page-revoke-contract .amcform-page-titles.ui-tabs-nav { flex-direction: column; } .page-revoke-contract .amcform-page-titles .amcform-title-wrap + .amcform-title-wrap { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.25); } .page-revoke-contract .amcform-page-titles .amcform-title { padding: 9px 16px; } .page-revoke-contract .amcform-page-wrap .field.form-group { padding: 0 16px; } .page-revoke-contract .amcform-toolbar { padding: 10px 16px; } .page-revoke-contract .amform-form button.amcform-next, .page-revoke-contract .amform-form button.amcform-submit, .page-revoke-contract .amform-form button.amcform-prev { width: 100%; min-width: 0; } }