Takubeh/assets/styles/style.scss

/* RESET */

:root {
    line-height: 1.25;
    font-size: 17px;
}

h1, h2, h3, h4, h5 {
    line-height: 1;
}

h1, h2, h3, h4, h5, figure, p, ol, ul {
    margin: 0;
}

h1 {
    text-align: center;
    padding: 2rem;
    font-size: 2rem;
}

/* ol, ul {
    list-style: none;
    padding-inline: 0;
} */

img {
    display: block;
    max-inline-size: 100%;
}

/* COLOR */

body {
    --color-white: white;
    --color-green1: #739761;
    --color-green2: #3a7f44;
    --color-green3: #336f5f;
    --color-green4: #3f6463;
    --color-green5: #92c83e;
    --color-red1: #d43e45;
    --color-red2: #69282f;
    --color-red3: #f36561;
    --color-yellow1: #d39734;
    --color-yellow2: #fac247;
    --color-yellow3: #dac161;
    --color-orange1: #d88250;
    --color-orange2: #bb5c46;
    --color-orange3: #e26f31;
    --color-blue1: #3ea1da;
    --color-blue2: #154f8e;
    --color-blue3: #002830;
    --color-violet1: #713678;
    --color-black: black;

    --gutter: 4rem;
    --header-home-height: 60vh;
    --header-height: 40vh;

    --bottle-width: 100px;
    --bottle-height: 300px;
}

.-white   { --color: var(--color-black); --bg-color: var(--color-white); a { color: var(--color-black) }}
.-green1  { --color: var(--color-white); --bg-color: var(--color-green1) }
.-green2  { --color: var(--color-white); --bg-color: var(--color-green2) }
.-green3  { --color: var(--color-white); --bg-color: var(--color-green3) }
.-green4  { --color: var(--color-white); --bg-color: var(--color-green4) }
.-green5  { --color: var(--color-white); --bg-color: var(--color-green5) }
.-red1    { --color: var(--color-white); --bg-color: var(--color-red1) }
.-red2    { --color: var(--color-white); --bg-color: var(--color-red2) }
.-red3    { --color: var(--color-white); --bg-color: var(--color-red3) }
.-yellow1 { --color: var(--color-white); --bg-color: var(--color-yellow1) }
.-yellow2 { --color: var(--color-white); --bg-color: var(--color-yellow2) }
.-yellow3 { --color: var(--color-white); --bg-color: var(--color-yellow3) }
.-orange1 { --color: var(--color-white); --bg-color: var(--color-orange1) }
.-orange2 { --color: var(--color-white); --bg-color: var(--color-orange2) }
.-orange3 { --color: var(--color-white); --bg-color: var(--color-orange3) }
.-blue1   { --color: var(--color-white); --bg-color: var(--color-blue1) }
.-blue2   { --color: var(--color-white); --bg-color: var(--color-blue2) }
.-blue3   { --color: var(--color-white); --bg-color: var(--color-blue3) }
.-violet1 { --color: var(--color-white); --bg-color: var(--color-violet1) }
.-black   { --color: var(--color-white); --bg-color: var(--color-black) }


.color {
    background-color: var(--bg-color);
    color: var(--color);
}

/* FONTS */

