www.moonwalks.be/theme/static/css/flyer.css

/*  RESET
    ===================================================== */
body{
    background: white;
    color: black;
}

body > header{
    display: none;
}

body > section.grid-display > .column-fixed{
    display: none;
}

body > section.grid-display {
	display: block;
	padding: 0 !important;
}

.text-content{
    max-width: none;
}

/*  VARIABLES
    ===================================================== */

:root{
    /* big -> bigger but mono big stay the same */
    --fs-big: 5rem;
    --fs-mono-big: 2.4rem;

    /* reduce a bit the lh for print */
    --lh: 1.3rem;

    /* 3 lang paysage */
    --fs-big: 5rem;

    /* 3 langs paysage */
    --fs-main: 11pt;

    /* 
    notes:
    - 12pt is a bit too much for main text
    */

    /* variable for flyer */
    --margin: 1cm;
    /* A5 */
    --page-w: 210mm;
    --page-h: 148mm;
}


/*  PRINT LAYOUT
    ===================================================== */
.page{
    width: var(--page-w);
    height: var(--page-h);

    box-sizing: border-box;
    
    position: relative;
    overflow: visible;
    
    /* https://developer.mozilla.org/en-US/docs/Web/CSS/break-after */
    break-after: page;
    page-break-inside: avoid;
}

.container{
    position: relative;
}
.layer{
    position: absolute;
    inset: 0;
}
.page-rotate{
    width: var(--page-h);
    height: var(--page-w);
    position: absolute;
    top: 100%;
    right: 0;
    transform-origin: top right;
    transform: rotate(90deg);
}

@media only screen {
    body{
        background-color: whitesmoke;
    }
    .page{
        margin: 1cm auto;
        outline: 1px yellowgreen solid;
        background: white;
    }
}

/*  COMPOSITION
    ===================================================== */

html{
    font-size: var(--fs-main);
}

.flyer h2{
    line-height: 1;

    display: inline-block;
}
.flyer h2:nth-of-type(3){
    margin-left: calc(var(--lh) * 2);
}


.recto__text{
    padding: var(--margin);

    display: grid;
    grid-template-rows: 1fr min-content min-content;
}
.verso__text{
    padding: var(--margin);

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.recto__langs{
    display: flex;
    gap: var(--lh);
}
.recto__langs > *{
    flex: 0 1 100%;
    gap: var(--lh);
}

.recto__lang > p{
    margin: 0;
}

footer{
    margin: calc(var(--lh) * 1) 0 calc(var(--lh) * 0.5);
    display: flex;
    /* justify-content: space-between; */
    align-items: baseline;

    gap: calc(var(--lh) * 2);

    /* 3 langs paysage */
    margin: calc(var(--lh) * 0.5) 0 calc(var(--lh) * 0);
}

.verso footer{
    color: white;
}

/*  GRID DRAWING
    ===================================================== */
  
.grid-cell{
    width: 100%;
    height: 100%;
    position: relative;
}
.element-wrapper{
    position: absolute;
    inset: 0;

    transform-origin: center center;

    width: 100%;
    height: 100%;
}

/* added */

.drawing-back{
    background: 
        radial-gradient(circle closest-side, white, white 50%, transparent calc(100% -  var(--margin))),
        linear-gradient(to bottom, white, black);

    /* background-blend-mode: difference; */
}

/* .drawing-cirlce{
    background: linear-gradient(white, black);
} */

.drawing-grid{
    box-sizing: border-box;
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;

    /* mix-blend-mode: difference; */
}

.leaf{
    --s: 80%;
    box-sizing: border-box;
    width: var(--s);
    height: var(--s);
    border-radius: 0 100% 0 50% / 0 50% 0 100%;
    background: black;

    /* border: var(--border);
    background: white; */
}