.ova-heading{
text-align: left;
.sub-title-wrapper{
display: inline-flex;
padding: 0 0 3px 0;
&.underline {
background-image: url('assets/img/underline-sub-title.svg');
background-size: contain;
background-position: bottom left;
background-repeat: no-repeat;
}
.prefix{
color: var(--primary);
font-size: 20px;
margin: 0 4px 0 0;
}
.sub-title{
font-size: 16px;
font-weight: 600;
margin: 0;
}
}
.title{
@include transaction( all, 0.3s, linear );
font-size: 90px;
font-weight: 600;
line-height: 1.2;
margin: 14px 0 0 0;
white-space: pre-line;
position: relative;
z-index: 1;
@media(max-width: 1400px){
font-size: 70px;
}
@media(max-width: 1024px){
font-size: 60px;
}
@media(max-width: 767px){
font-size: 45px;
}
&:hover{
@include transaction( all, 0.3s, linear );
}
&.text-stroke-white{
.word{
text-shadow: -1px -1px 0 var(--heading), 1px -1px 0 var(--heading), -1px 1px 0 var(--heading), 1px 1px 0 var(--heading);
}
}
&.text-stroke-black{
.word{
text-shadow: -1px -1px 0 var(--primary-background), 1px -1px 0 var(--primary-background), -1px 1px 0 var(--primary-background), 1px 1px 0 var(--primary-background);
}
}
.word{
background-image: url('assets/img/underline-title.svg');
background-position: bottom left 20px;
background-repeat: no-repeat;
color: var(--primary);
@media(max-width: 1024px){
background-position: bottom left;
background-size: contain;
}
}
&.no-shape-underline{
.word{
background-image: none;
}
}
a{
@include transaction( all, 0.3s, linear );
color: var(--heading);
&:hover{
@include transaction( all, 0.3s, linear );
color: var(--text);
}
}
img{
width: 169px;
min-width: 169px;
height: 69px;
object-fit:cover;
border: 3px solid var(--primary);
border-radius: 34.5px;
margin: 0 0 -7px 20px;
@media(max-width: 767px){
width: 110px;
min-width: 110px;
height: 45px;
}
}
}
.description{
font-weight: 500;
color: var(--heading);
margin: 16px 0 0 0;
white-space: pre-line;
}
.author{
text-align: right;
margin: 0;
.divider{
width: 26px;
height: 2px;
background-color: var(--primary);
display: inline-block;
vertical-align: middle;
}
.author-prefix{
color: var(--primary);
font-size: 16px;
margin: 0 5px 0 15px;
}
.text{
font-weight: 600;
font-size: 16px;
color: var(--heading);
}
}
&.template2{
.sub-title-wrapper{
padding: 0;
.sub-title{
text-transform: uppercase;
}
&.underline {
background-image:none;
border-bottom: 1px solid var(--primary);
}
}
.title{
text-transform: uppercase;
font-size: 55px;
margin: 12px 0 0 0;
@media(max-width: 1024px){
font-size: 40px;
}
.word{
background-image: none;
}
img{
display: none;
}
}
}
&.template3{
text-align: center;
.sub-title-wrapper{
padding: 0;
.sub-title{
text-transform: uppercase;
line-height: 1.8;
}
&.underline {
background-image:none;
border-bottom: 1px solid var(--primary);
}
}
.title{
text-transform: uppercase;
font-size: 80px;
font-weight: 500;
margin: 13px 0 0 0;
@media(max-width: 1400px){
font-size: 60px;
}
@media(max-width: 1024px){
font-size: 50px;
}
@media(max-width: 767px){
font-size: 40px;
}
.word{
background-image: none;
}
}
.button-booking{
@include transaction( all, 0.3s, linear );
display: inline-flex;
justify-content:center;
align-items:center;
flex-direction:column;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 170px;
height: 170px;
border-radius: 50%;
background-color: var(--primary);
color: var(--heading);
border: 1px solid transparent;
z-index: 2;
@media(max-width: 1024px){
width: 150px;
height: 150px;
}
&:hover{
@include transaction( all, 0.3s, linear );
background-color: var(--heading);
color: var(--primary);
border-color: var(--primary);
}
.text-booking{
font-weight: 600;
font-size: 16px;
line-height: 1.2;
text-transform: uppercase;
margin: 15px 0 5px 0;
}
i{
display: inline-flex;
font-size: 20px;
}
}
}
&.template4{
.sub-title-wrapper{
.sub-title{
color: #171313;
}
&.underline {
background-size: 100%;
}
}
.title{
text-transform: uppercase;
font-size: 65px;
color: #191E3C;
@media(max-width: 1024px){
font-size: 50px;
}
@media(max-width: 767px){
font-size: 40px;
}
a{
color: #191E3C;
&:hover{
color: var(--text);
}
}
.word{
background-image: none;
position: relative;
color: inherit;
&:after{
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
background-image: url('assets/img/background-circle-heading.png');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
}
img{
display: none;
}
}
.description{
color: #171313;
}
}
&.template5{
.title{
font-size: 42px;
}
.background-text{
font-size: 40px;
font-weight: 700;
line-height: 1.5;
color: #ffffff0d;
position: absolute;
top: 36px;
left: 50%;
transform: translateX(-50%);
&.background-text-stroke-white{
text-shadow: -1px -1px 0 var(--heading), 1px -1px 0 var(--heading), -1px 1px 0 var(--heading), 1px 1px 0 var(--heading);
color: var(--background);
opacity: 0.09;
}
&.background-text-stroke-black{
text-shadow: -1px -1px 0 var(--primary-background), 1px -1px 0 var(--primary-background), -1px 1px 0 var(--primary-background), 1px 1px 0 var(--primary-background);
color: var(--heading);
opacity: 0.09;
}
&.alignment-left{
right: unset;
left: 0;
transform: translateX(0);
}
&.alignment-right{
left: unset;
right: 0;
transform: translateX(0);
}
}
}
}