Viewing File: /home/maglabs/lacentraleit/wp-content/themes/mlab/assets/less/theme.less
/* ============================================================
1. GENERAL
=============================================================*/
*,
*:after,
*:before {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
text-rendering:optimizeLegibility;
outline: 0;
&:focus {
outline: 0;
}
}
*:after,
*:before {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
::selection {
color: @white;
}
::-moz-selection {
color: @white;
}
.transition {
.transition();
}
.wp-caption {
max-width: 100%;
}
.wp-caption-text,figcaption {
font-size: 13px;
line-height: 1.3;
text-align: center;
.opacity(.7);
}
.alignleft {
@media only screen and (min-width: 769px) {
float: left;
margin: 0 30px 30px 0;
clear: left;
}
}
.alignright {
@media only screen and (min-width: 769px) {
float: right;
margin: 0 0 30px 30px;
clear: right;
}
}
.aligncenter {
text-align: center;
margin-left: auto;
margin-right: auto;
display: block;
clear: both;
}
.bypostauthor {
.opacity(1);
}
.sub-menu {
li {
a:empty {
&:after {
display: none;
}
}
}
}
.wrap {
margin: 0 auto;
position: relative;
&:after {
clear: both;
content: "";
display: table;
}
}
html {
overflow-x: hidden;
}
a {
text-decoration: none;
&:extend(.transition);
&.link {
position: relative;
display: inline-block;
&:after {
content:"";
height: 0;
position: absolute;
left: 0;
width: 100%;
bottom: -2px;
border-bottom: 1px solid;
.opacity(.15);
&:extend(.transition);
}
&:hover {
&:after {
right: 0;
left: auto;
width: 0;
}
}
}
&.btn-link {
position: relative;
padding-left: 65px;
font-weight: 600;
display: inline-block;
z-index: 1;
line-height: 1.45;
&:before {
content: "\ea6e";
font-family:"Nucleo";
font-size: 16px;
font-weight: normal;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
&:extend(.transition);
}
&:after {
content: "";
z-index: -1;
position: absolute;
left: 0;
top: 50%;
width: 50px;
height: 50px;
line-height: 50px;
transform: translateY(-50%);
background: @white;
.box-shadow;
.rounded(25px);
&:extend(.transition);
}
span {
display: block;
font-size: 86%;
font-weight: normal;
.opacity(.7);
}
&:hover {
&:before {
transform: translate(10px,-50%);
}
&:after {
width: ~"calc(100% + 30px)";
height: 64px;
.rounded(32px);
}
}
}
}
p {
margin-top: 0;
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
h1,h2,h3,h4,h5,h6 {
margin-bottom: 20px;
margin-top: 40px;
font-weight: bold;
&[class*="wp-block-"] {
margin-bottom: 20px;
}
a {
color: inherit;
}
&.no-margin-top {
margin-top: 0;
}
&.no-margin-bottom {
margin-bottom: 0;
}
&.no-margin {
margin: 0;
}
}
img {
border: medium none;
height: auto;
max-width: 100%;
vertical-align: top;
}
b, strong {
font-weight: 700;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: rgba(0,0,60,0.6);
}
::-moz-placeholder { /* Firefox 19+ */
color: rgba(0,0,60,0.6);
}
:-ms-input-placeholder { /* IE 10+ */
color: rgba(0,0,60,0.6);
}
:-moz-placeholder { /* Firefox 18- */
color: rgba(0,0,60,0.6);
}
textarea,
input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]) {
position: relative;
max-width: 100%;
box-sizing:border-box;
font-size: 15px;
line-height: 18px;
padding: 15px 20px;
font-family: inherit;
font-weight: inherit;
background-color: rgba(0,0,60,.12);
.rounded(15px);
&:focus {
background-color: rgba(255,255,255,0);
.box-shadow3;
}
&:disabled {
cursor: no-drop;
}
}
input[type="submit"],input[type="button"],button,.button:not([class*="product_type_"]) {
font-family: inherit;
background-image: none;
cursor: pointer;
white-space: nowrap;
line-height: 18px;
font-size: 15px;
font-weight: 600;
padding: 15px 50px;
text-align: center;
border: 1px solid transparent;
color: @white;
.rounded(15px);
.box-shadow3;
&:extend(.transition);
&:hover {
color: @white;
}
&:disabled,&.disabled {
cursor: no-drop;
background-color: #f2f2f2;
color: rgba(0,0,60,.3);
.box-shadow(none);
&:hover {
background-color: #f2f2f2;
}
}
}
input[type="checkbox"] {
height: auto;
line-height: inherit;
}
textarea {
line-height: inherit;
padding-top: 15px;
padding-bottom: 15px;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
transition: background-color 5000s ease-in-out 0s;
-webkit-text-fill-color: red;
}
input[type="date"] {
max-height: 50px;
&::-webkit-calendar-picker-indicator {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
cursor: pointer;
line-height: 1;
.opacity(0);
}
}
body select {
outline:0;
max-width: 100%;
position: relative;
text-indent: 0.01px;
text-overflow: '';
cursor: pointer;
font-size: 15px;
line-height: 18px;
padding: 15px 20px;
font-family: inherit;
font-weight: 600;
appearance: none;
box-sizing:border-box;
color: inherit;
.rounded(15px);
}
body select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #2f4858;
}
code {
font-size: 12px;
line-height: 20px;
.opacity(.7);
}
blockquote {
margin: 50px 0;
padding: 0 60px;
font-size: 24px;
font-weight: 300;
line-height: 1.6;
position: relative;
&.has-text-align-right {
&:after,&:before {
left: auto;
right: 0;
transform: rotateY(180deg);
}
&:after {
right: 20px;
}
}
&:after,&:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 16px;
height: 24px;
clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 35% 75%, 0 100%, 0% 75%);
}
&:after {
left: 20px;
}
}
cite {
margin: 15px 0 0 0;
font-size: 12px;
line-height: 1.3;
font-style: normal;
font-weight: 500;
letter-spacing: 1px;
text-transform: uppercase;
.opacity(.75);
}
table {
width: 100%;
border-collapse: separate;
font-size: 15px;
border-spacing: 0;
font-family: inherit !important;
thead {
th {
padding: 14px 30px;
text-align: left;
border-bottom: 6px solid rgba(0,0,60,.1);
}
}
tbody {
tr {
td,th {
padding: 14px 30px;
text-align: left;
border-bottom: 1px solid rgba(0,0,60,.1);
}
}
}
tfoot {
tr {
th,td {
padding: 14px 30px;
}
}
}
a.button {
display: block;
padding: 10px;
text-align: center;
}
&.style2 {
thead {
th {
text-transform: uppercase;
letter-spacing: 1px;
font-size: 12px;
border-bottom-width: 1px;
&:first-child {
padding-left: 0;
}
&:last-child {
padding-right: 0;
}
}
}
tbody {
tr {
td {
&:first-child {
padding-left: 0;
}
&:last-child {
padding-right: 0;
.button {
width: 100%;
}
}
}
}
}
}
}
dl {
dt {
font-weight: 500;
}
dd {
margin: 0 0 20px 40px;
}
}
pre {
font-size: 12px;
overflow: auto;
background-image: linear-gradient(@white 50%, rgba(0,0,60,.05) 50%);
background-size: 40px 40px;
display: block;
line-height: 20px;
padding: 0 0 0 7px;
h1,h2,h3,h4,h5,h6 {
margin-top: 0;
line-height: 40px;
margin-bottom: 20px;
}
cite {
margin: 20px 0;
}
}
figure {
margin: 30px 0;
}
figcaption {
margin: 10px 0;
}
article {
&:after {
clear: both;
content: "";
display: table;
}
}
/* ============================================================
2. LAYOUT
=============================================================*/
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 16px;
line-height: 160%;
&:not(.is-loaded) {
&:after,&:before {
position: fixed;
visibility: visible;
.opacity(1);
}
}
&.is-loaded {
&:after,&:before {
position: fixed;
visibility: hidden;
.opacity(0);
&:extend(.transition);
}
}
&:after {
content:"";
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999999;
background: @white;
}
&:before {
content:"\ea1b";
font-family:"Nucleo";
font-size: 64px;
left: 50%;
top: 50%;
display: block;
z-index: 9999999;
width: 64px;
height: 64px;
text-align: center;
line-height: 64px;
margin-left: -32px;
margin-top: -32px;
animation: iconlab-spin 1s infinite linear;
}
&:not(.page-template-template-fullwidth) {
.content-body {
padding-bottom: 80px;
}
&.blog {
.content-body {
padding-bottom: 50px;
}
}
}
.wrap {
@media only screen and (min-width: 1024px) and (max-width: 1366px) {
max-width: 96%;
}
}
}
.page-template-template-fullwidth,.elementor-template-full-width {
.site-content .content-header {
margin-bottom: 0;
}
.content-body-inner {
&.wrap {
width: 100%;
max-width: 100%;
}
}
}
.page-template-default {
.comments-area {
padding-top: 80px;
}
}
.layout-wide {
.site {
&.wrap {
width: 100%;
max-width: 100%;
}
}
}
.layout-boxed {
.site {
overflow: hidden;
.site-content {
background: @white;
}
}
}
.sidebar-right {
#main-content {
float: left;
@media only screen and (max-width: 768px) {
float: none;
width: 100%;
padding: 0;
}
}
.main-sidebar {
float: right;
@media only screen and (max-width: 768px) {
float: none;
width: 100%;
padding: 0;
margin-top: 80px;
}
}
}
.sidebar-left {
#main-content {
float: right;
@media only screen and (max-width: 768px) {
float: none;
width: 100%;
padding: 0;
}
}
.main-sidebar {
float: left;
@media only screen and (max-width: 768px) {
float: none;
width: 100%;
padding: 0;
margin-top: 80px;
}
}
}
.post-content-extras {
.edit-link {
text-align: right;
border-top: 1px solid rgba(0,0,60,.12);
padding-top: 10px;
margin-top: 30px;
a {
border-bottom: 1px solid;
padding-bottom: 3px;
display: inline-block;
}
}
}
[data-grid-normal],[data-grid] {
&:after {
content: "";
display: table;
clear: both;
}
.post,.product,.project {
float: left;
}
&[data-columns="2"],
&[data-columns="3"],
&[data-columns="4"],
&[data-columns="5"] {
.post,.product,.project {
width: 100%;
@media only screen and (min-width: 544px) and (max-width: 768px) {
width: 50%;
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
width: 50%;
}
@media only screen and (min-width: 992px) and (max-width: 1024px) {
width: 33.3333333%;
}
}
.product {
width: 50%;
@media only screen and (min-width: 768px) and (max-width: 1024px) {
width: 33.3333333%;
}
}
+ .navigation {
&.pager-numeric .page-numbers.next {
@media only screen and (min-width: 544px) and (max-width: 768px) {
display: block;
width: ~"calc(50% - 40px)";
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
display: block;
width: ~"calc(50% - 40px)";
}
@media only screen and (min-width: 992px) and (max-width: 1024px) {
display: block;
width: ~"calc(33.3333333% - 50px/2)";
}
}
}
}
&[data-columns="2"] {
.post,.product,.project {
@media only screen and (min-width: 1025px) {
width: 50%;
}
&:nth-of-type(n) {
clear: none;
}
&:nth-of-type(2n+1) {
clear: both;
}
}
+ .navigation {
&.pager-numeric .page-numbers.next {
@media only screen and (min-width: 1025px) {
display: block;
width: ~"calc(50% - 40px)";
}
}
}
}
&[data-columns="3"] {
.post,.product,.project {
@media only screen and (min-width: 1025px) {
width: 33.3333333%;
}
&:nth-of-type(n) {
clear: none;
}
&:nth-of-type(3n+1) {
clear: both;
}
}
+ .navigation {
&.pager-numeric .page-numbers.next {
@media only screen and (min-width: 1025px) {
display: block;
width: ~"calc(33.3333333% - 40px)";
}
}
}
}
&[data-columns="4"] {
.post,.product,.project {
@media only screen and (min-width: 1025px) {
width: 25%;
}
&:nth-of-type(n) {
clear: none;
}
&:nth-of-type(4n+1) {
clear: both;
}
}
+ .navigation {
&.pager-numeric .page-numbers.next {
@media only screen and (min-width: 1025px) {
display: block;
width: ~"calc(25% - 40px)";
}
}
}
}
&[data-columns="5"] {
.post,.product,.project {
@media only screen and (min-width: 1025px) {
width: 20%;
}
&:nth-of-type(n) {
clear: none;
}
&:nth-of-type(5n+1) {
clear: both;
}
}
+ .navigation {
&.pager-numeric .page-numbers.next {
@media only screen and (min-width: 1025px) {
display: block;
width: ~"calc(20% - 40px)";
}
}
}
}
}
aside {
float: left;
&[data-width="1"],
&[data-width="2"],
&[data-width="3"],
&[data-width="4"],
&[data-width="5"],
&[data-width="6"],
&[data-width="7"],
&[data-width="8"],
&[data-width="9"],
&[data-width="10"],
&[data-width="11"],
&[data-width="12"] {
width: 100%;
&:last-child {
margin-bottom: 0;
}
}
&[data-width="1"] {
@media only screen and (min-width: 1024px) {
width: 8.33333333%;
margin-bottom: 0;
}
}
&[data-width="2"] {
@media only screen and (min-width: 1024px) {
width: 16.6666666%;
margin-bottom: 0;
}
}
&[data-width="3"] {
@media only screen and (min-width: 1024px) {
width: 25%;
margin-bottom: 0;
}
}
&[data-width="4"] {
@media only screen and (min-width: 1024px) {
width: 33.3333333%;
margin-bottom: 0;
}
}
&[data-width="5"] {
@media only screen and (min-width: 1024px) {
width: 41.6666666%;
margin-bottom: 0;
}
}
&[data-width="6"] {
@media only screen and (min-width: 1024px) {
width: 50%;
margin-bottom: 0;
}
}
&[data-width="7"] {
@media only screen and (min-width: 1024px) {
width: 58.3333333%;
margin-bottom: 0;
}
}
&[data-width="8"] {
@media only screen and (min-width: 1024px) {
width: 66.6666666%;
margin-bottom: 0;
}
}
&[data-width="9"] {
@media only screen and (min-width: 1024px) {
width: 75%;
margin-bottom: 0;
}
}
&[data-width="10"] {
@media only screen and (min-width: 1024px) {
width: 83.3333333%;
margin-bottom: 0;
}
}
&[data-width="11"] {
@media only screen and (min-width: 1024px) {
width: 91.6666666%;
margin-bottom: 0;
}
}
&[data-width="12"] {
@media only screen and (min-width: 1024px) {
width: 100%;
margin-bottom: 0;
}
}
}
.content {
&:after {
content:"";
display: table;
clear: both;
}
}
.single {
&:not([class*="sidebar-"]) {
.alignwide {
@media only screen and (min-width: 769px) {
margin-left: 0;
margin-right: 0;
position: relative;
left: -25%;
clear: both;
width: 150%;
max-width: 150%;
}
}
.alignfull {
@media only screen and (min-width: 769px) {
margin-left: 0;
margin-right: 0;
position: relative;
left: ~"calc(calc(-50vw + (200% / 2) - 50%))";
clear: both;
width: 100vw;
max-width: 100vw;
}
}
.alignleft {
@media only screen and (min-width: 1025px) {
margin-left: -25%;
margin-top: 5px;
}
}
.alignright {
@media only screen and (min-width: 1025px) {
margin-right: -25%;
margin-top: 5px;
}
}
}
}
/* ============================================================
3. HEADER
=============================================================*/
/* ============================================================
3.1. Topbar
=============================================================*/
.site-topbar {
z-index: 10;
position: relative;
font-size: 14px;
line-height: 18px;
color: #627792;
a {
font-weight: 500;
}
.site-topbar-inner {
align-items: center;
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 30px;
&:after {
display: none;
}
&.wrap {
width: 100%;
}
}
.menu-top {
display: none;
@media only screen and (min-width: 1025px) {
display: flex;
margin: 0;
padding: 0;
list-style: none;
gap: 40px;
li {
position: relative;
&.menu-item-has-children {
> a {
position: relative;
padding-right: 16px;
&:before {
content:"\ea7a";
font-family:"Nucleo";
font-size: 9px;
position: absolute;
top: 50%;
transform: translateY(-50%);
font-weight: normal;
letter-spacing: 0;
right: 0;
.transition(0.5s cubic-bezier(0.25, 0.8, 0.25, 1) 0s);
}
}
&:hover {
> a {
&:before {
transform: translateY(-50%) rotate(-180deg);
}
}
}
}
.sub-menu {
position: absolute;
margin: 0;
padding: 15px 30px 20px 30px;
min-width: 180px;
top: ~"calc(100% + 5px)";
left: -30px;
list-style: none;
visibility: hidden;
transform: translateY(10px);
.rounded(15px);
.opacity(0);
.transition;
&:after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 5px;
top: -5px;
}
li {
padding: 0;
margin: 0 0 5px 0;
&.menu-item-has-children {
> a {
padding-right: 25px;
&:before {
content:"\ea7a";
transform: translateY(-50%) rotate(-90deg);
}
}
}
a {
white-space: nowrap;
display: inline-block;
padding: 5px 0;
position: relative;
z-index: 1;
line-height: 1.5;
&:after {
content:"";
position: absolute;
left: 0;
bottom: 1px;
height: 1px;
background: @white;
width: 100%;
z-index: -1;
.transition;
}
}
&:hover {
> a {
&:after {
height: 5px;
}
}
}
.sub-menu {
left: ~"calc(100% + 35px)";
top: -15px;
&:after {
left: auto;
right: 100%;
height: auto;
top: 0;
bottom: 0;
width: 40px;
}
}
}
}
&:hover {
> .sub-menu {
visibility: visible;
transform: translateY(0);
.opacity(1);
}
}
}
> li {
&:before {
content: "";
position: absolute;
right: -20px;
height: 12px;
width: 1px;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0,0,0,.2);
}
&:last-child {
&:before {
display: none;
}
}
&:not([class*="current"]):not(:hover) {
> a {
color: inherit;
}
}
> a {
padding: 15px 0;
display: block;
font-weight: 700;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
}
}
}
}
.topbar-text {
padding: 15px 0;
flex-grow: 1;
display: flex;
align-items: center;
gap: 40px;
@media only screen and (max-width: 768px) {
justify-content: center;
}
@media only screen and (min-width: 1025px) and (max-width: 1280px) {
gap: 25px;
}
i {
font-size: 12px;
display: none;
margin-right: 20px;
position: relative;
&:extend(.transition);
&:after {
content: "";
position: absolute;
left: -14px;
right: -14px;
top: -7px;
bottom: -7px;
border: 1px solid rgba(0,0,0,.15);
z-index: -1;
&:extend(.transition);
.rounded(20px);
}
@media only screen and (min-width: 605px) {
display: inline-block;
}
}
a {
position: relative;
&:after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -3px;
height: 0;
border-bottom: 1px solid;
.opacity(0.2);
}
&:before {
content: "";
position: absolute;
width: 0;
right: 0;
bottom: -3px;
height: 0;
border-bottom: 1px solid;
&:extend(.transition);
}
&:hover:before {
width: 100%;
left: 0;
right: auto;
}
}
> span {
display: none;
@media only screen and (min-width: 769px) {
display: inline-block;
}
}
p {
margin: 0;
display: flex;
align-items: center;
gap: 4px;
@media only screen and (max-width: 480px) {
flex-direction: column;
}
span {
display: none;
@media only screen and (min-width: 415px) {
display: inline-block;
}
}
sup {
margin-left: 2px;
@media only screen and (max-width: 768px) {
display: none;
}
}
&:hover {
i:after {
border-color: transparent;
}
}
}
}
.social-icons {
display: none;
gap: 20px;
order: 1;
@media only screen and (min-width: 769px) {
display: flex;
}
a {
i {
font-size: 24px;
}
}
}
}
/* ============================================================
4. CONTENT
=============================================================*/
.site-content {
clear: both;
/* ============================================================
4.1. Content Header
=============================================================*/
.content-header {
position: relative;
display: flex;
flex-direction: column;
padding: 50px 0;
margin-bottom: 50px;
color: rgba(255,255,255,.7);
a:not(.button) {
color: @white;
}
@media only screen and (min-width: 769px) and (max-width: 1024px) {
padding-top: 80px;
}
@media only screen and (min-width: 1025px) {
padding: 80px 0;
margin-bottom: 80px;
}
&.content-header-full {
.wrap {
width: 100%;
}
}
&.content-header-featured {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
&:before {
content:"";
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
.opacity(.8);
}
}
.content-header-inner {
z-index: 4;
}
.post-meta-single {
margin: 40px 0 0 0;
padding: 0;
list-style: none;
display: flex;
align-items: center;
font-size: 15px;
line-height: 22px;
li {
margin-right: 30px;
@media only screen and (min-width: 605px) {
margin-right: 40px;
}
&:first-child {
margin-right: 15px;
flex-shrink: 0;
display: none;
@media only screen and (min-width: 605px) {
display: block;
}
}
}
.prefix {
display: block;
font-size: 13px;
a {
font-weight: normal;
color: inherit;
&:hover {
color: @white;
}
}
}
.avatar {
width: 50px;
height: 50px;
.rounded(50%);
}
a {
font-weight: 600;
&:hover {
color: @white;
}
}
strong {
font-weight: 600;
color: @white;
}
}
.project-client-info {
margin-bottom: 30px;
}
.post-categories {
margin-bottom: 10px;
a {
font-size: 12px;
letter-spacing: 1px;
line-height: 16px;
text-transform: uppercase;
margin-bottom: 25px;
font-weight: 700;
&:before {
content: ",";
margin: 0 3px 0 2px;
}
&:first-child {
&:before {
display: none;
}
}
}
}
.navigation {
padding: 0;
}
}
.breadcrumbs {
font-size: 14px;
line-height: 27px;
max-width: 30%;
.breadcrumbs-inner {
display: flex;
gap: 25px;
white-space: nowrap;
> span:last-child {
overflow: hidden;
text-overflow: ellipsis;
}
.separator {
.opacity(.4);
}
a {
display: inline-block;
position: relative;
&:after {
content: "";
position: absolute;
left: 0;
width: 100%;
bottom: 0;
height: 1px;
background: rgba(0,0,60,.15);
}
&:before {
content: "";
position: absolute;
left: 0;
width: 0;
bottom: 0;
height: 1px;
.transition;
}
&:hover {
&:before {
width: 100%;
}
}
}
}
.highlight {
&:after,&:before {
display: none;
}
}
}
.page-title-wrap {
position: relative;
&:empty {
display: none;
+ .breadcrumbs {
margin-top: -30px;
}
}
}
.page-title-inner {
margin: 0;
font-weight: 700;
line-height: 1.16667;
font-size: 30px;
word-break: break-word;
@media only screen and (min-width: 1025px) {
font-size: 70px;
line-height: 80px;
}
}
.subtitle {
line-height: 1.5;
margin-top: 15px;
font-size: 15px;
.ctaBox {
margin: 40px 0 0 0;
display: block;
padding: 0;
}
@media only screen and (min-width: 992px) {
font-size: 17px;
}
@media only screen and (min-width: 769px) {
width: 50%;
}
}
.content-header-left {
.page-title-wrap {
display: flex;
flex-direction: column;
.page-title {
flex-grow: 1;
}
@media only screen and (min-width: 769px) {
//width: 50%;
}
.subtitle {
width: 100%;
}
&:empty {
display: none;
}
}
.down-arrow {
@media only screen and (min-width: 769px) {
position: absolute;
z-index: 9;
right: 0;
bottom: 0;
}
}
.content-header-inner {
display: flex;
flex-direction: column-reverse;
gap: 15px;
@media only screen and (min-width: 769px) {
flex-direction: row;
align-items: flex-end;
gap: 60px;
justify-content: space-between;
}
&:after {
display: none;
}
}
}
.content-header-center {
text-align: center;
.content-header-inner {
display: flex;
flex-direction: column-reverse;
}
.page-title-inner {
@media only screen and (min-width: 769px) {
width: 80%;
margin-left: auto;
margin-right: auto;
}
}
.breadcrumbs {
margin: 0 auto 15px;
.breadcrumbs-inner {
justify-content: center;
}
}
.subtitle {
margin-left: auto;
margin-right: auto;
}
.down-arrow a {
margin: 30px auto 0;
position: relative;
}
.meta-data {
justify-content: center;
}
}
.content-header-right {
.page-title-wrap {
display: flex;
flex-direction: column;
.page-title {
flex-grow: 1;
}
@media only screen and (min-width: 769px) {
width: 50%;
}
.subtitle {
width: 100%;
@media only screen and (min-width: 769px) {
margin-bottom: 30px;
}
}
}
.down-arrow {
@media only screen and (min-width: 769px) {
position: absolute;
z-index: 9;
right: 0;
bottom: 0;
}
}
.content-header-inner {
display: flex;
flex-direction: column;
gap: 40px;
@media only screen and (min-width: 769px) {
flex-direction: row-reverse;
gap: 80px;
justify-content: space-between;
}
&:after {
display: none;
}
}
}
/* ============================================================
4.2. Content Body/Gutenberg
=============================================================*/
span[id*="more-"] {
margin: 30px 0;
display: inline-block;
}
.post-password-form {
position: relative;
p:last-child {
display: flex;
gap: 10px;
align-items: flex-end;
}
label {
display: flex;
flex-direction: column;
gap: 10px;
font-size: 13px;
width: 100%;
}
input[type="password"]:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]) {
padding: 15px 20px;
line-height: 18px;
}
}
.wp-block-spacer {
margin-bottom: 0;
}
.wp-block-button {
margin-bottom: 30px;
&.is-style-squared {
.wp-block-button__link {
.rounded(0);
}
}
&.is-style-outline {
.wp-block-button__link {
line-height: 14px;
}
}
}
.wp-block-button__link {
padding: 15px 40px;
font-size: 15px;
font-weight: 500;
line-height: 18px;
background-image: none;
}
.wp-block-preformatted,.wp-block-code,.wp-block-verse {
font-size: 12px;
line-height: 20px;
}
.wp-block-group {
&.has-background {
padding: 5%;
.rounded(15px);
}
}
.wp-block-table {
&.is-style-stripes {
table {
border: none;
tr {
td,th {
border: none;
}
}
}
.has-fixed-layout {
border: none;
}
}
&.is-style-regular {
tr {
&:hover {
background: rgba(0,0,0,.06);
}
}
}
tr {
background: transparent;
td,th {
padding: 10px 30px;
border: none;
border: 1px solid rgba(0,0,60,.1);
}
}
&:not(.is-style-stripes) {
tr:hover {
background: rgba(0,0,60,.06);
}
}
}
.wp-block-cover,
.wp-block-cover-image,
.wp-block-video,
.wp-block-audio,
.wp-block-embed,
.wp-block-pullquote {
&.alignleft {
@media only screen and (min-width: 769px) {
margin-right: 40px;
}
}
&.alignright {
@media only screen and (min-width: 769px) {
margin-left: 40px;
}
}
}
.wp-block-pullquote {
&.alignleft,&.alignright {
@media only screen and (max-width: 768px) {
width: 100%;
max-width: 100%;
margin: 30px 0;
}
}
}
.wp-block-cover {
.wp-block-cover-text {
color: @white;
}
}
.has-drop-cap {
&:not(:focus) {
&::first-letter {
margin: 10px 20px 10px 0;
font-size: 3.45rem;
font-weight: 300;
}
}
}
.has-small-font-size {
font-size: 14px;
line-height: 1.5rem;
}
.has-medium-font-size {
line-height: 1.5;
font-size: 1.125rem;
}
.has-large-font-size {
line-height: 1.5;
font-size: 1.25rem;
}
.has-larger-font-size {
line-height: 1.3;
}
.has-huge-font-size,[style="font-size:46px"] {
line-height: 1.25;
}
blockquote {
&.is-style-large {
padding: 40px 0 0 0;
margin: 30px 0 45px 0;
border: none;
text-align: center;
background: none;
.rounded(0);
p {
line-height: 1.5;
font-style: normal;
font-size: 1.5rem;
}
cite {
text-align: inherit;
font-size: 15px;
position: relative;
&:before {
content:"";
position: absolute;
border-top: 1px solid;
width: 50px;
top: 0;
left: 50%;
transform: translateX(-50%);
.opacity(.3);
}
}
&:not(.is-style-plain) cite {
text-align: inherit;
font-size: 16px;
}
&:after,&:before {
left: ~"calc(50% - 10px)";
transform: translateX(-50%);
}
&:after {
left: ~"calc(50% + 10px)";
}
}
p + cite {
margin-top: -10px;
margin-bottom: 6px;
display: block;
}
}
.wp-block-pullquote {
blockquote:after,blockquote:before {
display: none;
}
&:not(.is-style-solid-color) {
border-top: 3px solid;
border-bottom: 3px solid;
padding: 30px 12%;
&.alignleft,&.alignright {
padding-left: 0;
padding-right: 0;
border-top-width: 1px;
border-bottom-width: 1px;
padding: 25px 0;
p {
font-size: 17px;
line-height: 160%;
}
}
blockquote {
margin: 0;
padding: 0;
border: none;
background: none;
.rounded(0);
}
}
&.is-style-solid-color {
padding: 0;
blockquote {
padding: 30px 12%;
margin: 0;
max-width: 100%;
border: none;
text-align: center;
background: none;
.rounded(0);
}
}
p {
font-size: 2.25rem;
line-height: 1.2;
}
cite {
margin-top: 15px;
}
}
p {
&.wp-block-subhead {
font-size: 1rem;
}
}
.wp-block-image {
margin: 40px 0;
figcaption {
margin: 15px 0;
}
.alignleft {
@media only screen and (min-width: 769px) {
margin-right: 30px;
}
}
.alignright {
@media only screen and (min-width: 769px) {
margin-left: 30px;
}
}
&:after {
content: "";
display: table;
clear: both;
}
}
.wp-block-gallery {
.blocks-gallery-image,.blocks-gallery-item {
margin-bottom: 1em;
overflow: hidden;
}
.blocks-gallery-caption {
margin-bottom: 45px;
}
&.alignleft {
@media only screen and (min-width: 769px) {
margin-right: 30px;
}
}
&.alignright {
@media only screen and (min-width: 769px) {
margin-left: 30px;
}
}
&.rounded {
img {
.rounded(4px);
}
}
}
.is-grid {
&[class*="columns-"] {
width: 100%;
}
}
.wp-block-gallery,.wp-block-text-columns {
&[class*="columns-"] {
&:not(.alignfull):not(.alignwide) {
width: 100%;
}
}
}
.wp-block-columns {
margin-bottom: 30px;
.wp-block-column {
margin-bottom: 30px;
}
}
.wp-block-embed__wrapper {
margin-bottom: 10px;
}
hr,.wp-block-separator {
border: none;
height: 1px;
background: rgba(0,0,60,.12);
}
iframe {
width: 100%;
}
.wp-block-embed {
iframe {
max-width: 100%;
}
}
}
/* ============================================================
5. WIDGET
=============================================================*/
.widget {
font-size: 15px;
line-height: 24px;
&.widget_media_image {
img[src$=".svg"] {
width: auto;
}
}
.widget-title,.wp-block-group h2 {
position: relative;
margin: 0 0 20px 0;
font-size: 12px;
line-height: 1.25;
font-weight: bold;
color: inherit;
text-transform: uppercase;
letter-spacing: 1px;
opacity: .7;
a {
color: inherit;
}
}
ul {
margin: 0;
li {
.children,
.sub-menu {
margin: 10px 0 10px 15px;
}
&.btn > a {
background-color: transparent;
}
&.has-badge a {
position: relative;
&:before {
content: "";
position: absolute;
right: -16px;
width: 8px;
height: 8px;
margin-top: 1px/2;
top: 50%;
transform: translateY(-50%);
.rounded(50%);
}
}
}
}
select[name="monster-widget-just-testing"] {
option {
width: 270px;
}
}
}
/* ============================================================
5.1 Archives/Categories
=============================================================*/
.widget,[class*="wp-block-"] {
position: relative;
margin-bottom: 60px;
z-index: 1;
&:last-child {
margin-bottom: 0;
}
select {
width: 100%;
}
ul,&.wp-block-archives {
padding: 0;
margin-top: 0;
li {
margin-bottom: 10px;
list-style: none;
&:last-child {
margin-bottom: 0;
}
> a {
position: relative;
display: inline-block;
line-height: 26px;
font-weight: 600;
&:after {
content: "";
position: absolute;
left: 0;
width: 100%;
bottom: 0;
height: 1px;
background: rgba(0,0,60,.15);
}
&:before {
content: "";
position: absolute;
left: 0;
width: 0;
bottom: 0;
height: 1px;
.transition;
}
&:hover {
&:before {
width: 100%;
}
}
}
}
}
}
.widget_archive,
.widget_categories,
.wp-block-archives-dropdown,
.wp-block-archives {
label {
overflow: visible;
clip: inherit;
clip-path: inherit;
position: absolute;
z-index: -1;
top: auto;
bottom: 0;
right: 0;
width: 50px;
height: 50px;
margin: 0;
text-indent: -9999px;
&:before {
text-indent:0;
content: "\ea7a";
font-family: "Nucleo";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
font-size: 14px;
line-height: 1;
font-weight: normal;
}
}
}
.wp-block-categories-dropdown {
&:before {
content: "\ea7a";
font-family:"Nucleo";
font-weight: normal;
font-size: 14px;
position: absolute;
right: 20px;
text-align: center;
top: 50%;
z-index: -1;
transform: translateY(-50%);
}
}
/* ============================================================
5.2. Calendar
=============================================================*/
.calendar_wrap {
position: relative;
background-color: rgba(0,0,60,.06);
padding: 10px;
.rounded(15px);
}
table#wp-calendar {
font-size: 13px;
line-height: 25px;
border-collapse: separate;
border: none;
caption {
line-height: 23px;
padding: 3px 0 10px 0;
}
thead {
th {
padding: 0;
text-align: center;
background: none;
border: none;
font-size: 11px;
border-bottom: 1px solid rgba(0,0,60,.12);
border-top: 1px solid rgba(0,0,60,.12);
}
}
tbody {
tr {
td {
padding: 7px 5px 6px 5px;
border: none;
position: relative;
text-align: center;
a {
background: none;
display: block;
color: @white;
&:before {
content:"";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 26px;
height: 26px;
z-index: -1;
margin-top: 0;
.rounded(50%);
&:extend(.transition);
}
}
}
}
}
#today {
position: relative;
font-weight: 800;
a {
color: @white;
&:before {
border-color: transparent;
}
}
}
}
.wp-calendar-nav {
position: absolute;
left: 0;
right: 0;
top: 0;
height: 30px;
span[class*="wp-calendar-nav"] {
a {
font-weight: normal;
text-indent: -9999px;
position: absolute;
width: 28px;
height: 28px;
left: 10px;
top: 10px;
.rounded(10px);
&:before {
content:"\ea7a";
text-indent: 0;
font-family: "Nucleo";
font-size: 12px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%) rotate(90deg);
}
&:hover {
background: @white;
.box-shadow3;
}
}
}
span.wp-calendar-nav-next {
a {
left: auto;
right: 10px;
&:before {
transform: translate(-50%,-50%) rotate(-90deg);
}
}
}
}
.wp-block-calendar {
position: relative;
background-color: rgba(0,0,60,.06);
padding: 10px;
.rounded(15px);
.wp-calendar-table a {
text-decoration: none;
}
}
/* ============================================================
5.3. Recent Comments
=============================================================*/
.widget_recent_comments {
ul li {
margin-bottom: 15px;
}
.comment-author-link {
a {
color: inherit;
}
}
.highlight {
&:after,&:before {
display: none;
}
}
}
.wp-block-latest-comments {
padding: 0;
margin-top: 0;
[class*="wp-block-"] {
margin-bottom: 15px;
line-height: 160%;
}
[class*="comment-author"] {
color: inherit;
}
[class*="comment-excerpt"] {
p {
margin: 0;
font-size: 100%;
}
}
[class*="comment-meta"] {
margin-bottom: 0;
p {
margin: 0;
font-size: 100%;
}
}
.highlight {
&:after,&:before {
display: none;
}
}
time {
.opacity(.7);
margin: 5px 0 10px 0;
}
}
/* ============================================================
5.4. Recent Posts
=============================================================*/
.widget_recent_entries {
ul {
line-height: 1.4;
li {
margin-bottom: 20px;
}
}
.post-date {
margin-top: 10px;
font-size: 12px;
display: block;
font-weight: inherit;
}
.highlight {
&:after,&:before {
display: none;
}
}
}
.wp-block-latest-posts,.wp-block-latest-posts__list {
margin-top: 0;
padding: 0;
li {
margin-bottom: 15px;
a {
line-height: 1.4;
}
&:last-child {
margin-bottom: 0;
}
time {
font-size: 12px;
color: inherit;
.opacity(.7);
margin-top: 5px;
}
}
.highlight {
&:after,&:before {
display: none;
}
}
}
.wp-block-latest-posts.wp-block-latest-posts__list li {
margin-bottom: 15px;
}
/* ============================================================
5.5. RSS
=============================================================*/
.widget_rss {
.widget-title {
.rss-widget-icon {
display: none;
}
.rsswidget {
font-weight: 700;
&:first-child {
display: none;
}
}
}
.rsswidget {
}
.rssSummary {
font-size: 13px;
line-height: 160%;
}
.rss-date {
display: block;
font-size: 12px;
margin: 5px 0 10px 0;
.opacity(.7);
}
ul li {
margin-bottom: 40px;
}
cite {
display: inline-block;
padding-bottom: 2px;
font-weight: 500;
text-transform: uppercase;
}
}
.wp-block-rss {
margin-top: 0;
padding: 0;
list-style: none;
li {
margin-bottom: 15px;
}
}
/* ============================================================
5.6. Search
=============================================================*/
.widget_search {
.search-form {
position: relative;
label {
.screen-reader-text{
overflow: visible;
clip: inherit;
clip-path: inherit;
position: absolute;
z-index: 1;
top: 50%;
right: 0;
transform: translateY(-50%);
width: 50px;
height: 50px;
margin: 0;
text-indent: -9999px;
&:before {
text-indent:0;
content:"\ea55";
font-family: "Nucleo";
font-size: 16px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
}
.search-field {
width: 100%;
}
}
.search-submit {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: 2;
height: 50px;
width: 50px;
border: none;
padding: 0;
.opacity(0);
}
}
}
.wp-block-search {
label.wp-block-search__label {
overflow: visible;
clip: inherit;
clip-path: inherit;
position: absolute;
z-index: 1;
top: 50%;
right: 0;
transform: translateY(-50%);
width: 50px;
height: 50px;
margin: 0;
text-indent: -9999px;
&:before {
text-indent:0;
content:"\ea55";
font-family: "Nucleo";
font-size: 16px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
}
input {
margin: 0;
}
button[type="submit"].wp-block-search__button {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: 2;
width: 50px;
height: 50px;
margin: 0;
padding: 0;
border: none;
.opacity(0);
}
}
/* ============================================================
5.7. Tag
=============================================================*/
.tagcloud,.wp-block-tag-cloud {
display: flex;
flex-wrap: wrap;
gap: 5px;
a {
font-size: 14px !important;
line-height: 19px;
padding: 8px 15px;
color: inherit;
.rounded(10px);
&:before {
content: "#";
margin-right: 2px;
.opacity(.5);
}
&.gallery {
margin: 0;
}
}
}
/* ============================================================
5.8. Menu
=============================================================*/
.widget_nav_menu {
ul.menu {
margin: 0;
padding: 0;
list-style: none;
}
sub,sup {
.opacity(.7);
}
&.menu-style1 {
display: flex;
@media only screen and (min-width: 481px){
}
@media only screen and (min-width: 992px){
justify-content: space-between;
}
> div[class*="menu-"] {
flex-grow: 1;
white-space: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
&::-webkit-scrollbar {
display: none;
}
}
.menu {
display: flex;
justify-content: space-between;
gap: 30px;
&:before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
border-bottom: 1px solid;
.opacity(.2);
}
@media only screen and (min-width: 992px) and (max-width: 1024px) {
justify-content: space-between;
}
li {
margin: 0;
a {
padding: 0 0 40px 0;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 12px;
line-height: 15px;
&:after {
display: none;
}
}
}
}
}
}
/* ============================================================
5.9. Other
=============================================================*/
.widget_media_image {
figure {
margin: 0;
}
.wp-caption-text {
margin: 20px 0 0 0;
line-height: 1.6;
}
}
.widget_text {
.wp-caption {
margin-bottom: 20px;
img {
margin-bottom: 10px;
}
}
img {
margin: 15px 0 20px 0;
}
.textwidget {
p + .wp-caption + p + form {
position: relative;
&:after {
text-indent:0;
content: "\ea7a";
font-family: "Nucleo";
position: absolute;
right: 0;
width: 50px;
text-align: center;
line-height: 1;
top: 50%;
transform: translateY(-50%);
z-index: -1;
font-weight: normal;
font-size: 14px;
}
}
}
}
.widget ul li a.wp-block-latest-posts__post-title,
.widget ol li a.wp-block-latest-comments__comment-link,
.widget ul#recentcomments li > a,
.widget.widget_recent_entries ul li a,
.widget.widget_recent_comments ul li > a,
.widget.widget_rss ul li a.rsswidget,
.wp-block-latest-comments__comment-link,
.wp-block-latest-posts__post-title {
font-weight: 600;
display: inline;
padding-bottom: 4px;
background-repeat: no-repeat;
background-size: 100% 100%;
background-image: linear-gradient(180deg, transparent 96%, rgba(0,0,60,.15) 0);
&:after,&:before {
display: none;
}
&:hover {
background-size: 0 100%;
}
}
/* ============================================================
6. FOOTER
=============================================================*/
.site-footer {
position: relative;
&:after {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
.opacity(.75);
@media only screen and (min-width: 1025px) {
display: none;
}
}
input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]), textarea, select {
border-color: rgba(255,255,255,.15);
background-color: rgba(255,255,255,.05);
color: @white;
&:focus {
//border-color: rgba(255,255,255,.35);
}
&::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: rgba(255,255,255,.35);
}
&::-moz-placeholder { /* Firefox 19+ */
color: rgba(255,255,255,.35);
}
&:-ms-input-placeholder { /* IE 10+ */
color: rgba(255,255,255,.35);
}
&:-moz-placeholder { /* Firefox 18- */
color: rgba(255,255,255,.35);
}
&:focus {
background: transparent;
}
}
.widget ul li a.wp-block-latest-posts__post-title,
.widget ol li a.wp-block-latest-comments__comment-link,
.widget ul#recentcomments li > a,
.widget.widget_recent_entries ul li a,
.widget.widget_recent_comments ul li > a,
.widget.widget_rss ul li a.rsswidget,
.wp-block-latest-comments__comment-link,
.wp-block-latest-posts__post-title {
background-image: linear-gradient(180deg, transparent 96%, rgba(255,255,255,.2) 0);
}
.calendar_wrap {
background-color: rgba(255,255,255,.1);
}
table#wp-calendar {
thead th {
color: @white;
border-color: rgba(255,255,255,.1);
}
}
.tagcloud a {
background-color: rgba(255,255,255,.1);
}
.widget ul li > a:after, [class*="wp-block-"] ul li > a:after,
.widget.wp-block-archives li > a:after, [class*="wp-block-"].wp-block-archives li > a:after {
background-color: rgba(255,255,255,.2);
}
.widget .widget-title, .widget .wp-block-group h2 {
.opacity(1);
}
/* ============================================================
6.1. Content Bottom
=============================================================*/
.content-bottom-widgets {
padding-bottom: 0.5px;
&.content-bottom-full {
.wrap {
width: 100%;
}
}
.content-bottom-aside-wrap {
margin: 0 -15px;
&:after {
clear: both;
content: "";
display: table;
}
aside {
padding: 80px 15px 0 15px;
&:empty {
padding-top: 1px/2;
padding-bottom: 0;
}
@media only screen and (max-width: 1024px) {
padding-top: 50px;
padding-bottom: 50px;
&:not(:first-child) {
padding-top: 0;
}
}
}
}
}
/* ============================================================
6.2. Footer Widget
=============================================================*/
.footer-widgets {
position: relative;
z-index: 1;
overflow: hidden;
&.footer-widgets-full {
.wrap {
width: 100%;
}
}
.footer-aside-wrap {
margin: 0 -15px;
&:after {
clear: both;
content: "";
display: table;
}
aside {
padding: 80px 15px;
&:empty {
padding-top: 1px/2;
padding-bottom: 0;
}
@media only screen and (max-width: 1024px) {
padding-top: 0;
padding-bottom: 50px;
&:not(:first-child) {
padding-top: 0;
}
}
}
}
}
/* ============================================================
6.3. Copyright
=============================================================*/
.footer-copyright {
font-size: 14px;
line-height: 1.625;
position: relative;
background-color: @white;
z-index: 2;
a {
font-weight: 700;
}
&.footer-copyright-full {
.wrap {
width: 100%;
max-width: 100%;
}
}
.copyright-bar {
padding: 40px 0;
align-items: center;
display: flex;
gap: 30px;
flex-direction: column-reverse;
text-align: center;
}
.copyright-content {
flex-grow: 1;
}
.go-to-top {
display: none;
@media only screen and (min-width: 1025px) {
//display: block;
width: 45px;
height: 45px;
a {
display: block;
position: relative;
width: 45px;
height: 45px;
.rounded(50%);
&:before {
content: "\ea73";
font-family: "Nucleo";
font-size: 16px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%) rotate(180deg);
font-weight: normal;
line-height: 1;
}
&:hover {
color: @white;
}
span {
display: none;
}
}
}
}
}
}
.footer-widgets,.content-bottom-widgets {
color: rgba(255,255,255,.7);
h3,h4,h5,h6 {
a {
color: inherit;
}
}
a {
color: @white;
}
}
/* ============================================================
7. OTHER PAGES
=============================================================*/
/* ============================================================
7.1. Comments
=============================================================*/
.comments-area {
clear: both;
position: relative;
font-size: 15px;
padding-top: 70px;
.comments-title {
margin-bottom: 5px;
position: relative;
z-index: 4;
}
.comment-list {
position: relative;
z-index: 4;
padding: 0 0 50px 0;
margin: 0;
list-style: none;
.trackback,.pingback {
padding: 20px 0;
border-bottom: 1px solid rgba(0,0,60,.12);
&:first-child {
margin-top: 20px;
}
a {
font-weight: 700;
}
.edit-link a {
font-size: 13px;
font-weight: normal;
.opacity(.5);
&:hover {
.opacity(1);
}
}
}
> .comment {
border-bottom: 1px solid rgba(0,0,60,.1);
padding: 30px 0;
&:last-child {
border: none;
padding-bottom: 0;
}
.comment-meta {
margin-bottom: 20px;
font-size: 14px;
.comment-author {
img {
width: 32px;
float: left;
margin-right: 10px;
.rounded(50%);
@media only screen and (min-width: 769px) {
width: 45px;
margin-right: 15px;
}
}
}
.comment-metadata {
line-height: 1.5;
font-size: 12px;
> a {
color: inherit;
line-height: 1.2;
.opacity(.75);
}
.comment-edit-link {
border-left: 1px solid rgba(0,0,60,.12);
margin-left: 6px;
padding-left: 8px;
.opacity(0);
}
}
.says {
display: none;
}
}
.comment-content {
margin-left: 42px;
@media only screen and (min-width: 769px) {
margin-left: 60px;
}
}
.reply {
margin: 15px 0 0 42px;
@media only screen and (min-width: 769px) {
margin-left: 60px;
}
a {
display: inline-block;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
&:not(:hover) {
color: inherit;
.opacity(.5);
}
&:before {
content: "\ea8a";
vertical-align: middle;
position: relative;
font-size: 12px;
top: -1px;
margin-right: 6px;
font-weight: normal;
font-family:"Nucleo";
}
}
}
.comment-body:hover > .comment-meta .comment-metadata .comment-edit-link {
.opacity(1);
}
}
.children {
margin: 30px 0 0;
padding: 0 0 0 42px;
list-style: none;
@media only screen and (min-width: 769px) {
padding-left: 60px;
}
li {
padding: 30px 0;
border-top: 1px solid rgba(0,0,60,.12);
}
> li:last-child {
padding-bottom: 0;
}
}
#respond {
margin: 0 0 0 42px;
padding: 40px 0;
border-top: none;
@media only screen and (min-width: 769px) {
margin-left: 60px;
}
.comment-reply-title {
small {
margin-left: 12px;
font-size: 100%;
a {
position: static;
border-left: 1px solid rgba(0,0,60,.3);
display: inline-block;
line-height: 1;
padding-left: 10px;
font-weight: normal;
font-size: 14px;
text-transform: none;
letter-spacing: 0;
&:after,&:before {
display: none;
}
}
}
}
}
}
.no-comments {
text-align: center;
}
#respond {
position: relative;
z-index: 3;
border-top: 1px solid rgba(0,0,60,.12);
padding-top: 50px;
.comment-reply-title {
margin-bottom: 10px;
}
.comment-form {
margin: 0 -15px;
.comment-notes,
.logged-in-as {
padding: 0 15px;
margin-bottom: 25px;
font-size: 13px;
line-height: 1.4;
a {
color: inherit;
}
}
.comment-form-author,
.comment-form-email,
.comment-form-url {
display: flex;
float: left;
align-items: baseline;
width: ~"calc(100% - 30px)";
margin: 0 15px 30px 15px;
padding: 0 20px;
background: rgba(0,0,60,.08);
.rounded(15px);
@media only screen and (min-width: 769px) {
width: ~"calc(33.33333333% - 30px)";
}
label {
display: flex;
align-items: center;
position: relative;
font-size: 13px;
.opacity(.5);
&:extend(.transition);
.required {
margin-left: 5px;
}
}
input {
padding: 15px 0 15px 8px;
flex-grow: 1;
height: auto;
width: 0;
border-color: transparent;
background: transparent;
.rounded(0);
.box-shadow(none);
}
&:hover {
label {
.opacity(1);
}
}
}
.comment-form-comment {
padding: 0 20px;
margin: 0 15px 30px 15px;
background: rgba(0,0,60,.08);
.rounded(16px);
textarea {
padding: 0;
height: 60px;
background: transparent;
resize: inherit;
width: 100%;
border-color: transparent;
.rounded(0);
.box-shadow(none);
}
label {
display: inline-block;
width: 100%;
padding: 0;
position: relative;
height: 30px;
line-height: 30px;
font-size: 13px;
margin-top: 10px;
.opacity(.5);
&:extend(.transition);
}
&:hover {
label {
.opacity(1);
}
}
}
.comment-form-cookies-consent {
clear: both;
padding: 0 15px;
gap: 15px;
display: flex;
align-items: center;
margin: 30px 0;
font-size: 11px;
line-height: 1.4;
input[type="checkbox"] {
position: relative;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 1px solid rgba(0,0,60,.2);
cursor: pointer;
height: 21px;
width: 21px;
flex-shrink: 0;
.rounded(6px);
&:after {
content: "\ea1c";
font-family:"Nucleo";
position: absolute;
font-size: 18px;
line-height: 1;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
display: none;
}
&:checked {
background-color: @white;
.opacity(1);
.box-shadow3;
&:after {
display: block;
}
}
}
}
.form-submit {
margin: 30px 0 0;
padding: 0 15px;
input {
width: 100%;
@media only screen and (min-width: 541px) {
width: ~"calc(33.33333333% - 20px)";
}
}
}
}
}
}
/* ============================================================
7.2. Page Navigation
=============================================================*/
.navigation,.pp-posts-pagination {
clear: both;
padding-top: 60px;
font-size: 15px;
&:after {
content: "";
display: table;
clear: both;
}
.pagination {
position: relative;
&:after {
content: "";
display: table;
clear: both;
}
}
.page-numbers {
width: 50px;
height: 50px;
line-height: 48px;
text-align: center;
float: left;
margin-right: 10px;
font-size: 13px;
border: 1px solid rgba(0,0,60,.12);
color: inherit;
.rounded(50%);
&:hover {
border: 1px solid rgba(0,0,60,.3);
}
&.next {
width: auto;
min-width: 270px;
float: right;
margin: 0;
border: none;
line-height: 50px;
display: none;
font-weight: 600;
font-size: 15px ;
position: relative;
z-index: 2;
.box-shadow3;
.rounded(15px);
&:after {
content: "";
position: absolute;
z-index: -1;
right: 0;
width: 0;
top: 0;
bottom: 0;
background-color: rgba(0,0,0,.05);
.rounded(15px);
.transition(0.5s cubic-bezier(0.25, 0.8, 0.25, 1) 0s);
}
&:hover:after {
right: auto;
left: 0;
width: 100%;
}
}
&.prev {
display: none;
}
&.dots {
background: none;
border: none;
width: 30px;
.opacity(.7);
&:hover {
background: none;
}
}
&.current {
border: none;
.box-shadow3;
line-height: 50px;
}
}
&.comment-navigation {
text-align: center;
margin-bottom: 60px;
.screen-reader-text {
display: none;
}
> div {
display: inline-block;
a {
display: block;
border: 1px solid rgba(0,0,0,0.1);
background: @white;
padding: 7px 20px 5px 20px;
color: inherit;
margin: 0 5px 5px 5px;
.box-shadow(0 2px 4px rgba(0,0,0,0.06));
.rounded(50px);
&:hover {
border: 1px solid rgba(0,0,0,0.2);
.box-shadow(0 2px 4px rgba(0,0,0,0.1));
}
}
&.nav-previous {
a {
margin-left: 0;
}
}
&.nav-next {
a {
margin-right: 0;
}
}
}
}
.nav-links {
display: none;
margin: 0;
padding: 0;
list-style: none;
@media only screen and (min-width: 1025px) {
display: flex;
gap: 10px;
position: absolute;
right: 0;
bottom: 0;
}
li {
a {
width: 50px;
height: 50px;
display: block;
border: 1px solid rgba(255,255,255,.15);
position: relative;
.rounded(50%);
&:before {
content: "\ea74";
font-family: "Nucleo";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-size: 16px;
line-height: 1;
}
span {
display: none;
}
}
&.disabled {
display: none;
}
&.prev-post {
a:before {
transform: translate(-50%,-50%) rotate(180deg);
}
}
}
}
}
.page-links {
display: flex;
align-items: center;
gap: 6px;
clear: both;
font-size: 13px;
position: relative;
z-index: 2;
.page-links-title {
line-height: 32px;
margin-right: 3px;
}
.post-page-numbers {
color: inherit;
width: 32px;
height: 32px;
text-align: center;
font-size: 11px;
line-height: 30px;
border: 1px solid rgba(0,0,60, 0.12);
.rounded(50%);
&.current {
border: none;
line-height: 32px;
}
&:hover {
border-color: rgba(0,0,60, 0.3);
}
}
}
/* ============================================================
7.3. Page Search
=============================================================*/
.search-results,.search-no-results,.error404 {
.main-content {
.search-form {
position: relative;
margin-bottom: 30px;
@media only screen and (min-width: 769px) {
margin-bottom: 80px;
}
label {
.screen-reader-text{
overflow: visible;
clip: inherit;
clip-path: inherit;
position: absolute;
z-index: 1;
top: 50%;
right: 0;
transform: translateY(-50%);
width: 50px;
height: 50px;
margin: 0;
text-indent: -9999px;
&:before {
text-indent:0;
content:"\ea55";
font-family: "Nucleo";
font-size: 16px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
}
.search-field {
width: 100%;
}
}
.search-submit {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: 2;
padding: 0;
width: 50px;
height: 50px;
text-indent: -9999px;
.opacity(0);
}
@media only screen and (min-width: 769px) {
label .search-field {
padding: 25px 30px;
font-size: 24px;
}
label .screen-reader-text {
width: 82px;
height: 82px;
&:before {
font-size: 24px;
}
}
.search-submit {
width: 82px;
height: 82px;
}
}
}
.search-results {
@media only screen and (min-width: 769px) {
padding: 20px 80px;
background: @white;
.rounded(15px);
.box-shadow2;
}
.post {
border-bottom: 1px solid rgba(2,6,38,.1);
&:last-child {
border-bottom: none;
}
a {
display: flex;
padding: 25px 65px 25px 0;
gap: 20px;
position: relative;
align-items: center;
}
.post-index {
width: 50px;
height: 50px;
line-height: 48px;
text-align: center;
position: absolute;
right: 0;
top: 50%;
font-size: 24px;
transform: translateY(-50%);
.rounded(50%);
}
.post-title {
span {
display: block;
padding-bottom: 2px;
}
.post-title-inner {
position: relative;
top: 4px;
line-height: 1.3;
font-weight: 600;
font-size: 18px;
&:extend(.transition);
}
}
.post-date {
font-size: 13px;
position: relative;
top: 5px;
.opacity(.7);
}
}
}
}
.navigation .page-numbers.next {
display: block;
}
}
.search-no-results,.error404 {
.main-content .search-form {
margin-bottom: 0;
}
.wp-block-tag-cloud a {
margin: 0 !important;
}
}
/* ============================================================
7.6. Page Author
=============================================================*/
.author {
.post-author-box {
border-bottom: 1px solid rgba(0,0,60,.12);
padding-bottom: 50px;
margin-bottom: 60px;
img {
@media only screen and (min-width: 1025px) {
position: absolute;
margin: 0;
top: -110px;
}
}
}
}
.post-author-box {
display: flex;
align-items: flex-start;
justify-content: center;
text-align: center;
img {
margin-right: 30px;
width: 55px;
.rounded(50%);
}
.author-description {
margin-top: 10px;
font-size: 14px;
}
.post-author-content {
font-size: 15px;
line-height: 1.5;
}
.author-data {
font-weight: 700;
}
}
/* ============================================================
7.5. Social
=============================================================*/
.social-icons {
display: flex;
align-items: center;
gap: 20px;
a {
display: flex;
align-items: center;
justify-content: center;
i {
font-size: 16px;
}
}
}
/* ============================================================
7.6. Gallery
=============================================================*/
.gallery {
margin: 0 -5px 20px -5px;
position: relative;
&:after {
clear: both;
content: "";
display: block;
}
.gallery-item {
float: left;
padding: 0 5px;
overflow: hidden;
position: relative;
margin: 0 0 10px 0;
.gallery-icon {
overflow: hidden;
}
&:hover {
.gallery-caption {
margin-bottom: 0;
}
}
}
&.gallery-columns-1 {
.gallery-item {
max-width: 100%;
}
&.gallery-size-medium,&.gallery-size-thumbnail {
.gallery-item:nth-of-type(1n+1) {
clear: left;
}
}
}
&.gallery-columns-2 {
.gallery-item {
max-width: 50%;
}
&.gallery-size-thumbnail {
.gallery-item:nth-of-type(2n+1) {
clear: left;
}
}
}
&.gallery-columns-3 {
.gallery-item {
max-width: 33.3333333%;
}
&.gallery-size-thumbnail {
.gallery-item:nth-of-type(3n+1) {
clear: left;
}
}
}
&.gallery-columns-4 {
.gallery-item {
max-width: 25%;
}
&.gallery-size-thumbnail {
.gallery-item:nth-of-type(4n+1) {
clear: left;
}
}
}
&.gallery-columns-5 {
.gallery-item {
max-width: 20%;
}
&.gallery-size-thumbnail {
.gallery-item:nth-of-type(5n+1) {
clear: left;
}
}
}
&.gallery-columns-6 {
.gallery-item {
max-width: 16.6666667%;
}
&.gallery-size-thumbnail {
.gallery-item:nth-of-type(6n+1) {
clear: left;
}
}
}
&.gallery-columns-7 {
.gallery-item {
max-width: 14.2857143%;
}
.gallery-caption {
display: none;
}
}
&.gallery-columns-8 {
.gallery-item {
max-width: 12.5%;
}
.gallery-caption {
display: none;
}
}
&.gallery-columns-9 {
.gallery-item {
max-width: 11.1111111%;
}
.gallery-caption {
display: none;
}
}
}
.gallery-caption {
color: @white;
font-size: 12px;
text-shadow: 0 2px 3px rgba(0,0,0,.5);
max-height: 100%;
margin: 0;
padding: 10px;
position: absolute;
bottom: 0;
left: 5px;
right: 5px;
margin-bottom: -100%;
line-height: 1.2;
background: rgba(0,0,0,.85);
&:extend(.transition);
}
.icons-wrap {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
@media only screen and (min-width: 1025px) {
justify-content: space-between;
}
li {
text-align: center;
padding: 25px 15px 20px;
background: @white;
width: ~"calc(33.333333% - 15px)";
&:extend(.transition);
.box-shadow3;
&:hover {
.box-shadow2;
}
@media only screen and (min-width: 769px) {
width: ~"calc(25% - 15px)";
}
@media only screen and (min-width: 1025px) {
width: ~"calc(12.5% - 15px)";
}
i {
font-size: 32px;
line-height: 1;
margin-bottom: 20px;
&:extend(.transition);
}
p {
font-size: 12px;
line-height: 1.2;
font-family: monospace, monospace;
.opacity(.7);
}
}
}
@keyframes mq {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
@keyframes mqrtl {
0% { transform: translateX(-100%); }
100% { transform: translateX(0); }
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes tada {
from {
transform: scale3d(1, 1, 1);
}
10%,
20% {
transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
}
30%,
50%,
70%,
90% {
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}
40%,
60%,
80% {
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}
to {
transform: scale3d(1, 1, 1);
text-shadow: 0 0 15px;
}
}
@keyframes down {
0% { transform: translateY(0); }
25% { transform: translateY(12px); opacity: 0.5; }
50% { transform: translateY(0); }
75% { transform: translateY(12px); opacity: 0.5; }
100% { transform: translateY(0); }
}
.delay-1 {
animation-delay:0s;
}
.delay-2 {
animation-delay:0.2s;
}
.delay-3 {
animation-delay:0.4s;
}
.delay-4 {
animation-delay:0.6s;
}
.delay-5 {
animation-delay:0.8s;
}
.delay-6 {
animation-delay:1s;
}
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
body {
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
}
Back to Directory
File Manager