leaves only
* the list's rem(16) bottom margin between the two. _legal-modal.scss already does this for
* the popup; without it here the same content is spaced differently on the standalone page.
*/
}
.user-editable-content h2, .user-editable-content h3, .user-editable-content h4 {
margin-top: 1.75rem;
}
.user-editable-content > :first-child {
margin-top: 0;
}
/* Default table settings */
table {
width: 100%;
margin-bottom: 1.875rem;
overflow: hidden;
border: none;
border-collapse: collapse;
}
table td,
table th {
padding: 0.375rem 0.1875rem;
}
table td:first-child,
table th:first-child {
padding-left: 0;
}
table td:last-child,
table th:last-child {
padding-right: 0;
}
table thead th {
vertical-align: middle;
text-align: center;
font-weight: normal;
color: #4D4D4D;
background-color: #F2F2F2;
font-size: 0.9375rem;
border-right: 1px solid #ffffff;
}
table thead th:last-child {
border-right: 0;
}
table tbody tr td {
vertical-align: middle;
font-weight: 400;
line-height: 1.2em;
}
table tbody tr {
/*
&:not(.no_hover,.floor_divider):hover td {
background-color: $color-primary;
color: #ffffff;
}
*/
}
input[type=button]:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]),
input[type=submit]:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]),
button:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]),
.button:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]) {
display: inline-block;
min-width: 16.125rem;
max-width: 100%;
padding: 1.25rem 0.625rem;
color: #222222;
font-size: 1.0625rem;
font-family: "Mukta";
font-weight: 700;
background-color: transparent;
border: 1px solid #222222;
border-shadow: none;
cursor: pointer;
border-radius: 0.5rem;
transform: scale(1);
letter-spacing: 0.12em;
transition: all 0.3s ease;
box-sizing: border-box;
user-select: none;
}
input[type=button]:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]):hover, input[type=button]:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]).active,
input[type=submit]:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]):hover,
input[type=submit]:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]).active,
button:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]):hover,
button:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]).active,
.button:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]):hover,
.button:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]).active {
color: rgb(23.8011204482%, 23.8011204482%, 22.1596638655%);
transform: scale(0.95);
}
input[type=button]:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]).mw-276,
input[type=submit]:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]).mw-276,
button:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]).mw-276,
.button:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]).mw-276 {
min-width: 17.25rem !important;
}
input[type=button]:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]).smaller,
input[type=submit]:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]).smaller,
button:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]).smaller,
.button:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]).smaller {
padding: 0.75rem 0.625rem;
}
input[type=button]:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]).margin-bottom,
input[type=submit]:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]).margin-bottom,
button:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]).margin-bottom,
.button:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]).margin-bottom {
margin-bottom: 1rem;
}
input[type=button]:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]) i,
input[type=submit]:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]) i,
button:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]) i,
.button:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]) i {
display: block;
padding-left: 0.75rem;
opacity: 0.27;
font-size: 0.875rem;
}
input[type=button]:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]) i.ct-icon-arrow-next-3,
input[type=submit]:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]) i.ct-icon-arrow-next-3,
button:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]) i.ct-icon-arrow-next-3,
.button:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]) i.ct-icon-arrow-next-3 {
font-size: 1.375rem;
}
input[type=button]:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]).add_shadow,
input[type=submit]:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]).add_shadow,
button:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]).add_shadow,
.button:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]).add_shadow {
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.16);
}
input[type=button]:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]).full-width,
input[type=submit]:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]).full-width,
button:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]).full-width,
.button:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]).full-width {
display: block;
width: 100%;
min-width: 0 !important;
padding-left: 0;
padding-right: 0;
text-align: center;
box-sizing: border-box;
}
@media (max-width: 479px) {
input[type=button]:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]).bp0-full-width,
input[type=submit]:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]).bp0-full-width,
button:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]).bp0-full-width,
.button:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]).bp0-full-width {
display: block;
width: 100%;
min-width: 0 !important;
padding-left: 0;
padding-right: 0;
box-sizing: border-box;
}
}
@media (min-width: 480px) and (max-width: 730px) {
input[type=button]:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]).bp1-full-width,
input[type=submit]:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]).bp1-full-width,
button:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]).bp1-full-width,
.button:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]).bp1-full-width {
display: block;
width: 100%;
min-width: 0 !important;
padding-left: 0;
padding-right: 0;
box-sizing: border-box;
}
}
@media (max-width: 730px) {
input[type=button]:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]).mobile-full-width,
input[type=submit]:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]).mobile-full-width,
button:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]).mobile-full-width,
.button:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]).mobile-full-width {
display: block;
width: 100%;
min-width: 0 !important;
padding-left: 0;
padding-right: 0;
box-sizing: border-box;
}
}
@media (min-width: 731px) {
input[type=button]:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]).hide_on_desktop,
input[type=submit]:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]).hide_on_desktop,
button:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]).hide_on_desktop,
.button:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]).hide_on_desktop {
display: none;
}
}
@media (max-width: 730px) {
input[type=button]:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]).hide_on_mobile,
input[type=submit]:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]).hide_on_mobile,
button:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]).hide_on_mobile,
.button:not(.fancybox-button):not(.b-tl):not(.c-hamburger):not(.slider-button):not(.pm):not(.swal2-styled):not(.newsletter-submit):not(.comp_04-submit):not(.comp_10-submit):not(.comp_07-submit):not(.comp_08-tab):not(.comp_09-tab):not(.comp_09-print):not(.comp_13-print):not(.comp_12-submit):not(.po_signup-submit):not(.legal-modal-close):not(.kiosk-fullscreen):not(.soldout-reset):not([class^=vjs-]).hide_on_mobile {
display: none;
}
}
/*
form {
input[type="button"],
input[type="submit"],
button,
.button {
float: right;
}
}
*/
label:not(.b-tg):not(.soldout-item) {
display: block;
width: 100%;
margin: 0 0 0.5rem;
padding: 0;
line-height: 1.4;
font-weight: 400;
font-size: 0.875rem;
color: #222222;
cursor: pointer;
}
label:not(.b-tg):not(.soldout-item).form-disclaimer {
margin-bottom: 0 !important;
font-size: 0.9375rem;
color: #222222;
line-height: 1.2em;
}
label:not(.b-tg):not(.soldout-item).form-disclaimer.smaller {
font-size: 0.8125rem;
}
label:not(.b-tg):not(.soldout-item).form-disclaimer a {
color: #222222;
text-decoration: underline;
}
label:not(.b-tg):not(.soldout-item).form-disclaimer a:hover {
text-decoration: none;
}
label:not(.b-tg):not(.soldout-item).text_decoration_none {
text-decoration: none !important;
}
p.form-disclaimer {
margin-bottom: 0 !important;
font-size: 0.9375rem;
color: #222222;
}
p.form-disclaimer a {
color: #222222;
text-decoration: underline;
}
p.form-disclaimer a:hover {
text-decoration: none;
}
input[type=email],
input[type=number],
input[type=password],
input[type=tel],
input[type=text],
input[type=url],
textarea {
width: 100%;
padding: 0.75rem 0.75rem;
margin-bottom: 1.375rem !important;
background-color: #ffffff;
font-size: 1.125rem;
text-align: left;
color: #222222;
line-height: 1.2em;
font-family: "Mukta", sans-serif;
font-weight: 400;
border: 1px solid #222222;
border-radius: 6px;
transition: all 0.4s ease;
box-sizing: border-box;
}
input[type=email].required.error,
input[type=number].required.error,
input[type=password].required.error,
input[type=tel].required.error,
input[type=text].required.error,
input[type=url].required.error,
textarea.required.error {
border: 1px solid #FF4949;
box-shadow: #000000 0px 0px 0px, inset 0px 5px 6px -0px rgba(255, 73, 73, 0.4);
}
input[type=email].valid,
input[type=number].valid,
input[type=password].valid,
input[type=tel].valid,
input[type=text].valid,
input[type=url].valid,
textarea.valid {
border: 1px solid #1d1d1b;
box-shadow: #000000 0px 0px 0px, inset 0px 5px 6px -0px rgba(29, 29, 27, 0.4);
}
textarea {
min-height: 3em;
line-height: 1.4;
resize: none;
}
::-webkit-input-placeholder {
color: #666666;
text-align: left;
}
:-moz-placeholder { /* Firefox 18- */
color: #666666;
text-align: left;
}
::-moz-placeholder { /* Firefox 19+ */
color: #666666;
text-align: left;
}
:-ms-input-placeholder {
color: #666666;
text-align: left;
}
input.error::-webkit-input-placeholder {
color: #ffffff;
}
input.error:-moz-placeholder {
color: #ffffff;
}
input.error::-moz-placeholder {
color: #ffffff;
}
input.error:-ms-input-placeholder {
color: #ffffff;
}
/* iCheck skins
----------------------------------- */
.icheckbox,
.iradio {
position: relative; /*top:2px;*/
display: inline-block;
width: 24px;
height: 24px;
margin: 0 0.75rem 0 0;
line-height: normal;
vertical-align: baseline;
background-image: none;
background-repeat: repeat;
border: 1px solid #1d1d1b;
cursor: pointer;
background-color: #ffffff;
box-sizing: border-box;
}
.icheckbox.disabled,
.iradio.disabled {
opacity: 0.6 !important;
}
.icheckbox:before,
.iradio:before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 12px;
height: 12px;
background-color: #1d1d1b;
opacity: 0;
transition: all 0.4s ease;
transform: translate(-50%, -50%);
}
.icheckbox.checked:before,
.iradio.checked:before {
opacity: 1;
}
.iradio {
border-radius: 50%;
}
.iradio:before {
border-radius: 50%;
}
.field-checkbox-wrapper {
margin-bottom: 0.75rem !important;
}
.field-checkbox-wrapper label {
cursor: pointer;
}
.google-map-wrapper {
position: relative;
width: 100%;
height: 200px;
background-color: #ffffff;
/*
border:5px solid #ffffff;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
*/
}
.google-map-wrapper .google-map {
width: 100%;
height: 100%;
}
.google-map-wrapper .google-map-markers {
display: none;
}
.google-map-wrapper img {
max-width: none !important;
}
.google-map-wrapper .gm-style-mtc button {
border-radius: 0;
}
/*
* COMP_01 - HERO SLIDESHOW
*
* Markup: templates/comp_01.php
* Behaviour: js/scripts-parts/comp_01.js ( Slick, fade mode )
*
* THE WHOLE BLOCK IS ONE VIEWPORT. Header + slides + the four points bar have to be visible
* without scrolling, so the points bar lives inside this section and is part of the height
* calculation - it is not a section of its own.
*
* --header-h is declared in scss/layouts/_header.scss, right next to the bar's own height and
* from the same $header-height variable, so the header, the .dummy_header spacer and this
* section can never disagree. It is deliberately CSS rather than a JS measurement - see the
* comment there for what that cost.
*
* min-height, never height: on a short landscape phone the section has to be allowed to grow
* rather than clip the buttons.
*/
.comp_01-wrapper {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
min-height: calc(100vh - var(--header-h));
min-height: calc(100svh - var(--header-h));
background-color: #f4f2ef;
overflow: hidden;
box-sizing: border-box;
}
/*
* SLIDES
*/
.comp_01-slides {
position: relative;
flex: 1 1 auto;
width: 100%;
min-height: 0;
}
.comp_01-slides:not(.slick-initialized) .comp_01-slide + .comp_01-slide {
display: none;
}
/*
* SLIDE HEIGHT
*
* Deliberately NOT height:100% down the chain from the wrapper. .comp_01-slides takes its
* height from flex-grow, which leaves its SPECIFIED height at auto, so a percentage height on
* .slick-list resolves to auto and the whole stack collapses to the height of the text - the
* photo then fills a ~350px band with the rest of the section left empty. Measured, not
* theorised.
*
* So the slide states its own minimum instead and everything above it grows from content.
* min-height, not height, so a slide whose text is taller than the viewport - a long headline
* on a narrow phone - pushes the section taller rather than being clipped.
*
* --comp_01-features-h is published by js/scripts-parts/comp_01.js from the measured points
* bar; the fallback below only has to be close enough for the first paint.
*/
.comp_01-slide {
position: relative;
align-items: center;
overflow: hidden;
box-sizing: border-box;
}
/*
* TWO PROPERTIES THAT NEED THE EXTRA CLASS. vendor/_slick.scss is imported AFTER the modules and
* carries `.slick-initialized .slick-slide { display: block }` and `.slick-slide { min-height:
* 1px }` - both beat anything written at normal specificity above, and both were caught in the
* browser rather than in review. Everything else on .comp_01-slide is uncontested.
*/
.comp_01-wrapper .comp_01-slides .comp_01-slide {
display: flex;
min-height: calc(100vh - var(--header-h) - var(--comp_01-features-h, 6rem));
min-height: calc(100svh - var(--header-h) - var(--comp_01-features-h, 6rem));
}
/*
* PHOTO
*
* Both source images are ~2.4:1 with the food hard right and clean empty table on the left -
* that empty area is where the text sits, so object-position stays right of centre and must
* not be moved to the middle.
*/
.comp_01-media {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 1;
width: auto;
height: auto;
}
.comp_01-media picture {
display: block;
width: 100%;
height: 100%;
}
.comp_01-media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 78% center;
transform: scale(1.02);
will-change: transform;
}
.comp_01-media::after {
content: "";
position: absolute;
left: 0;
top: 0;
z-index: 2;
width: 100%;
height: 100%;
background: linear-gradient(to right, rgba(244, 242, 239, 0.92) 0%, rgba(244, 242, 239, 0.72) 26%, rgba(244, 242, 239, 0) 56%);
pointer-events: none;
}
/*
* TEXT COLUMN
*
* Sized like .main_header-inner ( rem(1280) cap, rem(48) sides ) rather than
* .default_content-wrapper, so the headline starts on the same left edge as the header logo.
*/
.comp_01-inner {
position: relative;
z-index: 3;
width: 100%;
max-width: 80rem;
margin: 0 auto;
padding: 0 3rem;
box-sizing: border-box;
}
.comp_01-content {
max-width: 35rem;
}
.comp_01-title {
margin: 0 0 1.625rem 0;
color: #1d1d1b;
font-size: 4rem;
font-weight: 200;
line-height: 1.05;
text-transform: uppercase;
letter-spacing: 0.005em;
}
.comp_01-rule {
display: block;
width: 4.5rem;
height: 0.25rem;
margin: 0 0 1.875rem 0;
background-color: #be1622;
}
.comp_01-lead {
max-width: 26.875rem;
margin: 0 0 2.5rem 0;
color: #222222;
font-size: 1.1875rem;
font-weight: 400;
line-height: 1.55;
}
.comp_01-buttons {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 1rem;
}
/*
* Deliberately NOT reusing .button - that chain forces min-width rem(258) and an rem(8) radius.
* Same reasoning as the header CTA, and these match its treatment.
*/
.comp_01-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 3.625rem;
padding: 1.0625rem 1.875rem;
font-size: 0.875rem;
font-weight: 600;
line-height: 1.25;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.08em;
transition: all 0.3s ease;
box-sizing: border-box;
}
.comp_01-button.primary {
background-color: #be1622;
color: #ffffff;
}
.comp_01-button.primary:hover, .comp_01-button.primary:focus-visible {
background-color: rgb(60.1701812801%, 6.9670736219%, 10.7672955975%);
color: #ffffff;
}
.comp_01-button.secondary {
background-color: transparent;
color: #1d1d1b;
border: 1px solid rgba(29, 29, 27, 0.4);
}
.comp_01-button.secondary:hover, .comp_01-button.secondary:focus-visible {
background-color: #1d1d1b;
border-color: #1d1d1b;
color: #ffffff;
}
.comp_01-button:focus-visible {
outline: 2px solid #1d1d1b;
outline-offset: 3px;
}
/*
* DOTS
*
* Slick appends ul.slick-dots to .comp_01-slides, its default target. The pills carry a fill
* that runs the length of one autoplay interval, so the timing is visible instead of the slide
* changing out of nowhere. Keep the animation duration in step with autoplaySpeed in
* js/scripts-parts/comp_01.js.
*
* customPaging emits a button carrying .slider-button - that class is already excluded from the
* global button chain in _buttons.scss, which would otherwise give each dot min-width rem(258).
*/
.comp_01-slides ul.slick-dots {
position: absolute;
left: 0;
right: 0;
bottom: 2.5rem;
z-index: 6;
display: flex;
align-items: center;
width: 100%;
max-width: 80rem;
margin: 0 auto;
padding: 0 3rem;
list-style: none;
box-sizing: border-box;
}
.comp_01-slides ul.slick-dots li {
margin: 0 0.75rem 0 0;
padding: 0;
list-style: none;
}
.comp_01-slides ul.slick-dots li:last-child {
margin-right: 0;
}
.comp_01-slides ul.slick-dots button.slider-button {
position: relative;
display: block;
width: 3.375rem;
height: 0.25rem;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgba(29, 29, 27, 0.2);
border: 0;
border-radius: 0;
font-size: 0;
cursor: pointer;
appearance: none;
transition: background-color 0.3s ease;
}
.comp_01-slides ul.slick-dots button.slider-button::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #be1622;
transform: scaleX(0);
transform-origin: left center;
}
.comp_01-slides ul.slick-dots button.slider-button:hover {
background-color: rgba(29, 29, 27, 0.38);
}
.comp_01-slides ul.slick-dots button.slider-button:focus-visible {
outline: 2px solid #1d1d1b;
outline-offset: 4px;
}
.comp_01-slides ul.slick-dots li.slick-active button.slider-button::after {
animation: comp_01-dot-progress 7s linear forwards;
}
.comp_01-slides.is-paused ul.slick-dots li.slick-active button.slider-button::after {
animation-play-state: paused;
}
@keyframes comp_01-dot-progress {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
/*
* THE FOUR POINTS
*
* Dark bar, inside the section. Background must stay $color-primary to match the header bar and
* the footer.
*/
.comp_01-features {
position: relative;
z-index: 4;
flex: 0 0 auto;
width: 100%;
background-color: #1d1d1b;
color: #ffffff;
}
.comp_01-features-inner {
width: 100%;
max-width: 80rem;
margin: 0 auto;
padding: 2.6875rem 3rem;
box-sizing: border-box;
}
.comp_01-feature {
display: flex;
align-items: center;
padding-right: 1.875rem;
}
.comp_01-feature:last-child {
padding-right: 0;
}
.comp_01-feature-icon {
flex: 0 0 auto;
display: block;
width: 2.375rem;
height: 2.375rem;
margin-right: 1rem;
color: #ffffff;
}
.comp_01-feature-icon svg {
display: block;
width: 100%;
height: 100%;
}
.comp_01-feature-text {
display: block;
min-width: 0;
}
.comp_01-feature-title {
display: block;
margin-bottom: 0.1875rem;
color: #ffffff;
font-size: 0.875rem;
font-weight: 700;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 0.07em;
}
.comp_01-feature-note {
display: block;
color: rgba(255, 255, 255, 0.66);
font-size: 0.875rem;
font-weight: 400;
line-height: 1.35;
}
/*
* ANIMATION
*
* All of it hangs off Slick's own .slick-current class - no JS timers, so the text can never
* drift out of step with the slide it belongs to.
*/
@keyframes comp_01-kenburns-in {
from {
transform: scale(1.02) translate3d(0, 0, 0);
}
to {
transform: scale(1.15) translate3d(-1.6%, -1.2%, 0);
}
}
@keyframes comp_01-kenburns-out {
from {
transform: scale(1.15) translate3d(1.6%, 0.8%, 0);
}
to {
transform: scale(1.02) translate3d(0, 0, 0);
}
}
/*
* THE ANIMATION IS DECLARED ON EVERY SLIDE AND ONLY PAUSED - it is never added and removed.
*
* It used to live on .slick-current alone. The moment a slide stopped being current the animation
* was gone, its transform snapped back to the resting scale, and because the outgoing slide is
* still fading out for another 900ms you watched the photo jump back to its start position on
* every single change.
*
* Paused instead, the outgoing photo holds exactly where it got to and simply fades away. The
* slides are re-armed afterwards by comp_01.js on Slick's afterChange, once they are invisible.
*/
.comp_01-media img {
animation: comp_01-kenburns-in 14s ease-out forwards;
animation-play-state: paused;
}
.comp_01-slide:nth-child(even) .comp_01-media img {
animation-name: comp_01-kenburns-out;
}
.comp_01-slide.slick-current .comp_01-media img {
animation-play-state: running;
}
.comp_01-slide.is-kenburns-reset .comp_01-media img {
animation: none;
}
.comp_01-rule {
transform-origin: left center;
}
/*
* THE HEADLINE IS TYPED OUT, CHARACTER BY CHARACTER, WITH A CARET.
*
* Every character is its own span carrying --comp_01-char-step, its place in the typing order -
* see templates/comp_01.php. One number, $type-step below, turns that into a delay, so the speed
* of the whole headline is a single value in a single place.
*
* Nothing is clipped or masked here. The characters simply switch on, which is what typing
* actually looks like, and it sidesteps the problem every masked approach on this component ran
* into: Czech accents - Á, Ě, Í, Ř, Ž - paint above the line box at this line-height and get
* sliced by any horizontal mask tight enough to be useful.
*
* The cost, and it is worth knowing: splitting text into spans breaks the text run, so kerning
* between characters is lost. At this size, in uppercase, it is not perceptible - but do not
* copy this pattern onto body copy.
*/
.comp_01-title-row {
display: block;
white-space: pre-wrap;
}
.comp_01-title-char {
display: inline-block;
}
@keyframes comp_01-type-in {
to {
opacity: 1;
}
}
/*
* Resting state, gated on .js-anim, which comp_01.js adds to the wrapper before it initialises
* Slick. The entrance is driven by .slick-current, so without that gate a JS failure would leave
* the headline permanently invisible instead of merely unanimated.
*
* The short duration with no delay is what makes the OUTGOING slide tidy itself away during the
* cross-fade instead of unwinding the full staggered entrance backwards.
*/
.comp_01-wrapper.js-anim .comp_01-title-char {
opacity: 0;
transition: opacity 0.25s ease;
}
.comp_01-wrapper.js-anim .comp_01-rule,
.comp_01-wrapper.js-anim .comp_01-lead,
.comp_01-wrapper.js-anim .comp_01-buttons {
opacity: 0;
transform: translateY(1.75rem);
transition: opacity 0.3s ease, transform 0.3s ease;
transition-delay: 0s;
}
.comp_01-wrapper.js-anim .comp_01-rule {
transform: translateY(1.75rem) scaleX(0);
}
/*
* Entrance. Every delay below is measured from the number of rows the headline actually has
* ( --comp_01-rows, set in the template ), so the rule, the lead and the buttons always start
* after the LAST line has gone - two line and three line headlines both behave.
*/
.comp_01-slide.slick-current .comp_01-title-char {
animation: comp_01-type-in 0.001s linear forwards;
animation-delay: calc(0.1s + var(--comp_01-char-step, 0) * 0.042s);
}
.comp_01-slide.slick-current .comp_01-rule,
.comp_01-slide.slick-current .comp_01-lead,
.comp_01-slide.slick-current .comp_01-buttons {
opacity: 1;
transform: none;
transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.comp_01-slide.slick-current .comp_01-rule {
transform: translateY(0) scaleX(1);
transition-delay: calc(0.14s + var(--comp_01-type-steps, 20) * 0.042s);
}
.comp_01-slide.slick-current .comp_01-lead {
transition-delay: calc(0.26s + var(--comp_01-type-steps, 20) * 0.042s);
}
.comp_01-slide.slick-current .comp_01-buttons {
transition-delay: calc(0.4s + var(--comp_01-type-steps, 20) * 0.042s);
}
/*
* FIRST PAINT HOLD - this is what makes the FIRST slide animate on page load.
*
* Slick applies .slick-current during its own init, and at that point the slide is still going
* through `.slick-slide { display: none }` on its way to `.slick-initialized .slick-slide
* { display: block }`. A property that changes while an element is display:none does not
* transition - the headline simply appeared, fully formed, while every later slide animated
* properly. Flushing the style before init does not help, because the problem is the display
* switch inside init, not the ordering around it.
*
* So .is-holding pins the current slide's entrance back to its resting state, with the
* transitions off so the pin itself is instant, and comp_01.js removes it a frame later - once
* the slide is genuinely laid out and can transition. Five classes deep on purpose: it has to
* outrank the .slick-current entrance above.
*/
.comp_01-wrapper.js-anim.is-holding .comp_01-slide.slick-current .comp_01-title-char {
animation: none;
opacity: 0;
}
.comp_01-wrapper.js-anim.is-holding .comp_01-slide.slick-current .comp_01-rule,
.comp_01-wrapper.js-anim.is-holding .comp_01-slide.slick-current .comp_01-lead,
.comp_01-wrapper.js-anim.is-holding .comp_01-slide.slick-current .comp_01-buttons {
opacity: 0;
transform: translateY(1.75rem);
transition: none;
}
.comp_01-wrapper.js-anim.is-holding .comp_01-slide.slick-current .comp_01-rule {
transform: translateY(1.75rem) scaleX(0);
}
@keyframes comp_01-feature-in {
from {
opacity: 0;
transform: translateY(1rem);
}
to {
opacity: 1;
transform: none;
}
}
.comp_01-feature {
opacity: 0;
animation: comp_01-feature-in 0.7s ease forwards;
animation-delay: calc(0.55s + var(--comp_01-feature-index, 0) * 0.11s);
}
/*
* RESPONSIVE
*/
@media (max-width: 1239px) {
.comp_01-title {
font-size: 3.5rem;
}
}
@media (max-width: 979px) {
.comp_01-media img {
object-position: 82% center;
}
.comp_01-media::after {
background: linear-gradient(to right, rgba(244, 242, 239, 0.96) 0%, rgba(244, 242, 239, 0.86) 34%, rgba(244, 242, 239, 0.1) 68%);
}
.comp_01-inner {
padding: 0 2rem;
}
.comp_01-content {
max-width: 30rem;
}
.comp_01-title {
font-size: 3.125rem;
}
.comp_01-slides ul.slick-dots {
bottom: 2rem;
padding: 0 2rem;
}
.comp_01-features-inner {
padding: 1.5rem 2rem;
}
.comp_01-feature {
padding-right: 1.5rem;
}
.comp_01-feature:nth-child(odd) {
padding-right: 1.5rem;
}
.comp_01-feature:nth-child(even) {
padding-right: 0;
}
.comp_01-feature:nth-child(1), .comp_01-feature:nth-child(2) {
margin-bottom: 1.25rem;
}
}
/*
* STACKED LAYOUT - the photo becomes a band under the text.
*
* KEYED ON SHAPE, NOT ON WIDTH, and that distinction was earned in the browser. Both source
* images are ~2.4:1 with the food hard right; object-fit: cover in a portrait box crops the empty
* left side away entirely and scales the bowl up until it fills the frame. At 820x1180 the
* headline, the lead and both buttons were sitting directly on the food with no clean area left
* anywhere - no scrim rescues that. A width-only breakpoint at 730px missed it, because a
* portrait tablet is not a phone but has exactly the same problem.
*
* 4/3 is the cutoff: 1024x768 ( 4:3 exactly ) still has usable empty table on the left and keeps
* the overlay layout; anything taller than it stacks. column-reverse, because the photo comes
* first in the markup and has to end up second here.
*/
@media (max-width: 979px) and (max-aspect-ratio: 4/3) {
.comp_01-slide {
flex-direction: column-reverse;
align-items: stretch;
}
.comp_01-media {
position: relative;
left: auto;
right: auto;
top: auto;
bottom: auto;
flex: 1 1 auto;
width: 100%;
height: auto;
min-height: 7.1875rem;
}
.comp_01-media img {
position: absolute;
left: 0;
top: 0;
object-position: 72% center;
}
.comp_01-media::after {
display: none;
}
/*
* The top padding is NOT arbitrary. The header's logo badge deliberately overhangs the bottom
* of the bar - rem(150) tall at rem(10) from the top of a rem(120) bar, so rem(40) of it hangs
* into whatever is below. In the overlay layout the headline is vertically centred and clears
* it by a mile; stacked, the text starts at the top of the slide and the badge lands straight
* on the first line. This is that overhang plus breathing room.
*/
.comp_01-inner {
flex: 0 0 auto;
padding: 4.25rem 2rem 2.5rem;
}
.comp_01-content {
max-width: none;
}
.comp_01-lead {
max-width: 35rem;
}
.comp_01-slides ul.slick-dots {
bottom: 1.25rem;
}
}
/*
* PHONE HERO - PHOTO IN FLOW UNDER THE TEXT, SECTION SIZED TO CONTENT.
*
* The mobile crops ( images/comp_01-0x-mobile.webp, served by the at this same
* 730px ) are composed to be shown WHOLE, not cropped. So on a portrait phone the photo stops being
* the cover-filled band from the stacking block above and becomes a full-width image at its own
* natural height, sitting in flow a fixed gap below the headline / lead / buttons on the white field.
*
* The one-viewport rule is also dropped here ( see the min-height:0 notes below ): on a tall phone it
* ballooned the hero to the whole screen with a dead band of empty height inside, so the section is
* left to size to its content and read compact instead - the next section is free to show beneath it.
*
* Scoped to portrait ( max-aspect-ratio: 4/3 ), the same key the stacking block uses, so it never
* reaches the landscape-phone block below - that one keeps the cover treatment on purpose. Every
* property here has to answer one the stacking block set on the same element, because that block
* still runs on a phone.
*/
@media (max-width: 730px) and (max-aspect-ratio: 4/3) {
.comp_01-wrapper {
background-color: #ffffff;
min-height: 0;
}
.comp_01-wrapper .comp_01-slides .comp_01-slide {
min-height: 0;
}
.comp_01-slide {
flex-direction: column;
justify-content: flex-start;
}
.comp_01-wrapper .comp_01-inner {
padding-bottom: 1rem;
}
.comp_01-media {
position: relative;
left: auto;
right: auto;
top: auto;
bottom: auto;
order: 2;
flex: 0 0 auto;
margin-top: auto;
width: 100%;
aspect-ratio: 10/3;
height: auto;
min-height: 0;
overflow: hidden;
}
.comp_01-media picture {
display: block;
width: 100%;
height: 100%;
}
.comp_01-media img {
position: static;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center bottom;
}
.comp_01-media img,
.comp_01-slide:nth-child(even) .comp_01-media img {
animation: none;
transform: none;
}
}
/*
* PHONES - typography and the compacted points bar. Layout stacking is handled above.
*/
@media (max-width: 730px) {
.comp_01-inner {
padding: 4rem 1.5rem 2.125rem;
}
.comp_01-title {
margin-bottom: 1.125rem;
font-size: 2.25rem;
font-weight: 400;
line-height: 1.1;
}
.comp_01-rule {
width: 3.5rem;
height: 0.1875rem;
margin-bottom: 1.25rem;
}
.comp_01-lead {
max-width: none;
margin-bottom: 1.625rem;
font-size: 1.0625rem;
}
.comp_01-buttons {
flex-direction: column;
align-items: stretch;
gap: 0.75rem;
}
.comp_01-button {
width: 100%;
min-height: 3.25rem;
padding: 0.9375rem 1.25rem;
font-size: 0.8125rem;
}
.comp_01-slides ul.slick-dots {
bottom: 1rem;
padding: 0 1.5rem;
}
.comp_01-features-inner {
padding: 1.25rem 1.5rem;
}
.comp_01-feature {
align-items: flex-start;
padding-right: 0.875rem;
}
.comp_01-feature:nth-child(odd) {
padding-right: 0.875rem;
}
.comp_01-feature:nth-child(1), .comp_01-feature:nth-child(2) {
margin-bottom: 1rem;
}
.comp_01-feature-icon {
width: 1.625rem;
height: 1.625rem;
margin-right: 0.625rem;
}
.comp_01-feature-title {
font-size: 0.75rem;
}
.comp_01-feature-note {
font-size: 0.75rem;
line-height: 1.3;
}
}
@media (max-width: 479px) {
.comp_01-inner {
padding: 3.75rem 1.5rem 1.875rem;
}
.comp_01-title {
font-size: 2rem;
}
.comp_01-lead {
font-size: 1rem;
}
.comp_01-slides ul.slick-dots {
padding: 0 1.5rem;
}
.comp_01-features-inner {
padding: 1.125rem 1.5rem;
}
}
/*
* LANDSCAPE PHONES
*
* 844x390 leaves ~306px once the bar is off, for a headline, a lead, two buttons and a four
* point bar. Nothing makes all of that fit, and pretending otherwise is what breaks it - so the
* one-viewport rule is dropped here on purpose and the section is allowed to scroll. The photo
* goes back behind the text ( a band plus text in 306px would give each about 150px ).
*
* The two paddings below are doing real work, both found by looking at it:
*
* - padding-left clears the logo badge SIDEWAYS. Everywhere else the headline is centred in a
* tall slide and passes well under the badge; here the slide is short, the text sits near the
* top, and the badge - rem(48) from the left and rem(150) across - lands on the first line.
* Moving the text to its right is the only fix that does not shrink the type further.
* - padding-bottom reserves a lane for the dots. They are positioned from the bottom of the
* slide, and with a slide this short they otherwise sit on top of the second button.
*/
@media (max-width: 979px) and (max-height: 520px) {
.comp_01-wrapper {
min-height: 0;
}
.comp_01-slide {
flex-direction: row;
align-items: center;
}
.comp_01-wrapper .comp_01-slides .comp_01-slide {
min-height: 0;
}
.comp_01-media {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: auto;
height: auto;
}
.comp_01-media::after {
display: block;
}
.comp_01-inner {
padding: 1.875rem 1.75rem 4rem 14rem;
}
.comp_01-content {
max-width: 38.75rem;
}
.comp_01-title {
margin-bottom: 1rem;
font-size: 1.75rem;
}
.comp_01-rule {
margin-bottom: 1rem;
}
.comp_01-lead {
max-width: 28.75rem;
margin-bottom: 1.25rem;
}
.comp_01-buttons {
flex-direction: row;
}
.comp_01-button {
width: auto;
min-height: 3rem;
}
.comp_01-slides ul.slick-dots {
bottom: 1.25rem;
padding-left: 14rem;
}
}
/*
* REDUCED MOTION - no Ken Burns, no stagger. The cross-fade stays: it is what makes the slide
* change legible, and it does not move anything.
*/
@media (prefers-reduced-motion: reduce) {
.comp_01-media img {
animation: none;
transform: scale(1.02);
}
.comp_01-wrapper.js-anim .comp_01-title-char,
.comp_01-wrapper.js-anim .comp_01-rule,
.comp_01-wrapper.js-anim .comp_01-lead,
.comp_01-wrapper.js-anim .comp_01-buttons {
opacity: 1;
transform: none;
transition: none;
animation: none;
}
.comp_01-wrapper.js-anim .comp_01-rule {
transform: scaleX(1);
}
.comp_01-feature {
opacity: 1;
animation: none;
}
.comp_01-slides ul.slick-dots li.slick-active button.slider-button::after {
animation: none;
transform: scaleX(1);
}
}
/*
* COMP_02 - SHORT INTRODUCTION
*
* Markup: templates/comp_02.php
* Behaviour: none - the reveal is WOW.js, initialised inline in header.php.
*
* Photo left, bleeding to the viewport edge; text right, its right edge landing on the same
* line as the header logo and the footer. The hero above is text-left over a photo-right, so
* the mirror is deliberate - it reads as a rhythm rather than as the same layout twice.
*
* THE SECTION'S HEIGHT COMES FROM THE TEXT and the photo stretches to it, which is why there
* are no percentage heights anywhere below - see the note on .comp_02-media.
*/
.comp_02-wrapper {
position: relative;
display: flex;
align-items: stretch;
width: 100%;
background-color: #f4f2ef;
box-sizing: border-box;
}
/*
* PHOTO
*
* The source is comp_02-04, 1600x1200, 4:3 - NOT the 16:9 comp_02-03 it replaced, and all three
* crops in this file changed with it. Read this before touching a ratio here.
*
* DESKTOP: the text column decides the height, so the box runs about 0.74:1 at 1281px and about
* 1.11:1 at 1920px. Both are narrower than 4:3, so HEIGHT BINDS AND THE CROP IS HORIZONTAL - the
* photo is scaled to the box height and loses width off both sides, keeping the middle 55% of the
* frame at 1281px and 83% at 1920px. That is a good deal more of the photograph than the 16:9
* source could give ( 42% and 62% ). Checked at the tightest of those: the drinks fridge, the
* ordering kiosk, the serving counter with its extraction hoods and the planting are all in frame.
*
* CENTRE HOLDS ON THE X AXIS. The room reads right across the frame with no single subject, so
* there is nothing to bias towards - and the 55% window, the tightest this section can produce,
* still spans fridge to counter.
*
* THE 48% IN THE STACKED BAND IS LIVE NOW ( see the note there ). The 45% below is still inert:
* nothing is trimmed vertically at desktop sizes. It stays as the guard it always was, and biasing
* up remains right - the top of the frame is ceiling, the bottom is foreground floor.
*
* EVERY CHILD IS ABSOLUTE, no height:100% chain. This element has no content in flow, so its
* own height comes entirely from the flex stretch; a percentage height resolved against that is
* the exact trap comp_01 fell into ( see the note in _comp_01.scss ). Insets sidestep it.
*/
.comp_02-media {
position: relative;
flex: 0 0 46%;
min-height: 32.5rem;
overflow: hidden;
}
.comp_02-media picture {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: block;
}
.comp_02-media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 45%;
}
/*
* TEXT COLUMN
*/
.comp_02-body {
flex: 1 1 auto;
display: flex;
align-items: center;
min-width: 0;
padding: 7.5rem 3rem 7.5rem 5.5rem;
box-sizing: border-box;
}
.comp_02-content {
display: flex;
flex-direction: column;
width: 100%;
max-width: 35rem;
/*
* RIGHT ALIGNED IN ITS COLUMN, and this is what actually lands the text on the shared content
* edge - the padding-right below only sets where that edge is.
*
* The body's content box is wider than the rem(560) cap at a good many widths, not just the
* large ones ( measured 520.7 against 504 at 1151px, and 581 against 560 at 1920px ), and a
* flex item parks at the START of the space it is given. Left as-is the text sat 17-21px
* short of the header's content edge. Pushing the slack to the left instead puts it in the
* gap to the photo, where nothing lines up against it.
*
* Reset in the stacked layout at 979px, where it would shove the text to the right of its
* own full width column.
*/
margin-left: auto;
}
/*
* Lines the text's RIGHT edge up with the rem(1280) container the header, the hero and the
* footer all share. 100vw and not 100%, because this column is only 54% of the viewport.
*
* The media query is what keeps it safe. Below the width at which rem(1280) stops filling the
* viewport the calc goes negative, and a negative padding computes to 0 - the text would run
* flat into the screen edge. 1152px is that width: html { font-size } is 90% between 1025 and
* 1280px, so rem(1280) is 1152px there, and 1280px from 1281px up. One query covers both,
* because rem() is resolved against whichever step is live.
*
* The scrollbar sits inside 100vw, so the padding runs about 7px generous. It is padding and
* not width, so it cannot overflow.
*/
@media (min-width: 1152px) {
.comp_02-body {
padding-right: calc((100vw - 80rem) / 2 + 3rem);
}
}
.comp_02-title {
margin: 0 0 1.5rem 0;
color: #1d1d1b;
font-size: 2.875rem;
font-weight: 200;
line-height: 1.1;
text-transform: uppercase;
letter-spacing: 0.005em;
}
.comp_02-rule {
display: block;
width: 4.5rem;
height: 0.25rem;
margin: 0 0 1.875rem 0;
background-color: #be1622;
}
.comp_02-text {
margin: 0 0 1.25rem 0;
color: #222222;
font-size: 1.125rem;
font-weight: 400;
line-height: 1.7;
}
/*
* THE SIGN-OFF. Three sentence fragments, not a third paragraph, and the red flag is what says
* so - it also gives the section its second accent mark now that there is no kicker.
*
* Weight 400 rather than the title's 200: _comp_01.scss records that Mukta 200 goes thin and
* weak below about rem(40), and this is half that size.
*/
.comp_02-claim {
max-width: 29.375rem;
margin: 1.25rem 0 0 0;
padding: 0 0 0 1.375rem;
border-left: 0.25rem solid #be1622;
color: #1d1d1b;
font-size: 1.4375rem;
font-weight: 400;
line-height: 1.45;
text-wrap: balance;
}
/*
* Deliberately NOT reusing .button - that chain forces min-width rem(258) and an rem(8) radius.
* Matched to .comp_01-button.secondary so the two sections' buttons are the same object.
*
* align-self is required: a flex item stretches across the column by default, and this one has
* to shrink to its label.
*/
.comp_02-button {
align-self: flex-start;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 3.625rem;
margin: 2.25rem 0 0 0;
padding: 1.0625rem 1.875rem;
font-size: 0.875rem;
font-weight: 600;
line-height: 1.25;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.08em;
transition: all 0.3s ease;
box-sizing: border-box;
}
.comp_02-button.secondary {
background-color: transparent;
color: #1d1d1b;
border: 1px solid rgba(29, 29, 27, 0.4);
}
.comp_02-button.secondary:hover, .comp_02-button.secondary:focus-visible {
background-color: #1d1d1b;
border-color: #1d1d1b;
color: #ffffff;
}
.comp_02-button:focus-visible {
outline: 2px solid #1d1d1b;
outline-offset: 3px;
}
/*
* RESPONSIVE
*
* READ THIS BEFORE CHANGING A NUMBER BELOW. rem() is not physical px here: html { font-size }
* steps 100 / 90 / 70 / 80 / 90 / 100% across the _base.scss breakpoints, and those breakpoints
* are not the ones used here. Between 731 and 979px everything renders at 0.7x, so rem(18) body
* copy would be 12.6px on a tablet. The type in the 979px block is therefore SCALED UP in rem
* terms purely to come out the same physical size as everywhere else - it is not "bigger on
* tablet". Physical sizes across the whole range are listed against each block.
*/
@media (max-width: 1239px) {
.comp_02-body {
padding-left: 4rem;
}
}
/*
* THE 80% BAND. Exactly the range where _base.scss puts html { font-size } at 80%, which is why
* the query is 980-1024 and not a round number. Landscape iPad ( 1024x768 ) sits in it, so it is
* not the empty sliver it looks like: measured before this block, body copy rendered at 14.4px
* and the button label at 11.2px.
*
* Physical sizes after: title 42px, body 16.8px, sign-off 20.8px, button 12.8px in a 53px target.
*/
@media (min-width: 980px) and (max-width: 1024px) {
.comp_02-body {
padding: 6.25rem 3rem 6.25rem 3.5rem;
}
.comp_02-content {
max-width: 37.5rem;
}
.comp_02-title {
font-size: 3.25rem;
}
.comp_02-rule {
width: 5.25rem;
}
.comp_02-text {
font-size: 1.3125rem;
}
.comp_02-claim {
max-width: 32.5rem;
padding-left: 1.625rem;
font-size: 1.625rem;
}
.comp_02-button {
min-height: 4.125rem;
padding: 1.1875rem 2.125rem;
font-size: 1rem;
}
}
/*
* STACKED - photo becomes a band above the text.
*
* 979px, matching where the header collapses to the hamburger. A 46% photo column beside a text
* column at 70% type is cramped well before phone widths.
*
* Physical sizes here ( html 70% ): title 35px, body 16.8px, sign-off 21px, button 13.3px in a
* 53px tall target.
*/
@media (max-width: 979px) {
.comp_02-wrapper {
flex-direction: column;
}
.comp_02-media {
flex: 0 0 auto;
min-height: 0;
aspect-ratio: 3/2;
}
.comp_02-media img {
object-position: center 48%;
}
.comp_02-body {
padding: 4.5rem 2rem;
}
.comp_02-content {
max-width: 47.5rem;
margin-left: 0;
}
.comp_02-title {
margin-bottom: 1.875rem;
font-size: 3.125rem;
font-weight: 400;
}
.comp_02-rule {
width: 6rem;
height: 0.3125rem;
margin-bottom: 2.375rem;
}
.comp_02-text {
margin-bottom: 1.625rem;
font-size: 1.5rem;
}
.comp_02-claim {
max-width: 40rem;
margin-top: 1.625rem;
padding-left: 1.875rem;
border-left-width: 0.25rem;
font-size: 1.875rem;
}
.comp_02-button {
min-height: 4.75rem;
margin-top: 2.875rem;
padding: 1.375rem 2.5rem;
font-size: 1.1875rem;
}
}
/*
* PHONES. Physical sizes ( html 90% ): title 30.6px, body 16.2px, sign-off 18.9px, button
* 11.7px in a 47px tall target.
*/
@media (max-width: 730px) {
/*
* Taller crop than the tablet band - a 3:2 strip on a 390px screen is only 260px of photo.
*
* 4/3 IS THE SOURCE'S OWN RATIO AGAIN, as it was when comp_02-02 was 1448x1086. The 16:9
* comp_02-03 in between needed a hand-cut mobile file, pre-cropped to exactly the region this
* box showed; comp_02-04 is 4:3, so comp_02-04-mobile.webp is a plain 1000x750 downscale of the
* whole frame. Nothing crops at this width - object-position is a genuine no-op here, and the
* phone is the one place the photograph is seen entire.
*
* That makes the ratio load-bearing in the opposite direction from before: it is not cut to fit
* a pre-cropped file, it MATCHES the file. Change it and the box starts cropping a picture that
* was never cut for it. The client original is not kept in the repo - see _CHANGELOG.md for the
* pipeline if these ever need re-cutting.
*/
.comp_02-media {
aspect-ratio: 4/3;
}
.comp_02-body {
padding: 3.5rem 1.5rem;
}
.comp_02-title {
margin-bottom: 1.25rem;
font-size: 2.125rem;
line-height: 1.15;
}
.comp_02-rule {
width: 3.5rem;
height: 0.1875rem;
margin-bottom: 1.5rem;
}
.comp_02-text {
margin-bottom: 1.125rem;
font-size: 1.125rem;
line-height: 1.65;
}
.comp_02-claim {
max-width: none;
margin-top: 1.125rem;
padding-left: 1.25rem;
border-left-width: 0.1875rem;
font-size: 1.3125rem;
}
.comp_02-button {
width: 100%;
min-height: 3.25rem;
margin-top: 1.875rem;
padding: 0.9375rem 1.25rem;
font-size: 0.8125rem;
}
}
@media (max-width: 479px) {
.comp_02-body {
padding: 3rem 1.5rem;
}
.comp_02-title {
font-size: 1.875rem;
}
.comp_02-text {
font-size: 1.0625rem;
}
.comp_02-claim {
font-size: 1.25rem;
}
}
/*
* REDUCED MOTION
*
* WOW.js writes animation-name as an INLINE style, so nothing but !important reaches it. The
* visibility does not need the same treatment: header.php's .wow { visibility: hidden } is a
* single class and loses to the two below on specificity.
*/
@media (prefers-reduced-motion: reduce) {
.comp_02-media.wow,
.comp_02-content.wow {
visibility: visible;
animation: none !important;
}
}
/*
* COMP_03 - CONTACT
*
* Markup: templates/comp_03.php
* Behaviour: js/scripts-parts/comp_03.js ( styled Google Map, guarded ). The reveal is
* WOW.js, initialised inline in header.php.
*
* Contact info LEFT on cream, map RIGHT, a dark card overlaid on the map's bottom-right.
* This is the MIRROR of comp_02 ( photo-left / text-right ) - text on the left this time -
* so the three top sections alternate side to side instead of repeating one split.
*
* THE SECTION'S HEIGHT COMES FROM THE LEFT COLUMN and the map stretches to it, which is why
* there are no percentage heights on the map: .comp_03-mapcol has nothing in flow, its height
* is the flex stretch, and .comp_03-map is inset:0 against it. A height:100% chain would
* resolve against nothing - the exact trap comp_01 / comp_02 documented. Insets sidestep it.
*/
.comp_03-wrapper {
position: relative;
display: flex;
align-items: stretch;
width: 100%;
background-color: #f4f2ef;
min-height: 35rem;
box-sizing: border-box;
}
/*
* LEFT - CONTACT COLUMN
*
* 46%, the mirror of comp_02's 46% photo. The map column ( flex:1 1 auto ) takes the rest.
*/
.comp_03-body {
flex: 0 0 46%;
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
padding: 7.5rem 4.5rem 7.5rem 5.5rem;
box-sizing: border-box;
}
.comp_03-content {
display: flex;
flex-direction: column;
width: 100%;
max-width: 32.5rem;
}
/*
* Lands the text's LEFT edge on the rem(1280) container the header, the hero and the footer
* all share. The mirror of comp_02, which aligned its RIGHT edge - here the aligned edge is
* the one the padding sits on, so no margin trick is needed, the padding is the whole story.
*
* The 1152px guard is the one documented in _comp_02.scss: html { font-size } is 90% between
* 1025 and 1280px, so rem(1280) is 1152px there and the calc stays positive from 1152 up. The
* +rem(48) floor keeps it positive across the 1240-1279 sliver where html steps back to 100%.
* Below 1152 the base rem(88) padding-left is left in place.
*/
@media (min-width: 1152px) {
.comp_03-body {
padding-left: calc((100vw - 80rem) / 2 + 3rem);
}
}
.comp_03-title {
margin: 0 0 1.5rem 0;
color: #1d1d1b;
font-size: 2.875rem;
font-weight: 200;
line-height: 1.1;
text-transform: uppercase;
letter-spacing: 0.005em;
}
.comp_03-rule {
display: block;
width: 4.5rem;
height: 0.25rem;
margin: 0 0 2.5rem 0;
background-color: #be1622;
}
/*
* THE CONTACT LIST
*
* in the markup - reset the italic here.
*/
.comp_03-list {
font-style: normal;
}
.comp_03-item {
display: flex;
align-items: flex-start;
margin: 0 0 1.625rem 0;
}
.comp_03-item:last-child {
margin-bottom: 0;
}
.comp_03-item-icon {
flex: 0 0 auto;
margin: 0.125rem 1.25rem 0 0;
color: #1d1d1b;
}
.comp_03-item-icon svg {
display: block;
width: 1.625rem;
height: 1.625rem;
}
.comp_03-item-body {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
}
.comp_03-item-name {
color: #1d1d1b;
font-size: 1.125rem;
font-weight: 600;
line-height: 1.35;
}
.comp_03-item-sub,
.comp_03-item-label {
margin-top: 0.1875rem;
color: rgba(29, 29, 27, 0.55);
font-size: 0.875rem;
font-weight: 400;
line-height: 1.4;
}
.comp_03-item-line {
color: #222222;
font-size: 1.0625rem;
font-weight: 400;
line-height: 1.5;
}
.comp_03-item-line.strong {
color: #1d1d1b;
font-weight: 600;
}
a.comp_03-item-line {
text-decoration: none;
transition: color 0.25s ease;
}
a.comp_03-item-line:hover, a.comp_03-item-line:focus-visible {
color: #be1622;
}
a.comp_03-item-line:focus-visible {
outline: 2px solid #be1622;
outline-offset: 3px;
}
/*
* THE CATERING NOTE. The .comp_02-claim red-flag treatment, one step smaller so it reads as a
* note under the list rather than as a heading competing with the title.
*/
.comp_03-note {
max-width: 27.5rem;
margin: 2.5rem 0 0 0;
padding: 0 0 0 1.375rem;
border-left: 0.25rem solid #be1622;
color: #1d1d1b;
font-size: 1.0625rem;
font-weight: 400;
line-height: 1.6;
text-wrap: pretty;
}
.comp_03-operator {
margin: 1.875rem 0 0 0;
padding: 1.5rem 0 0 0;
border-top: 1px solid rgba(29, 29, 27, 0.12);
color: rgba(29, 29, 27, 0.6);
font-size: 0.875rem;
line-height: 1.5;
}
/*
* RIGHT - MAP COLUMN
*
* The map fills the column via inset:0 ( see the wrapper note ). The grey background is what
* the slot shows before Google paints, and permanently if no API key is set in Ava Options -
* the section must never look broken while it waits for the key.
*/
.comp_03-mapcol {
position: relative;
flex: 1 1 auto;
min-width: 0;
min-height: 35rem;
}
.comp_03-map {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: #e8e6e2;
}
.comp_03-map img {
max-width: none;
}
.comp_03-map button {
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
color: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
letter-spacing: normal !important;
background: none !important;
border: 0 !important;
border-radius: 0 !important;
transform: none !important;
}
/*
* THE DARK CARD
*
* A direct child of .comp_03-wrapper, absolutely positioned over the map's bottom-right. Its
* RIGHT edge lands on the same rem(1280) content line as the text on the left ( and the header
* and footer ), so the whole section sits on one grid and the button is never clipped off the
* screen edge. 1152px guard as above.
*/
.comp_03-box {
position: absolute;
z-index: 2;
right: 3rem;
bottom: 4.5rem;
width: 22.5rem;
padding: 2.875rem 2.75rem;
background-color: #1d1d1b;
color: #ffffff;
box-sizing: border-box;
}
@media (min-width: 1152px) {
.comp_03-box {
right: calc((100vw - 80rem) / 2 + 3rem);
}
}
.comp_03-box-title {
margin: 0 0 1.25rem 0;
color: #ffffff;
font-size: 1.875rem;
font-weight: 400;
line-height: 1.15;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.comp_03-box-rule {
display: block;
width: 3rem;
height: 0.1875rem;
margin: 0 0 1.375rem 0;
background-color: #be1622;
}
.comp_03-box-text {
margin: 0 0 1.875rem 0;
color: rgba(255, 255, 255, 0.78);
font-size: 0.9375rem;
font-weight: 400;
line-height: 1.6;
text-wrap: pretty;
}
/*
* Deliberately NOT .button. The dark-inverted mirror of .comp_02-button.secondary: outlined
* white on the dark card, filling to white on hover.
*/
.comp_03-box-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 3.25rem;
padding: 1rem 1.75rem;
color: #ffffff;
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.25;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.08em;
text-decoration: none;
border: 1px solid rgba(255, 255, 255, 0.45);
transition: all 0.3s ease;
box-sizing: border-box;
}
.comp_03-box-button:hover, .comp_03-box-button:focus-visible {
background-color: #ffffff;
border-color: #ffffff;
color: #1d1d1b;
}
.comp_03-box-button:focus-visible {
outline: 2px solid #ffffff;
outline-offset: 3px;
}
/*
* RESPONSIVE
*
* READ THIS BEFORE CHANGING A NUMBER BELOW. rem() is not physical px here: html { font-size }
* steps 100 / 90 / 70 / 80 / 90 / 100% across the _base.scss breakpoints, and those are not the
* breakpoints used here. Type is scaled in rem terms per band purely to come out the same
* physical size - it is not "bigger on tablet". Physical sizes are noted against each block.
* Same approach, and the same reasoning, as _comp_02.scss.
*/
/*
* THE 80% BAND. Exactly where _base.scss puts html { font-size } at 80%, which is why the query
* is 980-1024 and not round. Landscape iPad ( 1024x768 ) sits in it. Type scaled up in rem so
* it lands at the same physical size as elsewhere.
*/
@media (min-width: 980px) and (max-width: 1024px) {
.comp_03-body {
padding: 6.25rem 3.5rem 6.25rem 3.5rem;
}
.comp_03-title {
font-size: 3.25rem;
}
.comp_03-rule {
width: 5.25rem;
}
.comp_03-item-name {
font-size: 1.3125rem;
}
.comp_03-item-sub,
.comp_03-item-label {
font-size: 1rem;
}
.comp_03-item-line {
font-size: 1.25rem;
}
.comp_03-note {
font-size: 1.25rem;
}
.comp_03-operator {
font-size: 1rem;
}
.comp_03-box {
right: 2.5rem;
width: 21.25rem;
padding: 2.5rem 2.375rem;
}
.comp_03-box-title {
font-size: 2.125rem;
}
.comp_03-box-text {
font-size: 1.0625rem;
}
.comp_03-box-button {
min-height: 3.75rem;
font-size: 0.9375rem;
}
}
/*
* STACKED - text on top, map below it as a band, dark card as a solid block under the map.
*
* 979px, matching where the header collapses to the hamburger and where comp_02 stacks. The
* card LEAVES the overlay here: overlaid on a ~300px-tall map band it would hide most of it, so
* it becomes position:static and flows as the third item, a full-width dark block. This is why
* it is a child of .comp_03-wrapper and not of .comp_03-mapcol.
*
* Physical sizes ( html 70% ): title 35px, item value 16.8px, note 15.4px, card title 24.5px.
*/
@media (max-width: 979px) {
.comp_03-wrapper {
flex-direction: column;
min-height: 0;
}
.comp_03-body {
flex: 0 0 auto;
padding: 4.5rem 2rem;
}
.comp_03-content {
max-width: 40rem;
}
.comp_03-title {
margin-bottom: 1.875rem;
font-size: 3.125rem;
font-weight: 400;
}
.comp_03-rule {
width: 6rem;
height: 0.3125rem;
margin-bottom: 2.375rem;
}
.comp_03-item {
margin-bottom: 2.125rem;
}
.comp_03-item-icon {
margin-right: 1.625rem;
}
.comp_03-item-icon svg {
width: 2.125rem;
height: 2.125rem;
}
.comp_03-item-name {
font-size: 1.5rem;
}
.comp_03-item-sub,
.comp_03-item-label {
font-size: 1.1875rem;
}
.comp_03-item-line {
font-size: 1.5rem;
}
.comp_03-note {
max-width: 35rem;
margin-top: 3rem;
font-size: 1.375rem;
}
.comp_03-operator {
margin-top: 2.375rem;
padding-top: 1.875rem;
font-size: 1.1875rem;
}
.comp_03-mapcol {
flex: 0 0 auto;
min-height: 0;
aspect-ratio: 16/10;
}
.comp_03-box {
position: static;
right: auto;
bottom: auto;
width: 100%;
padding: 3.5rem 2rem;
}
.comp_03-box-title {
font-size: 2.5rem;
}
.comp_03-box-rule {
width: 4rem;
height: 0.25rem;
margin-bottom: 1.875rem;
}
.comp_03-box-text {
max-width: 35rem;
font-size: 1.3125rem;
}
.comp_03-box-button {
min-height: 4.5rem;
padding: 1.375rem 2.5rem;
font-size: 1.125rem;
}
}
/*
* PHONES. Physical sizes ( html 90% ): title 30.6px, item value 15.3px, card title 27px.
*/
@media (max-width: 730px) {
.comp_03-body {
padding: 3.5rem 1.5rem;
}
.comp_03-title {
margin-bottom: 1.25rem;
font-size: 2.125rem;
line-height: 1.15;
}
.comp_03-rule {
width: 3.5rem;
height: 0.1875rem;
margin-bottom: 1.5rem;
}
.comp_03-item {
margin-bottom: 1.5rem;
}
.comp_03-item-icon {
margin-right: 1.125rem;
}
.comp_03-item-icon svg {
width: 1.625rem;
height: 1.625rem;
}
.comp_03-item-name {
font-size: 1.125rem;
}
.comp_03-item-sub,
.comp_03-item-label {
font-size: 0.875rem;
}
.comp_03-item-line {
font-size: 1.0625rem;
}
.comp_03-note {
max-width: none;
margin-top: 2.125rem;
font-size: 1.0625rem;
}
.comp_03-operator {
margin-top: 1.75rem;
padding-top: 1.375rem;
font-size: 0.875rem;
}
.comp_03-mapcol {
aspect-ratio: 4/3;
}
.comp_03-box {
padding: 2.5rem 1.5rem;
}
.comp_03-box-title {
font-size: 1.875rem;
}
.comp_03-box-rule {
width: 3rem;
height: 0.1875rem;
margin-bottom: 1.375rem;
}
.comp_03-box-text {
font-size: 1rem;
}
.comp_03-box-button {
width: 100%;
min-height: 3.25rem;
padding: 1rem 1.25rem;
font-size: 0.8125rem;
}
}
@media (max-width: 479px) {
.comp_03-body {
padding: 3rem 1.5rem;
}
.comp_03-title {
font-size: 1.875rem;
}
.comp_03-item-line {
font-size: 1rem;
}
.comp_03-note {
font-size: 1rem;
}
}
/*
* REDUCED MOTION
*
* WOW.js writes animation-name as an INLINE style, so nothing but !important reaches it. The
* visibility does not need the same treatment: header.php's .wow { visibility: hidden } is a
* single class and loses to the rule below on specificity.
*/
@media (prefers-reduced-motion: reduce) {
.comp_03-content.wow,
.comp_03-box.wow {
visibility: visible;
animation: none !important;
}
}
/*
* COMP_05 - O NÁS: ABOUT HERO
*
* Markup: templates/comp_05.php
* Behaviour: none - the reveal is WOW.js, initialised inline in header.php.
*
* Text left on the cream ground, photo right bleeding to the viewport edge - the MIRROR of the
* homepage comp_02 ( photo-left / text-right ). The text's LEFT edge lands on the same rem(1280)
* container line the header logo and the footer share, the way comp_02's text lands on the right
* edge of it.
*
* THE SECTION'S HEIGHT COMES FROM THE TEXT and the photo stretches to it - no percentage heights
* anywhere ( same reasoning as comp_02: a % height resolved against a flex-stretched box is the
* trap comp_01 fell into ). The photo box uses absolute insets instead.
*/
.comp_05-wrapper {
position: relative;
display: flex;
align-items: stretch;
width: 100%;
background-color: #f4f2ef;
box-sizing: border-box;
}
/*
* TEXT COLUMN - left.
*/
.comp_05-body {
flex: 1 1 auto;
display: flex;
align-items: center;
min-width: 0;
padding: 7.5rem 5.5rem 7.5rem 3rem;
box-sizing: border-box;
}
/*
* Lines the text's LEFT edge up with the rem(1280) container. Mirror of comp_02's padding-right
* calc, and safe for the same reason: below the width where rem(1280) stops filling the viewport
* the calc would go negative ( computes to 0 ), so it is gated to min-width 1152px - the width at
* which rem(1280) is 1152px ( html { font-size } is 90% between 1025 and 1280px ) and 1280px above.
*/
@media (min-width: 1152px) {
.comp_05-body {
padding-left: calc((100vw - 80rem) / 2 + 3rem);
}
}
.comp_05-content {
display: flex;
flex-direction: column;
width: 100%;
max-width: 35rem;
}
/*
* KICKER - the client's tagline as an eyebrow. Not uppercase: the three fragments keep their
* sentence case and periods, which read better than shouting them. Accent red, spaced, semibold.
*/
.comp_05-kicker {
display: block;
margin: 0 0 1.125rem 0;
color: #be1622;
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.06em;
}
.comp_05-title {
margin: 0 0 1.5rem 0;
color: #1d1d1b;
font-size: 3.75rem;
font-weight: 200;
line-height: 1.05;
text-transform: uppercase;
letter-spacing: 0.005em;
}
.comp_05-rule {
display: block;
width: 4.5rem;
height: 0.25rem;
margin: 0 0 1.875rem 0;
background-color: #be1622;
}
.comp_05-text {
margin: 0 0 1.25rem 0;
color: #222222;
font-size: 1.125rem;
font-weight: 400;
line-height: 1.7;
}
/*
* THE SIGN-OFF - the client's closer, red-flag treatment. Same object as comp_02's .comp_02-claim
* ( weight 400, not the title's 200 - Mukta 200 goes thin below about rem(40) ).
*/
.comp_05-claim {
max-width: 29.375rem;
margin: 1.25rem 0 0 0;
padding: 0 0 0 1.375rem;
border-left: 0.25rem solid #be1622;
color: #1d1d1b;
font-size: 1.4375rem;
font-weight: 400;
line-height: 1.45;
text-wrap: balance;
}
/*
* Deliberately NOT .button - that chain forces min-width rem(258) and a rem(8) radius. Matched to
* .comp_02-button.secondary so the About blocks' buttons are the same object. align-self shrinks
* it to its label ( a flex item stretches the column otherwise ).
*/
.comp_05-button {
align-self: flex-start;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 3.625rem;
margin: 2.25rem 0 0 0;
padding: 1.0625rem 1.875rem;
background-color: transparent;
color: #1d1d1b;
border: 1px solid rgba(29, 29, 27, 0.4);
font-size: 0.875rem;
font-weight: 600;
line-height: 1.25;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.08em;
transition: all 0.3s ease;
box-sizing: border-box;
}
.comp_05-button:hover, .comp_05-button:focus-visible {
background-color: #1d1d1b;
border-color: #1d1d1b;
color: #ffffff;
}
.comp_05-button:focus-visible {
outline: 2px solid #1d1d1b;
outline-offset: 3px;
}
/*
* PHOTO - right, bleeding to the viewport edge. Every child is absolute, no height:100% chain -
* this element has no content in flow, so its height comes entirely from the flex stretch.
*/
.comp_05-media {
position: relative;
flex: 0 0 48%;
min-height: 35rem;
overflow: hidden;
}
.comp_05-media picture {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: block;
}
.comp_05-media img {
width: 100%;
height: 100%;
/*
* comp_05-04 is 4:3 ( 1600x1200 ), so the crop direction now depends on the breakpoint. With
* the 16:9 comp_05-03 it was horizontal everywhere.
*
* DESKTOP: the text drives the height, so the box runs about 0.77:1 at 1281px and about
* 1.15:1 at 1920px. Both are narrower than 4:3, so HEIGHT binds and the crop is horizontal -
* the middle 58% of the frame at 1281px, 86% at 1920px. The 16:9 source only gave 43% and
* 65%, so noticeably more of the photograph survives now.
*
* CENTRE ON THE X AXIS. The pots sit at roughly 30-58% across, so even the 58% window holds
* them clear of both edges, with the out-of-focus ficus filling the right of the frame.
*
* THE 40% IS LIVE IN THE STACKED BAND ONLY, where 3:2 is wider than the source and 11% comes
* off the height. It is inert here - nothing crops vertically at desktop sizes. 40% rather
* than `top` because it trims a little more off the empty tabletop below than off the blurred
* room above, which is the right way round for this photograph.
*/
object-fit: cover;
object-position: center 40%;
}
/*
* THERE IS NO LOGO IN THIS SECTION ANY MORE, and the reason is history rather than intent. A
* .comp_05-badge CSS decal used to sit over the photo; it was dropped when comp_05-02 landed,
* because that photo carried the "Na talíři" logo inside it twice and the decal would have made
* three. No photo since - not comp_05-03, not comp_05-04 - has carried a mark at all, so the
* removal has long outlived its reason.
* Left as-is deliberately - putting a mark back is a design call on the O nás hero, not a revert.
*/
/*
* RESPONSIVE
*
* READ THIS BEFORE CHANGING A NUMBER BELOW. rem() is not physical px here: html { font-size } steps
* 100 / 90 / 70 / 80 / 90 / 100% across the _base.scss breakpoints, and those breakpoints are not
* the ones used here. Between 731 and 979px everything renders at 0.7x, so type in that band is
* SCALED UP in rem terms purely to come out the same physical size - the same approach as comp_02.
*/
@media (max-width: 1239px) {
.comp_05-body {
padding: 7.5rem 4rem 7.5rem 4rem;
}
}
/*
* THE 80% BAND - exactly where _base.scss puts html { font-size } at 80% ( landscape iPad sits in
* it ), which is why the query is 980-1024 and not round. Type scaled up in rem to land the same
* physical size as elsewhere. Physical: kicker ~12px, title 48px, body 16.8px, claim 20.8px.
*/
@media (min-width: 980px) and (max-width: 1024px) {
.comp_05-body {
padding: 6.25rem 3.5rem 6.25rem 3.5rem;
}
.comp_05-content {
max-width: 37.5rem;
}
.comp_05-kicker {
font-size: 1.0625rem;
}
.comp_05-title {
font-size: 4.125rem;
}
.comp_05-rule {
width: 5.25rem;
}
.comp_05-text {
font-size: 1.3125rem;
}
.comp_05-claim {
max-width: 32.5rem;
padding-left: 1.625rem;
font-size: 1.625rem;
}
.comp_05-button {
min-height: 4.125rem;
padding: 1.1875rem 2.125rem;
font-size: 1rem;
}
}
/*
* STACKED - photo becomes a band above the text. 979px, matching where the header collapses and
* comp_02 / comp_03 stack. Physical sizes ( html 70% ): title 42px, body 16.8px, claim 21px.
*/
@media (max-width: 979px) {
.comp_05-wrapper {
flex-direction: column-reverse;
}
.comp_05-media {
flex: 0 0 auto;
min-height: 0;
aspect-ratio: 3/2;
}
.comp_05-media img {
object-position: center 40%;
}
.comp_05-body {
padding: 4.5rem 2rem;
}
.comp_05-content {
max-width: 47.5rem;
}
.comp_05-kicker {
margin-bottom: 1.375rem;
font-size: 1.25rem;
}
.comp_05-title {
margin-bottom: 1.875rem;
font-size: 4.125rem;
font-weight: 400;
}
.comp_05-rule {
width: 6rem;
height: 0.3125rem;
margin-bottom: 2.375rem;
}
.comp_05-text {
margin-bottom: 1.625rem;
font-size: 1.5rem;
}
.comp_05-claim {
max-width: 40rem;
margin-top: 1.625rem;
padding-left: 1.875rem;
font-size: 1.875rem;
}
.comp_05-button {
min-height: 4.75rem;
margin-top: 2.875rem;
padding: 1.375rem 2.5rem;
font-size: 1.1875rem;
}
}
/*
* PHONES. Physical sizes ( html 90% ): title 32.4px, body 16.2px, claim 18.9px, button 11.7px.
*/
@media (max-width: 730px) {
/*
* 4/3 IS THE SOURCE'S OWN RATIO. comp_05-04-mobile.webp is a plain 1000x750 downscale of the
* whole frame, not the hand-cut region comp_05-03-mobile.webp had to be - that file existed
* because a 16:9 source needed pre-cropping to keep the QR sign legible, and there is no sign
* and no text of any kind in this photograph to protect.
*
* So the ratio is load-bearing in the opposite direction from before: it is not cut to fit a
* pre-cropped file, it MATCHES the file, and nothing crops at this width. Change it and the box
* starts cropping a picture that was never cut for it. The client original is not kept in the
* repo - see _CHANGELOG.md for the pipeline if these ever need re-cutting.
*/
.comp_05-media {
aspect-ratio: 4/3;
}
.comp_05-body {
padding: 3.5rem 1.5rem;
}
.comp_05-kicker {
margin-bottom: 1rem;
font-size: 0.9375rem;
}
.comp_05-title {
margin-bottom: 1.25rem;
font-size: 2.25rem;
line-height: 1.1;
}
.comp_05-rule {
width: 3.5rem;
height: 0.1875rem;
margin-bottom: 1.5rem;
}
.comp_05-text {
margin-bottom: 1.125rem;
font-size: 1.125rem;
line-height: 1.65;
}
.comp_05-claim {
max-width: none;
margin-top: 1.125rem;
padding-left: 1.25rem;
border-left-width: 0.1875rem;
font-size: 1.3125rem;
}
.comp_05-button {
width: 100%;
min-height: 3.25rem;
margin-top: 1.875rem;
padding: 0.9375rem 1.25rem;
font-size: 0.8125rem;
}
}
@media (max-width: 479px) {
.comp_05-body {
padding: 3rem 1.5rem;
}
.comp_05-title {
font-size: 2rem;
}
.comp_05-text {
font-size: 1.0625rem;
}
.comp_05-claim {
font-size: 1.25rem;
}
}
/*
* REDUCED MOTION - WOW.js writes animation-name inline, so only !important reaches it.
*/
@media (prefers-reduced-motion: reduce) {
.comp_05-media.wow,
.comp_05-content.wow {
visibility: visible;
animation: none !important;
}
}
/*
* COMP_06 - O NÁS: VALUES STRIP
*
* Markup: templates/comp_06.php
* Behaviour: none - WOW.js reveal, initialised inline in header.php.
*
* Four centred, icon-led values on a white band between the cream comp_05 and comp_07. It reuses
* the homepage comp_01 feature-bar treatment ( the irej-grid, the inline-SVG glyphs stroked with
* currentColor ) so the two pages share a mark, but stands alone on white as its own section here
* rather than sitting inside a hero.
*
* The grid columns come from _grid-irej.scss ( col-1-4 -> bp2/bp1/bp0-col-1-2 ), so four across on
* desktop become two across from 979px down. The row gap for that wrapped state is the values'
* own vertical padding plus the margin added in the stacked band below.
*/
.comp_06-wrapper {
width: 100%;
padding: 6rem 3rem;
background-color: #ffffff;
box-sizing: border-box;
}
.comp_06-inner {
max-width: 80rem;
margin: 0 auto;
}
.comp_06-value {
display: flex;
flex-direction: column;
align-items: center;
padding: 1rem 1.5rem;
text-align: center;
box-sizing: border-box;
}
.comp_06-value-icon {
display: block;
margin: 0 0 1.25rem 0;
color: #1d1d1b;
}
.comp_06-value-icon svg {
display: block;
width: 3.5rem;
height: 3.5rem;
}
.comp_06-value-text {
display: flex;
flex-direction: column;
align-items: center;
}
.comp_06-value-title {
margin: 0 0 0.625rem 0;
color: #1d1d1b;
font-size: 1.0625rem;
font-weight: 600;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.comp_06-value-note {
max-width: 15rem;
color: #222222;
font-size: 1rem;
font-weight: 400;
line-height: 1.6;
text-wrap: balance;
}
/*
* RESPONSIVE
*
* Same html { font-size } scaling caveat as the other comps: type is scaled up in rem in the low
* bands purely to hold its physical size. From 979px the grid is two across, so the values need a
* row gap - added as a bottom margin, cleared on the last row.
*/
/*
* THE 80% BAND ( landscape iPad ). Physical: icon 48px, title ~13.6px, note ~12.8px. Four across
* still fits, so no row margin yet.
*/
@media (min-width: 980px) and (max-width: 1024px) {
.comp_06-value-icon svg {
width: 4rem;
height: 4rem;
}
.comp_06-value-title {
font-size: 1.1875rem;
}
.comp_06-value-note {
max-width: 16.25rem;
font-size: 1.125rem;
}
}
/*
* TWO ACROSS - 979px, where the grid drops to bp2/bp1/bp0-col-1-2. Physical sizes ( html 70% ):
* title ~14px, note ~13px. The bottom margin is the row gap; the last two cells clear it.
*/
@media (max-width: 979px) {
.comp_06-wrapper {
padding: 4.5rem 2rem;
}
.comp_06-value {
margin-bottom: 3rem;
padding: 1rem 1.25rem;
}
.comp_06-value:nth-last-child(-n+2) {
margin-bottom: 0;
}
.comp_06-value-icon {
margin-bottom: 1.5rem;
}
.comp_06-value-icon svg {
width: 5rem;
height: 5rem;
}
.comp_06-value-title {
font-size: 1.25rem;
}
.comp_06-value-note {
max-width: 18.75rem;
font-size: 1.1875rem;
}
}
/*
* PHONES ( html 90% ). Physical: title ~14.4px, note ~14.4px. Still two across ( bp0-col-1-2 ).
*/
@media (max-width: 730px) {
.comp_06-wrapper {
padding: 3.5rem 1.5rem;
}
.comp_06-value {
margin-bottom: 2.25rem;
padding: 0.75rem 0.625rem;
}
.comp_06-value-icon {
margin-bottom: 1.125rem;
}
.comp_06-value-icon svg {
width: 3.25rem;
height: 3.25rem;
}
.comp_06-value-title {
font-size: 1rem;
letter-spacing: 0.04em;
}
.comp_06-value-note {
max-width: none;
font-size: 1rem;
}
}
/*
* REDUCED MOTION - WOW.js writes animation-name inline, so only !important reaches it. The
* data-wow-delay stagger is inert once animation is off.
*/
@media (prefers-reduced-motion: reduce) {
.comp_06-value.wow {
visibility: visible;
animation: none !important;
}
}
/*
* COMP_07 - O NÁS: FEEDBACK + CONTACT FORM
*
* Markup: templates/comp_07.php
* Behaviour: js/scripts-parts/comp_07.js ( AJAX submit ). The reveal is WOW.js, initialised
* inline in header.php.
*
* Client copy LEFT on the cream ground, the contact form in a DARK card RIGHT. text-left /
* card-right echoes comp_03 ( contact info left / media right ), so the two contact moments across
* the site read the same way.
*
* THE CARD IS DELIBERATELY NOT A WHITE BOXED FORM. It is a near-black $color-primary card with
* light text and UNDERLINE fields ( no boxes ) - a strong inversion so it does not read like a
* generic contact form. The fields still inherit _inputs.scss but override it heavily under the
* .comp_07-form scope: transparent ground, a single bottom hairline that turns red on focus, light
* text, plus autofill masking and a red-underline .error state that beats _inputs' full-border one.
* The consent checkbox is the iCheck-skinned wrapper ( light border on the dark card, red fill on
* check ). The red submit is the .comp_04-submit / .comp_01-button.primary object ( excluded from
* the global .button chain via :not(.comp_07-submit) in _buttons.scss ).
*/
.comp_07-wrapper {
width: 100%;
background-color: #f4f2ef;
box-sizing: border-box;
}
.comp_07-inner {
display: flex;
align-items: stretch;
max-width: 80rem;
margin: 0 auto;
padding: 7.5rem 3rem;
gap: 5rem;
box-sizing: border-box;
}
/*
* LEFT - the feedback copy.
*/
.comp_07-body {
flex: 1 1 48%;
display: flex;
align-items: center;
min-width: 0;
}
.comp_07-content {
display: flex;
flex-direction: column;
width: 100%;
max-width: 32.5rem;
}
.comp_07-title {
margin: 0 0 1.5rem 0;
color: #1d1d1b;
font-size: 2.875rem;
font-weight: 200;
line-height: 1.1;
text-transform: uppercase;
letter-spacing: 0.005em;
}
.comp_07-rule {
display: block;
width: 4.5rem;
height: 0.25rem;
margin: 0 0 1.875rem 0;
background-color: #be1622;
}
.comp_07-text {
margin: 0 0 1.25rem 0;
color: #222222;
font-size: 1.125rem;
font-weight: 400;
line-height: 1.7;
}
/*
* "KRÁTKÁ VÝZVA" - the two prompt/answer fragments, red-flag treatment ( same mark as comp_02's
* claim ). Its own block so the fragments read as a callout, not another paragraph.
*/
.comp_07-challenge {
margin: 1.75rem 0 0 0;
padding: 0 0 0 1.375rem;
border-left: 0.25rem solid #be1622;
}
.comp_07-challenge-title {
display: block;
margin: 0 0 0.75rem 0;
color: #be1622;
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.3;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.comp_07-challenge-line {
display: block;
color: #1d1d1b;
font-size: 1.25rem;
font-weight: 400;
line-height: 1.5;
}
.comp_07-challenge-line + .comp_07-challenge-line {
margin-top: 0.375rem;
}
/*
* RIGHT - the form card.
*/
.comp_07-formcol {
flex: 1 1 52%;
display: flex;
min-width: 0;
}
/*
* SINGLE-COLUMN STATE. The left copy column is commented out in templates/comp_07.php, so the form
* is the only child of .comp_07-inner and would otherwise stretch the full rem(1184) of it - which
* reads as a page, not as a form.
*
* :only-child rather than a modifier class on the markup: uncommenting that
restores the
* two-column layout on its own, with nothing here left stale behind it. ( 0,2,0 ), so it also beats
* the plain .comp_07-formcol flex in the stacked band below.
*/
.comp_07-formcol:only-child {
flex: 0 1 auto;
width: 100%;
max-width: 45rem;
margin: 0 auto;
}
/*
* DARK CARD - a deliberate inversion so the contact form does NOT read as a plain white boxed
* form. Near-black $color-primary ( the logo-disc colour ) floating on the cream ground, with
* light text and underline fields inside. Echoes comp_03's dark card, here as a form. The shadow
* lifts it off the cream.
*/
.comp_07-card {
width: 100%;
padding: 3.25rem 3.25rem;
background-color: #1d1d1b;
box-shadow: 0 1.875rem 4.375rem rgba(29, 29, 27, 0.22);
box-sizing: border-box;
}
.comp_07-form-title {
margin: 0 0 1.875rem 0;
color: #ffffff;
font-size: 1.5rem;
font-weight: 600;
line-height: 1.2;
}
.comp_07-form-title:after {
content: "";
display: block;
width: 3rem;
height: 0.1875rem;
margin: 1rem 0 0 0;
background-color: #be1622;
}
.comp_07-field {
margin: 0 0 1.25rem 0;
}
.comp_07-formcol .comp_07-form .comp_07-label {
margin: 0 0 0.375rem 0;
color: rgba(255, 255, 255, 0.55);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.comp_07-req {
color: #be1622;
}
/*
* UNDERLINE FIELDS on the dark card. Overrides _inputs.scss ( white bg, full 1px border, 6px
* radius ) scoped under .comp_07-form ( 0,2,0 > 0,1,1 ): transparent ground, a single hairline
* bottom border that turns red on focus, light text, no side padding. margin-bottom 0 hands the
* spacing to .comp_07-field; font-size is set here so the responsive bands can override it from
* the same scope.
*/
.comp_07-form .comp_07-input {
margin-bottom: 0 !important;
padding: 0.625rem 0;
background-color: transparent;
color: #ffffff;
border: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 0;
font-size: 1.125rem;
transition: border-color 0.25s ease;
}
.comp_07-form .comp_07-input:focus, .comp_07-form .comp_07-input:focus-visible {
outline: none;
border-bottom-color: #be1622;
}
/*
* Autofill on a dark field: browsers force a light background + dark text and offer no transparent
* option. Pin the text light and mask the yellow box with a card-coloured inset shadow.
*/
.comp_07-form .comp_07-input:-webkit-autofill,
.comp_07-form .comp_07-input:-webkit-autofill:focus {
-webkit-text-fill-color: #ffffff;
-webkit-box-shadow: inset 0 0 0 6.25rem #1d1d1b;
caret-color: #ffffff;
transition: background-color 9999s ease;
}
/*
* Error state - JS adds .error. Made FOR the underline field, not _inputs' bordered inputs: the
* bottom hairline goes red and one step thicker, with a soft red under-glow so it reads on the
* dark card. No full box, no inset shadow.
*
* Scoped 0,4,0 ( via .required.error ) on purpose: _inputs' own `input[type="email"].required.error`
* is 0,3,1 and would otherwise WIN on the e-mail input, painting it with the full red box + inset
* glow that suits a bordered input but not this one. Both errored fields ( e-mail, zpráva ) carry
* .required, so this matches them and beats it.
*/
.comp_07-form .comp_07-input.required.error {
border: 0;
border-bottom: 0.125rem solid #be1622;
box-shadow: 0 0.375rem 0.625rem -0.375rem rgba(190, 22, 34, 0.55);
}
.comp_07-textarea {
min-height: 7.5rem;
line-height: 1.5;
}
/*
* CONSENT - same construction as comp_04's: iCheck hides the native box and wraps it in
*
, so the box we style is that WRAPPER. Scoped to .comp_07-consent so
* nothing else is touched; a brand-red fill with a white tick, the base skin repurposed.
*/
.comp_07-consent {
display: flex;
align-items: flex-start;
gap: 0.75rem;
margin: 0.5rem 0 0 0;
}
.comp_07-consent .icheckbox {
flex: 0 0 auto;
width: 1.25rem;
height: 1.25rem;
margin: 0.125rem 0 0 0;
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 0;
background-color: transparent;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease;
box-sizing: border-box;
}
.comp_07-consent .icheckbox:before {
content: "";
position: absolute;
left: 50%;
top: 46%;
width: 0.3125rem;
height: 0.625rem;
background: none;
border: solid #ffffff;
border-width: 0 0.125rem 0.125rem 0;
transform: translate(-50%, -55%) rotate(45deg);
opacity: 0;
transition: opacity 0.15s ease;
}
.comp_07-consent .icheckbox.checked {
background-color: #be1622;
border-color: #be1622;
}
.comp_07-consent .icheckbox.checked:before {
opacity: 1;
}
.comp_07-formcol .comp_07-consent .comp_07-consent-label {
width: auto;
margin: 0 !important;
color: rgba(255, 255, 255, 0.6);
font-size: 0.875rem;
font-weight: 400;
line-height: 1.5;
}
.comp_07-formcol .comp_07-consent .comp_07-consent-label a {
color: #ffffff;
text-decoration: underline;
}
.comp_07-formcol .comp_07-consent .comp_07-consent-label a:hover {
text-decoration: none;
}
.comp_07-consent.error .comp_07-consent-label {
color: #be1622;
}
.comp_07-consent.error .icheckbox {
border-color: #be1622;
}
/*
* THE RED SUBMIT - the .comp_04-submit / .comp_01-button.primary object. Excluded from the global
* .button chain via :not(.comp_07-submit) in _buttons.scss ( same precedent as .comp_04-submit ).
*/
.comp_07-submit {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 3.625rem;
margin: 1.75rem 0 0 0;
padding: 1.0625rem 1.875rem;
background-color: #be1622;
color: #ffffff;
font-size: 0.875rem;
font-weight: 600;
line-height: 1.25;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.08em;
border: 0;
cursor: pointer;
transition: all 0.3s ease;
box-sizing: border-box;
}
.comp_07-submit:hover, .comp_07-submit:focus-visible {
background-color: rgb(60.1701812801%, 6.9670736219%, 10.7672955975%);
color: #ffffff;
}
.comp_07-submit:focus-visible {
outline: 2px solid #ffffff;
outline-offset: 3px;
}
.comp_07-form.working {
opacity: 0.6;
pointer-events: none;
}
/*
* RESPONSIVE
*
* Same html { font-size } scaling caveat as the other comps: type is scaled up in rem in the low
* bands purely to hold its physical size. Form controls are scaled from the .comp_07-form scope so
* they keep winning over _inputs.scss.
*/
@media (max-width: 1239px) {
.comp_07-inner {
gap: 3.5rem;
padding: 7.5rem 3rem;
}
.comp_07-card {
padding: 2.5rem 2.5rem;
}
}
/*
* THE 80% BAND ( landscape iPad ). Physical: title 42px, body 16.8px, controls ~16px in ~52px targets.
*/
@media (min-width: 980px) and (max-width: 1024px) {
.comp_07-title {
font-size: 3.25rem;
}
.comp_07-rule {
width: 5.25rem;
}
.comp_07-text {
font-size: 1.3125rem;
}
.comp_07-challenge-line {
font-size: 1.4375rem;
}
.comp_07-form-title {
font-size: 1.75rem;
}
.comp_07-formcol .comp_07-form .comp_07-label {
font-size: 0.9375rem;
}
.comp_07-form .comp_07-input {
font-size: 1.25rem;
}
.comp_07-submit {
min-height: 4.125rem;
font-size: 1rem;
}
.comp_07-formcol .comp_07-consent .comp_07-consent-label {
font-size: 1rem;
}
}
/*
* STACKED - copy above, form below. 979px, matching where the header collapses and comp_03 stacks.
* Physical sizes ( html 70% ): title 35px, body 16.8px, controls ~16.8px in ~53px targets.
*/
@media (max-width: 979px) {
.comp_07-inner {
flex-direction: column;
gap: 3.5rem;
padding: 5rem 2rem;
}
.comp_07-body,
.comp_07-formcol {
flex: 0 0 auto;
}
.comp_07-content {
max-width: 47.5rem;
}
.comp_07-title {
margin-bottom: 1.875rem;
font-size: 3.125rem;
font-weight: 400;
}
.comp_07-rule {
width: 6rem;
height: 0.3125rem;
margin-bottom: 2.375rem;
}
.comp_07-text {
margin-bottom: 1.625rem;
font-size: 1.5rem;
}
.comp_07-challenge {
margin-top: 2.25rem;
padding-left: 1.875rem;
}
.comp_07-challenge-title {
font-size: 1.25rem;
}
.comp_07-challenge-line {
font-size: 1.75rem;
}
.comp_07-card {
padding: 3rem 2.75rem;
}
.comp_07-form-title {
font-size: 2.125rem;
}
.comp_07-field {
margin-bottom: 1.625rem;
}
.comp_07-formcol .comp_07-form .comp_07-label {
font-size: 1.0625rem;
}
.comp_07-form .comp_07-input {
font-size: 1.5rem;
}
.comp_07-textarea {
min-height: 11.875rem;
}
.comp_07-submit {
min-height: 4.75rem;
padding: 1.375rem 2.5rem;
font-size: 1.1875rem;
}
.comp_07-consent {
gap: 0.875rem;
}
.comp_07-consent .icheckbox {
width: 1.625rem;
height: 1.625rem;
margin-top: 0.1875rem;
}
.comp_07-formcol .comp_07-consent .comp_07-consent-label {
font-size: 1.1875rem;
}
}
/*
* PHONES ( html 90% ). Physical: title 30.6px, body 16.2px, controls ~16px in ~47px targets.
*/
@media (max-width: 730px) {
.comp_07-inner {
gap: 2.5rem;
padding: 4rem 1.5rem;
}
.comp_07-title {
margin-bottom: 1.25rem;
font-size: 2.125rem;
line-height: 1.15;
}
.comp_07-rule {
width: 3.5rem;
height: 0.1875rem;
margin-bottom: 1.5rem;
}
.comp_07-text {
margin-bottom: 1.125rem;
font-size: 1.125rem;
line-height: 1.65;
}
.comp_07-challenge {
margin-top: 1.75rem;
padding-left: 1.25rem;
border-left-width: 0.1875rem;
}
.comp_07-challenge-title {
font-size: 0.9375rem;
}
.comp_07-challenge-line {
font-size: 1.25rem;
}
.comp_07-card {
padding: 2rem 1.5rem;
}
.comp_07-form-title {
font-size: 1.5rem;
}
.comp_07-field {
margin-bottom: 1.25rem;
}
.comp_07-formcol .comp_07-form .comp_07-label {
font-size: 0.8125rem;
}
.comp_07-form .comp_07-input {
font-size: 1.125rem;
}
.comp_07-textarea {
min-height: 9.375rem;
}
.comp_07-submit {
min-height: 3.25rem;
padding: 0.9375rem 1.25rem;
font-size: 0.8125rem;
}
.comp_07-consent {
gap: 0.625rem;
}
.comp_07-consent .icheckbox {
width: 1.125rem;
height: 1.125rem;
margin-top: 0.125rem;
}
.comp_07-formcol .comp_07-consent .comp_07-consent-label {
font-size: 0.875rem;
}
}
@media (max-width: 479px) {
.comp_07-inner {
padding: 3rem 1.5rem;
}
.comp_07-card {
padding: 1.75rem 1.25rem;
}
.comp_07-title {
font-size: 1.875rem;
}
}
/*
* REDUCED MOTION - WOW.js writes animation-name inline, so only !important reaches it.
*/
@media (prefers-reduced-motion: reduce) {
.comp_07-content.wow,
.comp_07-formcol.wow {
visibility: visible;
animation: none !important;
}
}
/*
* COMP_08 - MENU: TABBED CATEGORY LIST + DENNÍ MENU TEASER
*
* Markup: templates/comp_08.php
* Behaviour: js/scripts-parts/comp_08.js ( ARIA tabs + the shared sliding underline ). The reveal
* is WOW.js, initialised inline in header.php.
*
* Split section on the cream ground: the food menu ( heading + category tabs + dish list ) on the
* LEFT, a dark "Denní menu" teaser column on the RIGHT that bleeds to the viewport edge and whose
* content sticks under the header. Same machinery as comp_03 / comp_05 - flex, align-items:stretch,
* height from the LEFT content, no percentage-height chains - and the dark column is the comp_03 /
* comp_07 dark-card family.
*
* THE MENU CONTENT'S LEFT EDGE lands on the rem(1280) container the header / hero / footer share
* ( the documented min-width:1152px calc ), and the teaser's text RIGHT edge lands on the same
* container's right edge - so the whole section sits on one grid.
*
* TABS. The active tab is marked by the shared sliding underline ( js/cookie-sliding_indicator.js )
* ON DESKTOP. Below 980px the tab bar scrolls horizontally, where that plugin's offset() maths
* drifts, so the indicator is hidden there and a static ::after underline marks the active tab
* instead - the same trade the header makes when it hides .nav-indicator under the hamburger. The
* sliding transition MUST live here ( the plugin clears its inline transition after init ), and
* .comp_08-tabs must stay position:relative ( the plugin's `left` maths depends on it ).
*
* The menu + panel row is capped to the rem(1280) container ( .comp_08-inner ) and centred.
*
* READ THE RESPONSIVE NOTE before changing a number: rem() is not physical px here - html{font-size}
* steps 100/90/70/80/90/100% across the _base.scss breakpoints, which are NOT the ones used below.
* Type is scaled in rem per band purely to land the same physical size, exactly like comp_02/03/05.
*/
.comp_08-wrapper {
position: relative;
width: 100%;
background-color: #f4f2ef;
box-sizing: border-box;
}
.comp_08-inner {
display: flex;
align-items: stretch;
width: 100%;
max-width: 80rem;
margin: 0 auto;
box-sizing: border-box;
}
/*
* LEFT - THE MENU
*/
.comp_08-body {
flex: 1 1 auto;
display: flex;
min-width: 0;
padding: 7rem 4.5rem 7.5rem 3rem;
box-sizing: border-box;
}
.comp_08-menu {
width: 100%;
min-width: 0;
}
.comp_08-title {
margin: 0 0 1.25rem 0;
color: #1d1d1b;
font-size: 3.75rem;
font-weight: 200;
line-height: 1.05;
text-transform: uppercase;
letter-spacing: 0.005em;
}
.comp_08-rule {
display: block;
width: 4.5rem;
height: 0.25rem;
margin: 0 0 2.5rem 0;
background-color: #be1622;
}
/*
* TAB BAR
*
* position:relative is the positioning context the sliding indicator writes `left` against.
* overflow-x:auto contains the row on narrow widths so it can never overflow the page ( sized to
* fit without scrolling on desktop ). The hairline is the baseline the underline sits on.
*/
.comp_08-tabs {
position: relative;
display: flex;
align-items: flex-end;
gap: 1.875rem;
margin: 0 0 2.125rem 0;
border-bottom: 1px solid rgba(29, 29, 27, 0.12);
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.comp_08-tabs::-webkit-scrollbar {
display: none;
}
.comp_08-tab {
position: relative;
flex: 0 0 auto;
margin: 0;
padding: 0 0 1rem 0;
background: transparent;
border: 0;
color: rgba(29, 29, 27, 0.5);
font-family: "Mukta";
font-size: 0.875rem;
font-weight: 600;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 0.08em;
white-space: nowrap;
cursor: pointer;
transition: color 0.25s ease;
}
.comp_08-tab > span {
display: block;
pointer-events: none;
}
.comp_08-tab:hover {
color: #1d1d1b;
}
.comp_08-tab[aria-selected=true] {
color: #1d1d1b;
}
.comp_08-tab:focus-visible {
outline: 2px solid #be1622;
outline-offset: 3px;
}
/*
* The sliding underline, injected by slidingIndicator() as .comp_08-tab-indicator. The plugin sets
* only left / width; the rest - and crucially the transition - is here. Desktop only: hidden below
* 980px, where the bar scrolls and a static ::after underline ( further down ) takes over.
*/
.comp_08-tab-indicator {
position: absolute;
bottom: -1px;
height: 0.1875rem;
background-color: #be1622;
border-radius: 0.09375rem;
pointer-events: none;
transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (max-width: 979px) {
.comp_08-tab-indicator {
display: none !important;
}
}
/*
* PANELS + DISH LIST
*/
.comp_08-panel[hidden] {
display: none;
}
.comp_08-panel-heading {
margin: 0 0 1.25rem 0;
color: #1d1d1b;
font-size: 1.5rem;
font-weight: 600;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.comp_08-panel + .comp_08-panel {
margin-top: 3rem;
}
.comp_08-menu.tabs-ready .comp_08-panel + .comp_08-panel {
margin-top: 0;
}
.comp_08-menu.tabs-ready .comp_08-panel-heading {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.comp_08-list {
margin: 0;
padding: 0;
list-style: none;
}
.comp_08-item {
display: flex;
align-items: center;
gap: 1.75rem;
padding: 1.375rem 0;
border-bottom: 1px solid rgba(29, 29, 27, 0.1);
}
.comp_08-item:first-child {
padding-top: 0.375rem;
}
.comp_08-item:last-child {
border-bottom: 0;
}
.comp_08-item-media {
flex: 0 0 auto;
width: 5.75rem;
height: 5.75rem;
overflow: hidden;
border-radius: 0.125rem;
}
.comp_08-item-media img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
mix-blend-mode: darken;
}
.comp_08-item-body {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
}
.comp_08-item-name {
margin: 0 0 0.25rem 0;
color: #1d1d1b;
font-size: 1.25rem;
font-weight: 600;
line-height: 1.3;
}
.comp_08-item-desc {
margin: 0;
color: rgba(29, 29, 27, 0.6);
font-size: 0.9375rem;
font-weight: 400;
line-height: 1.5;
}
.comp_08-item-price {
flex: 0 0 auto;
margin-left: 1.25rem;
color: #1d1d1b;
font-size: 1.1875rem;
font-weight: 600;
line-height: 1.3;
white-space: nowrap;
}
.comp_08-item-allergens {
margin: 0.3125rem 0 0 0;
color: rgba(29, 29, 27, 0.45);
font-size: 0.8125rem;
font-weight: 400;
line-height: 1.4;
letter-spacing: 0.02em;
}
/*
* THE ALLERGEN LEGEND
*
* Sits under the tab panels, so it belongs to the page rather than to one category. Lists only the
* numbers the menu actually uses, each with its full legal wording - the client's rule is that the
* answer is on the menu and nobody has to ask the staff, so there is no "zeptejte se obsluhy" line.
*
* Two columns from bp3 up via CSS columns, not the grid: the items are a single
of uneven-length
* rows, and columns let the browser balance them without wrapping every item in grid markup.
*/
.comp_08-allergens {
margin-top: 3rem;
padding-top: 1.75rem;
border-top: 1px solid rgba(29, 29, 27, 0.12);
}
.comp_08-allergens-heading {
margin: 0 0 1rem 0;
color: #1d1d1b;
font-size: 1rem;
font-weight: 600;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.comp_08-allergens-list {
margin: 0;
padding: 0;
list-style: none;
columns: 2;
column-gap: 2.5rem;
}
.comp_08-allergens-item {
display: flex;
align-items: baseline;
gap: 0.5rem;
margin: 0 0 0.4375rem 0;
break-inside: avoid;
color: rgba(29, 29, 27, 0.6);
font-size: 0.8125rem;
font-weight: 400;
line-height: 1.45;
}
.comp_08-allergens-num {
flex: 0 0 auto;
min-width: 1.125rem;
color: #be1622;
font-weight: 600;
}
.comp_08-allergens-name {
flex: 1 1 auto;
min-width: 0;
}
/*
* RIGHT - THE DENNÍ MENU TEASER
*
* A dark column that bleeds to the viewport edge; its content sticks under the header as the dish
* list scrolls. Dark-card family ( comp_03-box / comp_07 ).
*/
.comp_08-panelcol {
flex: 0 0 44%;
position: relative;
margin: 5rem 0;
min-width: 0;
background-color: #1d1d1b;
box-sizing: border-box;
}
.comp_08-teaser {
position: sticky;
top: 2.5rem;
display: flex;
flex-direction: column;
padding: 7rem 3.5rem 4.5rem 3.5rem;
color: #ffffff;
box-sizing: border-box;
}
.comp_08-teaser-icon {
position: absolute;
left: 50%;
bottom: 3.5rem;
z-index: 0;
transform: translateX(-50%);
display: block;
width: 15.625rem;
color: #ffffff;
opacity: 0.06;
pointer-events: none;
}
.comp_08-teaser-icon svg {
display: block;
width: 100%;
height: auto;
}
.comp_08-teaser-title {
position: relative;
z-index: 1;
margin: 0 0 1.5rem 0;
color: #ffffff;
font-size: 2.75rem;
font-weight: 200;
line-height: 1.12;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.comp_08-teaser-rule {
position: relative;
z-index: 1;
display: block;
width: 3rem;
height: 0.1875rem;
margin: 0 0 1.75rem 0;
background-color: #be1622;
}
.comp_08-teaser-text {
position: relative;
z-index: 1;
max-width: 21.25rem;
margin: 0 0 2.5rem 0;
color: rgba(255, 255, 255, 0.78);
font-size: 1.0625rem;
font-weight: 400;
line-height: 1.65;
text-wrap: pretty;
}
/*
* Deliberately NOT .button. The dark-inverted ghost CTA - outlined white on the dark ground,
* filling to white on hover. Same object as .comp_03-box-button. align-self shrinks it to its
* label ( a flex item would stretch the column otherwise ).
*/
.comp_08-teaser-button {
position: relative;
z-index: 1;
align-self: flex-start;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 3.5rem;
padding: 1rem 1.875rem;
color: #ffffff;
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.25;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.08em;
text-decoration: none;
border: 1px solid rgba(255, 255, 255, 0.45);
transition: all 0.3s ease;
box-sizing: border-box;
}
.comp_08-teaser-button:hover, .comp_08-teaser-button:focus-visible {
background-color: #ffffff;
border-color: #ffffff;
color: #1d1d1b;
}
.comp_08-teaser-button:focus-visible {
outline: 2px solid #ffffff;
outline-offset: 3px;
}
/*
* RESPONSIVE
*/
@media (max-width: 1239px) {
.comp_08-body {
padding: 6.25rem 3.5rem 6.5rem 3.5rem;
}
.comp_08-teaser {
padding: 6.25rem 3rem 4.5rem 3rem;
}
}
/*
* THE 80% BAND ( 980-1024px, landscape iPad ). Type scaled up in rem so it lands the same physical
* size. Physical: title 48px, tab 12.8px, dish name 18.4px, teaser title 36.8px.
*/
@media (min-width: 980px) and (max-width: 1024px) {
.comp_08-title {
font-size: 4.125rem;
}
.comp_08-rule {
width: 5.25rem;
}
.comp_08-tab {
font-size: 1rem;
}
.comp_08-panel-heading {
font-size: 1.6875rem;
}
.comp_08-item-name {
font-size: 1.4375rem;
}
.comp_08-item-desc {
font-size: 1.0625rem;
}
.comp_08-item-price {
font-size: 1.375rem;
}
.comp_08-item-allergens {
font-size: 0.9375rem;
}
.comp_08-allergens-heading {
font-size: 1.125rem;
}
.comp_08-allergens-item {
font-size: 0.9375rem;
}
.comp_08-item-media {
width: 6.5rem;
height: 6.5rem;
}
.comp_08-teaser-title {
font-size: 2.875rem;
}
.comp_08-teaser-text {
max-width: 22.5rem;
font-size: 1.125rem;
}
.comp_08-teaser-button {
min-height: 4rem;
font-size: 0.9375rem;
}
}
/*
* STACKED - the teaser leaves the sidebar and becomes a full-width dark block UNDER the menu.
* 979px, matching where the header collapses and comp_03/05 stack. The tab bar now scrolls
* ( the sliding indicator is hidden above; the static ::after underline below takes over ).
* Physical sizes ( html 70% ): title 46px, tab 12.6px, dish name 16.8px, teaser title 32.9px.
*/
@media (max-width: 979px) {
.comp_08-inner {
flex-direction: column;
}
.comp_08-body {
flex: 0 0 auto;
padding: 4.5rem 2rem;
}
.comp_08-menu {
max-width: 51.25rem;
}
.comp_08-title {
margin-bottom: 1.5rem;
font-size: 4rem;
font-weight: 400;
}
.comp_08-rule {
width: 6rem;
height: 0.3125rem;
margin-bottom: 2.75rem;
}
.comp_08-tabs {
gap: 2.5rem;
margin-bottom: 2.5rem;
}
.comp_08-tab {
font-size: 1.125rem;
padding-bottom: 1.25rem;
}
.comp_08-menu.tabs-ready .comp_08-tab[aria-selected=true]::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 0.25rem;
background-color: #be1622;
border-radius: 0.125rem;
}
.comp_08-panel-heading {
font-size: 2.125rem;
}
.comp_08-item {
gap: 2rem;
padding: 1.75rem 0;
}
.comp_08-item-media {
width: 7.5rem;
height: 7.5rem;
}
.comp_08-item-name {
font-size: 1.5rem;
}
.comp_08-item-desc {
font-size: 1.1875rem;
}
.comp_08-item-price {
margin-left: 1.5rem;
font-size: 1.5rem;
}
.comp_08-item-allergens {
font-size: 1rem;
}
.comp_08-allergens-heading {
font-size: 1.25rem;
}
.comp_08-allergens-item {
font-size: 1rem;
}
.comp_08-panelcol {
flex: 0 0 auto;
width: 100%;
margin: 0;
overflow: hidden;
}
.comp_08-teaser {
position: static;
padding: 4.5rem 2rem;
}
.comp_08-teaser-icon {
bottom: 2.5rem;
width: 13.75rem;
}
.comp_08-teaser-title {
font-size: 2.9375rem;
font-weight: 400;
}
.comp_08-teaser-rule {
width: 4rem;
height: 0.25rem;
margin-bottom: 2.125rem;
}
.comp_08-teaser-text {
max-width: 32.5rem;
font-size: 1.3125rem;
}
.comp_08-teaser-button {
min-height: 4.5rem;
padding: 1.375rem 2.5rem;
font-size: 1.125rem;
}
}
/*
* PHONES. Physical sizes ( html 90% ): title 34.2px, tab 13.5px, dish name 16.2px, teaser 27.9px.
*/
@media (max-width: 730px) {
.comp_08-body {
padding: 4.375rem 1.5rem 3.5rem;
}
.comp_08-title {
margin-bottom: 1.125rem;
font-size: 2.375rem;
line-height: 1.1;
}
.comp_08-rule {
width: 3.5rem;
height: 0.1875rem;
margin-bottom: 1.875rem;
}
.comp_08-tabs {
gap: 1.75rem;
margin-bottom: 1.75rem;
}
.comp_08-tab {
font-size: 0.9375rem;
padding-bottom: 0.875rem;
}
.comp_08-panel-heading {
font-size: 1.375rem;
}
.comp_08-item {
gap: 1.125rem;
padding: 1.125rem 0;
}
.comp_08-item-media {
width: 4.75rem;
height: 4.75rem;
}
.comp_08-item-name {
font-size: 1.125rem;
}
.comp_08-item-desc {
font-size: 0.9375rem;
}
.comp_08-item-price {
margin-left: 0.875rem;
font-size: 1.0625rem;
}
.comp_08-item-allergens {
font-size: 0.8125rem;
}
.comp_08-allergens {
margin-top: 2.25rem;
padding-top: 1.5rem;
}
.comp_08-allergens-heading {
font-size: 0.9375rem;
}
.comp_08-allergens-list {
columns: 1;
}
.comp_08-allergens-item {
font-size: 0.8125rem;
}
.comp_08-teaser {
padding: 3.5rem 1.5rem;
}
.comp_08-teaser-icon {
width: 10.625rem;
}
.comp_08-teaser-title {
font-size: 1.9375rem;
}
.comp_08-teaser-rule {
width: 3rem;
height: 0.1875rem;
margin-bottom: 1.5rem;
}
.comp_08-teaser-text {
max-width: none;
font-size: 1rem;
}
.comp_08-teaser-button {
width: 100%;
min-height: 3.25rem;
padding: 1rem 1.25rem;
font-size: 0.8125rem;
}
}
@media (max-width: 479px) {
.comp_08-body {
padding: 3.875rem 1.5rem 3rem;
}
.comp_08-title {
font-size: 2.125rem;
}
.comp_08-item-media {
width: 4rem;
height: 4rem;
}
.comp_08-item-name {
font-size: 1.0625rem;
}
.comp_08-item-desc {
font-size: 0.875rem;
}
.comp_08-item-allergens {
font-size: 0.75rem;
}
.comp_08-allergens-item {
font-size: 0.75rem;
}
.comp_08-teaser {
padding: 3rem 1.5rem;
}
.comp_08-teaser-title {
font-size: 1.875rem;
}
}
/*
* REDUCED MOTION - WOW.js writes animation-name inline, so only !important reaches it.
*/
@media (prefers-reduced-motion: reduce) {
.comp_08-title.wow,
.comp_08-teaser.wow {
visibility: visible;
animation: none !important;
}
}
/*
* COMP_09 - DENNÍ MENU: DAY TABS + STACKED CATEGORY LIST
*
* Markup: templates/comp_09.php
* Behaviour: js/scripts-parts/comp_09.js ( ARIA tabs + the shared sliding underline ). The reveal is
* WOW.js, initialised inline in header.php.
*
* The rotating daily menu on the cream ground - the sibling of the permanent Menu page ( comp_08 ),
* built TEXT ONLY: a typographic list ( name · dotted leader · price, description under the name ) with
* no dish photos. Categories are NOT tabbed here - all five stack as headed sections. The tab bar
* switches the DAY ( Dnes / Zítra / a weekday ), reusing comp_08's exact machinery on the day axis, so
* the numbers below are tuned the same way and _comp_08.scss is the reference for anything shared.
*
* The heading + tabs + day panels live in a centred reading column ( .comp_09-menu, capped rem(900) ),
* and the whole thing is bounded by the site's rem(1280) container ( .comp_09-inner ).
*
* TABS. The active DAY is marked by the shared sliding underline ( js/cookie-sliding_indicator.js ) ON
* DESKTOP. Below 980px the tab bar scrolls horizontally, where that plugin's offset() maths drifts, so
* the indicator is hidden there and a static ::after underline marks the active tab instead - the same
* trade comp_08 / the header make. The slide transition MUST live here ( the plugin clears its inline
* transition after init ), and .comp_09-tabs must stay position:relative ( the plugin's `left` maths
* depends on it ).
*
* READ THE RESPONSIVE NOTE before changing a number: rem() is not physical px here - html{font-size}
* steps 100/90/70/80/90/100% across the _base.scss breakpoints, which are NOT the ones used below.
* Type is scaled in rem per band purely to land the same physical size, exactly like comp_02/03/08.
*/
.comp_09-wrapper {
position: relative;
width: 100%;
background-color: #f4f2ef;
box-sizing: border-box;
}
.comp_09-inner {
width: 100%;
max-width: 80rem;
margin: 0 auto;
padding: 7rem 3rem 7.5rem 3rem;
box-sizing: border-box;
}
/*
* HEADER + MENU COLUMN
*/
.comp_09-menu {
position: relative;
width: 100%;
max-width: 56.25rem;
margin: 0 auto;
}
.comp_09-print-logo {
display: none;
}
.comp_09-print {
position: absolute;
top: 0.25rem;
right: 0;
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin: 0;
padding: 0.5625rem 1.125rem;
background: transparent;
border: 1px solid rgba(29, 29, 27, 0.18);
border-radius: 62.4375rem;
color: #1d1d1b;
font-family: "Mukta";
font-size: 0.8125rem;
font-weight: 600;
line-height: 1;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.comp_09-print svg {
display: block;
width: 1rem;
height: 1rem;
}
.comp_09-print:hover {
color: #be1622;
border-color: #be1622;
}
.comp_09-print:focus-visible {
outline: 2px solid #be1622;
outline-offset: 3px;
}
.comp_09-eyebrow {
display: block;
margin: 0 0 0.875rem 0;
color: #be1622;
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.06em;
}
.comp_09-title {
margin: 0 0 1.25rem 0;
color: #1d1d1b;
font-size: 3.75rem;
font-weight: 200;
line-height: 1.05;
text-transform: uppercase;
letter-spacing: 0.005em;
}
.comp_09-rule {
display: block;
width: 4.5rem;
height: 0.25rem;
margin: 0 0 2.5rem 0;
background-color: #be1622;
}
/*
* THE LUNCH SERVICE WINDOWS ( "Výdej obědů" )
*
* Standing information, printed once above the day tabs - the times are the same every day. See
* templates/comp_09.php for why it is not repeated inside each day panel.
*
* A HAIRLINE BOX, NOT A FILL. The page is one flat cream ground with red used only for the rule and the
* category marks; a filled or coloured panel here would read as a promotion sitting on top of the menu.
* The box is the lightest thing that still says "this is not part of the list": the same
* rgba(29, 29, 27, 0.14) hairline as the allergen legend, and the rem(8) radius from comp_12's bands.
*
* The rows are the allergen legend's two-column shape - a fixed narrow left column, the wording in the
* rest - so the page has ONE way of setting a small reference list. The times keep a min-width instead of
* a set width so a longer window ( "11:30-12:00" vs "9:00-10:00" ) still lines the audiences up.
*
* SCREEN ONLY - it is stripped in @media print with the rest of the site chrome ( see the print block ).
*/
.comp_09-serving {
margin: 0 0 2.75rem 0;
padding: 1.375rem 1.75rem 1.5rem 1.75rem;
border: 1px solid rgba(29, 29, 27, 0.14);
border-radius: 0.5rem;
}
.comp_09-serving-heading {
margin: 0 0 0.875rem 0;
color: #1d1d1b;
font-size: 1rem;
font-weight: 600;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.comp_09-serving-list {
margin: 0;
padding: 0;
list-style: none;
}
.comp_09-serving-item {
display: flex;
align-items: baseline;
gap: 0.5rem 1.25rem;
flex-wrap: wrap;
margin: 0;
color: rgba(29, 29, 27, 0.72);
font-size: 1.0625rem;
line-height: 1.6em;
}
.comp_09-serving-item + .comp_09-serving-item {
margin-top: 0.375rem;
}
.comp_09-serving-time {
flex: 0 0 auto;
min-width: 7rem;
color: #1d1d1b;
font-weight: 600;
white-space: nowrap;
}
.comp_09-serving-who {
flex: 1 1 auto;
min-width: 0;
}
.comp_09-empty {
margin: 0;
font-size: 1.125rem;
line-height: 1.6em;
color: rgba(29, 29, 27, 0.7);
}
/*
* DAY TAB BAR
*
* position:relative is the positioning context the sliding indicator writes `left` against.
* overflow-x:auto contains the row on narrow widths so it can never overflow the page ( sized to fit
* without scrolling on desktop ). The hairline is the baseline the underline sits on.
*/
.comp_09-tabs {
position: relative;
display: flex;
align-items: flex-end;
gap: 2.125rem;
margin: 0 0 2.5rem 0;
border-bottom: 1px solid rgba(29, 29, 27, 0.12);
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.comp_09-tabs::-webkit-scrollbar {
display: none;
}
.comp_09-tab {
position: relative;
flex: 0 0 auto;
margin: 0;
padding: 0 0 1rem 0;
background: transparent;
border: 0;
color: rgba(29, 29, 27, 0.5);
font-family: "Mukta";
cursor: pointer;
transition: color 0.25s ease;
}
.comp_09-tab > span {
display: block;
pointer-events: none;
}
.comp_09-tab .comp_09-tab-label {
display: block;
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 0.08em;
white-space: nowrap;
}
.comp_09-tab .comp_09-tab-date {
display: block;
margin-top: 0.1875rem;
font-size: 0.75rem;
font-weight: 400;
line-height: 1.2;
letter-spacing: 0.02em;
white-space: nowrap;
}
.comp_09-tab:hover {
color: #1d1d1b;
}
.comp_09-tab[aria-selected=true] {
color: #1d1d1b;
}
.comp_09-tab:focus-visible {
outline: 2px solid #be1622;
outline-offset: 3px;
}
/*
* The sliding underline, injected by slidingIndicator() as .comp_09-tab-indicator. The plugin sets
* only left / width; the rest - and crucially the transition - is here. Desktop only: hidden below
* 980px, where the bar scrolls and a static ::after underline ( further down ) takes over.
*/
.comp_09-tab-indicator {
position: absolute;
bottom: -1px;
height: 0.1875rem;
background-color: #be1622;
border-radius: 0.09375rem;
pointer-events: none;
transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (max-width: 979px) {
.comp_09-tab-indicator {
display: none !important;
}
}
/*
* DAY PANELS + THE STACKED CATEGORIES
*/
.comp_09-panel[hidden] {
display: none;
}
.comp_09-panel-heading {
margin: 0 0 1.875rem 0;
color: #1d1d1b;
font-size: 1.5rem;
font-weight: 600;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.comp_09-panel + .comp_09-panel {
margin-top: 4rem;
}
.comp_09-menu.tabs-ready .comp_09-panel + .comp_09-panel {
margin-top: 0;
}
.comp_09-menu.tabs-ready .comp_09-panel-heading {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.comp_09-category + .comp_09-category {
margin-top: 2.75rem;
}
.comp_09-category-heading {
position: relative;
margin: 0 0 0.375rem 0;
padding: 0 0 0.75rem 0;
color: #1d1d1b;
font-size: 1.375rem;
font-weight: 600;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.comp_09-category-heading::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 4.5rem;
height: 0.25rem;
background-color: #be1622;
}
.comp_09-list {
margin: 0;
padding: 0;
list-style: none;
}
.comp_09-item {
padding: 0.875rem 0;
}
.comp_09-item:last-child {
padding-bottom: 0;
}
.comp_09-item-head {
display: flex;
align-items: baseline;
}
.comp_09-item-name {
flex: 0 1 auto;
min-width: 0;
margin: 0;
color: #1d1d1b;
font-size: 1.25rem;
font-weight: 600;
line-height: 1.3;
}
.comp_09-item-badge {
flex: 0 0 auto;
margin-left: 0.5625rem;
padding: 0.125rem 0.4375rem;
background-color: rgba(29, 29, 27, 0.07);
color: rgba(29, 29, 27, 0.62);
font-size: 0.6875rem;
font-weight: 600;
line-height: 1.5;
letter-spacing: 0.07em;
text-transform: uppercase;
white-space: nowrap;
transform: translateY(-0.12em);
}
.comp_09-item-allergens {
flex: 0 0 auto;
margin-left: 0.4375rem;
color: rgba(29, 29, 27, 0.45);
font-size: 0.8125rem;
font-weight: 400;
line-height: 1.3;
letter-spacing: 0.02em;
white-space: nowrap;
}
.comp_09-item-dots {
flex: 1 1 auto;
min-width: 1rem;
margin: 0 0.5rem;
border-bottom: 2px dotted rgba(29, 29, 27, 0.28);
transform: translateY(-0.28em);
}
.comp_09-item-price {
flex: 0 0 auto;
color: #1d1d1b;
font-size: 1.1875rem;
font-weight: 600;
line-height: 1.3;
white-space: nowrap;
}
.comp_09-item-desc {
margin: 0.25rem 0 0 0;
color: rgba(29, 29, 27, 0.6);
font-size: 0.9375rem;
font-weight: 400;
line-height: 1.5;
max-width: 38.75rem;
}
/*
* THE ALLERGEN LEGEND
*
* One per DAY PANEL, at the foot of that day's categories - inside the panel, because @media print only
* outputs the active one and the printed sheet is exactly where a guest needs the wording. Lists only
* the numbers that day uses, each spelled out in full: the client's rule is that the answer is on the
* menu, so there is deliberately no "zeptejte se obsluhy" line.
*
* Two columns via CSS columns rather than the grid - the items are one
of uneven-length rows and
* the browser can balance them without per-item markup.
*/
.comp_09-allergens {
margin-top: 2.75rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(29, 29, 27, 0.14);
}
.comp_09-allergens-heading {
margin: 0 0 0.875rem 0;
color: #1d1d1b;
font-size: 1rem;
font-weight: 600;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.comp_09-allergens-list {
margin: 0;
padding: 0;
list-style: none;
columns: 2;
column-gap: 2.5rem;
}
.comp_09-allergens-item {
display: flex;
align-items: baseline;
gap: 0.5rem;
margin: 0 0 0.4375rem 0;
break-inside: avoid;
color: rgba(29, 29, 27, 0.6);
font-size: 0.8125rem;
font-weight: 400;
line-height: 1.45;
}
/*
* THE STAFF-PRICE FOOTNOTE - what the asterisk beside a discounted price means.
*
* Sits under the allergen legend, inside the day panel, for the same print reason the legend does.
* Quieter than the legend on purpose: it explains a mark rather than carrying information a guest has
* to read, so it is set at the legend's own small size and lighter still.
*
* The asterisk is a separate span, hanging in the left margin, so the sentence's own lines align with
* each other instead of the second line starting under the mark.
*/
.comp_09-price-note {
position: relative;
margin: 1.25rem 0 0 0;
padding-left: 0.875rem;
color: rgba(29, 29, 27, 0.5);
font-size: 0.75rem;
font-weight: 400;
line-height: 1.5;
}
.comp_09-price-note-mark {
position: absolute;
left: 0;
top: 0;
color: #be1622;
font-weight: 600;
}
.comp_09-allergens-num {
flex: 0 0 auto;
min-width: 1.125rem;
color: #be1622;
font-weight: 600;
}
.comp_09-allergens-name {
flex: 1 1 auto;
min-width: 0;
}
/*
* RESPONSIVE
*/
@media (max-width: 1239px) {
.comp_09-inner {
padding: 6.25rem 3.5rem 6.5rem 3.5rem;
}
}
/*
* THE 80% BAND ( 980-1024px, landscape iPad ). Type scaled up in rem so it lands the same physical
* size. Physical: title 48px, tab label 12.8px, category 17.6px, dish name 18.4px.
*/
@media (min-width: 980px) and (max-width: 1024px) {
.comp_09-eyebrow {
font-size: 1.125rem;
}
.comp_09-title {
font-size: 4.125rem;
}
.comp_09-rule {
width: 5.25rem;
}
.comp_09-serving-heading {
font-size: 1.125rem;
}
.comp_09-serving-item {
font-size: 1.1875rem;
}
.comp_09-serving-time {
min-width: 7.8125rem;
}
.comp_09-tab .comp_09-tab-label {
font-size: 1.0625rem;
}
.comp_09-tab .comp_09-tab-date {
font-size: 0.875rem;
}
.comp_09-panel-heading {
font-size: 1.6875rem;
}
.comp_09-category-heading {
font-size: 1.5625rem;
}
.comp_09-item-name {
font-size: 1.4375rem;
}
.comp_09-item-price {
font-size: 1.375rem;
}
.comp_09-item-desc {
font-size: 1.0625rem;
}
.comp_09-item-allergens {
font-size: 0.9375rem;
}
.comp_09-item-badge {
font-size: 0.75rem;
}
.comp_09-allergens-heading {
font-size: 1.125rem;
}
.comp_09-allergens-item {
font-size: 0.9375rem;
}
}
/*
* STACKED - 979px, matching where the header collapses and comp_08 stacks. The tab bar now scrolls
* ( sliding indicator hidden above; the static ::after underline below takes over ). html is 70%
* here, so type is scaled up hard.
* Physical ( x0.7 ): title 44.8px, tab label 12.6px, category 16.8px, dish name 16.8px.
*/
@media (max-width: 979px) {
.comp_09-inner {
padding: 4.5rem 2rem;
}
.comp_09-menu {
max-width: 47.5rem;
}
.comp_09-eyebrow {
font-size: 1.25rem;
}
.comp_09-title {
margin-bottom: 1.5rem;
font-size: 4rem;
font-weight: 400;
}
.comp_09-rule {
width: 6rem;
height: 0.3125rem;
margin-bottom: 2.75rem;
}
.comp_09-serving {
margin-bottom: 3rem;
padding: 1.625rem 1.875rem 1.75rem 1.875rem;
}
.comp_09-serving-heading {
font-size: 1.25rem;
}
.comp_09-serving-item {
font-size: 1.3125rem;
}
.comp_09-serving-time {
min-width: 8.625rem;
}
.comp_09-tabs {
gap: 2.75rem;
margin-bottom: 2.75rem;
}
.comp_09-tab {
padding-bottom: 1.25rem;
}
.comp_09-tab .comp_09-tab-label {
font-size: 1.25rem;
}
.comp_09-tab .comp_09-tab-date {
font-size: 1rem;
}
.comp_09-menu.tabs-ready .comp_09-tab[aria-selected=true]::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 0.25rem;
background-color: #be1622;
border-radius: 0.125rem;
}
.comp_09-panel-heading {
font-size: 2.125rem;
}
.comp_09-category + .comp_09-category {
margin-top: 3.25rem;
}
.comp_09-category-heading {
font-size: 1.5rem;
padding-bottom: 0.875rem;
}
.comp_09-item {
padding: 1.125rem 0;
}
.comp_09-item-name {
font-size: 1.5rem;
}
.comp_09-item-price {
font-size: 1.5rem;
}
.comp_09-item-desc {
font-size: 1.1875rem;
max-width: none;
}
.comp_09-item-allergens {
font-size: 1rem;
}
.comp_09-item-badge {
font-size: 0.8125rem;
}
.comp_09-allergens-heading {
font-size: 1.25rem;
}
.comp_09-allergens-item {
font-size: 1rem;
}
}
/*
* PHONES. html is 90% here. Physical ( x0.9 ): title 34.2px, tab label 13.5px, category 19.8px,
* dish name 16.2px.
*/
@media (max-width: 730px) {
.comp_09-inner {
padding: 4.375rem 1.5rem 3.5rem;
}
.comp_09-eyebrow {
font-size: 0.9375rem;
}
.comp_09-title {
margin-bottom: 1.125rem;
font-size: 2.375rem;
line-height: 1.1;
}
.comp_09-rule {
width: 3.5rem;
height: 0.1875rem;
margin-bottom: 1.875rem;
}
.comp_09-serving {
margin-bottom: 1.875rem;
padding: 1rem 1.125rem 1.125rem 1.125rem;
}
.comp_09-serving-heading {
margin-bottom: 0.625rem;
font-size: 0.9375rem;
}
.comp_09-serving-item {
font-size: 1rem;
}
.comp_09-serving-time {
min-width: 6.5625rem;
}
.comp_09-tabs {
gap: 1.875rem;
margin-bottom: 1.875rem;
}
.comp_09-tab .comp_09-tab-label {
font-size: 0.9375rem;
}
.comp_09-tab .comp_09-tab-date {
font-size: 0.75rem;
}
.comp_09-panel-heading {
font-size: 1.375rem;
}
.comp_09-panel + .comp_09-panel {
margin-top: 3rem;
}
.comp_09-category + .comp_09-category {
margin-top: 2.25rem;
}
.comp_09-category-heading {
font-size: 1.375rem;
padding-bottom: 0.625rem;
}
.comp_09-item {
padding: 0.8125rem 0;
}
.comp_09-item-name {
font-size: 1.125rem;
}
.comp_09-item-price {
font-size: 1.0625rem;
}
.comp_09-item-desc {
font-size: 0.9375rem;
}
.comp_09-item-allergens {
margin-left: 0.375rem;
font-size: 0.8125rem;
}
.comp_09-item-badge {
margin-left: 0.4375rem;
padding: 0.0625rem 0.3125rem;
font-size: 0.625rem;
}
.comp_09-allergens {
margin-top: 2.125rem;
padding-top: 1.25rem;
}
.comp_09-allergens-heading {
font-size: 0.9375rem;
}
.comp_09-allergens-list {
columns: 1;
}
.comp_09-allergens-item {
font-size: 0.8125rem;
}
}
@media (max-width: 479px) {
.comp_09-inner {
padding: 3.875rem 1.5rem 3rem;
}
.comp_09-print {
padding: 0.5625rem;
}
.comp_09-print span {
display: none;
}
.comp_09-title {
font-size: 2.125rem;
}
.comp_09-serving-item {
gap: 0.125rem 0.875rem;
font-size: 0.9375rem;
}
.comp_09-serving-time {
min-width: 5.75rem;
}
.comp_09-item-dots {
min-width: 0.75rem;
margin: 0 0.375rem;
}
.comp_09-item-name {
font-size: 1.0625rem;
}
.comp_09-item-desc {
font-size: 0.875rem;
}
.comp_09-item-allergens {
font-size: 0.75rem;
}
.comp_09-item-badge {
font-size: 0.5625rem;
}
.comp_09-allergens-item {
font-size: 0.75rem;
}
}
/*
* REDUCED MOTION - WOW.js writes animation-name inline, so only !important reaches it.
*/
@media (prefers-reduced-motion: reduce) {
.comp_09-eyebrow.wow,
.comp_09-title.wow,
.comp_09-serving.wow {
visibility: visible;
animation: none !important;
}
}
/*
* PRINT - "VYTISKNOUT" ( the .comp_09-print button )
*
* Turns the daily-menu page into a clean one-sheet menu card. The whole site chrome is stripped
* ( header, footer, sign-up band, tabs, the print button itself ) and ONLY the active day prints:
* inactive day panels already carry [hidden] from comp_09.js, so nothing extra is needed to pick the
* day - the visitor prints exactly the day they are looking at. The sr-only day heading is brought
* back so the sheet names the day ( "Dnes · pondělí 22. 7. 2026" ).
*
* BLACK AND WHITE FIRST. No colour is relied on. Text is near-black already; the two red marks
* ( .comp_09-rule and the category underline ) are redrawn as BLACK BORDERS - not background fills,
* because browsers drop background-colour in print unless print-color-adjust is forced. Borders always
* print, so the rules survive on a mono laser with no colour-adjust hacks. The logo SVG is line/text
* art and reads fine in greyscale.
*
* UNITS ARE PHYSICAL ( pt / mm ), NOT rem(). rem() here is tied to html{font-size}, which _base.scss
* steps 70-100% on VIEWPORT breakpoints - meaningless for paper and unpredictable in the print context.
* Physical units map straight to the page, so the sheet looks the same whatever the print engine.
*/
@media print {
.main_header-wrapper,
.dummy_header,
.comp_03-wrapper,
.main_footer-wrapper,
.mobile-menu-overlay,
.comp_10-wrapper,
.comp_09-print,
.comp_09-tabs,
.comp_09-tab-indicator,
.comp_09-serving {
display: none !important;
}
.wow {
visibility: visible !important;
animation: none !important;
}
@page {
margin: 12mm 15mm;
}
html,
body,
.comp_09-wrapper {
background: #ffffff !important;
}
.comp_09-inner {
max-width: none;
margin: 0;
padding: 0 !important;
}
.comp_09-menu {
position: static;
max-width: none;
}
/*
* ONE SHEET. Spacing below is deliberately tight so the active day's five categories fit on a single
* A4 page. It is smaller than the on-screen rhythm on purpose - a printed menu wants to be compact and
* whole, not spread across two pages. break-inside:avoid keeps a category from splitting if the day
* ever grows past one page.
*/
.comp_09-print-logo {
display: block !important;
width: 17mm;
height: 17mm;
margin: 0 auto 3.5mm auto;
}
.comp_09-eyebrow {
margin: 0 0 1.5mm 0;
color: #000000 !important;
font-size: 9pt;
letter-spacing: 0.08em;
text-align: center;
}
.comp_09-title {
margin: 0 0 2.5mm 0;
color: #000000 !important;
font-size: 22pt;
font-weight: 400;
line-height: 1.05;
text-align: center;
}
.comp_09-rule {
width: 14mm;
height: 0;
margin: 0 auto 4mm auto;
background: none !important;
border-top: 1.5pt solid #000000;
}
.comp_09-menu.tabs-ready .comp_09-panel-heading {
position: static !important;
width: auto !important;
height: auto !important;
margin: 0 0 5mm 0 !important;
padding: 0 !important;
overflow: visible !important;
clip: auto !important;
color: #000000 !important;
font-size: 11pt;
letter-spacing: 0.06em;
text-align: center;
}
.comp_09-category {
break-inside: avoid;
}
.comp_09-category + .comp_09-category {
margin-top: 4.5mm;
}
.comp_09-category-heading {
margin: 0 0 2.5mm 0;
padding: 0 0 2mm 0;
color: #000000 !important;
font-size: 12pt;
break-after: avoid;
}
.comp_09-category-heading::after {
width: 14mm;
height: 0;
background: none !important;
border-top: 1.5pt solid #000000;
}
.comp_09-item {
padding: 1.3mm 0;
break-inside: avoid;
}
.comp_09-item-name,
.comp_09-item-price {
color: #000000 !important;
font-size: 10.5pt;
}
.comp_09-item-dots {
border-bottom-color: rgba(0, 0, 0, 0.5) !important;
}
.comp_09-item-badge {
padding: 0;
background-color: transparent !important;
color: rgba(0, 0, 0, 0.6) !important;
font-size: 7.5pt;
transform: none;
}
.comp_09-item-badge::before {
content: "(";
}
.comp_09-item-badge::after {
content: ")";
}
.comp_09-item-desc {
margin-top: 0.5mm;
max-width: none;
color: rgba(0, 0, 0, 0.72) !important;
font-size: 8.5pt;
line-height: 1.35;
}
.comp_09-item-allergens {
margin-left: 1.5mm;
color: rgba(0, 0, 0, 0.72) !important;
font-size: 8pt;
}
/*
* THE LEGEND ON PAPER. It prints because it lives INSIDE the day panel ( see templates/comp_09.php );
* anything after the panels would be dropped with the inactive days. Kept small and in two columns so
* the sheet stays one page - which is also why the legend only lists the numbers the day actually
* uses rather than all fourteen.
*/
.comp_09-allergens {
margin-top: 5mm;
padding-top: 3mm;
border-top: 0.5pt solid rgba(0, 0, 0, 0.45) !important;
break-inside: avoid;
}
.comp_09-allergens-heading {
margin: 0 0 2mm 0;
color: #000000 !important;
font-size: 9pt;
letter-spacing: 0.06em;
}
.comp_09-allergens-list {
column-gap: 6mm;
}
.comp_09-allergens-item {
gap: 1.5mm;
margin-bottom: 1mm;
color: rgba(0, 0, 0, 0.78) !important;
font-size: 7.5pt;
line-height: 1.3;
}
.comp_09-allergens-num {
min-width: 4mm;
color: #000000 !important;
}
/*
* The staff-price footnote has to survive onto paper. An asterisk beside a price with nothing
* explaining it is worse on a printed sheet than on screen: there is no tab to click and no rest of
* the site to go looking in. Mono like everything else here.
*/
.comp_09-price-note {
margin-top: 3mm;
padding-left: 3mm;
color: rgba(0, 0, 0, 0.78) !important;
font-size: 7.5pt;
line-height: 1.3;
break-inside: avoid;
}
.comp_09-price-note-mark {
color: #000000 !important;
}
}
/*
* COMP_10 - DAILY MENU SIGN-UP ( horizontal photo band )
*
* Markup: templates/comp_10.php
* Behaviour: js/scripts-parts/comp_04.js ( shared AJAX sign-up, .comp_10-form binding ). The
* reveal is WOW.js, initialised inline in header.php.
*
* REDESIGN OF comp_04. Same sign-up, rebuilt horizontal: a full-bleed moody food photo, the
* editorial heading + red rule + lead over a left-anchored scrim on the LEFT, and a solid
* $color-primary form panel floating on the RIGHT. comp_04 is kept as a backup ( its import is
* commented out in style.scss ).
*
* THE PANEL / SCRIM DARK IS $color-primary ( #1d1d1b ), NOT #000000 - the documented brand rule.
* The footer directly below is already a full dark sign-up; a photo band with a CONTAINED dark
* panel reads as a photograph while the panel still melts into the footer's dark family, so the
* panel REUSES the footer's dark form skin ( translucent white outline input, red submit, white-
* tick consent ), re-declared locally under .comp_10-* per the theme's per-component convention.
*
* Objects shared with the rest of the page are re-declared here, not extracted: .comp_10-title is
* the comp_02 / comp_04 display object and .comp_10-rule the shared red mark. There is no section
* module yet and the theme duplicates these deliberately ( see the comp_02 / comp_03 notes ).
*/
.comp_10-wrapper {
position: relative;
display: flex;
align-items: center;
width: 100%;
min-height: 35rem;
padding: 6rem 0;
background-color: #1d1d1b;
overflow: hidden;
box-sizing: border-box;
}
/*
* THE PHOTO - full-bleed, absolutely positioned so the band's height comes from the content
* ( the panel / intro ) and the min-height floor, never from the image. object-fit cover crops it.
*/
.comp_10-photo {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 0;
display: block;
}
.comp_10-photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transform-origin: center;
animation: comp_10-kenburns 22s ease-in-out infinite alternate;
will-change: transform;
}
/*
* KEN BURNS - a slow, ambient zoom-and-drift on the background photo so the band feels alive without
* motion loud enough to fight the form. The photo is object-fit: cover, which leaves ZERO overflow to
* pan into at scale 1 - any drift there would expose an edge of the band's dark fallback ground. So
* every keyframe stays scaled up ( 1.10 -> 1.26 ): at the smaller end the image already overhangs the
* box by ~5% each side, more than the drift ever travels there ( it starts at 0 and only grows as the
* zoom - and so the overhang - grows with it ), so no edge is ever revealed.
* `alternate` + the long ease-in-out makes the reverse leg read as one continuous breathing motion.
* Disabled under prefers-reduced-motion below.
*/
@keyframes comp_10-kenburns {
from {
transform: scale(1.1) translate(0, 0);
}
to {
transform: scale(1.26) translate(-3.5%, -2%);
}
}
/*
* THE SCRIM - left-anchored gradient that lands the white heading legibly over the photo and
* clears toward the panel side. The photo is art-directed dark, so it can stay this light.
*/
.comp_10-scrim {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1;
background: linear-gradient(90deg, rgba(29, 29, 27, 0.82) 0%, rgba(29, 29, 27, 0.55) 40%, rgba(29, 29, 27, 0.25) 68%, rgba(29, 29, 27, 0.12) 100%);
pointer-events: none;
}
.comp_10-inner {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
gap: 4rem;
width: 100%;
max-width: 80rem;
margin: 0 auto;
padding: 0 3rem;
box-sizing: border-box;
}
/*
* LEFT - editorial intro over the photo.
*/
.comp_10-intro {
flex: 1 1 auto;
min-width: 0;
max-width: 35rem;
}
.comp_10-title {
margin: 0 0 1.5rem 0;
color: #ffffff;
font-size: 2.875rem;
font-weight: 200;
line-height: 1.1;
text-transform: uppercase;
letter-spacing: 0.005em;
text-wrap: balance;
}
.comp_10-rule {
display: block;
width: 4.5rem;
height: 0.25rem;
margin: 0 0 1.875rem 0;
background-color: #be1622;
}
.comp_10-lead {
max-width: 31.25rem;
margin: 0;
color: rgba(255, 255, 255, 0.9);
font-size: 1.125rem;
font-weight: 400;
line-height: 1.7;
text-wrap: pretty;
}
/*
* RIGHT - the dark form panel. Solid $color-primary; a soft shadow lifts it off the photo so it
* never dissolves into the scrim.
*/
.comp_10-panel {
flex: 0 0 27.5rem;
padding: 2.75rem 3rem;
background-color: #1d1d1b;
box-shadow: 0 1.875rem 3.75rem rgba(0, 0, 0, 0.35);
box-sizing: border-box;
}
.comp_10-panel-heading {
margin: 0 0 1.375rem 0;
color: #ffffff;
font-size: 1rem;
font-weight: 700;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 0.08em;
}
/*
* THE FORM - stacked in the narrow panel: e-mail field, then consent, then the submit, then the
* reassurance line.
*/
.comp_10-form {
display: flex;
flex-direction: column;
width: 100%;
}
/*
* THE E-MAIL FIELD - the footer's dark outline treatment. Scoped .comp_10-form .comp_10-input
* ( 0,2,0 ) so it beats _inputs' `input[type="email"]` ( 0,1,1 ): transparent ground, translucent
* white edge ( same weight as the consent box ), white text, SQUARE corners. margin-bottom carries
* !important only because _inputs' does ( the consent's margin-top owns the spacing under it ).
*/
.comp_10-form .comp_10-input {
width: 100%;
min-height: 3.5rem;
margin: 0 !important;
padding: 0 1.125rem;
background-color: transparent;
color: #ffffff;
font-size: 1rem;
line-height: 1.2;
border: 1px solid rgba(255, 255, 255, 0.45);
border-radius: 0;
box-shadow: none;
transition: border-color 0.2s ease;
box-sizing: border-box;
}
.comp_10-form .comp_10-input:focus, .comp_10-form .comp_10-input:focus-visible {
outline: none;
border-color: #ffffff;
}
.comp_10-form .comp_10-input::placeholder {
color: rgba(255, 255, 255, 0.7);
opacity: 1;
}
/*
* ERROR - comp_04.js adds .error to an empty / invalid field. Scoped to .required.error ( 0,4,0 )
* so it beats _inputs' `input[type="email"].required.error` ( 0,3,1 ) and drops its off-brand
* #FF4949 border + red inset shadow for a clean accent-red edge.
*/
.comp_10-form .comp_10-input.required.error {
border: 1px solid #be1622;
box-shadow: none;
}
/*
* CONSENT - required, on its own row under the field. Left-aligned so the sentence reads as prose.
* The