323 lines
No EOL
7.7 KiB
SCSS
323 lines
No EOL
7.7 KiB
SCSS
|
|
:root {
|
|
--color-neutral-50: #f2f0f5;
|
|
--color-neutral-100: #d1c6e0;
|
|
--color-neutral-200: #b2a0cb;
|
|
--color-neutral-300: #957eb5;
|
|
--color-neutral-400: #7a60a0;
|
|
--color-neutral-500: #61468b;
|
|
--color-neutral-600: #4b3176;
|
|
--color-neutral-700: #371f60;
|
|
--color-neutral-800: #26114b;
|
|
--color-neutral-900: #180736;
|
|
--color-neutral-950: #0c011f;
|
|
--color-argon-50: #e1abc9;
|
|
--color-argon-100: #da87b5;
|
|
--color-argon-200: #d464a1;
|
|
--color-argon-300: #cd448f;
|
|
--color-argon-400: #c6257d;
|
|
--color-argon-500: #b0166f;
|
|
--color-argon-600: #9a0a61;
|
|
--color-argon-700: #830755;
|
|
--color-argon-800: #6d0449;
|
|
--color-argon-900: #56023c;
|
|
--color-argon-950: #3f012d;
|
|
--color-krypton-50: #b2d9ea;
|
|
--color-krypton-100: #8cc9e4;
|
|
--color-krypton-200: #69bade;
|
|
--color-krypton-300: #4badd8;
|
|
--color-krypton-400: #2493c2;
|
|
--color-krypton-500: #167fac;
|
|
--color-krypton-600: #0a6c96;
|
|
--color-krypton-700: #075c81;
|
|
--color-krypton-800: #044c6b;
|
|
--color-krypton-900: #023c55;
|
|
--color-krypton-950: #012c3f;
|
|
--color-green-50: #c0f49a;
|
|
--color-green-100: #a7e57a;
|
|
--color-green-200: #8fd75d;
|
|
--color-green-300: #7ac843;
|
|
--color-green-400: #66b92d;
|
|
--color-green-500: #54aa18;
|
|
--color-green-600: #47990f;
|
|
--color-green-700: #397e0a;
|
|
--color-green-800: #2b6206;
|
|
--color-green-900: #1f4703;
|
|
--color-green-950: #122b01;
|
|
--color-red-50: #e6afaf;
|
|
--color-red-100: #dd9090;
|
|
--color-red-200: #d57272;
|
|
--color-red-300: #cc5757;
|
|
--color-red-400: #c33d3d;
|
|
--color-red-500: #bb2626;
|
|
--color-red-600: #b21010;
|
|
--color-red-700: #950808;
|
|
--color-red-800: #780404;
|
|
--color-red-900: #5c0202;
|
|
--color-red-950: #3f0101;
|
|
--color-yellow-50: #fefce8;
|
|
--color-yellow-100: #fef9c2;
|
|
--color-yellow-200: #fff085;
|
|
--color-yellow-300: #ffdf20;
|
|
--color-yellow-400: #fdc700;
|
|
--color-yellow-500: #efb100;
|
|
--color-yellow-600: #d08700;
|
|
--color-yellow-700: #a65f00;
|
|
--color-yellow-800: #894b00;
|
|
--color-yellow-900: #733e0a;
|
|
--color-yellow-950: #432004;
|
|
|
|
--color-white: #ffffff;
|
|
|
|
--color-dark-foreground: var(--color-neutral-50);
|
|
--color-dark-background: var(--color-neutral-950);
|
|
--color-dark-shade-1: var(--color-neutral-900);
|
|
--color-dark-shade-2: var(--color-neutral-800);
|
|
--color-dark-shade-3: var(--color-neutral-700);
|
|
--color-dark-shade-4: var(--color-neutral-600);
|
|
--color-dark-text-1: var(--color-neutral-200);
|
|
--color-dark-text-2: var(--color-neutral-300);
|
|
--color-dark-text-3: var(--color-neutral-400);
|
|
--color-dark-text-4: var(--color-neutral-500);
|
|
--color-dark-primary: var(--color-argon-400);
|
|
--color-dark-secondary: var(--color-krypton-300);
|
|
--color-dark-error: var(--color-red-500);
|
|
--color-dark-success: var(--color-green-500);
|
|
--color-dark-warning: var(--color-yellow-500);
|
|
--color-dark-accent-1: #60a5f9;
|
|
--color-dark-accent-2: #d381f7;
|
|
--color-dark-accent-3: #ff7975;
|
|
|
|
--color-light-foreground: var(--color-neutral-950);
|
|
--color-light-background: var(--color-neutral-50);
|
|
--color-light-shade-1: var(--color-neutral-100);
|
|
--color-light-shade-2: var(--color-neutral-200);
|
|
--color-light-shade-3: var(--color-neutral-300);
|
|
--color-light-shade-4: var(--color-neutral-400);
|
|
--color-light-text-1: var(--color-neutral-800);
|
|
--color-light-text-2: var(--color-neutral-700);
|
|
--color-light-text-3: var(--color-neutral-600);
|
|
--color-light-text-4: var(--color-neutral-500);
|
|
--color-light-primary: var(--color-argon-600);
|
|
--color-light-secondary: var(--color-krypton-500);
|
|
--color-light-error: var(--color-red-600);
|
|
--color-light-success: var(--color-green-600);
|
|
--color-light-warning: var(--color-yellow-600);
|
|
--color-light-accent-1: #303ec0;
|
|
--color-light-accent-2: #6c366c;
|
|
--color-light-accent-3: #932f0a;
|
|
|
|
--color-cmyk-primary: var(--color-dark-primary);
|
|
--color-cmyk-secondary: var(--color-dark-secondary);
|
|
|
|
}
|
|
// fonts
|
|
|
|
@font-face {
|
|
font-family: 'Athiti';
|
|
font-weight: 700;
|
|
src: url('assets/font/athiti/Athiti-Bold.woff2') format('woff2');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Athiti';
|
|
font-weight: 600;
|
|
src: url('assets/font/athiti/Athiti-SemiBold.woff2') format('woff2');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Athiti';
|
|
font-weight: 500;
|
|
src: url('assets/font/athiti/Athiti-Medium.woff2') format('woff2');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Athiti';
|
|
font-weight: 400;
|
|
src: url('assets/font/athiti/Athiti-Regular.woff2') format('woff2');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Athiti';
|
|
font-weight: 300;
|
|
src: url('assets/font/athiti/Athiti-Light.woff2') format('woff2');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Athiti';
|
|
font-weight: 200;
|
|
src: url('assets/font/athiti/Athiti-ExtraLight.woff2') format('woff2');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Departure Mono';
|
|
src: url('assets/font/departuremono/DepartureMono-Regular.woff2') format('woff2');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Argon Glow';
|
|
font-weight: 100;
|
|
src: url('assets/font/argonglow/ArgonGlow-Thin.woff2') format('woff2');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Argon Glow';
|
|
font-weight: 200;
|
|
src: url('assets/font/argonglow/ArgonGlow-ExtraLight.woff2') format('woff2');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Argon Glow';
|
|
font-weight: 300;
|
|
src: url('assets/font/argonglow/ArgonGlow-Light.woff2') format('woff2');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Argon Glow';
|
|
font-weight: 400;
|
|
src: url('assets/font/argonglow/ArgonGlow-Regular.woff2') format('woff2');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Argon Glow';
|
|
font-weight: 500;
|
|
src: url('assets/font/argonglow/ArgonGlow-Medium.woff2') format('woff2');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Argon Glow';
|
|
font-weight: 600;
|
|
src: url('assets/font/argonglow/ArgonGlow-SemiBold.woff2') format('woff2');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Argon Glow';
|
|
font-weight: 700;
|
|
src: url('assets/font/argonglow/ArgonGlow-Bold.woff2') format('woff2');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Argon Glow';
|
|
src: url('assets/font/argonglow/ArgonGlow-VariableVF.woff2') format('woff2');
|
|
font-weight: 100 900;
|
|
}
|
|
|
|
|
|
:root.is-transparent {
|
|
background: transparent;
|
|
}
|
|
|
|
$scale: 1;
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #000000;
|
|
display: block;
|
|
}
|
|
|
|
#scene {
|
|
background: var(--color-dark-background);
|
|
color: white;
|
|
width: calc(1920px * $scale);
|
|
height: calc(1080px * $scale);
|
|
overflow: hidden;
|
|
contain: strict;
|
|
position: relative;
|
|
}
|
|
|
|
:root.is-transparent #scene {
|
|
background: transparent;
|
|
}
|
|
|
|
#title {
|
|
position: absolute;
|
|
left: calc(100px * $scale);
|
|
top: calc(600px * $scale);
|
|
width: calc(1720px * $scale);
|
|
overflow: visible;
|
|
|
|
text {
|
|
font-family: 'Argon Glow', ui-sans, sans-serif;
|
|
font-weight: 400;
|
|
font-size: 216px;
|
|
}
|
|
}
|
|
|
|
#breakText {
|
|
position: absolute;
|
|
left: calc(100px * $scale);
|
|
top: 0;
|
|
width: calc(1720px * $scale);
|
|
height: calc(1080px * $scale);
|
|
overflow: visible;
|
|
transform: scale(2.5);
|
|
|
|
text {
|
|
font-family: 'Argon Glow', ui-sans, sans-serif;
|
|
font-weight: 400;
|
|
font-size: 216px;
|
|
text-anchor: middle;
|
|
}
|
|
}
|
|
|
|
#speaker {
|
|
position: absolute;
|
|
right: 150px;
|
|
bottom: 150px;
|
|
overflow: visible;
|
|
|
|
text {
|
|
font-family: 'Argon Glow', ui-sans, sans-serif;
|
|
font-weight: 400;
|
|
font-size: 216px;
|
|
text-anchor: end;
|
|
fill: #ffffff;
|
|
}
|
|
}
|
|
|
|
#title,#speaker {
|
|
tspan {
|
|
fill: #ffffff;
|
|
}
|
|
}
|
|
|
|
#logo_eventname_glow_off {
|
|
position: absolute;
|
|
top: calc(100px * $scale);
|
|
left: calc(100px * $scale);
|
|
width: calc(1720px * $scale);
|
|
height: calc(400px * $scale);
|
|
overflow: visible;
|
|
}
|
|
|
|
#logo_eventname_glow {
|
|
position: absolute;
|
|
top: calc(100px * $scale);
|
|
left: calc(100px * $scale);
|
|
width: calc(1720px * $scale);
|
|
height: calc(400px * $scale);
|
|
overflow: visible;
|
|
}
|
|
|
|
#bg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: calc(1920px * $scale);
|
|
}
|
|
|
|
#outro {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: calc(1920px * $scale);
|
|
z-index: 10;
|
|
}
|
|
|
|
#svgPath {
|
|
//display: none;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
} |