styles.css

@import "https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.css";
@import "isaac-font.css";
@import "variables.css";
@import "common.css";
@import "wrappers.css";

:root {
	--black: #1D1D1B;
	--gray: #767676;
    --crema: #FCEEE6;
    --white-alpha: #ffffffF7;
}

html {
	color: var(--black);
    background: url('./img/bg.svg') var(--crema);
    animation-name: bg-color;
    animation-duration: 40s;
    animation-iteration-count: infinite;
    animation-timing-function: steps(5);
    animation-fill-mode: both;
}

/**
 * Barra superior común a todos os proxectos
 */
.page-header {
	position: fixed;
	background: rgba(0, 0, 0, 0.5);
	color: rgba(255, 255, 255, 0.5);
	top: 0;
	left: 0;
	width: 100%;
	box-sizing: border-box;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	font-size: 0.9rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
	z-index: 2;

	& .page-logo {
		display: flex;
		color: inherit;
		text-decoration: none;
		outline: 0;

		& strong {
			font-weight: var(--fw-light);
			display: block;
			font-size: .8rem;
			max-width: 10em;
			line-height: 1;
		}

		& svg {
			margin-right: 0.5em;
		}

		& path {
			fill: rgba(255, 255, 255, 0.5);
		}

		&:hover {
			color: white;

			& path {
				fill: white;
			}
		}
	}
}

.aspect-ratio {
	@extend %csans-aspect-ratio;
}

.ui-embed-code {
	min-height: 150px;

	& iframe {
		margin: 0 !important;
		display: block;
	}
}

.ly-grid[data-columns] > .column > * {
	padding-top: 1rem;
	padding-bottom: 1rem;
}


.project-social {
	padding-top: 4rem;
	padding-bottom: 3rem;
}

.project-social-highlight {

	& > div {
		overflow: hidden;
		max-height: 650px;
	}

	& iframe {
		max-height: 650px;
	}
}

.project-news-external {
	margin-bottom: 2rem;

	& ul {
		list-style: none;
		padding: 0;
		margin: 0;

		& > li {
			padding: .5em 0;
			border-top: solid 1px;
		}
	}
	& h3 {
		font-size: var(--fs-16);
		font-weight: normal;
		margin: 0;
		padding-left: 24px;
	}
	& small {
		display: block;
		padding-left: 24px;
		font-size: var(--fs-14);
		margin: 0;
		color: var(--color-medium);
	}
	& img {
		float: left;
		width: 16px;
		height: 16px;
		margin-top: 2px;
	}
	& a {
		text-decoration: none;
		color: var(--color-main);
	}
}

