174 lines
3.4 KiB
CSS
174 lines
3.4 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
|
|
@layer base {
|
|
@font-face {
|
|
font-family: "dana regular";
|
|
font-weight: 100;
|
|
src: url("../assets/font/woff2/DanaFaNum-Regular.woff2") format("woff2");
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "dana medium";
|
|
font-weight: 500;
|
|
src: url("../assets/font/woff2/DanaFaNum-Medium.woff2") format("woff2");
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "dana bold";
|
|
font-weight: 700;
|
|
src: url("../assets/font/woff2/DanaFaNum-Bold.woff2") format("woff2");
|
|
font-display: swap;
|
|
}
|
|
|
|
* {
|
|
@apply font-dana-m;
|
|
font-weight: 500;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
input[type="search"] {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
box-sizing: border-box;
|
|
padding: 0;
|
|
}
|
|
|
|
input[type="search"]::-webkit-search-cancel-button {
|
|
display: none;
|
|
}
|
|
|
|
input[type="search"]:focus {
|
|
outline: none;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
|
|
/* bg */
|
|
.bg_gradient {
|
|
background-image: linear-gradient(90deg, #f87f06 0%, #fba105 100%);
|
|
}
|
|
|
|
.bg_gradient_revers {
|
|
background-image: linear-gradient(270deg, #f87f06 0%, #fba105 100%);
|
|
}
|
|
|
|
|
|
/* scrollbar */
|
|
.scrollbar_custom::-webkit-scrollbar-track {
|
|
padding: 2px 0;
|
|
background-color: #f6f6f6;
|
|
}
|
|
|
|
.scrollbar_custom::-webkit-scrollbar {
|
|
width: 4px;
|
|
height: 2px;
|
|
}
|
|
|
|
.scrollbar_custom::-webkit-scrollbar-thumb {
|
|
border-radius: 10px;
|
|
background-color: orange;
|
|
}
|
|
|
|
.scrollbar_custom_none::-webkit-scrollbar {
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.scrollbar_custom_none::-webkit-scrollbar-thumb {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.scrollbar_custom_none::-webkit-scrollbar-track {
|
|
background-color: transparent;
|
|
}
|
|
|
|
|
|
/* mask image */
|
|
.cover {
|
|
-webkit-mask-image: url("../../public/image/slider/cover.svg");
|
|
mask-image: url("../../public/image/slider/cover.svg");
|
|
mask-size: 100%;
|
|
mask-repeat: no-repeat;
|
|
box-shadow: 0 0 0 0 #000;
|
|
}
|
|
|
|
|
|
/* aspect ratio */
|
|
.aspect1 {
|
|
aspect-ratio: 1/0.35;
|
|
}
|
|
|
|
.aspect2 {
|
|
aspect-ratio: 1 / 0.59;
|
|
}
|
|
|
|
.aspect3 {
|
|
aspect-ratio: 1 / 1.38;
|
|
}
|
|
|
|
|
|
/* slider */
|
|
.active_ball {
|
|
background: linear-gradient(270deg, #f87f06 0%, #fba105 100%);
|
|
width: 20px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
/* shadow custom */
|
|
.shadow_custom {
|
|
box-shadow: -12px 10px 18px -17px #00000075;
|
|
}
|
|
|
|
|
|
/* slide */
|
|
.slide:first-child {
|
|
filter: grayscale(100%);
|
|
position: absolute;
|
|
right: 100px;
|
|
scale: 0.9;
|
|
}
|
|
|
|
.slide:last-child {
|
|
filter: grayscale(100%);
|
|
position: absolute;
|
|
left: 100px;
|
|
scale: 0.9;
|
|
}
|
|
|
|
.moraba::after {
|
|
content: '';
|
|
display: block;
|
|
width: 8px;
|
|
height: 8px;
|
|
background: #f87f06;
|
|
border-radius: 3px;
|
|
position: absolute;
|
|
right: -12px;
|
|
top: 10px;
|
|
}
|
|
|
|
|
|
.style_comment:first-child,
|
|
.style_comment:last-child {
|
|
opacity: 0.4;
|
|
width: 420px;
|
|
}
|
|
|
|
.style_comment:first-child {
|
|
opacity: 0.2;
|
|
}
|
|
|
|
|
|
.new_project:first-child,
|
|
.new_project:last-child {
|
|
opacity: 0.4;
|
|
width: 310px;
|
|
}
|
|
} |