/*
* Lifestyle Theme CSS
*/
/* Table of content
-------------------------------------
1. Global
2. Site header
2.1 Common code
2.2 Search overlay
2.3 Topbar
2.4 Main nav
3. Home page post tiles
4. Home page main topics
4.1 MT 1 (single image 100%)
4.2 MT 3 (single image 66%)
4.3 MT 3 (two 50% images)
5. Home page feeds
5.1 Feed 1 (Home page tiles in a row)
5.2 Feed 2 (Home page vertical feed)
5.3 Feed 3 (Home page masonry)
5.4 Feed 4 (Right column editor's pick widget)
6. Feed pagination links
7. Right column & widgets
7.1 Widgetized area
7.2 Widgets - Article
7.3 Widgets - Right column
7.4 Lifestyle Theme widgets
7.4.1 Site author
7.4.2 Editor's pick
8. Article
8.1 Article header
8.2 Left column
8.3 Article content
8.3.1 Common elements
8.3.2 Common styles for post images
8.4 Article tags
8.4 Article author box
8.5 Article comments
9. Site footer
*/
/* = 1. Global
------------------------------------- */
html {
-webkit-text-size-adjust: 100%; /* sizes on horizontal mobile */
}
body {
font-family: "Hanken Grotesk", sans-serif;
color: #222;
/*font-size: 17px;*/
background-color: #fff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.lifestyle-post-content.core-wp-content a:not(:has(img)):not(.wp-element-button):not(.wp-block-button a):not(.wp-block-file a.wp-block-file__button):not(.wp-block-cover-text a):not(.lifestyle-tags > a):not(.post-nav-links > a):not(.post-author-box a),
.widgetized-area .widget a:not(:has(img)):not(.wp-element-button):not(.wp-block-button a):not(.lifestyle-block a) {
color: #222;
text-decoration-line: underline;
text-decoration-thickness: 1px;
text-decoration-color: #ddd;
text-underline-offset: 6px;
}
.wp-block-cover-text a
.lifestyle-post-content.core-wp-content a:not(:has(img)):not(.wp-element-button):not(.wp-block-button a):not(.wp-block-file a.wp-block-file__button):not(.wp-block-cover-text a):not(.lifestyle-tags > a):not(.post-nav-links > a):not(.post-author-box a):hover,
.widgetized-area .widget a:not(:has(img)):not(.wp-element-button):not(.wp-block-button a):not(.lifestyle-block a):hover {
text-decoration-color: #222;
}
.lifestyle-masonry,
.lifestyle-wrapper {
margin: 0 auto 80px auto;
padding: 0 calc( 4% - 15px );
max-width: 1320px;
}
/* for 600px or less */
@media screen and (max-width: 600px) {
.lifestyle-masonry,
.lifestyle-wrapper {
margin-bottom: 60px;
}
}
.lifestyle-masonry > .lifestyle-flex-container,
.lifestyle-wrapper > .lifestyle-flex-container {
display: flex;
flex-direction: row;
}
/* for 768px or less */
@media screen and (max-width: 768px) {
.lifestyle-masonry > .lifestyle-flex-container,
.lifestyle-wrapper > .lifestyle-flex-container {
flex-direction: column;
}
}
.lifestyle-single-flex-container {
display: flex;
flex-direction: row;
}
/* for 1024px or less */
@media screen and (max-width: 1024px) {
.lifestyle-single-flex-container {
flex-direction: column;
}
}
img { display: block; /* removes empty space below image */ }
i { font-style: italic; }
.cb { clear: both; }
header.lifestyle-section { /* header above the feed */
margin-bottom: 24px;
}
.lifestyle-feed__portal-section .wp-block-heading,
header.lifestyle-section h1, /* header above the feed on archive */
header.lifestyle-section h2 { /* header above the feed on homepage */
padding: 0 15px;
font-family: "Hanken Grotesk", sans-serif;
font-weight: 700;
font-size: 44px;
line-height: 56px;
text-transform: uppercase;
}
.lifestyle-feed__portal-section .wp-block-heading {
margin-bottom: 24px;
}
.lifestyle-feed__portal-section .wp-block-heading a {
color: #222;
}
.lifestyle-feed__portal-section .wp-block-group .wp-block-heading + ul {
margin-right: 15px;
padding-bottom: 20px;
}
.lifestyle-feed__portal-section .wp-block-group .wp-block-heading + ul li {
display: inline;
padding-left: 24px;
}
.lifestyle-feed__portal-section .wp-block-group .wp-block-heading + ul li a { /* read more */
font-size: 22px;
text-transform: none;
color: #999;
}
.lifestyle-feed__portal-section .wp-block-group .wp-block-heading + ul li a:hover,
.lifestyle-feed__portal-section .wp-block-heading a:hover {
text-decoration-line: underline;
text-decoration-thickness: 2px;
text-decoration-color: #ddd;
text-underline-offset: 6px;
}
.lifestyle-feed__portal-section .wp-block-group .wp-block-buttons {
margin-top: 32px;
}
/* for 1024px or less */
@media screen and (max-width: 1024px) {
.lifestyle-feed__portal-section .wp-block-heading,
header.lifestyle-section h1,
header.lifestyle-section h2 {
font-size: 36px;
line-height: 44px;
}
}
/* for 600px or less */
@media screen and (max-width: 600px) {
.lifestyle-feed__portal-section .wp-block-heading,
header.lifestyle-section h1,
header.lifestyle-section h2 {
font-size: 28px;
line-height: 36px;
}
}
/* Global social media icons */
.lifestyle-social-icons li {
transition: all 0.2s ease-out;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
}
.lifestyle-social-icons li:hover {
transform: scale(1.5,1.5);
-webkit-transform: scale(1.5,1.5);
-moz-transform: scale(1.5,1.5);
-o-transform: scale(1.5,1.5);
-ms-transform: scale(1.5,1.5);
}
.lifestyle-right-column .lifestyle-social-icons li a {
color: unset;
}
.lifestyle-social-icons li svg {
width: 16px;
}
.lifestyle-social-icons li.facebook svg {
fill: #4b6ea9;
}
.lifestyle-social-icons li.instagram svg {
fill: #ec5575;
}
.lifestyle-social-icons li.x svg {
fill: #222;
}
.lifestyle-social-icons li.linkedin svg {
fill: #0088c0;
}
.lifestyle-social-icons li.pinterest svg {
fill: #d73533;
}
.lifestyle-social-icons li.youtube svg {
fill: #d44638;
}
/* Sticky */
.sticky { /* sticky posts appear in main topics */ }
/* Forms */
input,
textarea,
select,
button {
font-family: "Hanken Grotesk", sans-serif;
}
select {
background: none;
}
input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea,
select,
button[type="submit"],
input[type="submit"] {
font-size: 15px;
border-width: 2px !important;
border-style: solid !important;
-webkit-border-radius: 24px;
-moz-border-radius: 24px;
border-radius: 24px;
-webkit-appearance: none;
}
textarea {
line-height: 26px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="password"],
select,
textarea,
button[type="submit"],
input[type="submit"] {
padding: 12px 24px;
}
input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea,
select {
color: #222;
border-color: #ccc;
background-color: #fff;
}
button[type="submit"],
input[type="submit"] {
color: #fff !important;
font-weight: 600;
line-height: 20px;
cursor: pointer;
border-color: #222 !important;
background-color: #222 !important;
transition: all 0.2s ease-out;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
}
select {
cursor: pointer;
}
button[type="submit"]:hover,
input[type="submit"]:hover {
border-color: #444 !important;
background-color: #444 !important;
opacity: 1;
}
input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
textarea:focus {
outline: none;
}
/* = 2. Site header
------------------------------------- */
/* lifestyle-site-header-min.css */
/* lifestyle-site-header-big.css */
/* = 2.1. Common code
------------------------------------- */
.site-header {
position: relative;
padding: 28px 15px 0 15px;
margin-top: 20px;
}
.site-title {
font-family: "Ms Madi", sans-serif;
}
.site-title h1,
.site-title a img {
transition: all 0.2s ease-out;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
}
.site-title a {
color: #222;
}
.site-title h1:hover,
.site-title a img:hover {
transform: scale(1.05);
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
}
/* Topbar search */
.topbar-search {
position: absolute;
top: 30px;
right: 15px;
z-index: 12;
}
body.rtl .topbar-search { /* rtl */
right: unset;
left: 15px;
}
.topbar-search svg {
width: 20px;
fill: #222;
}
/* Topbar cart */
.topbar-cart {
position: absolute;
top: 28px;
right: 65px;
}
.topbar-cart a {
display: block;
}
.topbar-cart svg {
width: 20px;
fill: #222;
}
body.rtl .topbar-cart { /* rtl */
right: unset;
left: 65px;
}
/* Scale */
.topbar-search a svg,
.topbar-cart a svg {
transition: all 0.2s ease-out;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
}
.topbar-search a svg:hover,
.topbar-cart a svg:hover {
transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
}
/* for 600px or less */
@media screen and (max-width: 600px) {
.site-header {
padding-top: 10px;
}
.topbar-search {
right: 25px;
}
.topbar-search a svg:hover,
.topbar-cart a svg:hover {
transform: none;
-webkit-transform: none;
-moz-transform: none;
-o-transform: none;
-ms-transform: none;
}
}
/* Main nav subnav */
.site-header nav ul {
display: block;
text-align: center;
}
.site-header nav ul > li {
position: relative;
display: inline-block;
margin: 0 20px;
}
.site-header nav ul > li > a {
font-size: 18px;
color: #222;
line-height: 26px;
text-transform: uppercase;
}
/* for 600px or more */
@media screen and (min-width: 600px) {
.site-header nav ul > li > a:hover {
text-decoration-line: underline;
text-decoration-thickness: 2px;
text-decoration-color: #ddd;
text-underline-offset: 6px;
}
} /* @media 600 or more */
.site-header nav ul > li:hover > ul {
display: block;
min-width: 200px;
position: absolute;
padding: 16px 0;
text-align: left;
background-color: #fff;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
z-index: 1;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
.site-header nav ul > li:hover > ul li { display: block; }
.site-header nav ul > li > ul { /* first subnav ul */
top: 23px;
left: 0;
}
.site-header nav ul > li > ul > li > ul { /* the rest subnav ul */
top: 20px;
left: 20px;
}
.page_item_has_children > a::after,
.menu-item-has-children > a::after {
content: " ⇣";
}
.site-header nav ul > li > ul {
display: none;
list-style-type: none;
padding: 0;
margin: 0 0 0 -10px;
}
.site-header nav ul > li > ul > li {
position: relative;
margin: 5px 26px;
}
.site-header nav ul > li > ul > li > a {
font-size: 15px;
line-height: 22px;
}
/* for 600px or less */
@media screen and (max-width: 600px) {
/* Nav */
.site-header {
margin-top: 0;
}
.site-header nav { /* container for menu on mobile */
overflow: hidden;
}
.site-header nav > ul { /* menu hidden on mobile */
margin-top: -500%;
transition: margin-top 500ms;
-webkit-transition: margin-top 500ms;
-moz-transition: margin-top 500ms;
-o-transition: margin-top 500ms;
}
.site-header nav > ul.visible { /* menu visible on mobile */
margin-top: 20px;
}
.site-header nav ul {
text-align: left;
}
body.rtl .site-header nav ul { /* rtl */
text-align: right;
}
.site-header nav ul li {
display: block;
padding: 9px 0 7px 0;
margin: 0 30px;
border-bottom: 1px solid #ddd;
}
.site-header nav ul li ul li {
text-decoration: none;
}
/* Sub nav */
.site-header nav ul > li > ul {
display: block;
margin: 0;
}
.site-header nav ul > li:hover > ul {
min-width: auto;
position: relative;
top: unset;
left: unset;
padding: 0;
box-shadow: none;
z-index: 0;
}
.site-header nav ul > li > ul > li {
width: auto;
margin: 0 0 0 16px;
padding: 8px 0 8px 0;
}
.site-header nav ul > li > ul > li:last-child {
border: none;
}
}
/* = 2.2. Search overlay
------------------------------------- */
.lifestyle-search-bar {
position: absolute;
top: 0;
right: 0;
left: 0;
background-color: #fff;
-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
-moz-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
-webkit-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
z-index: 10;
}
.admin-bar .lifestyle-search-bar {
top: 32px;
}
.lifestyle-search-bar.bottom {
top: -380px;
}
.lifestyle-search-form {
width: 80%;
margin: 0 auto 0 auto;
padding: 35px 10% 35px 10%;
text-align: center;
}
.lifestyle-search-bar .lifestyle-search-form input[type="text"] {
padding: 0 24px;
font-size: 28px;
vertical-align: top;
border-color: #fff;
line-height: 44px;
}
/* for 600px or less */
@media screen and (max-width: 600px) {
/* Search */
.lifestyle-search-form {
text-align: left;
width: 75%;
padding: 30px 20% 30px 5%;
}
.lifestyle-search-bar .lifestyle-search-form input[type="text"] {
margin-bottom: 24px;
font-size: 24px;
}
.lifestyle-search-bar .lifestyle-search-form input[type="submit"] {
margin-left: 24px;
}
}
/* = 2.3. Topbar
------------------------------------- */
/* lifestyle-site-header-min.css */
/* lifestyle-site-header-big.css */
/* = 2.4. Main nav
------------------------------------- */
/* lifestyle-site-header-min.css */
/* lifestyle-site-header-big.css */
/* = 3. Home page post tiles
------------------------------------- */
/* Post thumbnail */
.post figure { /* post image container */
position: relative;
}
figure img {
width: 100%;
height: auto;
-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
/* Comment cloud */
.cloudc { /* comment cloud container */
position: absolute;
width: 35px;
height: 45px;
transition: all 0.2s ease-out;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
}
.cloudc:hover { /* bigger after hovering */
transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
}
/* Main topics comment cloud containers positions */
.lifestyle-mt1 .post figure .cloudc { /* div.post */
left: 60px;
top: 60px;
}
.lifestyle-mt2 .post figure .cloudc { /* div.post */
left: 60px;
top: 60px;
}
.lifestyle-mt3 ul li.post figure .cloudc { /* li.post */
left: 30px;
top: 30px;
}
.lifestyle-mt3 ul li.post:nth-child(2) figure .cloudc { /* li.post, mt3 second item */
top: unset; /* disables "first child" positioning */
bottom: 30px; /* moves "cloud" to the bottom */
}
/* Feeds comment cloud container positions */
.lifestyle-feed1 ul li.post figure .cloudc {
left: 30px;
top: 30px;
}
.lifestyle-feed2 ul li.post figure .cloudc {
left: 30px;
top: 30px;
}
.lifestyle-feed3 ul li.post figure .cloudc {
left: 30px;
top: 30px;
}
.lifestyle-feed4 ul li.post figure .cloudc {
left: 30px;
top: 30px;
}
body.rtl .lifestyle-feed1 ul li.post figure .cloudc,
body.rtl .lifestyle-feed2 ul li.post figure .cloudc,
body.rtl .lifestyle-feed3 ul li.post figure .cloudc,
body.rtl .lifestyle-feed4 ul li.post figure .cloudc { /* rtl */
left: unset;
right: 30px;
}
/* Cloud draw */
.cloud {
position: relative;
width: 35px;
height: 35px;
background: #fff;
text-align: center;
line-height: 35px;
-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.cloud::after {
position: absolute;
top: 35px;
left: 23px;
content: "";
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 0px solid transparent;
border-bottom: 10px solid #222;
transform: rotate(180deg);
}
/* Cloud number */
.cloud a.comments_number {
display: block;
width: 35px;
height: 35px;
font-size: 15px;
color: #222;
text-decoration: none !important;
}
/* Post category above the thumbnail */
.post span, /* tiles */
.post header span { /* main topics */
/*overflow: hidden;*/
text-overflow: ellipsis; /* ... */
/* white-space: nowrap; * /* one line */
}
.post span a,
.post header span a {
font-size: 15px;
color: #999;
text-transform: uppercase;
}
.post span a:hover,
.post header span a:hover {
text-decoration-line: underline;
text-decoration-thickness: 1px;
text-decoration-color: #ddd;
text-underline-offset: 6px;
}
.post > span a:after,
.post > header > span > a:after {
content: ",";
}
.post > span > a:last-child::after,
.post > header > span > a:last-child::after {
content: "";
}
/* Post header */
.post header {
position: relative;
}
.post header h1,
.post header h2 {
font-family: "Rethink Sans", sans-serif;
font-weight: 700;
word-break: break-word;
}
.post header h1,
.post header h2,
.post header h1 a,
.post header h2 a {
color: #222;
}
/* latest posts header on hp */
.lifestyle-feed__portal-section .wp-block-latest-posts__list li .wp-block-latest-posts__post-title:hover,
.post header h2 a:hover {
text-decoration-line: underline;
text-decoration-thickness: 3px;
text-decoration-color: #ddd;
text-underline-offset: 6px;
}
/* HP Feed latest posts header */
/* latest posts header on hp */
.lifestyle-feed__portal-section .wp-block-latest-posts__list li .wp-block-latest-posts__post-title /* */ {
display: block;
font-family: "Rethink Sans", sans-serif;
font-weight: 700;
color: #222;
}
.lifestyle-feed__portal-section .wp-block-latest-posts__list li .wp-block-latest-posts__post-title {
font-size: 28px;
line-height: 36px;
}
.lifestyle-feed__portal-section .wp-block-latest-posts__list.columns-4 li .wp-block-latest-posts__post-title,
.lifestyle-feed__portal-section .wp-block-latest-posts__list.columns-5 li .wp-block-latest-posts__post-title,
.lifestyle-feed__portal-section .wp-block-latest-posts__list.columns-6 li .wp-block-latest-posts__post-title {
font-size: 22px;
line-height: 32px;
}
/* for 600px or less */
@media screen and (max-width: 600px) {
.lifestyle-feed__portal-section .wp-block-latest-posts__list.columns-4 li .wp-block-latest-posts__post-title,
.lifestyle-feed__portal-section .wp-block-latest-posts__list.columns-5 li .wp-block-latest-posts__post-title,
.lifestyle-feed__portal-section .wp-block-latest-posts__list.columns-6 li .wp-block-latest-posts__post-title {
font-size: 28px;
line-height: 36px;
}
}
.lifestyle-feed__portal-section .wp-block-latest-posts__list li:has(.wp-block-latest-posts__featured-image) .wp-block-latest-posts__post-title { /* */
font-size: 22px;
line-height: 32px;
}
{ /* */
}
/* = 4. Home page main topics
------------------------------------- */
/* 4.1. MT 1 (single image 100%) */
.lifestyle-mt1 .post { /* div.post */
position: relative;
padding: 0 15px;
box-sizing: border-box;
}
.lifestyle-mt1 .post span {
display: block;
margin-bottom: 8px;
}
.lifestyle-mt1 .post figure {
margin-bottom: 32px;
}
.lifestyle-mt1 .post header {
position: relative;
width: 65%;
}
.lifestyle-mt1 .post header h2 a {
font-size: 44px;
line-height: 56px;
}
/* for 1024px or less */
@media screen and (max-width: 1024px) {
/* MT 1 */
.lifestyle-mt1 .post header {
width: unset;
}
.lifestyle-mt1 .post.no-thumb header {
width: unset;
}
} /* @media 1024 */
/* for 768px or less */
@media screen and (max-width: 768px) {
/* MT 1 */
.lifestyle-mt1 .post header h2 a {
font-size: 36px;
line-height: 44px;
}
} /* @media 768 */
/* for 600px or less */
@media screen and (max-width: 600px) {
/* MT 1 */
.lifestyle-mt1 .post header h2 a {
font-size: 28px;
line-height: 36px;
}
.lifestyle-mt1 .post figure .cloudc {
top: 30px;
left: 30px;
}
} /* @media 600 */
/* 4.2. MT 2 (single image 66%) */
.lifestyle-mt2 .post { /* div.post */
position: relative;
padding: 0 15px;
box-sizing: border-box;
}
.lifestyle-mt2 .post::after {
display: table;
content: " ";
clear: both;
}
.lifestyle-mt2 .post span {
display: block;
padding-top: 40px;
margin-bottom: 8px;
}
.lifestyle-mt2 .post figure {
width: 65.8119%; /* 770px */
float: left;
margin-right: 4.2735%;
}
.lifestyle-mt2 .post header {
width: 29.9145%; /* 350px */
float: left;
}
.lifestyle-mt2 .post header h2 a { /* title size */
font-size: 44px;
line-height: 56px;
}
/* for 920px or less */
@media screen and (max-width: 920px) {
.lifestyle-mt2 .post p {
width: unset;
}
}
/* No thumb */
.lifestyle-mt2 .post.no-thumb span {
padding-top: 0;
}
.lifestyle-mt2 .post.no-thumb header {
width: 65%;
float: none;
}
/* for 1024px or less */
@media screen and (max-width: 1024px) {
/* MT 2 */
.lifestyle-mt2 .post header h2 a {
font-size: 36px;
line-height: 44px;
}
/* No thumb */
.lifestyle-mt2 .post.no-thumb header {
width: unset;
}
} /* @media 1024 */
/* for 600px or less */
@media screen and (max-width: 600px) {
/* MT 2 */
.lifestyle-mt2 .post header {
float: none;
width: unset;
}
.lifestyle-mt2 .post figure { /* mobile feed mode */
float: none;
width: 100%;
margin-right: 0;
}
.lifestyle-mt2 .post span {
padding-top: 32px;
}
.lifestyle-mt2 .post header h2 a {
font-size: 28px;
line-height: 36px;
}
.lifestyle-mt2 .post figure .cloudc {
top: 30px;
left: 30px;
}
} /* @media 600 */
/* 4.3. MT 3 (two 50% images) */
.lifestyle-mt3 ul {
font-size: 0; /* set li whitespace to 0 */
}
.lifestyle-mt3 ul li.post { /* 570px */
position: relative;
display: inline-flex;
width: 50%; /* border box */
vertical-align: top;
padding: 0 15px;
box-sizing: border-box;
}
.lifestyle-mt3 ul li.post:first-child {
flex-flow: wrap;
}
.lifestyle-mt3 ul li.post:nth-child(2) {
flex-flow: column-reverse;
}
.lifestyle-mt3 ul li.post:first-child figure {
width: 100%;
margin-bottom: 32px;
}
.lifestyle-mt3 ul li.post:nth-child(2) figure {
width: 100%;
margin-top: 24px;
}
.lifestyle-mt3 ul li.post span {
display: block;
margin-bottom: 8px;
}
.lifestyle-mt3 ul li.post header h2 a { /* title size */
font-size: 44px;
line-height: 56px;
}
/* No thumb */
/* for 1024px or less */
@media screen and (max-width: 1024px) {
/* MT 3 */
.lifestyle-mt3 ul li.post header h2 a {
font-size: 36px;
line-height: 44px;
}
} /* @media 1024 */
/* for 768px or less */
@media screen and (max-width: 768px) {
/* MT 3 */
.lifestyle-mt3 ul li.post {
/* width: 48.0519%;*/
}
.lifestyle-mt3 ul li.post:first-child {
/* margin-right: 3.8961%; */ /* wider margin */
}
.lifestyle-mt3 ul li.post:nth-child(2) figure .cloudc {
top: 30px; /* moves the cloud to the top (same as on the first child) */
bottom: unset; /* disables cloud bottom positioning */
}
} /* @media 768 */
/* for 600px or less */
@media screen and (max-width: 600px) {
/* MT 3 */
.lifestyle-mt3 ul li.post { /* mobile feed */
/* float: none; */
width: 100%;
}
.lifestyle-mt3 ul li.post:first-child {
/* margin-right: 0; */ /* removes first item margin right */
margin-bottom: 40px; /* first item margin */
}
.lifestyle-mt3 ul li.post:nth-child(2) {
flex-flow: wrap;
}
.lifestyle-mt3 ul li.post:nth-child(2) figure {
margin-top: 0;
margin-bottom: 32px;
}
.lifestyle-mt3 ul li.post header h2 a { /* title size */
font-size: 28px;
line-height: 36px;
}
} /* @media 600 */
/* = 5. Home page feeds
------------------------------------- */
/* 5.1. Feed 1 (Home page tiles in a row) */
.lifestyle-feed1 ul {
/* del font-size: 0; */ /* set li whitespace to 0 */
width: 100%;
display: inline-flex;
flex-wrap: wrap;
}
.lifestyle-feed1 ul li.post {
position: relative;
width: 25%;
padding: 15px;
box-sizing: border-box;
}
.lifestyle-upper-flex.sidebar .lifestyle-feed1 ul li.post {
width: 33.333%;
}
.lifestyle-feed1 ul li.post span {
display: block;
margin-bottom: 16px;
}
.lifestyle-feed1 ul li.post figure {
margin-bottom: 12px;
}
.lifestyle-feed1 ul li.post header {
position: relative;
}
.lifestyle-feed1 ul li.post header h2 a {
font-size: 22px;
line-height: 32px;
}
/* No thumb */
.lifestyle-feed1 ul li.post.no-thumb span {
margin-bottom: 16px;
}
/* latest posts header on hp */
.lifestyle-feed__portal-section .wp-block-latest-posts__list li:not(:has(.wp-block-latest-posts__featured-image)) .wp-block-latest-posts__post-title, /* */
.lifestyle-feed1 ul li.post.no-thumb header {
padding: 30px;
background: #fff;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.lifestyle-feed1 ul li.post.no-thumb header h2 a {
font-size: 28px;
line-height: 36px;
}
/* for 1024px or less */
@media screen and (max-width: 1024px) {
/* FEED 1 */
.lifestyle-feed1 ul li.post { /* 3 columns breakpoint */
width: 33.333%;
}
.lifestyle-upper-flex.sidebar .lifestyle-feed1 ul li.post {
width: 50%;
}
} /* @media 1024 */
/* for 768px or less */
@media screen and (max-width: 768px) {
.lifestyle-feed1,
.lifestyle-feed2,
.lifestyle-feed3 {
flex-basis: unset;
}
/* FEED 1 */
.lifestyle-upper-flex.sidebar .lifestyle-feed1 {
margin-bottom: 60px;
}
.lifestyle-feed1 ul li.post { /* 2 columns breakpoint */
width: 50%;
}
} /* @media 768 */
/* for 600px or less */
@media screen and (max-width: 600px) { /* 1 columns breakpoint */
/* FEED 1 */
.lifestyle-feed1 ul li.post {
width: 100%;
}
.lifestyle-upper-flex.sidebar .lifestyle-feed1 ul li.post {
width: 100%;
}
.lifestyle-feed1 ul li.post.no-thumb header h2 {
padding: 0;
}
} /* @media 600 */
/* 5.2. Feed 2 (Home page vertical feed) */
.lifestyle-feed2 ul li.post {
display: block;
margin-bottom: 8px;
box-sizing: border-box;
padding: 15px;
}
.lifestyle-feed2 ul li.post:last-child {
margin-bottom: 0;
}
.lifestyle-feed2 ul li.post::after {
clear: both;
content: " ";
display: table;
}
.lifestyle-feed2 ul li.post figure {
width: 42.5287%; /* 370px z 870px */
float: left;
padding-right: 3.4482%; /* 30px z 870px */
}
.lifestyle-feed2 ul li.post span {
display: block;
margin-bottom: 16px;
}
.lifestyle-feed2 ul li.post header {
width: 54.0229%; /* 470px z 870px */
float: left;
}
.lifestyle-feed2 ul li.post header h2 a {
font-size: 28px;
line-height: 36px;
}
.lifestyle-feed2 ul li.post p {
width: 54.0229%; /* 470px z 870px */
/* width: 48.0519%; */ /* 370px */
float: left;
margin-top: 16px;
font-size: 15px;
color: #666;
line-height: 26px;
}
/* No thumb */
.lifestyle-feed2 ul li.post.no-thumb span {
margin-bottom: 16px;
}
.lifestyle-feed2 ul li.post.no-thumb header {
width: unset;
padding: 30px 40px;
background: #fff;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.lifestyle-feed2 ul li.post.no-thumb header h2 a {
font-size: 36px;
line-height: 44px;
}
.lifestyle-feed2 ul li.post.no-thumb p {
width: unset;
}
/* for 1024px or less */
@media screen and (max-width: 1024px) {
.lifestyle-feed2 ul li.post figure {
width: 35.0649%; /* 270px z 770px */
float: left;
padding-right: 3.8961%; /* 30px z 770px */
}
.lifestyle-feed2 ul li.post p {
width: 100%;
}
} /* @media 1024 */
/* for 768px or less */
@media screen and (max-width: 768px) {
/* FEED 2 */
.lifestyle-upper-flex.sidebar .lifestyle-feed2 {
margin-bottom: 60px;
}
} /* @media 768 */
/* for 600px or less */
@media screen and (max-width: 600px) {
/* FEED 2 */
.lifestyle-feed2 ul li.post header { /* mobile feed mode */
float: none;
width: unset;
}
.lifestyle-feed2 ul li.post figure { /* mobile feed mode */
float: none;
width: 100%;
padding-right: 0;
margin-bottom: 32px;
}
.lifestyle-feed2 ul li.post header h2 {
padding: 0; /* removes title padding */
}
.lifestyle-feed2 ul li.post p { /* mobile feed mode */
float: none;
width: unset;
}
} /* @media 600 */
/* 5.3. Feed 3 (Home page masonry) */
/* Masonry */
.lifestyle-feed3 ul li.post.post__1-4 { /* 1/4 */
position: relative;
width: 25%; /* border box */
padding: 15px;
box-sizing: border-box;
}
.lifestyle-upper-flex.sidebar .lifestyle-feed3 ul li.post {
width: 33.333%;
}
.lifestyle-feed3 ul li.post.post__1-4.grid-sizer { /* 1/4 */
padding: 0;
}
.lifestyle-feed3 ul li.post.post__1-4:last-child {
margin-bottom: 0;
}
.lifestyle-feed3 ul li.post span {
display: block;
margin-bottom: 16px;
}
.lifestyle-feed3 ul li.post figure {
margin-bottom: 12px;
}
.lifestyle-feed3 ul li.post header {
position: relative;
}
.lifestyle-feed3 ul li.post header h2 a {
font-size: 22px;
line-height: 32px;
}
/* No thumb */
.lifestyle-feed3 ul li.post.no-thumb header {
padding: 30px;
background: #fff;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.lifestyle-feed3 ul li.post.no-thumb header h2 a {
font-size: 28px;
line-height: 36px;
}
/* for 1024px or less */
@media screen and (max-width: 1024px) {
/* FEED 3 */
.lifestyle-feed3 ul li.post.post__1-4 { /* 1/4 */
width: 33.333%; /* border box */
}
.lifestyle-upper-flex.sidebar .lifestyle-feed3 ul li.post {
width: 50%;
}
} /* @media 1024 */
/* for 768px or less */
@media screen and (max-width: 768px) {
.lifestyle-upper-flex.sidebar .lifestyle-feed3 {
margin-bottom: 60px;
}
.lifestyle-feed3 ul li.post.post__1-4 { /* 1/4 */
width: 50%; /* border box */
}
} /* @media 768 */
/* for 600px or less */
@media screen and (max-width: 600px) {
.lifestyle-feed3 ul li.post.post__1-4 {
width: 100%;
}
.lifestyle-upper-flex.sidebar .lifestyle-feed3 ul li.post {
width: 100%;
}
} /* @media 600 */
/* = 6. Feed pagination links
------------------------------------- */
.lifestyle-pagination,
.lifestyle-single-content .lifestyle-post-content > .post-nav-links {
margin-top: 80px;
margin-bottom: 0;
}
/* for 768px or less */
@media screen and (max-width: 768px) {
.lifestyle-pagination,
.lifestyle-single-content .lifestyle-post-content > .post-nav-links {
margin-top: 60px;
}
} /* @media 768 */
.comment-pagination {
margin-top: 40px;
}
.lifestyle-single-content .lifestyle-post-content > .post-nav-links { /* post pages links */
clear: both;
}
.lifestyle-pagination ul, /* home page pagination */
.lifestyle-single-content .lifestyle-post-content > .post-nav-links, /* post pages pagination */
.comment-pagination { /* pagination below the comments */
display: block;
text-align: center;
}
.lifestyle-pagination ul li,
.lifestyle-single-content .lifestyle-post-content > .post-nav-links a,
.lifestyle-single-content .lifestyle-post-content > .post-nav-links .post-page-numbers.current,
.comment-pagination a,
.comment-pagination > .page-numbers.current {
display: inline-block;
}
.lifestyle-pagination ul li a,
.lifestyle-pagination ul li > .page-numbers.current,
.lifestyle-single-content .lifestyle-post-content > .post-nav-links a,
.lifestyle-single-content .lifestyle-post-content > .post-nav-links .post-page-numbers.current, /* post pages links */
.comment-pagination a,
.comment-pagination .page-numbers.current {
display: inline-block;
margin: 0 5px 10px 5px;
padding: 0 10px;
min-width: 24px;
font-size: 15px;
color: #222;
font-weight: bold;
text-align: center;
line-height: 44px;
border: 2px #222 solid;
-webkit-border-radius: 24px;
-moz-border-radius: 24px;
border-radius: 24px;
transition: all 0.2s ease-out;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
}
.lifestyle-pagination ul li .page-numbers.current, /* current page hidden border */
.lifestyle-single-content .lifestyle-post-content > .post-nav-links .post-page-numbers.current, /* post pages links */
.comment-pagination .page-numbers.current {
border-color: #ccc;
}
.lifestyle-pagination ul li a:hover,
.lifestyle-single-content .lifestyle-post-content > .post-nav-links a:hover, /* post pages links */
.comment-pagination a:hover {
transform: scale(1.05);
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
}
/* = 7. Right column & widgets
------------------------------------- */
.lifestyle-right-column {
box-sizing: border-box;
}
.lifestyle-right-column.w__300 {
padding: 0 15px;
flex-basis: 330px;
}
.lifestyle-right-column.sticky__column {
position: sticky;
top: 10px;
align-self: flex-start;
}
/* for 768px or less */
@media screen and (max-width: 768px) {
.lifestyle-right-column.w__300 {
flex-basis: 100%;
}
.lifestyle-right-column.sticky__column {
position: relative;
top: unset;
align-self: unset;
}
} /* @media 768 */
/* 7.1 Widgetized area */
.widgetized-area {
display: flex;
flex-wrap: wrap;
row-gap: 40px;
}
.lifestyle-block > header h3,
.widget > header h3 {
margin-bottom: 32px;
font-family: "Hanken Grotesk", sans-serif;
font-weight: 700;
font-size: 28px;
line-height: 32px;
color: #222;
font-weight: 700;
text-transform: uppercase;
}
/* Widget background with the shadow */
.lifestyle-right-column .widgetized-area > * {
width: 100%;
padding: 11.1111%;
-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
box-sizing: border-box;
}
/* for 768px or less */
@media screen and (max-width: 768px) {
.lifestyle-right-column .widgetized-area > * {
padding: 40px 7.7922% 50px 7.7922%;
}
} /* @media 768 */
/* 7.2 Widgets - Article ***********************/
.lifestyle-post-content > * {
max-width: 100%; /* big images max 100% */
margin-bottom: 24px;
font-size: 17px;
line-height: 28px;
}
/* rounded images */
.is-style-rounded img {
-webkit-border-radius: 50% !important;
-moz-border-radius: 50% !important;
border-radius: 50% !important;
}
/* WIDGETS: TEXT ****************************************/
/* WG paragraph */
/* WG heading */
/* wg headers margin & weight */
.lifestyle-post-content > h1,
.lifestyle-post-content > h2,
.lifestyle-post-content > h3,
.lifestyle-post-content > h4,
.lifestyle-post-content > h5,
.lifestyle-post-content > h6 {
margin-top: 40px;
font-weight: 700;
}
.lifestyle-post-content > h1:first-child,
.lifestyle-post-content > h2:first-child,
.lifestyle-post-content > h3:first-child,
.lifestyle-post-content > h4:first-child,
.lifestyle-post-content > h5:first-child,
.lifestyle-post-content > h6:first-child {
margin-top: 0;
}
/* wg headers sizes */
.lifestyle-post-content > h1 {
font-size: 36px;
line-height: 44px;
}
.lifestyle-post-content > h2 {
font-size: 28px;
line-height: 36px;
}
.lifestyle-post-content > h3 {
font-size: 22px;
line-height: 32px;
}
.lifestyle-post-content > h4,
.lifestyle-post-content > h5,
.lifestyle-post-content > h6 {
font-size: 18px;
}
/* wg headers in comments */
ul.user-comment li h1,
ul.user-comment li h2,
ul.user-comment li h3,
ul.user-comment li h4,
ul.user-comment li h5,
ul.user-comment li h6 {
margin-top: 20px;
margin-bottom: 10px;
font-weight: 700;
text-transform: uppercase;
font-size: 18px;
}
/* WG lists */
/* LIST 2 - padding left of every list in the list */
.lifestyle-post-content ol ol,
.lifestyle-post-content ol ul,
.lifestyle-post-content ul ul,
.lifestyle-post-content ul ol {
/*padding-left: 34px;*/
}
/* LIST 3 - margin above the child ols/uls */
.lifestyle-post-content li > ol,
.lifestyle-post-content li > ul {
margin-top: 12px;
}
/* LIST 4 - bottom of every li except the last one */
.lifestyle-post-content ol li,
.lifestyle-post-content ul li {
margin-bottom: 12px;
padding-left: 34px;
position: relative;
}
body.rtl .lifestyle-post-content ol li,
body.rtl .lifestyle-post-content ul li { /* rtl */
padding-left: 0;
}
.lifestyle-post-content li {
margin-bottom: 12px;
}
/* LIST 5 - last li of every ol */
.lifestyle-post-content li:last-child {
margin-bottom: 0;
}
/* check icon list */
.lifestyle-post-content ul > li:before {
content: url('/wp-content/themes/lifestyle/inc/svg/circle-check-solid.svg');
margin-left: -34px;
position: absolute;
top: 3px;
width: 20px;
}
body.rtl .lifestyle-post-content ul > li:before { /* rtl */
margin-right: -34px;
margin-left: unset;
}
/* 123 list */
.lifestyle-post-content ol {
counter-reset: counter;
}
.lifestyle-post-content ol > li:before {
position: absolute;
top: 3px;
display: inline-flex;
justify-content: center;
align-items: center;
min-height: 22px;
min-width: 22px;
max-width: 22px;
max-height: 22px;
margin-left: -34px;
font-size: 13px;
color: #222;
font-weight: 600;
letter-spacing: 0;
text-align: center;
background-color: #f1f1f1;
-webkit-border-radius: 11px;
-moz-border-radius: 11px;
border-radius: 11px;
content: counter(counter);
counter-increment: counter;
}
body.rtl .lifestyle-post-content ol > li:before { /* rtl */
margin-right: -34px;
margin-left: 0;
}
/* list in comments */
ul.user-comment li ol li ol,
ul.user-comment li ol li ul,
ul.user-comment li ul li ul,
ul.user-comment li ul li ol {
padding-left: 20px;
}
/* rtl */
body.rtl .widget_block ul,
body.rtl .widget_block ol,
body.rtl .menu-testing-menu-container ul,
body.rtl .lifestyle-post-content > ol,
body.rtl .lifestyle-post-content > ul:not(.wp-block-page-list, .wp-block-navigation, .wp-block-social-links, .blocks-gallery-grid),
body.rtl ul.user-comment ul:not(.children) {
padding-left: 0;
padding-right: 34px;
}
/* WG blockquote */
/* wg blockquote common styles / small cite */
.wp-block-quote,
ul.user-comment .wp-block-quote {
position: relative;
padding-left: 50px !important;
}
.wp-block-quote p {
font-style: italic;
}
.wp-block-quote cite {
display: block;
font-size: 16px;
}
.wp-block-quote cite:before {
content: "— ";
}
.wp-block-quote p::before,
ul.user-comment .wp-block-quote p::before {
position: absolute;
left: 0;
top: 0;
color: #ccc;
font-size: 100px;
line-height: 92px;
content: "\"";
}
/* WG code */
/* WG details */
.wp-block-details summary {
font-weight: 600;
}
.wp-block-details summary::after { /* both article & widget */
content: " (...)";
}
/* WG preformatted */
.wp-block-preformatted {
padding-bottom: 2px; /* overflow hack for disappearing border bottom on links */
}
/* WG pullquote */
.wp-block-pullquote {
padding: 0;
}
.wp-block-pullquote blockquote p {
font-size: 28px;
line-height: 36px;
}
.wp-block-pullquote cite {
font-size: 18px;
}
.wp-block-pullquote cite:before {
content: "— ";
}
/* WG table */
.wp-block-table {
padding-bottom: 2px; /* overflow hack for disappearing border bottom on links */
}
.wp-block-table td {
padding: .5em 1em;
border-color: #ddd;
}
.wp-block-table .wp-element-caption { /* */
margin-top: 8px;
}
/* list in comments */
ul.user-comment li table th {
font-weight: 600;
}
ul.user-comment li table td {
padding: .5em 1em;
border: 1px solid;
border-color: #ddd;
}
/* WG verse */
.wp-block-verse {
padding-bottom: 2px; /* overflow hack for disappearing border bottom on links */
}
/* WIDGETS: MEDIA ****************************************/
/* WG image */
/* WG gallery */
/* gallery */
.gallery {
margin-bottom: 24px !important;
}
.gallery .gallery-item {
text-align: left !important;
}
.gallery .gallery-item img {
max-width: 100%;
height: auto;
border: none !important;
}
/* WG audio */
.wp-block-audio audio {
min-width: unset; /* prevent overflow in the right column */
}
/* WG cover */
:where(.wp-block-cover-image.is-light:not(.has-text-color)),
:where(.wp-block-cover.is-light:not(.has-text-color)) {
color: #fff; /* dev */
}
/* WG file */
.wp-block-file:not(.wp-element-button) {
font-size: 17px;
}
.wp-block-file__button {
padding: 10px 24px;
}
/* WG media i text */
/* WG video */
.lifestyle-post-content iframe,
.wp-block-embed iframe {
max-width: 100%;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
/* WIDGETS: DESIGN ****************************************/
/* WG buttons */
.wp-block-button a {
height: 48px;
padding: 0 24px !important;
font-size: 15px;
font-weight: 600;
line-height: 44px;
border: 2px solid #222;
transition: all 0.2s ease-out;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
background-color: #222;
}
.wp-block-button a:hover {
border-color: #444;
background-color: #444;
transform: scale(1.05);
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
}
.wp-block-button.is-style-fill a {
background-color: #222;
}
.wp-block-button.is-style-outline a {
color: #222;
background-color: #fff;
}
/* WG columns */
/* WG group */
/* WG row & WG stack */
/* WG read more */
/* WG separator */
/* WG spacer */
/* WG page break */
/* WIDGETS: WIDGETS ****************************************/
/* WG archives */
/* WG calendar */
.wp-calendar-table thead tr th {
text-align: center;
background: #eee;
}
.wp-block-calendar caption {
margin-bottom: 8px;
font-weight: 600;
}
/* WG categories */
/* select */
.wp-block-archives-dropdown,
.wp-block-categories-dropdown { /* dropdown */
position: relative;
}
.wp-block-archives-dropdown select,
.wp-block-categories-dropdown select {
width: 100%;
}
.wp-block-archives-dropdown:after,
.wp-block-categories-dropdown::after {
position: absolute;
bottom: 5px;
right: 16px;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #222;
font-size: 15px;
content: "\f0d7";
pointer-events: none;
}
/* WG custom html */
/* WG latest comments */
/* in article */
.wp-block-latest-comments .avatar,
.wp-block-latest-comments__comment-avatar {
margin-top: 5px;
}
.wp-block-latest-comments__comment {
margin-bottom: 24px !important;
font-size: 15px;
line-height: 26px;
}
.wp-block-latest-comments__comment-author {
font-weight: 600;
}
.wp-block-latest-comments__comment-date {
font-size: 13px;
color: #999;
line-height: 20px;
}
.wp-block-latest-comments__comment-excerpt {
margin: 0;
}
.wp-block-latest-comments__comment-excerpt p {
margin: 10px 0 0 0;
font-size: 15px;
}
/* WG latest posts */
/* Homepage section blocks */
.lifestyle-feed__portal-section.homepage-feed__active { /* only when main feed is active */
margin-top: 80px;
}
/* for 600px or less */
@media screen and (max-width: 600px) {
.lifestyle-feed__portal-section.homepage-feed__active {
margin-top: 60px;
}
}
.lifestyle-feed__portal-section .widget.widget_block { /* portal section margin bottom */
margin-bottom: 80px;
}
.lifestyle-feed__portal-section .widget.widget_block:last-child {
margin-bottom: 0;
}
/* for 768px or less */
@media screen and (max-width: 768px) {
.lifestyle-feed__portal-section .widget.widget_block:last-child { /* portal sectoins and sidebar distance */
margin-bottom: 80px;
}
}
/* for 600px or less */
@media screen and (max-width: 600px) {
.lifestyle-feed__portal-section .widget.widget_block:last-child {
margin-bottom: 60px;
}
}
.lifestyle-feed__portal-section .wp-block-latest-posts li { /* div ul li */
margin: 0;
padding: 15px;
box-sizing: border-box;
}
/* for 600px or more */
@media screen and (min-width: 600px) {
.lifestyle-feed__portal-section .wp-block-latest-posts__list.columns-2 li { /* div ul li */
width: 50%;
}
.lifestyle-feed__portal-section .wp-block-latest-posts__list.columns-3 li {
width: 50%;
}
.lifestyle-feed__portal-section .wp-block-latest-posts__list.columns-4 li {
width: 50%;
}
.lifestyle-feed__portal-section .wp-block-latest-posts__list.columns-5 li {
width: 50%;
}
.lifestyle-feed__portal-section .wp-block-latest-posts__list.columns-6 li {
width: 50%;
}
}
/* for 1024px or more */
@media screen and (min-width: 1024px) {
.lifestyle-feed__portal-section .wp-block-latest-posts__list.columns-2 li { /* div ul li */
width: 50%;
}
.lifestyle-feed__portal-section .wp-block-latest-posts__list.columns-3 li {
width: 33.33333%;
}
.lifestyle-feed__portal-section .wp-block-latest-posts__list.columns-4 li {
width: 25%;
}
.lifestyle-feed__portal-section .wp-block-latest-posts__list.columns-5 li {
width: 20%;
}
.lifestyle-feed__portal-section .wp-block-latest-posts__list.columns-6 li {
width: 16.666%;
}
}
/* for 600px or less */
@media screen and (max-width: 600px) {
.lifestyle-feed__portal-section .widget.widget_block {
margin-bottom: 60px;
}
.lifestyle-feed__portal-section .wp-block-latest-posts__list.is-grid li { /* div ul li */
width: 100%;
}
}
.lifestyle-feed__portal-section .wp-block-latest-posts__list .wp-block-latest-posts__featured-image img {
width: 100%;
max-width: 100%;
margin-bottom: 12px;
-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
.lifestyle-feed__portal-section .wp-block-latest-posts__list .wp-block-latest-posts__featured-image a {
display: unset;
}
/* cta below the portal section */
/*.lifestyle-feed__portal-section .widget.widget_block .wp-block-button__link {
height: 48px;
padding: 0 24px;
font-size: 15px;
font-weight: 600;
line-height: 44px;
border: 2px solid #222;
transition: all 0.2s ease-out;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
}*/
.wp-block-latest-posts__post-author,
.wp-block-latest-posts__post-date {
font-size: 13px;
color: #999;
}
/* WG page list */
/* in article */
.wp-block-query-pagination {
margin-top: 12px;
}
/* WG rss */
/* WG search */
.wp-block-search__label {
display: block;
margin-bottom: 8px;
font-weight: 600;
}
.wp-block-search__button svg {
min-height: 20px;
min-width: 20px;
}
/* WG shortcode */
/* WG social links */
.wp-block-social-links a {
color: #fff !important;
}
/* WG tag cloud */
/* WIDGETS: THEME (n/a) ***************************************/
/* WG navigation */
.wp-block-navigation .wp-block-navigation-item,
.wp-block-navigation .wp-block-navigation-item:last-child {
margin: 0;
}
.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
margin-top: 0;
padding: 10px 16px;
border: none;
-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
/* WG comments template */
.wp-block-comments h2 {
margin-bottom: 24px;
font-weight: 600;
}
.wp-block-comment-template .wp-block-avatar {
margin-top: 4px;
}
:where(.wp-block-columns.is-layout-flex) {
gap: 1em;
}
.wp-block-comment-template .wp-block-comment-author-name {
font-size: 15px !important;
line-height: 26px;
font-weight: 600;
}
.wp-block-comment-template .wp-block-comment-date,
.wp-block-comment-template .wp-block-comment-edit-link {
line-height: 20px;
}
.wp-block-comment-template .wp-block-comment-date a,
.wp-block-comment-template .wp-block-comment-edit-link a {
color: #999 !important;
text-decoration: none !important;
}
.wp-block-comment-template .wp-block-comment-content {
font-size: 15px;
line-height: 26px;
}
.wp-block-comment-template .wp-block-comment-content p {
margin-top: 10px;
}
.wp-block-comment-template .wp-block-comment-reply-link a {
color: #999 !important;
text-transform: uppercase;
text-decoration: none !important;
}
.wp-block-comment-template li:before {
content: unset !important;
}
.wp-block-comments textarea {
padding: 12px 24px;
border-color: #ccc;
}
.wp-block-comment-template .comment-respond {
padding-left: 34px;
}
.wp-block-comment-template .comment-respond h3.comment-reply-title small {
display: block;
margin-left: 0;
}
.wp-block-comment-template .comment-respond h3.comment-reply-title small a {
color: #999 !important;
text-decoration: none !important;
}
.wp-block-comment-template .comment-respond h3.comment-reply-title small a:hover {
color: #666 !important;
}
.wp-block-comment-template .comment-respond h3.comment-reply-title,
.wp-block-comment-template .comment-respond h3.comment-reply-title small {
margin-bottom: 16px;
font-size: 22px;
}
.wp-block-post-comments-form input:not([type="submit"]),
.wp-block-post-comments-form textarea {
padding: 12px 24px !important;
border-color: #ccc !important;
}
/* WIDGETS: EMBEDS (n/a) **************************************/
/* WIDGETS: OTHER TAGS (n/a) **************************************/
/* 7.3 Widgets - Right column ****************************************/
.lifestyle-right-column .widgetized-area .widget > * {
font-size: 16px;
line-height: 24px;
}
/* WIDGETS: TEXT ****************************************/
/* WG paragraph */
.widget.widget_text p {
margin-bottom: 20px;
}
.widget.widget_text p:last-child {
margin-bottom: 0;
}
.widget.widget_text .textwidget img {
max-width: 100%;
height: auto;
}
.widget.widget_text .textwidget form select {
max-width: 100%;
}
/* WG heading */
/* WG lists */
.widget.widget_block ol ol,
.widget.widget_block ol ul,
.widget.widget_block ul ul,
.widget.widget_block ul ol {
margin-left: 18px;
}
/* WG blockquote */
/* WG code */
/* WG details */
/* WG preformatted */
/* WG pullquote */
.widget .wp-block-pullquote blockquote p {
font-size: 22px;
line-height: 32px;
}
/* WG table */
/* WG verse */
/* WIDGETS: MEDIA ***************************************/
/* WG image */
/* WG gallery */
/* WG audio */
/* WG cover */
/* WG file */
/* WG media i text */
/* WG video */
/* WIDGETS: DESIGN **************************************/
/* WG buttons */
/* WG columns */
/* WG group */
/* WG row & WG stack */
/* WG read more */
/* WG separator */
/* WG spacer */
/* WG page break */
/* WIDGETS: WIDGETS *************************************/
/* WG archives */
/* WG calendar */
/* WG categories */
/* WG custom html */
/* WG latest comments */
/* WG latest posts */
.widget.widget_recent_entries ul li span.post-date {
display: block;
margin-top: 5px;
color: #999;
font-size: 13px;
text-transform: uppercase;
}
/* WG page list */
/* WG rss */
.widget.widget_rss ul li {
margin-bottom: 12px;
}
.widget.widget_rss ul li:last-child {
margin-bottom: 0;
}
.widget.widget_rss ul li span.rss-date {
display: block;
font-size: 13px;
color: #999;
margin-top: 5px;
text-transform: uppercase;
}
.widget.widget_rss ul li cite {
color: #666;
}
/* WG search */
/* WG shortcode */
/* WG social links */
/* WG tag cloud */
/* WG - THEME ****************************************/
/* WG - EMBEDS ****************************************/
/* WIDGETS: OTHER TAGS **************************************/
/* 7.4 Lifestyle Theme widgets */
/* 7.4.1 Site author */
.lifestyle-block.site-author .ac {
position: relative;
}
.lifestyle-block.site-author .ac img {
margin: 0 auto 8px auto;
width: 130px;
height: auto;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
animation: morph-img 8s ease-in-out infinite;
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
transition: all 1s ease-in-out;
z-index: 5;
}
@keyframes morph-img {
0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}
.lifestyle-block.site-author .ac .ac-border {
position: absolute;
top: 0;
left: calc( 50% - 70px );
width: 132px;
height: 117px;
border: 3px solid #fff;
animation: morph-border 8s ease-in-out infinite;
border-radius: 40% 60% 70% 30% / 40% 70% 30% 60%;
transition: all 1s ease-in-out;
z-index: 5;
}
@keyframes morph-border {
0% { border-radius: 40% 60% 70% 30% / 40% 70% 30% 60% }
50% { border-radius: 70% 40% 30% 60% / 50% 40% 70% 40%; }
100% { border-radius: 40% 60% 70% 30% / 40% 70% 30% 60% }
}
.lifestyle-block.site-author .name {
margin-bottom: 26px;
padding-top: 8px;
font-family: "Ms Madi", sans-serif;
font-size: 40px;
color: #222;
line-height: 36px;
text-align: center;
}
.lifestyle-block.site-author p {
margin-bottom: 30px;
font-size: 15px;
color: #666;
line-height: 22px;
text-align: center;
}
/* Site author box socials */
.site-author-socials {
display: flex;
justify-content: center;
}
.site-author-socials li {
margin: 0 5px;
}
/* for 600px or less */
@media screen and (max-width: 600px) {
.site-author-socials li {
margin: 0 10px;
}
}
/* 7.4.2 Editor's pick */
.lifestyle-feed4 ul::after {
display: table;
content: " ";
clear: both;
}
.lifestyle-feed4 ul li.post {
position: relative;
margin-bottom: 32px;
}
.lifestyle-feed4 ul li.post:last-child {
margin-bottom: 0;
}
.lifestyle-feed4 ul li.post span {
display: block;
margin-bottom: 16px;
}
.lifestyle-feed4 ul li.post figure {
margin-bottom: 16px;
}
.lifestyle-feed4 ul li.post header {
position: relative;
}
.lifestyle-feed4 ul li.post header h2 a {
font-size: 22px;
line-height: 32px;
}
/* No thumb */
.lifestyle-feed4 ul li.post.no-thumb span {
margin-bottom: 5px;
}
.lifestyle-feed4 ul li.post.no-thumb header {
margin-top: 0;
}
/* for 1024px or less */
@media screen and (max-width: 1024px) {
/* FEED 4 */
.lifestyle-feed4 ul li.post header h2 a {
font-size: 22px;
line-height: 32px;
}
} /* @media 1024 */
/* for 768px or less */
@media screen and (max-width: 768px) {
/* FEED 4 */
.lifestyle-feed4 ul li.post {
margin-right: 3.8961%;
width: 48.0519%;
float: left;
}
.lifestyle-feed4 ul li.post:nth-child(2n) {
margin-right: 0;
}
.lifestyle-feed4 ul li.post header h2 a {
font-size: 28px;
line-height: 36px;
}
} /* @media 768 */
/* for 600px or less */
@media screen and (max-width: 600px) {
/* FEED 4 */
.lifestyle-feed4 ul li.post {
margin-right: 0;
width: 100%;
}
/* No thumb */
.lifestyle-feed4 ul li.post.no-thumb header h2 {
padding: 0;
}
} /* @media 600 */
.no-posts { /* masonry no posts padding tile */
padding: 15px;
}
/* = 8. Article
------------------------------------- */
.lifestyle-upper-flex {
min-width: 0;
flex-basis: 100%;
}
.lifestyle-upper-flex.sidebar {
flex-basis: calc( 100% - 330px );
}
/* Post password */
.post-password-form p:first-child {
margin-bottom: 24px;
}
/* 8.1 Article header */
.lifestyle-single-header {
margin-bottom: 80px;
padding: 0 15px;
}
.lifestyle-single-header .breadcrumbs {
display: block;
margin-bottom: 20px;
font-size: 15px;
color: #999;
line-height: 22px;
overflow: hidden;
text-overflow: ellipsis;
}
.lifestyle-single-header .breadcrumbs.articlehead__breadcrumbs { /* breake 1, image */
margin-top: 40px;
padding-right: 16px;
box-sizing: border-box;
}
.lifestyle-single-header.no-thumb .breadcrumbs.articlehead__breadcrumbs { /* breake 1, no thumb */
margin-top: 0;
}
.lifestyle-single-header .breadcrumbs a {
font-size: 15px;
text-transform: capitalize;
}
.lifestyle-single-header .post::after {
display: table;
content: " ";
clear: both;
}
.lifestyle-single-header .post figure {
width: 65.8119%; /* 770px */
height: auto;
float: right;
}
.lifestyle-single-header .post header,
.lifestyle-single-header .breadcrumbs {
width: 34.1880%; /* 400px */
float: left;
}
.lifestyle-single-header .post header h1 {
margin-right: -50%;
font-size: 62px;
line-height: 66px;
font-weight: 700;
text-shadow: 6px 0px 0px rgb(255,255,255,1), 1px 5px 0px rgb(255,255,255,1), -2px -4px 0px rgb(255,255,255,1);
}
.lifestyle-post-author {
display: flex;
margin-top: 28px;
}
/* for 1024px or less */
@media screen and (max-width: 1024px) {
.lifestyle-post-author {
margin-top: 20px;
}
}
.lifestyle-post-author .lifestyle-post-avatar {
margin-right: 16px;
}
/* for 600px or less */
@media screen and (max-width: 600px) {
body.rtl .lifestyle-post-author .lifestyle-post-avatar { /* rtl */
margin-right: 0;
}
}
.lifestyle-post-author .lifestyle-post-avatar img {
width: 48px;
height: auto;
-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
-webkit-border-radius: 24px;
-moz-border-radius: 24px;
border-radius: 24px;
}
.lifestyle-post-author .lifestyle-post-nick {
margin-right: 16px;
font-size: 17px;
line-height: 24px;
}
.lifestyle-post-author .lifestyle-post-nick date {
display: block;
font-size: 15px;
color: #999;
}
/* No thumb, only header */
.lifestyle-single-header.no-thumb .post span {
margin-bottom: 0;
padding-top: 0;
}
.lifestyle-single-header.no-thumb .post header,
.lifestyle-single-header.no-thumb .breadcrumbs {
width: 100%;
float: none;
}
.lifestyle-single-header.no-thumb .post header h1 {
margin-right: 0;
}
.lifestyle-single-header.no-thumb .post p {
margin-top: 24px;
font-size: 17px;
line-height: 28px;
}
/* for 1024px or less */
@media screen and (max-width: 1024px) {
.lifestyle-single-header {
margin-bottom: 40px;
}
.lifestyle-single-header .post header h1 {
font-size: 44px;
line-height: 56px;
}
}
/* for 768px or less */
@media screen and (max-width: 768px) {
.lifestyle-single-header .breadcrumbs.articlehead__breadcrumbs { /* breake 2, image */
margin-top: 0;
}
.lifestyle-upper-flex,
.lifestyle-upper-flex.sidebar{
flex-basis: 100%;
}
.lifestyle-single-header .post header h1 {
font-size: 36px;
line-height: 44px;
margin-right: -90%;
}
}
/* for 600px or less */
@media screen and (max-width: 600px) {
.lifestyle-single-header {
margin-bottom: 40px;
}
.lifestyle-single-header .breadcrumbs {
margin-bottom: 8px;
}
.lifestyle-single-header .breadcrumbs.articlehead__breadcrumbs { /* breake 3, image */
margin-top: 32px;
}
body.rtl .lifestyle-single-header .breadcrumbs.articlehead__breadcrumbs { /* rtl */
padding-right: 0;
}
.lifestyle-single-header .post figure {
float: none;
width: 100%;
}
.lifestyle-single-header .post header,
.lifestyle-single-header.no-thumb .post header,
.lifestyle-single-header .breadcrumbs {
float: none;
margin-left: 0;
margin-right: 0;
width: unset;
}
.lifestyle-single-header .post header h1 {
margin-right: 0;
}
}
/* for 360px or less */
@media screen and (max-width: 360px) {
.lifestyle-single-header .post header h1 {
font-size: 28px;
line-height: 36px;
}
} /* @media 360 */
/* 8.2 Left column */
.lifestyle-left-column {
flex-basis: 12%;
padding: 5px 30px 0 15px;
box-sizing: border-box;
}
.lifestyle-left-column.sticky__column {
position: sticky;
top: 10px;
align-self: flex-start;
}
/* Left column item */
.lc__social-icons .head {
margin-bottom: 25px;
font-size: 15px;
color: #999;
line-height: 18px;
text-align: left;
text-transform: uppercase;
}
body.rtl .lc__social-icons .head { /* rtl */
text-align: right;
}
/* share an article */
.lc__social-icons ul li {
display: block;
margin-bottom: 10px;
width: 40px;
height: 40px;
text-align: center;
overflow: hidden;
-webkit-border-radius: 22px;
-moz-border-radius: 22px;
border-radius: 22px;
-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.lc__social-icons ul li:hover {
transform: scale(1.2,1.2);
-webkit-transform: scale(1.2,1.2);
-moz-transform: scale(1.2,1.2);
-o-transform: scale(1.2,1.2);
-ms-transform: scale(1.2,1.2);
}
.lc__social-icons ul li svg {
width: 20px;
padding-top: 10px;
}
.lc__social-icons ul li.facebook svg {
width: 14px;
}
.lc__social-icons.fixed {
position: fixed;
top: 25px;
}
/* for 1024px or less */
@media screen and (max-width: 1024px) {
.lifestyle-left-column {
margin-bottom: 40px;
padding-top: 0;
flex-basis: 100%;
}
body.rtl .lifestyle-left-column { /* rtl */
flex-basis: 12%;
padding: 5px 15px 0 30px;
box-sizing: border-box;
}
.lifestyle-single-content.image .lifestyle-left-column .lc__social-icons {
padding-top: 10px;
}
.lifestyle-left-column.sticky__column {
position: relative;
top: unset;
align-self: unset;
}
}
/* for 600px or less */
@media screen and (max-width: 600px) {
.lc__social-icons ul li {
transition: none;
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
}
.lc__social-icons ul li:hover {
transform: none;
-webkit-transform: none;
-moz-transform: none;
-o-transform: scale(1.1);
-ms-transform: none;
}
}
/* 8.3 Article content */
.lifestyle-single-content {
position: relative;
padding: 0 15px;
box-sizing: border-box;
min-width: 0;
}
.lifestyle-single-flex-container .lifestyle-single-content {
flex-basis: 100%;
}
.lifestyle-single-flex-container.lc__active .lifestyle-single-content {
flex-basis: 88%;
}
.lifestyle-single-flex-container.article-centered .lifestyle-single-content {
flex-basis: 64%;
margin: 0 auto;
}
.lifestyle-single-flex-container.article-centered.lc__active .lifestyle-single-content {
flex-basis: 64%;
margin: 0 18% 0 6%;
}
body.rtl .lifestyle-single-flex-container.article-centered.lc__active .lifestyle-single-content { /* rtl */
margin: 0 6% 0 18%;
}
.lifestyle-single-content.single__comments {
margin-top: 7px;
flex-basis: 100%;
}
/* for 1024px or less */
@media screen and (max-width: 1024px) {
.lifestyle-single-flex-container.lc__active .lifestyle-single-content {
flex-basis: 100%;
}
.lifestyle-single-flex-container.article-centered .lifestyle-single-content,
.lifestyle-single-flex-container.article-centered.lc__active .lifestyle-single-content {
flex-basis: 100%;
margin: 0;
}
/* inline share icons */
.lc__social-icons .head {
margin-bottom: 5px;
}
.lc__social-icons ul li {
display: inline-block;
margin-bottom: 0;
margin-right: 6px;
}
body.rtl .lc__social-icons ul li { /* rtl */
margin-right: unset;
margin-left: 6px;
}
.cloudc:hover {
transform: none;
-webkit-transform: none;
-moz-transform: none;
-o-transform: none;
-ms-transform: none;
}
} /* @media 1024 */
/* for 768px or less */
@media screen and (max-width: 768px) {
.lifestyle-single-content.single__comments {
margin-top: 0;
}
.lifestyle-single-content {
margin-bottom: 60px;
}
}
/* 8.3.1 Article content - common elements */
/* paragraph inlines tags */
strong { font-weight: 600; }
em, cite, var { font-style: italic; }
sup { vertical-align: super; font-size: smaller; } /* MC2 (2) */
sub { vertical-align: sub; font-size: smaller; } /* H2O (2) */
pre { overflow: auto; }
strike, del { text-decoration: line-through; }
ins { }
q::after, q::before { content: "\""; }
/* other block tags */
hr { margin-bottom: 30px; margin-top: 0; padding: 2px; background: #ddd; border: 0; }
address { padding: 16px 24px; border: 2px dashed #ccc; }
dt { font-weight: 500; } dd { margin-bottom: 15px; }
/* article post lead */
.lifestyle-post-content > p:first-child {
font-size: 20px;
line-height: 32px;
}
/* for 600px or less */
@media screen and (max-width: 600px) {
.lifestyle-post-content > p:first-child {
font-size: 17px;
line-height: 28px;
}
} /* @media 600 */
/* Image radius & shadow */
.wp-block-pullquote.is-style-solid-color, /* dev */
.lifestyle-post-content img,
.wp-block-media-text__media, /* figure with an image in background */
.wp-block-media-text__media img,
.wp-block-media-text__media video,
.wp-block-video video,
.wp-block-cover {
-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
/* 8.3.2 Article content - common styles for post images */
/* images alignment */
img.alignleft { float: left; text-align: left; margin-right: 24px; }
img.alignright { float: right; text-align: left; margin-left: 24px; }
img.aligncenter { margin: 0 auto; text-align: center; }
/* for 480px or less */
@media screen and (max-width: 480px) {
/* images alignment */
img.alignleft {
float: none !important;
margin: 0 !important;
}
img.alignright {
float: none !important;
margin: 0 !important;
}
} /* @media 480 */
/* caption sizes */
.wp-caption-text, .gallery-caption, /* #gallery */
figure figcaption {
margin-top: 12px !important;
margin-bottom: 0 !important;
font-size: 15px;
color: #999;
line-height: 18px;
-webkit-border-radius: 0 0 8px 8px;
-moz-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
}
/* 8.4 Article tags */
.lifestyle-post-content > .lifestyle-tags {
margin-top: 80px;
margin-bottom: 0;
clear: both;
}
.lifestyle-post-content > .lifestyle-tags:first-child {
margin-top: 0;
}
.lifestyle-post-content .lifestyle-tags a {
margin-right: 20px;
color: #999;
line-height: 30px;
text-transform: uppercase;
}
.lifestyle-post-content .lifestyle-tags a:hover {
color: #222;
}
/* for 768px or less */
@media screen and (max-width: 768px) {
.lifestyle-post-content .lifestyle-tags {
margin-top: 60px;
}
} /* @media 768 */
/* 8.4 Article author box */
.lifestyle-single-content .post-author-box {
position: relative;
margin-top: 80px;
margin-bottom: 0 !important;
padding: 40px 32px 24px 32px;
background-color: #f5f5f5;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
.lifestyle-single-content .post-author-box:first-child {
margin-top: 24px
}
/* for 600px or less */
@media screen and (max-width: 600px) {
.lifestyle-single-content .post-author-box {
margin-top: 60px;
}
} /* @media 600 */
.lifestyle-single-content .post-author-box .top {
margin-top: -60px;
margin-bottom: 20px;
}
.lifestyle-single-content .post-author-box img {
float: left;
margin-right: 30px;
-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
body.rtl .lifestyle-single-content .post-author-box img { /* rtl */
float: right;
margin-right: 0;
margin-left: 30px;
}
.lifestyle-single-content .post-author-box .name {
padding-bottom: 0;
font-family: "Ms Madi", sans-serif;
font-size: 40px;
color: #222;
line-height: 38px;
}
.lifestyle-single-content .post-author-box .name a {
color: #222;
border: none;
}
.lifestyle-single-content .post-author-box .name::after {
display: table;
content: " ";
clear: both;
}
.lifestyle-single-content .post-author-box p {
padding-bottom: 0;
font-size: 15px;
color: #666;
line-height: 26px;
}
/* 8.5 Article comments */
.lifestyle-single-content > h3#comments { /* main level reply header */
margin-bottom: 40px;
font-size: 44px;
}
@media screen and (max-width: 1024px) {
.lifestyle-single-content > h3#comments {
font-size: 36px;
line-height: 44px;
}
}
@media screen and (max-width: 600px) {
.lifestyle-single-content > h3#comments {
margin-bottom: 24px;
font-size: 28px;
line-height: 36px;
}
}
.comment-respond h3.comment-reply-title { /* main level reply header */
margin-bottom: 40px;
font-size: 28px;
}
@media screen and (max-width: 600px) {
.comment-respond h3.comment-reply-title {
margin-bottom: 24px;
}
}
.lifestyle-single-content ul.user-comment li.comment,
.lifestyle-single-content ul.user-comment li.trackback,
.lifestyle-single-content ul.user-comment li.pingback {
position: relative;
margin-top: 40px;
font-size: 15px;
line-height: 26px;
}
@media screen and (max-width: 600px) {
.lifestyle-single-content ul.user-comment li.comment,
.lifestyle-single-content ul.user-comment li.trackback,
.lifestyle-single-content ul.user-comment li.pingback {
margin-top: 24px;
}
}
.lifestyle-single-content ul.user-comment li .comment-body p {
margin-top: 10px;
}
.lifestyle-single-content ul.user-comment li.comment { /* comments content margin */
margin-left: 55px;
}
body.rtl .lifestyle-single-content ul.user-comment li.comment { /* rtl */
margin-left: 0;
margin-right: 55px;
}
.lifestyle-single-content ul.user-comment li.comment img { /* image in comment */
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.lifestyle-single-content ul.user-comment li.comment img.avatar {
position: absolute;
top: 3px;
left: -55px;
width: 40px;
height: 40px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
body.rtl .lifestyle-single-content ul.user-comment li.comment img.avatar { /* rtl */
left: unset;
right: -55px;
}
.lifestyle-single-content ul.user-comment li .comment-body .comment-author cite.fn {
font-weight: 600;
font-style: normal;
}
.lifestyle-single-content ul.user-comment li.bypostauthor .comment-body .comment-author cite.fn:after {
content: ' ✍🏻';
}
.logged-in-as a,
.lifestyle-single-content ul.user-comment li .comment-body a,
.lifestyle-single-content ul.user-comment li .comment-body .comment-author cite.fn a {
color: #222;
text-decoration-line: underline;
text-decoration-thickness: 1px;
text-decoration-color: #ddd;
text-underline-offset: 6px;
}
.logged-in-as a:hover,
.lifestyle-single-content ul.user-comment li .comment-body a:hover,
.lifestyle-single-content ul.user-comment li .comment-body .comment-author cite.fn a:hover,
.logged-in-as a:hover {
text-decoration-color: #222;
}
.lifestyle-single-content ul.user-comment li .comment-body .comment-author .says {
display: none;
}
.lifestyle-single-content ul.user-comment li .comment-body .comment-meta {
display: block;
margin-bottom: 0;
font-size: 13px;
line-height: 20px;
}
.lifestyle-single-content ul.user-comment li .comment-body .comment-meta a {
color: #999;
text-decoration: none;
}
/* comment reply link */
.lifestyle-single-content ul.user-comment li.comment .comment-body .reply {
font-size: 13px;
text-transform: uppercase;
}
.lifestyle-single-content ul.user-comment li.comment .comment-body .reply a {
color: #999;
text-decoration: none;
}
.lifestyle-single-content ul.user-comment li.comment .comment-body .reply a:hover {
color: #666;
}
.comment-respond {
margin-top: 40px;
}
/* for 600px or less */
@media screen and (max-width: 600px) {
.lifestyle-single-content ul.user-comment li.comment .comment-respond {
margin-left: -55px;
}
} /* @media 600 */
/* Reply titles */
.lifestyle-single-content > h3#comments, /* main comments header */
.lifestyle-single-content ul.user-comment li.comment .comment-respond h3.comment-reply-title, /* comments headers */
.comment-respond h3.comment-reply-title { /* main level reply header */
font-family: "Hanken Grotesk", sans-serif;
font-weight: 700;
text-transform: uppercase;
}
.lifestyle-single-content ul.user-comment li.comment .comment-respond h3.comment-reply-title { /*reply comments headers*/
margin-bottom: 16px;
font-size: 22px;
}
.lifestyle-single-content ul.user-comment li.comment .comment-respond h3.comment-reply-title small {
display: block;
}
.lifestyle-single-content ul.user-comment li.comment .comment-respond h3.comment-reply-title small a {
color: #999;
}
.lifestyle-single-content ul.user-comment li.comment .comment-respond h3.comment-reply-title small a:hover {
color: #666;
}
/* Description */
.logged-in-as,
.comment-notes {
margin-bottom: 20px;
font-size: 15px;
line-height: 26px;
}
/* Reply textarea */
.comment-form-comment,
.comment-form-url,
.comment-form-author,
.comment-form-email {
margin-bottom: 16px;
}
.comment-form-comment label {
display: none;
}
.comment-form-comment textarea {
width: 100%;
box-sizing: border-box;
}
/* Guest */
.comment-form-author > label,
.comment-form-url > label,
.comment-form-email > label {
display: block;
margin-bottom: 4px;
font-weight: 600;
}
.comment-form-author > input,
.comment-form-url > input,
.comment-form-email > input {
width: 100%;
box-sizing: border-box;
}
.comment-form-cookies-consent { /* save my name for the next comment (checkbox) */
font-size: 15px;
margin-bottom: 20px;
}
ul.user-comment li p.form-submit {
margin-top: 0;
}
.comments-info {
margin-top: 40px;
padding: 24px 32px;
border: 1px #ccc solid;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
@media screen and (max-width: 600px) {
.comments-info {
margin-top: 24px;
}
}
/* = 9. Site footer
------------------------------------- */
.lifestyle-wrapper.lw__footer {
margin-bottom: 24px;
}
footer.site-footer {
padding: 0 15px;
}
footer.site-footer > ul {
width: 100%;
display: flex;
flex-wrap: wrap;
column-gap: 2%;
row-gap: 2em;
overflow: hidden;
}
footer.site-footer > ul > li {
box-sizing: border-box;
width: 18%;
}
footer.site-footer > ul > li:last-child {
width: 40%;
}
footer.site-footer h3 {
margin-bottom: 20px;
font-family: "Hanken Grotesk", sans-serif;
font-size: 22px;
font-weight: 700;
text-transform: uppercase;
}
footer.site-footer ul li ul li {
margin-bottom: 8px;
margin-left: 0;
}
footer.site-footer ul li ul li a {
font-size: 15px;
color: #666;
}
footer.site-footer ul li ul li a:hover {
text-decoration: underline;
}
footer.site-footer ul li ul li ul.sub-menu {
display: none;
}
footer.site-footer ul li ul li ul.sub-menu li {
margin: 0 0 0 10px;
}
footer.site-footer ul li ul li:hover ul.sub-menu {
display: block;
}
footer.site-footer ul li.nslt p {
margin-bottom: 25px;
font-size: 15px;
line-height: 26px;
}
footer.site-footer > p {
margin-top: 80px;
font-size: 15px;
color: #999;
line-height: 26px;
}
.nslt__form-fields fieldset input:not([type="submit"]) {
margin-bottom: 8px;
}
/* for 768px or less */
@media screen and (max-width: 768px) {
footer.site-footer > ul > li,
footer.site-footer > ul > li.nslt {
width: 49%;
}
} /* @media 768 */
/* for 600px or less */
@media screen and (max-width: 600px) {
footer.site-footer > p {
margin-top: 60px;
}
footer.site-footer > ul > li,
footer.site-footer > ul > li.nslt {
width: 100%;
}
} /* @media 600 */
/* Text meant only for screen readers */
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
white-space: nowrap;
height: 1px;
width: 1px;
overflow: hidden;
}
.screen-reader-text:focus {
background-color: #f1f1f1;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
color: #21759b;
display: block;
font-size: 15px;
font-size: 0.875rem;
font-weight: bold;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000; /* Above WP toolbar. */
}