, and ".lm-intro p" / ".lm-twocol p" overrode them; "body p.lm-…" outranks those. */ body p.lm-statement { font-family: var(--wp--preset--font-family--serif); font-style: italic; font-size: clamp(1.75rem, 3vw, 2.625rem); line-height: 1.22; color: var(--wp--preset--color--navy); letter-spacing: 0; } body p.lm-eyebrow, body p.lm-label, body .lm-index__enter { font-family: var(--wp--preset--font-family--sans); font-size: 11px; font-weight: 700; letter-spacing: 4px; line-height: 1.6; text-transform: uppercase; } body p.lm-eyebrow { color: var(--wp--preset--color--copper); margin: 0 0 1rem; } body .lm-section--navy p.lm-statement { color: var(--wp--preset--color--ivory); } body .lm-section--navy p.lm-eyebrow { color: var(--wp--preset--color--blush); } body .lm-first p.lm-statement { font-size: clamp(1.4rem, 2.6vw, 2rem); color: var(--wp--preset--color--ivory); } body .lm-closing p.lm-statement { font-size: clamp(1.3rem, 2.2vw, 1.7rem); } body .lm-contactband p.lm-statement { font-size: clamp(1.5rem, 2.6vw, 2.1rem); color: var(--wp--preset--color--ivory); } body .lm-first__worlds p.lm-label--muted { font-weight: 400; color: var(--wp--preset--color--slate); } body .lm-contactband p.lm-label { color: var(--wp--preset--color--copper); } .lm-founder__role, .lm-founder .lm-label { font-weight: 700; } /* 2. First screen: navigation inside the blush frame (design page 01), logo ≈ 330 px */ body:has(.lm-first) .lm-header { position: absolute; top: 0; left: 0; right: 0; background: transparent; padding: calc(clamp(.9rem, 2vw, 1.6rem) + 1.1rem) calc(clamp(.9rem, 2vw, 1.6rem) + clamp(1rem, 2.5vw, 2rem)) 1rem; } body:has(.lm-first) .lm-first { min-height: 100vh; min-height: 100svh; } .lm-first__logo { width: clamp(230px, 30vw, 330px); } /* 3. Four worlds: descriptors in the darker blue-grey from the design */ .lm-index__desc { color: #3A4A60; } /* 4. Closing screen: contact band + footer as one navy screen inside the blush frame (design page 06); phone and email once */ :root { --lm-frame: clamp(.9rem, 2vw, 1.6rem); } .lm-section:has(.lm-contactband), .wp-site-blocks:has(.lm-contactband) .lm-footer { position: relative; } .lm-section:has(.lm-contactband)::before, .wp-site-blocks:has(.lm-contactband) .lm-footer::before { content: ""; position: absolute; left: var(--lm-frame); right: var(--lm-frame); border: 1px solid var(--wp--preset--color--blush); opacity: .7; pointer-events: none; } .lm-section:has(.lm-contactband)::before { top: var(--lm-frame); bottom: 0; border-bottom: 0; } .wp-site-blocks:has(.lm-contactband) .lm-footer::before { top: 0; bottom: var(--lm-frame); border-top: 0; } .lm-section:has(.lm-contactband) { padding-top: calc(var(--lm-section-y) + var(--lm-frame)); } .wp-site-blocks:has(.lm-contactband) .lm-footer { padding-bottom: calc(2.5rem + var(--lm-frame)); } .wp-site-blocks:has(.lm-contactband) > footer, .wp-site-blocks:has(.lm-contactband) > .wp-block-template-part:last-child { margin-block-start: 0; } /* Founders: room for two portraits in matching frames (image block at the top of each founder column); text only until the photos arrive */ .lm-founder img { box-sizing: border-box; border: 1px solid var(--lm-hairline); padding: 10px; background: var(--wp--preset--color--white); } /* v1.0.22: as in the design, the four-worlds line on the first screen and "Enter" stay regular weight; closing screen order = newsletter, address, links (design page 06) */ body .lm-first__worlds p.lm-label, body .lm-index__enter { font-weight: 400; } /* frame seam: the full-width section is 100vw wide (incl. scrollbar), so the footer gets the same width and offset, otherwise the two frame halves miss by ~8 px */ .wp-site-blocks:has(.lm-contactband) .lm-footer { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: 0; box-sizing: border-box; } /* phone (design page 07): menu button at the right edge, language switch next to it */ @media (max-width: 782px) { .lm-header__right { order: 2; justify-self: end; margin-left: auto; } .lm-nav { order: 3; justify-content: flex-end; } } @media (max-width: 782px) { body .lm-header .lm-header__right { margin-left: auto; } /* phone: phone number and email on two lines without the dot (design page 07) */ body .lm-contactband .lm-contactline { font-size: 0; } body .lm-contactband .lm-contactline a { display: block; font-size: 1.15rem; line-height: 1.9; } } /* subpage covers (About, Contact, Newsletter) follow the first screen: navigation inside the blush frame, same frame strength */ body:has(.lm-cover) .lm-header { position: absolute; top: 0; left: 0; right: 0; background: transparent; padding: calc(clamp(.9rem, 2vw, 1.6rem) + 1.1rem) calc(clamp(.9rem, 2vw, 1.6rem) + clamp(1rem, 2.5vw, 2rem)) 1rem; } body:has(.lm-cover) .lm-cover { padding-top: calc(clamp(5rem, 12vw, 9rem) + 3.5rem); } .lm-cover::before { opacity: .7; } /* About/Contact texts PDF (15.10.) sets the cover headline in italic, like every statement in the landing design */ .lm-cover h1 { font-style: italic; } /* v1.0.30: logged-in users get the WordPress admin bar (html margin-top 32/46 px); the absolute header must move with the page, otherwise the frame line runs through the menu */ body:has(.lm-first), body:has(.lm-cover) { position: relative; } /* inside the frame the menu spans the frame width on wide screens (design page 01: logo at the left frame edge, EN · DE at the right) */ body:has(.lm-first) .lm-header__inner, body:has(.lm-cover) .lm-header__inner { max-width: none; } /* v1.0.32 (17.10.2026): Quynh's final points before go-live (message 17.10. + "Website Design Corrections" PDF pages 1–4) */ /* Point 1: real wordmark top left (EB Garamond 22 px white, J in blush, tagline italic 11.5 px blush, pagoda 34 px blush from the SVG logo, gap 14 px) */ .lm-brand { display: inline-flex; align-items: center; gap: 14px; color: #fff; text-decoration: none; transition: opacity .35s ease, visibility .35s ease; } .lm-brand__mark { flex: none; width: 35px; height: 34px; background: var(--wp--preset--color--blush); -webkit-mask: url(../img/pagoda.svg) center / contain no-repeat; mask: url(../img/pagoda.svg) center / contain no-repeat; } .lm-brand__text { display: flex; flex-direction: column; } .lm-brand__name { font-family: var(--wp--preset--font-family--serif); font-size: 22px; line-height: 1.1; color: #fff; white-space: nowrap; letter-spacing: 0; } .lm-brand__j { color: var(--wp--preset--color--blush); } .lm-brand__tag { font-family: var(--wp--preset--font-family--serif); font-style: italic; font-size: 11.5px; line-height: 1.3; color: var(--wp--preset--color--blush); white-space: nowrap; margin-top: 2px; } @media (max-width: 1180px) { .lm-brand__text { display: none; } } /* first screen of the home page: the large logo is centred there, so the small one is hidden until the visitor scrolls */ body:has(.lm-first):not(.lm-scrolled) .lm-brand { opacity: 0; visibility: hidden; } /* once the first screen / title screen is scrolled past, the menu stays at the top as a navy bar with the logo */ body.lm-scrolled:has(.lm-first) .lm-header, body.lm-scrolled:has(.lm-cover) .lm-header { position: fixed; top: var(--wp-admin--admin-bar--height, 0px); left: 0; right: 0; background: var(--wp--preset--color--navy); padding: .85rem var(--lm-gutter); border-bottom: 1px solid var(--lm-hairline-navy); animation: lm-header-in .35s ease-out; /* no fill-mode: a held transform would make the bar the containing block of the phone menu overlay */ } @keyframes lm-header-in { from { margin-top: -110px; } to { margin-top: 0; } } /* 1.0.66: slide in via margin, not transform: a transform left the bar on its own layer and Chrome drew logo and text slightly blurred at Windows scaling */ @media (max-width: 600px) { body.lm-scrolled:has(.lm-first) .lm-header, body.lm-scrolled:has(.lm-cover) .lm-header { top: 0; } } /* Point 7: frame line a full 1 px in blush (it had opacity .7 and sat on half pixels, so it looked thin and grey) */ @supports (width: round(1.5px, 1px)) { :root { --lm-frame: round(clamp(.9rem, 2vw, 1.6rem), 1px); } } .lm-first::before, .lm-cover::before { inset: var(--lm-frame); opacity: 1; } .lm-section:has(.lm-contactband)::before, .wp-site-blocks:has(.lm-contactband) .lm-footer::before { opacity: 1; } .lm-first__worlds::after { opacity: 1; } /* Point 2: footer = newsletter, then one row in three columns, then a small legal line (same footer on all five sites) */ .lm-footer { background: var(--wp--preset--color--navy); color: var(--wp--preset--color--ivory); padding: 4.5rem var(--lm-gutter) 2.25rem; text-align: left; } .lm-footer > * { max-width: 1200px; margin-left: auto; margin-right: auto; margin-block-start: 0; } .lm-footer p { margin: 0; } .lm-footer__subscribe { max-width: 600px; margin: 0 auto 4rem; text-align: center; } .lm-footer__subscribe label { display: block; font-family: var(--wp--preset--font-family--serif); font-style: italic; font-size: 1.35rem; color: #C6CFDA; margin-bottom: 1.4rem; } .lm-footer__subscribe-row { display: flex; gap: 1rem; align-items: center; border-bottom: 1px solid rgba(198, 207, 218, .45); padding-bottom: .7rem; } .lm-footer__subscribe input[type="email"] { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--wp--preset--color--ivory); font-family: var(--wp--preset--font-family--serif); font-size: 1.2rem; text-align: left; padding: 0; } .lm-footer__subscribe input::placeholder { color: var(--wp--preset--color--slate); font-style: italic; } .lm-footer__subscribe button { font-family: var(--wp--preset--font-family--sans); font-size: .6875rem; letter-spacing: var(--lm-track); text-transform: uppercase; color: #fff; background: none; border: 0; cursor: pointer; padding: .4rem 0; white-space: nowrap; } .lm-footer__subscribe button::after { content: " →"; } .lm-footer__subscribe button:hover { color: var(--wp--preset--color--blush); } .lm-footer__cols { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 2rem; align-items: start; border-top: 1px solid rgba(198, 207, 218, .22); padding-top: 3.25rem; } .lm-footer__address, .lm-footer__social { font-family: var(--wp--preset--font-family--sans); font-size: 15px; line-height: 1.95; color: #C6CFDA; letter-spacing: .01em; } .lm-footer__social { text-align: right; } .lm-footer__social a { color: #C6CFDA; } .lm-footer__social a:hover, .lm-footer__worlds a:hover, .lm-footer__legal a:hover { color: var(--wp--preset--color--blush); } .lm-footer__worlds { text-align: center; font-family: var(--wp--preset--font-family--sans); font-size: 11px; line-height: 2.55; letter-spacing: var(--lm-track); text-transform: uppercase; } .lm-footer__worlds a { color: var(--wp--preset--color--copper); } .lm-footer__bottom { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: 5rem; } .lm-footer__copy, .lm-footer__legal { font-family: var(--wp--preset--font-family--sans); font-size: 11.5px; letter-spacing: .04em; text-transform: none; color: var(--wp--preset--color--slate); margin: 0; } .lm-footer__legal a { color: var(--wp--preset--color--slate); } .wp-site-blocks:has(.lm-contactband) .lm-footer { padding-top: 3rem; } @media (max-width: 782px) { .lm-footer { padding: 3.5rem 1.5rem 2rem; } .wp-site-blocks:has(.lm-contactband) .lm-footer { padding-left: calc(var(--lm-frame) + 1.25rem); padding-right: calc(var(--lm-frame) + 1.25rem); } .lm-footer__subscribe { margin-bottom: 3rem; } .lm-footer__cols { grid-template-columns: 1fr; gap: 2rem; text-align: center; padding-top: 2.5rem; } .lm-footer__address, .lm-footer__social { text-align: center; } .lm-footer__bottom { flex-direction: column; align-items: center; gap: .6rem; margin-top: 3rem; text-align: center; } } /* Point 3: About and Contact first screen: headline ≈ 44 px italic, 48 px blush hairline, line below Lato 15 px #C6CFDA */ .lm-cover h1, body .lm-cover h1 { font-size: clamp(2rem, 5.5vw, 2.75rem); line-height: 1.2; font-style: italic; } .lm-cover hr.lm-rule--cover { width: 48px; height: 0; border: 0; border-top: 1px solid var(--wp--preset--color--blush); background: none; margin: 1.9rem auto 1.6rem; } body .lm-cover p.lm-cover__sub { font-family: var(--wp--preset--font-family--sans); font-style: normal; font-size: 15px; line-height: 1.75; color: #C6CFDA; max-width: 34em; margin: 0 auto; letter-spacing: .01em; } /* Point 6: Contact, the four worlds in fixed columns 70 · 420 · 260 · rest, all left-aligned except the link, name on one line */ .lm-index--contact .lm-index__row, body .lm-index--contact .lm-index__row { grid-template-columns: 70px 420px 260px minmax(0, 1fr); column-gap: 0; row-gap: 0; } .lm-index--contact .lm-index__num { grid-column: 1; grid-row: 1; } .lm-index--contact .lm-index__title { grid-column: 2; grid-row: 1; white-space: nowrap; } .lm-index--contact .lm-index__body { grid-column: 3; grid-row: 1; } .lm-index--contact .lm-index__desc { margin: 0; } .lm-index--contact .lm-index__enter { grid-column: 4; grid-row: 1; justify-self: end; text-align: right; letter-spacing: .2em; margin: 0; } .lm-index--contact .lm-index__row:hover { border-bottom-color: var(--wp--preset--color--blush); } @media (max-width: 1180px) and (min-width: 783px) { .lm-index--contact .lm-index__row, body .lm-index--contact .lm-index__row { grid-template-columns: 56px minmax(0, 1fr) 190px 300px; } .lm-index--contact .lm-index__title { white-space: normal; } } @media (max-width: 782px) { .lm-index--contact .lm-index__row, body .lm-index--contact .lm-index__row { grid-template-columns: 1fr; row-gap: .3rem; } .lm-index--contact .lm-index__num, .lm-index--contact .lm-index__title, .lm-index--contact .lm-index__body, .lm-index--contact .lm-index__enter { grid-column: 1; grid-row: auto; justify-self: start; text-align: left; } .lm-index--contact .lm-index__title { white-space: normal; } } /* "Write to Us" in the same italic headline style as the other sections */ body h3.lm-statement { font-family: var(--wp--preset--font-family--serif); font-style: italic; font-weight: 400; font-size: clamp(1.75rem, 3vw, 2.625rem); line-height: 1.22; color: var(--wp--preset--color--navy); letter-spacing: 0; margin: 0 0 1rem; } /* Point 10, phone: the four worlds on two balanced lines ("Advisory · Healthcare" / "Journeys · Hospitality"), no dot at a line end */ @media (max-width: 782px) { .lm-sep-break { display: block; height: 0; overflow: hidden; font-size: 0; line-height: 0; } } /* Point 10, phone menu: the close cross sits where the menu button was (set by script), small line EN · DE + contact at the bottom */ .lm-menu-extra { display: none; } .wp-block-navigation.lm-nav .wp-block-navigation__responsive-container.is-menu-open .lm-menu-extra { display: block; position: absolute; left: 0; right: 0; bottom: 2.5rem; text-align: center; padding: 0 1.5rem; } .wp-block-navigation.lm-nav .wp-block-navigation__responsive-container.is-menu-open .lm-menu-extra p { font-family: var(--wp--preset--font-family--sans); font-size: 11px; line-height: 2; letter-spacing: .06em; color: var(--wp--preset--color--slate); margin: 0; } .wp-block-navigation.lm-nav .wp-block-navigation__responsive-container.is-menu-open .lm-menu-extra a { font-family: var(--wp--preset--font-family--sans) !important; font-size: 11px !important; letter-spacing: .06em !important; color: var(--wp--preset--color--slate) !important; text-transform: none; } .wp-block-navigation.lm-nav .wp-block-navigation__responsive-container.is-menu-open .lm-menu-extra a.is-current { color: var(--wp--preset--color--ivory) !important; } /* v1.0.35: WordPress folds the menu into the menu button only below 600 px; between 600 and 782 px six items plus EN DE do not fit (two rows over the title). So the phone menu (menu button, EN DE next to it, full-screen overlay) is used up to 782 px. */ @media (min-width: 600px) and (max-width: 782px) { .lm-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; } .lm-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none !important; } .lm-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { display: flex !important; } .lm-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { flex-direction: column; } } /* v1.0.37: language switch as in the correction PDF 17.10. (page 1: one language white, one blush, no dot); which one is blush comes from the first design (14.10.): the active language. */ body .lm-header .lm-lang a, body .lm-header .lm-lang .wp-block-navigation-item__label { color: var(--wp--preset--color--ivory); } html[lang^="en"] body .lm-header .lm-lang li:first-child a, html[lang^="en"] body .lm-header .lm-lang li:first-child .wp-block-navigation-item__label, html[lang^="de"] body .lm-header .lm-lang li:last-child a, html[lang^="de"] body .lm-header .lm-lang li:last-child .wp-block-navigation-item__label { color: var(--wp--preset--color--blush); } /* 1.0.40 (17.10.2026): Hospitality – downloads, lists and contact block as native blocks (editable by Quynh) */ .lm-contact__info .lm-contact__brand { font-family: var(--wp--preset--font-family--serif); font-style: italic; font-size: 1.2rem; color: var(--wp--preset--color--copper); margin-bottom: 1rem; } .lm-download { position: relative; } .lm-download p { margin: 0; } .lm-download__label { font-family: var(--wp--preset--font-family--serif); font-size: 1.1rem; color: var(--wp--preset--color--navy); } .lm-download__label a { color: inherit; text-decoration: none; } .lm-download__label a::after { content: ""; position: absolute; inset: 0; } .lm-download__note { font-family: var(--wp--preset--font-family--sans); font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; color: var(--wp--preset--color--copper); white-space: nowrap; } .lm-contact .wp-block-buttons { margin-top: .5rem; } /* 1.0.41 (17.10.2026, Hospitality review 1): block gap of WordPress pushed the 2nd/3rd box down; gallery columns on tablet/phone (the gallery rule .wp-block-gallery.lm-gallery outranked the media queries); eyebrow on light hero readable; list dots beside links. */ .lm-downloads > *, .lm-people > *, .lm-contact > * { margin-block-start: 0 !important; margin-top: 0 !important; } @media (max-width: 1024px) { .wp-block-gallery.lm-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 782px) { .wp-block-gallery.lm-gallery, .wp-block-gallery.lm-gallery.lm-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; } } body .lm-hero--light p.lm-eyebrow { color: #3A4A60; } /* copper is too pale on the light photo; #3A4A60 = descriptor colour from Quynh 16.10. */ .lm-contact__list li:has(a)::before { top: 1.15rem; } .lm-form .ff-el-tooltip svg { fill: var(--wp--preset--color--copper); } /* 1.0.44 (17.10.2026, 1:1 check against Hospitality Adjustments + current site): card link labels, card sub line, italic section titles */ body .lm-card p.lm-card__sub { font-size: 1.05rem; margin: 0 0 .35rem; } body .lm-card p.lm-card__more { display: inline-block; margin-top: .9rem; font-family: var(--wp--preset--font-family--sans); font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,.7); padding-bottom: 2px; opacity: 1; } body h2.lm-h-italic { font-style: italic; } body p.lm-subline { font-family: var(--wp--preset--font-family--serif); font-style: italic; font-size: 1.25rem; margin: .6rem 0 1.4rem; } .lm-section--navy p.lm-subline { color: var(--wp--preset--color--blush); } /* 1.0.46 (17.10.2026): card link labels with arrow and copper text links, as drawn in „Hospitality Adjustments“ (DISCOVER →, INQUIRY NOW →) */ body .lm-card p.lm-card__more::after { content: " →"; } .lm-readmore-wrap { margin: 0; } .lm-readmore-wrap .lm-readmore { margin-top: 1.4rem; border-bottom: 1px solid currentColor; padding: 0 0 2px; } /* 1.0.47 (17.10.2026, Florian's review of Hospitality): - the header bar stays at the top while scrolling, as on the main site (Hospitality has no first screen with a large logo, so it stays from the start) - anchors (#form, #newsletter) are not hidden under the bar - text links on navy turned navy on hover (invisible) → blush - two white sections in a row doubled the white space (Q.Table, Contact) → second one without top padding */ body.lm-variant-hospitality [id] { scroll-margin-top: 96px; } .lm-section--navy .lm-readmore:hover { color: var(--wp--preset--color--blush); } /* 1.0.56: rule for two white sections in a row removed (new section rhythm) */ /* 1.0.49 (17.10.2026, Florian): header on Hospitality = navy bar that always stays at the top (never transparent). */ /* 1.0.56 (18.10.2026): removed - Hospitality follows Quynh's design of 18.10. (see the Hospitality v2 block at the end) */ /* 1.0.50 (Florian 17.10.): logo also on the Hospitality home page from the start, as on the inner pages */ /* ===================================================================================================== 1.0.51 (17.10.2026): Advisory + German Medical Services as one long page each, after Quynh's designs of 17.10. Shared blocks first (both worlds), then Advisory, then GMS (own colours, Lato body text). ===================================================================================================== */ /* two-column introductions: label + statement left, paragraph right (Advisory 02/05, GMS 03/04/05/07/10) */ .lm-twocol--top { align-items: start; margin-bottom: 2.5rem; } .lm-twocol__head > *, .lm-twocol__text > * { margin-block-start: 0; } .lm-twocol__text p { font-size: 1.0625rem; line-height: 1.8; } .lm-twocol__text p + p { margin-top: 1.1em; } .lm-twocol-cols.wp-block-columns { gap: clamp(2rem, 6vw, 6rem); max-width: 1100px; margin: 0 auto; } .lm-twocol-cols .lm-col > * { margin-block-start: 0; } .lm-twocol-cols .lm-col p.lm-statement { margin-bottom: 1.4rem; } .lm-twocol-cols .lm-col > p:not(.lm-eyebrow):not(.lm-statement) { font-size: 1.0625rem; line-height: 1.75; margin-bottom: 1.6rem; } /* definition rows: LABEL | text (Advisory 06, GMS 06) */ .lm-defs { border-top: 1px solid var(--lm-hairline); } .lm-def { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); gap: 1.5rem; padding: 1.1rem 0; border-bottom: 1px solid var(--lm-hairline); } .lm-def > *, .lm-defs > * { margin-block-start: 0; } .lm-def p.lm-label { margin: .25rem 0 0; } .lm-def p { font-size: 1rem; line-height: 1.65; margin: 0; } /* numbered items with a line on top (Advisory 08, GMS 03/05/07/11) */ .lm-six { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem clamp(2rem, 4vw, 4rem); margin-top: 2.5rem; } .lm-six > *, .lm-num__item > * { margin-block-start: 0; } .lm-num__item p.lm-num__n { font-family: var(--wp--preset--font-family--sans); font-size: 11px; letter-spacing: 3px; color: var(--wp--preset--color--copper); margin: 0 0 .7rem; } .lm-num__item h3 { font-size: clamp(1.3rem, 1.9vw, 1.6rem); margin: 0 0 .5rem; } .lm-num__item p { font-size: 1rem; line-height: 1.65; margin: 0; } .lm-num__item ul { list-style: none; padding: 0; margin: 0; } .lm-num__item li { font-size: 1rem; line-height: 1.75; margin: 0; } .lm-six--navy h3, .lm-six--navy p { color: var(--wp--preset--color--ivory); } .lm-six--navy p.lm-num__n { color: var(--wp--preset--color--copper); } .lm-six--lines .lm-num__item { border-top: 1px solid var(--lm-hairline); padding-top: 1.4rem; } /* labelled lists (Advisory 07, GMS 08) */ .lm-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem clamp(2rem, 5vw, 5rem); margin-top: 2.5rem; } .lm-lists--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1100px; } .lm-lists > *, .lm-list > * { margin-block-start: 0; } .lm-list p.lm-label--line { border-bottom: 1px solid var(--lm-hairline); padding-bottom: .9rem; margin-bottom: 1.1rem; } .lm-list ul { list-style: none; padding: 0; margin: 0; } .lm-list li { font-size: 1.0625rem; line-height: 1.85; } .lm-list p:not(.lm-label) { font-size: 1.0625rem; line-height: 1.8; } /* italic closing line (Advisory 05/09) */ body p.lm-note-line { font-family: var(--wp--preset--font-family--serif); font-style: italic; font-size: 1.1rem; color: var(--wp--preset--color--navy); margin: 0; } body p.lm-note-line--center { text-align: center; margin-top: 2.5rem; } body h2.lm-h-plain { font-style: normal; } /* frame (blush, 1 px) around the full-screen navy sections: statement screen, "our difference", closing screen (Quynh: same frame everywhere) */ .lm-section--navy:has(.lm-statement-screen), .lm-section--navy:has(.lm-framed), .lm-section--closing { position: relative; } .lm-section--navy:has(.lm-statement-screen)::before, .lm-section--navy:has(.lm-framed)::before { content: ""; position: absolute; inset: var(--lm-frame); border: 1px solid var(--wp--preset--color--blush); pointer-events: none; } .lm-section--navy:has(.lm-statement-screen), .lm-section--navy:has(.lm-framed) { padding: calc(var(--lm-section-y) + var(--lm-frame)) calc(var(--lm-gutter) + var(--lm-frame)); } .lm-statement-screen { min-height: calc(100vh - 2 * var(--lm-section-y) - 2 * var(--lm-frame)); min-height: calc(100svh - 2 * var(--lm-section-y) - 2 * var(--lm-frame)); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .lm-statement-screen > * { margin-block-start: 0; } body .lm-statement-screen p.lm-statement { font-size: clamp(1.7rem, 3.2vw, 2.75rem); color: var(--wp--preset--color--ivory); max-width: 900px; margin: 0 0 1.6rem; } body .lm-statement-screen p.lm-label { color: var(--wp--preset--color--copper); margin: 0; } .lm-framed > * { margin-block-start: 0; } /* closing screen = contact band of the worlds: frame continues into the footer, like the main site */ .lm-section--closing::before, .wp-site-blocks:has(.lm-section--closing) .lm-footer::before, body:has(.lm-section--closing) .lm-footer::before { content: ""; position: absolute; left: var(--lm-frame); right: var(--lm-frame); border: 1px solid var(--wp--preset--color--blush); pointer-events: none; } .lm-section--closing::before { top: var(--lm-frame); bottom: 0; border-bottom: 0; } .wp-site-blocks:has(.lm-section--closing) .lm-footer, body:has(.lm-section--closing) .lm-footer { position: relative; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: 0; box-sizing: border-box; padding-top: 3rem; padding-bottom: calc(2.5rem + var(--lm-frame)); } .wp-site-blocks:has(.lm-section--closing) .lm-footer::before, body:has(.lm-section--closing) .lm-footer::before { top: 0; bottom: var(--lm-frame); border-top: 0; } .wp-site-blocks:has(.lm-section--closing) > footer, .wp-site-blocks:has(.lm-section--closing) > .wp-block-template-part:last-child { margin-block-start: 0; } .lm-section--closing { padding: calc(var(--lm-section-y) + var(--lm-frame)) calc(var(--lm-gutter) + var(--lm-frame)) 3rem; } .lm-closing-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); max-width: 1200px; margin: 0 auto; align-items: start; } .lm-closing-grid > *, .lm-closing__left > *, .lm-closing__right > *, .lm-worldlinks > *, .lm-worldlink > * { margin-block-start: 0; } body .lm-closing-grid p.lm-statement { color: var(--wp--preset--color--ivory); font-size: clamp(1.6rem, 2.6vw, 2.25rem); margin-bottom: 1.5rem; } .lm-closing__left .lm-hairline { margin: 0 0 2rem; border-top-color: rgba(198, 207, 218, .35); } .lm-worldlink { margin-bottom: 2.4rem; } .lm-worldlink h3 { color: var(--wp--preset--color--ivory); font-size: clamp(1.3rem, 1.9vw, 1.6rem); margin: 0 0 .25rem; } body .lm-worldlink p.lm-worldlink__desc { font-family: var(--wp--preset--font-family--serif); font-style: italic; font-size: 1.05rem; color: #C6CFDA; margin: 0 0 .5rem; } .lm-worldlink .lm-readmore-wrap .lm-readmore { margin-top: 0; letter-spacing: .2em; font-size: .6875rem; } .lm-section--navy .lm-readmore { color: var(--wp--preset--color--copper); } body .lm-closing__right p.lm-form-note { font-family: var(--wp--preset--font-family--serif); font-style: italic; font-size: .95rem; color: #C6CFDA; margin: 1.4rem 0 0; } .lm-closing__right .wp-block-buttons { margin-top: -3.3rem; justify-content: flex-start; padding-left: 9.5rem; } .lm-closing__right .wp-block-buttons .wp-block-button__link { color: var(--wp--preset--color--ivory); border-color: var(--wp--preset--color--copper); } /* form as drawn: two columns, underline fields, italic placeholders (preview .lm-form--navy and Fluent Forms on navy) */ .lm-section--navy .lm-form, .lm-form--navy { background: transparent; border: 0; padding: 0; max-width: none; margin: 0; } .lm-form__grid, .lm-section--navy .frm-fluent-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; } .lm-form__grid .lm-field { margin-bottom: 1.6rem; } .lm-field--wide, .lm-section--navy .frm-fluent-form .ff-el-group:has(textarea), .lm-section--navy .frm-fluent-form .ff-el-group:has(.ff-el-tc), .lm-section--navy .frm-fluent-form .ff_submit_btn_wrapper, .lm-section--navy .frm-fluent-form .ff-el-group:has(.ff-custom_html), .lm-section--navy .frm-fluent-form .ff-message-success, .lm-section--navy .frm-fluent-form .ff-errors-in-stack { grid-column: 1 / -1; } .lm-form--navy input, .lm-form--navy select, .lm-form--navy textarea, .lm-section--navy .lm-form .ff-el-form-control { background: transparent !important; border: 0 !important; border-bottom: 1px solid rgba(198, 207, 218, .55) !important; color: var(--wp--preset--color--ivory) !important; font-family: var(--wp--preset--font-family--serif); font-style: italic; font-size: 1.1rem; padding: .6rem 0 !important; border-radius: 0; width: 100%; box-sizing: border-box; } .lm-form--navy select option { color: var(--wp--preset--color--navy); font-style: normal; } .lm-form--navy input::placeholder, .lm-form--navy textarea::placeholder, .lm-section--navy .lm-form .ff-el-form-control::placeholder { color: #C6CFDA; font-style: italic; opacity: 1; } .lm-form--navy select:invalid, .lm-form--navy select option[value=""] { color: #C6CFDA; } .lm-form--navy textarea { min-height: 2.6rem; height: 2.6rem; resize: vertical; } .lm-form--navy .lm-consent { font-family: var(--wp--preset--font-family--serif); font-style: italic; font-size: .92rem; line-height: 1.5; color: #C6CFDA; display: flex; gap: .6rem; align-items: flex-start; } .lm-form--navy .lm-consent input { width: auto; margin-top: .3rem; } .lm-form--navy .lm-consent a, .lm-section--navy .lm-form .ff-el-tc a { color: var(--wp--preset--color--ivory); text-decoration: underline; text-underline-offset: 3px; } .lm-form--navy .lm-submit { text-align: left; margin-top: .4rem; } .lm-form--navy button, .lm-section--navy .lm-form .ff-btn-submit { background: var(--wp--preset--color--blush) !important; color: var(--wp--preset--color--navy) !important; border: 1px solid var(--wp--preset--color--blush) !important; padding: .95rem 2.2rem !important; font-family: var(--wp--preset--font-family--sans); font-size: .6875rem; letter-spacing: var(--lm-track); text-transform: uppercase; font-weight: 700; min-width: 0 !important; width: auto !important; } .lm-form--navy button:hover, .lm-section--navy .lm-form .ff-btn-submit:hover { background: var(--wp--preset--color--ivory) !important; border-color: var(--wp--preset--color--ivory) !important; } .lm-section--navy .lm-form label, .lm-section--navy .lm-form .ff-el-input--label label { color: #C6CFDA; } .lm-section--navy .lm-form .ff-el-tc label, .lm-section--navy .lm-form .ff-el-form-check label { color: #C6CFDA; font-style: italic; } .lm-section--navy .lm-form .ff-el-group { margin-bottom: 1.4rem; } .lm-section--navy .lm-form .ff-custom_html p { color: #C6CFDA; font-family: var(--wp--preset--font-family--serif); font-style: italic; font-size: .95rem; letter-spacing: 0; } /* ---------- Advisory ---------- */ /* first screen: as on the main site, plus world name, italic line, rule, statement, button; regions at the bottom */ .lm-first--world .lm-first__inner { padding-bottom: 7rem; } .lm-first--world .lm-first__logo { width: clamp(220px, 28vw, 300px); margin-bottom: 2.6rem; } body .lm-first--world p.lm-world__name { color: var(--wp--preset--color--ivory); font-weight: 400; font-size: 1.35rem; letter-spacing: .5em; margin: 0 0 .9rem; padding-left: .5em; } body .lm-first--world p.lm-world__desc { font-family: var(--wp--preset--font-family--serif); font-style: italic; font-size: 1.5rem; color: var(--wp--preset--color--blush); margin: 0; } .lm-first--world .lm-rule { margin: 1.9rem auto; } body .lm-first--world p.lm-statement { font-size: clamp(1.5rem, 2.8vw, 2.2rem); margin-bottom: 2.2rem; } .lm-first--world .wp-block-buttons { justify-content: center; } .lm-first--world .wp-block-button__link { color: var(--wp--preset--color--blush); border-color: var(--wp--preset--color--copper); font-weight: 700; letter-spacing: .2em; padding: 1rem 2rem; } .lm-first--world .wp-block-button__link:hover { background: var(--wp--preset--color--blush); color: var(--wp--preset--color--navy); } body .lm-first--world .lm-first__worlds p.lm-label { color: var(--wp--preset--color--blush); letter-spacing: .3em; font-size: .75rem; } /* top bar: on the first screen only the pagoda (text hidden), after the first screen a white bar with the wordmark and "Advisory" (design page 02) */ body.lm-variant-advisory:has(.lm-first):not(.lm-scrolled) .lm-brand { opacity: 1; visibility: visible; } body.lm-variant-advisory:has(.lm-first):not(.lm-scrolled) .lm-brand__text { display: none; } .lm-brand__tag--world { font-family: var(--wp--preset--font-family--sans); font-style: normal; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--wp--preset--color--copper); margin-top: 3px; } body.lm-variant-advisory .lm-nav li:last-child a, body.lm-variant-advisory .lm-nav li:last-child .wp-block-navigation-item__label { color: var(--wp--preset--color--slate); } body.lm-variant-advisory.lm-scrolled:has(.lm-first) .lm-header { background: #fff; border-bottom: 1px solid var(--lm-hairline); } body.lm-variant-advisory.lm-scrolled .lm-header .lm-brand__mark { background: var(--wp--preset--color--navy); } body.lm-variant-advisory.lm-scrolled .lm-header .lm-brand__name { color: var(--wp--preset--color--navy); } body.lm-variant-advisory.lm-scrolled .lm-header .lm-nav a, body.lm-variant-advisory.lm-scrolled .lm-header .lm-nav .wp-block-navigation-item__label, body.lm-variant-advisory.lm-scrolled .lm-header .lm-lang a { color: var(--wp--preset--color--navy); } body.lm-variant-advisory.lm-scrolled .lm-header .lm-nav li:last-child a { color: var(--wp--preset--color--slate); } body.lm-variant-advisory.lm-scrolled .lm-header .lm-nav a:hover { color: var(--wp--preset--color--copper); } body.lm-variant-advisory.lm-scrolled .lm-header .wp-block-navigation__responsive-container-open { color: var(--wp--preset--color--navy); } body.lm-variant-advisory [id] { scroll-margin-top: 90px; } /* 03 services: ten cards in five columns; closed = number, "+", title, three lines; open = copper border, "−", full list */ .lm-scards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem; margin-top: 2.5rem; } .lm-scards > *, .lm-scard > * { margin-block-start: 0; } .lm-scard { position: relative; background: #fff; border: 1px solid var(--lm-hairline); padding: 1.6rem 1.4rem 1.8rem; transition: border-color .25s ease; } .lm-scard.is-open { border-color: var(--wp--preset--color--copper); } body .lm-scard p.lm-scard__num { font-family: var(--wp--preset--font-family--serif); font-size: 1rem; color: var(--wp--preset--color--copper); margin: 0 0 .9rem; } .lm-scard h3 { font-size: clamp(1.2rem, 1.5vw, 1.45rem); line-height: 1.25; margin: 0 0 1.1rem; } .lm-scard ul { list-style: none; padding: 0; margin: 0; } .lm-scard li { font-size: 1rem; line-height: 1.7; } .lm-scard__full { display: none; } .lm-scard.is-open .lm-scard__full { display: block; } .lm-scard.is-open .lm-scard__short { display: none; } .lm-scard__toggle { position: absolute; top: 1.2rem; right: 1.2rem; width: 28px; height: 28px; background: none; border: 0; cursor: pointer; color: var(--wp--preset--color--copper); font-family: var(--wp--preset--font-family--serif); font-size: 1.5rem; line-height: 1; padding: 0; } .lm-scard__toggle::before { content: "+"; } .lm-scard.is-open .lm-scard__toggle::before { content: "−"; } /* 05 how we work: three levels as tabs */ .lm-tabs > *, .lm-tabs__nav > *, .lm-levels > *, .lm-level > * { margin-block-start: 0; } .lm-tabs__nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1.5rem; margin: 1rem 0 3rem; } body p.lm-tabs__tab { font-family: var(--wp--preset--font-family--sans); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; margin: 0; padding-bottom: 1rem; border-bottom: 1px solid var(--lm-hairline); } body p.lm-tabs__tab a { color: var(--wp--preset--color--navy); } body p.lm-tabs__tab.is-active { border-bottom: 2px solid var(--wp--preset--color--copper); } .lm-levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.5rem; } body .lm-level p.lm-num__n--big { font-family: var(--wp--preset--font-family--serif); font-size: clamp(2.4rem, 3.6vw, 3.5rem); line-height: 1; letter-spacing: 0; color: var(--wp--preset--color--copper); margin: 0 0 1rem; } .lm-level h3 { font-size: clamp(1.4rem, 2vw, 1.75rem); margin: 0 0 .6rem; } .lm-level p { font-size: 1.0625rem; line-height: 1.7; margin: 0; } .lm-tabs + .lm-hairline { margin: 3rem 0 1.5rem; } /* 09 founders: text only, no portraits (design notes) */ .lm-variant-advisory .lm-founder h3 { font-size: clamp(1.6rem, 2.4vw, 2rem); margin-bottom: .4rem; } .lm-variant-advisory .lm-founder p:not(.lm-label) { font-size: 1.0625rem; line-height: 1.8; } /* ---------- German Medical Services ---------- */ /* own colours inside the page (design page 14); the closing screen and the footer keep the rose gold of the family */ body.lm-variant-gms .lm-main { --wp--preset--color--copper: #9C7B4F; --wp--preset--color--blush: #C9AE84; --wp--preset--color--ivory: #F3EEE6; --wp--preset--color--ink: #5E5A55; --lm-hairline: #E2DBD0; } body.lm-variant-gms .lm-section--closing { --wp--preset--color--copper: #C9A18C; --wp--preset--color--blush: #E3BEB1; --wp--preset--color--ivory: #FAF7F4; } body.lm-variant-gms .lm-section--navy .lm-eyebrow { color: #C9AE84; } body.lm-variant-gms .lm-section--closing .lm-eyebrow { color: #E3BEB1; } /* typography: EB Garamond headlines (regular, not italic), Lato body text in #5E5A55 */ body.lm-variant-gms .lm-main p:not(.lm-eyebrow):not(.lm-label):not(.lm-statement):not(.lm-figure__n):not(.lm-num__n), body.lm-variant-gms .lm-main li { font-family: var(--wp--preset--font-family--sans); color: var(--wp--preset--color--ink); } body.lm-variant-gms .lm-main .lm-section--navy p:not(.lm-eyebrow), body.lm-variant-gms .lm-main .lm-section--navy li { color: #DDE2EA; } body.lm-variant-gms .lm-main h2 { font-style: normal; font-size: clamp(1.9rem, 3.1vw, 2.75rem); line-height: 1.15; margin-bottom: 1.4rem; max-width: 18em; } body.lm-variant-gms .lm-main h2 em { font-style: italic; } body.lm-variant-gms .lm-main .lm-twocol__text p { font-size: 1.0625rem; line-height: 1.75; } body.lm-variant-gms .lm-main .lm-twocol__head p.lm-eyebrow { margin-bottom: 1.1rem; } body.lm-variant-gms .lm-main p.lm-statement--small { font-size: clamp(1.25rem, 1.9vw, 1.5rem); margin-top: 1.4rem; } /* light sticky top bar with rosette, wordmark and the "Discuss a project" button (design page 01) */ body.lm-variant-gms .lm-header, body.lm-variant-gms header.wp-block-template-part { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 60; } body.lm-variant-gms .lm-header { background: rgba(243, 238, 230, .96); color: var(--wp--preset--color--navy); border-bottom: 1px solid rgba(29, 42, 58, .08); padding: .9rem var(--lm-gutter); } body.lm-variant-gms .lm-header a, body.lm-variant-gms .lm-header .wp-block-navigation-item__label, body.lm-variant-gms .lm-header .wp-block-navigation__responsive-container-open { color: var(--wp--preset--color--navy); } body.lm-variant-gms .lm-nav a, body.lm-variant-gms .lm-nav .wp-block-navigation-item__label { text-transform: none; font-size: .875rem; letter-spacing: .08em; } body.lm-variant-gms .lm-nav a:hover { color: #9C7B4F; } body.lm-variant-gms .lm-nav li.lm-nav__btn a { border: 1px solid var(--wp--preset--color--navy); padding: .7rem 1.3rem; text-transform: uppercase; font-size: .6875rem; letter-spacing: .2em; font-weight: 700; } body.lm-variant-gms .lm-nav li.lm-nav__btn a:hover { background: var(--wp--preset--color--navy); color: #fff; } body.lm-variant-gms .lm-brand__mark { width: 36px; height: 36px; background: #9C7B4F; -webkit-mask-image: url(../img/gms-rosette-placeholder.svg); mask-image: url(../img/gms-rosette-placeholder.svg); } body.lm-variant-gms .lm-brand__name { color: var(--wp--preset--color--navy); font-size: 21px; } body.lm-variant-gms .lm-brand__tag { font-family: var(--wp--preset--font-family--sans); font-style: normal; font-size: 9.5px; letter-spacing: .28em; text-transform: uppercase; color: #9C7B4F; margin-top: 4px; } body.lm-variant-gms .lm-lang a { color: #8A8176; } html[lang^="en"] body.lm-variant-gms .lm-header .lm-lang li:first-child a, html[lang^="de"] body.lm-variant-gms .lm-header .lm-lang li:last-child a { color: var(--wp--preset--color--navy); } body.lm-variant-gms [id] { scroll-margin-top: 84px; } /* 01 first screen: photo full width, text on a light gradient at the left, three qualities at the bottom */ .lm-gmshero-wrap.alignfull, .lm-gmshero-wrap { margin-top: 0; } .lm-gmshero { position: relative; min-height: calc(100vh - 72px); min-height: calc(100svh - 72px); display: flex; flex-direction: column; justify-content: center; padding: clamp(3rem, 8vw, 6rem) var(--lm-gutter) 2rem; overflow: hidden; } .lm-gmshero > * { margin-block-start: 0; } .lm-gmshero__img.wp-block-image { position: absolute; inset: 0; margin: 0; z-index: 0; } .lm-gmshero__img img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; } .lm-gmshero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(243, 238, 230, .94) 0%, rgba(243, 238, 230, .82) 32%, rgba(243, 238, 230, .25) 58%, rgba(243, 238, 230, 0) 75%); z-index: 1; } .lm-gmshero__text, .lm-gmshero__foot { position: relative; z-index: 2; max-width: 1200px; width: 100%; margin: 0 auto; } .lm-gmshero__text > *, .lm-gmshero__foot > *, .lm-gmshero__actions > * { margin-block-start: 0; } .lm-gmshero__text h1 { font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.1; max-width: 11em; margin: 0 0 1.4rem; font-style: normal; } .lm-gmshero__text h1 em { font-style: italic; } body .lm-gmshero__text p.lm-lead { font-family: var(--wp--preset--font-family--sans); font-size: 1.125rem; line-height: 1.75; max-width: 34em; margin: 0 0 2.2rem; } .lm-gmshero__actions { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; } .lm-gmshero__actions .wp-block-buttons { margin: 0; } .lm-gmshero__actions .wp-block-button__link { background: var(--wp--preset--color--navy); color: #fff; border-color: var(--wp--preset--color--navy); font-weight: 700; letter-spacing: .2em; padding: 1rem 2rem; } .lm-gmshero__actions .wp-block-button__link:hover { background: #9C7B4F; border-color: #9C7B4F; } body .lm-gmshero__actions p.lm-textlink-wrap { margin: 0; } .lm-textlink { font-family: var(--wp--preset--font-family--sans); font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--wp--preset--color--navy); border-bottom: 1px solid #9C7B4F; padding-bottom: .35rem; } .lm-textlink:hover { color: #9C7B4F; } .lm-gmshero__foot { margin-top: auto; padding-top: 3rem; } .lm-gmshero__foot .lm-hairline { margin: 0 0 1.1rem; border-top-color: rgba(29, 42, 58, .25); } body .lm-gmshero__foot p.lm-label { color: var(--wp--preset--color--ink); font-weight: 400; letter-spacing: 3px; } /* text + photo columns (02, 06, 08, 09) */ .lm-splitcols.wp-block-columns { gap: clamp(2rem, 6vw, 6rem); max-width: 1200px; margin: 0 auto; align-items: center; } .lm-splitcols .lm-col > * { margin-block-start: 0; } .lm-splitcols .lm-col--text > p:not(.lm-eyebrow):not(.lm-statement) { font-size: 1.0625rem; line-height: 1.75; margin-bottom: 1.1em; } .lm-splitcols .lm-col--text .lm-defs { margin-top: 2rem; } .lm-photo.wp-block-image { margin: 0; } .lm-photo img { width: 100%; height: auto; } .lm-photo--landscape img { aspect-ratio: 3 / 2; object-fit: cover; } .lm-photo--portrait img { aspect-ratio: 3 / 4; object-fit: cover; } .lm-splitcols--edge.wp-block-columns { align-items: stretch; } .lm-col--edge { position: relative; } .lm-col--edge .lm-photo { height: 100%; } .lm-col--edge .lm-photo img { height: 100%; aspect-ratio: auto; min-height: 560px; } /* 03 what we do: five columns with a navy line on top */ .lm-five { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2rem 1.5rem; margin-top: 2.5rem; } .lm-five > *, .lm-five .lm-num__item > * { margin-block-start: 0; } .lm-five .lm-num__item { border-top: 1px solid var(--wp--preset--color--navy); padding-top: 1.4rem; } .lm-five h3 { font-size: clamp(1.2rem, 1.5vw, 1.5rem); min-height: 2.5em; } .lm-five li { font-size: .95rem; line-height: 1.85; } .lm-acc__toggle { display: none; } /* 04 how we work: three columns with vertical lines, roman numerals in light bronze */ .lm-levels--gms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 2.5rem; border-top: 1px solid rgba(198, 207, 218, .35); padding-top: 3rem; } .lm-levels--gms > *, .lm-levels--gms .lm-num__item > * { margin-block-start: 0; } .lm-levels--gms .lm-num__item { padding: 0 2.5rem 1rem 0; border-right: 1px solid rgba(198, 207, 218, .35); } .lm-levels--gms .lm-num__item + .lm-num__item { padding-left: 2.5rem; } .lm-levels--gms .lm-num__item:last-child { border-right: 0; padding-right: 0; } body .lm-levels--gms p.lm-num__n--roman { font-family: var(--wp--preset--font-family--serif); font-size: clamp(2.4rem, 3.6vw, 3.6rem); line-height: 1; letter-spacing: 0; color: #C9AE84; margin: 0 0 1.4rem; } .lm-levels--gms h3 { color: var(--wp--preset--color--ivory); font-size: clamp(1.4rem, 2vw, 1.8rem); } /* 05 for investors: four figures, then four stages with a double bronze line */ .lm-figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; margin-top: 1.5rem; } .lm-figures > *, .lm-figure > * { margin-block-start: 0; } .lm-figure { border-top: 1px solid var(--wp--preset--color--navy); padding-top: 1.6rem; } body .lm-figure p.lm-figure__n { font-family: var(--wp--preset--font-family--serif); font-size: clamp(2.6rem, 4vw, 3.75rem); line-height: 1; color: var(--wp--preset--color--navy); margin: 0 0 1rem; } .lm-figure__n sup { font-size: .45em; color: #9C7B4F; vertical-align: .55em; margin-left: .1em; } body .lm-figure p.lm-label { color: var(--wp--preset--color--ink); font-weight: 400; letter-spacing: 2.5px; line-height: 1.6; margin: 0; } .lm-four { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; margin-top: 3.5rem; } .lm-four > *, .lm-four .lm-num__item > * { margin-block-start: 0; } .lm-stages4 .lm-num__item { border-top: 3px double #C9AE84; padding-top: 1.4rem; } /* 09 first / then / ultimately */ .lm-steps { border-top: 1px solid var(--lm-hairline); margin-top: 1.5rem; } .lm-steps > *, .lm-step > *, .lm-step__body > * { margin-block-start: 0; } .lm-step { display: grid; grid-template-columns: minmax(120px, 180px) minmax(0, 1fr); gap: 1.5rem; padding: 1.2rem 0; border-bottom: 1px solid var(--lm-hairline); } .lm-step p.lm-label { margin: .3rem 0 0; } .lm-step h3 { font-size: 1.35rem; margin: 0 0 .3rem; } .lm-step p:not(.lm-label) { margin: 0; font-size: 1rem; line-height: 1.6; } /* 10 team: four columns, navy line, name, line, role, text */ .lm-team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1.5rem; margin-top: 2.5rem; } .lm-team > *, .lm-member > * { margin-block-start: 0; } .lm-member { border-top: 1px solid var(--wp--preset--color--navy); padding-top: 1.4rem; } .lm-member h3 { font-size: clamp(1.35rem, 1.8vw, 1.65rem); border-bottom: 1px solid var(--wp--preset--color--navy); padding-bottom: .9rem; margin: 0 0 1.2rem; } .lm-member p.lm-label { line-height: 1.6; margin: 0 0 1rem; letter-spacing: 2px; } .lm-member p:not(.lm-label) { font-size: .95rem; line-height: 1.75; margin: 0; } /* 08 lists: label with a navy line */ body.lm-variant-gms .lm-list p.lm-label--line { border-bottom-color: var(--wp--preset--color--navy); } body.lm-variant-gms .lm-list li { font-size: 1rem; } /* ---------- phone / tablet (both worlds) ---------- */ @media (max-width: 1100px) { .lm-scards { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lm-five { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lm-team, .lm-four, .lm-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 782px) { .lm-twocol--top { grid-template-columns: 1fr; gap: 1.2rem; } .lm-twocol-cols.wp-block-columns, .lm-splitcols.wp-block-columns { flex-direction: column; gap: 2rem; } .lm-splitcols .lm-col--media { order: 2; } .lm-col--edge .lm-photo img { min-height: 0; aspect-ratio: 4 / 3; } .lm-six, .lm-lists, .lm-lists--3, .lm-four, .lm-figures, .lm-team { grid-template-columns: 1fr; gap: 1.8rem; } .lm-def, .lm-step { grid-template-columns: 1fr; gap: .4rem; } .lm-closing-grid { grid-template-columns: 1fr; gap: 3rem; } .lm-form__grid, .lm-section--navy .frm-fluent-form { grid-template-columns: 1fr; } .lm-closing__right .wp-block-buttons { margin-top: 1rem; padding-left: 0; } .lm-section--closing { padding-left: calc(var(--lm-frame) + 1.25rem); padding-right: calc(var(--lm-frame) + 1.25rem); } .lm-section--navy:has(.lm-statement-screen), .lm-section--navy:has(.lm-framed) { padding-left: calc(var(--lm-frame) + 1.25rem); padding-right: calc(var(--lm-frame) + 1.25rem); } .lm-statement-screen { min-height: 60vh; } /* Advisory: cards become an accordion (design page 11): number + "+" above the title, hairlines, no boxes */ .lm-scards { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--lm-hairline); margin-top: 2rem; } .lm-scard { background: transparent; border: 0; border-bottom: 1px solid var(--lm-hairline); padding: 1.3rem 0 1.3rem; } .lm-scard.is-open { border-color: var(--lm-hairline); } body .lm-scard p.lm-scard__num { font-family: var(--wp--preset--font-family--sans); font-size: 11px; letter-spacing: 3px; margin-bottom: .5rem; } .lm-scard h3 { margin-bottom: 0; font-size: 1.35rem; } .lm-scard__short { display: none; } .lm-scard.is-open ul.lm-scard__full { display: block; margin-top: 1rem; } .lm-scard__toggle { top: 1.05rem; right: auto; left: 2.6rem; width: 20px; height: 20px; font-size: 1.1rem; text-align: left; } /* Advisory: the three levels slide horizontally, the tabs scroll with them */ .lm-tabs__nav { display: flex; gap: 1.5rem; overflow-x: auto; scrollbar-width: none; margin-bottom: 1.8rem; } .lm-tabs__nav::-webkit-scrollbar { display: none; } body p.lm-tabs__tab { flex: 0 0 auto; white-space: nowrap; } .lm-levels { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1.5rem; scrollbar-width: none; padding-bottom: .5rem; } .lm-levels::-webkit-scrollbar { display: none; } .lm-level { flex: 0 0 82%; scroll-snap-align: start; } /* GMS: hero = photo on top, text block on stone below (design page 13); services as accordion; levels stacked with lines */ .lm-gmshero { min-height: 0; padding: 0 0 2rem; display: block; } .lm-gmshero::before { display: none; } .lm-gmshero__img.wp-block-image { position: static; } .lm-gmshero__img img { aspect-ratio: 4 / 3; height: auto; } .lm-gmshero__text { padding: 2rem var(--lm-gutter) 0; } .lm-gmshero__text h1 { font-size: 2.1rem; } .lm-gmshero__foot { padding: 2rem var(--lm-gutter) 0; } .lm-five { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--wp--preset--color--navy); } .lm-five .lm-num__item { border-top: 0; border-bottom: 1px solid var(--wp--preset--color--navy); padding: 1.1rem 0; position: relative; } .lm-five h3 { min-height: 0; margin: 0; font-size: 1.3rem; } .lm-five .lm-num__item ul { display: none; margin-top: .9rem; } .lm-five .lm-num__item.is-open ul { display: block; } .lm-acc .lm-num__item p.lm-num__n { margin-bottom: .4rem; } .lm-acc__toggle { display: block; position: absolute; top: 1.05rem; left: 2.4rem; background: none; border: 0; color: #9C7B4F; font-family: var(--wp--preset--font-family--serif); font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0; } .lm-acc__toggle::before { content: "+"; } .lm-num__item.is-open .lm-acc__toggle::before { content: "−"; } .lm-levels--gms { grid-template-columns: 1fr; gap: 0; padding-top: 0; border-top: 0; } .lm-levels--gms .lm-num__item, .lm-levels--gms .lm-num__item + .lm-num__item { border-right: 0; border-bottom: 1px solid rgba(198, 207, 218, .35); padding: 1.6rem 0; } body .lm-levels--gms p.lm-num__n--roman { font-size: 2.2rem; margin-bottom: .8rem; } } /* 1.0.51b: phone – regions line on the Advisory first screen stays inside the frame; GMS phone menu on the sticky bar */ @media (max-width: 782px) { body .lm-first--world .lm-first__worlds p.lm-label { letter-spacing: .18em; font-size: .6875rem; padding: 0 1.5rem; } body .lm-first--world .lm-first__worlds p.lm-label--muted { padding: 0 1.5rem; } .lm-first--world .lm-first__inner { padding-bottom: 8rem; } } /* ---------- 1.0.52 (18.10.2026): second check of both worlds against the design PDFs, page by page ---------- */ /* GMS: body text on navy sections was overridden by the Lato/ink rule above (higher specificity) → light, as on design page 04 */ body.lm-variant-gms .lm-main .lm-section--navy p:not(.lm-eyebrow):not(.lm-label):not(.lm-statement):not(.lm-figure__n):not(.lm-num__n), body.lm-variant-gms .lm-main .lm-section--navy li { color: #DDE2EA; } body.lm-variant-gms .lm-main .lm-section--closing p.lm-worldlink__desc { color: #C6CFDA; } /* GMS closing (design page 12): a hairline under each of the three worlds */ body.lm-variant-gms .lm-worldlink { padding-bottom: 1.6rem; margin-bottom: 1.6rem; border-bottom: 1px solid rgba(198, 207, 218, .25); } /* forms of both worlds (design pages 10/12): the placeholder carries the "▾", so no second native arrow (preview select and Fluent select) */ body.lm-variant-advisory .lm-form--navy select, body.lm-variant-gms .lm-form--navy select, body.lm-variant-advisory .lm-section--navy .lm-form select.ff-el-form-control, body.lm-variant-gms .lm-section--navy .lm-form select.ff-el-form-control { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: none !important; padding-right: 0 !important; } @media (min-width: 783px) { /* GMS 08 who we work with (design page 08): the reception photo runs to the right edge and over the full height of the section */ .lm-section:has(.lm-splitcols--edge) { overflow: clip; } .lm-splitcols--edge.wp-block-columns { position: relative; } .lm-col--edge { position: static; min-height: 560px; } .lm-col--edge .lm-photo.wp-block-image { position: absolute; top: calc(-1 * var(--lm-section-y)); bottom: calc(-1 * var(--lm-section-y)); left: calc(50% + clamp(2rem, 6vw, 6rem) / 2); right: calc(50% - 50vw); height: auto; margin: 0; } .lm-col--edge .lm-photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; min-height: 0; } /* Advisory 03 (design page 03): cards a little tighter, so the titles break as drawn */ .lm-scard { padding: 1.5rem 1.2rem 1.7rem; } .lm-scard h3 { font-size: clamp(1.1rem, 1.3vw, 1.3rem); } .lm-scard li { font-size: .95rem; line-height: 1.65; } } /* Advisory phone first screen (design page 11): the large logo starts below the top bar instead of behind it */ @media (max-width: 782px) { body.lm-variant-advisory .lm-first--world { align-items: flex-start; padding-top: 7.5rem; } } /* GMS phone (design page 13, third phone): the three levels stack with lines; the Advisory slide rule for ".lm-levels" must not catch them */ @media (max-width: 782px) { .lm-levels.lm-levels--gms { display: grid; grid-template-columns: 1fr; overflow: visible; scroll-snap-type: none; padding-bottom: 0; gap: 0; } .lm-levels--gms .lm-num__item { flex: none; width: auto; } } /* 18.10. (round 4): long German card titles may hyphenate instead of running out of the card */ .lm-scard h3, .lm-five h3, .lm-member h3 { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; } /* 1.0.54 (18.10.2026, Florian's phone check): the hosts photo (Quynh + Jörg, portrait 3:4) was cropped to 4:3 on phones and cut off Jörg's head – third card of the Hospitality start page and „Your Hosts“ on The House & Its Hosts (EN + DE). Phones only, Hospitality only, desktop unchanged. */ @media (max-width: 782px) { body.lm-variant-hospitality .lm-split__media img[src*="6b028c8e2c3767e64156798e39cbfe293a3e8c50"] { aspect-ratio: auto; } /* 1.0.55: Florian's phone check – the text sits over Quynh's face in a 4:3 card; the card with this photo keeps the desktop 3:4 on phones, whole photo visible, text below the faces. Browsers without :has() keep the 4:3 crop. */ body.lm-variant-hospitality .lm-card.wp-block-cover:has(> img[src*="6b028c8e2c3767e64156798e39cbfe293a3e8c50"]) { aspect-ratio: 3 / 4; } } /* ===================================================================================================== 1.0.56 (18.10.2026): Hospitality v2 after Quynh's „Website Design · Hospitality“ (18.10., 21 pages). Six pages: Home · Q.Table · Q.Pâtisserie · The House & Its Hosts · Gallery · Contact. Lato for text, EB Garamond italic for statements, first screens with photo/film, navy tint and the blush frame, white top bar on The House and the Gallery, navy closing screens with the frame. ===================================================================================================== */ body.lm-variant-hospitality .lm-main .lm-section > .lm-hs-inner > *, body.lm-variant-hospitality .lm-hs-inner > * { margin-block-start: 0; } body.lm-variant-hospitality [id] { scroll-margin-top: 90px; } /* text: Lato, 17 px, ink */ body p.lm-hs-text { font-family: var(--wp--preset--font-family--sans); font-size: 1.0625rem; line-height: 1.8; color: var(--wp--preset--color--ink); margin: 0 0 1.1em; letter-spacing: .005em; } body .lm-section--navy p.lm-hs-text { color: #DDE2EA; } body .lm-hs-inner p.lm-eyebrow { margin-bottom: 1.1rem; } body .lm-hs-inner p.lm-statement { margin: 0 0 1.4rem; } .lm-hs-center { text-align: center; max-width: 820px; margin: 0 auto 3rem; } .lm-hs-center > * { margin-block-start: 0; } body .lm-hs-center p.lm-statement { margin-bottom: 0; } /* tracked text link with underline */ .lm-hs-link { font-family: var(--wp--preset--font-family--sans); font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--wp--preset--color--navy); border-bottom: 1px solid var(--wp--preset--color--copper); padding-bottom: 3px; display: inline-block; } .lm-hs-link:hover { color: var(--wp--preset--color--copper); } .lm-section--navy .lm-hs-link, .lm-hs-hero .lm-hs-link { color: var(--wp--preset--color--ivory); border-bottom-color: var(--wp--preset--color--blush); } .lm-section--navy .lm-hs-link:hover, .lm-hs-hero .lm-hs-link:hover { color: var(--wp--preset--color--blush); } body p.lm-hs-link-wrap { margin: 1.4rem 0 0; } body p.lm-hs-link-wrap.lm-hs-center { margin: 2.8rem auto 0; } .lm-hs-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2.4rem; margin-top: 2.2rem; } .lm-hs-actions > * { margin-block-start: 0 !important; margin-top: 0 !important; } /* filled buttons */ .lm-hs-btn.wp-block-buttons { margin: 0; } .lm-hs-btn .wp-block-button__link { font-weight: 700; letter-spacing: 3px; font-size: 11px; padding: 1.05rem 2.2rem; border-radius: 0; } .lm-hs-btn--blush .wp-block-button__link { background: var(--wp--preset--color--copper); border-color: var(--wp--preset--color--copper); color: var(--wp--preset--color--navy); } .lm-hs-btn--blush .wp-block-button__link:hover { background: var(--wp--preset--color--ivory); border-color: var(--wp--preset--color--ivory); color: var(--wp--preset--color--navy); } .lm-hs-btn--navy .wp-block-button__link { background: var(--wp--preset--color--navy); border-color: var(--wp--preset--color--navy); color: #fff; } .lm-hs-btn--navy .wp-block-button__link:hover { background: var(--wp--preset--color--copper); border-color: var(--wp--preset--color--copper); color: var(--wp--preset--color--navy); } .lm-hs-btn { margin-top: 2.2rem; } .lm-hs-actions .lm-hs-btn { margin-top: 0; } /* ---------- top bar ---------- */ body.lm-variant-hospitality .lm-brand__tag--world { color: var(--wp--preset--color--copper); } body.lm-variant-hospitality .lm-nav li.lm-nav__ext a, body.lm-variant-hospitality .lm-nav li.lm-nav__ext .wp-block-navigation-item__label { color: var(--wp--preset--color--slate); } body.lm-variant-hospitality .lm-nav li.lm-nav__btn a { border: 1px solid var(--wp--preset--color--copper); padding: .75rem 1.35rem; color: var(--wp--preset--color--blush); font-weight: 700; letter-spacing: .2em; } body.lm-variant-hospitality .lm-nav li.lm-nav__btn a:hover { background: var(--wp--preset--color--copper); color: var(--wp--preset--color--navy); } body.lm-variant-hospitality .lm-nav .wp-block-navigation__container { gap: 1.6rem; } /* first screens (Home, Q.Table, Q.Pâtisserie) and the navy Contact page: the bar sits inside the blush frame, transparent; after scrolling a fixed navy bar */ body:has(.lm-hs-hero), body:has(.lm-hs-contact) { position: relative; } body:has(.lm-hs-hero) .lm-header, body:has(.lm-hs-contact) .lm-header { position: absolute; top: 0; left: 0; right: 0; background: transparent; padding: calc(var(--lm-frame) + 1.1rem) calc(var(--lm-frame) + clamp(1rem, 2.5vw, 2rem)) 1rem; z-index: 50; } body:has(.lm-hs-hero) .lm-header__inner, body:has(.lm-hs-contact) .lm-header__inner { max-width: none; } body.lm-scrolled:has(.lm-hs-hero) .lm-header, body.lm-scrolled:has(.lm-hs-contact) .lm-header { position: fixed; top: var(--wp-admin--admin-bar--height, 0px); background: var(--wp--preset--color--navy); padding: .85rem var(--lm-gutter); border-bottom: 1px solid var(--lm-hairline-navy); animation: lm-header-in .35s ease-out; } @media (max-width: 600px) { body.lm-scrolled:has(.lm-hs-hero) .lm-header, body.lm-scrolled:has(.lm-hs-contact) .lm-header { top: 0; } } /* white pages (The House & Its Hosts, Gallery, albums): white bar, navy text, stays at the top (design D1/E1) */ body.lm-variant-hospitality:not(:has(.lm-hs-hero)):not(:has(.lm-hs-contact)) header.wp-block-template-part { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 60; } @media (max-width: 600px) { body.lm-variant-hospitality:not(:has(.lm-hs-hero)):not(:has(.lm-hs-contact)) header.wp-block-template-part { top: 0; } } body.lm-variant-hospitality:not(:has(.lm-hs-hero)):not(:has(.lm-hs-contact)) .lm-header { background: #fff; color: var(--wp--preset--color--navy); border-bottom: 1px solid var(--lm-hairline); padding: .95rem var(--lm-gutter); } body.lm-variant-hospitality:not(:has(.lm-hs-hero)):not(:has(.lm-hs-contact)) .lm-header a, body.lm-variant-hospitality:not(:has(.lm-hs-hero)):not(:has(.lm-hs-contact)) .lm-header .wp-block-navigation-item__label, body.lm-variant-hospitality:not(:has(.lm-hs-hero)):not(:has(.lm-hs-contact)) .lm-header .wp-block-navigation__responsive-container-open, body.lm-variant-hospitality:not(:has(.lm-hs-hero)):not(:has(.lm-hs-contact)) .lm-header .lm-brand__name { color: var(--wp--preset--color--navy); } body.lm-variant-hospitality:not(:has(.lm-hs-hero)):not(:has(.lm-hs-contact)) .lm-header .lm-brand__mark { background: var(--wp--preset--color--navy); } body.lm-variant-hospitality:not(:has(.lm-hs-hero)):not(:has(.lm-hs-contact)) .lm-header .lm-nav a:hover { color: var(--wp--preset--color--copper); } body.lm-variant-hospitality:not(:has(.lm-hs-hero)):not(:has(.lm-hs-contact)) .lm-nav li.lm-nav__ext a { color: var(--wp--preset--color--slate); } body.lm-variant-hospitality:not(:has(.lm-hs-hero)):not(:has(.lm-hs-contact)) .lm-nav li.lm-nav__btn a { background: var(--wp--preset--color--navy); border-color: var(--wp--preset--color--navy); color: #fff; } body.lm-variant-hospitality:not(:has(.lm-hs-hero)):not(:has(.lm-hs-contact)) .lm-nav li.lm-nav__btn a:hover { background: var(--wp--preset--color--copper); border-color: var(--wp--preset--color--copper); color: var(--wp--preset--color--navy); } html[lang^="en"] body.lm-variant-hospitality:not(:has(.lm-hs-hero)):not(:has(.lm-hs-contact)) .lm-header .lm-lang li:first-child a, html[lang^="de"] body.lm-variant-hospitality:not(:has(.lm-hs-hero)):not(:has(.lm-hs-contact)) .lm-header .lm-lang li:last-child a { color: var(--wp--preset--color--copper); } body.lm-variant-hospitality:not(:has(.lm-hs-hero)):not(:has(.lm-hs-contact)) .lm-header .lm-lang a { color: var(--wp--preset--color--navy); } /* the phone menu overlay stays navy on every page */ body.lm-variant-hospitality .wp-block-navigation.lm-nav .wp-block-navigation__responsive-container.is-menu-open a { color: var(--wp--preset--color--ivory) !important; } body.lm-variant-hospitality .wp-block-navigation.lm-nav .wp-block-navigation__responsive-container.is-menu-open li.lm-nav__btn a { border: 1px solid var(--wp--preset--color--copper); background: transparent; padding: .7rem 1.4rem; font-family: var(--wp--preset--font-family--sans); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; margin-top: .6rem; } /* ---------- first screen ---------- */ .lm-hs-hero.wp-block-cover { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; padding: 6rem var(--lm-gutter) 7rem; position: relative; } .lm-hs-hero::before { content: ""; position: absolute; inset: var(--lm-frame); border: 1px solid var(--wp--preset--color--blush); z-index: 2; pointer-events: none; } .lm-hs-hero .wp-block-cover__inner-container { max-width: 980px; position: relative; z-index: 2; } .lm-hs-hero .wp-block-cover__inner-container > * { margin-block-start: 0; } body .lm-hs-hero p.lm-hs-hero__eyebrow { color: var(--wp--preset--color--blush); margin-bottom: 1.6rem; } .lm-hs-hero h1.lm-hs-hero__title { color: #fff; font-style: italic; font-weight: 400; font-size: clamp(2.5rem, 4.6vw, 4.25rem); line-height: 1.12; margin: 0 0 1.4rem; letter-spacing: 0; } body .lm-hs-hero p.lm-hs-hero__sub { font-family: var(--wp--preset--font-family--sans); font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.6; color: #E7ECF2; max-width: 44em; margin: 0 auto; } .lm-hs-hero .lm-hs-actions { justify-content: center; margin-top: 2.6rem; } body .lm-hs-hero p.lm-hs-hero__foot { position: absolute; left: 0; right: 0; bottom: calc(var(--lm-frame) + 2.2rem); margin: 0; color: var(--wp--preset--color--blush); font-weight: 400; letter-spacing: .3em; } .lm-hs-hero .wp-block-cover__video-background, .lm-hs-hero .wp-block-cover__image-background { object-position: 50% 50%; } /* ---------- photo + text splits ---------- */ .lm-section:has(> .lm-hs-inner > .lm-hs-split) { padding: 0; } .lm-section:has(> .lm-hs-inner > .lm-hs-split) > .lm-hs-inner { max-width: none; } .lm-hs-split.wp-block-columns { display: grid; gap: 0; margin: 0; align-items: stretch; } .lm-hs-split--right.wp-block-columns { grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); } .lm-hs-split--left.wp-block-columns { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); } .lm-hs-split > .wp-block-column { margin: 0; min-width: 0; } .lm-hs-split__media { position: relative; min-height: 560px; } .lm-hs-split__media .lm-hs-split__img { position: absolute; inset: 0; margin: 0; } .lm-hs-split__media .lm-hs-split__img img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; } .lm-hs-split__text { display: flex; align-items: center; } .lm-hs-split__body { max-width: 600px; width: 100%; padding: calc(var(--lm-section-y) * .9) var(--lm-gutter); box-sizing: border-box; } .lm-hs-split--right .lm-hs-split__body { margin-left: auto; margin-right: clamp(2rem, 6vw, 6rem); } .lm-hs-split--left .lm-hs-split__body { margin-right: auto; margin-left: clamp(2rem, 6vw, 6rem); } .lm-hs-split__body > * { margin-block-start: 0; } .lm-hs-split__body .lm-hairline { margin: 2.4rem 0 2rem; } /* A2 facts */ .lm-hs-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } .lm-hs-facts > *, .lm-hs-fact > * { margin-block-start: 0; } body p.lm-hs-fact__n { font-family: var(--wp--preset--font-family--serif); font-size: clamp(2rem, 2.8vw, 2.6rem); line-height: 1; color: var(--wp--preset--color--navy); margin: 0 0 .9rem; } body .lm-hs-fact p.lm-label { color: #5B6778; font-weight: 400; letter-spacing: 2.5px; line-height: 1.6; margin: 0; } /* A3 / C2 cards */ .lm-hs-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; max-width: 1200px; margin: 0 auto; } .lm-hs-cards > *, .lm-hs-card > * { margin-block-start: 0; } .lm-hs-card .lm-hs-card__img { margin: 0 0 1.6rem; } .lm-hs-card .lm-hs-card__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } body .lm-hs-card p.lm-eyebrow { margin-bottom: .6rem; } .lm-hs-card h3 { font-size: clamp(1.45rem, 1.9vw, 1.85rem); margin: 0 0 .5rem; } .lm-hs-card h3 a { color: inherit; } body .lm-hs-card p.lm-hs-text { margin-bottom: 0; font-size: 1rem; } body .lm-hs-card p.lm-hs-link-wrap { margin-top: 1.1rem; } /* A4 occasions / B4 steps: numbered items with a line on top */ .lm-hs-occ, .lm-hs-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.5rem; margin-top: 1.4rem; } .lm-hs-occ > *, .lm-hs-steps > *, .lm-hs-occ .lm-num__item > *, .lm-hs-steps .lm-num__item > * { margin-block-start: 0; } .lm-hs-occ .lm-num__item { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); border-top: 1px solid var(--lm-hairline); padding: 1.3rem 0 1.4rem; } body .lm-hs-occ p.lm-num__n { font-family: var(--wp--preset--font-family--serif); font-size: .95rem; letter-spacing: 0; color: var(--wp--preset--color--copper); margin: .35rem 0 0; grid-row: 1 / span 2; } .lm-hs-occ h3 { grid-column: 2; font-size: clamp(1.35rem, 1.8vw, 1.7rem); margin: 0 0 .35rem; } body .lm-hs-occ p.lm-hs-text { grid-column: 2; font-size: 1rem; line-height: 1.65; margin: 0; } .lm-hs-steps .lm-num__item { border-top: 1px solid rgba(198, 207, 218, .35); padding: 1.4rem 0 1.6rem; } body .lm-hs-steps p.lm-num__n { font-family: var(--wp--preset--font-family--serif); font-size: 1.6rem; letter-spacing: 0; color: var(--wp--preset--color--copper); margin: 0 0 .9rem; } .lm-hs-steps h3 { color: var(--wp--preset--color--ivory); font-size: clamp(1.25rem, 1.6vw, 1.5rem); margin: 0 0 .4rem; } body .lm-hs-steps p.lm-hs-text { font-size: 1rem; line-height: 1.65; margin: 0; color: #C6CFDA; } /* A5 business list */ .lm-hs-list.wp-block-list { list-style: none; padding: 0; margin: 2rem 0 0; border-top: 1px solid var(--lm-hairline-navy); } .lm-hs-list li { font-family: var(--wp--preset--font-family--serif); font-size: 1.25rem; color: var(--wp--preset--color--ivory); padding: .95rem 0; border-bottom: 1px solid var(--lm-hairline-navy); margin: 0; } .lm-hs-business h2.lm-h-italic { color: var(--wp--preset--color--ivory); font-size: clamp(1.9rem, 3vw, 2.6rem); margin-bottom: 1.4rem; } /* A6 in pictures */ .wp-block-gallery.lm-hs-pics { max-width: 1100px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; } .lm-hs-pics img { aspect-ratio: 4 / 3; } /* A7 / B4 / F closing screens */ .lm-hs-closing-section { padding-bottom: calc(var(--lm-section-y) * .9); } .lm-hs-closing > *, .lm-hs-closing .lm-closing__left > *, .lm-hs-closing .lm-closing__right > * { margin-block-start: 0; } .lm-hs-closing .wp-block-buttons { margin: 0; padding: 0; } body .lm-hs-closing p.lm-hs-quote { font-size: clamp(1.45rem, 2.3vw, 2rem); line-height: 1.4; margin-bottom: 1.8rem; } body .lm-hs-closing .lm-closing__left p.lm-label { color: var(--wp--preset--color--copper); font-weight: 400; } body .lm-hs-closing p.lm-hs-contactline { font-family: var(--wp--preset--font-family--sans); font-size: 1.0625rem; color: #DDE2EA; margin: 2.4rem 0 0; } .lm-hs-closing p.lm-hs-contactline a { color: #DDE2EA; } .lm-hs-closing .lm-closing__left .lm-hs-actions { margin-top: 2.4rem; } /* enquiry form on navy (Fluent Forms + preview): two columns, placeholders, wide fields */ .lm-section--navy .frm-fluent-form .ff-el-group.lm-field--wide { grid-column: 1 / -1; } body.lm-variant-hospitality .lm-form--navy select, body.lm-variant-hospitality .lm-section--navy .lm-form select.ff-el-form-control { appearance: none; -webkit-appearance: none; background-image: none !important; padding-right: 0 !important; } body.lm-variant-hospitality .lm-section--navy .lm-form .ff-el-input--content { margin: 0; } body.lm-variant-hospitality .lm-section--navy .lm-form .ff-el-group { margin-bottom: 1.5rem; } body.lm-variant-hospitality .lm-section--navy .lm-form .ff-el-is-error .text-danger, body.lm-variant-hospitality .lm-section--navy .lm-form .error { color: var(--wp--preset--color--blush); font-family: var(--wp--preset--font-family--sans); font-size: .8rem; } body.lm-variant-hospitality .lm-section--navy .lm-form .ff_submit_btn_wrapper { text-align: left; } /* F contact page: one navy screen with the frame, the bar inside the frame, footer follows inside the frame */ .lm-hs-contact { min-height: 100vh; min-height: 100svh; padding-top: calc(var(--lm-frame) + 9rem); display: flex; align-items: center; } .lm-hs-contact > .lm-hs-inner { width: 100%; } .lm-hs-defs { margin-top: 2.6rem; } .lm-hs-defs > *, .lm-hs-def > * { margin-block-start: 0; } .lm-hs-def { margin-bottom: 1.6rem; } body .lm-hs-def p.lm-label { color: var(--wp--preset--color--copper); margin: 0 0 .5rem; } body .lm-hs-def p.lm-hs-text { font-size: 1.125rem; color: #E7ECF2; margin: 0; } .lm-hs-def a { color: #E7ECF2; } /* ---------- Q.Table ---------- */ .lm-hs-table .lm-twocol--top { max-width: none; margin-bottom: 3rem; } .lm-hs-dishes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem; } .lm-hs-dishes > *, .lm-hs-dish > * { margin-block-start: 0; } .lm-hs-dish .lm-hs-dish__img { margin: 0 0 .8rem; } .lm-hs-dish .lm-hs-dish__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } body p.lm-hs-caption { font-family: var(--wp--preset--font-family--serif); font-style: italic; font-size: 1.05rem; color: #5B6778; margin: 0; } .lm-hs-table .lm-hairline { margin: 3.5rem 0 1.6rem; } .lm-hs-menuline { display: flex; justify-content: space-between; align-items: baseline; gap: 2rem; flex-wrap: wrap; } .lm-hs-menuline > * { margin-block-start: 0; } body p.lm-hs-menuline__text { font-family: var(--wp--preset--font-family--serif); font-style: italic; font-size: clamp(1.25rem, 1.8vw, 1.6rem); color: var(--wp--preset--color--navy); margin: 0; } body .lm-hs-menuline p.lm-hs-link-wrap { margin: 0; } .lm-hs-rows { margin-top: 1.8rem; border-top: 1px solid var(--lm-hairline); } .lm-hs-rows > *, .lm-hs-row > * { margin-block-start: 0; } .lm-hs-row { padding: 1.15rem 0 1.25rem; border-bottom: 1px solid var(--lm-hairline); } .lm-hs-row h3 { font-size: clamp(1.3rem, 1.7vw, 1.6rem); margin: 0 0 .3rem; } body .lm-hs-row p.lm-hs-text { font-size: 1rem; line-height: 1.6; margin: 0; } .lm-hs-collage { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 56fr 44fr; gap: .6rem; } .lm-hs-collage > * { margin: 0 !important; min-height: 0; } .lm-hs-collage img { width: 100%; height: 100%; object-fit: cover; } .lm-hs-collage .lm-hs-collage__a { grid-column: 1 / -1; } .lm-hs-split--collage .lm-hs-split__media { min-height: 700px; } /* ---------- Q.Pâtisserie ---------- */ .lm-hs-notify { margin-top: .4rem; } .lm-hs-notify__line { font-family: var(--wp--preset--font-family--serif); font-style: italic; font-size: clamp(1.25rem, 1.8vw, 1.55rem); color: var(--wp--preset--color--navy); margin: 0 0 1.2rem; } .lm-hs-notify__form { display: flex; align-items: center; gap: 1.5rem; border-bottom: 1px solid var(--wp--preset--color--navy); padding-bottom: .7rem; } .lm-hs-notify__form input[type="email"] { flex: 1; min-width: 0; border: 0; background: transparent; font-family: var(--wp--preset--font-family--serif); font-style: italic; font-size: 1.1rem; color: var(--wp--preset--color--ink); padding: .3rem 0; } .lm-hs-notify__form input::placeholder { color: var(--wp--preset--color--slate); font-style: italic; } .lm-hs-notify__form button { background: none; border: 0; cursor: pointer; font-family: var(--wp--preset--font-family--sans); font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--wp--preset--color--navy); padding: .4rem 0; white-space: nowrap; } .lm-hs-notify__form button::after { content: " →"; } .lm-hs-notify__form button:hover { color: var(--wp--preset--color--copper); } /* ---------- The House & Its Hosts ---------- */ .lm-hs-filmwrap { margin: 0; } .lm-hs-filmwrap > * { margin-block-start: 0; } .lm-hs-band.wp-block-cover { min-height: 62vh; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; margin: 0; } .lm-hs-band .wp-block-cover__inner-container > * { margin-block-start: 0; } body p.lm-hs-play-wrap { margin: 0; } .lm-hs-play { display: inline-flex; flex-direction: column; align-items: center; gap: 1.6rem; color: #fff; font-family: var(--wp--preset--font-family--serif); font-style: italic; font-size: clamp(1.15rem, 1.6vw, 1.4rem); } .lm-hs-play__icon { width: 72px; height: 72px; border: 1px solid rgba(255,255,255,.85); border-radius: 50%; position: relative; background: rgba(29, 42, 58, .25); transition: background .25s ease; } .lm-hs-play__icon::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-40%, -50%); border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff; } .lm-hs-play:hover .lm-hs-play__icon { background: rgba(255,255,255,.18); } .lm-hs-film.wp-block-video { display: none; margin: 0; background: #000; } .lm-hs-film video { width: 100%; max-height: 82vh; display: block; margin: 0 auto; } .lm-hs-filmwrap.is-playing .lm-hs-band { display: none; } .lm-hs-filmwrap.is-playing .lm-hs-film { display: block; } .lm-hs-story.wp-block-columns { gap: clamp(2.5rem, 7vw, 7rem); max-width: 1200px; margin: 0 auto; align-items: start; } .lm-hs-story__col > *, .lm-hs-story__head > *, .lm-hs-story__text > * { margin-block-start: 0; } body .lm-hs-story p.lm-hs-press-label { margin: 2.6rem 0 .8rem; } body p.lm-hs-press { font-family: var(--wp--preset--font-family--sans); font-size: 1rem; line-height: 1.7; margin: 0 0 .25rem; } .lm-hs-press a { color: var(--wp--preset--color--navy); } .lm-hs-press a:hover { color: var(--wp--preset--color--copper); } body .lm-hs-story__text p.lm-hs-text { font-size: 1.125rem; line-height: 1.85; margin-bottom: 1.3em; } .lm-hs-split--hosts .lm-hs-split__media { min-height: 760px; } .lm-hs-host { margin-top: 2.2rem; } .lm-hs-host > * { margin-block-start: 0; } .lm-hs-host h3 { font-size: clamp(1.6rem, 2.2vw, 2rem); margin: 0 0 .3rem; } body .lm-hs-host p.lm-label { margin: 0 0 .8rem; } body .lm-hs-host p.lm-hs-text { margin: 0; } .lm-hs-hosts .lm-hs-split__body .lm-hairline { margin: 2.6rem 0 0; } /* ---------- Gallery ---------- */ .lm-albums > * { margin-block-start: 0; } .lm-albums__themes { display: flex; justify-content: center; flex-wrap: wrap; gap: 2rem 3.2rem; margin: 0 auto 3.5rem; } .lm-albums__theme { display: flex; flex-direction: column; align-items: center; gap: .9rem; color: var(--wp--preset--color--navy); } .lm-albums__circle { width: 150px; height: 150px; border-radius: 50%; border: 1px solid var(--wp--preset--color--copper); padding: 5px; box-sizing: border-box; display: block; transition: border-color .25s ease, box-shadow .25s ease; } .lm-albums__circle img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .lm-albums__theme:hover .lm-albums__circle, .lm-albums__theme.is-active .lm-albums__circle { border-color: var(--wp--preset--color--navy); box-shadow: 0 0 0 1px var(--wp--preset--color--navy); } .lm-albums__name { font-family: var(--wp--preset--font-family--sans); font-size: .95rem; letter-spacing: .02em; } .lm-albums__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.6rem 2.2rem; max-width: 1200px; margin: 0 auto; } .lm-albums__card { margin: 0; } .lm-albums__card a { color: inherit; display: block; } .lm-albums__card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: opacity .3s ease; } .lm-albums__card a:hover img { opacity: .88; } .lm-albums__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: 1.1rem; } .lm-albums__title { font-family: var(--wp--preset--font-family--serif); font-size: clamp(1.35rem, 1.8vw, 1.7rem); color: var(--wp--preset--color--navy); } .lm-albums__label { font-family: var(--wp--preset--font-family--sans); font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--wp--preset--color--copper); white-space: nowrap; } .lm-albums.is-filtered .lm-albums__card:not(.is-match) { display: none; } .lm-albums__empty { text-align: center; font-family: var(--wp--preset--font-family--serif); font-style: italic; color: var(--wp--preset--color--slate); } /* an opened album */ .lm-album > * { margin-block-start: 0; } .lm-album__nav { display: flex; justify-content: space-between; align-items: baseline; gap: 2rem; margin-bottom: 2.2rem; } .lm-album__nav > * { margin: 0; } .lm-album__nav .lm-hs-link--back { color: var(--wp--preset--color--slate); border-bottom-color: transparent; font-weight: 400; } .lm-album__nav .lm-hs-link--back:hover { color: var(--wp--preset--color--navy); } h1.lm-album__title, .lm-album h1 { font-style: italic; font-weight: 400; font-size: clamp(2rem, 3.4vw, 3rem); margin: 0 0 .6rem; } body .lm-album p.lm-album__line, .lm-album .wp-block-post-excerpt__excerpt { font-family: var(--wp--preset--font-family--sans); font-size: 1.125rem; color: var(--wp--preset--color--ink); margin: 0 0 3rem; } .wp-block-gallery.lm-album__gallery, .lm-album .wp-block-gallery { display: block !important; column-count: 3; column-gap: 1rem; max-width: 1200px; margin: 0 auto; } .lm-album .wp-block-gallery > figure, .lm-album .wp-block-gallery > .wp-block-image { break-inside: avoid; margin: 0 0 1rem !important; width: auto !important; } .lm-album .wp-block-gallery img { aspect-ratio: auto; width: 100%; height: auto; cursor: zoom-in; } .lm-lightbox { position: fixed; inset: 0; z-index: 100000; background: rgba(29, 42, 58, .96); display: none; align-items: center; justify-content: center; } .lm-lightbox.is-open { display: flex; } .lm-lightbox img { max-width: 92vw; max-height: 88vh; object-fit: contain; box-shadow: 0 20px 60px rgba(0,0,0,.4); } .lm-lightbox button { position: absolute; background: none; border: 0; color: #fff; cursor: pointer; font-family: var(--wp--preset--font-family--serif); font-size: 2.6rem; line-height: 1; padding: 1rem; opacity: .85; } .lm-lightbox button:hover { opacity: 1; } .lm-lightbox__close { top: 1rem; right: 1.2rem; } .lm-lightbox__prev { left: .6rem; top: 50%; transform: translateY(-50%); } .lm-lightbox__next { right: .6rem; top: 50%; transform: translateY(-50%); } .lm-lightbox__count { position: absolute; bottom: 1.2rem; left: 0; right: 0; text-align: center; font-family: var(--wp--preset--font-family--sans); font-size: 11px; letter-spacing: 3px; color: #C6CFDA; } /* ---------- phone / tablet ---------- */ @media (max-width: 1100px) { .lm-hs-dishes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lm-albums__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lm-albums__circle { width: 120px; height: 120px; } } @media (max-width: 782px) { .lm-hs-hero.wp-block-cover { padding: 6rem 1.5rem 6.5rem; } .lm-hs-hero h1.lm-hs-hero__title { font-size: 2.35rem; } body .lm-hs-hero p.lm-hs-hero__eyebrow { letter-spacing: 3px; } body .lm-hs-hero p.lm-hs-hero__foot { display: none; } /* design F · phone: first screen without the bottom line */ .lm-hs-split.wp-block-columns, .lm-hs-split--right.wp-block-columns, .lm-hs-split--left.wp-block-columns { grid-template-columns: 1fr; } .lm-hs-split__media { min-height: 0; order: -1; } .lm-hs-split__media .lm-hs-split__img { position: static; } .lm-hs-split__media .lm-hs-split__img img { aspect-ratio: 4 / 3; height: auto; } .lm-hs-split__media .lm-hs-split__img--portrait img { aspect-ratio: 4 / 5; } .lm-hs-split--hosts .lm-hs-split__media, .lm-hs-split--collage .lm-hs-split__media { min-height: 0; } .lm-hs-split--collage .lm-hs-split__media { aspect-ratio: 4 / 3; } .lm-hs-split__body, .lm-hs-split--right .lm-hs-split__body, .lm-hs-split--left .lm-hs-split__body { margin: 0; max-width: none; padding: 3rem 1.5rem 3.5rem; } .lm-hs-cards { grid-template-columns: 1fr; gap: 2.4rem; } .lm-hs-occ, .lm-hs-steps { grid-template-columns: 1fr; } .lm-hs-occ .lm-num__item { padding: 1rem 0 1.05rem; } body .lm-hs-occ p.lm-hs-text { display: none; } /* design F · phone: the six occasions as a list of titles */ .lm-hs-occ .lm-num__item:last-child { border-bottom: 1px solid var(--lm-hairline); } .wp-block-gallery.lm-hs-pics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; } .lm-hs-story.wp-block-columns { flex-direction: column; gap: 2rem; } .lm-hs-band.wp-block-cover { min-height: 52vh; } .lm-hs-contact { padding-top: calc(var(--lm-frame) + 6.5rem); display: block; } .lm-albums__themes { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; gap: 1.4rem; padding: 0 0 .6rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .lm-albums__themes::-webkit-scrollbar { display: none; } .lm-albums__theme { flex: 0 0 auto; } .lm-albums__circle { width: 92px; height: 92px; padding: 3px; } .lm-albums__name { font-size: .8rem; } .lm-albums__grid { grid-template-columns: 1fr; gap: 2rem; } .wp-block-gallery.lm-album__gallery, .lm-album .wp-block-gallery { column-count: 2; column-gap: .6rem; } .lm-album .wp-block-gallery > figure, .lm-album .wp-block-gallery > .wp-block-image { margin-bottom: .6rem !important; } .lm-album__nav { flex-direction: column; gap: 1rem; } .lm-hs-menuline { flex-direction: column; align-items: flex-start; gap: 1.2rem; } .lm-hs-notify__form { flex-wrap: wrap; } .lm-hs-actions { gap: 1.2rem 1.8rem; } } /* 1.0.56b (18.10.2026, preview round 1): top bar fits at 1440 px, hero bottom line sits at the bottom, button text on the white bar, gallery circles in one row, phone menu without overlap */ body.lm-variant-hospitality .lm-header__inner { gap: 1.5rem; } body.lm-variant-hospitality .lm-nav { overflow: visible; } body.lm-variant-hospitality .lm-nav .wp-block-navigation__container { gap: 1.3rem; } body.lm-variant-hospitality .lm-nav .wp-block-navigation-item__label, body.lm-variant-hospitality .lm-nav a { font-size: 10.5px; letter-spacing: 1.6px; } body.lm-variant-hospitality .lm-nav li.lm-nav__btn a { padding: .7rem 1.15rem; letter-spacing: 1.8px; } body.lm-variant-hospitality .lm-lang .wp-block-navigation__container { flex-wrap: nowrap; gap: .7rem; } body.lm-variant-hospitality .lm-lang a { font-size: 10.5px; letter-spacing: 1.6px; } @media (max-width: 1500px) { body.lm-variant-hospitality .lm-brand__text { display: none; } } @media (max-width: 1280px) and (min-width: 783px) { body.lm-variant-hospitality .lm-nav .wp-block-navigation__container { gap: .9rem; } body.lm-variant-hospitality .lm-nav li.lm-nav__btn a { padding: .6rem .8rem; } } .lm-hs-hero .wp-block-cover__inner-container { position: static; } .lm-hs-hero .wp-block-cover__inner-container > * { position: relative; z-index: 2; } body.lm-variant-hospitality:not(:has(.lm-hs-hero)):not(:has(.lm-hs-contact)) .lm-header .lm-nav li.lm-nav__btn a, body.lm-variant-hospitality:not(:has(.lm-hs-hero)):not(:has(.lm-hs-contact)) .lm-header .lm-nav li.lm-nav__btn .wp-block-navigation-item__label { color: #fff; } body.lm-variant-hospitality:not(:has(.lm-hs-hero)):not(:has(.lm-hs-contact)) .lm-header .lm-nav li.lm-nav__btn a:hover .wp-block-navigation-item__label { color: var(--wp--preset--color--navy); } .lm-hs-gallery > .lm-hs-inner { max-width: 1240px; } .lm-albums__themes { gap: 1.8rem 2.6rem; } .lm-albums__circle { width: 136px; height: 136px; } .lm-albums__title { font-size: clamp(1.2rem, 1.5vw, 1.45rem); } body.lm-variant-hospitality .wp-block-navigation.lm-nav .wp-block-navigation__responsive-container.is-menu-open { padding: 4.5rem var(--lm-gutter) 2.5rem; } body.lm-variant-hospitality .wp-block-navigation.lm-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: .55rem; } body.lm-variant-hospitality .wp-block-navigation.lm-nav .wp-block-navigation__responsive-container.is-menu-open a { font-size: 1.45rem; } body.lm-variant-hospitality .wp-block-navigation.lm-nav .wp-block-navigation__responsive-container.is-menu-open li.lm-nav__ext a { font-family: var(--wp--preset--font-family--sans); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--wp--preset--color--slate) !important; margin-top: .6rem; } body.lm-variant-hospitality .wp-block-navigation.lm-nav .wp-block-navigation__responsive-container.is-menu-open li.lm-nav__btn a { font-size: 11px; } body.lm-variant-hospitality .wp-block-navigation.lm-nav .wp-block-navigation__responsive-container.is-menu-open .lm-menu-extra { position: static; margin-top: 2rem; padding: 0; } /* 1.0.56c: phone menu of Hospitality – eight entries fit on one screen; the label span inherits the small sizes of the two special entries */ body.lm-variant-hospitality .wp-block-navigation.lm-nav .wp-block-navigation__responsive-container.is-menu-open a, body.lm-variant-hospitality .wp-block-navigation.lm-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__label { font-size: 1.35rem; } body.lm-variant-hospitality .wp-block-navigation.lm-nav .wp-block-navigation__responsive-container.is-menu-open a { padding: .15rem 0; } body.lm-variant-hospitality .wp-block-navigation.lm-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: .35rem; } body.lm-variant-hospitality .wp-block-navigation.lm-nav .wp-block-navigation__responsive-container.is-menu-open li.lm-nav__ext a, body.lm-variant-hospitality .wp-block-navigation.lm-nav .wp-block-navigation__responsive-container.is-menu-open li.lm-nav__ext .wp-block-navigation-item__label, body.lm-variant-hospitality .wp-block-navigation.lm-nav .wp-block-navigation__responsive-container.is-menu-open li.lm-nav__btn a, body.lm-variant-hospitality .wp-block-navigation.lm-nav .wp-block-navigation__responsive-container.is-menu-open li.lm-nav__btn .wp-block-navigation-item__label { font-family: var(--wp--preset--font-family--sans); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; } body.lm-variant-hospitality .wp-block-navigation.lm-nav .wp-block-navigation__responsive-container.is-menu-open li.lm-nav__ext a { margin-top: .8rem; } body.lm-variant-hospitality .wp-block-navigation.lm-nav .wp-block-navigation__responsive-container.is-menu-open li.lm-nav__btn a { margin-top: .4rem; padding: .75rem 1.4rem; } body.lm-variant-hospitality .wp-block-navigation.lm-nav .wp-block-navigation__responsive-container.is-menu-open .lm-menu-extra { margin-top: 1.4rem; } /* tablets (783–1100 px): eight entries do not fit beside the pagoda → phone menu (menu button) like below 783 px */ @media (min-width: 783px) and (max-width: 1100px) { body.lm-variant-hospitality .lm-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; } body.lm-variant-hospitality .lm-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none !important; } body.lm-variant-hospitality .lm-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { display: flex !important; } body.lm-variant-hospitality .lm-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { flex-direction: column; } body.lm-variant-hospitality .lm-header__right { order: 2; justify-self: end; margin-left: auto; } body.lm-variant-hospitality .lm-nav { order: 3; justify-content: flex-end; } } /* 1.0.57 (19.10.2026, live round 1 of Hospitality v2): Fluent Forms renders the labels although the form is set to "hide label" (the theme rule .lm-form label wins) → hidden; consent sentence on navy was invisible (Fluent's own colour); album gallery = core flex rows, 3 per row, 4:3 (the column layout stretched the images) */ body.lm-variant-hospitality .ff-el-form-hide_label .ff-el-input--label { display: none !important; } body.lm-variant-hospitality .lm-section--navy .lm-form .ff_t_c, body.lm-variant-hospitality .lm-section--navy .lm-form .ff-el-tc label, body.lm-variant-hospitality .lm-section--navy .lm-form .ff_tc_label { color: #C6CFDA !important; font-family: var(--wp--preset--font-family--serif); font-style: italic; font-size: .92rem; line-height: 1.5; letter-spacing: 0; text-transform: none; } body.lm-variant-hospitality .lm-section--navy .lm-form .ff-el-tc label { display: flex; gap: .6rem; align-items: flex-start; } body.lm-variant-hospitality .lm-section--navy .lm-form .ff_t_c a { color: var(--wp--preset--color--ivory); text-decoration: underline; text-underline-offset: 3px; } body.lm-variant-hospitality .lm-section--navy .lm-form .ff-el-tc .ff_tc_checkbox { flex: none; margin-top: .2rem; } body.lm-variant-hospitality .lm-section--navy .lm-form .ff-el-group.ff_submit_btn_wrapper { text-align: left; } body.lm-variant-hospitality .lm-section--navy .lm-form .ff-message-success { color: var(--wp--preset--color--ivory); font-family: var(--wp--preset--font-family--serif); font-size: 1.1rem; border: 1px solid var(--wp--preset--color--blush); padding: 1.2rem 1.4rem; background: transparent; } .lm-album .wp-block-gallery.has-nested-images, .wp-block-gallery.lm-album__gallery { display: flex !important; flex-wrap: wrap; gap: 1rem; column-count: auto; align-items: stretch; } .lm-album .wp-block-gallery.has-nested-images > figure.wp-block-image { width: calc(33.333% - .67rem) !important; margin: 0 !important; flex: none; } .lm-album .wp-block-gallery.has-nested-images > figure.wp-block-image img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; } @media (max-width: 782px) { .lm-album .wp-block-gallery.has-nested-images, .wp-block-gallery.lm-album__gallery { gap: .6rem; } .lm-album .wp-block-gallery.has-nested-images > figure.wp-block-image { width: calc(50% - .3rem) !important; } } /* ===================================================================================================== 1.0.58 (19.10.2026): Journeys as one long page after Quynh's design "Website Design - 2026-10-18 - Journeys" (10 pages). Night #121A26, Sand #D8B98F, Ivory #F7F2EA, Text #4A5466. Night and full-screen landscapes alternate with ivory reading pages; Garamond italic statements, Lato text; the bar sits inside the frame on the first screen, after scrolling a fixed night bar. ===================================================================================================== */ body.lm-variant-journeys { --jy-night: #121A26; --jy-sand: #D8B98F; --jy-ivory: #F7F2EA; --jy-text: #4A5466; --jy-line: rgba(74, 84, 102, .22); --jy-line-night: rgba(216, 185, 143, .32); } body.lm-variant-journeys .lm-main .lm-section > .lm-jy-inner > *, body.lm-variant-journeys .lm-jy-inner > * { margin-block-start: 0; } body.lm-variant-journeys [id] { scroll-margin-top: 90px; } body.lm-variant-journeys .lm-main p.lm-eyebrow, body.lm-variant-journeys .lm-main p.lm-label { color: var(--jy-sand); } body.lm-variant-journeys .lm-main p.lm-statement { color: var(--jy-night); } body p.lm-jy-text { font-family: var(--wp--preset--font-family--sans); font-size: 1.0625rem; line-height: 1.85; color: var(--jy-text); margin: 0 0 1.1em; } .lm-jy-ivory { background: var(--jy-ivory); } .lm-jy-night { background: var(--jy-night); color: var(--jy-ivory); } body.lm-variant-journeys .lm-jy-night p.lm-statement, .lm-jy-night h2, .lm-jy-night h3 { color: var(--jy-ivory); } body .lm-jy-night p.lm-jy-text { color: #C9CFD8; } .lm-jy-night .lm-hairline { border-top-color: var(--jy-line-night); } .lm-jy-ivory .lm-hairline { border-top-color: var(--jy-line); } /* top bar */ body.lm-variant-journeys .lm-brand__tag--world { color: var(--jy-sand); } body.lm-variant-journeys .lm-nav li.lm-nav__ext a, body.lm-variant-journeys .lm-nav li.lm-nav__ext .wp-block-navigation-item__label { color: #9AA3B2; } body.lm-variant-journeys .lm-nav li.lm-nav__btn a { background: var(--jy-sand); border: 1px solid var(--jy-sand); color: var(--jy-night); padding: .8rem 1.5rem; font-weight: 700; letter-spacing: 2px; } body.lm-variant-journeys .lm-nav li.lm-nav__btn a .wp-block-navigation-item__label { color: var(--jy-night); } body.lm-variant-journeys .lm-nav li.lm-nav__btn a:hover { background: var(--jy-ivory); border-color: var(--jy-ivory); } body.lm-variant-journeys .lm-nav .wp-block-navigation__container { gap: 1.6rem; } body.lm-variant-journeys .lm-nav .wp-block-navigation-item__label, body.lm-variant-journeys .lm-nav a { font-size: 10.5px; letter-spacing: 2.2px; } body.lm-variant-journeys .lm-lang .wp-block-navigation__container { flex-wrap: nowrap; gap: .7rem; } body.lm-variant-journeys .lm-header__inner { gap: 1.5rem; } @media (max-width: 1240px) { body.lm-variant-journeys .lm-brand__text { display: none; } } body.lm-variant-journeys.lm-scrolled:has(.lm-hs-hero) .lm-header { background: var(--jy-night); border-bottom-color: var(--jy-line-night); } body.lm-variant-journeys .wp-block-navigation.lm-nav .wp-block-navigation__responsive-container.is-menu-open { background-color: var(--jy-night) !important; } body.lm-variant-journeys .wp-block-navigation.lm-nav .wp-block-navigation__responsive-container.is-menu-open li.lm-nav__btn a { background: var(--jy-sand); color: var(--jy-night) !important; font-family: var(--wp--preset--font-family--sans); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; padding: .75rem 1.4rem; margin-top: .6rem; } body.lm-variant-journeys .wp-block-navigation.lm-nav .wp-block-navigation__responsive-container.is-menu-open li.lm-nav__btn a .wp-block-navigation-item__label { color: var(--jy-night) !important; font-family: var(--wp--preset--font-family--sans); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; } body.lm-variant-journeys .wp-block-navigation.lm-nav .wp-block-navigation__responsive-container.is-menu-open li.lm-nav__ext a, body.lm-variant-journeys .wp-block-navigation.lm-nav .wp-block-navigation__responsive-container.is-menu-open li.lm-nav__ext .wp-block-navigation-item__label { font-family: var(--wp--preset--font-family--sans); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: #9AA3B2 !important; } body.lm-variant-journeys .wp-block-navigation.lm-nav .wp-block-navigation__responsive-container.is-menu-open li.lm-nav__ext a { margin-top: .8rem; } body.lm-variant-journeys .wp-block-navigation.lm-nav .wp-block-navigation__responsive-container.is-menu-open .lm-menu-extra { position: static; margin-top: 1.6rem; padding: 0; } @media (min-width: 783px) and (max-width: 1100px) { body.lm-variant-journeys .lm-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; } body.lm-variant-journeys .lm-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none !important; } body.lm-variant-journeys .lm-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { display: flex !important; } body.lm-variant-journeys .lm-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { flex-direction: column; } body.lm-variant-journeys .lm-header__right { order: 2; justify-self: end; margin-left: auto; } body.lm-variant-journeys .lm-nav { order: 3; justify-content: flex-end; } } /* 01 first screen: frame in sand, label sand, JOURNEYS wide-tracked Garamond, italic line, sand rule, italic statement, bottom line */ .lm-jy-hero::before { border-color: rgba(216, 185, 143, .55); } body .lm-jy-hero p.lm-jy-hero__label { color: var(--jy-sand); letter-spacing: .34em; margin-bottom: 1.6rem; } .lm-jy-hero h1.lm-jy-hero__title { font-family: var(--wp--preset--font-family--serif); font-style: normal; font-weight: 400; color: #fff; font-size: clamp(3rem, 7.6vw, 6.8rem); letter-spacing: .32em; text-transform: uppercase; line-height: 1; margin: 0 0 1.6rem; padding-left: .32em; } body .lm-jy-hero p.lm-jy-hero__sub { font-family: var(--wp--preset--font-family--serif); font-style: italic; font-size: clamp(1.25rem, 2vw, 1.75rem); color: #E7E2D8; margin: 0; } .lm-jy-hero .lm-hairline.lm-jy-rule, .lm-jy-pause .lm-hairline.lm-jy-rule { width: 64px; margin: 1.9rem auto; border-top: 1px solid var(--jy-sand); } body .lm-jy-hero p.lm-jy-hero__statement { font-family: var(--wp--preset--font-family--serif); font-style: italic; font-size: clamp(1.1rem, 1.6vw, 1.4rem); color: #E7E2D8; margin: 0; } body .lm-jy-hero p.lm-jy-hero__foot { position: absolute; left: 0; right: 0; bottom: calc(var(--lm-frame) + 2.2rem); margin: 0; color: var(--jy-sand); font-weight: 400; letter-spacing: .34em; } /* two-column heads (02, 03, 06) */ .lm-jy-twocol { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 7vw, 8rem); align-items: start; margin-bottom: 3.5rem; } .lm-jy-twocol > *, .lm-jy-twocol__a > *, .lm-jy-twocol__b > * { margin-block-start: 0; } body .lm-jy-twocol p.lm-statement { margin: 0; font-size: clamp(1.9rem, 3.2vw, 2.9rem); line-height: 1.2; } body .lm-jy-twocol p.lm-eyebrow { margin-bottom: 1.4rem; letter-spacing: 3.5px; } .lm-jy-twocol__b { padding-top: 3.2rem; } /* 02 facts: four columns with vertical lines */ .lm-jy-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--jy-text); margin-top: 5rem; padding-top: 2.4rem; } .lm-jy-facts > *, .lm-jy-fact > * { margin-block-start: 0; } .lm-jy-fact { padding: 0 2rem 0 0; border-right: 1px solid var(--jy-line); } .lm-jy-fact + .lm-jy-fact { padding-left: 2rem; } .lm-jy-fact:last-child { border-right: 0; padding-right: 0; } body p.lm-jy-fact__n { font-family: var(--wp--preset--font-family--serif); font-size: clamp(2.2rem, 3.4vw, 3.2rem); line-height: 1; color: var(--jy-night); margin: 0 0 1.1rem; } body .lm-jy-fact p.lm-label { color: var(--jy-text); font-weight: 400; letter-spacing: 2.5px; line-height: 1.7; margin: 0; } /* 03 steps I-IV and 06 standard I-VI: line on top, roman numeral in sand */ .lm-jy-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem; } .lm-jy-standard { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem 4rem; } .lm-jy-steps > *, .lm-jy-standard > *, .lm-jy-steps .lm-num__item > *, .lm-jy-standard .lm-num__item > * { margin-block-start: 0; } .lm-jy-steps .lm-num__item { border-top: 1px solid var(--jy-text); padding-top: 2rem; } .lm-jy-standard .lm-num__item { border-top: 1px solid var(--jy-line-night); padding-top: 1.6rem; } body .lm-jy-steps p.lm-jy-roman { font-family: var(--wp--preset--font-family--serif); font-size: 1.9rem; letter-spacing: 0; color: var(--jy-sand); margin: 0 0 1.2rem; line-height: 1; } body .lm-jy-standard p.lm-jy-roman { font-family: var(--wp--preset--font-family--sans); font-size: 10px; letter-spacing: 3px; color: var(--jy-sand); margin: 0 0 1.1rem; } .lm-jy-steps h3 { font-size: clamp(1.35rem, 1.8vw, 1.7rem); margin: 0 0 .7rem; color: var(--jy-night); } .lm-jy-standard h3 { font-size: clamp(1.4rem, 1.9vw, 1.8rem); margin: 0 0 .7rem; color: var(--jy-ivory); } body .lm-jy-steps p.lm-jy-text, body .lm-jy-standard p.lm-jy-text { font-size: 1rem; line-height: 1.75; margin: 0; } .lm-jy-journey .lm-hairline { margin: 4rem 0 1.6rem; } .lm-jy-noteline { display: flex; justify-content: space-between; align-items: baseline; gap: 2rem; flex-wrap: wrap; } .lm-jy-noteline > * { margin: 0 !important; } body .lm-jy-noteline p.lm-note-line { color: var(--jy-night); font-size: 1.15rem; } .lm-jy-noteline .lm-hs-link { color: var(--jy-night); border-bottom-color: var(--jy-sand); } .lm-jy-noteline .lm-hs-link:hover { color: var(--jy-sand); } /* 04 regions: two full-height photo chapters side by side, label + "One standard." centred on top */ .lm-jy-regions-section { padding: 0; position: relative; } .lm-jy-regions-section > .lm-jy-inner { max-width: none; } .lm-jy-regions__head { position: absolute; top: 3.4rem; left: 0; right: 0; text-align: center; z-index: 3; pointer-events: none; } .lm-jy-regions__head > * { margin-block-start: 0; } body .lm-jy-regions__head p.lm-eyebrow { margin-bottom: .6rem; } body .lm-jy-regions__head p.lm-statement { color: #fff; font-size: clamp(1.4rem, 2.2vw, 2rem); margin: 0; } .lm-jy-regions { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; min-height: 100svh; } .lm-jy-regions > * { margin-block-start: 0; } .lm-jy-region { position: relative; display: flex; align-items: flex-end; min-height: 100vh; min-height: 100svh; overflow: hidden; } .lm-jy-region .lm-jy-region__img { position: absolute; inset: 0; margin: 0; } .lm-jy-region .lm-jy-region__img img { width: 100%; height: 100%; object-fit: cover; } .lm-jy-region::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 26, 38, .15) 0%, rgba(18, 26, 38, .1) 45%, rgba(18, 26, 38, .82) 100%); z-index: 1; } .lm-jy-region__body { position: relative; z-index: 2; padding: 0 clamp(2rem, 6vw, 5.5rem) clamp(2.5rem, 5vw, 4rem); width: 100%; box-sizing: border-box; } .lm-jy-region__body > * { margin-block-start: 0; } body .lm-jy-region__body p.lm-eyebrow { color: var(--jy-sand); margin-bottom: 1rem; letter-spacing: 4px; } .lm-jy-region h2.lm-jy-region__title { color: #fff; font-style: normal; font-weight: 400; font-size: clamp(2.4rem, 4.2vw, 3.8rem); line-height: 1.05; margin: 0 0 1.1rem; } body p.lm-jy-region__line { font-family: var(--wp--preset--font-family--serif); font-style: italic; font-size: clamp(1.05rem, 1.35vw, 1.25rem); line-height: 1.55; color: #E7E2D8; margin: 0 0 1.4rem; max-width: 36em; } .lm-jy-region__body .lm-hairline { margin: 0 0 1.1rem; border-top-color: rgba(216, 185, 143, .4); } .lm-jy-region__foot { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .lm-jy-region__foot > * { margin: 0 !important; } body .lm-jy-region__foot p.lm-label { color: #E7E2D8; font-weight: 400; letter-spacing: 3px; } .lm-jy-sand { color: var(--jy-sand); } /* 05 statement */ .lm-jy-pause.wp-block-cover { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center; text-align: center; position: relative; color: #fff; } .lm-jy-pause::before { content: ""; position: absolute; inset: var(--lm-frame); border: 1px solid rgba(216, 185, 143, .55); z-index: 2; pointer-events: none; } .lm-jy-pause .wp-block-cover__inner-container { position: relative; z-index: 2; max-width: 900px; } .lm-jy-pause .wp-block-cover__inner-container > * { margin-block-start: 0; } body .lm-jy-pause p.lm-jy-pause__statement { color: #fff; font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1.2; margin: 0; } body .lm-jy-pause p.lm-jy-pause__text { font-family: var(--wp--preset--font-family--sans); font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.8; color: #E7E2D8; margin: 0; } /* 06 framed night section */ .lm-jy-framed { position: relative; padding: calc(var(--lm-section-y) + var(--lm-frame)) calc(var(--lm-gutter) + var(--lm-frame)); } .lm-jy-framed::before { content: ""; position: absolute; inset: var(--lm-frame); border: 1px solid rgba(216, 185, 143, .55); pointer-events: none; } /* 07 for whom + hosts */ .lm-jy-whomhosts.wp-block-columns { gap: clamp(2.5rem, 7vw, 8rem); max-width: 1200px; margin: 0 auto; align-items: start; } .lm-jy-col > *, .lm-jy-whom > *, .lm-jy-hosts > *, .lm-jy-host > * { margin-block-start: 0; } body .lm-jy-whom p.lm-statement, body .lm-jy-hosts p.lm-statement { font-size: clamp(1.9rem, 3vw, 2.7rem); margin: 0 0 2rem; } .lm-jy-list.wp-block-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--jy-line); } .lm-jy-list li { font-family: var(--wp--preset--font-family--serif); font-size: 1.2rem; color: var(--jy-night); padding: 1.05rem 0; border-bottom: 1px solid var(--jy-line); margin: 0; } .lm-jy-host { margin-bottom: 2.4rem; } .lm-jy-host h3 { font-size: clamp(1.6rem, 2.2vw, 2rem); margin: 0 0 .3rem; color: var(--jy-night); } body .lm-jy-host p.lm-label { margin: 0 0 .8rem; letter-spacing: 3px; } body .lm-jy-host p.lm-jy-text { margin: 0; } /* 08 closing screen: night with the family frame, worlds list, form; footer in night so the frame runs through */ body.lm-variant-journeys .lm-section--closing.lm-jy-night { background: var(--jy-night); } body.lm-variant-journeys .lm-section--closing::before, body.lm-variant-journeys .lm-footer::before { border-color: rgba(216, 185, 143, .55); } body.lm-variant-journeys .lm-footer { background: var(--jy-night); } body.lm-variant-journeys .lm-footer__worlds a { color: var(--jy-sand); } .lm-jy-closing > *, .lm-jy-closing .lm-closing__left > *, .lm-jy-closing .lm-closing__right > *, .lm-jy-worlds > *, .lm-jy-world > * { margin-block-start: 0; } body .lm-jy-closing p.lm-statement { color: #fff; font-size: clamp(2rem, 3.4vw, 3rem); margin-bottom: 1.6rem; } body .lm-jy-closing p.lm-eyebrow { color: var(--jy-sand); } .lm-jy-worlds { margin-top: 2.6rem; border-top: 1px solid var(--jy-line-night); } .lm-jy-world { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--jy-line-night); } .lm-jy-world h3 { color: #fff; font-size: 1.35rem; margin: 0; } body .lm-jy-world p.lm-hs-link-wrap { margin: 0; } .lm-jy-world .lm-hs-link { color: var(--jy-sand); border-bottom-color: transparent; font-weight: 400; letter-spacing: 3px; } .lm-jy-world .lm-hs-link:hover { color: #fff; } .lm-jy-closing .wp-block-buttons { margin: 0; padding: 0; } body.lm-variant-journeys .lm-form--navy button, body.lm-variant-journeys .lm-section--navy .lm-form .ff-btn-submit { background: var(--jy-sand) !important; border-color: var(--jy-sand) !important; color: var(--jy-night) !important; } body.lm-variant-journeys .lm-form--navy button:hover, body.lm-variant-journeys .lm-section--navy .lm-form .ff-btn-submit:hover { background: var(--jy-ivory) !important; border-color: var(--jy-ivory) !important; } body.lm-variant-journeys .lm-form--navy input, body.lm-variant-journeys .lm-form--navy select, body.lm-variant-journeys .lm-form--navy textarea, body.lm-variant-journeys .lm-section--navy .lm-form .ff-el-form-control { border-bottom-color: rgba(216, 185, 143, .4) !important; } body.lm-variant-journeys .ff-el-form-hide_label .ff-el-input--label { display: none !important; } body.lm-variant-journeys .lm-section--navy .lm-form .ff_t_c, body.lm-variant-journeys .lm-section--navy .lm-form .ff-el-tc label, body.lm-variant-journeys .lm-section--navy .lm-form .ff_tc_label { color: #C9CFD8 !important; font-family: var(--wp--preset--font-family--serif); font-style: italic; font-size: .92rem; line-height: 1.5; letter-spacing: 0; text-transform: none; } body.lm-variant-journeys .lm-section--navy .lm-form .ff-el-tc label { display: flex; gap: .6rem; align-items: flex-start; } body.lm-variant-journeys .lm-section--navy .lm-form .ff_t_c a { color: #fff; text-decoration: underline; text-underline-offset: 3px; } body.lm-variant-journeys .lm-section--navy .lm-form .ff-el-group.lm-field--wide { grid-column: 1 / -1; } body.lm-variant-journeys .lm-form--navy select, body.lm-variant-journeys .lm-section--navy .lm-form select.ff-el-form-control { appearance: none; -webkit-appearance: none; background-image: none !important; padding-right: 0 !important; } body.lm-variant-journeys .lm-section--navy .lm-form .ff_submit_btn_wrapper, body.lm-variant-journeys .lm-section--navy .lm-form .ff-el-group.ff_submit_btn_wrapper { text-align: left; } /* phone / tablet */ @media (max-width: 1100px) { .lm-jy-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lm-jy-standard { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem 2.5rem; } .lm-jy-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 0; } .lm-jy-fact:nth-child(2) { border-right: 0; } .lm-jy-fact:nth-child(3) { padding-left: 0; } } @media (max-width: 782px) { .lm-jy-hero h1.lm-jy-hero__title { font-size: 2.6rem; letter-spacing: .26em; padding-left: .26em; } body .lm-jy-hero p.lm-jy-hero__foot { display: none; } .lm-jy-twocol { grid-template-columns: 1fr; gap: 1.4rem; margin-bottom: 2.4rem; } .lm-jy-twocol__b { padding-top: 0; } .lm-jy-facts { grid-template-columns: 1fr 1fr; margin-top: 3rem; padding-top: 1.8rem; } .lm-jy-fact, .lm-jy-fact + .lm-jy-fact { padding: 0 1rem 0 0; border-right: 0; } /* design 09: the journey as a list of I-IV titles with lines */ .lm-jy-steps { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--jy-night); } .lm-jy-steps .lm-num__item { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); align-items: baseline; border-top: 0; border-bottom: 1px solid var(--jy-line); padding: 1rem 0; } body .lm-jy-steps p.lm-jy-roman { font-size: 1.1rem; margin: 0; } .lm-jy-steps h3 { margin: 0; font-size: 1.3rem; } body .lm-jy-steps p.lm-jy-text { display: none; } .lm-jy-noteline { flex-direction: column; align-items: flex-start; gap: 1rem; } /* design 09: the two regions follow one another as full-screen chapters */ .lm-jy-regions { grid-template-columns: 1fr; } .lm-jy-region { min-height: 100svh; } .lm-jy-regions__head { top: 2.2rem; } .lm-jy-standard { grid-template-columns: 1fr; gap: 1.8rem; } .lm-jy-framed { padding-left: calc(var(--lm-frame) + 1.25rem); padding-right: calc(var(--lm-frame) + 1.25rem); } .lm-jy-whomhosts.wp-block-columns { flex-direction: column; gap: 3rem; } .lm-jy-pause.wp-block-cover { min-height: 80svh; } } /* 1.0.58b (preview round 1): regions head readable over bright sky (darker top of the chapter gradient), objective field shows its whole placeholder */ .lm-jy-region::after { background: linear-gradient(180deg, rgba(18, 26, 38, .55) 0%, rgba(18, 26, 38, .08) 28%, rgba(18, 26, 38, .1) 50%, rgba(18, 26, 38, .84) 100%); } body .lm-jy-regions__head p.lm-statement, body .lm-jy-regions__head p.lm-eyebrow { text-shadow: 0 1px 12px rgba(18, 26, 38, .5); } body.lm-variant-journeys .lm-form--navy textarea, body.lm-variant-journeys .lm-section--navy .lm-form textarea.ff-el-form-control { min-height: 4.2rem; height: 4.2rem; } /* 1.0.59 (20.10.2026, live check Journeys against design 18.10.) ALL worlds: current Fluent Forms wraps every field in a