.lords-periods {
--la-primary: var(--e-global-color-primary, #df604f);
--la-secondary: var(--e-global-color-secondary, #366d7e);
--la-text: var(--e-global-color-text, #0b2d39);
--flash-red: #f15547;
--lords-modal-text: #0b2d39;
--la-white: #fff;
display: grid;
gap: 64px;
color: var(--la-text);
font-family:
var(--e-global-typography-text-font-family, "Raleway"), sans-serif;
}
.lords-periods__header p {
margin: 0 0 6px;
color: var(--la-primary);
font-size: 12px;
font-weight: 900;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.lords-periods__header h2 {
margin: 0 0 24px;
font-size: clamp(30px, 5vw, 56px);
font-weight: 900;
line-height: 1;
text-transform: uppercase;
}
.lords-periods__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
}
.lords-offer-card {
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--la-text) 15%, white);
border-radius: 18px;
background: var(--la-white);
box-shadow: 0 18px 45px rgba(11, 45, 57, 0.08);
}
.lords-offer-card > img {
display: block;
width: 100%;
height: 230px;
object-fit: cover;
}
.lords-offer-card__body {
display: grid;
gap: 12px;
padding: 22px;
}
.lords-offer-card__tag {
justify-self: start;
padding: 7px 10px;
border-radius: 999px;
background: color-mix(in srgb, var(--la-primary) 12%, white);
color: var(--la-primary);
font-size: 11px;
font-weight: 900;
text-transform: uppercase;
}
.lords-offer-card h3,
.lords-offer-card p {
margin: 0;
}
.lords-offer-card h3 {
font-size: 24px;
font-weight: 900;
}
.lords-offer-card dl {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 0;
}
.lords-offer-card dt {
color: var(--la-primary);
font-size: 10px;
font-weight: 900;
text-transform: uppercase;
}
.lords-offer-card dd {
margin: 3px 0 0;
font-weight: 800;
}
.lords-offer-card__action {
display: inline-flex;
justify-content: center;
margin-top: 5px;
padding: 13px 16px;
border: 0;
border-radius: 10px;
background: var(--la-text);
color: white;
font: inherit;
font-weight: 900;
cursor: pointer;
}
.lords-offer-card__action:hover,
.lords-offer-card__action:focus {
background: var(--la-primary);
}
.lords-offer-card__action.is-disabled {
opacity: 0.5;
cursor: not-allowed;
}
.lords-periods__empty {
grid-column: 1/-1;
padding: 24px;
border: 1px dashed #bbc7ca;
border-radius: 14px;
}
.lords-modal[hidden] {
display: none;
}
.lords-modal {
position: fixed;
z-index: 100000;
inset: 0;
display: grid;
place-items: center;
padding: 16px;
color: var(--lords-modal-text);
}
.lords-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(11, 45, 57, 0.78);
backdrop-filter: blur(6px);
}
.lords-modal__dialog {
position: relative;
width: min(620px, 100%);
max-height: min(760px, calc(100dvh - 32px));
overflow: auto;
box-sizing: border-box;
border: 1px solid rgba(11, 45, 57, 0.2);
border-top: 5px solid var(--flash-red);
background: var(--la-white);
box-shadow: 0 18px 45px rgba(11, 45, 57, 0.18);
}
.lords-modal__header {
position: relative;
padding: 28px 68px 22px 28px;
border-bottom: 1px solid #dce5e7;
}
.lords-modal__eyebrow {
margin: 0 0 8px;
color: var(--flash-red);
font-size: 11px;
font-weight: 900;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.lords-modal__header h2 {
margin: 0;
color: var(--lords-modal-text);
font-size: 30px;
font-weight: 900;
line-height: 1.05;
text-transform: uppercase;
}
.lords-modal__detail {
margin: 14px 0 0;
padding-left: 12px;
border-left: 3px solid var(--flash-red);
color: #405962;
font-size: 14px;
font-weight: 700;
line-height: 1.45;
}
.lords-modal__close {
position: absolute;
top: 22px;
right: 22px;
display: grid;
width: 38px;
height: 38px;
place-items: center;
padding: 0;
border: 1px solid #c8d5d8;
background: var(--la-white);
color: var(--lords-modal-text);
font-size: 27px;
line-height: 1;
cursor: pointer;
}
.lords-modal__close:hover,
.lords-modal__close:focus-visible {
border-color: var(--flash-red);
background: var(--flash-red);
color: var(--la-white);
}
.lords-modal__form {
padding: 24px 28px 28px;
}
.lords-modal.is-success .lords-modal__header,
.lords-modal.is-success .lords-modal__form {
display: none !important;
}
.lords-modal__success[hidden] {
display: none !important;
}
.lords-modal__success {
position: relative;
display: grid;
gap: 14px;
padding: 42px 28px 28px;
}
.lords-modal__success-close {
position: absolute !important;
top: 14px !important;
right: 14px !important;
display: grid !important;
width: 38px !important;
height: 38px !important;
margin: 0 !important;
padding: 0 !important;
place-items: center;
border: 1px solid #c8d5d8 !important;
border-radius: 50% !important;
background: var(--la-white) !important;
background-color: var(--la-white) !important;
box-shadow: none !important;
color: var(--lords-modal-text) !important;
cursor: pointer !important;
font-family: inherit !important;
font-size: 27px !important;
font-weight: 400 !important;
line-height: 1 !important;
text-align: center !important;
text-decoration: none !important;
text-transform: none !important;
appearance: none !important;
-webkit-appearance: none !important;
}
.lords-modal__success-close:hover,
.lords-modal__success-close:focus-visible {
border-color: var(--flash-red) !important;
background: var(--flash-red) !important;
background-color: var(--flash-red) !important;
color: var(--la-white) !important;
}
.lords-modal__success h2 {
margin: 0;
color: var(--lords-modal-text);
font-size: 30px;
font-weight: 900;
line-height: 1.05;
text-transform: uppercase;
}
.lords-modal__success-message,
.lords-modal__success-context {
margin: 0;
color: #405962;
font-size: 14px;
font-weight: 700;
line-height: 1.55;
}
.lords-modal__success-message strong {
color: var(--lords-modal-text);
}
.lords-modal__success-details {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin: 4px 0 0;
}
.lords-modal__success-details > div {
display: grid;
gap: 5px;
min-width: 0;
padding: 11px 12px;
border: 1px solid #dce5e7;
background: #f7f9f9;
}
.lords-modal__success-details dt {
color: var(--flash-red);
font-size: 10px;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.lords-modal__success-details dd {
margin: 0;
overflow-wrap: anywhere;
color: var(--lords-modal-text);
font-size: 13px;
font-weight: 800;
line-height: 1.4;
}
.lords-modal__fields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 17px 18px;
}
.lords-modal__participants {
display: grid;
gap: 16px;
margin-top: 22px;
padding-top: 20px;
border-top: 1px solid #dce5e7;
}
.lords-modal__section-header {
display: flex;
align-items: end;
justify-content: space-between;
gap: 18px;
}
.lords-modal__section-label,
.lords-modal__section-hint {
margin: 0;
}
.lords-modal__section-label {
color: var(--flash-red);
font-size: 11px;
font-weight: 900;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.lords-modal__section-hint {
margin-top: 5px;
color: #52666c;
font-size: 13px;
font-weight: 700;
}
.lords-modal__add,
.lords-modal__remove {
border: 0;
border-radius: 0;
font: inherit;
font-weight: 900;
cursor: pointer;
text-transform: uppercase;
}
.lords-modal__add {
flex: 0 0 auto;
padding: 13px 16px;
background: var(--flash-red);
color: var(--la-white);
font-size: 12px;
letter-spacing: 0.03em;
}
.lords-modal__add:hover,
.lords-modal__add:focus-visible {
background: var(--lords-modal-text);
}
.lords-modal__add:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.lords-modal__participant-list {
display: grid;
gap: 12px;
}
.lords-modal__participant {
position: relative;
min-inline-size: 0;
margin: 0;
padding: 16px;
border: 1px solid color-mix(in srgb, var(--lords-modal-text) 20%, white);
background: var(--la-white);
}
.lords-modal__participant legend {
padding: 0 8px 0 0;
color: var(--lords-modal-text);
font-size: 12px;
font-weight: 900;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.lords-modal__remove {
position: absolute;
top: 14px;
right: 14px;
padding: 0;
background: transparent;
color: var(--flash-red);
font-size: 10px;
letter-spacing: 0.04em;
}
.lords-modal__remove:hover,
.lords-modal__remove:focus-visible {
color: var(--lords-modal-text);
text-decoration: underline;
}
.lords-modal__participant-fields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 17px 18px;
}
.lords-modal label {
display: grid;
gap: 7px;
color: var(--lords-modal-text);
font-size: 12px;
font-weight: 900;
letter-spacing: 0.04em;
line-height: 1.2;
text-transform: uppercase;
}
.lords-modal input,
.lords-modal select,
.lords-modal textarea {
width: 100%;
box-sizing: border-box;
min-height: 46px;
padding: 11px 12px;
border: 1px solid #b8c8cc;
background: var(--la-white);
color: var(--lords-modal-text);
font: inherit;
line-height: 1.35;
}
.lords-modal textarea {
min-height: 116px;
resize: vertical;
}
.lords-modal input::placeholder,
.lords-modal textarea::placeholder {
color: #6b7e84;
}
.lords-modal input:focus,
.lords-modal select:focus,
.lords-modal textarea:focus {
border-color: var(--flash-red);
outline: 2px solid var(--flash-red);
outline-offset: 1px;
}
.lords-modal input[aria-invalid="true"],
.lords-modal select[aria-invalid="true"],
.lords-modal textarea[aria-invalid="true"] {
border-color: var(--flash-red);
}
.lords-modal__wide {
grid-column: 1/-1;
}
.lords-modal__message {
display: grid;
gap: 7px;
margin-top: 22px;
}
.lords-modal__status {
min-height: 0;
margin: 20px 0 14px;
padding: 10px 12px;
border: 1px solid #f2c7c2;
border-left: 4px solid var(--flash-red);
background: #fff3f1;
color: var(--lords-modal-text);
font-size: 13px;
font-weight: 700;
line-height: 1.45;
}
.lords-modal__status:empty {
display: none;
}
.lords-modal__status ul {
display: grid;
gap: 5px;
margin: 0;
padding-left: 18px;
}
.lords-modal__status li {
margin: 0;
}
.lords-modal__status[data-state="loading"] {
border-color: #c8d5d8;
border-left-color: var(--lords-modal-text);
background: #f4f7f7;
}
.lords-modal__status[data-state="success"] {
border-color: #b9d9c8;
border-left-color: #2e7d55;
background: #eff8f2;
color: #20583d;
}
.lords-modal__status[data-state="error"] {
border-color: #f2c7c2;
border-left-color: var(--flash-red);
background: #fff3f1;
}
.lords-modal__submit {
display: inline-flex;
width: 100%;
min-height: 48px;
align-items: center;
justify-content: center;
margin-top: 24px;
padding: 13px 20px;
border: 0;
background: var(--flash-red);
color: #fff;
font: inherit;
font-weight: 900;
letter-spacing: 0.04em;
cursor: pointer;
text-transform: uppercase;
}
.lords-modal__submit:hover,
.lords-modal__submit:focus-visible {
background: var(--lords-modal-text);
}
.lords-modal__submit:disabled {
opacity: 0.62;
cursor: wait;
}
.lords-honeypot {
position: absolute !important;
left: -9999px !important;
}
.lords-modal-open {
overflow: hidden;
}
@media (max-width: 900px) {
.lords-periods__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 620px) {
.lords-periods__grid,
.lords-modal__fields,
.lords-modal__participant-fields {
grid-template-columns: 1fr;
}
.lords-modal__wide {
grid-column: auto;
}
.lords-offer-card > img {
height: 200px;
}
.lords-modal__dialog {
max-height: calc(100dvh - 24px);
}
.lords-modal__header {
padding: 24px 56px 19px 18px;
}
.lords-modal__header h2 {
font-size: 26px;
}
.lords-modal__close {
top: 17px;
right: 17px;
}
.lords-modal__form {
padding: 20px 18px 22px;
}
.lords-modal__section-header {
align-items: stretch;
flex-direction: column;
}
.lords-modal__add {
width: 100%;
}
}.lords-periods {
--la-primary: var(--e-global-color-primary, #df604f);
--flash-red: #f15547;
--la-text: var(--e-global-color-text, #0b2d39);
--la-white: #fff;
color: var(--la-text);
font-family: var(
--e-global-typography-text-font-family,
"Raleway",
sans-serif
);
}
.lords-periods .lords-periods__grid,
.lords-periods .lords-periods__grid * {
box-sizing: border-box;
}
.lords-periods__grid {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 22px;
align-items: start;
min-width: 0;
margin-left: 0;
padding-left: 0;
}
.lords-offer-card {
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
overflow: hidden;
width: 320px;
max-width: 100%;
height: 460px;
border: 1px solid color-mix(in srgb, var(--la-text) 100%, white);
border-radius: 0;
background: var(--la-white);
box-shadow: 0 18px 45px rgba(11, 45, 57, 0.08);
}
.lords-offer-card-media {
position: relative;
flex: 0 0 230px;
overflow: hidden;
}
.lords-offer-card-media > img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.lords-offer-card-body {
position: relative;
z-index: 2;
display: flex;
flex: 1 1 auto;
min-height: 0;
flex-direction: column;
padding: 20px;
pointer-events: auto;
}
.lords-offer-card-tag {
justify-self: start;
margin: 0 0 6px;
color: var(--flash-red);
font-size: 11px;
font-weight: 900;
text-transform: uppercase;
}
.lords-offer-card-tag--custom {
position: absolute;
top: 16px;
left: 16px;
z-index: 2;
margin: 0;
padding: 7px 10px;
background: var(--la-white);
color: var(--flash-red);
text-transform: none;
}
.lords-offer-card h3,
.lords-offer-card p,
.lords-offer-card dd {
margin: 0;
text-align: left;
}
.lords-offer-card h3 {
display: -webkit-box;
flex: 0 0 auto;
overflow: hidden;
font-size: 1.3em;
font-style: italic;
font-weight: 900;
line-height: 1.3;
text-transform: uppercase;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
}
.lords-offer-card p,
.lords-offer-card dd {
overflow-wrap: anywhere;
font-size: 14px;
font-style: italic;
font-weight: 600;
line-height: 1.25;
text-transform: uppercase;
}
.lords-offer-card dl {
display: grid;
flex: 0 0 auto;
grid-template-columns: 1fr 1fr;
gap: 10px;
align-items: start;
min-width: 0;
min-height: 64px;
margin: 0;
padding-top: 2px;
}
.lords-offer-card dl > div {
min-width: 0;
}
.lords-offer-card dt {
margin-bottom: 5px;
color: var(--flash-red);
font-size: 10px;
font-weight: 900;
line-height: 1.3;
text-transform: uppercase;
}
.lords-offer-card-action {
position: relative;
z-index: 3;
display: inline-flex;
justify-content: center;
width: 100%;
flex: 0 0 auto;
margin-top: auto;
padding: 13px 16px;
border: 0;
background: var(--flash-red);
color: white;
font-size: 16px;
font-style: italic;
font-weight: 900;
text-transform: uppercase;
cursor: pointer;
pointer-events: auto;
}
.lords-offer-card-action:hover,
.lords-offer-card-action:focus {
background: var(--la-text);
color: var(--la-white);
}
.lords-offer-card-action.is-disabled,
.lords-offer-card-action:disabled {
opacity: 0.5;
cursor: not-allowed;
}
@media (max-width: 900px) {
.lords-periods__grid {
flex-direction: column;
align-items: center;
}
}
@media (max-width: 620px) {
.lords-offer-card dl {
grid-template-columns: 1fr;
}
}