/* fonts */ @font-face { font-display: swap; font-family: Noteworthy; font-weight: normal; src: url("/medias/Noteworthy.woff2") format("woff2"), url("/medias/Noteworthy.woff") format("woff"); } @font-face { font-display: swap; font-family: Cabin; font-weight: normal; src: url("/medias/Cabin-Regular.woff2") format("woff2"), url("/medias/Cabin-Regular.woff") format("woff"); } /* themes */ .start-theme, .pink-theme { --bg-color: #ec008c; --nav-color: #fff; } .green-theme { --bg-color: #59c13c; --nav-color: #fff; } /* containers */ /* starting value (JavaScript disabled) */ body { color: #333; font-family: 'Cabin', sans-serif; margin: 0; min-width: 300px; } main { padding-bottom: 80px; } .art { align-items: center; color: #333; display: flex; flex-direction: column; justify-content: center; min-height: 100vh; width: 100%; } .art-container { margin: auto; padding: 0 20px; scroll-behavior: smooth; } #accueil { text-align: center; } /* upgraded values (JavaScript enabled) */ .js main { padding-bottom: initial; } .js .art { left: -1000px; opacity: 0; overflow: hidden; position: fixed; margin-top: 70px; transform: translateX(100px); z-index: -1; } .js .art.visible { box-sizing: border-box; height: calc(100vh - 140px); left: 0; min-height: initial; opacity: 1; transform: initial; transition: transform 0.125s ease, opacity 0.375s ease; z-index: 1; } .js .art-container { max-height: 70vh; overflow-y: scroll; } /* nav */ .art nav { display: flex; flex-wrap: wrap; } .main-nav { align-items: center; background-color: #ec008c; background-color: var(--bg-color); box-sizing: border-box; display: flex; min-width: 300px; padding: 10px; position: fixed; width: 100%; z-index: 2; } #top-nav, #bottom-nav { height: 70px; } #top-nav { justify-content: space-between; top: 0; } #bottom-nav { bottom: 0; justify-content: center; } .nav-a { color: var(--nav-color); font-weight: bold; padding: 10px 0; } .nav-a:hover { border-bottom: solid 10px #59c13c; padding-bottom: 0; position: relative; text-decoration: none; top: -3px; transform: rotateZ(5deg); } .green-theme .nav-a:hover { border-bottom-color: #ec008c; } .separator { background-color: #fff; background-color: var(--nav-color); content: ""; height: 15px; margin: 0 10px; width: 1px; } #cta { align-items: center; background-color: #fff; background-color: var(--nav-color); border-radius: 3px; color: #ec008c; color: var(--bg-color); display: flex; font-weight: bold; padding: 10px; text-decoration: none; } .start-theme #cta:hover, .pink-theme #cta:hover { color: #59c13c; } .green-theme #cta:hover { color: #ec008c; } #logo-a { background: url('/medias/creperie-brigitte-morel-logos.png') no-repeat; background-size: 60px 200px; display: block; height: 50px; width: 50px; } svg { fill: #ec008c; fill: var(--bg-color); margin-right: 5px; pointer-events: none; width: 20px; } .start-theme #cta:hover svg, .pink-theme #cta:hover svg { fill: #59c13c; } .green-theme #cta:hover svg { fill: #ec008c; } .start-theme #logo-a, .pink-theme #logo-a { background-position: -7px -8px; } .green-theme #logo-a { background-position: -7px -141px; } /* text content */ h1, h2, h3 { font-family: 'Noteworthy', serif; } h1 { margin: 10px 0 -10px 0; } h2 { margin-top: 0; color: #ec008c; color: var(--bg-color); } p { line-height: 22px; } #accueil p { margin-bottom: 0; } a { color: inherit; } #a-propos a { text-decoration-color: #ec008c; } #pratique a { text-decoration-color: #59c13c; } ul { padding-left: 30px; } /* medias */ #accueil img { width: 150px; } #a-propos img { display: block; margin: 20px auto; width: 175px; } #agri-bio { display: none; position: absolute; right: 14px; top: 84px; } #agri-bio img { width: 40px; } .start-theme #agri-bio { display: block; } /* responsive */ @media (min-width: 500px) { #cta { display: none; } #top-nav { justify-content: center; } } @media screen and (min-width: 768px) { .art-container { max-width: 768px; } h1 { font-size: 1.5em; } #about-ct { align-items: center; display: flex; justify-content: center; } #accueil img { width: 200px; } #a-propos img { margin: 10px 20px 10px 0; min-width: 200px; } #pratique .art-container { display: grid; grid-template-columns: 1fr 2fr; grid-template-areas: "title title" "nav nav" "trouver contact" " horaires reglements" "mentions mentions"; } #pratique h2 { grid-area: title; } #pratique nav { grid-area: nav; } #nous-trouver { grid-area: trouver; } #nous-contacter { grid-area: contact; } #nos-horaires { grid-area: horaires; } #reglements { grid-area: reglements; } #mentions { grid-area: mentions; } } @media screen and (min-width: 960px) { .art-container { max-width: 960px; } }