/* -------------------------------------------------------------- -------------------------------------------------------------- INDEX -------------------------------------------------------------- -------------------------------------------------------------- A. MAIN STYLE GUIDELINES Typography, Typescale, Weight, Colors, Spacings B. FLUIDITY All rules for normalized positioning & centering C. TRANSVERSE All css for transverse elements, such as links...etc D. SPECIFIC All specific sections & elements NB. CTA, Inputs & Animations rules are stored in different css files */ /* -------------------------------------------------------------- -------------------------------------------------------------- A. MAIN STYLE GUIDELINES -------------------------------------------------------------- -------------------------------------------------------------- */ :root { /* -------------------------- .CORE -------------------------- */ /* TYPEFACE */ --font-primary: "Manrope", sans-serif; --font-secondary: "Domine", serif; /* TYPESCALE */ --font-size-10: 10px; --font-size-15: 12px; --font-size-20: 14px; --font-size-30: 16px; --font-size-40: 18px; --font-size-50: 20px; /* was 22 with cirka */ --font-size-60: 22px; /* was 24 with cirka */ --font-size-70: 26px; --font-size-80: 28px; --font-size-85: 38px; --font-size-90: 46px; --font-size-100: 56px; --font-size-110: 66px; /* TYPEWEIGHT */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; /* LINEHEEIGHT */ --font-lineheight-10: 28px; --font-lineheight-40: 33px; --font-lineheight-45: 48px; --font-lineheight-80: 54px; --font-lineheight-90: 64px; --font-lineheight-100: 76px; /* COLORS */ /* Primary */ --color-primaryRGB: 4, 176, 250; /* #04B0FA */ --color-primary: rgb(var(--color-primaryRGB)); --color-primary-alpha-10: rgba(var(--color-primaryRGB), 0.1); --color-primary-alpha-20: rgba(var(--color-primaryRGB), 0.2); --color-primary-tone-10: #0099da; /* Secondary & Tertiary */ --color-secondary: #192121; --color-tertiary: #abbbc0; /* Other */ --color-red-dalhmad: #b13c2f; /* Basics */ --color-black: #0000; --color-black-tone-01: rgba(0, 0, 0, 0.1); --color-black-tone-02: rgba(0, 0, 0, 0.15); --color-black-tone-03: rgba(0, 0, 0, 0.3); --color-black-tone-10: rgba(0, 0, 0, 0.6); --color-black-tone-20: rgba(0, 0, 0, 0.7); --color-white: #ffff; --color-white-tone-05: rgba(255, 255, 255, 0.4); --color-white-tone-10: rgba(255, 255, 255, 0.6); --color-white-tone-20: rgba(255, 255, 255, 0.7); --color-white-tone-30: rgba(255, 255, 255, 0.8); --color-feedback-error-red-10: #e28c8c; --color-feedback-neutral-grey-10: #f5f5f5; /* CENTERING */ /* Default*/ --centering-width-default: 100%; --centering-width-maxwidth: 968px; /* Tablett */ --centering-width-tablet-default: 79.947916666666667%; /* Mobil */ --centering-width-mobile-default: var(--centering-width-default); --centering-width-mobile-maxwidth: 93.125%; /* SIZING */ --sizing-cta-w-30: 36px; --sizing-cta-w-100: 164px; --sizing-cta-h-10: 42px; --sizing-cta-h-20: 47px; --sizing-field-h-10: 65px; --sizing-fieldbox-h-10: 14px; --sizing-topbar-h-10: 50px; --sizing-topbar-h-20: 64px; --sizing-topbar-h-30: 84px; --sizing-profilpic-10: 60px; --sizing-profilpic-20: 80px; --sizing-boatpic-100: 144px; /* SPACINGS */ --spacing-10: 4px; --spacing-15: 8px; --spacing-20: 10px; --spacing-30: 15px; --spacing-40: 20px; --spacing-45: 24px; --spacing-50: 30px; --spacing-60: 50px; --spacing-70: 70px; --spacing-80: 100px; --spacing-90: 130px; /* RADIUS */ --radius-10: 8px; --radius-20: 10px; --radius-30: 20px; /* SHADOW */ --shadow-form-10: 0px 4px 15px var(--color-black-tone-01); --shadow-form-20: 0px 4px 15px var(--color-black-tone-03); --shadow-btn-10: 0px 4px 6px var(--color-black-tone-02); /* GRADIENT */ --gradient-overlay-hero: linear-gradient( 257.92deg, rgba(1, 7, 37, 0.2) 17.63%, rgba(12, 19, 35, 0.7) 57.79%, rgba(1, 7, 37, 0.7) 100% ); --gradient-overlay-footer: linear-gradient( 256.92deg, rgba(1, 7, 37, 0.7) 17.63%, rgba(12, 19, 35, 0.8) 57.79%, rgba(1, 7, 37, 0.8) 100% ); --gradient-overlay-card-10-default: linear-gradient( 180deg, rgba(0, 0, 0, 0.2) 68.78%, rgba(32, 39, 38, 0.5) 93.31% ); --gradient-overlay-card-10-active: linear-gradient( 180deg, rgba(0, 0, 0, 0.2) 68.78%, #192121 100% ); --gradient-overlay-card-20: linear-gradient( 180deg, rgba(0, 0, 0, 0.2) 58.9%, #192121 100% ); --gradient-overlay-carousel: linear-gradient( 180deg, rgba(0, 0, 0, 0) 0%, #192121 100% ); --gradient-overlay-storyplayer: linear-gradient( 180deg, rgba(0, 0, 0, 0.67) 0%, rgba(0, 0, 0, 0.2) 15.61%, rgba(0, 0, 0, 0.2) 58.78%, rgba(32, 39, 38, 0.9) 77.87% ); --gradient-form-actionArea: linear-gradient( 180deg, rgba(255, 255, 255, 0) 0%, #ffff 9.11% ); /* -------------------------- .ALIAS -------------------------- */ /* FONT STYLES */ /* Titles */ --font-h1: var(--font-weight-semibold) var(--font-size-110)/var(--font-lineheight-100) var(--font-primary); --font-h2: var(--font-weight-semibold) var(--font-size-100)/var(--font-lineheight-90) var(--font-primary); --font-h3: var(--font-weight-bold) var(--font-size-80) var(--font-primary); --font-h4: var(--font-weight-semibold) var(--font-size-70) var(--font-primary); --font-h5: var(--font-weight-extrabold) var(--font-size-30) var(--font-primary); --font-subtitle: var(--font-weight-regular) var(--font-size-60)/var(--font-lineheight-10) var(--font-secondary); --font-surtitle: var(--font-weight-regular) var(--font-size-50) var(--font-secondary); /* Body */ --font-body: var(--font-weight-medium) var(--font-size-30) var(--font-primary); --font-body-small: var(--font-weight-medium) var(--font-size-20) var(--font-primary); --font-body-tiny: var(--font-weight-medium) var(--font-size-10) var(--font-primary); /* CTAs & Specials */ --font-CTA: var(--font-weight-extrabold) var(--font-size-40) var(--font-primary); --font-tag: var(--font-weight-extrabold) var(--font-size-20) var(--font-primary); --font-links: var(--font-weight-extrabold) var(--font-size-20) var(--font-primary); --font-metrics: var(--font-weight-extrabold) var(--font-size-90)/var(--font-lineheight-90) var(--font-primary); } /* -------------------------------------------------------------- -------------------------------------------------------------- B. FLUIDITY -------------------------------------------------------------- -------------------------------------------------------------- */ /* -------------------------- POSITIONS -------------------------- */ /* CENTERING */ .centered { position: relative; width: var(--centering-width-default); max-width: var(--centering-width-maxwidth) /*968px*/; margin: auto; } .vcentered { top: 50%; transform: translateY(-50%); -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } .hcentered { left: 50%; transform: translateX(-50%); -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } .topbar .centered { height: 100%; width: 65.27777777777779%; } .splash header .centered { min-width: 620px; } /* FLEXIBILITY */ .vflex, .hflex, .mflex { display: flex; justify-content: flex-start; flex-direction: row; align-items: center; } .hflex { flex-direction: column; } .mflex { justify-content: center; align-items: center; } .vflex.wrap, .hflex.wrap { flex-wrap: wrap; } /*In some cases, some overwrittes are needed*/ .rowflex { flex-direction: row !important; } .colflex { flex-direction: column !important; } /* COLUMNS */ /* 50-50 */ .vflex.col-5050 > div { width: 50%; position: relative; } /* 2/3 - 1/3 */ .vflex.col-6633 > div:first-child { width: calc((100% / 3) * 2); } .vflex.col-6633 > div:last-child { width: calc((100% / 3)); } .stretch { align-self: stretch; align-items: flex-start; } /* -------------------------- STICKY ELEMENTS -------------------------- */ .stretch.vflex { align-items: flex-start; } .sticky { position: sticky; top: 0px; padding-top: calc(var(--sizing-topbar-h-20) + var(--spacing-30)); } /* -------------------------- MARGES -------------------------- */ * { box-sizing: border-box; -moz-box-sizing: border-box; } /* -------------------------------------------------------------- -------------------------------------------------------------- C.TRANSVERS -------------------------------------------------------------- -------------------------------------------------------------- */ * { color: var(--color-secondary); text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } /* -------------------------- .FONTSTYLES -------------------------- */ /* ALL BODY */ * { font: var(--font-body); } /* HEADINGS */ h1 { font: var(--font-h1); } h2 { font: var(--font-h2); } h3 { font: var(--font-h3); margin-bottom: var(--spacing-40); } h4 { font: var(--font-h4); } h5 { font: var(--font-h5); } /* SUBTITLES */ .subtitle { font: var(--font-subtitle); } /* -------------------------- CONTAINERS -------------------------- */ html { scroll-behavior: smooth; overflow-x: hidden; } html.hidescrollX { overflow-x: hidden; } html.hidescrollY { overflow-y: hidden; padding-right: 15px; } body { overflow-x: hidden; overflow-y: auto; background-color: #fff; opacity: 0; /* for pageFade js function */ } /* -------------------------- SCROLL -------------------------- */ .hidescroll { overflow-y: hidden; } .showscroll { overflow-y: auto; overflow-x: hidden; } /* -------------------------- LINKS -------------------------- */ a { color: inherit; text-decoration: none; opacity: 0.6; } a.blocklink { opacity: inherit; display: block; } a.blocklink.logolink { margin-right: auto; opacity: 1; } a.blocklink.vflex { display: flex; width: 100%; } a:hover { /* color: var(--color-primary); */ opacity: 1 !important; } .ulink { text-decoration: underline; cursor: pointer; opacity: inherit; } .ulink:hover { /* color: var(--color-primary); */ opacity: 1 !important; } .clear { width: 100%; clear: both; } /* -------------------------- IMG & VIDEOS -------------------------- */ img { display: block; min-width: 100%; max-width: 100%; /* Safari 6.0 - 9.0 */ /* -webkit-filter: grayscale(100%); */ /* filter: grayscale(100%); */ } img.unwide { height: 100%; min-width: none; max-width: none; position: relative; left: 50%; transform: translateX(-50%); -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } video { width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; object-position: center; object-fit: cover; z-index: 0; } /* -------------------------- OVERLAY -------------------------- */ .overlay, .mainOverlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; background: var(--color-black-tone-20); transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; } .mainOverlay { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 99; /* opacity: 1; */ display: none; transition: opacity 1s cubic-bezier(0, 0.94, 0.37, 0.99); -webkit-transition: opacity 1s cubic-bezier(0, 0.94, 0.37, 0.99); } #formOverlay { display: none; position: fixed; z-index: 101; transform: translateY(-100%); -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; transition: all 1s cubic-bezier(0.06, 0.91, 0.4, 1.01); -webkit-transition: all 1s cubic-bezier(0.06, 0.91, 0.4, 1.01); } #formOverlay.active { transform: translateY(0%); -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } .hidden { display: none; } /* -------------------------- CURSOR -------------------------- */ /* Pointer */ .topbar_profil { cursor: pointer; } /* -------------------------- TOPBAR -------------------------- */ .topbar { /* define sizing vars */ --topbar-h: var(--sizing-topbar-h-30); --topbar-h-mini: var(--sizing-topbar-h-20); width: 100%; height: var(--topbar-h); position: fixed; top: 0; left: 0; z-index: 100; transition: all 0.3s cubic-bezier(0.09, 0.66, 0.69, 0.95); -webkit-transition: all 0.3s cubic-bezier(0.09, 0.66, 0.69, 0.95); } .topbar.minimized { /* redefine sizing vars */ --topbar-h: var(--sizing-topbar-h-20); height: var(--topbar-h); } .topbarWrapper { height: var(--topbar-h); position: relative; top: 0px; background-color: var(--color-white); border-bottom: 1px solid var(--color-black-tone-01); transition: all 0.3s cubic-bezier(0.09, 0.66, 0.69, 0.95); -webkit-transition: all 0.3s cubic-bezier(0.09, 0.66, 0.69, 0.95); } .topbar .centered { height: 100%; } .topbar.fixed { top: calc(-1 * var(--topbar-h)); position: fixed; transition: top 0.3s cubic-bezier(0.09, 0.66, 0.69, 0.95); -webkit-transition: top 0.3s cubic-bezier(0.09, 0.66, 0.69, 0.95); } .topbar.fixed .topbarWrapper { height: var(--topbar-h-mini); /* Minifyied size on scroll */ border-bottom: 1px solid var(--color-black-tone-01); /* Change style on scroll if necesaarry*/ } .topbar.showOnScroll .topbarWrapper { top: var(--topbar-h); } .topbar.safeArea { position: fixed; /* transitional class from fixed and showed on scroll and fixed */ } .topbar .ico.logo-topbar { width: 172px; height: 37px; background-size: contain; margin-right: auto; transition: all 0.4s cubic-bezier(0.09, 0.66, 0.69, 0.95); -webkit-transition: all 0.4s cubic-bezier(0.09, 0.66, 0.69, 0.95); } .topbar.fixed .ico.logo-topbar { /* width: 50px; height: 36px; */ transition: all 0.4s cubic-bezier(0.09, 0.66, 0.69, 0.95); -webkit-transition: all 0.4s cubic-bezier(0.09, 0.66, 0.69, 0.95); } /* ACTIONAREA DESKTOP */ /* concern topbar level action area */ .topbar .actionArea.vflex:first-of-type { width: var(--sizing-cta-h-20); height: var(--sizing-cta-h-20); margin-left: var(--font-size-50); overflow-y: visible; flex-flow: row-reverse; position: relative; z-index: 3; } /* NAV */ .topbar nav { height: 100%; } nav li { height: 100%; font: var(--font-body-small); padding: 0px var(--spacing-40); cursor: pointer; } nav li.current a { font-weight: var(--font-weight-bold); opacity: 1 !important; } nav li:hover a { opacity: 1; } nav ul { height: 100%; position: relative; } nav ul .currentBar { height: 4px; background-color: var(--color-primary); position: absolute; bottom: -1px; left: 0px; transition: all 0.7s cubic-bezier(0.18, 0.94, 0.33, 0.98); -webkit-transition: all 0.7s cubic-bezier(0.18, 0.94, 0.33, 0.98); } /* MENU MOBIL */ /* Hidden elements on desktop */ .topbar .cta.mobilMenu, .topbar nav .mobilLogo, .topbar nav .actionArea { display: none; } .topbar .cta.mobilMenu { height: 100%; } .topbar nav .mobilLogo { margin: var(--spacing-70) 0px var(--spacing-40) 0px; width: 100%; justify-content: center; } .topbar nav .mobilLogo a > div { margin: auto; } /* ACTIONAREA MOBIL */ /* concern nav level action area */ .topbar nav .actionArea .cta.primary { margin-bottom: var(--spacing-20); } /* -------------------------- HEADER -------------------------- */ header { margin-top: var(--sizing-topbar-h-30); } /* -------------------------- MAIN & MAIN SECTIONS -------------------------- */ main { margin: var(--spacing-90) 0px; } #order_page main { margin: 0px 0px var(--spacing-90) 0px; } section { width: 100%; position: relative; } /* -------------------------- BANNER SECTION -------------------------- */ section.bannerSection .headerSubtitle, section.bannerSection .tripAdvisorComponent p .rating, section.bannerSection .tripAdvisorComponent p .ratingLegend, section.bannerSection .tripAdvisorComponent a, .playerWrapper .tripAdvisorComponent p .rating, .playerWrapper .tripAdvisorComponent p .ratingLegend, .playerWrapper .tripAdvisorComponent a, .actionSecondary p { color: var(--color-white) !important; } .bannerSection .centered { position: relative; z-index: 2; } .bannerSection .bgContent { padding: 0px 72px; } .bannerSection .bgContent .layerWrapper { border-radius: var(--radius-30); } /* -------------------------- BG CONTENT -------------------------- */ .bgContent { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; box-sizing: border-box; z-index: 1; } .bgContent .layerWrapper { position: relative; width: 100%; height: 100%; overflow: hidden; } .bgContent .overlay, .bgContent .layer { width: 100%; height: 100%; position: absolute; z-index: 2; top: 0; left: 0; } /* -------------------------- FOCUS SECTION -------------------------- */ section .centered.focus { padding: var(--spacing-50) !important; border: 1px solid var(--color-primary-tone-10); border-radius: var(--radius-20); box-sizing: border-box; } section .centered.focus .sectionContent { padding-right: 60px; box-sizing: border-box; } section .centered.focus .sectionTitle { padding-right: 36px; box-sizing: border-box; } /* -------------------------- CONTENT SEPARATOR -------------------------- */ .contentSeparator { margin: var(--spacing-60) 0px; height: 1px; background-color: var(--color-black-tone-01); } /* -------------------------- LISTS -------------------------- */ /* GENERAL */ .list li { width: 100%; } .list:not(.vflex) li { margin-bottom: var(--spacing-30); } .list:not(.vflex) li:last-child { margin-bottom: 0px; } .list.vflex li { margin-right: var(--spacing-30); } .list.vflex li:last-child { margin-right: 0px; } .small .listTitle { font-weight: var(--font-weight-extrabold); margin-bottom: var(--spacing-15); } /* SIMPLECARD */ .simpleCardDescription, .lineLegend { font: var(--font-body); opacity: 0.6; } .list.simpleCard li { border: 1px solid var(--color-primary-tone-10); border-radius: var(--radius-10); padding: var(--spacing-30) var(--spacing-40); } .simpleCardDescription { margin-bottom: var(--spacing-15); } .list .listTitle { font-weight: var(--font-weight-extrabold); margin-bottom: var(--spacing-20); } /* SIMPLE TABLE */ .list.simpleTable { border: 1px solid var(--color-primary-tone-10); border-radius: var(--radius-10); padding: var(--spacing-40); } .simpleTable li.vflex:not(:last-child) { padding-bottom: var(--spacing-30); border-bottom: 1px solid var(--color-black-tone-01); } .list.simpleTable li.vflex .lineValue, .list.simpleTable li .lineValue { margin-left: auto; font: var(--font-h5); } /* SIMPLE TABLE SMALL */ .small .lineLegend { font: var(--font-body-small); } .list .list.small:not(.vflex) li { margin-bottom: var(--spacing-10); } .simpleTable li.vflex:not(:last-child) { padding-bottom: var(--spacing-15); } .list.simpleTable.small li.vflex .lineValue { font: var(--font-body-small); font-weight: var(--font-weight-extrabold); } /* -------------------------- COOKIE MESSAGE -------------------------- */ .wrapper_cookie { width: 100%; position: fixed; bottom: 0px; height: 0px; z-index: 100; } .cookie_message { background-color: #f6f4f1; width: 80%; position: absolute; bottom: 0px; border-radius: 4px 4px 0 0; } .cookie_message p { padding: 20px 85px 20px 30px; line-height: 20px; text-align: center; } .cookie_message .close_zone { width: 55px; height: 100%; position: absolute; right: 0px; top: 0px; } /* -------------------------- FOOTER -------------------------- */ footer { width: 100%; padding-top: var(--spacing-90); position: relative; opacity: 1; transition: all 0.6s ease-in-out; -webkit-transition: all 0.6s ease-in-out; } /* -------------------------------------------------------------- -------------------------------------------------------------- D.SPECIFICS GENERAL & LANDING -------------------------------------------------------------- -------------------------------------------------------------- */ /* -------------------------- HEADER -------------------------- */ header { padding-top: var(--spacing-60); } header h1 { width: 57.7479338843%; margin-bottom: var(--spacing-40); } .headerTitle { margin-bottom: var(--spacing-70); } .headerSubtitle { margin-bottom: var(--spacing-30); } .headerPic { height: 100%; align-self: flex-end; } .headerPic > div { width: 437px; height: 668px; background: url(assets/bg/hero-pic.png) center no-repeat; background-size: contain; position: absolute; right: -50px; bottom: 25px; } /* -------------------------- BANNERSECTION -------------------------- */ .bannerSection { padding: var(--spacing-90) 0px; } .bannerSection .sectionTitle h2, .bannerSection .sectionSurtitle, .bannerSection .sectionDescription { color: var(--color-white); } .bannerSection .sectionDescription { font: var(--font-subtitle); opacity: 1; } .bannerSection .bgContent .overlay { background: var(--gradient-overlay-card-20) !important; } /* GROUPES */ .bannerSection#groupe .sectionContent .blocklink { align-self: flex-start; } #groupe .bgContent .layer.backlayer { background: url(assets/bg/banner-groupe-bg.jpg) center no-repeat; background-size: cover; z-index: 1; } #groupe .bgContent .overlay { background: var(--gradient-overlay-hero) !important; } /* HERO */ .bannerSection#hero { padding: 78px 0px; z-index: 2; } #hero .bgContent .overlay { background: var(--gradient-overlay-hero) !important; } #hero .bgContent .layer.backlayer { background: url(assets/bg/hero-bg.jpg) center no-repeat; background-size: cover; z-index: 1; } /* overright select in hero */ #hero .selectInput { padding: 0px 47px 0px 0px; } #hero .selectInput .frame { display: none; } #hero .selectInput .optionList { padding-top: 0px; margin-top: 50px; height: 0px; width: 110%; left: -5%; } #hero .selectInput.active .optionList { height: auto; } #hero .selectInput .selected { width: 120px; } /* -------------------------- SECTIONS -------------------------- */ #landing_page main { margin-top: var(--spacing-50); } .sectionSurtitle { font: var(--font-surtitle); margin-bottom: var(--spacing-10); opacity: 0.6; } .sectionDescription { font: var(--font-body); opacity: 0.6; margin: var(--spacing-40) 0px var(--spacing-50) 0px; } /* REGIONAL NETWORK */ section#regionalNetwork { position: relative; margin-top: var(--spacing-80); /* transform: translateY(-80%); -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; */ } section#regionalNetwork aside .list.vflex { justify-content: center; } section#regionalNetwork aside .list li { height: var(--spacing-70); width: 140px; } /* BALADES */ section#balades { margin-bottom: var(--spacing-60); } section#events { margin-bottom: var(--spacing-70); } /* VOILIERS */ section#voiliers { z-index: 2; } section#voiliers .list.vflex { align-items: stretch; } section#voiliers .list.vflex li { display: flex; } section#voiliers .cardComponent.boat { height: 100%; } section#voiliers .cardComponent.boat .frame { display: flex; flex-direction: column; height: 100%; } section#voiliers .cardComponent.boat .cardContent { flex-grow: 1; display: flex; flex-direction: column; } section#voiliers .cardComponent.boat .profilComponent { margin-top: auto; } section#voiliers .list.vflex li:not(:last-child) { margin-right: var(--spacing-20); } /* RADE */ section#rade { z-index: 1; } section#rade .sectionContent .cta { width: var(--sizing-cta-w-100); } section#rade .centered { padding: var(--spacing-90) 0px; position: relative; z-index: 2; } section#rade .maplayer { top: -35%; left: 10%; height: 730px; background: url(assets/bg/rademap.svg) center no-repeat; background-size: contain; } .sectionMetrics .cta { margin-top: var(--spacing-15); } /* STORIES */ section#stories { margin-bottom: var(--spacing-80); } section#stories .sectionTitle { text-align: center; margin-bottom: var(--spacing-60); } section#stories .sectionSurtitle { text-align: center; margin: var(--spacing-60) 0px var(--spacing-40) 0px; } section#stories aside .list { padding: var(--spacing-30); border: 1px solid var(--color-primary-tone-10); border-radius: var(--radius-20); } section#stories aside .list li, section#stories aside .list a.blocklink { height: var(--sizing-cta-h-20); width: 100%; } section#stories aside .list a.blocklink { flex-grow: 1; } /* EVENTS */ section#events .cardComponent .blocklink { padding-top: var(--spacing-30); position: relative; z-index: 10; } section#events .cardComponent { cursor: default; } section#events .cardComponent .cta:not(.disabled) { cursor: pointer; } section#events .cardComponent .cta { width: fit-content; } /* -------------------------- FAQ -------------------------- */ section#faq { margin-top: var(--spacing-90); } section#faq .sectionTitle { padding-right: 90px; box-sizing: border-box; } .sectionTitle.hflex .sectionSurtitle { width: 100%; } .sectionTitle.hflex .cta { align-self: flex-start; } section#faq .centered.vflex { align-items: flex-start; } /* FAQ SUBSECTION */ .list.priceTalbeComponent { padding: var(--spacing-40); border: 1px solid var(--color-primary); border-radius: var(--radius-10); margin-bottom: var(--spacing-20); } .list.priceTalbeComponent li:not(:last-child) { border-right: 1px solid var(--color-tertiary); margin-right: var(--spacing-30); padding-right: var(--spacing-30); } .list.priceTalbeComponent .priceTablePrice { font: var(--font-h4); font-weight: var(--font-weight-bold); } .list.priceTalbeComponent .priceTableSubtitle { font: var(--font-subtitle); text-align: center; } .list.priceTalbeComponent .priceTableSurtitle, .list.priceTalbeComponent .priceTablePrice span { font: var(--font-body-small); opacity: 0.6; text-align: center; } .priceTablePrice.vflex { align-items: baseline !important; } /* -------------------------- FOOTER -------------------------- */ footer .contentWrapper { width: 313px; } footer .actionBarComponent { width: 100%; } /* footer .ico.logo-alt{ width: 157px !important; height: 72px !important; margin: 0 auto var(--spacing-40) auto; } */ footer .tripAdvisorComponent p { margin: auto; } footer .sectionContent.vflex { align-items: flex-start; } footer .sectionContent .list:not(.list:last-child) { margin-right: var(--spacing-30); /* flex-grow: 1; */ } footer .sectionContent .list { width: 148px; flex-grow: initial; } footer .sectionContent li { font: var(--font-body-small); } footer .sectionContent li:not(.listTitle) { opacity: 0.8; margin-bottom: var(--spacing-15); } footer .sectionContent .listTitle { font-weight: var(--font-weight-bold); margin-bottom: var(--spacing-30); } footer .sectionContent li, .copyrights { color: var(--color-white); } .copyrights { position: absolute !important; bottom: var(--spacing-50); font: var(--font-body-tiny); z-index: 3; } footer .bannerSection .bgContent .layerWrapper { border-radius: var(--radius-30) var(--radius-30) 0 0; } footer .bannerSection .bgContent .overlay { background: var(--gradient-overlay-footer) !important; } footer .bgContent .layer.backlayer { background: url(assets/bg/footer-bg.jpg) center no-repeat; background-size: cover; z-index: 1; } /* -------------------------- PROFIL COMP -------------------------- */ .profiPic { --profil-size: var(--sizing-profilpic-20); background-color: grey; margin-right: var(--spacing-20); border-radius: var(--radius-20); } .profiPic.YR { background: url(assets/capitaine/Yann-Roger-Capitaine-Loch-Monna.jpg) center no-repeat; } .profiPic.GT { background: url(assets/capitaine/Gael-Terry-Capitaine-Dalh-Mad.jpg) center no-repeat; } .big .profiPic { width: var(--profil-size); height: var(--profil-size); background-size: cover; } .small .profiPic { --profil-size: var(--sizing-profilpic-10); width: var(--profil-size); height: var(--profil-size); background-size: cover; } .profilTitle { margin-bottom: var(--spacing-10); } .small .profilTitle { margin-bottom: 0px; } .profilSubtitle span:not(.tag) { font: var(--font-body); opacity: 0.6; } /* -------------------------- ACTION BAR COMPONENT -------------------------- */ .actionBarComponent { position: relative; margin-top: var(--spacing-40); display: inline-block; width: auto; } .actionBarComponent > div { position: relative; } .actionBarComponent .actionPrimary { width: auto; flex-basis: 0; background-color: var(--color-white); border-radius: var(--radius-20); box-shadow: var(--shadow-form-10); padding: var(--spacing-30) var(--spacing-40); z-index: 2; } .minyfied .actionPrimary { padding: 0px; } .actionBarComponent .actionPrimary > div:not(.cta) { margin-right: var(--spacing-30); } .minyfied .actionPrimary .cta { flex-grow: 1; justify-content: center; } .actionBarComponent .actionSecondary { padding-top: var(--radius-20); position: relative; top: calc(-1 * var(--radius-20)); background-color: var(--color-black-tone-10); font: var(--font-body); color: var(--color-white-tone-10); z-index: 1; border-radius: 0px 0px var(--radius-20) var(--radius-20); } .actionBarComponent .actionSecondary > * { opacity: 0.6; } .actionBarComponent .actionSecondary:hover > * { opacity: 1; } .actionBarComponent .actionSecondary p { margin: 0px var(--spacing-20); padding: var(--spacing-30) 0px; } /* -------------------------- MODAL GALLERY -------------------------- */ .modalGallery { width: 100%; height: 100%; top: 0px; left: 0px; position: fixed; z-index: 101; display: none; } .modalGallery > div { display: none; } /* -------------------------- PLAYER COMPONENT -------------------------- */ .playerComponent.stories { width: 41.61554192229039vh; /* use VH, unit based on viewport height */ height: 73.92638036809817vh; max-width: 407px; aspect-ratio: 723 / 407; /* used for opera who does not support VH */ position: relative; overflow: hidden; margin: auto; border-radius: var(--radius-30); } .playerWrapper { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: var(--color-secondary); } .playerComponent.stories .overlay { z-index: 1; background: var(--gradient-overlay-storyplayer); } /* PLAYER CONTROLS*/ .stories .playerControls.hflex { position: relative; align-items: flex-start; z-index: 2; width: 100%; padding: var(--spacing-40); } .playerControls .playerProgress { width: 100%; } .playerControls .playerProgress li { height: var(--spacing-10); position: relative; border-radius: 2px; overflow: hidden; margin-bottom: var(--spacing-30); margin-right: var(--spacing-15) !important; } .playerProgress .progressBar { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; background-color: var(--color-white-tone-05); } .progress { background-color: var(--color-primary); position: relative; left: 0px; top: 0px; width: 0%; height: 100%; transition: all 0.3s cubic-bezier(0.06, 0.91, 0.4, 1.01); -webkit-transition: all 0.3s cubic-bezier(0.06, 0.91, 0.4, 1.01); } .stories .modalCaption { margin-left: var(--spacing-15); } .modalCaption .modalCaptionTitle, .modalCaption .modalCaptionTitle { font: var(--font-CTA); margin-bottom: var(--spacing-10); } .modalCaption .modalCaptionSubtitle, .modalCaption .modalCaptionSubtitle { font: var(--font-body-small); opacity: 0.6; } .modalCaption .modalCaptionTitle { margin-bottom: 0px; } /* .modalCaption .modalCaptionSubtitle{max-height: 14px;} */ .modalCaption .modalCaptionTitle, .modalCaption .modalCaptionSubtitle { color: var(--color-white) !important; } .stories .playerWrapper .sectionLogo { margin-top: auto; margin-bottom: var(--spacing-30); } .stories .playerWrapper .tripAdvisorComponent, .stories .playerWrapper .ico.logo-alt, .stories .playerWrapper .actionBarComponent { z-index: 3; position: relative; } .stories .playerWrapper .actionSecondary { padding-left: var(--spacing-50); padding-right: var(--spacing-50); z-index: 1; position: relative; } /* -------------------------- TAGS -------------------------- */ .tag { padding: 2px 4px; margin-left: var(--spacing-20); font: var(--font-tag); color: var(--color-white); border-radius: 4px; } .blue { background-color: var(--color-primary); } .red { background-color: var(--color-red-dalhmad); } /* -------------------------- TRIPADVISOR COMP -------------------------- */ .tripAdvisorComponent p { font: var(--font-body-small); } .tripAdvisorComponent p .rating { font-weight: var(--font-weight-bold) !important; margin-right: var(--spacing-20); } .tripAdvisorComponent p .ratingLegend { opacity: 0.6; } .tripAdvisorComponent a:hover p .ratingLegend { opacity: 1; } /* -------------------------- SLIDER COMPONENT -------------------------- */ .swipeComponent { } .swipeComponent .swipeViewport { position: relative; width: 100%; } .swipeComponent .itemWrapper { width: 100%; position: relative; } .swipeComponent .itemWrapper.vflex { align-items: start !important; } .swipeComponent .item { position: relative; flex-grow: 1; width: 100%; margin-right: var(--spacing-20); } .swipeComponent .item:last-child { margin-right: 0px; } /* -------------------------- CARD COMPONENT -------------------------- */ /* GENERAL */ .cardComponent { width: 100%; position: relative; border-radius: var(--radius-20); box-shadow: var(--shadow-form-10); } .cardComponent .cardPic { width: 100%; background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: var(--radius-20); overflow: hidden; } /* PRODUCT */ /* & */ /* STORIES */ .cardComponent.product, .cardComponent.stories { background-color: var(--color-white); /* overflow: hidden; */ transition: all 0.3s cubic-bezier(0.06, 0.91, 0.4, 1.01); -webkit-transition: all 0.3s cubic-bezier(0.06, 0.91, 0.4, 1.01); } .cardComponent.product:hover { background-color: var(--color-secondary); } .cardComponent.product .tag, .cardComponent.stories .tag { position: absolute; left: -3px; top: -3px; z-index: 3; margin-left: 0px; } .cardComponent.product .cardPic, .cardComponent.stories .cardPic { height: 226px; position: relative; border-radius: var(--radius-20); overflow: hidden; /* transition: background-size 6s cubic-bezier(.63,.01,.35,1); -webkit-transition: background-size 6s cubic-bezier(.63,.01,.35,1); */ } .cardComponent.product .cardPic .overlay, .cardComponent.stories .cardPic .overlay { background: var(--gradient-overlay-card-10-default) !important; } .cardComponent.product:hover .cardPic .overlay { background: var(--gradient-overlay-card-10-active) !important; } .cardComponent.product .cta, .cardComponent.stories .cta.square { z-index: 3; width: var(--sizing-cta-w-100); margin: auto; position: absolute; bottom: -23px; opacity: 0; transition: bottom 0.3s cubic-bezier(0.06, 0.91, 0.4, 1.01); -webkit-transition: bottom 0.3s cubic-bezier(0.06, 0.91, 0.4, 1.01); } .cardComponent.product:hover .cta { bottom: 0px; opacity: 1; } .cardComponent.product .cardContent, .cardComponent.stories .cardContent { text-align: center; padding: var(--spacing-40) var(--spacing-30) var(--spacing-45) var(--spacing-30); } .cardComponent.product .cardTitle, .cardComponent.stories .cardTitle { font: var(--font-CTA); margin-bottom: var(--spacing-10); } .cardComponent.product .cardSubtitle, .cardComponent.stories .cardSubtitle { font: var(--font-body-small); opacity: 0.6; } .cardComponent.product:hover .cardTitle, .cardComponent.product:hover .cardSubtitle { color: var(--color-white) !important; } /* STORIES */ .cardComponent.stories { box-shadow: none; cursor: pointer; } .cardComponent.stories .cardContent { text-align: left; padding-bottom: 0px; } .cardComponent.stories .cta.square { position: absolute; left: var(--spacing-30); bottom: var(--spacing-30); opacity: 1; } /* BOATS */ /* & */ /* SMALL BOATS */ .cardComponent.boat { background-color: var(--color-secondary); } .cardComponent.boat.small { background-color: var(--color-white); box-shadow: none; } .cardComponent.boat .frame { position: relative; z-index: 1; border-radius: var(--radius-20); overflow: hidden; } .cardComponent.boat.small .frame { border-radius: 0px; } .cardComponent.boat .boatPic { position: absolute; z-index: 2; background-size: contain; } .boatPic.LM { width: 144px; height: 220px; right: 14px; top: -77px; background: url(assets/boat/boat-lm.png) center no-repeat; } .boatPic.DM { width: 181px; height: 200px; right: 10px; top: -60px; background: url(assets/boat/boat-dm.png) center no-repeat; } .cardComponent.boat.small .boatPic { position: absolute; left: 0px; right: initial; top: 0px; bottom: initial; width: var(--sizing-boatpic-100) !important; height: var(--sizing-boatpic-100) !important; } .cardComponent.boat.small .boatPic.LM { background-size: 50%; background-position-y: 5px; } .cardComponent.boat.small .boatPic.DM { background-size: 60%; background-position-y: 20px; } .cardComponent.boat .cardPic { height: 220px; position: absolute; top: 0px; left: 0px; z-index: 1; background-image: url(assets/bg/hero-bg.jpg); background-size: cover; transition: none; } .cardComponent.boat:hover .cardPic { background-size: cover; } .cardComponent.boat.small .cardPic { position: relative; width: var(--sizing-boatpic-100) !important; min-width: var(--sizing-boatpic-100) !important; height: var(--sizing-boatpic-100) !important; border-radius: var(--radius-20); overflow: hidden; background-position-y: -230px !important; background-size: 400% !important; } .cardComponent.boat .cardPic .overlay { background: var(--gradient-overlay-card-20) !important; } .cardComponent.boat.small .cardPic .overlay { background: var(--gradient-overlay-card-10-default) !important; } .cardComponent.boat .cardContent { position: relative; margin-top: var(--spacing-90); padding: var(--spacing-40); z-index: 2; } .cardComponent.boat.small .cardContent { margin-top: initial; padding: initial; padding-left: var(--spacing-40); box-sizing: border-box; } .cardComponent.boat:not(.small) .cardContent h4, .cardComponent.boat:not(.small) .cardContent .cardSubtitle, .cardComponent.boat:not(.small) .cardContent .cardDescription, .cardComponent.boat:not(.small) .profilTitle, .cardComponent.boat:not(.small) .profilSubtitle, .cardComponent.boat:not(.small) .profilSubtitle span { color: var(--color-white); } .cardComponent.boat .cardContent .cardSubtitle, .cardComponent.boat.small .cardContent .cardDescription { opacity: 0.6; } .cardComponent.boat:not(.small) .cardContent .cardDescription { font: var(--font-subtitle); font-size: 16px !important; line-height: 24px !important; margin: var(--spacing-40) 0px; } .cardComponent.boat .cardContent h4 { margin-bottom: var(--spacing-20); } .cardComponent.boat .cardContent h4, .cardComponent.boat.small .cardContent .cardSubtitle { margin-bottom: var(--spacing-10); } .cardComponent.boat.small .cardContent h4 { font: var(--font-body); font-weight: var(--font-weight-extrabold); } /* -------------------------- METRIC COMPONENT -------------------------- */ .metricsComponent { width: 100%; max-width: 313px; padding: var(--spacing-50); border: 1px solid var(--color-primary-tone-10); border-radius: var(--radius-20); background-color: var(--color-white); } .metricsComponent li:not(li:last-of-type) { border-bottom: 1px solid var(--color-black-tone-01); padding-bottom: var(--spacing-30); margin-bottom: var(--spacing-30); } .metricsComponent li .picto { margin-right: var(--spacing-30); } .metricsComponent li .metricsNum { font: var(--font-metrics); margin-right: var(--spacing-10); } .metricsComponent li .metricsLegend p:first-child { font: var(--font-body-small); opacity: 0.6; } .metricsComponent li .metricsLegend p:last-child { font: var(--font-surtitle); } /* -------------------------- ACCORDION COMP -------------------------- */ .accordionComponent { position: relative; margin-top: 47px; } .accordionComponent .item { padding: var(--spacing-50) 0px; border-bottom: 1px solid var(--color-black-tone-01); } .accordionComponent .item:last-child { border-bottom: 0px; } .accordionComponent .accordionTitle { box-sizing: border-box; padding-right: 47px; position: relative; cursor: pointer; } .accordionComponent .accordionTitle:after { position: absolute; content: ""; width: 47px; height: 100%; top: 0px; right: 0px; background: url("assets/ico/arrow-down.svg") center no-repeat; } .accordionComponent .active .accordionTitle:after { transform: rotate(-180deg); } .accordionComponent .accordionContent { height: 0px; overflow-y: hidden; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } .accordionComponent .accordionContent .contentWrapper { padding-top: var(--spacing-40); } .accordionComponent .active .accordionContent .contentWrapper { height: auto; } .accordionComponent .item .accordionDescription { opacity: 0.6; margin-top: var(--spacing-40); } .accordionComponent .item .accordionDescription:first-child { margin-top: 0px; } /* -------------------------- GALLERY COMP -------------------------- */ .galleryComponent { position: relative; height: 242px; } .galleryComponent .img { max-width: 100%; position: relative; z-index: 3; flex-grow: 1; overflow: hidden; border-radius: var(--radius-20); } .galleryComponent.vflex.col-6633 > div:first-child { padding-right: var(--spacing-20); box-sizing: border-box; } .galleryComponent.vflex.col-6633 > div:last-child .img:first-child { margin-bottom: var(--spacing-20); } .img .overlay { background: var(--gradient-overlay-card-10-default) !important; } /* -------------------------- FORM STEPPER COMP -------------------------- */ .formComponent.stepper { background-color: var(--color-white); border-radius: var(--radius-20); box-shadow: var(--shadow-form-10); overflow: hidden; min-width: 299px; } .formComponent.stepper .stepWrapper.vflex { width: 100%; position: relative; left: 0px; /* important for the animation */ align-items: flex-start; transition: all 0.5s cubic-bezier(0.39, 0.97, 0.3, 0.99); -webkit-transition: all 0.5s cubic-bezier(0.39, 0.97, 0.3, 0.99); } .formInfo { margin-top: var(--spacing-20); } /* STEPS */ .stepWrapper .step { min-width: 100%; padding: var(--spacing-45) var(--spacing-40); } .step .stepBack .cta.tertiary { height: auto !important; margin-bottom: var(--spacing-20); } /* PRICE */ .productPrice.vflex { position: relative; justify-content: space-between; margin-top: var(--spacing-40); } .productPrice > .priceLegend { align-self: flex-end; margin-bottom: 4px; } .productPrice .price { font: var(--font-h4); font-weight: var(--font-weight-extrabold); } .productPrice .tooltip { padding: var(--spacing-20); background-color: var(--color-white); border-radius: var(--radius-10); box-shadow: var(--shadow-form-20); position: absolute; top: 100%; z-index: 5; width: 70%; height: 0px; overflow: hidden; box-sizing: border-box; transform: translateY(0%); -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; opacity: 0; } .productPrice .tooltip.active { /* transform: translateY(0%); */ opacity: 1; height: auto; width: 70%; -webkit-animation: 0.3s cubic-bezier(0.39, 0.97, 0.3, 0.99) both fadeInUp; animation: 0.3s cubic-bezier(0.39, 0.97, 0.3, 0.99) both fadeInUp; } .productPrice .tooltip h5 { margin-bottom: var(--spacing-15); } .productPrice .tooltip li:not(:last-child) { border-bottom: 1px solid var(--color-black-tone-01); margin-bottom: var(--spacing-10); padding-bottom: var(--spacing-10); } .productPrice .tooltip li.vflex .lineValue, .productPrice .tooltip li.vflex .lineLegend { font-size: var(--font-body-tiny) !important; } .productPrice .tooltip li.vflex .lineValue { margin-left: auto; font-weight: var(--font-weight-extrabold); } .productPrice .tooltip .close { /* text-align: center; */ text-decoration: underline; font: var(--font-body-small); margin-top: var(--spacing-15); cursor: pointer; opacity: 0.6; } .productPrice .priceLegend, .formInfo { opacity: 0.6; font: var(--font-body-small); } .js_tooltip.active { cursor: pointer; text-decoration: underline; } /* FIELD CLUSTER */ .fieldSet { margin-top: var(--spacing-45); } /* FORM ACTION AREA */ .formActionArea.getBehind { z-index: 0; /* Let SelectInput in first plan*/ } .formActionArea .cta.vflex { justify-content: center; } .formActionArea { padding: var(--spacing-20) var(--spacing-40) var(--spacing-50) var(--spacing-40); } .formActionArea .formActionWrapper { margin-bottom: var(--spacing-20); height: var(--sizing-cta-h-20); overflow: hidden; opacity: 1; } .formActionArea .formActionWrapper.disabled { opacity: 0.5; pointer-events: none; cursor: default; } .formActionArea .cta.cta.tertiary p { font-size: var(--font-size-30); } /* FORM FEEDBACK STEP */ .formFeedback.hflex { display: none; } .formFeedback.hflex.show { display: flex; } .formFeedback .tag { margin: 0px 0px var(--spacing-40) 0px; } .formFeedback h4 { margin: var(--spacing-20) var(--spacing-10) 0px var(--spacing-40); font-weight: var(--font-weight-extrabold); } .feedbackSubtitle { margin-bottom: var(--spacing-40); } .formFeedback .feedBackMessage { width: 100%; } .feedBackMessage.vflex { border-radius: var(--radius-10); padding: var(--spacing-40); align-items: flex-start !important; } .feedBackMessage.neutral { background-color: var(--color-feedback-neutral-grey-10); } .feedBackMessage p.feedBackText { font: var(--font-body-small); opacity: 0.6; } .feedBackMessage .ico { max-width: 24px !important; height: 24px !important; margin-right: var(--spacing-20); } .formFeedbackLoader.vflex { width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; background-color: var(--color-white); justify-content: center !important; z-index: 1; } .formFeedbackLoader.vflex .ico { width: 28px !important; height: 28px !important; } ul.stepWrapper li:last-child { position: relative; } /* -------------------------- CAROUSEL COMP -------------------------- */ .carouselComponent { background-color: grey; border-radius: var(--radius-20); overflow: hidden; position: relative; width: 100%; height: 446px; } /* CAROUSEL ITEMS */ .carouselComponent .itemWrapper { position: relative; left: 0px; transition: all 0.6s cubic-bezier(0.8, 0, 0.3, 1); -webkit-transition: all 0.6s cubic-bezier(0.8, 0, 0.3, 1); } .carouselComponent .itemWrapper li { position: relative; width: 100%; min-width: calc(100% + 1px); height: 100%; } .carouselComponent .itemWrapper li .overlay { background: var(--gradient-overlay-card-10-default); } /* CAROUSEL CONTROLS */ .carouselControls { position: absolute; bottom: 0px; left: 0px; width: 100%; padding-bottom: var(--spacing-60); z-index: 3; } .carouselControls .vflex { margin: auto; justify-content: center; } .carouselControls .overlay { background: var(--gradient-overlay-carousel); z-index: 1; } /* Carousel Titles */ .carouselControls .carouselTitles, .carouselControls .carouselDots { position: relative; z-index: 2; } .carouselTitles { height: calc(var(--font-size-40) + 4px); overflow-y: hidden; } .carouselTitles .titleWrapper { position: relative; top: 0px; align-self: flex-start; transition: all 0.6s cubic-bezier(0.8, 0, 0.3, 1) 0.1s; -webkit-transition: all 0.6s cubic-bezier(0.8, 0, 0.3, 1) 0.1s; } .carouselTitles p { font: var(--font-body); font-weight: var(--font-weight-extrabold); color: var(--color-white); text-align: center; } .carouselTitles .carouselPrevControl, .carouselTitles .carouselNextControl { width: var(--sizing-cta-h-20); height: var(--sizing-cta-h-20); background: url("assets/ico/arrowBig-left-w.svg") center no-repeat; opacity: 0.6; z-index: 4; cursor: pointer; } .carouselTitles .carouselNextControl { background: url("assets/ico/arrowBig-right-w.svg") center no-repeat; } .carouselTitles .carouselNextControl:hover, .carouselTitles .carouselPrevControl:hover { opacity: 1; } /* Carousel dots */ .carouselControls .carouselDots { height: var(--spacing-15); margin-top: var(--spacing-40); } .carouselDots li { width: var(--spacing-15); height: var(--spacing-15); border-radius: calc(var(--spacing-15) / 2); background-color: var(--color-white); margin-right: var(--spacing-20); } .carouselDots li:last-child { margin-right: 0px; } .carouselDots li.current { background-color: var(--color-primary); } /* -------------------------------------------------------------- -------------------------------------------------------------- D.SPECIFICS ORDER PAGE -------------------------------------------------------------- -------------------------------------------------------------- */ /* -------------------------- ORDER TOPBAR -------------------------- */ #order_page .topbar { /* define sizing vars */ --topbar-h: var(--sizing-topbar-h-20); } #order_page .topbarWrapper { border-bottom: 1px solid var(--color-white); } #order_page .topbar.fixed .topbarWrapper { border-bottom: 1px solid var(--color-black-tone-01); /* Change style on scroll if necesaarry*/ } /* -------------------------- ORDER HEADER -------------------------- */ #order_page header { z-index: 2; position: relative; } header .sectionTitle h1, header .sectionSurtitle { color: var(--color-white); } /* -------------------------- ORDER HERO -------------------------- */ #order_page .bannerSection#order_hero { position: absolute; top: var(--sizing-topbar-h-20); left: 0px; height: 362px; z-index: 0; } #order_page .bgContent .layer.backlayer { background: url(assets/bg/banner-groupe-bg.jpg) top center no-repeat; background-size: cover; z-index: 1; } #order_page .bgContent .overlay { background: var(--gradient-overlay-footer) !important; } /* -------------------------- ORDER CONTENT -------------------------- */ /* SECTION */ #order_page #product_description { z-index: 3; } #order_page #product_description .centered > .col:nth-child(2) { padding-left: var(--spacing-80); box-sizing: border-box; } /* DESCRIPTION */ .sectionDescription { margin-bottom: var(--spacing-40); } /* WITH */ .sectionWith { margin-bottom: var(--spacing-30); } /* FORM */ #order_page .formComponent.stepper { position: sticky; top: calc(var(--sizing-topbar-h-20) + var(--spacing-60)); } /* -------------------------- ORDER RADE -------------------------- */ #order_page section#rade { margin-top: var(--spacing-80); } #order_page section#rade .centered { padding: 0px 0px; z-index: 2; } #order_page .metricsComponent { width: 100%; max-width: none; display: flex; justify-content: flex-start; flex-direction: row; align-items: center; } #order_page .metricsComponent { margin-top: var(--spacing-50); } #order_page .metricsComponent li:not(li:last-of-type) { border-bottom: 0px; padding-bottom: 0px; margin-bottom: 0px; padding-right: var(--spacing-30); margin-right: var(--spacing-30); border-right: 1px solid var(--color-black-tone-01); } #order_page section#rade .cta { position: relative; justify-content: center; } /* -------------------------- CLOSE RADE -------------------------- */ #close_page .fieldset { margin-top: 50px; } #close_page .fieldset > div { margin-bottom: 20px; } /* -------------------------- CTA -------------------------- */ .cta{ overflow: hidden; cursor: pointer; } /* Primary */ /* & */ /* Squarre */ .cta.primary, .cta.primary.square, .cta.expend, .cta.primary.inverted:hover{ height: var(--sizing-cta-h-20); padding: 0px var(--spacing-45); background-color: var(--color-primary); border-radius: var(--radius-10); box-shadow: var(--shadow-btn-10); } .disabled .cta > p{ text-decoration: line-through; opacity: .7; } .cta.disabled{ opacity: .5; cursor: default; } #events .cardComponent .cta.disabled{ margin-top: var(--spacing-30); } .cta.primary:hover, div:hover > .cta.inherit, .cta.primary.inverted, .cta.primary.square.active{ background-color: var(--color-secondary); } .cta.primary p{ font: var(--font-CTA); color: var(--color-white); } /* Primary Squarre , Round & Exepend */ .cta.square, .cta.primary.square{ width: var(--sizing-cta-h-20) !important; padding: 0px; } .cta.round{ border-radius: calc(var(--sizing-cta-h-20) / 2) !important; } /* Primary Expend */ .cta.primary.expend.vflex{ width: var(--sizing-cta-h-20) !important; padding: 0px; justify-content: center; transition: all .3s cubic-bezier(.09,.66,.69,.95); -webkit-transition: all .3s cubic-bezier(.09,.66,.69,.95); } .cta.primary.expend p{ width: 0px; opacity: 0; } .cta.primary.expend:hover, .cta.primary.expend:hover p{ width: auto !important; opacity: 1; } .cta.primary.expend:hover{ padding: 0px var(--spacing-45); } /* Tertiary */ .cta.tertiary{ height: var(--sizing-cta-h-10); font: var(--font-links); } .cta.tertiary.shortline{ height: auto !important; margin-top: auto; } .cta.tertiary:hover p{ color: var(--color-primary) !important; } .scale{ transform : scale(1.3); transition: all .3s cubic-bezier(.09,.66,.69,.95); -webkit-transition: all .3s cubic-bezier(.09,.66,.69,.95); } /* -------------------------------------------------------------- -------------------------------------------------------------- A. ICONS -------------------------------------------------------------- -------------------------------------------------------------- */ /* -------------------------- ICONS CONTAINERS -------------------------- */ /* PICTO */ .picto{ width: var(--sizing-cta-h-10); height: var(--sizing-cta-h-10); border: 2px solid var(--color-tertiary); border-radius: 100%; overflow: hidden; box-shadow: var(--shadow-btn-10); } /* ICO */ .ico, .ico.inline{ width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; } .ico.inline{ display: inline-block; width: 20px; height: 20px; } .ico.before, .expend:hover .ico.before{margin-right: var(--spacing-15);} .ico.after, .expend:hover .ico.after{margin-left: var(--spacing-15);} .expend .ico.before{margin-right: 0px;} .expend .ico.after{margin-left: 0px;} /* EXCEPTIONS */ .shortline .ico.arrow-right-b{ width: 10px; background-position: center 60%; } .ico.inline.ico.ctaBoat{width: 38px; height: 29px;} .ico.logo-alt{ width: 157px !important; height: 72px !important; margin: 0 auto var(--spacing-30) auto; } /* ALL */ .ico.arrow{background-image: url('assets/ico/arrow.svg');} .ico.mail-w{background-image: url('assets/ico/mail-w.svg');} .ico.burger{background-image: url('assets/ico/burger.svg');} .ico.plus{background-image: url('assets/ico/plus.svg');} .ico.plus_w{background-image: url('assets/ico/plus_w.svg');} .ico.crux{background-image: url('assets/ico/crux.svg');} .ico.crux_w{background-image: url('assets/ico/crux_w.svg');} .ico.arrow-right-w{background-image: url('assets/ico/arrow-right-w.svg');} .ico.arrow-right-b{background-image: url('assets/ico/arrow-right-b.svg');} .ico.arrow-left-b{background-image: url('assets/ico/arrow-left-b.svg');} .ico.arrowBig-right-w{background-image: url('assets/ico/arrowBig-left-w.svg');} .ico.arrowBig-left-w{background-image: url('assets/ico/arrowBig-left-w.svg');} .ico.ctaBoat{background-image: url('assets/ico/ctaBoat.svg');} .ico.star{background-image: url('assets/ico/star.svg');} .ico.gift{background-image: url('assets/ico/gift.svg');} .ico.ticket{background-image: url('assets/ico/ticket.svg');} .ico.warning-b{background-image: url('assets/ico/warning-b.svg');} .ico.tel-w{background-image: url('assets/ico/tel-w.svg');} .ico.tel-b{background-image: url('assets/ico/tel-b.svg');} .ico.pause{background-image: url('assets/ico/pause.svg');} .ico.spinner{background-image: url('assets/ico/spinner.svg');} .ico.play{ background-image: url('assets/ico/play.svg'); background-position-x: 55%; } .active .ico.play{ background-image: url('assets/ico/pause.svg'); background-position-x: center !important; } .ico.boat{background-image: url('assets/ico/boat.svg');} .ico.coasts{background-image: url('assets/ico/coasts.svg');} .ico.species{background-image: url('assets/ico/species.svg');} .ico.echappee{background-image: url('assets/ico/echappee.svg');} .ico.thalassa{background-image: url('assets/ico/thalassa.svg');} .ico.france3iroise{background-image: url('assets/ico/france3iroise.svg');} .ico.cgfinister-c{background-image: url('assets/ico/cgfinister-c.svg');} .ico.parcarmo-c{background-image: url('assets/ico/parcarmo-c.svg');} .ico.regionbretagne-c{background-image: url('assets/ico/regionbretagne-c.svg');} .ico.logo-alt{background-image: url('assets/logo/logo-footer.svg');} .ico.logo-topbar{background-image: url('assets/logo/logo-topbar.svg');} /* -------------------------------------------------------------- -------------------------------------------------------------- D.FORM -------------------------------------------------------------- -------------------------------------------------------------- */ /* -------------------------- FIELDSET -------------------------- */ .fieldSet > div:not(:last-child){ margin-bottom: var(--spacing-20); } .fieldSet > div.col-5050 > div:first-child{ margin-right: calc(var(--spacing-20) / 2); } .fieldSet > div.col-5050 > div:last-child{ margin-left: calc(var(--spacing-20) / 2); } /* -------------------------------------------------------------- -------------------------------------------------------------- D.INPUTS -------------------------------------------------------------- -------------------------------------------------------------- */ .textInput, .textInput.focus, .textInput .underline, .textInput.focus .underline, .textInput .placeholder, .textInput .placeholder div, .textAreaInput, .textAreaInput.focus, .textAreaInput .placeholder, .textAreaInput .placeholder div { transition: all .15s ease-out; -webkit-transition: all .15s ease-out; } /* -------------------------- TEXT INPUT -------------------------- */ .textInput{ width: 100%; position: relative; flex-grow: 1; overflow: hidden; height: var(--sizing-field-h-10); padding: var(--spacing-20) 47px var(--spacing-20) var(--spacing-20); background-color: var(--color-white); border: 1px solid var(--color-tertiary); border-radius: var(--radius-10); } input[type=text], input[type=password]{ min-width: 100%; max-width: 100%; height: 100%; border: none; outline: none; text-align: left; background-color: transparent; word-wrap: break-word; word-break: break-word; position: absolute; top: 0px; left: 0px; box-sizing: border-box; padding-top: 0; padding: var(--spacing-20); font: var(--font-subtitle); } .focus input[type=text], .focus input[type=password]{ padding-top: 30px; } input:-webkit-autofill { padding-top: 0px !important; -webkit-box-shadow: 0 0 0 1000px var(--input-backgroundColor-default) inset !important; } input:-webkit-autofill:focus { padding-top: 0px !important; } /* PLACEHOLDER */ .textInput .placeholder, .textAreaInput .placeholder{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; padding-left: var(--spacing-20); background-color: var(--color-white); } .placeholder.vflex > div:nth-child(1){ flex-grow: 1; } .textInput.focus .placeholder, .textAreaInput.focus .placeholder{ top: var(--spacing-20); /* top: 15px; */ height: var(--font-size-20); } .textInput .placeholder > div, .textAreaInput .placeholder > div{ color: var(--color-black-tone-10) !important; font: var(--font-body-small) !important; } .textInput.focus .placeholder > div .textAreaInput.focus .placeholder > div{ font: var(--font-body-small) !important; /* Same */ } /* UNDERLINE */ .textInput .underline{ display: none; width: 100%; height: 1px; position: absolute; bottom: 0; left: 0; background-color: var(--color-primary); } .textInput.focus .underline div {width: 100%;} /* ERROR */ .textInput.error, .textAreaInput.error{border-color: var(--color-feedback-error-red-10)}; .textInput .placeholder div, .textInput.focus .placeholder div, .textAreaInput .placeholder div, .textAreaInput.focus .placeholder div{ color: inherit !important;} * .textInput.error .placeholder div, * .textInput.error.focus .placeholder div, * .textAreaInput.error .placeholder div, * .textAreaInput.error.focus .placeholder div{color: var(--color-feedback-error-red-10) !important;} .textInput.error .underline div, .textInput.error .underline{ background-color: var(--color-feedback-error-red-10); } /* -------------------------- TEXT INPUT DATE -------------------------- */ .textInput[data-dateType="line"] input[type=text]{ min-width: auto !important; max-width: auto !important; position: relative; padding-left: 0px; padding-right: 0px; } .textInput[data-dateType="line"] input[type=text]:nth-of-type(1), .textInput[data-dateType="line"] input[type=text]:nth-of-type(2){ width: 28px; } .textInput[data-dateType="line"] input[type=text]:nth-of-type(3){ width: 56px; } .textInput[data-dateType="line"] .dateDivider{ padding-top: var(--spacing-40); font: var(--font-subtitle); opacity: 0; } .textInput[data-dateType="line"].focus .dateDivider{ opacity: 1; } /* -------------------------- TEXT AREA -------------------------- */ .textAreaInput{ position: relative; height: var(--sizing-field-h-10); border: 1px solid var(--color-tertiary); border-radius: var(--radius-10); box-sizing: border-box; overflow: hidden; } .textAreaInput .placeholder{ z-index: 1; } .textAreaInput textarea{ border-radius: var(--radius-10); position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; min-height: 100%; resize: none; padding: var(--spacing-20); overflow: hidden; z-index: 0; box-sizing: border-box; padding: var(--spacing-20); font: var(--font-body-small); border: none; } .textAreaInput textarea:focus{ outline: none; } .textAreaInput.focus textarea{ height: initial; min-height: initial; padding: 30px var(--spacing-20) var(--spacing-20) var(--spacing-20); } /* -------------------------- RADIO -------------------------- */ .radioInput{ width: 100%; } .radioInput .radioOption{ width: 100%; position: relative; flex-grow: 1; overflow: hidden; height: var(--sizing-field-h-10); padding: var(--spacing-20); background-color: var(--color-white); border: 1px solid var(--color-tertiary); border-radius: var(--radius-10); /* margin-bottom: var(--spacing-20); */ cursor: pointer; } .radioInput .radioOption:not(:first-child){ margin-left: var(--spacing-20); } .radioOption .box{ width: var(--sizing-fieldbox-h-10); height: var(--sizing-fieldbox-h-10); min-width: var(--sizing-fieldbox-h-10); min-height: var(--sizing-fieldbox-h-10); border-radius: calc(var(--sizing-fieldbox-h-10) / 2); border: 1px solid var(--color-tertiary); padding: 3px; margin-right: var(--spacing-15); } .radioOption .box > div{ width: 100%; height: 100%; border-radius: 50%; position: relative; background-color: var(--color-primary); display: none; } .radioOption.selected .box > div{ display: block; } .radioOption .labelTitle{ font: var(--font-subtitle); } .radioOption .labelSubtitle{ font: var(--font-body-small); color: var(--color-black-tone-10); } .radioInput input[type="radio"] { position: absolute; opacity: 0; cursor: pointer; } /* -------------------------------------------------------------- -------------------------------------------------------------- A. SELECT -------------------------------------------------------------- -------------------------------------------------------------- */ /* -------------------------- SELECT -------------------------- */ .selectInput select{display: none;} .selectInput{ position: relative; padding: var(--spacing-20) 47px var(--spacing-20) var(--spacing-20); cursor: pointer; /* overflow: hidden; */ } .selectInput .frame{ width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; border: 1px solid var(--color-tertiary); border-radius: var(--radius-10); z-index: 3; pointer-events: none; /* click through element */ } .selectInput.active .frame{ z-index: 6; } .selectInput .selected{ height: 45px; width: 100%; position: relative; z-index: 3; } .selectInput.active .selected{ z-index: 6; } .selectInput .selected:after{ position: absolute; content: ''; width: var(--sizing-cta-h-20); height: 100%; top: 0px; right: calc(-1 * var(--sizing-cta-h-20)); background: url('assets/ico/arrow-down.svg') center no-repeat; } .selectInput.active{ z-index: 1000; } .selectInput .overlay{ display: none; z-index: 4; background: var(--gradient-overlay-card-10-active) !important } .selectInput.active .overlay{ display: block; position: fixed; } .selectInput.active .selected:after{ transform: rotate(-180deg); } .selectInput .selected .placeholder{ position: absolute; top: 0px; left: 0px; font: var(--font-body-small); opacity: 0.6; } .selectInput .selected .selectedOption{ position: absolute; bottom: 0px; left: 0px; font: var(--font-subtitle); line-height: initial !important; } /* -------------------------- SELECT LIST -------------------------- */ .selectInput .optionList{ z-index: 2; position: absolute; top: 0px; left: 0px; height: 100%; padding-top: 65px; width: 100%; background-color: var(--color-white); box-shadow: 0px; border-radius: var(--radius-10); overflow: hidden; } .selectInput.active .optionList{ height: auto; box-shadow: var(--shadow-form-10); z-index: 5; } .selectInput .optionList li{ width: 100%; padding: 15px 26px; box-sizing: border-box; } /* .selectInput .optionList li:last-child{ padding-bottom: 30px !important; } */ .selectInput .optionList li:hover, .selectInput .optionList li.current:hover{ background-color: var(--color-primary-alpha-20); } .selectInput .optionList li.current{ background-color: var(--color-primary-alpha-20); } .optionSubtitle, .optionTitle{font: var(--font-body);} .optionTitle{ font-weight: var(--font-weight-extrabold); } .optionSubtitle{ opacity: 0.6; } /* -------------------------------------------------------------- -------------------------------------------------------------- A. TOGGLE OPTION -------------------------------------------------------------- -------------------------------------------------------------- */ /* -------------------------- OPTION FIELD -------------------------- */ .optionField > div:not(.selected) { display: none; } /* KEYBOARD VISIBLE ADJUSTMENTS */ body.keyboard-visible .formActionArea { display: none !important; } body.keyboard-visible footer { display: none !important; } body.keyboard-visible .topbar.fixed { position: absolute !important; } /*1024*/ @media screen and (max-width: 1080px) { /* -------------------------- FLUIDITY -------------------------- */ /* CENTERING */ .centered{ width: 87.3046875%; } .topbar .centered{ width: 100%; padding: 0 var(--spacing-30); } /* WRAP */ #order_page section#rade .centered.vflex, #order_page #product_description .cardComponent.boat .frame.vflex, section#faq .centered.vflex, .list.priceTalbeComponent.vflex, footer .sectionContent.vflex{ flex-direction: column !important; } /* SIZING */ header h1{ width: 60%; } #order_page header h1, #order_page section#rade .centered.vflex.col-5050 > div, section#faq .centered.vflex.col-5050 > div{ width: 100%; } /* .topbar .centered{ padding: 0 var(--spacing-30); } */ /* LANDING BANNER */ .headerPic > div{ width: 100%; height: 401px; right: 0px; bottom: 80px; } /* FAQ HEADER */ #faq .sectionTitle{ text-align: center; padding-left: 90px; } /* BANNER */ .bannerSection .bgContent{ padding: 0 var(--spacing-30); } /* FOOTER */ footer .sectionContent .list:not(.list:last-child){ margin: 0px 0px var(--spacing-50) 0px; } footer .bannerSection .centered.vflex{ max-width: 614px; align-items: flex-start; } footer .sectionLogo .contentWrapper{ width: 100%; } footer .bannerSection .centered.vflex.col-5050{ flex-direction: column !important; padding: var(--spacing-60); } footer .bannerSection .centered.vflex.col-5050 > div{ width: 100%; } footer .sectionContent.vflex{ padding: var(--spacing-60) 0px 0px 0px; } footer .sectionContent li{ font: var(--font-body); } /* PRODUCT COLUMNS */ #order_page #product_description .centered > .col:nth-child(2){ padding-left: var(--spacing-40); } /* PRICE TABLE COMPONENT */ .list.priceTalbeComponent li.hflex{ align-items: flex-start; } .list.priceTalbeComponent li:not(:last-child){ border-right: 0px; border-bottom: 1px solid var(--color-tertiary); margin: 0px 0px var(--spacing-30) 0px; padding: 0px 0px var(--spacing-30) 0px; } /* CARDCOMPONENT BOAT */ .cardComponent.boat.small:first-child{ margin-bottom: var(--spacing-60); } .cardComponent.boat.small .boatPic { left: 50%; transform: translateX(-50%); -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } .cardComponent.boat.small .cardPic{ width: 100% !important; background-position-y: 50% !important; background-size: 167% !important; } .cardComponent.boat.small .frame.vflex{ flex-direction: column !important; } .cardComponent.boat.small .cardContent{ padding: var(--spacing-40) 0px 0px 0px; } /* GALLERY COMPONENT */ .galleryComponent.vflex{ flex-direction: column !important; height: auto; } .vflex.col-6633 > div.stretch:first-child{ height: 230px; width: 100%; align-self: flex-start; padding-right: 0px; margin-bottom: var(--spacing-20); } .vflex.col-6633 > div.stretch img.unwide{ width: 100%; height: auto !important; } .vflex.col-6633 > div.stretch.hflex:last-child{ height: auto !important; width: 100%; align-self: flex-start; flex-direction: row; } .galleryComponent.vflex.col-6633 > div:last-child .img:first-child{ margin-bottom: 0px; margin: 0px var(--spacing-20) 0px 0px; } .vflex.col-6633 > div.stretch:last-child img{ width: calc((100% / 2)); } /* FOCUS */ section .centered.focus{ padding: var(--spacing-30) !important; } section .centered.focus .sectionContent, section .centered.focus .sectionTitle{ padding-right: 0px; } section .centered.focus .sectionTitle{ text-align: center; } section .centered.focus .sectionContent{ margin-bottom: var(--spacing-50); } /* METRICS */ #order_page .metricsComponent{ flex-direction: column !important; } #order_page .metricsComponent li:not(li:last-of-type){ border-right: 0px; border-bottom: 1px solid var(--color-black-tone-01); padding-bottom: var(--spacing-30); margin-bottom: var(--spacing-30); } #order_page .metricsComponent li.vflex{ justify-content: center; align-items: center; } /* FAQ */ #faq .sectionTitle.sticky{ padding-top: calc(var(--sizing-topbar-h-20) + 0); } /* MAIN */ main{ margin-bottom: 0px; } } /* -------------------------------------------------------------- -------------------------------------------------------------- -------------------------------------------------------------- -------------------------------------------------------------- */ /* 768px */ @media screen and (max-width: 767px) { /* -------------------------- ROOT -------------------------- */ :root{ /* FONT STYLES */ /* Titles */ --font-h2: var(--font-weight-semibold) var(--font-size-90)/var(--font-lineheight-80) var(--font-primary); /* Bobdy */ --font-body: var(--font-weight-medium) var(--font-size-20) var(--font-primary); /*16*/ --font-body-small: var(--font-weight-medium) var(--font-size-15) var(--font-primary); /*14*/ --font-subtitle: var(--font-weight-regular) var(--font-size-50)/var(--font-lineheight-10) var(--font-secondary); /* CTAs & Specials */ --font-CTA: var(--font-weight-extrabold) var(--font-size-30) var(--font-primary); /* SPACING */ /* --spacing-50: var(--spacing-60); */ } /* -------------------------- FLUIDITY -------------------------- */ /* CENTERING */ .centered{ width: var(--centering-width-tablet-default);} /* WRAP */ #order_page #product_description .centered.vflex.col-5050, .topbar nav ul.vflex, #landing_page header .bannerSection .centered.vflex.col-5050, #landing_page #voiliers .list.vflex, #landing_page #rade .centered.vflex, #landing_page .bannerSection#groupe .centered.vflex{ flex-direction: column !important; } /* SIZING */ #order_page #product_description .centered.vflex.col-5050 > div, header h1, #landing_page header .bannerSection .centered.vflex.col-5050 > div, header .actionBarComponent, #landing_page #rade .centered.vflex.col-5050 > div, #landing_page #faq .centered.vflex.col-5050 > div, #landing_page .bannerSection#groupe .centered.vflex.col-5050 > div{ width: 100%; } /* MARGIN */ section#faq{ margin-top: var(--spacing-80); } /* -------------------------- SECTIONS -------------------------- */ /* HEADER */ header h1, header .sectionSurtitle{ text-align: center; } #landing_page header .profilComponent.big.vflex.rowflex{ justify-content: center; } /* LANDING BANNER */ .bannerSection#hero{ padding-top: 0px; } #landing_page header .bannerSection .headerContent{ order: 2; text-align: center; } #landing_page header .bannerSection .tripAdvisorComponent{ text-align: center; } .headerPic { height: 323px; order: 1; } .headerPic > div{ height: 323px; bottom: 40px; } #hero .bgContent .layer.backlayer{ background: url(assets/bg/hero-bg.jpg) center -500px no-repeat; } .actionBarComponent .actionPrimary .selectInput, #hero .selectInput .selected, footer .selectInput .selected{ width: 100% !important; } .picto{ min-width: var(--sizing-cta-h-10); } section.bannerSection .tripAdvisorComponent p.vflex{ justify-content: center; } /* VOILIERS */ section#voiliers .list.vflex li:not(:last-child){ margin: 0px 0px var(--spacing-30) 0px; } .boatPic.LM, .boatPic.DM{ width: 100%; height: 160px; right: initial; top: initial; } .boatPic.DM{ height: 158px; } /* RADE */ section#rade .sectionContent, .bannerSection#groupe { text-align: center; } section#rade .sectionContent .cta{ display: none;} section#rade .centered{ padding: 90px 0px var(--spacing-70) 0px } section#rade .sectionContent{ margin-bottom: var(--spacing-20); } /* STORIES */ section#stories .sectionSurtitle{ margin-top: 0px; margin: 0px 0px var(--spacing-20) 0px; } section#stories .sectionTitle { margin-bottom: var(--spacing-45); } section#stories .swipeComponent{ margin-bottom: var(--spacing-45); } section#stories aside .sectionSurtitle{ margin-bottom: var(--spacing-45); } .accordionComponent{ margin-top:0px; } /* METRICS */ #landing_page .metricsComponent{ max-width: 100%; } #landing_page .metricsComponent li{ justify-content: center; } /* BANNER GROUPE */ .bannerSection#groupe .sectionContent .blocklink{ align-self: center; } /* -------------------------- MOBIL MENU -------------------------- */ /* MENU MOBIL */ .topbar .cta.mobilMenu, .topbar nav .mobilLogo{ display: block; } .topbar nav .actionArea{ display: flex; } .topbar .actionArea:first-of-type, .topbar .centered > .logolink:nth-child(1){ display: none; } .topbarWrapper .centered.vflex{ justify-content: center; } .topbar nav{ height: 100%; width: calc(100% - ( 2 * var(--sizing-cta-h-20))); box-sizing: border-box !important; position: fixed; top: 0; left: 0; z-index: 200; background-color: white; padding: 0px var(--spacing-50) var(--spacing-50) var(--spacing-50); display: flex; justify-content: flex-start; flex-direction: column; align-items: center; transform: translateX(-100%); -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; transition: all .3s cubic-bezier(0.06, 0.91, 0.4, 1.01); -webkit-transition: all .3s cubic-bezier(0.06, 0.91, 0.4, 1.01); } .topbar nav.active{ transform: translateX(0%); } .topbar nav ul.vflex{ width: 100%; } nav li.vflex{ width: 100%; height: auto; padding: var(--spacing-40) 0px; cursor: pointer; justify-content: center !important; font-size: var(--font-size-40); } nav li:not(:last-child){ border-bottom: 1px solid var(--color-black-tone-01); } /* -------------------------- FORM -------------------------- */ /* PRODUCT COLUMNS */ #order_page #product_description .centered > .col:nth-child(2){ padding-left: 0px; position: fixed; top: 100%; left: 0px; z-index: 203; } /* FORM */ #order_page .formComponent.stepper{ top: 0%; transform: translateY(-100%); -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; z-index: 250; } /* DRAWER*/ #order_page .formComponent.stepper .stepWrapper.vflex{ height: 45px; z-index: 1; } #order_page .formComponent.stepper .stepWrapper.vflex.active{ height: auto; max-height: calc(100% - var(--sizing-topbar-h-10)); } #order_page .formComponent.stepper .stepWrapper.vflex.active.scroll{ overflow-y: auto; overflow-x: hidden; } .formActionArea{ z-index: 2; position: relative; background: var(--gradient-form-actionArea); box-sizing: content-box; } .formComponent.stepper .tripAdvisorComponent p{ justify-content: center; } /* -------------------------- SWIPECOMPONENT -------------------------- */ .swipeComponent{ --swipeMarge: calc(var(--centering-width-tablet-default) / 2); --parentMarges: calc(100% - var(--centering-width-tablet-default)); --leftMarge: calc( var(--parentMarges) / 2); width: calc(var(--centering-width-tablet-default) + (var(--leftMarge) * 4)); /* background-color: red; */ position: relative; left: calc(-1 * var(--leftMarge)); } .swipeComponent .swipeViewport{ position: relative; width: 100%; } .swipeComponent .itemWrapper.vflex{ align-items: stretch; scroll-snap-type: x mandatory; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; padding: 20px 0; margin: -20px 0; scroll-padding-left: var(--leftMarge); scroll-padding-right: var(--leftMarge); } .swipeComponent .itemWrapper.vflex::-webkit-scrollbar{ display: none; } .swipeComponent .item{ width: 60%; min-width: 60%; flex-grow: 0; flex-shrink: 0; margin-right: var(--spacing-20); scroll-snap-align: start; } .swipeComponent .item:first-child{margin-left: var(--leftMarge);} .swipeComponent .item:last-child{margin-right: var(--leftMarge);} /* BANNERS */ .bannerSection .bgContent { padding: 0px 0px !important; } .bannerSection .bgContent .layerWrapper{ border-radius: 0px; } /* FOOTER */ footer .bannerSection .bgContent{ padding: 0px var(--spacing-30) !important; } } /* -------------------------------------------------------------- -------------------------------------------------------------- 520 -------------------------------------------------------------- -------------------------------------------------------------- */ /* 520px */ @media screen and (max-width: 522px) { /* -------------------------- GENERAL STYLES & FONTS -------------------------- */ /* ROOT */ :root{ /* FONT STYLES */ /* Titles */ --font-h1: var(--font-weight-semibold) var(--font-size-85)/var(--font-lineheight-45) var(--font-primary); --font-h2: var(--font-weight-semibold) var(--font-size-80)/var(--font-lineheight-40) var(--font-primary); --font-h2-header: var(--font-weight-semibold) var(--font-size-80)/var(--font-lineheight-40) var(--font-primary); --font-subtitle: var(--font-weight-regular) var(--font-size-40)/var(--font-lineheight-10) var(--font-secondary); } /* HEADER */ header h2{ font: var(--font-h2-header); } /* -------------------------- GENERAL LAYOUT -------------------------- */ /* CENTERING */ .centered{ width: var(--centering-width-mobile-maxwidth);} /* WRAP */ /* #landing_page .bannerSection#groupe .centered.vflex{ flex-direction: column !important; } #landing_page .bannerSection#groupe .centered.vflex.col-5050 > div{ width: 100%; } */ /* MARGIN */ section#faq .sectionTitle{ padding: 0px; } section#rade .centered{ padding: var(--spacing-70) 0px; } /* -------------------------- SECTIONS & COMPONENT -------------------------- */ /* PROFIL PIC */ .big .profiPic{ --profil-size: var(--sizing-profilpic-10); } /* -------------------------- FORM -------------------------- */ /* ACTION BAR COMPONENT */ .actionBarComponent .actionPrimary{ flex-wrap: wrap; } .actionBarComponent .actionPrimary .blocklink, .actionBarComponent .actionPrimary .blocklink .cta.primary{ width: 100%; } .actionBarComponent .actionPrimary .blocklink{ margin-top: var(--spacing-20); } .actionBarComponent .actionPrimary .blocklink .cta.primary.vflex{ justify-content: center; } #hero .actionBarComponent .actionPrimary .selectInput{ width: auto !important; flex-grow: 1; } /* LANDING BANNER */ .headerPic { height: 166px; } .headerPic > div{ height: 166px; bottom: 30px; } #hero .bgContent .layer.backlayer { background: url(assets/bg/hero-bg.jpg) center -644px no-repeat; } .actionBarComponent .actionPrimary{ padding: var(--spacing-30) var(--spacing-20); } .bannerSection, .bannerSection#hero{ padding: var(--spacing-60) 0px; } .bannerSection#hero{ padding-top: 0px; } /* SWIPECOMPONENT */ .swipeComponent{ --swipeMarge: calc(var(--centering-width-mobile-maxwidth) / 2); --parentMarges: calc(100% - var(--centering-width-mobile-maxwidth)); width: calc(var(--centering-width-mobile-maxwidth) + (var(--leftMarge) * 4)); } .swipeComponent .item{ width: 70%; min-width: 70%; flex-grow: 0; flex-shrink: 0; margin-right: var(--spacing-20); scroll-snap-align: start; } } /* -------------------------------------------------------------- -------------------------------------------------------------- -------------------------------------------------------------- -------------------------------------------------------------- */ /* 375 */ @media screen and (max-width: 375px) { } /* -------------------------------------------------------------- -------------------------------------------------------------- -------------------------------------------------------------- -------------------------------------------------------------- */ /* 320 */ /*@media screen and (max-width: 320px) { }*/ .tofade{ display: none; } .load_content .centered.fadeInUp{ -webkit-animation-delay: .5s; animation-delay: .5s; } /* -------------------------------------------------------------- ANIMATIONS -------------------------------------------------------------- */ /* -------------------------- FADEINUP -------------------------- */ @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 70px, 0); transform: translate3d(0, 70px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 70px, 0); transform: translate3d(0, 70px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUp { -webkit-animation: 1s cubic-bezier(0.18, 0.94, 0.33, 0.98) both fadeInUp; animation: 1s cubic-bezier(0.18, 0.94, 0.33, 0.98) both fadeInUp; } /* -------------------------- FADEIN -------------------------- */ @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fadeIn { -webkit-animation: 1s cubic-bezier(.4,1.24,.58,.99) both fadeIn; animation: 1s cubic-bezier(.4,1.24,.58,.99) both fadeIn; } body.fadeIn{ animation-delay: .3s; -webkit-animation-delay: .3s; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; } body.fadeOut{ animation-duration: 1s; -webkit-animation-duration: 1s; } /* -------------------------- FADEOUT -------------------------- */ @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .fadeOut { -webkit-animation: .3s cubic-bezier(.4,1.24,.58,.99) both fadeOut; animation: .3s cubic-bezier(.4,1.24,.58,.99) both fadeOut; } /* -------------------------- FADEOUTDOWN -------------------------- */ @-webkit-keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, 70px, 0); transform: translate3d(0, 70px, 0); } } @keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, 70px, 0); transform: translate3d(0, 70px, 0); } } .fadeOutDown { -webkit-animation: .3s cubic-bezier(0.18, 0.94, 0.33, 0.98) both fadeOutDown; animation: .3s cubic-bezier(0.18, 0.94, 0.33, 0.98) both fadeOutDown; } /* -------------------------- SHAKE -------------------------- */ @keyframes shake { 40%, 60% { transform: rotate(-4deg); -webkit-transform: rotate(-4deg); transform: translate3d(-1px, 0, 0); -webkit-transform: translate3d(-1px, 0, 0); } 30%, 50%, 70% { transform: rotate(8deg); -webkit-transform: rotate(8deg); transform: translate3d(2px, 0, 0); -webkit-transform: translate3d(2px, 0, 0); } 20%, 80% { transform: rotate(-8deg); -webkit-transform: rotate(-8deg); transform: translate3d(-4px, 0, 0); -webkit-transform: translate3d(-4px, 0, 0); } 10%, 90% { transform: rotate(16deg); -webkit-transform: rotate(16deg); transform: translate3d(4px, 0, 0); -webkit-transform: translate3d(4px, 0, 0); } } .shake { animation: shake .82s cubic-bezier(.36,.07,.19,.97) infinite; -webkit-animation: shake .82s cubic-bezier(.36,.07,.19,.97) infinite; transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); backface-visibility: hidden; -webkit-backface-visibility: hidden; perspective: 1000px; -webkit-perspective: 1000px; } /* -------------------------- BOUNCE -------------------------- */ @-webkit-keyframes bounce { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } @keyframes bounce { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .bounce { -webkit-animation: 1s ease-in-out both bounce; animation: 1s ease-in-out both bounce; } /* -------------------------- HI THERE -------------------------- */ @keyframes hithere { 20% { transform: scale(1.03); } 30%, 50% { transform: rotate(-3deg) scale(1.03); } 40% { transform: rotate(3deg) scale(1.03); } 60% { transform: rotate(0deg) scale(1.03); } 100% { transform: scale(1); } } .hithere { -webkit-animation: .8s ease-out both hithere; animation: .8s ease-out both hithere; } /* -------------------------- SPIN -------------------------- */ /*ROTATE*/ @-webkit-keyframes spin { from { transform: rotate(0deg); -webkit-transform: rotate(0deg); } to { transform: rotate(360deg); -webkit-transform: rotate(360deg); } } @keyframes spin { from { transform: rotate(0deg); -webkit-transform: rotate(0deg); } to { transform: rotate(360deg); -webkit-transform: rotate(360deg); } } .ico.spinner{ -webkit-animation: spin .5s linear 0s infinite; animation: spin .5s linear 0s infinite; } /* -------------------------- BLINK -------------------------- */ @-webkit-keyframes blink { 0%{ background-color: #F6F4F1;} 10%{ background-color: #FAEEDC;} 40%{ background-color: #FAEEDC;} 100%{ background-color: #F6F4F1;} } @keyframes blink { 0%{ background-color: #F6F4F1;} 10%{ background-color: #FAEEDC;} 40%{ background-color: #FAEEDC;} 100%{ background-color: #F6F4F1;} } .blink{ -webkit-animation: 2s cubic-bezier(.4,1.24,.58,.99) both blink; animation: 2s cubic-bezier(.4,1.24,.58,.99) both blink; } /* -------------------------- DELAYS -------------------------- */ .delay-1{-webkit-animation-delay: 0.2s; animation-delay: 0.2s;} .delay-2{-webkit-animation-delay: 0.4s; animation-delay: 0.4s;} .delay-3{-webkit-animation-delay: 0.6s; animation-delay: 0.6s;} .delay-4{-webkit-animation-delay: 0.8s; animation-delay: 0.8s;} .delay-5{-webkit-animation-delay: 1s; animation-delay: 1s;} .delay-6{-webkit-animation-delay: 1.2s; animation-delay: 1.2s;} .delay-7{-webkit-animation-delay: 1.4s; animation-delay: 1.4s;} .delay-8{-webkit-animation-delay: 1.6s; animation-delay: 1.6s;} /* -------------------------------------------------------------- -------------------------------------------------------------- DEBUG -------------------------------------------------------------- -------------------------------------------------------------- */ * .debug, * .debug > div, * .debugWrapper{color: white;} .debugWrapper{background-color: #202020;} .debug{ display: none; position: fixed; top: 0; left: 0; width: 500px; height: 100%; padding: 10px; box-sizing: border-box; font-family: 'Source Code Pro', monospace !important; font-size: 14px; z-index: 2000; } .debug > div{ overflow: auto; position: relative; width: 100%; height: 100%; box-sizing: border-box; padding: 50px 20px 20px 20px; border-radius: 6px; /* background-color: #24272E; */ background-color: white; color: rgba(255,255,255,.5) !important; } .debug > div > div{ position: relative; width: 100%; } .debug .close{ position: absolute; top: 4px; left: 4px; width: 70px; height: 40px; padding: 10px; margin: 10px; background-color: black !important; border-radius: 6px; border: 3px solid rgba(255,255,255,.2); text-align: center; cursor: pointer; color: #C18D5B; z-index: 2; } .debugDate{ position: fixed; top: 0px; left: 0px; background: silver; padding: 10px; border-radius: 10px; z-index: 1000; } .debugDate > div{ height: 30px; } .debugDate > div > div{ height: 30px; }