.project {
    & a {
        color: inherit;
    }
    & a:hover {
        text-decoration: line-through;
    }
    & svg {
        vertical-align: middle;
    }
}
.page-header {
    color: var(--black);
    background-color: var(--white-alpha);

    & .page-logo {
        & path {
            fill: currentColor;
        }
        &:hover {
            color: inherit;

            & path {
                fill: currentColor;
            }
        }
    }
}
.project-footer {
    color: var(--black);
    background-color: var(--white-alpha);
    padding: 1em 0;
    display: flex;
    flex-wrap: wrap;

    @media (min-width: 1000px) {
        justify-content: center;
    }

    & > div {
        margin: 1em 2em;
        max-width: 100%;

        @media (min-width: 1000px) {
            margin: 1em 4em;
        }
    }

    & h3 {
        font-size: .85rem;
        font-weight: normal;
        margin: 1em;
    }

    & ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }

    & li {
        margin: 1em;
    }
}
.project-block {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

    & > * {
        flex: 0 0 auto;
    }
}
.project-header-container {
    display: flex;
    background-color: var(--white-alpha);
    padding: 1em;
    max-width: 1000px;
    width: 90%;
    box-sizing: border-box;

    & > * {
        flex: 1 0 auto;
        max-width: 50%;
        max-height: 400px;
    }

    @media (max-width: 1000px) {
        flex-wrap: wrap;

        & > * {
            max-width: 100%;
            max-height: none;
        }
    }
}
.project-header {
    padding: 1em;
    box-sizing: border-box;

    & h1 {
        text-transform: uppercase;
        font-size: 2em;
        letter-spacing: -0.03em;
        margin: 0;
    }
}
.project-header-location {
    margin: 0;
}
.project-header-date {
    font-weight: bold;
    position: relative;
    margin: 2em 0 0 0;
    padding-top: 2em;

    &::before {
        content: "";
        display: block;
        width: 2em;
        border-top: 4px solid;
        position: absolute;
        top: 0;
        left: 0;
    }
}
.project-header-info {
    font-size: 1rem;
    font-style: italic;
    line-height: 1.4;
    margin-top: 2em;
}
.project-intro {
    overflow-y: auto;
    padding: 1em;
    box-sizing: border-box;
    line-height: 1.4;

    & h2 {
        font-size: inherit;
        margin: 0;
    }
}
.project-conferenciantes {
    width: 100%;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    outline: none;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;

    & > * {
        flex: 1 0 auto;
        scroll-snap-align: center;
    }
}
.carousel-buttons {
    position: absolute;
    background: var(--black);
    color: white;
    z-index: 2;
    border: none;
    padding: 2em;
    transition: transform 200ms;
    cursor: pointer;

    &:hover {
        transform: translateY(-2px);
        background: white;
        color: var(--black);
    }
    &:active {
        transform: translateY(2px);
    }

    & svg {
        display: block;
        fill: currentColor;
        width: 30px;
        height: 30px;
    }
    
    &.is-prev {
        left: 0;
        svg {
            transform: scaleX(-1);
        }
    }
    &.is-next {
        right: 0;
    }

    @media (max-width: 1000px) {
        padding: 1rem;
    }
    @media (max-width: 600px) {
        display: none;
    }
}
.conferenciante {
    --bg-color: var(--white-alpha);
    padding: 0 8vw;
    margin: 10vh 0;
    width: 450px;
    max-width: 80vw;
    position: relative;
}
.conferenciante-front {
    padding: 1em;
    background-color: var(--white-alpha);

    & .button {
        float: right;
    }
}
.conferenciante-back {
    padding: 2em;
    background-color: var(--white-alpha);
    position: absolute;
    top: 0;
    left: 8vw;
    width: calc(100% - 16vw);
    box-sizing: border-box;

    & .icon-button {
        position: absolute;
        top: 0;
        right: 0;
    }
}
.conferenciante:nth-child(1),
.conferenciante:nth-child(10) {
    --bg-color: #F3F2D2F7;

    & .conferenciante-front,
    & .conferenciante-back {
        background-color: var(--bg-color);
    }
}
.conferenciante:nth-child(2) {
    --bg-color: #FCEEE6F7;

    & .conferenciante-front,
    & .conferenciante-back {
        background-color: var(--bg-color);
    }
}
.conferenciante:nth-child(3) {
    --bg-color: #F0D6DCF7;

    & .conferenciante-front,
    & .conferenciante-back {
        background-color: var(--bg-color);
    }
}
.conferenciante:nth-child(4) {
    --bg-color: #F2CA9BF7;

    & .conferenciante-front,
    & .conferenciante-back {
        background-color: var(--bg-color);
    }
}
.conferenciante:nth-child(5) {
    --bg-color: #D7F0E0F7;

    & .conferenciante-front,
    & .conferenciante-back {
        background-color: var(--bg-color);
    }
}
.conferenciante:nth-child(6) {
    --bg-color: #D7EEF0F7;

    & .conferenciante-front,
    & .conferenciante-back {
        background-color: var(--bg-color);
    }
}
.conferenciante:nth-child(7) {
    --bg-color: #F5B8B5F7;

    & .conferenciante-front,
    & .conferenciante-back {
        background-color: var(--bg-color);
    }
}
.conferenciante:nth-child(8) {
    --bg-color: #BCE3D7F7;

    & .conferenciante-front,
    & .conferenciante-back {
        background-color: var(--bg-color);
    }
}
.conferenciante:nth-child(9) {
    --bg-color: #CCD7E6F7;

    & .conferenciante-front,
    & .conferenciante-back {
        background-color: var(--bg-color);
    }
}


.conferenciante-header {
    margin-bottom: 1em;

    & img {
        display: block;
        max-width: 100%;
        margin-bottom: 1em;
        mix-blend-mode: multiply;
        cursor: zoom-in;
    }
    & h2 {
        font-size: 2em;
        letter-spacing: -0.03em;
        margin: 0;
        font-weight: 700;
        line-height: 1;

        @media (min-width: 500px) {
            font-size: 2.6em;
        }
    }
    & p {
        font-size: 1.2em;
        margin: .5em 0;
    }
    & .conferenciante-disciplina {
        font-size: 1.1rem;
        font-style: italic;
        position: relative;
        padding-top: 2em;
        margin: 2em 0 0;

        &::before {
            content: "";
            display: block;
            width: 2em;
            border-top: 4px solid;
            position: absolute;
            top: 0;
            left: 0;
        }
    }
}
.conferenciante-front .conferenciante-header {
    margin-bottom: 4em;
}
.conferenciante-data {
    text-transform: uppercase;
    margin: 0;
    font-weight: bold;
}
.conferenciante-horario {
    font-style: italic;

    & p {
        margin-top: .3em;
        margin-bottom: 0;
    }
}
.conferenciante-bio {
    font-size: 1rem;
    line-height: 1.4;
    height: 400px;
    max-height: calc(100vh - 350px);
    overflow-y: auto;
}
.conferenciante-links {
    list-style: none;
    margin: 1em 0 0;
    padding: .5em 0;
    display: flex;
    flex-wrap: wrap;
    border-top: solid 1px;
    border-bottom: solid 1px;

    & a {
        display: block;
        padding: .5em 1em;
    }
    & svg {
        display: block;
        width: 24px;
        height: 24px;
    }
}

