yapayzeka/public/assets/scss/elements/_callto-action.scss
2024-09-10 01:01:42 +03:00

137 lines
3.0 KiB
SCSS

/*--------------------------------
Call To Action Style
--------------------------------*/
.clltoaction-style-default {
padding: 250px 0;
.title {
font-size: 52px;
font-weight: 600;
position: relative;
margin-bottom: 30px;
padding-bottom: 14px;
&::before {
position: absolute;
content: "";
background: #fff;
width: 100px;
height: 2px;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
}
.subtitle {
color: #fff;
font-size: 28px;
line-height: 40px;
margin: 0;
padding: 0 16%;
font-weight: 300;
letter-spacing: 2px;
}
.call-to-btn {
margin-top: 50px;
}
.content {
&.text-left {
.title {
&::before {
left: 0;
transform: none;
}
}
.subtitle {
padding: 0 16% 0 0;
}
}
}
&.style-2 {
padding: 150px 0;
}
&.style-3 {
padding: 150px 0;
.content-wrapper {
background-color: var(--color-lessdark);
border-radius: var(--radius);
padding: 50px 40px;
}
.content {
.title {
font-size: 32px;
margin-bottom: 18px;
padding-bottom: 10px;
}
.subtitle {
font-size: 16px;
line-height: 1.4;
letter-spacing: 0.5px;
}
}
.call-to-btn {
margin-top: 0;
}
}
&.style-4 {
padding: 0;
.content-wrapper {
background-color: var(--color-lessdark);
border-radius: var(--radius);
padding: 70px 50px;
}
.content {
.title {
font-size: 47px;
margin-bottom: 33px;
padding-bottom: 16px;
line-height: 1.4;
}
.subtitle {
font-size: 16px;
line-height: 1.4;
letter-spacing: 0.5px;
}
}
.call-to-btn {
margin-top: 0;
}
}
&.style-5 {
padding: 0;
.content-wrapper {
background-color: var(--color-lessdark);
border-radius: var(--radius);
padding: 70px 50px;
}
.content {
.title {
font-size: 47px;
margin-bottom: 20px;
padding-bottom: 0;
line-height: 1.4;
&::before {
display: none;
}
}
.subtitle {
font-size: 16px;
line-height: 1.4;
letter-spacing: 0.5px;
}
}
.call-to-btn {
margin-top: 30px;
}
}
}