@font-face {
font-family: "Cooper";
src: url("https://assets.codepen.io/383755/cooper-black-webfont.woff")
format("woff");
}
@font-face {
font-family: "Aharoni";
src: url("https://assets.codepen.io/383755/telefon.woff2") format("woff");
}
@font-face {
font-family: "Bogart";
src: url("https://assets.codepen.io/383755/bogart-semibold.woff2")
format("woff2");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Dot";
src: url("https://assets.codepen.io/383755/Dot-Matrix.ttf.woff") format("woff");
}
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@300;500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Coustard:wght@900&display=swap");
$noise: url("data:image/png;base64,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");
* {
box-sizing: border-box;
}
@mixin flex-center() {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
@function text-stroke($size: 2, $color: #fff, $correction: 0) {
$radius: $size - $correction;
$stroke: ();
@for $i from -$size through $size {
@for $k from -$size through $size {
$x: $k;
$y: $i;
@if $k > 0 {
$x: $k - 0.5;
}
@elseif $k < 0 {
$x: $k + 0.5;
}
@if $i > 0 {
$y: $i - 0.5;
}
@elseif $i < 0 {
$y: $i + 0.5;
}
@if ($x * $x + $y * $y <= $radius * $radius) {
$stroke: append($stroke, $i * 1px $k * 1px 0 $color, comma);
}
}
}
@return $stroke;
}
@mixin text-stroke($size: 2, $color: #fff, $correction: 0) {
text-shadow: text-stroke($size, $color, $correction);
}
body {
margin: 0px;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
font-family: "Oswald";
cursor: pointer;
--dark: #50303f;
--font1: "Cooper";
--font2: "Oswald";
--font4: "Cooper";
--font5: "Bogart";
--font6: "Oswald";
--font7: "Aharoni";
--font8: "Coustard";
--color1: #fe2fd9;
--color2: #fa6c4b;
--color3: #e5f31b;
--color4: #5030da;
--color5: #ff3641;
--color6: #e5f31b;
--color7: #fe2fd9;
background: repeating-radial-gradient(
circle at center,
transparent 0px,
#fff 0px,
#fff 2px,
transparent 2px,
transparent 10px
),
radial-gradient(circle at center, #fff 25vw, #e5f4d1);
&:before {
content: "click to remix";
position: absolute;
bottom: 5px;
width: 100%;
left: 0;
text-align: center;
color: var(--dark);
}
&.active {
#wrap {
.ticket {
@for $i from 1 through 6 {
&:nth-of-type(#{$i}) {
z-index: #{6 - $i};
.inner {
&:before {
transition-delay: #{0.15 + ($i/10)}s;
opacity: 1;
}
> div {
transition-delay: #{$i/10}s;
&:before,
&:after {
transition-delay: #{0.15 + ($i/10)}s;
box-shadow: inset -100px 0px 100px -200px rgba(0, 0, 0, 0.15),
inset 0 0 3rem -3rem var(--dark), inset 0 0 0 0.5rem var(--color1);
}
&:after {
box-shadow: inset 100px 0px 100px 100px rgba(0, 0, 0, 0.15),
inset 0 0 2rem 0.075rem var(--dark),
inset 0 0 0 0.5rem lighten(#e5f4d1, 5%);
}
}
}
}
}
.inner {
> div {
transform: translateY(0);
}
}
}
}
}
&.loaded {
#wrap {
opacity: 1;
}
}
#wrap {
width: clamp(662.5px, 80vw, 1325px);
min-width: 662.5px;
height: clamp(500px, 60vw, 1000px);
min-height: 500px;
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(6, 1fr);
grid-gap: 0rem;
transition: 0.5s ease-in-out;
transition-delay: 1s;
opacity: 0;
.ticket {
position: relative;
@for $i from 1 through 6 {
&:nth-of-type(#{$i}) {
z-index: #{8 - $i};
.inner {
&:before {
transition: 0.5s cubic-bezier(0.5, 0.15, 0.35, 1);
transition-delay: #{(6 - $i) / 10}s;
opacity: 0;
}
> div {
transition-delay: #{(6 - $i) / 10}s;
&:before,
&:after {
transition-delay: #{0.15 + (6 - $i)/10}s;
}
}
}
}
}
.inner {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
padding: 1rem;
clip-path: polygon(-10% -10%, 110% -10%, 110% 110%, -10% 110%);
transform-style: preserve-3d;
perspective: 900px;
&:before {
content: "";
position: absolute;
width: 90%;
height: 90%;
top: 10%;
left: 5%;
background: rgba(0, 0, 0, 0.25);
filter: blur(15px);
}
&.class1 {
.details {
grid-row: 1 / span 1;
}
}
&.class2 {
.seat {
grid-row: 3 / span 1;
}
}
&.class2,
&.class3 {
.band {
background: radial-gradient(
circle at center,
#e5f4d1 35%,
transparent 35%,
var(--color1) 75%
),
radial-gradient(
circle at center,
#e5f4d1 2px,
var(--color1) 1px,
var(--color1) 5px
)
50% 50% / 8px 8px repeat;
}
}
&.class3 {
.band {
text-transform: uppercase;
}
}
&.class5,
&.class6 {
> div {
grid-template-columns: calc(33% - 0.125rem) calc(33% - 0.125rem) calc(
33% - 0.125rem
);
> div {
grid-column: span 3;
&.band {
strong {
span.word {
display: inline-block;
margin: 0 0.15vw;
}
}
}
&.band,
&.location {
grid-column: 1 / span 2;
grid-row: span 6;
position: relative;
strong {
width: 200%;
left: -50%;
height: 50%;
top: 25%;
position: absolute;
padding: 0 1rem;
transform: rotate(90deg);
word-break: break-word;
}
}
&.location {
grid-column: 3 / span 1;
strong {
width: 400%;
height: 12.5%;
top: 45%;
left: -150%;
@include flex-center();
@include text-stroke(1, #e5f4d1);
&:before {
content: "";
position: absolute;
width: 90%;
left: 5%;
top: -5%;
height: 110%;
background: var(--color1);
-webkit-mask: $noise;
opacity: 0.75;
}
span {
display: block;
width: 100%;
font-size: clamp(10px, 1vw, 1vw);
&:first-of-type {
font-size: clamp(12px, 1.35vw, 1.35vw);
@include text-stroke(1, #e5f4d1);
}
}
}
}
}
}
}
&.class7 {
.band {
background: radial-gradient(
circle at center,
#e5f4d1 35%,
transparent 35%,
var(--color1) 75%
),
repeating-linear-gradient(
var(--rotate),
#e5f4d1 2px,
var(--color1) 2px,
var(--color1) 10px,
#e5f4d1 10px,
#e5f4d1 12px
);
}
}
&.class9 {
.band {
strong {
span.word {
transform: skew(5deg);
}
}
}
}
&.class10,
&.class11 {
.band {
background: radial-gradient(
circle at center,
#e5f4d1 35%,
transparent 35%,
var(--color1) 75%
),
repeating-linear-gradient(
var(--rotate),
#e5f4d1 2px,
var(--color1) 2px,
var(--color1) 10px,
#e5f4d1 10px,
#e5f4d1 12px
);
}
}
> div {
display: grid;
grid-template-columns: calc(100% - 0.25rem);
grid-template-rows: repeat(10, 1fr);
justify-content: center;
height: 100%;
background: var(--dark);
grid-gap: 0.125rem;
padding: 0.125rem 0;
position: relative;
transition: 0.5s cubic-bezier(0.5, 0.15, 0.35, 1);
transform-style: preserve-3d;
transform: rotateY(180deg);
&:before,
&:after {
transform-style: preserve-3d;
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 2;
box-shadow: inset -200px 0px 100px 100px rgba(0, 0, 0, 0.25),
inset 0 0 3rem -2rem var(--dark), inset 0 0 0 0.5rem var(--color1);
transition: box-shadow 0.5s cubic-bezier(0.5, 0.15, 0.35, 1);
}
&:before {
background: #e5f4d1;
-webkit-mask: $noise;
opacity: 0.5;
width: calc(100% + 0.5vw);
height: calc(100% + 0.5vw);
left: -0.25vw;
top: -0.25vw;
backface-visibility: hidden;
}
&:after {
transform: rotateY(-180deg) translateZ(0.05px);
background: lighten(#e5f4d1, 5%);
box-shadow: inset 100px 0px 100px -200px rgba(0, 0, 0, 0.15),
inset 0 0 6rem -6rem var(--dark), inset 0 0 0 0.5rem lighten(#e5f4d1, 5%);
}
> div {
box-sizing: border-box;
background: var(--color1);
box-shadow: inherit;
line-height: 1;
grid-row: span 1;
text-align: center;
@include flex-center();
}
}
.date {
text-transform: uppercase;
grid-row: span 2;
@include flex-center();
padding: 0.75vw 0;
background: #e5f4d1;
span {
display: block;
font-size: clamp(10px, 1vw, 1vw);
width: 100%;
}
> span:nth-of-type(2) {
font-size: clamp(16px, 2vw, 2vw);
font-family: var(--font2);
}
}
.band {
grid-row: span 5;
position: relative;
font-family: var(--font1);
overflow: hidden;
background: radial-gradient(
circle at center,
#e5f4d1 37.5%,
transparent 35%,
var(--color1) 90%
),
repeating-radial-gradient(
circle at center,
transparent 0px,
#e5f4d1 0px,
#e5f4d1 2px,
var(--color1) 2px,
var(--color1) 10px
);
strong {
@include flex-center();
position: absolute;
width: 102.5%;
height: 75%;
left: -1.25%;
top: 12.5%;
padding: 0 0.5rem;
transform: rotate(90deg);
font-size: clamp(20px, 2.35vw, 2.35vw);
word-break: break-word;
line-height: 0.95;
--words: var(--word-total);
letter-spacing: 0.15rem;
transform: scale(calc(1 + (var(--word-total) / 20)));
> span.word {
display: inline-block;
}
> span > span.word {
display: block;
@include text-stroke(1, #e5f4d1);
font-size: clamp(
18px,
calc(7vw - (((var(--char-total) * 1) * (var(--words) / 1.5)) * 0.35vw)),
2.75vw
);
}
}
}
.details {
display: flex;
align-items: stretch;
strong {
width: 100%;
display: flex;
span {
width: 50%;
box-shadow: inset 0.05vw 0 0 var(--dark), inset -0.05vw 0 0 var(--dark);
@include flex-center();
}
}
}
.location {
strong span {
font-size: 1vw;
display: block;
font-weight: 200;
line-height: 1.25;
&:first-of-type {
font-size: clamp(8px, 1.25vw, 1.25vw);
font-weight: 900;
}
}
}
.seat {
display: flex;
justify-content: space-between;
background: #e5f4d1;
strong {
font-size: clamp(8px, 1.25vw, 1.25vw);
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
width: 33.33%;
padding: 0.5rem;
&:nth-of-type(2) {
box-shadow: 0.075rem 0 0 var(--dark), -0.075rem 0 0 var(--dark),
inset 0.075rem 0 0 var(--dark), inset -0.075rem 0 0 var(--dark);
}
> span {
display: block;
margin: 0.25rem 0 0;
width: 100%;
font-size: clamp(16px, 2vw, 2vw);
text-transform: uppercase;
font-family: "Dot", cursive;
font-weight: 100;
color: var(--color2);
}
}
}
}
&:nth-of-type(1) {
grid-area: 3 / 1 / 7 / 3;
.inner {
transform-origin: 0% 0%;
transform: rotate(-90deg);
}
}
&:nth-of-type(2) {
grid-area: 3 / 1 / 7 / 3;
}
&:nth-of-type(3) {
grid-area: 3 / 3 / 7 / 5;
}
&:nth-of-type(4) {
grid-area: 1 / 5 / 5 / 7;
}
&:nth-of-type(5) {
grid-area: 1 / 7 / 5 / 9;
}
&:nth-of-type(6) {
grid-area: 1 / 5 / 5 / 7;
.inner {
transform-origin: 0% 100%;
transform: rotate(90deg);
}
}
}
}
}
!
