383 lines
11 KiB
SCSS
383 lines
11 KiB
SCSS
.homepage {
|
|
.title-card {
|
|
.bg-agis-yellow {
|
|
width: 327px;
|
|
}
|
|
|
|
.f-sheldon {
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
.f-readex-pro {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.f-rufina {
|
|
font-size: 1.2rem;
|
|
}
|
|
}
|
|
|
|
.seasonal-sections {
|
|
.seasonal-sections-image {
|
|
height: min-content;
|
|
}
|
|
|
|
&-candlemas {
|
|
&::after {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 1rem;
|
|
display: none;
|
|
width: 100%;
|
|
height: 120px;
|
|
background: url("@/images/homepage/candlemas-4.png");
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
content: "";
|
|
pointer-events: none;
|
|
}
|
|
|
|
h2 {
|
|
&::before {
|
|
position: absolute;
|
|
top: -1rem;
|
|
right: -10rem;
|
|
display: none;
|
|
width: 100px;
|
|
height: 100px;
|
|
background: url("@/images/homepage/candlemas-2.png");
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
content: "";
|
|
pointer-events: none;
|
|
}
|
|
|
|
&::after {
|
|
position: absolute;
|
|
top: -4rem;
|
|
right: -4rem;
|
|
display: none;
|
|
width: 50px;
|
|
height: 50px;
|
|
background: url("@/images/homepage/candlemas-1.png");
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
content: "";
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
.seasonal-sections-image::after {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: -4rem;
|
|
display: none;
|
|
width: 60px;
|
|
height: 60px;
|
|
background: url("@/images/homepage/candlemas-3.png");
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
content: "";
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
&-endofyear {
|
|
.seasonal-sections-image {
|
|
&::before {
|
|
position: absolute;
|
|
z-index: -1;
|
|
top: 0;
|
|
left: -20rem;
|
|
display: none;
|
|
width: 500px;
|
|
height: 500px;
|
|
background: url("@/images/homepage/endofyear-1.png");
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
content: "";
|
|
pointer-events: none;
|
|
}
|
|
|
|
&::after {
|
|
position: absolute;
|
|
z-index: -1;
|
|
top: 6rem;
|
|
right: -20rem;
|
|
display: none;
|
|
width: 500px;
|
|
height: 500px;
|
|
background: url("@/images/homepage/endofyear-2.png");
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
content: "";
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-chinesenewyear {
|
|
h2 {
|
|
&::after {
|
|
position: absolute;
|
|
top: -4rem;
|
|
right: -4rem;
|
|
display: none;
|
|
width: 80px;
|
|
height: 80px;
|
|
background: url("@/images/homepage/chinesenewyear-1.png");
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
content: "";
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
p {
|
|
&::before {
|
|
position: absolute;
|
|
bottom: -8rem;
|
|
left: 2rem;
|
|
display: none;
|
|
width: 200px;
|
|
height: 200px;
|
|
background: url("@/images/homepage/chinesenewyear-2.png");
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
content: "";
|
|
pointer-events: none;
|
|
}
|
|
|
|
&::after {
|
|
position: absolute;
|
|
right: -1rem;
|
|
bottom: -4rem;
|
|
display: none;
|
|
width: 100px;
|
|
height: 100px;
|
|
background: url("@/images/homepage/chinesenewyear-3.png");
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
content: "";
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
.seasonal-sections-image {
|
|
&::after {
|
|
position: absolute;
|
|
right: -6rem;
|
|
bottom: 1rem;
|
|
display: none;
|
|
width: 80px;
|
|
height: 80px;
|
|
background: url("@/images/homepage/chinesenewyear-4.png");
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
content: "";
|
|
pointer-events: none;
|
|
transform: translateY(-50%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.description {
|
|
&-subtitle {
|
|
max-width: 20rem;
|
|
}
|
|
|
|
button {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.news .swiper-news,
|
|
.ranges .swiper-ranges {
|
|
.swiper-button {
|
|
&-prev,
|
|
&-next { width: 3rem; }
|
|
|
|
&-next { rotate: 180deg; }
|
|
|
|
&-disabled { opacity: .5; }
|
|
}
|
|
}
|
|
|
|
.news {
|
|
&-frame {
|
|
padding-top: 4rem;
|
|
padding-bottom: 2rem;
|
|
|
|
div {
|
|
border: 5px solid transparent;
|
|
border-image: url("@/images/homepage/frame-line.svg") 1 stretch;
|
|
}
|
|
}
|
|
|
|
.swiper-news {
|
|
border: 5px solid transparent;
|
|
|
|
.swiper-slide {
|
|
&-content {
|
|
width: 265px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.ranges {
|
|
.swiper-ranges {
|
|
position: relative;
|
|
|
|
.swiper-slide {
|
|
&-content {
|
|
width: 246px;
|
|
|
|
p {
|
|
hyphens: auto;
|
|
line-height: 1.2em;
|
|
word-break: break-word;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// MMMMMMMM MMMMMMMMDDDDDDDDDDDDD
|
|
// M:::::::M M:::::::MD::::::::::::DDD
|
|
// M::::::::M M::::::::MD:::::::::::::::DD
|
|
// M:::::::::M M:::::::::MDDD:::::DDDDD:::::D
|
|
// M::::::::::M M::::::::::M D:::::D D:::::D
|
|
// M:::::::::::M M:::::::::::M D:::::D D:::::D
|
|
// M:::::::M::::M M::::M:::::::M D:::::D D:::::D
|
|
// M::::::M M::::M M::::M M::::::M D:::::D D:::::D
|
|
// M::::::M M::::M::::M M::::::M D:::::D D:::::D
|
|
// M::::::M M:::::::M M::::::M D:::::D D:::::D
|
|
// M::::::M M:::::M M::::::M D:::::D D:::::D
|
|
// M::::::M MMMMM M::::::M D:::::D D:::::D
|
|
// M::::::M M::::::MDDD:::::DDDDD:::::D
|
|
// M::::::M M::::::MD:::::::::::::::DD
|
|
// M::::::M M::::::MD::::::::::::DDD
|
|
// MMMMMMMM MMMMMMMMDDDDDDDDDDDDD
|
|
@include media-breakpoint-up(md) {
|
|
.homepage {
|
|
.description {
|
|
button {
|
|
width: fit-content;
|
|
}
|
|
|
|
&-paragraph {
|
|
max-width: 25rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// XXXXXXX XXXXXXXLLLLLLLLLLL
|
|
// X:::::X X:::::XL:::::::::L
|
|
// X:::::X X:::::XL:::::::::L
|
|
// X::::::X X::::::XLL:::::::LL
|
|
// XXX:::::X X:::::XXX L:::::L
|
|
// X:::::X X:::::X L:::::L
|
|
// X:::::X:::::X L:::::L
|
|
// X:::::::::X L:::::L
|
|
// X:::::::::X L:::::L
|
|
// X:::::X:::::X L:::::L
|
|
// X:::::X X:::::X L:::::L
|
|
// XXX:::::X X:::::XXX L:::::L LLLLLL
|
|
// X::::::X X::::::XLL:::::::LLLLLLLLL:::::L
|
|
// X:::::X X:::::XL::::::::::::::::::::::L
|
|
// X:::::X X:::::XL::::::::::::::::::::::L
|
|
// XXXXXXX XXXXXXXLLLLLLLLLLLLLLLLLLLLLLLL
|
|
@include media-breakpoint-up(xl) {
|
|
.homepage {
|
|
.title-card {
|
|
img {
|
|
transform: translateX(-3px);
|
|
}
|
|
|
|
.bg-agis-yellow {
|
|
width: 550px;
|
|
}
|
|
|
|
.f-sheldon {
|
|
font-size: 5rem;
|
|
}
|
|
|
|
.f-readex-pro {
|
|
font-size: 2.9rem;
|
|
}
|
|
|
|
.f-rufina {
|
|
font-size: 2.4rem;
|
|
}
|
|
}
|
|
|
|
.seasonal-sections {
|
|
&-candlemas::after,
|
|
h2::after,
|
|
h2::before,
|
|
p::after,
|
|
p::before,
|
|
&-image::after,
|
|
&-image::before {
|
|
display: block !important;
|
|
}
|
|
}
|
|
|
|
.news {
|
|
&-frame {
|
|
padding-top: 5rem;
|
|
padding-bottom: 2rem;
|
|
|
|
div {
|
|
border: 5px solid transparent;
|
|
border-image: url("@/images/homepage/frame-line.svg") 3 stretch;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ranges {
|
|
.swiper-ranges {
|
|
position: static;
|
|
margin: 0 4rem;
|
|
|
|
.swiper-slide-content {
|
|
width: 100%;
|
|
|
|
&-details {
|
|
position: absolute !important;
|
|
left: 0;
|
|
width: calc(100% - 243px);
|
|
height: 337px;
|
|
}
|
|
|
|
&-translate {
|
|
width: calc(100% - 240px) !important;
|
|
transform: translateX(-3px) !important;
|
|
}
|
|
}
|
|
|
|
.navigation {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
width: 100%;
|
|
transform: translateY(-50%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|