@font-face {
    font-family: 'Tox Typewriter';
    src: url('../fonts/ToxTypewriter.woff2') format('woff2'),
        url('../fonts/ToxTypewriter.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* DESIGN */

.box, .container {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.container {
    align-items: stretch;
}

.-c2 > div {
    width: 50%;
}

.-c2 > div.picture {
    width: 45%;
}

.-c2 > div.content {
    width: 55%;
}

.content {
    padding: var(--gutter); 
    width: 100%;
}

.boxes {
    display: flex;
    justify-content: center;
    gap: var(--gutter);
}

.tag {
    text-align: center;
    margin: 0 auto 2rem;
    width: fit-content;
}
.tag h3 {
    padding: 0.5rem 1.5rem;
    width: fit-content;
    margin: 0 auto;
}

.picture {
    position: relative;
    padding: 3rem;
    color: var(--color-white);
}

.picture img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

.gamme h2 { text-align: center }
.gamme .boxes { flex-wrap: wrap; gap: calc(var(--gutter) * 2) var(--gutter); max-width: 1400px; margin: 0 auto; }
.gamme .box { 
    width: calc(33% - var(--gutter) + 1rem);
    display: flex;
    align-items: center;
    max-width: 500px;

    &:hover img {
        animation: tiltBottle 1s 1 linear;
    }
    @keyframes tiltBottle{
        20%{
            transform: rotate(2deg);
        }
        40%{
            transform: rotate(-2deg);
        }
        60%{
            transform: rotate(2deg);
        }
        80%{
            transform: rotate(-2deg);
        }
    }
}
.gamme img { 
    width: var(--bottle-width); 
    height: var(--bottle-height); 
    display: inline-block;
}
.gamme .detail {
    --detail-gutter: 1rem;
    width: calc(100% - (var(--bottle-width) + var(--detail-gutter))); 
    display: inline-block;
    margin-left: var(--detail-gutter);
}
.gamme .title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.gamme .title h3, .gamme .title h4, .gamme .detail p { display: inline; margin: 0; margin: 0 }
.gamme h3 {
    padding: .1rem .5rem;
    font-size: 1.2rem;
}
.gamme h4 {
    font-size: .8rem;
}

.ombre {
    text-shadow: 2px 2px 4px #444,-2px -2px 4px #444,-2px 2px 4px #444,2px -2px 4px #444;
}

/* GENERAL */

body {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight: 300;
    --h1-size: 8rem;
    --h2-size: 4rem;
    --h3-size: 2rem;
    --h4-size: 1.5rem;
    --h5-size: 1.1rem;
}

a { color: var(--color-white); } 

h1, h2, h3, h4, h5, .scribe, blockquote {
    font-family: 'Tox Typewriter';
    font-weight: normal;
    font-style: normal;
}

h1 { font-size: var(--h1-size) }
h2 { font-size: var(--h2-size); padding-top: 1.5rem; padding-bottom: 1.5rem; line-height: 1; }
h3 { font-size: var(--h3-size) }
h4 { font-size: var(--h4-size) }
h5 { font-size: var(--h5-size) }

p, ul { padding-bottom: 1.5rem; }

strong {
    font-weight: bold;
}

blockquote {
    text-align: right;
    font-size: 1.2rem;
    border-right: 3px solid white;
    padding-right: 1rem;
    margin: 1rem 1rem 1rem 0;
}

.center { text-align: center }
.flower { list-style: none; padding: 0 }
.flower li {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M18.5,12A3.5,3.5 0 0,0 22,8.5A6.5,6.5 0 0,0 15.5,2A3.5,3.5 0 0,0 12,5.5A3.5,3.5 0 0,0 8.5,2A6.5,6.5 0 0,0 2,8.5A3.5,3.5 0 0,0 5.5,12A3.5,3.5 0 0,0 2,15.5A6.5,6.5 0 0,0 8.5,22A3.5,3.5 0 0,0 12,18.5A3.5,3.5 0 0,0 15.5,22A6.5,6.5 0 0,0 22,15.5A3.5,3.5 0 0,0 18.5,12M12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16M14.5,12A2.5,2.5 0 0,1 12,14.5A2.5,2.5 0 0,1 9.5,12A2.5,2.5 0 0,1 12,9.5A2.5,2.5 0 0,1 14.5,12Z'/%3E%3Cscript xmlns=''/%3E%3C/svg%3E") no-repeat left top;
    background-size: 1rem;
    padding: 0 0 .5rem 1.5rem;
}

/* MOBILE

Les media query permettent d'adapter le design selon la largeur des appareils :
    320px — 480px: Mobile devices
    481px — 768px: iPads, Tablets
    769px — 1024px: Small screens, laptops
    1025px — 1200px: Desktops, large screens
    1201px and more —  Extra large screens, TV
*/
@media screen and (max-width: 1200px) {
    body {
        /* background-color: yellow; */
        --h1-size: 7rem;
        --h2-size: 3.5rem;
        --h3-size: 1.75rem;
        --h4-size: 1.5rem;
        --h5-size: 1.1rem;
        --gutter: 3rem;
    }
}
@media screen and (max-width: 1024px) {
    body {
        /* background-color: green; */
        --h1-size: 6rem;
        --h2-size: 3rem;
        --h3-size: 1.5rem;
        --h4-size: .75rem;
        --h5-size: .5rem;
        --gutter: 2rem;
    }
    .gamme .box {
        width: calc(50% - var(--gutter) / 2);
    }
}
@media screen and (max-width: 768px) {
    body {
        /* background-color: red; */
        --h1-size: 5rem;
        --h2-size: 2.5rem;
        --h3-size: 1.75rem;
        --h4-size: 1.5rem;
        --h5-size: 1.1rem;
        --gutter: 1.5rem;


        --bottle-width: 75px;
        --bottle-height: 225px;
    }
    .gamme .box {
        width: 100%;
    }
    .container { flex-wrap: wrap ;}
    .container .picture { min-height: 80vh; }
    .container .picture { order: 2 }
    .container .content { order: 1 }
    .-c2 > div, .-c2 > div.picture, .-c2 > div.content {
        width: 100%;
    }
}
@media screen and (max-width: 480px) {
    body {
        /* background-color: blue; */
        --h1-size: 4rem;
        --h2-size: 2rem;
        --h3-size: 1rem;
        --h4-size: .75rem;
        --h5-size: .5rem;
        --header-home-height: 50vh;
        --header-height: 30vh;
        --gutter: 1rem;
        --bottle-width: 50px;
        --bottle-height: 150px;
    }
    h2 { text-align: center }
    .boxes { flex-wrap: wrap }
}

p:empty, p:-moz-only-whitespace {
    display:none;
}

.simple {
    max-width: 800px;
    margin: 0 auto;
    padding: 1rem;

    --h1-size: 4rem;
    --h2-size: 2rem;
}

.chiffre {
    display: flex;
    list-style: none;
    justify-content: space-between;
    font-family: 'Tox Typewriter';
    font-weight: normal;
    font-style: normal;
    margin: 0;
    padding: 0;

    h3 {
        font-size: 3rem;
    }

    p {
        font-size: 1.5rem;
    }

    li {
        text-align: center;
        flex: 1
    }

    img {
        margin: 0 auto;
    }
}

.right {
    text-align: right;
    font-family: 'Tox Typewriter';
    font-weight: normal;
    font-style: normal;
}

.carte {
    width: 80%;
    margin: 1rem auto;
}