.elementor-15 .elementor-element.elementor-element-bcd2b30{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:230px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-15 .elementor-element.elementor-element-bcd2b30:not(.elementor-motion-effects-element-type-background), .elementor-15 .elementor-element.elementor-element-bcd2b30 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F7F4EF;}.elementor-15 .elementor-element.elementor-element-931ebf4{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:48px;--padding-right:48px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-15 .elementor-element.elementor-element-4ef024e{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 30px) 0px;text-align:center;}.elementor-15 .elementor-element.elementor-element-4ef024e .elementor-heading-title{font-family:"Jost", Sans-serif;font-size:11px;font-weight:500;text-transform:uppercase;line-height:1em;letter-spacing:3.7px;color:var( --e-global-color-accent );}.elementor-15 .elementor-element.elementor-element-d8319ce{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 34px) 0px;text-align:center;}.elementor-15 .elementor-element.elementor-element-d8319ce .elementor-heading-title{font-family:"Cormorant Garamond", Sans-serif;font-size:58px;font-weight:300;line-height:1.16em;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-15 .elementor-element.elementor-element-e2d5340{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 40px) 0px;text-align:center;font-family:"Jost", Sans-serif;font-size:19px;font-weight:400;}.elementor-15 .elementor-element.elementor-element-6a8af22{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:110px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-15 .elementor-element.elementor-element-5c22e6f{text-align:end;font-family:"Jost", Sans-serif;font-size:9px;font-weight:500;text-transform:uppercase;line-height:1.6em;letter-spacing:2.7px;color:#F7F4EFB8;}.elementor-15 .elementor-element.elementor-element-e039ff5{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:150px;--padding-bottom:160px;--padding-left:48px;--padding-right:48px;}.elementor-15 .elementor-element.elementor-element-e039ff5:not(.elementor-motion-effects-element-type-background), .elementor-15 .elementor-element.elementor-element-e039ff5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#141A18;}.elementor-15 .elementor-element.elementor-element-df5d292{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:flex-start;--gap:104px 104px;--row-gap:104px;--column-gap:104px;--flex-wrap:nowrap;}.elementor-15 .elementor-element.elementor-element-ceffc0d{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-15 .elementor-element.elementor-element-bbd0cf0{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 22px) 0px;}.elementor-15 .elementor-element.elementor-element-bbd0cf0 .elementor-heading-title{font-family:"Jost", Sans-serif;font-size:11px;font-weight:500;text-transform:uppercase;line-height:1em;letter-spacing:3.7px;color:var( --e-global-color-accent );}.elementor-15 .elementor-element.elementor-element-839b88c{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 32px) 0px;}.elementor-15 .elementor-element.elementor-element-839b88c .elementor-heading-title{font-family:"Cormorant Garamond", Sans-serif;font-size:44px;font-weight:300;line-height:1.16em;color:#F7F4EF;}.elementor-15 .elementor-element.elementor-element-4a3e1a0{font-family:"Jost", Sans-serif;font-size:17px;font-weight:400;line-height:1.85em;color:#F7F4EFB3;}.elementor-15 .elementor-element.elementor-element-2d84aa6{font-family:"Jost", Sans-serif;font-size:17px;font-weight:400;line-height:1.85em;}.elementor-15 .elementor-element.elementor-element-1c6dc12{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-15 .elementor-element.elementor-element-d02067b{font-family:"Jost", Sans-serif;font-size:9px;font-weight:500;text-transform:uppercase;letter-spacing:2.8px;color:#F7F4EF75;}.elementor-15 .elementor-element.elementor-element-3e061ba{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;border-style:solid;--border-style:solid;border-width:1px 0px 0px 0px;--border-top-width:1px;--border-right-width:0px;--border-bottom-width:0px;--border-left-width:0px;border-color:#F7F4EF1F;--border-color:#F7F4EF1F;--padding-top:150px;--padding-bottom:160px;--padding-left:48px;--padding-right:48px;}.elementor-15 .elementor-element.elementor-element-3e061ba:not(.elementor-motion-effects-element-type-background), .elementor-15 .elementor-element.elementor-element-3e061ba > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#141A18;}.elementor-15 .elementor-element.elementor-element-de99779{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 22px) 0px;}.elementor-15 .elementor-element.elementor-element-de99779 .elementor-heading-title{font-family:"Jost", Sans-serif;font-size:11px;font-weight:500;text-transform:uppercase;line-height:1em;letter-spacing:3.7px;color:var( --e-global-color-accent );}.elementor-15 .elementor-element.elementor-element-ac9ddee{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 32px) 0px;}.elementor-15 .elementor-element.elementor-element-ac9ddee .elementor-heading-title{font-family:"Cormorant Garamond", Sans-serif;font-size:44px;font-weight:300;line-height:1.16em;color:#F7F4EF;}.elementor-15 .elementor-element.elementor-element-3a36893{font-family:"Jost", Sans-serif;font-size:17px;font-weight:400;line-height:1.85em;color:#F7F4EFB3;}.elementor-15 .elementor-element.elementor-element-4db44d0{font-family:"Jost", Sans-serif;font-size:17px;font-weight:400;line-height:1.85em;color:#F7F4EFB3;}.elementor-15 .elementor-element.elementor-element-0402874{font-family:"Jost", Sans-serif;font-size:17px;font-weight:400;line-height:1.85em;color:#F7F4EFB3;}.elementor-15 .elementor-element.elementor-element-0b6d21b{margin:64px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:30px 0px 0px 0px;border-style:solid;border-width:1px 0px 0px 0px;border-color:#F7F4EF29;font-family:"Jost", Sans-serif;font-size:16px;font-weight:400;line-height:1.8em;color:#F7F4EF99;}.elementor-15 .elementor-element.elementor-element-0ca8b86{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:150px;--padding-bottom:160px;--padding-left:48px;--padding-right:48px;}.elementor-15 .elementor-element.elementor-element-0ca8b86:not(.elementor-motion-effects-element-type-background), .elementor-15 .elementor-element.elementor-element-0ca8b86 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F7F4EF;}.elementor-15 .elementor-element.elementor-element-d903257{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:flex-end;--gap:70px 70px;--row-gap:70px;--column-gap:70px;--margin-top:0px;--margin-bottom:76px;--margin-left:0px;--margin-right:0px;}.elementor-15 .elementor-element.elementor-element-06d464a{--display:flex;--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-15 .elementor-element.elementor-element-67da42a{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 22px) 0px;}.elementor-15 .elementor-element.elementor-element-67da42a .elementor-heading-title{font-family:"Jost", Sans-serif;font-size:11px;font-weight:500;text-transform:uppercase;line-height:1em;letter-spacing:3.7px;color:var( --e-global-color-accent );}.elementor-15 .elementor-element.elementor-element-f05dc80{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-15 .elementor-element.elementor-element-f05dc80 .elementor-heading-title{font-family:"Cormorant Garamond", Sans-serif;font-size:44px;font-weight:300;line-height:1.16em;}.elementor-15 .elementor-element.elementor-element-159c81b{font-family:"Jost", Sans-serif;font-size:15.5px;font-weight:400;line-height:1.7em;}.elementor-15 .elementor-element.elementor-element-6c8d57b{width:var( --container-widget-width, 580px );max-width:580px;margin:40px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;--container-widget-width:580px;--container-widget-flex-grow:0;font-family:"Jost", Sans-serif;font-size:15.5px;font-weight:400;line-height:1.7em;}@media(max-width:1024px){.elementor-15 .elementor-element.elementor-element-bcd2b30{--padding-top:170px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-15 .elementor-element.elementor-element-931ebf4{--padding-top:0px;--padding-bottom:0px;--padding-left:32px;--padding-right:032px;}.elementor-15 .elementor-element.elementor-element-4ef024e .elementor-heading-title{font-size:11px;letter-spacing:2.8px;}.elementor-15 .elementor-element.elementor-element-d8319ce .elementor-heading-title{font-size:44px;}.elementor-15 .elementor-element.elementor-element-e2d5340{font-size:18px;}.elementor-15 .elementor-element.elementor-element-6a8af22{--margin-top:80px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-15 .elementor-element.elementor-element-e039ff5{--padding-top:100px;--padding-bottom:110px;--padding-left:32px;--padding-right:32px;}.elementor-15 .elementor-element.elementor-element-df5d292{--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:64px 64px;--row-gap:64px;--column-gap:64px;}.elementor-15 .elementor-element.elementor-element-ceffc0d{--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:stretch;}.elementor-15 .elementor-element.elementor-element-bbd0cf0 .elementor-heading-title{font-size:11px;letter-spacing:2.8px;}.elementor-15 .elementor-element.elementor-element-839b88c .elementor-heading-title{font-size:34px;}.elementor-15 .elementor-element.elementor-element-3e061ba{--padding-top:100px;--padding-bottom:110px;--padding-left:32px;--padding-right:32px;}.elementor-15 .elementor-element.elementor-element-de99779 .elementor-heading-title{font-size:11px;letter-spacing:2.8px;}.elementor-15 .elementor-element.elementor-element-ac9ddee .elementor-heading-title{font-size:34px;}.elementor-15 .elementor-element.elementor-element-0b6d21b{margin:52px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-15 .elementor-element.elementor-element-0ca8b86{--padding-top:100px;--padding-bottom:110px;--padding-left:32px;--padding-right:32px;}.elementor-15 .elementor-element.elementor-element-d903257{--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:flex-start;--gap:30px 30px;--row-gap:30px;--column-gap:30px;--margin-top:0px;--margin-bottom:52px;--margin-left:0px;--margin-right:0px;}.elementor-15 .elementor-element.elementor-element-67da42a .elementor-heading-title{font-size:11px;letter-spacing:2.8px;}.elementor-15 .elementor-element.elementor-element-f05dc80{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 36px) 0px;}.elementor-15 .elementor-element.elementor-element-f05dc80 .elementor-heading-title{font-size:34px;}}@media(max-width:767px){.elementor-15 .elementor-element.elementor-element-bcd2b30{--padding-top:132px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-15 .elementor-element.elementor-element-931ebf4{--padding-top:0px;--padding-bottom:0px;--padding-left:22px;--padding-right:22px;}.elementor-15 .elementor-element.elementor-element-4ef024e{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 022px) 0px;}.elementor-15 .elementor-element.elementor-element-d8319ce{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 24px) 0px;}.elementor-15 .elementor-element.elementor-element-d8319ce .elementor-heading-title{font-size:31px;}.elementor-15 .elementor-element.elementor-element-e2d5340{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 32px) 0px;font-size:17px;}.elementor-15 .elementor-element.elementor-element-6a8af22{--margin-top:56px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-15 .elementor-element.elementor-element-e039ff5{--padding-top:76px;--padding-bottom:80px;--padding-left:22px;--padding-right:22px;}.elementor-15 .elementor-element.elementor-element-df5d292{--gap:56px 56px;--row-gap:56px;--column-gap:56px;--flex-wrap:nowrap;}.elementor-15 .elementor-element.elementor-element-ceffc0d{--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;}.elementor-15 .elementor-element.elementor-element-bbd0cf0{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 18px) 0px;}.elementor-15 .elementor-element.elementor-element-839b88c{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 26px) 0px;}.elementor-15 .elementor-element.elementor-element-839b88c .elementor-heading-title{font-size:29px;}.elementor-15 .elementor-element.elementor-element-4a3e1a0{font-size:16px;}.elementor-15 .elementor-element.elementor-element-2d84aa6{font-size:16px;}.elementor-15 .elementor-element.elementor-element-3e061ba{--padding-top:76px;--padding-bottom:80px;--padding-left:22px;--padding-right:22px;}.elementor-15 .elementor-element.elementor-element-de99779{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 18px) 0px;}.elementor-15 .elementor-element.elementor-element-ac9ddee{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 26px) 0px;}.elementor-15 .elementor-element.elementor-element-ac9ddee .elementor-heading-title{font-size:29px;}.elementor-15 .elementor-element.elementor-element-3a36893{font-size:16px;}.elementor-15 .elementor-element.elementor-element-4db44d0{font-size:16px;}.elementor-15 .elementor-element.elementor-element-0402874{font-size:16px;}.elementor-15 .elementor-element.elementor-element-0b6d21b{margin:44px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:26px 0px 0px 0px;font-size:14px;}.elementor-15 .elementor-element.elementor-element-0ca8b86{--padding-top:76px;--padding-bottom:80px;--padding-left:22px;--padding-right:22px;}.elementor-15 .elementor-element.elementor-element-d903257{--margin-top:0px;--margin-bottom:38px;--margin-left:0px;--margin-right:0px;}.elementor-15 .elementor-element.elementor-element-67da42a{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 18px) 0px;}.elementor-15 .elementor-element.elementor-element-f05dc80{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 29px) 0px;}.elementor-15 .elementor-element.elementor-element-f05dc80 .elementor-heading-title{font-size:29px;}.elementor-15 .elementor-element.elementor-element-6c8d57b{margin:32px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;}}@media(min-width:768px){.elementor-15 .elementor-element.elementor-element-931ebf4{--content-width:900px;}.elementor-15 .elementor-element.elementor-element-e039ff5{--content-width:1500px;}.elementor-15 .elementor-element.elementor-element-3e061ba{--content-width:1500px;}.elementor-15 .elementor-element.elementor-element-0ca8b86{--content-width:1500px;}}@media(max-width:1024px) and (min-width:768px){.elementor-15 .elementor-element.elementor-element-ceffc0d{--width:100%;}}/* Start custom CSS for container, class: .elementor-element-bcd2b30 *//* ============================================================================
MAISON AURELLE — OUR STORY · SECTION 1 · OPENING
Only what Elementor cannot set from its own panels. Typography, colours,
padding and entrance animations go in the widget Style tabs — see the
build tables.
----------------------------------------------------------------------------
CSS CLASSES
section container .... ma-open
lede container ....... ma-open__lede
eyebrow .............. ma-open__eyebrow
H1 ................... ma-open__title
standfirst ........... ma-open__stand
meta line ............ ma-open__meta (one Text Editor, HTML below)
image band ........... ma-open__band
band caption ......... ma-open__cap
WHERE: Site Settings → Custom CSS
----------------------------------------------------------------------------
This opening is the pattern for every inner page — Dining, Spa,
Experiences, Events. Only the words and the photograph change, which
is what stops fifteen pages reading as fifteen different sites.
============================================================================ */
/* ============================================================
1. THE BRASS STROKE
Absolutely positioned, exactly as on the home page's opening,
so both read as the same hand. A ::before on an Elementor
container becomes a flex item and lands beside the content
rather than above it — hence position, not margin.
Keep the lede container's Padding Top at 0; the padding here
reserves the room.
============================================================ */
.ma-open__lede{
position:relative;
padding-top:98px !important; /* 64 stroke + 34 gap */
}
.ma-open__lede::before{
content:"";
position:absolute;
top:0;
left:50%;
transform:translateX(-50%);
width:1px;
height:64px;
background:linear-gradient(180deg,rgba(169,139,93,0),#A98B5D);
}
/* ============================================================
2. MEASURE
============================================================ */
.ma-open__stand,
.ma-open__stand p{
max-width:60ch;
margin-left:auto;
margin-right:auto;
}
/* ============================================================
3. META LINE
One Text Editor widget. Paste into its "Text" (code) tab:
Tremezzina, Lake Como·
Established 1908·
Four generations
A byline, essentially. It is the detail that makes the page
read as an article rather than an About tab.
============================================================ */
.ma-open__meta{
display:inline-flex;
align-items:center;
gap:14px;
margin:0;
padding-top:26px;
border-top:1px solid #D9D2C6;
font-family:"Jost",system-ui,sans-serif;
font-size:9.5px;
font-weight:500;
letter-spacing:.26em;
line-height:1.8;
text-transform:uppercase;
color:#6E7A6B;
}
.ma-open__meta b{
font-weight:500;
color:#A98B5D;
}
/* ============================================================
4. IMAGE BAND
svh, not vh — on iOS Safari a vh band is taller than the
visible area and pushes the caption under the browser bar.
============================================================ */
.ma-open__band{
position:relative;
height:66svh;
min-height:440px;
overflow:hidden;
background:#141A18;
}
.ma-open__band .elementor-widget-image,
.ma-open__band .elementor-widget-image .elementor-widget-container,
.ma-open__band figure,
.ma-open__band .elementor-image{
position:absolute;
inset:0;
width:100%;
height:100%;
margin:0 !important;
padding:0 !important;
line-height:0;
}
.ma-open__band img{
display:block;
width:100% !important;
height:100% !important;
max-width:none !important;
object-fit:cover;
object-position:center;
border-radius:0 !important;
}
/* A short veil at the foot, only deep enough to carry the
caption. Elementor's Background Overlay would sit under the
Image widget rather than over it. */
.ma-open__band::after{
content:"";
position:absolute;
inset:0;
z-index:1;
pointer-events:none;
background:linear-gradient(180deg,
rgba(20,26,24,0) 52%,
rgba(20,26,24,.52) 100%);
}
.ma-open__cap{
position:absolute !important;
right:48px;
bottom:30px;
z-index:2;
width:auto !important;
}
/* ============================================================
5. TABLET
============================================================ */
@media (max-width:1100px){
.ma-open__band{
height:52svh;
min-height:360px;
}
.ma-open__cap{
right:32px;
}
}
/* ============================================================
6. PHONE
Three items and two separators on one line becomes five
fragments at 320px. The bullets go and each item takes a line.
============================================================ */
@media (max-width:600px){
.ma-open__lede{
padding-top:68px !important;
}
.ma-open__lede::before{
height:48px;
}
.ma-open__stand,
.ma-open__stand p{
max-width:none;
}
.ma-open__meta{
display:block;
padding-top:22px;
font-size:9px;
letter-spacing:.22em;
}
.ma-open__meta b{
display:none;
}
.ma-open__meta span{
display:block;
}
.ma-open__band{
height:42svh;
min-height:280px;
}
.ma-open__cap{
right:22px;
bottom:22px;
}
}
/* ============================================================
7. REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion:reduce){
.ma-open__band img{
transition-duration:.01ms !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e039ff5 *//* ============================================================================
MAISON AURELLE — SPA & WELLNESS · SECTION 2 · NINE METRES DOWN
Only what Elementor cannot set from its own panels. Typography, colours,
padding and entrance animations go in the widget Style tabs — see the
build tables.
----------------------------------------------------------------------------
CSS CLASSES
section container .... ma-nm
body row ............. ma-nm__body
copy column .......... ma-nm__copy
eyebrow .............. ma-nm__eyebrow
H2 ................... ma-nm__title
paragraphs ........... ma-nm__text
the four facts ....... ma-nm__fx (ONE Text Editor, HTML below)
drawing column ....... ma-nm__sec
drawing caption ...... ma-nm__cap
WHERE: Site Settings → Custom CSS
============================================================================ */
/* ============================================================
1. THE COLUMNS
flex rather than a width, so the 104px gap comes out of the
share instead of being added to it.
============================================================ */
.ma-nm__body > .ma-nm__copy{
flex:1 1 auto;
min-width:0;
}
.ma-nm__body > .ma-nm__sec{
flex:0 0 40%;
min-width:0;
}
@media (max-width:1400px){
.ma-nm__body > .ma-nm__sec{flex-basis:42%;}
}
@media (max-width:1100px){
.ma-nm__body > .ma-nm__copy,
.ma-nm__body > .ma-nm__sec{
flex:0 0 auto;
width:100%;
}
.ma-nm__body > .ma-nm__sec{max-width:420px;}
}
@media (max-width:600px){
.ma-nm__body > .ma-nm__sec{max-width:none;}
}
/* ============================================================
2. THE FOUR FACTS
One Text Editor. Paste into the "Text" (code) tab:
9 mBelow the terrace
1908Cut by hand, in eleven months
19°Air, all year, unheated and uncooled
4,000Bottles, until 1998
"Unheated and uncooled" is the line that ties this room to
the sustainability page. Nine metres of rock is the system.
============================================================ */
.ma-nm__fx{
margin:48px 0 0;
padding-top:32px;
border-top:1px solid rgba(247,244,239,.16);
display:flex;
flex-wrap:wrap;
gap:30px 0;
}
.ma-nm__fx > div{
flex:1 1 50%;
min-width:0;
padding-right:30px;
}
.ma-nm__fx b{
display:block;
margin:0 0 7px;
font-family:"Cormorant Garamond",Georgia,serif;
font-size:27px;
font-weight:300;
line-height:1;
color:#F7F4EF;
}
.ma-nm__fx span{
display:block;
font-family:"Jost",system-ui,sans-serif;
font-size:9.5px;
font-weight:500;
letter-spacing:.24em;
line-height:1.7;
text-transform:uppercase;
color:rgba(247,244,239,.5);
}
@media (max-width:600px){
.ma-nm__fx{
margin-top:38px;
padding-top:26px;
gap:24px 0;
}
.ma-nm__fx > div{
flex:1 1 100%;
padding-right:0;
}
.ma-nm__fx b{font-size:25px;}
}
/* ============================================================
3. THE SECTION DRAWING
Writing "nine metres down" is one thing. Drawing it, with the
house on top and a dimension line between, is another — and a
survey section is about the least decorated object this site
could put on a page.
Paste the SVG into an HTML widget rather than an Image widget:
it stays crisp at any size, the strokes take the site's
colours, and the dimension line can be animated.
============================================================ */
.ma-nm__sec svg{
width:100%;
height:auto;
display:block;
}
.ma-nm__cap{
margin:24px 0 0;
padding-top:18px;
border-top:1px solid rgba(247,244,239,.16);
font-family:"Jost",system-ui,sans-serif;
font-size:9px;
font-weight:500;
letter-spacing:.28em;
line-height:1.7;
text-transform:uppercase;
color:rgba(247,244,239,.46);
}
/* ============================================================
4. THE DIMENSION LINE
Drawn with stroke-dasharray. It starts fully drawn and only
retracts once the snippet below adds .ma-armed — so if the
script never runs the drawing is simply complete, rather than
missing its most important line.
============================================================ */
.ma-nm__sec .dim{
stroke-dasharray:520;
stroke-dashoffset:0;
}
.ma-nm__sec.ma-armed .dim{
stroke-dashoffset:520;
transition:stroke-dashoffset 1.6s cubic-bezier(.19,1,.22,1) .35s;
}
.ma-nm__sec.ma-armed.ma-drawn .dim{
stroke-dashoffset:0;
}
/* ============================================================
5. MEASURE
============================================================ */
.ma-nm__title,
.ma-nm__title .elementor-heading-title{
max-width:19ch;
}
.ma-nm__text,
.ma-nm__text p{
max-width:52ch;
}
.ma-nm__text em{
font-style:normal;
color:#F7F4EF;
}
/* ============================================================
6. TABLET
============================================================ */
@media (max-width:1100px){
.ma-nm__title,
.ma-nm__title .elementor-heading-title{
max-width:24ch;
}
.ma-nm__text,
.ma-nm__text p{
max-width:none;
}
}
/* ============================================================
7. PHONE
============================================================ */
@media (max-width:600px){
.ma-nm__title,
.ma-nm__title .elementor-heading-title{
max-width:none;
}
}
/* ============================================================
8. REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion:reduce){
.ma-nm__sec.ma-armed .dim{
stroke-dashoffset:0 !important;
transition-duration:.01ms !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3e061ba *//* ============================================================================
MAISON AURELLE — SPA & WELLNESS · SECTION 3 · THE WATER
Only what Elementor cannot set from its own panels. Typography, colours,
padding and entrance animations go in the widget Style tabs — see the
build tables.
----------------------------------------------------------------------------
CSS CLASSES
section container .... ma-wt
eyebrow .............. ma-wt__eyebrow
H2 ................... ma-wt__title
intro ................ ma-wt__intro
the scale ............ ma-wt__sc (ONE Text Editor, HTML below)
the descriptions ..... ma-wt__dsc (ONE Text Editor, HTML below)
footnote ............. ma-wt__note
WHERE: Site Settings → Custom CSS
============================================================================ */
/* ============================================================
1. THE SCALE
One Text Editor. Paste into the "Text" (code) tab:
Four points placed where their number puts them on a nought
to fifty line. The cold sitting a long way from the other
three is the whole argument — you can see it is going to hurt
before you have read a word about it.
============================================================ */
.ma-wt__sc{
position:relative;
padding-top:104px;
margin-bottom:70px;
}
/* --- The rule, ticked at both ends --- */
.ma-wt__sc .line{
position:relative;
height:1px;
background:#A98B5D;
opacity:.55;
}
.ma-wt__sc .line::before,
.ma-wt__sc .line::after{
content:"";
position:absolute;
top:-5px;
width:1px;
height:11px;
background:#A98B5D;
}
.ma-wt__sc .line::before{left:0;}
.ma-wt__sc .line::after{right:0;}
/* --- The ends, in degrees --- */
.ma-wt__sc .end{
position:absolute;
top:118px;
font-family:"Jost",system-ui,sans-serif;
font-size:9px;
font-weight:500;
letter-spacing:.26em;
line-height:1;
text-transform:uppercase;
color:rgba(247,244,239,.34);
}
.ma-wt__sc .end.a{left:0;}
.ma-wt__sc .end.b{right:0;}
/* --- The four points.
Percentages are the temperature over fifty: 8 → 16, 19 → 38,
30 → 60, 44 → 88. Change a temperature and the percentage
has to change with it, or the drawing starts lying. --- */
.ma-wt__sc .pt{
position:absolute;
bottom:1px;
width:1px;
}
.ma-wt__sc .cold {left:16%;}
.ma-wt__sc .air {left:38%;}
.ma-wt__sc .pool {left:60%;}
.ma-wt__sc .steam{left:88%;}
/* --- The stems, drawn down to the line in order --- */
.ma-wt__sc .stem{
position:absolute;
bottom:0;
left:0;
width:1px;
height:54px;
background:#A98B5D;
transform-origin:bottom center;
}
.ma-wt__sc.ma-armed .stem{
transform:scaleY(0);
transition:transform .9s cubic-bezier(.19,1,.22,1);
}
.ma-wt__sc.ma-armed.ma-drawn .stem{transform:scaleY(1);}
.ma-wt__sc.ma-armed .cold .stem{transition-delay:.15s;}
.ma-wt__sc.ma-armed .air .stem{transition-delay:.30s;}
.ma-wt__sc.ma-armed .pool .stem{transition-delay:.45s;}
.ma-wt__sc.ma-armed .steam .stem{transition-delay:.60s;}
/* --- The figures. The outer two pull back inside the line so
nothing hangs off the edge of the section. --- */
.ma-wt__sc .n{
position:absolute;
bottom:62px;
left:0;
transform:translateX(-50%);
font-family:"Cormorant Garamond",Georgia,serif;
font-size:clamp(34px,3.6vw,50px);
font-weight:300;
line-height:1;
color:#F7F4EF;
white-space:nowrap;
}
.ma-wt__sc .steam .n{transform:translateX(-100%);}
.ma-wt__sc .cold .n{transform:translateX(-14%);}
/* ============================================================
2. THE DESCRIPTIONS
One Text Editor. Paste into the "Text" (code) tab:
8°
The cold
A stone trough at the far end, fed from the hill.
Eight seconds is enough. Nobody has managed a minute,
Nadia included.
… three more …
The is the phone-only degree. It is invisible on desktop,
where the scale carries the numbers, and becomes the only
figure once the scale is gone.
============================================================ */
.ma-wt__dsc{
display:flex;
align-items:flex-start;
gap:0;
border-top:1px solid rgba(247,244,239,.14);
}
.ma-wt__dsc .ds{
flex:1 1 0;
min-width:0;
padding:30px 34px 0;
border-left:1px solid rgba(247,244,239,.14);
}
.ma-wt__dsc .ds:first-child{padding-left:0;border-left:0;}
.ma-wt__dsc .ds:last-child{padding-right:0;}
.ma-wt__dsc b{
display:block;
margin:0 0 12px;
font-family:"Jost",system-ui,sans-serif;
font-size:9.5px;
font-weight:500;
letter-spacing:.28em;
line-height:1;
text-transform:uppercase;
color:#A98B5D;
}
.ma-wt__dsc span{
display:block;
font-family:"Jost",system-ui,sans-serif;
font-size:15.5px;
line-height:1.75;
color:rgba(247,244,239,.66);
}
.ma-wt__dsc em{
font-style:normal;
color:#F7F4EF;
}
.ma-wt__dsc i{display:none;}
/* ============================================================
3. FOOTNOTE
Chlorine is what a hotel pool smells of. Saying what this one
runs on instead — and when the lamp is changed — is more
convincing than any word for clean.
============================================================ */
.ma-wt__note,
.ma-wt__note p{
max-width:62ch;
margin:0;
}
.ma-wt__note em{
font-style:normal;
color:#F7F4EF;
}
/* ============================================================
4. MEASURE
============================================================ */
.ma-wt__title,
.ma-wt__title .elementor-heading-title{
max-width:20ch;
}
.ma-wt__intro,
.ma-wt__intro p{
max-width:56ch;
}
.ma-wt__intro em{
font-style:normal;
color:#F7F4EF;
}
/* ============================================================
5. NARROW DESKTOP
============================================================ */
@media (max-width:1400px){
.ma-wt__dsc .ds{padding:26px 24px 0;}
.ma-wt__dsc .ds:first-child{padding-left:0;}
.ma-wt__dsc .ds:last-child{padding-right:0;}
}
/* ============================================================
6. TABLET
============================================================ */
@media (max-width:1100px){
.ma-wt__title,
.ma-wt__title .elementor-heading-title{max-width:24ch;}
.ma-wt__intro,
.ma-wt__intro p{max-width:none;}
.ma-wt__sc{padding-top:86px;margin-bottom:52px;}
.ma-wt__dsc .ds{padding:24px 18px 0;}
.ma-wt__dsc .ds:first-child{padding-left:0;}
.ma-wt__dsc .ds:last-child{padding-right:0;}
.ma-wt__dsc span{font-size:15px;}
.ma-wt__note,
.ma-wt__note p{max-width:none;}
}
/* ============================================================
7. PHONE
The scale goes and the numbers move into the descriptions.
Four labels across 320px is four characters each, which is
not a scale — it is a smudge.
============================================================ */
@media (max-width:600px){
.ma-wt__title,
.ma-wt__title .elementor-heading-title{max-width:none;}
.ma-wt__sc{display:none;}
.ma-wt__dsc{flex-direction:column;}
.ma-wt__dsc .ds{
flex:1 1 auto;
padding:26px 0 0;
margin:0 0 26px;
border-left:0;
border-bottom:1px solid rgba(247,244,239,.14);
}
.ma-wt__dsc .ds:last-child{
margin-bottom:0;
padding-bottom:0;
border-bottom:0;
}
.ma-wt__dsc i{
display:block;
margin:0 0 10px;
font-style:normal;
font-family:"Cormorant Garamond",Georgia,serif;
font-size:38px;
font-weight:300;
line-height:1;
color:#F7F4EF;
}
.ma-wt__note,
.ma-wt__note p{font-size:15.5px;}
}
/* ============================================================
8. REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion:reduce){
.ma-wt__sc.ma-armed .stem{
transform:scaleY(1) !important;
transition-duration:.01ms !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0ca8b86 *//* ============================================================================
MAISON AURELLE — SPA & WELLNESS · SECTION 4 · TREATMENTS
Only what Elementor cannot set from its own panels. Typography, colours,
padding and entrance animations go in the widget Style tabs — see the
build tables.
----------------------------------------------------------------------------
CSS CLASSES
section container .... ma-tr
head row ............. ma-tr__head
head text column ..... ma-tr__headtext
eyebrow .............. ma-tr__eyebrow
H2 ................... ma-tr__title
aside note ........... ma-tr__aside
the four ............. ma-tr__tt (ONE Text Editor, HTML below)
footnote ............. ma-tr__note
WHERE: Site Settings → Custom CSS — NOT the container's own Custom CSS
box. Elementor prefixes anything written there with that element's own
.elementor-15 .elementor-element.elementor-element-0ca8b86, which cannot reach classes living inside a Text Editor.
============================================================================ */
/* ============================================================
1. THE HTML
Paste this into one Text Editor's "Text" (code) tab:
The long one
90 minutes
€180
Whatever Nadia decides you need once she has had a
look at you. Most people go under at about forty minutes and
nobody wakes them.
… three more in the same shape …
All four parts are siblings, which is what lets the phone
reorder them without a second copy of the description in the
markup. Two copies of one sentence is two sentences to keep
in step, and one of them always drifts.
============================================================ */
/* ============================================================
2. THE ROW
The description has to start a new line. flex-basis:100% does
not guarantee that — the name is set to shrink, so a browser
can squeeze all four onto one line, and it does.
Grid settles it outright: three columns for the top line and
the description spanning all three underneath. No relying on
wrap behaviour, and the two figures stay locked to their
columns whatever length the name runs to.
============================================================ */
.ma-tr__tt{
border-top:1px solid #D9D2C6;
}
.ma-tr__tt .t{
display:grid;
grid-template-columns:1fr 130px 150px;
align-items:baseline;
column-gap:0;
row-gap:0;
padding:38px 0;
border-bottom:1px solid #D9D2C6;
}
/* --- Name --- */
.ma-tr__tt .nm{
grid-column:1;
grid-row:1;
min-width:0;
padding-right:56px;
font-family:"Cormorant Garamond",Georgia,serif;
font-size:clamp(24px,2.3vw,31px);
font-weight:300;
line-height:1.18;
color:#1E2621;
}
/* --- Minutes --- */
.ma-tr__tt .m{
grid-column:2;
grid-row:1;
margin:0;
text-align:right;
font-family:"Jost",system-ui,sans-serif;
font-size:9.5px;
font-weight:500;
letter-spacing:.24em;
line-height:1.6;
text-transform:uppercase;
color:#6E7A6B;
}
/* --- Price --- */
.ma-tr__tt .pr{
grid-column:3;
grid-row:1;
margin:0;
text-align:right;
font-family:"Cormorant Garamond",Georgia,serif;
font-size:clamp(27px,2.5vw,34px);
font-weight:400;
line-height:1;
color:#1E2621;
}
/* --- Description: its own row, spanning everything.
max-width alone controls the measure. Adding padding-right on
top of it breaks the lines twice and strands three words on
the last one. --- */
.ma-tr__tt .d{
grid-column:1 / -1;
grid-row:2;
margin:0;
padding:14px 0 0;
max-width:58ch;
font-family:"Jost",system-ui,sans-serif;
font-size:16px;
line-height:1.78;
color:#55605A;
}
.ma-tr__tt .d em{
font-style:normal;
color:#1E2621;
}
/* ============================================================
3. ASIDE AND FOOTNOTE
"She will either do it or tell you she cannot" — somebody who
can say no is the strongest thing a treatment list can carry.
============================================================ */
.ma-tr__aside{
max-width:34ch;
margin:0;
padding-left:26px;
border-left:1px solid #A98B5D;
}
.ma-tr__note,
.ma-tr__note p{
max-width:64ch;
margin:0;
}
.ma-tr__aside em,
.ma-tr__note em{
font-style:normal;
color:#1E2621;
}
/* ============================================================
4. MEASURE
============================================================ */
.ma-tr__title,
.ma-tr__title .elementor-heading-title{
max-width:18ch;
}
/* ============================================================
5. NARROW DESKTOP
============================================================ */
@media (max-width:1400px){
.ma-tr__tt .t{grid-template-columns:1fr 112px 122px;}
.ma-tr__tt .nm{padding-right:36px;}
}
/* ============================================================
6. TABLET
============================================================ */
@media (max-width:1100px){
.ma-tr__title,
.ma-tr__title .elementor-heading-title{max-width:24ch;}
.ma-tr__aside{max-width:54ch;}
.ma-tr__tt .t{
grid-template-columns:1fr 96px 104px;
padding:30px 0;
}
.ma-tr__tt .nm{padding-right:26px;}
.ma-tr__tt .d{max-width:none;}
.ma-tr__note,
.ma-tr__note p{max-width:none;}
}
/* ============================================================
7. PHONE
Name and price keep the top line — those are the two things
anybody is scanning for. The minutes drop below them and the
description goes last.
============================================================ */
@media (max-width:600px){
.ma-tr__title,
.ma-tr__title .elementor-heading-title{max-width:none;}
.ma-tr__aside{
padding-left:20px;
font-size:15px;
}
.ma-tr__tt .t{
grid-template-columns:1fr auto;
padding:28px 0;
}
.ma-tr__tt .nm{
grid-column:1;
grid-row:1;
padding-right:22px;
}
.ma-tr__tt .pr{
grid-column:2;
grid-row:1;
}
.ma-tr__tt .m{
grid-column:1 / -1;
grid-row:2;
text-align:left;
padding-top:12px;
}
.ma-tr__tt .d{
grid-column:1 / -1;
grid-row:3;
padding-top:14px;
font-size:15.5px;
line-height:1.75;
}
.ma-tr__note,
.ma-tr__note p{font-size:15.5px;}
}/* End custom CSS */