gulp-web/src/scss/_featured.scss

453 lines
6.4 KiB
SCSS

body.rwavw-custom {
.widget[class^='rwavw-feature'],
.widget[class*=' rwavw-feature'] {
img.bg {
// TODO where is that iomage comiong from?
display: none !important;
}
h2, h3, h4, h5, h6 {
color: #000a38;
}
h4, h5, h6 {
font-weight: 600;
font-size: 22px;
line-height: 33px;
letter-spacing: 1px;
margin-top: 0;
margin-bottom: 22px;
}
p {
font-size:19px;
margin-bottom: 22px;
letter-spacing: normal;
color: #020121;
svg {
height: 44px;
width: auto;
opacity: 0.8;
}
}
.pure-g > div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 67.98em) {
.pure-g > div {
&:first-child {
padding-right: 44px;
}
&:last-child {
padding-left: 44px;
}
}
}
}
.widget.rwavw-feature-narrow {
.pure-g > div {
justify-content: flex-start;
}
.row-group {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
text-align: center;
}
p, .heading-section-title {
margin-bottom: 22px;
}
p {
font-weight: 600;
font-size: 20px;
line-height: 33px;
padding-right: 18px;
margin-top: 0;
opacity: 0.6;
a {
display: inline-block;
color: rgb(0, 10, 56);
font-size: 18px;
font-weight: 600;
background-color: rgba(0, 10, 56, 0.05);
margin-left: -22px;
padding: 0 22px;
border-radius: 22px;
line-height: 42px;
height: 44px;
box-shadow: $box-shadow-sk;;
svg {
position: relative;
height: 28px;
top: 8px;
margin-left: 4px;
}
}
&.text-right a {
margin-right: -22px;
}
}
.swiper-container {
border-radius: $border-radius;
box-shadow: 4px 4px 6px 0 rgba(0, 10, 56, 0.2);
}
.swiper-wrapper {
position: relative;
border-radius: $border-radius;
overflow: hidden;
&::after {
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
background-color: rgba(0, 10, 56, 0.3);
box-shadow: 0 0 66px 0 rgba(0, 10, 56, 0.6) inset;
opacity: 0.6;
}
}
@media (min-width: 767px) {
}
@media (max-width: 64em) {
p {
text-align: center !important;
a {
margin-left: 0;
margin-right: 0;
}
}
.swiper-wrapper {
display: none;
}
}
@media (min-width: 64em) {
p, .heading-section-title {
margin-bottom: 44px;
}
}
}
.widget.rwavw-feature-details {
.pure-g > div {
justify-content: flex-start;
}
h4, h5, h6 {
opacity: 0.8;
}
p {
font-size:16px;
font-weight: 600;
opacity: 0.6;
}
}
.widget.rwavw-feature-limits {
h2, h3, h4, h5, h6 {
margin-top: 44px;
@media (min-width: 64em) {
margin-top: 0;
text-align: left !important;
}
}
}
.widget.rwavw-feature-main {
margin-top: 0;
margin-left: auto;
margin-right: auto;
max-width: 1800px;
.gallery-item {
flex: 100% 0 0;
}
.pure-g {
align-items: center;
}
.pure-u-1 {
color: inherit;
}
h4,
p {
font-size: 16px;
margin-bottom: 22px;
}
h4 {
display: flex;
flex-direction: row;
align-items: center;
font-weight: 400;
font-size: 22px;
color: inherit;
svg {
font-size: 32px;
margin-right: 0.7ch;
&.small {
font-size: 24px;
}
}
}
p {
}
.hover-overlay {
> .overlay {
$color-overlay: #252c03;
background-color: transparent !important;
background-image: linear-gradient(
to bottom,
rgba($color-overlay, 0.05),
rgba($color-overlay, 0.0) 50%,
rgba($color-overlay, 1)
), linear-gradient(
to right,
rgba($color-overlay, 0.1),
rgba($color-overlay, 0) 20%,
rgba($color-overlay, 0) 80%,
rgba($color-overlay, 0.1)
);
opacity: 1;
&:hover {
opacity: 0;
}
> div {
height: 100%;
top: 0;
transform: none;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: flex-end;
padding: 22px;
h2, h3, h4, h5, h6 {
color: #fff !important;
margin: 0;
line-height: 1.2;
font-size: 26px;
font-weight: 400;
text-align: right;
}
}
}
&:hover img {
transform: none;
}
}
@media (max-width: 63.98em) {
text-align: center;
.hover-overlay {
margin-bottom: 22px;
}
h4 {
justify-content: center;
}
}
@media (min-width: 64em) {
margin-top: 44px;
.gallery-item {
flex: 40% 0 0;
}
.hover-overlay {
> .overlay {
&:hover {
}
> div {
h2, h3, h4, h5, h6 {
font-size: 32px;
}
}
}
}
h4,
p {
margin-left: 44px;
}
}
@media (min-width: 104em) {
.hover-overlay {
> .overlay {
&:hover {
}
> div {
h2, h3, h4, h5, h6 {
font-size: 44px;
}
}
}
}
}
}
.widget.rwavw-featured {
h2 {
color: red;
}
> .fg {
padding-top: 0;
}
.pure-g {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
> .pure-u-1 {
flex: 0 0 100%;
&:nth-child(2n) {
background-color: rgba(#000, 0.05);
}
h1, h2, h3, h4, h5, h6 {
margin-bottom: 1.5rem;
font-size: 2.5rem;
font-weight: 500;
}
p {
font-size: 2rem;
}
img {
max-width: 46em;
}
> .row {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
> div {
// flex: 0 0 50%;
width: auto;
}
}
@media (max-width: 63.98em) {
&:nth-child(2n) {
}
}
@media (min-width: 64em) {
&:nth-child(2n) {
}
}
}
}
}
.widget.rwavw-feature-shortlist {
.pure-g > .pure-u-1 {
position: relative;
.heading-col-title {
font-size: 18px;
font-weight: 600;
margin: 110px 0 22px;
opacity: 0.8;
}
p {
margin: 0;
svg {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 50%;
transform: translateX(-50%) !important;
height: 88px;
width: 88px;
opacity: 0.4;
}
}
}
}
.widget.rwavw-feature-extras {
p, .heading-section-title {
color: inherit;
}
p {
&.lead {
font-size: 22px;
margin-bottom: 44px;
}
}
}
}