/* Theme Name: Cake Author: Cake Communication Version: 1.2 Prefixed @ https://autoprefixer.github.io/ */ /* ========================================================================== HTML5, Reset & Base setup ========================================================================== */ * { -webkit-box-sizing: border-box; box-sizing: border-box; color: inherit; font: inherit; } *:focus { outline: 0; } html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } html, body { width: 100%; height: 100%; } body { -webkit-font-smoothing: subpixel-antialiased; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, hr { display: block; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } audio:not([controls]), [hidden], template { display: none; height: 0; } summary { display: list-item; } nav li { display: inline-block; } body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, hr, ul, ol, dl, dd, nav, menu, button, input, optgroup, select, textarea, fieldset, nav ul, nav ol, menu ul, menu ol, li > ul, li > ol, iframe { margin: 0; } input[type="checkbox"], input[type="radio"], menu, nav ul, nav ol, menu ul, menu ol, fieldset { padding: 0; } button::-moz-focus-inner { padding: 0; } input::-moz-focus-inner { padding: 0; } td, th, legend, iframe, pre, textarea { overflow: auto; } svg:not(:root) { overflow: hidden; } hr, img, legend, fieldset, iframe, a img { border: 0 none; } button::-moz-focus-inner { border: 0 none; } input::-moz-focus-inner { border: 0 none; } hr, input[type="search"] { -webkit-box-sizing: content-box; box-sizing: content-box; } nav, menu, nav ul, nav ol, menu ul, menu ol { list-style: none; list-style-image: none; } img { vertical-align: middle; outline: none; } img, object, embed, video { height: auto; } input[type="number"]::-webkit-inner-spin-button { height: auto; } input[type="number"]::-webkit-outer-spin-button { height: auto; } img, object, embed { max-width: 100%; } svg img { max-width: none; } iframe, video { width: 100%; } table { border-collapse: collapse; border-spacing: 0; } input { line-height: normal; } button { overflow: visible; } button, select { text-transform: none; } label, a, button, input[type="reset"], input[type="submit"] { cursor: pointer; } button[disabled], html input[disabled] { cursor: default; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; } input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } a { background: transparent; text-decoration: none; position: relative; } a:active, a:hover { outline: 0; text-decoration: none; } b, strong, .strong, optgroup { font-weight: 700; } dfn, em { font-style:italic; } small { font-size: 75%; } sub, sup { font-size: 40%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.7em; } sub { bottom: -0.25em; } pre { white-space: normal;} hr { height: 0; border-top: 1px solid; margin-top: -1px; } .svg-container { position: relative; height: 0; width: 100%; } .svg-container > svg { position: absolute; top: 0; left: 0; } svg { fill : currentColor; } /* ============================================================================ Margin & Padding ========================================================================== */ h1, h2, h3, h4, h5, h6, ul, ol, dd, p, pre, table, fieldset, blockquote, hr { margin-bottom: 1rem; } figure { margin-bottom: 0; } .box { padding: 1rem; } .pad-top, .pad-vertical { padding-top: 1rem; } .pad-bottom, .pad-vertical { padding-bottom: 1rem; } .pad-left, .pad-horizontal { padding-left: 1rem; } .pad-right, .pad-horizontal { padding-right: 1rem; } .margin-top, .margin-vertical { margin-top: 1rem; } .margin-bottom, .margin-vertical { margin-bottom: 1rem; } .margin-left, .margin-horizontal { margin-left: 1rem; } .margin-right, .margin-horizontal { margin-right: 1rem; } hr.pad-left, hr.pad-horizontal { padding-left: 0; margin-left: 1rem; } hr.pad-right, hr.pad-horizontal { padding-right: 0; margin-right: 1rem; } .box-quart { padding: .25rem; } .pad-top-quart, .pad-vertical-quart { padding-top: .25rem; } .pad-bottom-quart, .pad-vertical-quart { padding-bottom: .25rem; } .pad-left-quart, .pad-horizontal-quart { padding-left: .25rem; } .pad-right-quart, .pad-horizontal-quart { padding-right: .25rem; } .margin-quart { margin: .25rem; } .margin-top-quart, .margin-vertical-quart { margin-top: .25rem; } .margin-bottom-quart, .margin-vertical-quart { margin-bottom: .25rem; } .margin-left-quart, .margin-horizontal-quart { margin-left: .25rem; } .margin-right-quart, .margin-horizontal-quart { margin-right: 2rem; } hr.pad-left-quart, hr.pad-horizontal-quart { padding-left: 0; margin-left: .25rem; } hr.pad-right-quart, hr.pad-horizontal-quart { padding-right: 0; margin-right: .25rem; } .box-half { padding: .5rem; } .pad-top-half, .pad-vertical-half { padding-top: .5rem; } .pad-bottom-half, .pad-vertical-half { padding-bottom: .5rem; } .pad-left-half, .pad-horizontal-half { padding-left: .5rem; } .pad-right-half, .pad-horizontal-half { padding-right: .5rem; } .margin-half { margin: .5rem; } .margin-top-half, .margin-vertical-half { margin-top: .5rem; } .margin-bottom-half, .margin-vertical-half { margin-bottom: .5rem; } .margin-left-half, .margin-horizontal-half { margin-left: .5rem; } .margin-right-half, .margin-horizontal-half { margin-right: 2rem; } hr.pad-left-half, hr.pad-horizontal-half { padding-left: 0; margin-left: .5rem; } hr.pad-right-half, hr.pad-horizontal-half { padding-right: 0; margin-right: .5rem; } .box-x1 { padding: 1rem; } .align-right-x1, .alignright-x1 { margin-left: 1rem; } .align-left-x1, .alignleft-x1 { margin-right: 1rem; } .pad-top-x1, .pad-vertical-x1 { padding-top: 1rem; } .pad-bottom-x1, .pad-vertical-x1 { padding-bottom: 1rem; } .pad-left-x1, .pad-horizontal-x1 { padding-left: 1rem; } .pad-right-x1, .pad-horizontal-x1 { padding-right: 1rem; } .margin-top-x1, .margin-vertical-x1 { margin-top: 1rem; } .margin-bottom-x1, .margin-vertical-x1 { margin-bottom: 1rem; } .margin-left-x1, .margin-horizontal-x1 { margin-left: 1rem; } .margin-right-x1, .margin-horizontal-x1 { margin-right: 1rem; } hr.pad-left-x1, hr.pad-horizontal-x1 { padding-left: 0; margin-left: 1rem; } hr.pad-right-x1, hr.pad-horizontal-x1 { padding-right: 0; margin-right: 1rem; } .box-x2 { padding: 2rem; } .pad-top-x2, .pad-vertical-x2 { padding-top: 2rem; } .pad-bottom-x2, .pad-vertical-x2 { padding-bottom: 2rem; } .pad-left-x2, .pad-horizontal-x2 { padding-left: 2rem; } .pad-right-x2, .pad-horizontal-x2 { padding-right: 2rem; } .margin-x2 { margin: 2rem } .margin-top-x2, .margin-vertical-x2 { margin-top: 2rem; } .margin-bottom-x2, .margin-vertical-x2 { margin-bottom: 2rem; } .margin-left-x2, .margin-horizontal-x2 { margin-left: 2rem; } .margin-right-x2, .margin-horizontal-x2 { margin-right: 2rem; } hr.pad-left-x2, hr.pad-horizontal-x2 { padding-left: 0; margin-left: 2rem; } hr.pad-right-x2, hr.pad-horizontal-x2 { padding-right: 0; margin-right: 2rem; } .box-x3 { padding: 3rem; } .pad-top-x3, .pad-vertical-x3 { padding-top: 3rem; } .pad-bottom-x3, .pad-vertical-x3 { padding-bottom: 3rem; } .pad-left-x3, .pad-horizontal-x3 { padding-left: 3rem; } .pad-right-x3, .pad-horizontal-x3 { padding-right: 3rem; } .margin-x3 { margin: 3rem } .margin-top-x3, .margin-vertical-x3 { margin-top: 3rem; } .margin-bottom-x3, .margin-vertical-x3 { margin-bottom: 3rem; } .margin-left-x3, .margin-horizontal-x3 { margin-left: 3rem; } .margin-right-x3, .margin-horizontal-x3 { margin-right: 3rem; } hr.pad-left-x3, hr.pad-horizontal-x3 { padding-left: 0; margin-left: 3rem; } hr.pad-right-x3, hr.pad-horizontal-x3 { padding-right: 0; margin-right: 3rem; } .box-x4 { padding: 4rem; } .pad-top-x4, .pad-vertical-x4 { padding-top: 4rem; } .pad-bottom-x4, .pad-vertical-x4 { padding-bottom: 4rem; } .pad-left-x4, .pad-horizontal-x4 { padding-left: 4rem; } .pad-right-x4, .pad-horizontal-x4 { padding-right: 4rem; } .margin-x4 { margin: 4rem } .margin-top-x4, .margin-vertical-x4 { margin-top: 4rem; } .margin-bottom-x4, .margin-vertical-x4 { margin-bottom: 4rem; } .margin-left-x4, .margin-horizontal-x4 { margin-left: 4rem; } .margin-right-x4, .margin-horizontal-x4 { margin-right: 4rem; } hr.pad-left-x4, hr.pad-horizontal-x4 { padding-left: 0; margin-left: 4rem; } hr.pad-right-x4, hr.pad-horizontal-x4 { padding-right: 0; margin-right: 4rem; } /* ============================================================================= Typography ========================================================================== */ @font-face { font-family: 'fontello'; font-weight: normal; font-style: normal; src: url('fonts/fontello.woff2?54074342') format('woff2'), url('fonts/fontello.woff?54074342') format('woff'); } @font-face { font-family: 'eloquent'; font-weight: normal; font-style: normal; src: url('fonts/eloquent_regular.woff2') format('woff2'), url('fonts/eloquent_regular.woff') format('woff'); } @font-face { font-family: 'eloquent'; font-weight: normal; font-style: italic; src: url('fonts/eloquent_italic.woff2') format('woff2'), url('fonts/eloquent_italic.woff') format('woff'); } /* 1rem = 20px */ html { font-family: 'Source Sans Pro', sans-serif; font-size: 125%; } /* 18px / 34px */ body { font-size: .75rem; line-height: 1.3; font-weight: 300 } /* fontello */ h1:after, i, [class^="icon-"]:before, [class*=" icon-"]:before { font-family: "fontello"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; text-align: center; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } i, [class^="icon-"]:before, [class*=" icon-"]:before { width: 1em; margin-right: .2em; margin-left: .2em; line-height: 1em; } h1 { font-weight: normal; font-family:'eloquent'; font-size: 6rem; line-height: .85; padding-top: .2em; color :#c94a39; margin-bottom: -.2em } h1:after { content: '\e800'; font-size: .6em; display: inline-block; vertical-align: middle; padding-left: .3em; } h2 { font-family: 'eloquent', sans-serif; font-weight: normal; font-size: 1.3rem; line-height: 1.2; padding-top: .5em; margin-bottom: .5em } h3 { font-size: 2rem; margin-bottom: 0; line-height: 2; font-weight:400} strong { font-size: 0.8rem;} a, a:before { color: #c94a39; } .strike { text-decoration: line-through;} /* fontello */ i, [class^="icon-"]:before, [class*=" icon-"]:before { font-family: "fontello"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: 1em; margin-right: .2em; text-align: center; font-variant: normal; text-transform: none; line-height: 1em; margin-left: .2em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-heart:before { content: '\e800'; } /* '' */ .icon-heart-empty:before { content: '\e801'; } /* '' */ .icon-down:before { content: '\e802'; } /* '' */ .icon-left:before { content: '\e803'; } /* '' */ .icon-right:before { content: '\e804'; } /* '' */ .icon-up:before { content: '\e805'; } /* '' */ .icon-mail:before { content: '\e806'; } /* '' */ .icon-check:before { content: '\e807'; } /* '' */ .icon-cancel:before { content: '\e808'; } /* '' */ .icon-plus:before { content: '\e809'; } /* '' */ .icon-minus:before { content: '\e80a'; } /* '' */ .icon-help:before { content: '\e80b'; } /* '' */ .icon-twitter:before { content: '\f309'; } /* '' */ .icon-facebook:before { content: '\f30c'; } /* '' */ /* ============================================================================ Colors ========================================================================== */ .pink { color :#edcfad; } .red { color: #c94a39; } .black { color: #403f3b; } .white { color: #fffef9; } /* ============================================================================ Layout ========================================================================== */ body { background-color: #fff; overflow-y: scroll} body > header { background-color :#f9a493; border-bottom: 3px solid; #403f3b; } body > header div { max-width: 2400px; padding: 1rem .5rem; margin-left: auto; margin-right: auto; position: relative } body > header nav { position: absolute; bottom: 0.5rem; right: 1rem;} body > header nav li { padding-right: .5rem; font-size: 1.4rem; font-size: 24px } body > header nav li.current-menu-item a { border-bottom: 3px solid #000 } body > header nav li a:hover { color: #000; } body > fieldset { padding: 10px 15px 0 15px; margin-bottom: 0;} body > fieldset > label { background-color: #f9a493; padding: 10px; border-radius: 10px; display: inline-block; text-transform: uppercase;} main.hani_oeuvres { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; max-width: 2400px; margin-left: auto; margin-right: auto; border: 5px solid #fff} main > .overlay { position: fixed; top:0 ; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .4s ease-in-out; } main.ctn { display: flex; padding: 2rem;} main.ctn > article { padding: 1rem; width: 100%; max-width: 600px; font-weight: 400} main.ctn > aside { padding-left: 1rem; padding-right: 1rem;} main .oeuvre { max-width: 500px; position: relative; } main .oeuvre > .anchor { position: absolute; top: 50%; transform: translateY(-50vh); } main .oeuvre > figure > label { display: block; ; color: red; z-index: 20; overflow: hidden } main .oeuvre > figure > label > .vendu { position: absolute; line-height: 30px; right: 35px; bottom: 5px; background: red; color: #fff; transform: rotate(90deg); padding: 0 10px; transform-origin: 100% 100%;} main .oeuvre > figure > label > .vendu i { transform: rotate(-90deg)} main .oeuvre > figure > label > img { border: 5px solid #fff} main .oeuvre > figure > figcaption { display:flex; justify-content: center; align-items:center; position: fixed; top: 0; bottom:0; left: 0; right: 0; z-index: 2; transform: translateX(-150%) ;} main .oeuvre > figure > figcaption > .close { position: fixed; top:0 ; left: 0; right: 0; bottom: 0; } main .oeuvre > figure > figcaption > article { display: flex; position: relative; border: 1rem solid transparent; justify-content: flex-end;} main .oeuvre > figure > figcaption > article > aside > img { object-fit : cover} main .oeuvre > figure > figcaption > article > div { padding: 2rem; min-width: 400px; background: #403f3b; color: #fffef9; } main .oeuvre > figure > figcaption > article nav li { position: absolute; top:50%; background: #edcfad; font-size: 1.5rem; padding: .25rem; } main .oeuvre > figure > figcaption > article nav li.prev { left: -.75rem;} main .oeuvre > figure > figcaption > article nav li.next { right:-.75rem;} main .oeuvre > figure > figcaption > article nav li.close { top: -.75rem; left: 20px} main input[name="oeuvres"]:checked + .oeuvre > figure > figcaption { transform: translateX(0) } main input[name="oeuvres"]:checked + .oeuvre ~ .oeuvre > figure > figcaption { transform: translateX(150%); } main input[name="oeuvres"]:checked ~ .overlay { opacity: 1; pointer-events: all; } @media only screen and (orientation : landscape) and (max-height: 940px) { main .oeuvre > figure > figcaption > article { width: calc(100vh + 400px); max-width:1300px } } @media only screen and (orientation : portrait) and (max-width: 880px) { main .oeuvre > figure > figcaption > article > div { padding: 1rem; } } @media only screen and (orientation : portrait) and (max-width: 760px) { main .oeuvre > figure > figcaption > article { flex-wrap: wrap; width: calc(100vh - 250px);} main .oeuvre > figure > figcaption > article > aside, main .oeuvre > figure > figcaption > article > div { min-width: 100%; } main .oeuvre > figure > figcaption > article > div { padding: 0.5rem 1rem; height: 250px} } @media only screen and (orientation : landscape) and (max-width: 720px) { main .oeuvre > figure > figcaption > article > aside { width: 265px;} h2 { font-size: 1rem} main .oeuvre > figure > figcaption > article > div { padding: 1rem; flex: 1; min-width: 0; } } @media only screen and (orientation : landscape) and (max-height: 350px) { h2 { font-size: 1rem} main .oeuvre > figure > figcaption > article > div { padding: 1rem;} } @media only screen and (max-width: 1000px) { body > header nav { position: static; padding-top: 10px;} } @media only screen and (max-width: 820px) { main.ctn { flex-wrap: wrap; flex-direction: column-reverse;} main.ctn > article { width: 100%; max-width: none;} } @media only screen and (max-width: 740px) { h1 { font-size: 4rem} main.ctn { padding-left: 0; padding-right: 0;} } @media only screen and (max-width: 520px) { h1 { font-size: 3rem;} h3 { font-size: 1.2rem;} main .oeuvre > figure > .open { pointer-events: none; } main .oeuvre > figure > figcaption { position: static;transform: translateX(0); border: 5px solid #fff; border-top:0 none; margin-top: -5px; } main .oeuvre > figure > figcaption > article { border: 0 none; width: 100%;} main .oeuvre > figure > figcaption > article > aside { display: none;} main .oeuvre > figure > figcaption > article > div { width: 100%; height: auto; padding: 1rem;} main .oeuvre > figure > figcaption > .close { display: none; pointer-events: none; } main .oeuvre > figure > figcaption > article nav li { display: none; } main input[name="oeuvres"]:checked + .oeuvre > figure > figcaption { transform: translateX(0) } main input[name="oeuvres"]:checked + .oeuvre ~ .oeuvre > figure > figcaption { transform: translateX(0); } main input[name="oeuvres"]:checked ~ .overlay { display: none;} } @media only screen and (max-width: 440px) { h1 { font-size: 3rem} h3 { font-size: 1rem; line-height: 1.3;} h3 span { opacity: 0; } h3 span:after { white-space: pre; content: "\A";} body > header nav a { font-size: 1rem;} } @media only screen and (min-width: 521px) { main .oeuvre { flex-basis:50%; } } @media only screen and (min-width: 681px) { main .oeuvre { flex-basis:33.3333%; } } @media only screen and (min-width: 901px) { main .oeuvre { flex-basis:25%; } } @media only screen and (min-width: 1201px) { main .oeuvre { flex-basis: 20%; } } @media only screen and (min-width: 1501px) { main .oeuvre { flex-basis: 16.6667%; } } /* ============================================================================ Helpers ========================================================================== */ /* Box elements */ .box > :last-child { margin-bottom: 0; } .pad-none, .pad-top-none, .pad-vertical-none { padding-top: 0; } .pad-none, .pad-bottom-none, .pad-vertical-none { padding-bottom: 0; } .pad-none, .pad-left-none, .pad-horizontal-none { padding-left: 0; } .pad-none, .pad-right-none, .pad-horizontal-none { padding-right: 0; } .margin-none, .margin-top-none, .margin-vertical-none { margin-top: 0; } .margin-none, .margin-bottom-none, .margin-vertical-none { margin-bottom: 0; } .margin-none, .margin-left-none, .margin-horizontal-none { margin-left: 0; } .margin-none, .margin-right-none, .margin-horizontal-none { margin-right: 0; } .pad-none { padding: 0; } .margin-none { margin-bottom: 0; } /* Fonts & Texts */ .text-left { text-align: left; } .text-right { text-align: right; } .text-center { text-align: center; } .text-justify { text-align: justify; } .lower-case { text-transform: lowercase; } .normal-case { text-transform: none; } .caps { text-transform: uppercase; } .nowrap { white-space: nowrap; } /* Floats & Alignements */ .align-center, .align-right, .align-left { display: block; } .align-center, .centered { margin-left: auto; margin-right: auto; clear: both; float: none; } .align-right { float: right; margin-left: 1rem; } .align-left { float: left; margin-right: 1rem; } /* Displays & Positionning */ .static { position: static; } .relative { position: relative; } .absolute { position: absolute; } .inline { display: inline; } .inline-block { display: inline-block; } .block { display: block; } /* Other */ .hidden { display: none; } .toggle { position: fixed; top:0; left: -9999em; }