@charset "utf-8";
:root {
/* --easing-effect: ease-in-out; */
}
._visuallyHidden {
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
:root {
/* Root (set on ) */
/* Links */
/* Mark */
/* Buttons */
/* Separator */
/* Header */
/* Sections */
/* Footer */
}
/* @start color */
/* @end color */
@font-face {
font-display: swap;
font-family: 'Lobster';
font-style: normal;
font-weight: 400;
src: local('Lobster Regular'), local('Lobster-Regular'), url(f/lobster/Lobster-Regular.woff2) format('woff2'), url(f/lobster/Lobster-Regular.woff) format('woff');
}
/* @import "roboto/fontface.css"; */
:root {
/* Browsers usually default to font-size: 16px (used to calculate rem) */
/* Set default font size & line-height raw values */
/* Set default font size & line-height */
/* Set root (used on ) & body font-size, 2 options: */
/* 1/ Fixed */
/* 2/ Adapts to document width */
/* --font-root: calc(var(--font-size-mobi-px) + 2 * ((100vw - 300px) / 1100)); */
/* --font-size-body: inherit; */
/* --font-size-body-mobi: inherit; */
/* --line-height-px: calc(var(--line-height)); */
/* See this https://css-tricks.com/books/volume-i/scale-typography-screen-size/ */
/* Smaller font sizes */
/* Weights */
/* Copy */
/* Headings */
/* Deck */
/* Button */
}
:root {
/* Button */
}
:root {
/* Indent list items, two options: */
/* 1/ Hanging lists */
/* --list-indent: 0; */
/* 2/ Lists inside text blocks */
}
@-webkit-keyframes opacityIn {0% {opacity: 0;} 100% {opacity: 1;}}
@keyframes opacityIn {0% {opacity: 0;} 100% {opacity: 1;}}
@-webkit-keyframes opacityOut {0% {opacity: 1;} 100% {opacity: 0;}}
@keyframes opacityOut {0% {opacity: 1;} 100% {opacity: 0;}}
@-webkit-keyframes slideInUp {0% {-webkit-transform: translate3d(0, 20%, 0);transform: translate3d(0, 20%, 0); visibility: visible;} 100% {-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}}
@keyframes slideInUp {0% {-webkit-transform: translate3d(0, 20%, 0);transform: translate3d(0, 20%, 0); visibility: visible;} 100% {-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}}
/*
Layout
Base layout
Markup:
Header…Mandatory heroSection…Mandatory informations
Weight: -50
Styleguide Layout
*/
/*
Root
HTML, the root element per se.
Specify the document language here.
Specify an initial .no-js class so we can style things for when JavaScript is not supported or doesn’t cut the mustard.
Define root CSS variables in :root {}
Note: examples are irrevelant here, we can’t display the html element in styleguide context.
Markup:
._alt - ALT Color + Font
._bg-light - ALT Bgk Grey
._bg-dark - ALT Bgk Blue + Font Light
Weight: -10
Styleguide Layout.root
*/
/*
Templates
Available templates, to set page wide style modifications
Default: lp_layoutALT Color + Font: lp_layout-altALT Bgk Grey: lp_layout-bg_lightALT Bgk Blue + Font Light: lp_layout-bg_dark
Styleguide Layout.root.templates
*/
:root {
}
.stickyTrigger {
display: none;
}
/*
Body
No more than one body element per document please ;c)
Note: examples are irrevelant here, we can’t display the body element in styleguide context.
Markup:
._freezed - Hides overflow, can be useful when displaying an overlay.
Weight: -9
Styleguide Layout.body
*/
body {
background: #fff;
color: #000;
font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif;
margin: 0;
padding: 0
}
body._seeThrough {
background-color: transparent;
}
/*
HTML elements
Think reset
Weight: -100
Styleguide Elements
*/
/*
Links
Basic style for links.
Markup:
Lorem ipsum dolor set
a:link - Link.
a:visited - Visited.
a:hover - Hover.
a:focus - Focus.
a:active - Active.
Styleguide Elements.links
*/
/*
External
HTML5 allows target='_blank' (XHTML had dropped it).
Don’t forget the rel='noopener' attribute to mitigate security issues.
Reference: https://mathiasbynens.github.io/rel-noopener/
Markup:
External link
Styleguide Elements.links.external
*/
/*
Phone
For phone numbers you can use the "tel:" protocol which plays nicely with most smartphones etc and initiates a call from the device.
Markup:
Call us
Styleguide Elements.links.phone
*/
a {
color: inherit;
}
a:hover {
color: #864695;
}
._alt a:hover {
color: #39ADBB;
}
/*
Abbreviation
The HTML abbr element represents an abbreviation and optionally provides a full description for it. If present, the title attribute must contain this full description and nothing else.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr
Note: Acronym has been deprecated in HTML5, use abbreviation instead.
Markup:
LOL or I18N
Styleguide Elements.abbreviation
*/
abbr[title] {
border-bottom: dotted 1px;
display: inline-block;
text-decoration: none;
}
/*
Address
The HTML address element indicates that the enclosed HTML provides contact information for a person or people, or for an organization.
Supplies contact information for its nearest article or body ancestor; in the latter case, it applies to the whole document.
Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/address
Markup:
Mozilla Foundation
1981 Landings Drive
Building K
Mountain View, CA 94043-0801
USA
Styleguide Elements.address
*/
button {
font-size: 1em;
padding-left: 0;
padding-right: 0;
}
/* @import "button"; */
/*
Button
Link element that mimicks a button.
Markup: /elements/button/link.html
:hover - Hover
:focus - Focus
:active - Active (use ._active to force state)
&._alternate - Alternate style
&._alternate:hover - Alternate style Hover
&._alternate:focus - Alternate style Focus
&._alternate:active - Alternate style Active (use ._active to force state)
Styleguide Elements.links.button
*/
/*
Code
The HTML code element represents a fragment of computer code. By default, it is displayed in the browser's default monospace font.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code
Markup:
This is how we declare a Javascript variable: var i = 0;
Styleguide Elements.code
*/
code {
font-family: 'Inconsolata',Consolas,'Andale Mono WT','Andale Mono','Lucida Console','Lucida Sans Typewriter','DejaVu Sans Mono','Bitstream Vera Sans Mono','Liberation Mono','Nimbus Mono L',Monaco,monospace,sans-serif;
-webkit-font-variant-ligatures: none;
-moz-font-variant-ligatures: none;
font-variant-ligatures: none;
white-space: pre-wrap;
}
/*
Data
The HTML data element links a given content with a machine-readable translation. If the content is time- or date-related, the time element must be used.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/data
Markup:
Mini Ketchup
Jumbo Ketchup
Mega Jumbo Ketchup
Styleguide Elements.data
*/
/*
Details
Native details have issues, use the JavaScript version.
Note: this may not be true anymore depending on your target browsers… And the desired style for the component… Old Safaris had issues…
Styleguide Elements.details
*/
/*
Details (scripted)
Requires details JavaScript module being enabled in core.js
Note: we don’t use a button or link as the summary switch because it’s already happened that we’ve been asked to put misc elements inside the summary… such as links… humm, guess we really should just say no™…
Markup: /elements/details/scripted.html
Styleguide Elements.details.scripted
*/
/*
Details (native)
Have issues at the time of writing.
Markup: /elements/details/native.html
Styleguide Elements.details.native
*/
/*
Define
The HTML dfn element represents the defining instance of a term.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dfn
Markup:
The Internet is a global
system of interconnected networks that use the Internet
Protocol Suite (TCP/IP) to serve billions of users
worldwide.
Vitae magna non felis ornare consectetuer. Sed lorem. Nam leo. In eget pede. Donec porta. Etiam facilisis. Nam suscipit. Ut consectetuer.
[Color + Font] Vitae magna non felis ornare consectetuer. Sed lorem. Nam leo. In eget pede. Donec porta. Etiam facilisis. Nam suscipit. Ut consectetuer.
Ac, turpis. Duis ac erat. Etiam consequat. Integer sed est eu elit pellentesque dapibus. Duis venenatis magna feugiat nisi. Vestibulum et.
[Color + Font] Ac, turpis. Duis ac erat. Etiam consequat. Integer sed est eu elit pellentesque dapibus. Duis venenatis magna feugiat nisi. Vestibulum et.
Netus et malesuada fames ac turpis egestas. Sed vitae eros. Nulla pulvinar turpis eget nunc. Sed bibendum pellentesque nunc. Integer tristique.
[Color + Font] Netus et malesuada fames ac turpis egestas. Sed vitae eros. Nulla pulvinar turpis eget nunc. Sed bibendum pellentesque nunc. Integer tristique.
Styleguide Elements.headings.h3
*/
/* @import "h4"; */
/* @import "h5"; */
/* @import "h6"; */
/*
Kicker
Kicker heading, usually above an h2 or h3 heading.
Markup:
Kicker nunc laoreet sapien quis neque semper dictum. Phasellus rhoncus est id turpis. Vestibulum in elit at odio pellentesque volutpat. Nam nec.
Heading ac, turpis. Duis ac erat. Etiam consequat. Integer sed est eu elit pellentesque dapibus. Duis venenatis magna feugiat nisi. Vestibulum et.
[Color + Font] Kicker nunc laoreet sapien quis neque semper dictum. Phasellus rhoncus est id turpis. Vestibulum in elit at odio pellentesque volutpat. Nam nec.
Heading ac, turpis. Duis ac erat. Etiam consequat. Integer sed est eu elit pellentesque dapibus. Duis venenatis magna feugiat nisi. Vestibulum et.
Styleguide Elements.headings.kicker
*/
/*
Lists
Styleguide Elements.lists
*/
/*
Definition list
The HTML dl element represents a description list. The element encloses a list of groups of terms (specified using the dt element) and descriptions. (provided by dd elements). Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).
Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl
Markup: /elements/lists/dl.html
dl._keyed - Align titles & definitions when possible. If the definition title is in french a space will automatically be inserted before the semi-column.
Styleguide Elements.lists.dl
*/
/*
Ordered list
Markup: /elements/lists/ol.html
ol._counter - Enables styling of the counter part.
Styleguide Elements.lists.ol
*/
/*
Unordered list
Markup: /elements/lists/ul.html
Styleguide Elements.lists.ul
*/
/*
Mark
The HTML mark element represents highlighted text, i.e., a run of text marked for reference purpose, due to its relevance in a particular context. For example it can be used in a page showing search results to highlight every instance of the searched-for word.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark
Markup:
The mark element is used to
highlight text.
Styleguide Elements.mark
*/
mark {
background: hsla(39,90%,55%,.2);
color: inherit;
padding: 0 .2em;
}
/*
Paragraph
The HTML p element represents a paragraph of text. Paragraphs are usually represented in visual media as blocks of text that are separated from adjacent blocks by vertical blank space and/or first-line indentation.
Markup:
Varius aliquet. Aliquam erat volutpat. Praesent feugiat vehicula pede.
Suspendisse pulvinar, orci in sollicitudin venenatis, nibh libero hendrerit
sem, eu tempor nisi felis et metus. Etiam gravida sem ut mi. Integer volutpat,
enim eu varius gravida, risus urna venenatis lectus, ac ultrices quam nulla eu
leo. Duis arcu. Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos himenaeos.
Vivamus lacus libero, aliquam eget, iaculis quis, tristique adipiscing, diam.
Vivamus nec massa non justo iaculis pellentesque. Aenean accumsan elit sit amet
nibh feugiat semper. Cras tempor ornare purus. Integer id nisi. Phasellus dui
velit, ultrices vel, ullamcorper mattis, hendrerit in.
Styleguide Elements.paragraph
*/
/*
Preformatted Text
The HTML pre element represents preformatted text which is to be presented exactly as written in the HTML file. The text is typically rendered using a non-proportional ("monospace") font. Whitespace inside this element is displayed as written.
Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre
Markup:
Id tortor. Etiam augue leo, cursus eget, ornare et, ornare sagittis,
tellus. Fusce felis tellus, consectetuer nec, consequat at, ornare non.
Styleguide Elements.pre
*/
pre {
white-space: normal;
}
/*
Quotations
Styleguide Elements.quotations
*/
/*
Blockquote
The HTML blockquote element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation (see Notes for how to change it). A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the cite element.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote
Markup: /elements/quotations/blockquote.html
Styleguide Elements.quotations.block
*/
/*
Cite
The HTML cite element represents a reference to a creative work. It must include the title of a work or a URL reference, which may be in an abbreviated form according to the conventions used for the addition of citation metadata.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite
Markup:
The Elements of Typographic Style is a great ressource on typography.
Styleguide Elements.quotations.cite
*/
cite {
font-style: normal;
}
/*
Inline quotation
The HTML q element indicates that the enclosed text is a short inline quotation. This element is intended for short quotations that don't require paragraph breaks; for long quotations use the blockquote element.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q
Markup:
According to Mozilla's website,
Firefox 1.0
was released in 2004 and became a big success.
Styleguide Elements.quotations.quote
*/
/*
Strikethrough
The HTML s element renders text with a strikethrough, or a line through it. Use the s element to represent things that are no longer relevant or no longer accurate. However, s is not appropriate when indicating document edits; for that, use the del and ins elements, as appropriate.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/s
Markup:
Today's Special: Salmon SOLD OUT
Styleguide Elements.strikethrough
*/
s {
text-decoration: line-through;
-webkit-text-decoration-color: var(--c-strike);
-moz-text-decoration-color: var(--c-strike);
text-decoration-color: var(--c-strike);
}
/*
Separator
Styleguide Elements.separator
*/
/*
Horizontal rule
The HTML hr element represents a thematic break between paragraph-level elements (for example, a change of scene in a story, or a shift of topic with a section); historically, this has been presented as a horizontal rule or line. While it may still be displayed as a horizontal rule in visual browsers, this element is now defined in semantic terms, rather than presentational terms, so if you wish to draw a horizontal line, you should do so using appropriate CSS.
References:
Markup: /elements/separator/hr.html
Styleguide Elements.separator.hr
*/
/*
Simple
Non semantic separator.
Markup: /separator/simple.html
Styleguide Elements.separator.simple
*/
/*
Top
Markup: /separator/top.html
.separator._blank - Don't decorate.
Styleguide Elements.separator.top
*/
/*
Small
The HTML small element makes the text font size one size smaller (for example, from large to medium, or from small to x-small) down to the browser's minimum font size. In HTML5, this element is repurposed to represent side-comments and small print, including copyright and legal text, independent of its styled presentation.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small
Markup:
Varius aliquet. Aliquam erat volutpat. Praesent feugiat vehicula pede.
._legal - Legal message
Styleguide Elements.small
*/
small {
font-size: 0.72222em
}
small._legal {
display: inline-block;
}
/*
Subscript
The HTML sub element defines a span of text that should be displayed, for typographic reasons, lower, and often smaller, than the main span of text.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sub
Markup:
Varius aliquet. Aliquam erat volutpat. Praesent CO2 feugiat vehicula pede.
Styleguide Elements.sub
*/
/*
Superscript
The HTML sup element defines a span of text that should be displayed, for typographic reasons, higher, and often smaller, than the main span of text.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup
Markup:
Varius aliquet. Aliquam erat volutpat2. Praesent feugiat vehicula pede.
Styleguide Elements.sup
*/
/*
Time
The HTML time element represents either a time on a 24-hour clock or a precise date in the Gregorian calendar (with optional time and timezone information).
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time
Markup:
The concert took place on .
Styleguide Elements.time
*/
/*
Icons
SVG icons
Weight: 70
Styleguide Icons
*/
/*
Balance
Markup: /icons/balance.html
Styleguide Icons.balance
*/
/*
Close
Markup: /icons/close.html
Styleguide Icons.close
*/
/*
Down
Markup: /icons/down.html
Styleguide Icons.down
*/
/*
Hourglass
Markup: /icons/hourglass.html
Styleguide Icons.hourglass
*/
/*
Key
Markup: /icons/key.html
Styleguide Icons.key
*/
/*
Localisation
Markup: /icons/localisation.html
Styleguide Icons.localisation
*/
/*
Phone Msg
Markup: /icons/phone-msg.html
Styleguide Icons.phone-msg
*/
/*
Piggy bank
Markup: /icons/piggy-bank.html
Styleguide Icons.piggy-bank
*/
/*
Ticket heart
Markup: /icons/ticket-heart.html
Styleguide Icons.ticket-heart
*/
/*
Timer
Markup: /icons/timer.html
Styleguide Icons.timer
*/
.icon {
background-repeat: no-repeat;
background-position: -9999px -9999px;
}
/* @import "default/social"; */
/*
Header
Global page header.
Initially hidden then fixed when document is scrolled:
- to top of screen on tablet+
- to bottom of screen on mobile
Markup:
Header content…
Weight: -5
Styleguide Layout.header
*/
.header {
padding: .8em;
}
/* @import "default/logo"; */
.logos img {
display: inline-block;
vertical-align: middle;
}
.logos img:not(:last-child) {
margin-right: 1rem;
}
/* @import "default/anchors"; */
/*
Medias
Medias
Weight: 50
Styleguide Medias
*/
/*
Figure
The HTML figure element represents self-contained content, frequently with a caption (figcaption), and is typically referenced as a single unit.
Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure
Markup: /figure/figure.html
Styleguide Medias.figure
*/
/*
Figcaption
The HTML figcaption element represents a caption or a legend associated with a figure or an illustration described by the rest of the data of the figure element which is its immediate ancestor.
Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption
Markup: /figure/figcaption.html
Styleguide Medias.figure.figcaption
*/
/*
Iframe
Unless problematic, prefer deferred loading.
Styleguide Medias.iframe
*/
/*
Standard
Markup: /iframe/standard.html
Styleguide Medias.iframe.standard
*/
iframe {
margin: 0;
max-width: 100%;
}
/*
Defer
Markup: /iframe/defer.html
Styleguide Medias.iframe.defer
*/
/*
Image
Styleguide Medias.image
*/
/*
Img
Responsive by default
Markup: /image/img.html
._fix - removes responsive properties
Styleguide Medias.image.img
*/
img {
height: auto;
max-width: 100%;
width: auto;
}
/*
Picture
Markup: /image/picture.html
Styleguide Medias.image.picture
*/
picture {
height: auto;
max-width: 100%;
width: auto;
}
/*
Video
Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
Markup: /video/index.html
Styleguide Medias.video
*/
/*
Container
Defines media proportions to prevent content jumps while media is loading.
Following examples use simple images but it works for any media: video, picture, img with srcset, iframe…
Parent element (figure in the following examples) should not be larger than the media itself.
Styleguide Medias.container
*/
/*
Landscape
Styleguide Medias.container.landscape
*/
/*
Portrait
Styleguide Medias.container.portrait
*/
.mediaContainer {
display: inline;
}
/*
Square
Markup: /media-container/1x1.html
Styleguide Medias.container.square
*/
/*
2x1
Markup: /media-container/2x1.html
Styleguide Medias.container.landscape.2x1
*/
/*
1x2
Markup: /media-container/1x2.html
Styleguide Medias.container.portrait.1x2
*/
/*
3x2
Markup: /media-container/3x2.html
Styleguide Medias.container.landscape.3x2
*/
/*
2x3
Markup: /media-container/2x3.html
Styleguide Medias.container.portrait.2x3
*/
/*
4x3
Markup: /media-container/4x3.html
Styleguide Medias.container.landscape.4x3
*/
/*
4x1
Markup: /media-container/4x1.html
Styleguide Medias.container.landscape.4x1
*/
/*
3x4
Markup: /media-container/3x4.html
Styleguide Medias.container.portrait.3x4
*/
/*
16x9
Markup: /media-container/16x9.html
Styleguide Medias.container.landscape.16x9
*/
/*
9x16
Markup: /media-container/9x16.html
Styleguide Medias.container.portrait.9x16
*/
/*
16x10
Markup: /media-container/16x10.html
Styleguide Medias.container.landscape.16x10
*/
/*
10x16
Markup: /media-container/10x16.html
Styleguide Medias.container.portrait.10x16
*/
/*
Custom
Markup: /media-container/custom.html
Styleguide Medias.container.custom
*/
/*
Main
Only one main element is allowed in an HTML document.
Markup:
Main page content
Styleguide: Layout.main
*/
main {
max-width: 100%;
overflow: auto;
}
/* @media (--desktop-up) { */
/* main { */
/* min-height: 600px; */
/* } */
/* } */
/*
Sections
Main sections (usually as direct children of main).
Note: the custom font used on ._alt doesn’t always show in the styleguide context
Weight: -30
Styleguide: Sections
*/
section {
padding: .8em;
}
/*
Section title
Markup:
Lorem ipsum
Styleguide: Components.section-title
*/
.sectionContent {
position: relative;
z-index: 10;
}
.sectionDeco picture,.sectionDeco video {
max-width: 100%;
}
.colorize {
color: #93bd28;
}
textarea
{
resize : none;
}
/*
Hero
Hero is a mandatory component
Note: In the styleguide context the hero logo and background image can be slightly off because of the styleguide nav: try toggling full screen or opening in new window to get closer to prod layout.
Weight: -100
Styleguide Sections.hero
*/
/*
Survey
Template: lp_hero
Default survey hero
._alt & - ALT Color + Font
._bg-light & - ALT bkg light
._bg-dark & - ALT bkg dark
Markup:
{%- set context = {domain: 'salle-de-bain-avec-jacuzzi.io', lp_type: 'SURVEY', tcontext: 'Tcontext', survey_url: '/default/tmp-iframe.html', AB_test_version: 'test'} -%}
{%- set image = false -%}
{%- set headlines = ['Votre devis de salle de bain en 2 minutes.','salle-de-bain-avec-jacuzzi.io permet de faciliter vos projets de rénovation, de construction ou de design d’intérieur grâce à un accompagnement sur mesure de votre projet, à prix et délais maîtrisés.'] -%}
{%- include "./src/components/default/hero/lp_hero.html" -%}
Weight: 1
Styleguide Sections.hero.default
*/
/*
Split survey
Template: lp_hero-split
Split survey hero (columned on desktop+)
._alt & - ALT Color + Font
._bg-light & - ALT bkg light
._bg-dark & - ALT bkg dark
Markup:
{%- set context = {domain: 'salle-de-bain-avec-jacuzzi.io', lp_type: 'SURVEY', tcontext: 'Tcontext', survey_url: '/default/tmp-iframe.html', AB_test_version: 'test'} -%}
{%- set image = false -%}
{%- set headlines = ['Votre devis de salle de bain en 2 minutes.','salle-de-bain-avec-jacuzzi.io permet de faciliter vos projets de rénovation, de construction ou de design d’intérieur grâce à un accompagnement sur mesure de votre projet, à prix et délais maîtrisés.'] -%}
{% include "./src/components/default/hero/lp_hero-split.html" %}
Weight: 2
Styleguide Sections.hero.split
*/
/*
Survey [img bg]
Template: lp_hero
Default survey hero with background image
._alt & - ALT Color + Font
Markup:
{%- set context = {domain: 'salle-de-bain-avec-jacuzzi.io', lp_type: 'SURVEY', tcontext: 'Tcontext', survey_url: '/default/tmp-iframe.html', AB_test_version: 'test'} -%}
{%- set image = "//source.unsplash.com/1600x800?bathroom,tub" -%}
{%- set headlines = ['Votre devis de salle de bain en 2 minutes.','salle-de-bain-avec-jacuzzi.io permet de faciliter vos projets de rénovation, de construction ou de design d’intérieur grâce à un accompagnement sur mesure de votre projet, à prix et délais maîtrisés.'] -%}
{% include "./src/components/default/hero/lp_hero.html" %}
Weight: 3
Styleguide Sections.hero.default-img
*/
/*
Split survey [img bg]
Template: lp_hero-split
Split survey hero (columned on desktop+) with background image
._alt & - ALT Color + Font
Markup:
{%- set context = {domain: 'salle-de-bain-avec-jacuzzi.io', lp_type: 'SURVEY', tcontext: 'Tcontext', survey_url: '/default/tmp-iframe.html', AB_test_version: 'test'} -%}
{%- set image = "//source.unsplash.com/1600x800?bathroom,tub" -%}
{%- set headlines = ['Votre devis de salle de bain en 2 minutes.','salle-de-bain-avec-jacuzzi.io permet de faciliter vos projets de rénovation, de construction ou de design d’intérieur grâce à un accompagnement sur mesure de votre projet, à prix et délais maîtrisés.'] -%}
{% include "./src/components/default/hero/lp_hero-split.html" %}
Weight: 4
Styleguide Sections.hero.split-img
*/
/*
Call
Template: lp_hero
Default call hero
._alt & - ALT Color + Font
._bg-light & - ALT bkg light
._bg-dark & - ALT bkg dark
Markup:
{%- set context = {domain: 'salle-de-bain-avec-jacuzzi.io', lp_type: 'CALL', tcontext: 'Tcontext', survey_url: '/default/tmp-iframe.html', AB_test_version: 'test', phone_number: '01 73 12 01 49', language: 'fr'} -%}
{%- set image = false -%}
{%- set headlines = ['Une urgence ? Besoin d’un fleuriste ?','Bénéficiez de 10% de réduction immédiate !'] -%}
{% include "./src/components/default/hero/lp_hero.html" %}
Weight: 5
Styleguide Sections.hero.call
*/
/*
Call type 2
Template: lp_hero-split
Type 2 call hero
._alt & - ALT Color + Font
._bg-light & - ALT bkg light
._bg-dark & - ALT bkg dark
Markup:
{%- set context = {domain: 'salle-de-bain-avec-jacuzzi.io', lp_type: 'CALL', tcontext: 'Tcontext', survey_url: '/default/tmp-iframe.html', AB_test_version: 'test', phone_number: '01 73 12 01 49', language: 'fr'} -%}
{%- set image = false -%}
{%- set headlines = ['Une urgence ? Besoin d’un fleuriste ?','Nous trouvons pour vous un fleuriste.'] -%}
{% include "./src/components/default/hero/lp_hero-split.html" %}
Weight: 6
Styleguide Sections.hero.call2
*/
/*
Call [img bg]
Template: lp_hero
Default call hero with background image
._alt & - ALT Color + Font
Markup:
{%- set context = {domain: 'salle-de-bain-avec-jacuzzi.io', lp_type: 'CALL', tcontext: 'Tcontext', survey_url: '/default/tmp-iframe.html', AB_test_version: 'test', phone_number: '01 73 12 01 49', language: 'fr'} -%}
{%- set image = "//source.unsplash.com/1600x800?bathroom,tub" -%}
{%- set headlines = ['Une urgence ? Besoin d’un fleuriste ?','Bénéficiez de 10% de réduction immédiate !'] -%}
{% include "./src/components/default/hero/lp_hero.html" %}
Weight: 7
Styleguide Sections.hero.call-img
*/
/*
Call type 2 [img bg]
Template: lp_hero-split
Type 2 call hero with background image
._alt & - ALT Color + Font
Markup:
{%- set context = {domain: 'salle-de-bain-avec-jacuzzi.io', lp_type: 'CALL', tcontext: 'Tcontext', survey_url: '/default/tmp-iframe.html', AB_test_version: 'test', phone_number: '01 73 12 01 49', language: 'fr'} -%}
{%- set image = "//source.unsplash.com/1600x800?bathroom,tub" -%}
{%- set headlines = ['Une urgence ? Besoin d’un fleuriste ?','Nous trouvons pour vous un fleuriste.'] -%}
{% include "./src/components/default/hero/lp_hero-split.html" %}
Weight: 8
Styleguide Sections.hero.call2-img
*/
.hero .colorize {
color: #864695;
}
.hero b,.hero strong {
font-weight: 700;
}
.hero._bg-img .colorize {
color: inherit;
}
/*
CTA
Call to action
Weight: -105
Styleguide Components.cta
*/
/*
CTA embedded info
Optional helper text in the button
._alt & - ALT Color + Font
Markup: