102 lines
2 KiB
SCSS
102 lines
2 KiB
SCSS
// * COMMON CSS.
|
|
@use './../common';
|
|
|
|
// FONTS
|
|
@font-face {
|
|
font-display: swap;
|
|
font-family: 'Baloo 2';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: url('&/fonts/Baloo2-Regular.ttf') format('truetype');
|
|
}
|
|
|
|
@font-face {
|
|
font-display: swap;
|
|
font-family: 'Baloo 2';
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
src: url('&/fonts/Baloo2-Medium.ttf') format('truetype');
|
|
}
|
|
|
|
@font-face {
|
|
font-display: swap;
|
|
font-family: 'Baloo 2';
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
src: url('&/fonts/Baloo2-SemiBold.ttf') format('truetype');
|
|
}
|
|
|
|
@font-face {
|
|
font-display: swap;
|
|
font-family: 'Baloo 2';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
src: url('&/fonts/Baloo2-Bold.ttf') format('truetype');
|
|
}
|
|
|
|
@font-face {
|
|
font-display: swap;
|
|
font-family: 'Baloo 2';
|
|
font-style: normal;
|
|
font-weight: 800;
|
|
src: url('&/fonts/Baloo2-ExtraBold.ttf') format('truetype');
|
|
}
|
|
|
|
// for scrolling
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
@theme {
|
|
--font-baloo: 'Baloo 2', ui-sans-serif, system-ui, sans-serif;
|
|
}
|
|
|
|
// cLIP PATH for components and assets
|
|
@utility hero-clip {
|
|
clip-path: polygon(0 0, 100% 0, 100% 93%, 0 100%);
|
|
}
|
|
|
|
@utility deco-bar {
|
|
background: #1d1e1c;
|
|
transform: matrix(1, -0.03, 0.04, 1, 0, 0);
|
|
}
|
|
|
|
@utility video-clip {
|
|
clip-path: polygon(-12px 1px, 100% 0, 100.1% 102.62%, -2px 99.48%);
|
|
}
|
|
|
|
@utility banner-clip {
|
|
clip-path: polygon(1px 15.38%, 100% 0, 100% 94%, 0 93.75%);
|
|
}
|
|
|
|
@utility offre-clip {
|
|
clip-path: polygon(0 19.24%, 100% 0, 100% 93%, 0 96%);
|
|
}
|
|
|
|
@utility nike-clip {
|
|
clip-path: polygon(95% 90%, 100% 27%, 100% 106%, 0% 100%);
|
|
}
|
|
|
|
@utility footer-clip {
|
|
clip-path: polygon(0 13.7%, 100% 0, 100% 100%, 0 100%);
|
|
}
|
|
|
|
@utility footer-clip-mobile {
|
|
clip-path: polygon(1px 2.37%, 100% 0, 100% 100%, 0 100%);
|
|
}
|
|
|
|
@utility card-clip {
|
|
clip-path: polygon(2.78% 63.75%, 2.61% 97.07%, 100% 97.47%, -0.3% 101.6%);
|
|
}
|
|
|
|
@utility card-clip-mobile {
|
|
clip-path: polygon(3.19% 84.61%, 3.46% 97.73%, 101.98% 96.64%, 0.5% 100.1%);
|
|
}
|
|
|
|
@utility nike-clip-desktop {
|
|
clip-path: polygon(95% 86%, 99.17% 10.36%, 109% 107%, -14% 97%);
|
|
}
|