@font-face {
font-family: "Canela";
src: url(//lasuitetrocadero.com/wp-content/plugins/lst-front-page-redesign/assets/fonts/canelaweb-regular.woff2) format("woff2");
font-display: swap;
font-style: normal;
font-weight: 400;
}
@font-face {
font-family: "LST Sans";
src: url(//lasuitetrocadero.com/wp-content/plugins/lst-front-page-redesign/assets/fonts/Roboto-Regular-webfont.woff) format("woff");
font-display: swap;
font-style: normal;
font-weight: 400;
}
@font-face {
font-family: "LST Sans";
src: url(//lasuitetrocadero.com/wp-content/plugins/lst-front-page-redesign/assets/fonts/Roboto-Medium-webfont.woff) format("woff");
font-display: swap;
font-style: normal;
font-weight: 600;
}
:root {
color-scheme: dark;
--lst-bg-0: #050505;
--lst-bg-1: #080808;
--lst-bg-2: #0c0c0c;
--lst-bg-3: #111111;
--lst-bg-elevated: #141414;
--lst-text: #f1ece4;
--lst-text-soft: #c9c1b7;
--lst-text-muted: #9d978f;
--lst-border: rgba(255, 255, 255, 0.12);
--lst-border-strong: rgba(255, 255, 255, 0.18);
--lst-highlight: rgba(255, 255, 255, 0.09);
--lst-champagne: #c4a779;
--lst-champagne-light: #dec99f;
--lst-burgundy: #6d1d2b;
--lst-royal-bronze: #aa8758;
--lst-slate-blue: #536a78;
--lst-sage: #829389;
--lst-accent: var(--lst-champagne);
--lst-accent-soft: var(--lst-champagne);
--lst-radius-button: 0;
--lst-radius-card: 20px;
--lst-radius-image: 18px;
--lst-shadow: 0 22px 54px rgba(0, 0, 0, 0.34);
--lst-font-serif: "Canela", Georgia, serif;
--lst-font-sans: "LST Sans", Arial, sans-serif;
--lst-shell: min(1280px, calc(100% - 80px));
--lst-header-height: 88px;
}
[data-apartment-theme="la-suite"],
.lst-theme-nocturne,
.is-nocturne {
--lst-accent: #7f2637;
--lst-accent-soft: #c4a779;
}
[data-apartment-theme="arche-royale"],
.lst-theme-luminous,
.is-luminous {
--lst-accent: #8f6e45;
--lst-accent-soft: #b89a70;
}
[data-apartment-theme="au-coeur-de-trocadero"],
.lst-theme-terrace,
.is-terrace {
--lst-accent: #536a78;
--lst-accent-soft: #829389;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
min-width: 320px;
background: var(--lst-bg-0);
color-scheme: dark;
scroll-behavior: smooth;
}
body {
min-width: 320px;
margin: 0;
overflow-x: clip;
background: var(--lst-bg-0);
color: var(--lst-text);
font-family: var(--lst-font-sans);
font-size: 16px;
line-height: 1.65;
text-rendering: optimizeLegibility;
}
body.lst-nav-open,
body.lst-lightbox-open {
overflow: hidden;
}
main,
header,
footer,
section,
nav,
article,
aside {
display: block;
}
main,
.lst-collection-main {
min-height: 60vh;
background: var(--lst-bg-0);
}
section {
position: relative;
}
img,
svg {
display: block;
max-width: 100%;
}
img {
height: auto;
}
a {
color: inherit;
}
button,
a {
-webkit-tap-highlight-color: transparent;
}
button {
color: inherit;
font: inherit;
}
h1,
h2,
h3,
p {
margin-top: 0;
}
h1,
h2,
h3 {
color: var(--lst-text);
font-family: var(--lst-font-serif);
font-weight: 400;
letter-spacing: 0;
line-height: 1.03;
text-wrap: balance;
}
h1 {
margin-bottom: 28px;
font-size: 72px;
}
h2 {
margin-bottom: 24px;
font-size: 50px;
}
h3 {
margin-bottom: 14px;
font-size: 29px;
}
p {
color: var(--lst-text-soft);
}
small {
color: var(--lst-text-muted);
font-size: 12px;
line-height: 1.45;
}
strong {
font-weight: 600;
}
.screen-reader-text {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.lst-shell-container {
width: var(--lst-shell);
margin-inline: auto;
}
.lst-picture {
display: block;
width: 100%;
height: 100%;
overflow: hidden;
background: var(--lst-bg-2);
}
.lst-picture img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: var(--lst-object-position, 50% 50%);
}
.lst-eyebrow,
.lst-kicker {
margin-bottom: 18px;
color: var(--lst-accent-soft);
font-size: 12px;
font-weight: 600;
letter-spacing: 0;
line-height: 1.4;
text-transform: uppercase;
}
.lst-section-heading {
max-width: 720px;
margin-bottom: 56px;
}
.lst-breadcrumb {
display: flex;
flex-wrap: wrap;
gap: 9px;
align-items: center;
margin-bottom: 34px;
color: var(--lst-text-muted);
font-size: 13px;
}
.lst-breadcrumb a {
text-decoration: none;
}
.lst-breadcrumb a:hover {
color: var(--lst-text);
}
.lst-breadcrumb--light {
color: var(--lst-text-soft);
}
.lst-button {
position: relative;
display: inline-flex;
min-height: 52px;
align-items: center;
justify-content: center;
gap: 14px;
padding: 14px 24px;
border: 1px solid transparent;
border-radius: var(--lst-radius-button);
background: transparent;
box-shadow: none;
color: var(--lst-text);
font-family: var(--lst-font-sans);
font-size: 13px;
font-weight: 500;
letter-spacing: 0;
line-height: 1.2;
text-align: center;
text-decoration: none;
transition:
color 220ms cubic-bezier(0.22, 1, 0.36, 1),
background-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
border-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.lst-button svg,
.lst-text-link svg {
width: 19px;
height: 19px;
fill: none;
stroke: currentColor;
stroke-width: 1.5;
transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.lst-button--primary {
border-color: var(--lst-champagne);
background: var(--lst-champagne);
color: var(--lst-bg-0);
}
.lst-button--secondary {
border-color: var(--lst-text-soft);
background: transparent;
color: var(--lst-text);
}
.lst-button:hover {
transform: translateY(-2px);
}
.lst-button--primary:hover {
border-color: var(--lst-champagne-light);
background: var(--lst-champagne-light);
box-shadow: 0 12px 34px rgba(196, 167, 121, 0.23);
color: var(--lst-bg-0);
}
.lst-button--secondary:hover {
border-color: var(--lst-text);
background: var(--lst-text);
color: var(--lst-bg-0);
}
.lst-button--primary:hover svg,
.lst-button--secondary:hover svg,
.lst-text-link:hover svg {
transform: translateX(4px);
}
.lst-button:active {
transform: translateY(0);
}
.lst-button:focus-visible,
.lst-text-link:focus-visible,
button:focus-visible,
a:focus-visible {
outline: 2px solid var(--lst-champagne);
outline-offset: 3px;
}
.lst-text-link {
display: inline-flex;
min-height: 44px;
align-items: center;
border-bottom: 1px solid var(--lst-border-strong);
color: var(--lst-text);
font-size: 15px;
font-weight: 600;
text-decoration: none;
transition: border-color 180ms ease, color 180ms ease;
}
.lst-text-link:hover {
border-color: var(--lst-accent-soft);
color: var(--lst-accent-soft);
}
.lst-glass {
background: var(--lst-bg-2);
border: 1px solid var(--lst-border);
box-shadow: var(--lst-shadow);
}
.lst-fact-line {
display: flex;
flex-wrap: wrap;
gap: 0;
padding: 0;
margin: 0;
list-style: none;
}
.lst-fact-line li {
color: var(--lst-text-soft);
font-size: 14px;
}
.lst-fact-line li + li::before {
content: "·";
margin: 0 12px;
color: var(--lst-text-muted);
}
.lst-provider-note {
display: block;
margin-top: 13px;
}
.lst-classification-note {
padding-left: 14px;
border-left: 1px solid var(--lst-champagne);
color: var(--lst-text-soft);
font-size: 13px;
}
.lst-apartment-card-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.lst-apartment-card {
min-width: 0;
overflow: hidden;
border: 1px solid var(--lst-border);
border-radius: var(--lst-radius-card);
background: var(--lst-bg-2);
}
.lst-apartment-card__media {
display: block;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--lst-bg-3);
}
.lst-apartment-card__media img {
transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
}
.lst-apartment-card:hover .lst-apartment-card__media img {
transform: scale(1.025);
}
.lst-apartment-card__body {
padding: 28px;
}
.lst-apartment-card__index,
.lst-booking-choice-card__number,
.lst-services-apartment__number,
.lst-home-apartment__number {
color: var(--lst-accent-soft);
font-size: 12px;
font-weight: 600;
}
.lst-apartment-card__body h3 {
margin-bottom: 12px;
}
.lst-apartment-card__body > p {
min-height: 3.2em;
margin-bottom: 18px;
}
.lst-apartment-card__actions,
.lst-home-apartment__actions,
.lst-services-apartment__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
.lst-quick-compare {
border-top: 1px solid var(--lst-border);
}
.lst-quick-compare__row {
display: grid;
grid-template-columns: 1.4fr 1fr auto;
gap: 24px;
align-items: center;
min-height: 92px;
border-bottom: 1px solid var(--lst-border);
}
.lst-quick-compare__row h3 {
margin: 0;
font-size: 28px;
}
.lst-quick-compare__facts {
margin: 0;
color: var(--lst-text-soft);
}
.lst-reveal,
.lst-image-reveal {
opacity: 1;
transform: none;
}
.js .lst-reveal,
.js .lst-image-reveal {
opacity: 0;
transform: translateY(18px);
transition:
opacity 620ms cubic-bezier(0.22, 1, 0.36, 1),
transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}
.js .lst-image-reveal {
transform: translateY(10px);
}
.js .lst-reveal.is-visible,
.js .lst-image-reveal.is-visible {
opacity: 1;
transform: none;
}
@media (max-width: 1080px) {
:root {
--lst-shell: min(100% - 48px, 960px);
}
h1 {
font-size: 58px;
}
h2 {
font-size: 42px;
}
.lst-apartment-card-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 700px) {
:root {
--lst-shell: calc(100% - 32px);
--lst-header-height: 72px;
}
body {
font-size: 15px;
}
h1 {
margin-bottom: 22px;
font-size: 40px;
}
h2 {
font-size: 34px;
}
h3 {
font-size: 26px;
}
.lst-section-heading {
margin-bottom: 38px;
}
.lst-apartment-card-grid {
grid-template-columns: 1fr;
}
.lst-apartment-card__body {
padding: 24px 20px;
}
.lst-quick-compare__row {
grid-template-columns: 1fr;
gap: 6px;
padding: 24px 0;
}
.lst-quick-compare__row h3 {
font-size: 26px;
}
.lst-quick-compare__row .lst-text-link {
width: fit-content;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.js .lst-reveal,
.js .lst-image-reveal {
opacity: 1 !important;
transform: none !important;
}
}.lst-skip-link {
position: fixed;
z-index: 10000;
top: 12px;
left: 12px;
min-height: 44px;
padding: 11px 16px;
border: 1px solid var(--lst-champagne);
border-radius: 10px;
background: var(--lst-bg-elevated);
color: var(--lst-text);
text-decoration: none;
transform: translateY(-150%);
}
.lst-skip-link:focus {
transform: none;
}
.lst-site-header {
position: fixed;
z-index: 1000;
top: 0;
right: 0;
left: 0;
height: var(--lst-header-height);
border-width: 0 0 1px;
border-radius: 0;
background: var(--lst-bg-0);
box-shadow: none;
transition: height 220ms ease, background-color 220ms ease;
}
.lst-site-header.is-scrolled,
.lst-site-header.is-menu-open {
height: 76px;
background: var(--lst-bg-0);
}
.lst-site-header__inner {
display: grid;
grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
gap: 30px;
align-items: center;
height: 100%;
}
.lst-site-header__brand {
display: inline-grid;
grid-template-columns: 112px auto;
gap: 12px;
align-items: center;
width: fit-content;
text-decoration: none;
}
.lst-site-header__brand img {
width: 112px;
height: 54px;
object-fit: contain;
}
.lst-site-header__brand span {
color: var(--lst-text-muted);
font-size: 11px;
line-height: 1.2;
}
.lst-site-nav__top {
display: flex;
gap: 30px;
align-items: center;
}
.lst-site-nav__top > a,
.lst-apartment-menu > button {
position: relative;
display: inline-flex;
min-height: 44px;
align-items: center;
padding: 0;
border: 0;
background: transparent;
color: var(--lst-text-soft);
font-size: 14px;
text-decoration: none;
cursor: pointer;
}
.lst-site-nav__top > a::after,
.lst-apartment-menu > button::after {
position: absolute;
right: 0;
bottom: 5px;
left: 0;
height: 1px;
background: var(--lst-champagne);
content: "";
transform: scaleX(0);
transform-origin: left;
transition: transform 180ms ease;
}
.lst-site-nav__top > a:hover,
.lst-site-nav__top > a.is-active,
.lst-apartment-menu > button:hover,
.lst-apartment-menu > button.is-active {
color: var(--lst-text);
}
.lst-site-nav__top > a:hover::after,
.lst-site-nav__top > a.is-active::after,
.lst-apartment-menu > button:hover::after,
.lst-apartment-menu > button.is-active::after {
transform: scaleX(1);
}
.lst-apartment-menu {
position: relative;
}
.lst-apartment-menu > button {
gap: 7px;
}
.lst-apartment-menu > button svg {
width: 10px;
fill: none;
stroke: currentColor;
stroke-width: 1.5;
}
.lst-apartment-menu__panel {
position: absolute;
top: calc(100% + 14px);
left: 50%;
width: min(720px, calc(100vw - 48px));
padding: 18px;
border-radius: 18px;
transform: translateX(-50%);
}
.lst-apartment-menu__panel[hidden] {
display: none;
}
.lst-apartment-menu__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.lst-apartment-menu__item {
display: grid;
grid-template-columns: 70px minmax(0, 1fr);
gap: 13px;
align-items: center;
min-height: 86px;
padding: 8px;
border: 1px solid transparent;
border-radius: 12px;
text-decoration: none;
transition: background-color 180ms ease, border-color 180ms ease;
}
.lst-apartment-menu__item:hover,
.lst-apartment-menu__item:focus-visible {
border-color: var(--lst-border);
background: var(--lst-highlight);
}
.lst-apartment-menu__image {
width: 70px;
aspect-ratio: 1;
overflow: hidden;
border-radius: 9px;
}
.lst-apartment-menu__copy {
min-width: 0;
}
.lst-apartment-menu__copy strong,
.lst-apartment-menu__copy small {
display: block;
}
.lst-apartment-menu__copy strong {
margin-bottom: 5px;
font-family: var(--lst-font-serif);
font-size: 17px;
font-weight: 400;
}
.lst-apartment-menu__all {
display: inline-flex;
min-height: 44px;
align-items: center;
margin: 10px 8px 0;
color: var(--lst-text-soft);
font-size: 13px;
text-decoration: none;
}
.lst-apartment-menu__all:hover {
color: var(--lst-text);
}
.lst-site-header__actions {
display: flex;
gap: 13px;
align-items: center;
justify-content: flex-end;
}
.lst-language-switch {
display: inline-flex;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
color: var(--lst-text-soft);
font-size: 12px;
text-decoration: none;
}
.lst-button--header {
min-height: 46px;
padding-inline: 20px;
}
.lst-site-header__toggle,
.lst-site-nav__mobile-apartments,
.lst-site-nav__mobile-booking {
display: none;
}
.lst-reading-progress {
position: fixed;
z-index: 1002;
top: 0;
right: 0;
left: 0;
height: 2px;
pointer-events: none;
}
.lst-reading-progress span {
display: block;
width: var(--lst-reading-progress, 0);
height: 100%;
background: var(--lst-champagne);
}
.lst-collection-footer {
padding: 72px 0 24px;
border-top: 1px solid var(--lst-border);
background: var(--lst-bg-0);
}
.lst-collection-footer__top {
display: grid;
grid-template-columns: 1.2fr 0.7fr 1fr;
gap: 72px;
align-items: start;
}
.lst-collection-footer__brand img {
width: 150px;
height: auto;
margin-bottom: 22px;
}
.lst-collection-footer__brand p {
max-width: 330px;
}
.lst-collection-footer__nav,
.lst-collection-footer__contact {
display: grid;
gap: 10px;
}
.lst-collection-footer__nav a,
.lst-collection-footer__contact a {
width: fit-content;
color: var(--lst-text-soft);
text-decoration: none;
}
.lst-collection-footer__nav a:hover,
.lst-collection-footer__contact a:hover {
color: var(--lst-text);
}
.lst-collection-footer__contact p {
margin-bottom: 5px;
}
.lst-collection-footer__bottom {
display: flex;
justify-content: space-between;
gap: 30px;
align-items: center;
padding-top: 28px;
margin-top: 54px;
border-top: 1px solid var(--lst-border);
color: var(--lst-text-muted);
font-size: 12px;
}
.lst-collection-footer__bottom p {
margin: 0;
}
.lst-collection-footer__bottom nav {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.lst-collection-footer__bottom a {
color: var(--lst-text-muted);
text-decoration: none;
}
@media (max-width: 960px) {
.lst-site-header.is-menu-open {
height: 100svh;
background: var(--lst-bg-0);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.lst-site-header__inner {
position: relative;
grid-template-columns: minmax(0, 1fr) auto;
gap: 18px;
align-content: start;
padding-top: 9px;
}
.lst-site-header__brand {
position: relative;
z-index: 2;
grid-template-columns: 104px auto;
}
.lst-site-header__actions {
position: relative;
z-index: 2;
}
.lst-site-header__brand img {
width: 104px;
}
.lst-site-header__toggle {
display: inline-flex;
width: 46px;
height: 46px;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid var(--lst-border);
border-radius: 12px;
background: var(--lst-bg-2);
cursor: pointer;
}
.lst-site-header__toggle svg {
width: 21px;
fill: none;
stroke: currentColor;
stroke-width: 1.5;
}
.lst-site-header__toggle .is-close {
display: none;
}
.lst-site-header__toggle[aria-expanded="true"] .is-menu {
display: none;
}
.lst-site-header__toggle[aria-expanded="true"] .is-close {
display: block;
}
.lst-site-nav {
position: absolute;
z-index: 1;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
overflow-y: auto;
padding: 108px 24px 34px;
background: rgba(5, 5, 5, 0.98);
}
.lst-site-nav.is-open {
display: block;
}
.lst-site-nav__top {
display: grid;
gap: 0;
}
.lst-site-nav__top > a {
min-height: 58px;
border-bottom: 1px solid var(--lst-border);
font-family: var(--lst-font-serif);
font-size: 28px;
}
.lst-apartment-menu {
display: none;
}
.lst-site-nav__mobile-apartments {
display: grid;
gap: 0;
margin-top: 34px;
}
.lst-site-nav__mobile-apartments > p {
margin-bottom: 10px;
color: var(--lst-text-muted);
font-size: 12px;
text-transform: uppercase;
}
.lst-site-nav__mobile-apartments > a {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
min-height: 64px;
border-bottom: 1px solid var(--lst-border);
text-decoration: none;
}
.lst-site-nav__mobile-apartments strong {
font-family: var(--lst-font-serif);
font-size: 22px;
font-weight: 400;
}
.lst-site-nav__mobile-booking {
display: flex;
width: 100%;
margin-top: 28px;
}
.lst-collection-footer__top {
grid-template-columns: 1fr 1fr;
gap: 48px;
}
.lst-collection-footer__brand {
grid-column: 1 / -1;
}
}
@media (max-width: 700px) {
.lst-site-header.is-scrolled {
height: var(--lst-header-height);
}
.lst-site-header__brand {
grid-template-columns: 98px;
}
.lst-site-header__brand img {
width: 98px;
height: 48px;
}
.lst-site-header__brand span {
display: none;
}
.lst-language-switch {
width: 40px;
}
.lst-button--header {
min-height: 44px;
padding-inline: 13px;
font-size: 13px;
}
.lst-site-nav {
padding: 94px 16px calc(28px + env(safe-area-inset-bottom));
}
.lst-collection-footer {
padding-top: 54px;
}
.lst-collection-footer__top {
grid-template-columns: 1fr;
gap: 34px;
}
.lst-collection-footer__brand {
grid-column: auto;
}
.lst-collection-footer__bottom {
align-items: flex-start;
flex-direction: column;
margin-top: 38px;
}
}.lst-contact-page,
.lst-legal-page {
background: var(--lst-bg-0);
}
.lst-contact-hero,
.lst-legal-hero {
padding: calc(var(--lst-header-height) + 72px) 0 100px;
background: var(--lst-bg-0);
}
.lst-contact-hero__grid,
.lst-legal-hero__grid {
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
gap: 82px;
align-items: center;
}
.lst-contact-hero__copy,
.lst-legal-hero__copy {
max-width: 630px;
}
.lst-contact-hero__copy > p:last-of-type,
.lst-legal-hero__copy > p:last-child {
max-width: 580px;
font-size: 18px;
}
.lst-contact-hero__media,
.lst-legal-hero__media {
height: 590px;
}
.lst-contact-hero__picture,
.lst-legal-hero__picture {
border-radius: var(--lst-radius-image);
}
.lst-contact-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 32px;
}
.lst-contact-direct {
padding: 110px 0;
border-top: 1px solid var(--lst-border);
background: var(--lst-bg-1);
}
.lst-contact-direct__grid {
display: grid;
grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr);
gap: 90px;
}
.lst-contact-direct__details {
border-top: 1px solid var(--lst-border);
}
.lst-contact-line {
display: grid;
grid-template-columns: 120px minmax(0, 1fr);
gap: 24px;
align-items: center;
min-height: 76px;
border-bottom: 1px solid var(--lst-border);
color: var(--lst-text);
text-decoration: none;
}
.lst-contact-line span {
color: var(--lst-text-muted);
font-size: 12px;
}
.lst-contact-line strong {
overflow-wrap: anywhere;
font-size: 17px;
}
a.lst-contact-line:hover strong {
color: var(--lst-accent-soft);
}
.lst-contact-form-section {
padding: 110px 0 120px;
border-top: 1px solid var(--lst-border);
background: var(--lst-bg-0);
}
.lst-contact-form-section__grid {
display: grid;
grid-template-columns: minmax(260px, 0.68fr) minmax(0, 1.32fr);
gap: 90px;
align-items: start;
}
.lst-contact-form-section__intro {
position: sticky;
top: calc(var(--lst-header-height) + 40px);
}
.lst-contact-form-section__intro p:last-child {
max-width: 420px;
}
.lst-contact-form-wrap {
padding: 42px;
border: 1px solid var(--lst-border);
background: var(--lst-bg-2);
box-shadow: var(--lst-shadow);
}
.lst-contact-form {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px 20px;
}
.lst-field {
display: grid;
min-width: 0;
gap: 8px;
}
.lst-field--full {
grid-column: 1 / -1;
}
.lst-field > span,
.lst-consent > span {
color: var(--lst-text-soft);
font-size: 11px;
font-weight: 500;
}
.lst-field input,
.lst-field select,
.lst-field textarea {
width: 100%;
min-height: 52px;
padding: 13px 14px;
border: 1px solid var(--lst-border-strong);
border-radius: 0;
background: var(--lst-bg-0);
color: var(--lst-text);
font: inherit;
transition:
border-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.lst-field textarea {
min-height: 150px;
resize: vertical;
}
.lst-field select {
color-scheme: dark;
}
.lst-field option {
background: var(--lst-bg-0);
color: var(--lst-text);
}
.lst-field input:hover,
.lst-field select:hover,
.lst-field textarea:hover {
border-color: rgba(255, 255, 255, 0.3);
}
.lst-field input:focus,
.lst-field select:focus,
.lst-field textarea:focus {
border-color: var(--lst-champagne);
box-shadow: 0 0 0 3px rgba(196, 167, 121, 0.16);
outline: 0;
}
.lst-field [aria-invalid="true"] {
border-color: #c85a6e;
}
.lst-consent {
display: grid;
grid-template-columns: 20px minmax(0, 1fr);
gap: 11px;
align-items: start;
}
.lst-consent input {
width: 18px;
height: 18px;
margin: 2px 0 0;
accent-color: var(--lst-champagne);
}
.lst-consent > span {
line-height: 1.5;
}
.lst-contact-form .lst-button {
width: 100%;
}
.lst-form-trap {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
.lst-form-status {
padding: 18px 20px;
margin-bottom: 26px;
border: 1px solid;
border-left-width: 3px;
background: var(--lst-bg-0);
font-size: 13px;
}
.lst-form-status p,
.lst-form-status ul {
margin: 7px 0 0;
}
.lst-form-status.is-success {
border-color: #557763;
color: #b9d1c1;
}
.lst-form-status.is-error {
border-color: #9a4051;
color: #e2aeb8;
}
.lst-contact-booking,
.lst-page-final {
padding: 110px 0 130px;
background: var(--lst-bg-0);
}
.lst-contact-booking__inner,
.lst-page-final .lst-shell-container {
display: flex;
gap: 50px;
align-items: center;
justify-content: space-between;
}
.lst-contact-booking__inner h2,
.lst-page-final h2 {
max-width: 720px;
margin-bottom: 0;
}
.lst-legal-content {
padding: 110px 0;
border-top: 1px solid var(--lst-border);
background: var(--lst-bg-1);
}
.lst-legal-content__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
border-top: 1px solid var(--lst-border);
}
.lst-legal-content__grid article {
min-height: 260px;
padding: 36px 38px 40px 0;
border-right: 1px solid var(--lst-border);
border-bottom: 1px solid var(--lst-border);
}
.lst-legal-content__grid article:nth-child(even) {
padding-right: 0;
padding-left: 38px;
border-right: 0;
}
.lst-legal-content__grid article > span {
display: block;
margin-bottom: 28px;
color: var(--lst-accent-soft);
font-size: 12px;
}
.lst-legal-content__grid h2 {
font-size: 32px;
}
.lst-page-final {
border-top: 1px solid var(--lst-border);
}
@media (max-width: 900px) {
.lst-contact-hero__grid,
.lst-legal-hero__grid {
grid-template-columns: 1fr;
gap: 52px;
}
.lst-contact-form-section__grid {
grid-template-columns: 1fr;
gap: 48px;
}
.lst-contact-form-section__intro {
position: static;
}
.lst-contact-hero__copy,
.lst-legal-hero__copy {
max-width: 760px;
}
.lst-contact-hero__media,
.lst-legal-hero__media {
height: 520px;
}
}
@media (max-width: 700px) {
.lst-contact-hero,
.lst-legal-hero {
padding: calc(var(--lst-header-height) + 48px) 0 72px;
}
.lst-contact-hero__copy > p:last-of-type,
.lst-legal-hero__copy > p:last-child {
font-size: 16px;
}
.lst-contact-hero__media,
.lst-legal-hero__media {
height: 390px;
}
.lst-contact-actions {
display: grid;
grid-template-columns: 1fr;
}
.lst-contact-direct,
.lst-contact-form-section,
.lst-legal-content,
.lst-contact-booking,
.lst-page-final {
padding: 78px 0;
}
.lst-contact-direct__grid {
grid-template-columns: 1fr;
gap: 38px;
}
.lst-contact-form-section__grid {
grid-template-columns: 1fr;
gap: 42px;
}
.lst-contact-form-section__intro {
position: static;
}
.lst-contact-line {
grid-template-columns: 1fr;
gap: 4px;
min-height: 82px;
align-content: center;
}
.lst-contact-booking__inner,
.lst-page-final .lst-shell-container {
align-items: flex-start;
flex-direction: column;
}
.lst-contact-booking__inner .lst-button,
.lst-page-final .lst-button {
width: 100%;
}
.lst-contact-form-wrap {
padding: 28px 22px;
}
.lst-contact-form {
grid-template-columns: 1fr;
}
.lst-field--full {
grid-column: auto;
}
.lst-legal-content__grid {
grid-template-columns: 1fr;
}
.lst-legal-content__grid article,
.lst-legal-content__grid article:nth-child(even) {
min-height: 0;
padding: 30px 0;
border-right: 0;
}
}