Nouveau XI
@import url (font-awesome. min. CSS);
@import url("https://fonts. googleapis. com/css?family=Pacifico|Source+Sans+Pro:200,400");
/*
Épilogue par TEMPLATED
modélisé. co @templateco
Publié gratuitement sous Creative Commons Attribution 3. 0 licence (modèle. co/licence)
*/
/* Réinitialiser */
html, corps, div, envergure, applet, objet, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronyme, adresse, gros, citer, code, del, dfn, em, img, ins, kbd, q, s, samp, petit, grève, fort, sous, souper, tt, var, b, u, je, centre, dl, dt, jj, ol, ul, li, champs, formulaire, étiquette, légende, tableau, légende, tbody, tfoot, thead, tr, th, td, article, de côté, toile, détails, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, résumé, heure, marque, audio, vidéo {
marge : 0 ;
rembourrage : 0 ;
bordure : 0 ;
taille de police : 100 % ;
police : hériter ;
alignement vertical : ligne de base ;
}
article, à part, détails, figcaption, figure, pied de page, en-tête, hgroup, menu, nav, section {
bloc de visualisation;
}
corps {
hauteur de ligne : 1 ;
}
ol, ul {
style de liste : aucun ;
}
bloc de citation, q {
guillemets : aucun ;
}
blockquote:avant, blockquote:après, q:avant, q:après {
contenu: '';
contenu : aucun ;
}
tableau {
border-collapse : effondrement ;
espacement des bordures : 0 ;
}
corps {
-webkit-text-size-adjust : aucun ;
}
/* Modèle de boîte */
*, *:avant après {
-moz-box-sizing : border-box ;
-webkit-box-sizing : border-box ;
dimensionnement de la boîte : border-box ;
}
/* Basique */
@-ms-viewport {
largeur : largeur de l'appareil ;
}
corps {
-ms-overflow-style : barre de défilement ;
}
Écran @media et (largeur maximale : 480 px) {
html, corps {
largeur min : 320 px ;
}
}
corps {
arrière-plan : #f4f4f4 ;
}
corps. est en cours de chargement *, corps. is-loading * :avant, corps. est en cours de chargement * : après {
-moz-animation : aucun ! important ;
-animation-webkit : aucune ! important ;
-ms-animation : aucune !important ;
animation : aucune !important;
-moz-transition : aucun !important ;
-webkit-transition : aucun ! important ;
-ms-transition : aucun !important ;
transition : aucune !important ;
}
/* Taper */
corps {
couleur de fond : #f4f4f4 ;
couleur : #666666 ;
}
corps, entrée, sélection, zone de texte {
famille de polices : "Source Sans Pro", Helvetica, sans empattement ;
taille de police : 17 pt ;
poids de la police : 200 ;
hauteur de ligne : 1. 65;
}
Écran @media et (largeur maximale : 1680px) {
corps, entrée, sélection, zone de texte {
taille de police : 13 pt ;
}
}
Écran @media et (largeur maximale : 1 280 pixels) {
corps, entrée, sélection, zone de texte {
taille de police : 12 pt ;
}
}
Écran @media et (largeur maximale : 360 px) {
corps, entrée, sélection, zone de texte {
taille de police : 11 pt ;
}
}
un {
-moz-transition : couleur 0. 2s facilité, border-bottom-color 0. 2s de facilité ;
-webkit-transition : couleur 0. 2s facilité, border-bottom-color 0. 2s de facilité ;
-ms-transition : couleur 0. 2s facilité, border-bottom-color 0. 2s de facilité ;
transition : couleur 0. 2s facilité, border-bottom-color 0. 2s de facilité ;
décoration de texte : aucune ;
bordure inférieure : pointillé 1px ;
}
un: survolez {
border-bottom-color : transparent ;
}
fort, b {
poids de la police : 400 ;
}
em, je {
style de police : italique ;
}
p {
marge : 0 0 2em 0 ;
}
h1, h2, h3, h4, h5, h6 {
poids de la police : 400 ;
hauteur de ligne : 1. 5 ;
marge : 0 0 1em 0 ;
transformation de texte : majuscule ;
interlettrage : 0. 375rems ;
}
h1 une, h2 une, h3 une, h4 une, h5 une, h6 une {
couleur : hériter ;
décoration de texte : aucune ;
}
h1 {
taille de police : 2em ;
}
h2 {
taille de police : 1. 75em ;
}
h3 {
taille de police : 1. 25em ;
}
h4 {
taille de la police : 1 em ;
}
h5 {
taille de police : 0. 9em ;
}
h6 {
taille de police : 0. 7em ;
}
Écran @media et (largeur maximale : 736px) {
h1 {
taille de police : 1. 5em ;
}
h2 {
taille de police : 1. 25em ;
}
h3 {
taille de la police : 1 em ;
}
}
sous {
taille de police : 0. 8em ;
position : relative ;
haut : 0. 5em ;
}
souper {
taille de police : 0. 8em ;
position : relative ;
haut : -0. 5em ;
}
bloc de citation {
bordure gauche : solide 4px ;
style de police : italique ;
marge : 0 0 2em 0 ;
rembourrage : 0. 5em 0 0. 5em 2em;
}
code {
rayon de bordure : 4 px ;
bordure : solide 1px ;
famille de polices : "Courier New", espace fixe ;
taille de police : 0. 9em ;
marge : 0 0. 25em ;
rembourrage : 0. 25em 0. 65em ;
}
pré {
-webkit-overflow-scrolling : toucher ;
famille de polices : "Courier New", espace fixe ;
taille de police : 0. 9em ;
marge : 0 0 2em 0 ;
}
précode {
bloc de visualisation;
hauteur de ligne : 1. 75;
rembourrage : 1em 1. 5em ;
débordement-x : auto ;
}
heure {
bordure : 0 ;
bordure inférieure : solide 1px ;
marge : 2em 0 ;
}
heure. majeur {
marge : 3em 0 ;
}
. alignez à gauche {
aligner le texte : à gauche ;
}
. align-center {
aligner le texte : centrer ;
}
. aligner à droite {
aligner le texte : à droite ;
}
saisie, sélection, zone de texte {
couleur : #444444 ;
}
un {
couleur : hériter ;
}
un: survolez {
couleur : #EF6480 !important;
}
fort, b {
couleur : #444444 ;
}
h1, h2, h3, h4, h5, h6 {
couleur : #444444 ;
}
bloc de citation {
border-left-color : #666666 ;
}
code {
arrière-plan : rgba (144, 144, 144, 0. 075);
couleur de bordure : #666666 ;
}
heure {
border-bottom-color : #666666 ;
}
/* Boîte */
. boîte {
rayon de bordure : 4 px ;
bordure : solide 1px ;
marge-bas : 2em ;
rembourrage : 1. 5em ;
}
. case > :dernier-enfant,
. boîte > :dernier-enfant > :dernier-enfant,
. boîte > :dernier-enfant > :dernier-enfant > :dernier-enfant {
marge inférieure : 0 ;
}
. boîte alt {
bordure : 0 ;
rayon de bordure : 0 ;
rembourrage : 0 ;
}
. boîte {
couleur de bordure : #666666 ;
}
/* Bouton */
entrée[type="soumettre"],
entrée[type="reset"],
entrée[type="bouton"],
bouton,
. bouton {
-moz-apparence : aucune ;
-apparence webkit : aucune ;
-ms-apparence : aucune ;
apparence : aucune ;
-moz-transition : boîte-ombre 0. 2s easy-in-out, background-color 0. 2s easy-in-out, couleur 0. 2s facilité d'entrée-sortie ;
-webkit-transition : boîte-ombre 0. 2s easy-in-out, background-color 0. 2s easy-in-out, couleur 0. 2s facilité d'entrée-sortie ;
-ms-transition : boîte-ombre 0. 2s easy-in-out, background-color 0. 2s easy-in-out, couleur 0. 2s facilité d'entrée-sortie ;
transition : boîte-ombre 0. 2s easy-in-out, background-color 0. 2s easy-in-out, couleur 0. 2s facilité d'entrée-sortie ;
rayon de bordure : 4 px ;
bordure : 0 ;
curseur : pointeur ;
affichage : bloc en ligne ;
poids de la police : 400 ;
hauteur : 3. 5em ;
hauteur de ligne : 3. 5em ;
rembourrage : 0 2em 0 2. 375em ;
aligner le texte : centrer ;
décoration de texte : aucune ;
espace blanc : nowrap ;
transformation de texte : majuscule ;
interlettrage : 0. 325em ;
taille de police : 0. 725em ;
}
entrée[type="soumettre"]. icône :avant,
entrée[type="réinitialiser"]. icône :avant,
entrée[type="bouton"]. icône :avant,
bouton. icône :avant, bouton icône : avant {
marge droite : 0. 5em ;
}
entrée[type="soumettre"]. adapter,
entrée[type="réinitialiser"]. adapter,
entrée[type="bouton"]. adapter,
bouton. adapter, bouton adapter {
bloc de visualisation;
marge : 0 0 1em 0 ;
largeur : 100 % ;
}
entrée[type="soumettre"]. grand,
entrée[type="réinitialiser"]. grand,
entrée[type="bouton"]. grand,
bouton. grand, bouton grand {
taille de police : 0. 8em ;
rembourrage : 0 2. 5em 0 2. 875em ;
hauteur : 3. 75em ;
hauteur de ligne : 3. 75em ;
}
entrée[type="soumettre"]. désactivé, input[type="submit"] : désactivé,
entrée[type="réinitialiser"]. désactivé,
input[type="reset"] : désactivé,
entrée[type="bouton"]. désactivé,
entrée[type="bouton"] : désactivée,
bouton. désactivé,
bouton : désactivé,
. bouton désactivé, bouton : désactivé {
-moz-pointer-events : aucun ;
-événements de pointeur webkit : aucun ;
-événements de pointeur ms : aucun ;
événements de pointeur : aucun ;
opacité : 0. 25;
}
Écran @media et (largeur maximale : 480 px) {
entrée[type="soumettre"],
entrée[type="reset"],
entrée[type="bouton"],
bouton,
. bouton {
rembourrage : 0 ;
}
}
entrée[type="soumettre"],
entrée[type="reset"],
entrée[type="bouton"],
bouton,
. bouton {
couleur de fond : transparente ;
boîte-ombre : encart 0 0 0 2px #666666 ;
couleur : #444444 !important;
}
input[type="submit"] : survolez,
input[type="reset"] : survolez,
entrée[type="bouton"] : survolez,
bouton : survoler,
. bouton : survoler {
couleur : #EF6480 !important;
boîte-ombre : encart 0 0 0 2px #EF6480 ;
}
entrée[type="soumettre"] : active,
entrée[type="reset"] : active,
entrée[type="bouton"] : active,
bouton : actif,
. bouton:actif {
couleur de fond : rgba (239, 100, 128, 0. 15);
}
entrée[type="soumettre"]. icône :avant,
entrée[type="réinitialiser"]. icône :avant,
entrée[type="bouton"]. icône :avant,
bouton. icône :avant, bouton icône : avant {
couleur : #999999 ;
}
/* Former */
former {
marge : 0 0 2em 0 ;
}
étiqueter {
bloc de visualisation;
taille de police : 0. 9em ;
poids de la police : 400 ;
marge : 0 0 1em 0 ;
}
entrée[type="texte"],
entrée[type="mot de passe"],
entrée[type="email"],
sélectionner,
zone de texte {
-moz-apparence : aucune ;
-apparence webkit : aucune ;
-ms-apparence : aucune ;
apparence : aucune ;
rayon de bordure : 4 px ;
bordure : aucune ;
bordure : solide 1px ;
couleur : hériter ;
bloc de visualisation;
contour : 0 ;
rembourrage : 0 1em ;
décoration de texte : aucune ;
largeur : 100 % ;
}
entrée[type="texte"] : invalide,
input[type="password"] : invalide,
entrée[type="email"] : invalide,
sélectionnez : invalide,
zone de texte : invalide {
boîte-ombre : aucune ;
}
. select-wrapper {
décoration de texte : aucune ;
bloc de visualisation;
position : relative ;
}
. select-wrapper : avant {
-moz-osx-font-smoothing : niveaux de gris ;
-webkit-font-smoothing : anticrénelé ;
famille de polices : FontAwesome ;
style de police : normal ;
poids de la police : normal ;
text-transform : aucun !important ;
}
. select-wrapper : avant {
contenu : '\f078' ;
bloc de visualisation;
hauteur : 2. 75em ;
hauteur de ligne : 2. 75em ;
événements de pointeur : aucun ;
position : absolue ;
droite : 0 ;
aligner le texte : centrer ;
haut : 0 ;
largeur : 2. 75em ;
} select-wrapper select ::-ms-expand {
affichage : aucun ;
}
entrée[type="texte"],
entrée[type="mot de passe"],
entrée[type="email"],
sélectionner {
hauteur : 2. 75em ;
}
zone de texte {
rembourrage : 0. 75em 1em;
}
entrée[type="case à cocher"],
entrée[type="radio"] {
-moz-apparence : aucune ;
-apparence webkit : aucune ;
-ms-apparence : aucune ;
apparence : aucune ;
bloc de visualisation;
flotteur : gauche ;
marge-droite : -2em ;
opacité : 0 ;
largeur : 1em ;
indice z : -1 ;
}
input[type="checkbox"] + étiquette,
entrée[type="radio"] + étiquette {
décoration de texte : aucune ;
curseur : pointeur ;
affichage : bloc en ligne ;
taille de la police : 1 em ;
poids de la police : 200 ;
padding-gauche : 2. 4em ;
rembourrage à droite : 0. 75em ;
position : relative ;
}
input[type="checkbox"] + label:before,
input[type="radio"] + label:before {
-moz-osx-font-smoothing : niveaux de gris ;
-webkit-font-smoothing : anticrénelé ;
famille de polices : FontAwesome ;
style de police : normal ;
poids de la police : normal ;
text-transform : aucun !important ;
}
input[type="checkbox"] + label:before,
input[type="radio"] + label:before {
rayon de bordure : 4 px ;
bordure : solide 1px ;
contenu: '';
affichage : bloc en ligne ;
hauteur : 1. 65em ;
gauche : 0 ;
hauteur de ligne : 1. 58125em ;
position : absolue ;
aligner le texte : centrer ;
haut : 0 ;
largeur : 1. 65em ;
}
input[type="checkbox"] : coché + étiquette : avant,
input[type="radio"]:checked + label:before {
contenu : '\f00c' ;
}
input[type="checkbox"] + label:before {
rayon de bordure : 4 px ;
}
input[type="radio"] + label:before {
rayon de bordure : 100 % ;
}
::-webkit-input-placeholder {
opacité : 1. 0 ;
}
:-moz-placeholder {
opacité : 1. 0 ;
}
::-moz-placeholder {
opacité : 1. 0 ;
}
:-ms-input-placeholder {
opacité : 1. 0 ;
} formerize-placeholder {
opacité : 1. 0 ;
}
étiqueter {
couleur : #444444 ;
}
entrée[type="texte"],
entrée[type="mot de passe"],
entrée[type="email"],
sélectionner,
zone de texte {
arrière-plan : rgba (144, 144, 144, 0. 075);
couleur de bordure : #666666 ;
}
entrée[type="texte"] : mise au point,
input[type="password"] : focus,
entrée[type="email"] :focus,
sélectionner:focus,
zone de texte : mise au point {
couleur de bordure : #EF6480 ;
boîte-ombre : 0 0 0 1px #EF6480 ;
}
. select-wrapper : avant {
couleur : #666666 ;
}
input[type="checkbox"] + étiquette,
entrée[type="radio"] + étiquette {
couleur : #666666 ;
}
input[type="checkbox"] + label:before,
input[type="radio"] + label:before {
arrière-plan : rgba (144, 144, 144, 0. 075);
couleur de bordure : #666666 ;
}
input[type="checkbox"] : coché + étiquette : avant,
input[type="radio"]:checked + label:before {
couleur de fond : #EF6480 ;
couleur de bordure : #EF6480 ;
couleur : #ffffff ;
}
input[type="checkbox"] : focus + étiquette : avant,
input[type="radio"]:focus + label:before {
couleur de bordure : #EF6480 ;
boîte-ombre : 0 0 0 1px #EF6480 ;
}
::-webkit-input-placeholder {
couleur : #999999 !important;
}
:-moz-placeholder {
couleur : #999999 !important;
}
::-moz-placeholder {
couleur : #999999 !important;
}
:-ms-input-placeholder {
couleur : #999999 !important;
}
. formerize-placeholder {
couleur : #999999 !important;
}
/* Icône */
. icône {
décoration de texte : aucune ;
bordure inférieure : aucune ;
position : relative ;
}
. icône : avant {
-moz-osx-font-smoothing : niveaux de gris ;
-webkit-font-smoothing : anticrénelé ;
famille de polices : FontAwesome ;
style de police : normal ;
poids de la police : normal ;
text-transform : aucun !important ;
}
. icône > . étiqueter {
affichage : aucun ;
}
. icône majeur {
bloc de visualisation;
marge : 0 0 1. 5em 0;
}
. icône majeur : avant {
curseur : par défaut ;
taille de police : 2. 5rem ;
boîte-ombre : encart 0 0 0 2px #666666 ;
largeur : 2. 5em ;
hauteur : 2. 5em ;
hauteur de ligne : 2. 5em ;
affichage : bloc en ligne ;
rayon de bordure : 100 % ;
couleur : #666666 ;
}
Écran @media et (largeur maximale : 736px) {
. icône majeur : avant {
taille de police : 2 rem ;
}
}
/* Image */
. image {
rayon de bordure : 4 px ;
bordure : 0 ;
affichage : bloc en ligne ;
position : relative ;
}
. image image {
rayon de bordure : 4 px ;
bloc de visualisation;
}
. image gauche, . image droite {
largeur max : 40 % ;
}
. image img gauche, . image image droite {
largeur : 100 % ;
}
. image gauche {
flotteur : gauche ;
marge : 0 1. 5em 1em 0 ;
haut : 0. 25em ;
} image droite {
Flotter à droite;
marge : 0 0 1em 1. 5em ;
haut : 0. 25em ;
} image adapter {
bloc de visualisation;
marge : 0 0 2em 0 ;
largeur : 100 % ;
}
. image adapter img {
largeur : 100 % ;
}
. image principal {
bloc de visualisation;
marge : 0 0 3em 0 ;
largeur : 100 % ;
}
. image image principale {
largeur : 100 % ;
}
/* Liste */
ol {
style de liste : décimal ;
marge : 0 0 2em 0 ;
padding-gauche : 1. 25em ;
}
ol li {
padding-gauche : 0. 25em ;
}
ul {
style de liste : disque ;
marge : 0 0 2em 0 ;
padding-gauche : 1 em ;
}
ul li {
padding-gauche : 0. 5em ;
}
ul. alt {
style de liste : aucun ;
padding-gauche : 0 ;
}
ul. alt li {
bordure supérieure : solide 1px ;
rembourrage : 0. 5em 0;
}
ul. alt li:premier-enfant {
bordure supérieure : 0 ;
padding-top : 0 ;
}
ul. Icônes {
curseur : par défaut ;
style de liste : aucun ;
padding-gauche : 0 ;
}
ul. icônes li {
affichage : bloc en ligne ;
rembourrage : 0 1em 0 0 ;
}
ul. icônes li:dernier enfant {
rembourrage à droite : 0 ;
}
ul. Actions {
curseur : par défaut ;
style de liste : aucun ;
padding-gauche : 0 ;
}
ul. actions li {
affichage : bloc en ligne ;
rembourrage : 0 1em 0 0 ;
alignement vertical : milieu ;
}
ul. actions li:dernier enfant {
rembourrage à droite : 0 ;
}
ul. Actions petit li {
rembourrage : 0 0. 5em 0 0;
}
ul. Actions li vertical {
bloc de visualisation;
rembourrage : 1em 0 0 0 ;
}
ul. Actions vertical li:premier-enfant {
padding-top : 0 ;
}
ul. Actions li vertical > * {
marge inférieure : 0 ;
}
ul. Actions vertical petit li {
rembourrage : 0 5em 0 0 0 ;
}
ul. Actions vertical petit li:premier-enfant {
padding-top : 0 ;
}
ul. Actions adapter {
affichage : tableau ;
marge-gauche : -1 em ;
rembourrage : 0 ;
table-disposition : fixe ;
largeur : calc(100% + 1em);
}
ul. Actions fit li {
affichage : tableau-cellule ;
rembourrage : 0 0 0 1em ;
}
ul. Actions fit li > * {
marge inférieure : 0 ;
}
ul. Actions adapter petit {
marge gauche : -0. 5em ;
largeur : calc(100 % + 0. 5em);
}
ul. Actions adapter petit li {
rembourrage : 0 0 0 0. 5em ;
}
Écran @media et (largeur maximale : 480 px) {
ul. Actions {
marge : 0 0 2em 0 ;
}
ul. actions li {
rembourrage : 1em 0 0 0 ;
bloc de visualisation;
aligner le texte : centrer ;
largeur : 100 % ;
}
ul. actions li:premier-enfant {
padding-top : 0 ;
}
ul. actions li > * {
largeur : 100 % ;
marge : 0 !important;
}
ul. Actions petit li {
rembourrage : 0 5em 0 0 0 ;
}
ul. Actions petit li:premier-enfant {
padding-top : 0 ;
}
}
dl {
marge : 0 0 2em 0 ;
}
dl dt {
bloc de visualisation;
poids de la police : 400 ;
marge : 0 0 1em 0 ;
}
dl jj {
marge-gauche : 2em ;
}
ul. alt li {
border-top-color : #666666 ;
}
/* Tableau */
. table-wrap {
-webkit-overflow-scrolling : toucher ;
débordement-x : auto ;
}
tableau {
marge : 0 0 2em 0 ;
largeur : 100 % ;
}
table tbody tr {
bordure : solide 1px ;
bordure-gauche : 0 ;
bordure droite : 0 ;
}
tableau td {
rembourrage : 0. 75em 0. 75em ;
}
tableau e {
taille de police : 0. 9em ;
poids de la police : 400 ;
rembourrage : 0 0. 75em 0. 75em 0. 75em ;
aligner le texte : à gauche ;
}
en-tête de table {
bordure inférieure : solide 2px ;
}
pied de table {
bordure supérieure : solide 2px ;
}
tableau. alt {
border-collapse : séparé ;
}
tableau. alt tbody tr td {
bordure : solide 1px ;
border-left-width : 0 ;
border-top-width : 0 ;
}
tableau. alt tbody tr td:premier-enfant {
bordure-gauche-largeur : 1 px ;
}
tableau. alt tbody tr:first-child td {
border-top-width : 1 px ;
}
tableau. titre alternatif {
bordure inférieure : 0 ;
}
tableau. alt pied {
bordure supérieure : 0 ;
}
table tbody tr {
couleur de bordure : #666666 ;
}
table tbody tr:nth-child(2n + 1) {
couleur de fond : rgba (144, 144, 144, 0. 075);
}
tableau e {
couleur : #444444 ;
}
en-tête de table {
border-bottom-color : #666666 ;
}
pied de table {
border-top-color : #666666 ;
}
tableau. alt tbody tr td {
couleur de bordure : #666666 ;
}
/* Article */
. article {
rembourrage : 3em 3em 1em 3em ;
couleur de fond : #ffffff ;
rayon de bordure : 4 px ;
aligner le texte : centrer ;
}
. en-tête de l'élément {
border-top-left-radius : 4 px ;
border-top-right-radius : 4 px ;
marge : -3em 0 3em -3em ;
largeur : calc(100% + 6em);
hauteur : 15em ;
affichage : -moz-flex ;
affichage : -webkit-flex ;
affichage : -ms-flex ;
affichage : flexible ;
-moz-align-items : centre ;
-webkit-align-items : centre ;
-ms-align-items : centre ;
align-items : center ;
-moz-justify-content : centre ;
-webkit-justify-content : centre ;
-ms-justify-content : centre ;
justifier-contenu : centrer ;
couleur de fond : #444 ;
couleur : rgba (255, 255, 255, 0. 75);
position : relative ;
débordement caché;
}
. saisie de l'entête de la rubrique, . sélection d'en-tête d'élément, . zone de texte d'en-tête d'élément {
couleur : #ffffff ;
}
. en-tête d'élément a {
couleur : hériter ;
}
. en-tête d'élément a:hover {
couleur : #EF6480 !important;
}
. en-tête d'article fort, . en-tête de l'élément b {
couleur : #ffffff ;
}
. en-tête de poste h1, . en-tête de poste h2, . en-tête de poste h3, . en-tête d'article h4, . en-tête d'article h5, . en-tête de l'élément h6 {
couleur : #ffffff ;
}
. en-tête de l'élément blockquote {
border-left-color : #ffffff ;
}
. code d'en-tête d'article {
arrière-plan : rgba (255, 255, 255, 0. 075);
border-color : #ffffff ;
}
. en-tête de l'élément hr {
border-bottom-color : #ffffff ;
}
. en-tête d'élément a {
-moz-transition : -moz-transform 0. 2s de facilité ;
-webkit-transition : -webkit-transform 0. 2s de facilité ;
-ms-transition : -ms-transform 0. 2s de facilité ;
transition : transformer 0. 2s de facilité ;
taille de fond : couverture ;
position d'arrière-plan : centre ;
répétition d'arrière-plan : pas de répétition ;
position : absolue ;
haut : 0 ;
gauche : 0 ;
largeur : 100 % ;
hauteur : 100 % ;
bloc de visualisation;
}
. en-tête d'élément a:before {
contenu: '';
bloc de visualisation;
position : absolue ;
haut : 0 ;
gauche : 0 ;
largeur : 100 % ;
hauteur : 100 % ;
couleur de fond : rgba (0, 0, 0, 0. 25);
image d'arrière-plan : url("images/superposition. png");
}
. en-tête de l'élément : survolez un {
-moz-transform : échelle(1. 1);
-webkit-transform : mise à l'échelle(1. 1);
-ms-transform : mise à l'échelle(1. 1);
transformée : échelle (1. 1);
}
. en-tête de l'élément > * {
position : relative ;
indice z : 1 ;
}
. en-tête de l'élément h3 {
marge : 0 ;
-moz-pointer-events : aucun ;
-événements de pointeur webkit : aucun ;
-événements de pointeur ms : aucun ;
événements de pointeur : aucun ;
}
. articles {
affichage : -moz-flex ;
affichage : -webkit-flex ;
affichage : -ms-flex ;
affichage : flexible ;
-moz-flex-wrap : enveloppe ;
-webkit-flex-wrap : enveloppe ;
-ms-flex-wrap : enveloppe ;
flex-wrap : enveloppe ;
largeur : calc(100% + 2em);
marge : -2em 0 0 -2em ;
}
. articles article {
marge : 2em 0 0 2em ;
largeur : calc(50% - 2em);
}
Écran @media et (largeur maximale : 980px) {
. en-tête de l'élément {
hauteur : 25em ;
}
. articles {
-moz-flex-direction : colonne ;
-webkit-flex-direction : colonne ;
-ms-flex-direction : colonne ;
flex-direction : colonne ;
-moz-flex-wrap : maintenant ;
-webkit-flex-wrap : nowrap ;
-ms-flex-wrap : maintenant ;
flex-wrap : nowrap ;
largeur : 100 % ;
marge : 0 ;
}
. articles article {
largeur : 100 % ;
marge : 0 0 2em 0 ;
}
. articles item:dernier-enfant {
marge inférieure : 0 ;
}
}
Écran @media et (largeur maximale : 736px) {
. en-tête de l'élément {
hauteur : 15em ;
}
. articles article {
marge : 0 0 1em 0 ;
}
}
Écran @media et (largeur maximale : 480 px) {
. article {
rembourrage : 2em 1em 0. 1em 1em;
}
. en-tête de l'élément {
hauteur : 12em ;
marge : -2em 0 2em -1em ;
largeur : calc(100% + 2em);
}
}
/* Emballage */
#emballage {
largeur : 64em ;
marge : 0 automatique ;
largeur max : calc(100% - 4em);
rembourrage : 4em 0 2em 0 ;
}
#emballage > . principal {
marge-bas : 4em ;
}
Écran @media et (largeur maximale : 980px) {
#emballage {
rembourrage : 2em 0 2em 0 ;
}
#emballage > . principal {
marge-bas : 2em ;
}
}
Écran @media et (largeur maximale : 736px) {
#emballage {
largeur max : calc(100% - 2em);
rembourrage : 1em 0 0. 1em 0;
}
#emballage > . principal {
marge-bas : 1em ;
}
}
/* Entête */
#entête {
couleur de fond : #444 ;
couleur : rgba (255, 255, 255, 0. 75);
affichage : -moz-flex ;
affichage : -webkit-flex ;
affichage : -ms-flex ;
affichage : flexible ;
-moz-align-items : centre ;
-webkit-align-items : centre ;
-ms-align-items : centre ;
align-items : center ;
-moz-justify-content : centre ;
-webkit-justify-content : centre ;
-ms-justify-content : centre ;
justifier-contenu : centrer ;
-moz-flex-direction : colonne ;
-webkit-flex-direction : colonne ;
-ms-flex-direction : colonne ;
flex-direction : colonne ;
rembourrage : 8em 0 6em 0 ;
image d'arrière-plan : url(". / /images/bannière. jpg");
taille de fond : couverture ;
position d'arrière-plan : centre ;
pièce jointe en arrière-plan : fixe ;
aligner le texte : centrer ;
position : relative ;
curseur : par défaut ;
}
# entrée d'en-tête, # sélection d'en-tête, # zone de texte d'en-tête {
couleur : #ffffff ;
}
#en-tête un {
couleur : hériter ;
}
#header a:hover {
couleur : #EF6480 !important;
}
#header fort, #header b {
couleur : #ffffff ;
}
#entête h1, #entête h2, #entête h3, #entête h4, #entête h5, #entête h6 {
couleur : #ffffff ;
}
#header blockquote {
border-left-color : #ffffff ;
}
#code d'en-tête {
arrière-plan : rgba (255, 255, 255, 0. 075);
border-color : #ffffff ;
}
#header hr {
border-bottom-color : #ffffff ;
}
#header:avant {
contenu: '';
bloc de visualisation;
position : absolue ;
haut : 0 ;
gauche : 0 ;
largeur : 100 % ;
hauteur : 100 % ;
couleur de fond : rgba (0, 0, 0, 0. 25);
image d'arrière-plan : url("images/superposition. png");
}
#en-tête h1 {
marge-bas : 0. 5em ;
}
#entête . intérieur {
position : relative ;
indice z : 1 ;
}
#entête. alt {
hauteur : 20em ;
hauteur min : 20em ;
hauteur min : 75vh ;
}
#entête. alt : avant {
-moz-transition : facilité de couleur d'arrière-plan 3 s ;
-webkit-transition : facilité de couleur de fond 3s ;
-ms-transition : facilité de 3 s pour la couleur d'arrière-plan ;
transition : facilité de 3 s de couleur de fond ;
-moz-transition-délai : 1 s ;
-délai de transition webkit : 1 s ;
-délai de transition ms : 1 s ;
délai de transition : 1 s ;
}
#entête. alt h1 {
taille de police : 4em ;
rembourrage : 0 0. 5em 0 25em 0. 5em ;
bordure inférieure : solide 2px #ffffff ;
poids de la police : 200 ;
famille de polices : "Pacifico", cursive ;
transformation de texte : aucune ;
espacement des lettres : 0 ;
}
#entête. alt p {
transformation de texte : majuscule ;
interlettrage : 0. 325rems ;
poids de la police : 400 ;
taille de police : 0. 8em ;
rembourrage : 0 1. 25em ;
}
#entête. autre intérieur {
-moz-transition : facilité d'opacité 2s ;
-webkit-transition : facilité d'opacité 2s ;
-ms-transition : facilité d'opacité 2 s ;
transition : opacité 2s facilité ;
opacité : 1 ;
}
corps. est en train de charger #header. alt : avant {
couleur de fond : noir ;
}
corps. est en train de charger #header. autre intérieur {
opacité : 0 ;
}
Écran @media et (largeur maximale : 1 280 pixels) {
#entête {
pièce jointe d'arrière-plan : défilement ;
}
}
Écran @media et (largeur maximale : 736px) {
#entête {
rembourrage : 4em 2em 2em 2em ;
}
#entête. alt h1 {
taille de police : 2. 5em ;
padding-gauche : 0 ;
rembourrage à droite : 0 ;
}
#entête. alt p {
rembourrage : 0 ;
}
#entête. autre intérieur {
largeur max : 20em ;
}
}
/* Principal */
#principal {
rembourrage : 4em 4em 2em 4em ;
couleur de fond : #ffffff ;
rayon de bordure : 4 px ;
}
#main > header:first-child {
aligner le texte : centrer ;
}
Écran @media et (largeur maximale : 736px) {
#principal {
rembourrage : 2em 2em 0. 1em 2em;
}
}
Écran @media et (largeur maximale : 480 px) {
#principal {
rembourrage : 2em 1em 0. 1em 1em;
}
}
/* Présentation */
#introduction {
rembourrage : 4em 4em 2em 4em ;
couleur de fond : #ffffff ;
rayon de bordure : 4 px ;
aligner le texte : centrer ;
}
Écran @media et (largeur maximale : 736px) {
#introduction {
rembourrage : 2em 2em 0. 1em 2em;
}
}
Écran @media et (largeur maximale : 480 px) {
#introduction {
rembourrage : 2em 1em 0. 1em 1em;
}
#intro p br {
affichage : aucun ;
}
}
/* incitation à l'action */
#cta {
rembourrage : 2em 0 0. 1em 0;
aligner le texte : centrer ;
}
Écran @media et (largeur maximale : 736px) {
#cta {
rembourrage : 2em 2em 0. 1em 2em;
}
}
Écran @media et (largeur maximale : 480 px) {
#cta {
rembourrage : 2em 1em 0. 1em 1em;
}
#cta p br {
affichage : aucun ;
}
}
/* Bas de page */
#bas de page {
aligner le texte : centrer ;
marge supérieure : 4em ;
}
#footer un {
couleur : hériter ;
}
#footer : avant {
contenu: '';
affichage : bloc en ligne ;
largeur : 6em ;
hauteur : 2 pixels ;
couleur de fond : #666666 ;
marge-bas : 4em ;
}
#bas de page . droits d'auteur {
taille de police : 0. 8em ;
}
Écran @media et (largeur maximale : 736px) {
#bas de page {
marge supérieure : 2em ;
}
#footer : avant {
marge-bas : 2em ;
}
}