.flip {
    perspective: 1500px;
    transform-style: preserve-3d;
    position: relative;
    will-change: transform;
}
.flip-front,
.flip-back {
    backface-visibility: hidden;
    transition: 400ms;
    transform-style: preserve-3d;
}
.flip-front {
    z-index: 2;
}
.flip-back {
    transform: rotateY(-180deg);
}
.flip.is-reversed {
    & .flip-front {
        transform: rotateY(180deg);
    }
    & .flip-back {
        transform: rotateY(0);
        z-index: 3;
    }
}


.programa {
    background-color: var(--white-alpha);
    position: relative;
    display: flex;
    width: 90%;
    max-width: 1000px;
    box-sizing: border-box;

    & table {
        border-collapse: collapse;
    }

    @media (min-width: 500px) {
        padding-left: 6rem;
    }

    @media (max-width: 1000px) {
        flex-wrap: wrap;

        & .programa-dia {
            border-right: none;
            width: 100%;

            &:last-child {
                border-top: solid 1px;
            }
        }
    }
}
.programa-header {
    & h2 {
        text-transform: uppercase;
        font-size: 2rem;
        margin: 0;
    }

    @media (max-width: 499px) {
        text-align: center;
        padding: 1rem;
        border-bottom: solid 1px;
        width: 100%;
        box-sizing: border-box;
    }

    @media (min-width: 500px) {
        position: absolute;
        top: 2rem;
        left: 1rem;
        height: calc(100% - 20em);

        & h2 {
            transform: rotate(-90deg) translateX(-100%);
            transform-origin: left top 0;
            float: left;
            font-size: 3rem;
            position: sticky;
            top: 2em;
        }
    }
}
.programa-dia {
    width: 450px;
    padding: 1em 2em;
    margin-left: -1px;

    @media (min-width: 500px) {
        border-left: solid 1px;
        border-right: solid 1px;
    }

    & h3 {
        text-align: center;
        text-transform: uppercase;
    }
    &:last-child {
        border-right: none;
    }
}
.programa-evento-dia {
    text-align: center;
    padding: 1rem .5rem;
    vertical-align: top;
    white-space: nowrap;
}
.programa-evento-info {
    padding: 1rem .5rem;
    vertical-align: top;
}

.programa-evento.is-organizacion {
    color: var(--gray);

    & strong {
        font-weight: normal;
    }
}
.project-tickets {
    max-width: 1000px;
    background-color: var(--white-alpha);
    display: flex;
    color: var(--black);
    width: 90%;

    @media (max-width: 1000px) {
        flex-wrap: wrap;

        & .entradas-footer {
            margin-top: 0;
        }

        & .lugares {
            border-left: none;
            border-top: solid 1px;
            max-width: none;
        }

        & .lugares-lugar {
            margin-right: 2em;
        }
    }
}

.entradas {
    padding: 2em;
}
.entradas-footer {
    margin-top: 8em;
    line-height: 1.4;
}
.lugares {
    box-sizing: border-box;
    width: 100%;
    padding: 2em;
    border-left: solid 1px;
    max-width: 450px;
}
.lugares-lugar {
    display: inline-block;
    vertical-align: top;
}
.lugares p {
    line-height: 1.4em;
    margin: .5em 0;
}
.lugares h3 {
    margin: 2em 0 0;
}
.lugares a {
    font-size: .85em;
}

.project .button {
    background: var(--black);
    color: white;
    text-transform: uppercase;
    padding: .7em 1em;
    outline: 0;
    border: none;
    transition: top 200ms;
    cursor: pointer;
    position: relative;
    display: inline-flex;
    align-items: center;
    text-decoration: none;

    &:hover {
        top: -2px;
        text-decoration: none;
    }
    &:active {
        top: 2px;
    }
}
.icon-button {
    background: none;
    color: var(--black);
    display: inline-block;
    outline: 0;
    border: none;
    transition: top 200ms;
    cursor: pointer;
    padding: 1em;

    & svg {
        position: relative;
        display: block;
    }

    &:hover svg {
        top: -2px;
    }
    &:active svg {
        top: 2px;
    }
}

@keyframes bg-color {
    0% {
        background-color: #F3F2D2;
    }
    10% {
        background-color: #FCEEE6;
    }
    20% {
        background-color: #F0D6DC;
    }
    30% {
        background-color: #F2CA9B;
    }
    40% {
        background-color: #D7F0E0;
    }
    50% {
        background-color: #D7EEF0;
    }
    60% {
        background-color: #F5B8B5;
    }
    70% {
        background-color: #BCE3D7;
    }
    80% {
        background-color: #CCD7E6;
    }
    90% {
        background-color: #CCD7E6;
    }
    100% {
        background-color: #F3F2D2;
    }
}