:root { --zr-accent: var(--e-global-color-primary, #993333);
--zr-accent-dark: #6a2826;
--zr-text: var(--e-global-color-text, #333333);
--zr-muted: #6b6b6b;
--zr-border: #e3e0df;
--zr-bg: #ffffff;
--zr-soft: #f6f3f2;
--zr-radius: 6px;
} .zr-card,
.zr-modal {
font-family: var(--e-global-typography-text-font-family), sans-serif;
}
.zr-card__title,
.zr-card__cat,
.zr-modal__title,
.zr-modal__eyebrow,
.zr-success__message,
.zr-btn,
.zr-field span {
font-family: var(--e-global-typography-primary-font-family), sans-serif;
} .zr-grid {
display: grid;
grid-template-columns: repeat(var(--zr-columns, 3), minmax(0, 1fr));
gap: 24px;
}
@media (max-width: 1024px) {
.zr-grid { grid-template-columns: repeat(min(var(--zr-columns, 3), 2), minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.zr-grid { grid-template-columns: 1fr; }
}
.zr-card {
display: flex;
flex-direction: column;
background: var(--zr-bg);
border: 1px solid var(--zr-border);
border-radius: var(--zr-radius);
overflow: hidden;
color: var(--zr-text);
transition: box-shadow .2s ease, transform .2s ease;
}
.zr-grid .zr-card:hover {
box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
transform: translateY(-2px);
}
.zr-card__cover {
aspect-ratio: 4 / 3;
background: var(--zr-soft);
overflow: hidden;
}
.zr-card__cover img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.zr-card__body {
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
padding: 20px 22px 22px;
}
.zr-card__cat {
color: var(--zr-accent);
font-size: 12px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
}
.zr-card__title {
margin: 0;
color: var(--zr-text);
font-size: 20px;
line-height: 1.3;
}
.zr-card__excerpt {
color: var(--zr-muted);
font-size: 15px;
line-height: 1.55;
}
.zr-card__excerpt p { margin: 0; }
.zr-card__footer {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin-top: auto;
padding-top: 6px;
}
.zr-card__meta {
color: var(--zr-muted);
font-size: 13px;
}
.zr-card--compact {
margin-top: 32px;
background: var(--zr-soft);
border: 0;
border-left: 4px solid var(--zr-accent);
} a.zr-btn,
a.zr-btn:visited,
button.zr-btn,
.zr-modal button.zr-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 13px 24px;
border: 2px solid var(--zr-accent) !important;
border-radius: var(--zr-radius);
background: var(--zr-accent) !important;
color: #fff !important;
font-family: var(--e-global-typography-primary-font-family), sans-serif;
font-size: 15px;
font-weight: 600;
letter-spacing: .02em;
line-height: 1.2;
text-decoration: none;
text-transform: none;
box-shadow: none;
cursor: pointer;
transition: background-color .2s ease, border-color .2s ease;
}
a.zr-btn:hover,
a.zr-btn:focus-visible,
button.zr-btn:hover,
button.zr-btn:focus-visible {
border-color: var(--zr-accent-dark) !important;
background: var(--zr-accent-dark) !important;
color: #fff !important;
}
.zr-btn:focus-visible {
outline: 2px solid var(--zr-accent);
outline-offset: 2px;
}
.zr-btn[disabled] {
opacity: .7;
cursor: wait;
}
.zr-btn--block { width: 100%; }
.zr-notice {
color: var(--zr-muted);
font-style: italic;
} .zr-modal-open { overflow: hidden; }
.zr-modal[hidden] { display: none; }
.zr-modal {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.zr-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(20, 12, 12, .6);
}
.zr-modal__dialog {
position: relative;
width: 100%;
max-width: 560px;
max-height: calc(100vh - 32px);
overflow-y: auto;
padding: 36px 36px 28px;
border-top: 5px solid var(--zr-accent);
border-radius: 8px;
background: var(--zr-bg);
color: var(--zr-text);
box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}
@media (max-width: 640px) {
.zr-modal__dialog { padding: 28px 20px 20px; }
}
.zr-modal .zr-modal__close {
position: absolute;
top: 8px;
right: 10px;
width: 40px;
height: 40px;
padding: 0;
border: 0 !important;
border-radius: 50%;
background: transparent !important;
color: var(--zr-muted) !important;
font-size: 28px;
line-height: 1;
cursor: pointer;
}
.zr-modal .zr-modal__close:hover { color: var(--zr-accent) !important; background: var(--zr-soft) !important; }
.zr-modal__eyebrow {
margin: 0 0 6px;
color: var(--zr-accent);
font-size: 13px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
}
.zr-modal__title {
margin: 0 0 10px;
color: var(--zr-accent);
font-size: 26px;
font-weight: 700;
line-height: 1.25;
}
.zr-modal__intro {
margin: 0 0 20px;
color: var(--zr-muted);
font-size: 15px;
line-height: 1.55;
} .zr-form {
display: flex;
flex-direction: column;
gap: 14px;
}
.zr-form__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
@media (max-width: 640px) {
.zr-form__row { grid-template-columns: 1fr; }
}
.zr-field {
display: flex;
flex-direction: column;
gap: 6px;
margin: 0;
font-size: 14px;
font-weight: 600;
}
.zr-field input {
width: 100%;
padding: 11px 12px;
border: 1px solid #cfcac8;
border-radius: 4px;
background: #fff;
color: var(--zr-text);
font-family: var(--e-global-typography-text-font-family), sans-serif;
font-size: 15px;
font-weight: 400;
}
.zr-field input:focus {
border-color: var(--zr-accent);
outline: 2px solid rgba(153, 51, 51, .18);
outline-offset: 0;
}
.zr-check {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 0;
color: var(--zr-text);
font-size: 14px;
font-weight: 400;
line-height: 1.45;
cursor: pointer;
}
.zr-check input {
flex: 0 0 auto;
width: 18px;
height: 18px;
margin: 1px 0 0;
accent-color: var(--zr-accent);
}
.zr-check a { color: var(--zr-accent); text-decoration: underline; }
.zr-form__error {
margin: 0;
padding: 10px 12px;
border-radius: 4px;
background: #fbeaea;
color: #8a1f1f;
font-size: 14px;
}
.zr-form__error[hidden] { display: none; }
.zr-form__note {
margin: 0;
color: var(--zr-muted);
font-size: 12px;
text-align: center;
}
.zr-hp {
position: absolute !important;
left: -9999px !important;
width: 1px;
height: 1px;
overflow: hidden;
} .zr-modal__success {
padding: 12px 0;
text-align: center;
}
.zr-modal__success[hidden] { display: none; }
.zr-modal__success svg { color: #2e7d4f; }
.zr-success__message {
margin: 12px 0 8px;
font-size: 18px;
font-weight: 600;
}
.zr-success__link { color: var(--zr-accent); font-size: 14px; } .zr-type {
margin: 0;
padding: 0;
border: 0;
min-width: 0;
}
.zr-type__legend {
margin: 0 0 8px;
padding: 0;
color: var(--zr-text);
font-family: var(--e-global-typography-primary-font-family), sans-serif;
font-size: 14px;
font-weight: 600;
}
.zr-type__options {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
@media (max-width: 480px) {
.zr-type__options { grid-template-columns: 1fr; }
}
.zr-type__option {
position: relative;
margin: 0;
cursor: pointer;
}
.zr-type__option input {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
}
.zr-type__option span {
display: flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 8px 10px;
border: 1.5px solid #cfcac8;
border-radius: var(--zr-radius);
background: #fff;
color: var(--zr-text);
font-family: var(--e-global-typography-primary-font-family), sans-serif;
font-size: 14px;
font-weight: 600;
line-height: 1.2;
text-align: center;
transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.zr-type__option:hover span {
border-color: var(--zr-accent);
}
.zr-type__option input:focus-visible + span {
outline: 2px solid var(--zr-accent);
outline-offset: 2px;
}
.zr-type__option input:checked + span {
border-color: var(--zr-accent);
background: var(--zr-accent);
color: #fff;
} .zr-form__fields {
display: flex;
flex-direction: column;
gap: 14px;
animation: zr-fade-in .25s ease;
}
.zr-form__fields[hidden],
.zr-form .zr-field[hidden] {
display: none !important;
}
.zr-field input[name="tax_code"] {
text-transform: uppercase;
letter-spacing: .04em;
}
@keyframes zr-fade-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.zr-form__fields { animation: none; }
}