.color-palette {
display: flex;
}
.color-palette .item {
width: 100%;
height: 1.2rem;
}
.color-palette .item:nth-child(1) {
background-color: rgb(69, 155, 171);
}
.color-palette .item:nth-child(2) {
background-color: rgb(192, 175, 139);
}
.color-palette .item:nth-child(3) {
background-color: #285962;
}
.color-palette .item:nth-child(4) {
background-color: rgb(192, 175, 139);
}
.color-palette .item:nth-child(5) {
background-color: #e4ddcd;
}
.color-palette .item:nth-child(6) {
background-color: #285962;
}
.color-palette .item:nth-child(7) {
background-color: #367a87;
}
.color-palette .item:nth-child(8) {
background-color: #d2c6ac;
}
.color-palette .item:nth-child(9) {
background-color: #19383e;
}
.color-palette .item:nth-child(10) {
background-color: #bdd7dc;
}
.color-palette .item:nth-child(11) {
background-color: #0f2125;
}
.color-palette .item:nth-child(12) {
background-color: #464036;
}
.color-palette .item:nth-child(13) {
background-color: #213a3f;
}
.color-palette .item:nth-child(14) {
background-color: #8c8066;
}
.color-palette .item:nth-child(15) {
background-color: #367a87;
}
.color-palette .item:nth-child(16) {
background-color: #d9d0be;
}
.color-palette .item:nth-child(17) {
background-color: #cfc3aa;
}
.color-palette .item:nth-child(18) {
background-color: #69604e;
}
.color-palette .item:nth-child(19) {
background-color: #2b565e;
}
.color-palette .item:nth-child(20) {
background-color: #35727d;
}
.color-palette .item:nth-child(21) {
background-color: #e2ddd2;
}
.color-palette .item:nth-child(22) {
background-color: #9bc6ce;
}
.color-palette .item:nth-child(23) {
background-color: #79b5c0;
} *, *::before, *::after {
box-sizing: border-box;
}
* {
margin: 0;
}
html, body {
height: 100%;
}
body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
input, button, textarea, select {
font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
* {
transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}
#root, #__next {
isolation: isolate;
}
.header ul, .header ol, .header li, .footer ul, .footer ol, .footer li, .pagination ul, .pagination ol, .pagination li {
list-style: none;
}
ul, ol {
padding: 0;
}
.post-content li {
position: relative;
padding-left: 2rem;
display: block;
margin-bottom: 2rem;
}
.post-content li:before {
position: absolute;
top: 0.3rem;
left: 0;
color: red;
display: block;
content: "*";
font-size: 120%;
}
.widget-area-home_content > .widget .wp-block-embed, .podcast-post .pearl-posts-inner, .wp-block-embed-spotify .wp-block-embed__wrapper, .home-services .pearl-posts-inner, .home-posts .pearl-post-inner, .type-page, .centered, .page-widgets, .pearl-archive, .pearl-single-post {
max-width: 1200px;
margin: 0 auto;
}
@media (max-width: 1200px) {
.widget-area-home_content > .widget .wp-block-embed, .podcast-post .pearl-posts-inner, .wp-block-embed-spotify .wp-block-embed__wrapper, .home-services .pearl-posts-inner, .home-posts .pearl-post-inner, .type-page, .centered, .page-widgets, .pearl-archive, .pearl-single-post {
padding: 0 2rem;
}
}
#page {
display: flex;
}
.spotlight .pearl-post strong, .spotlight .pearl-post .author, .spotlight .pearl-post blockquote, .spotlight .pearl-post .quote, .footer-links, .h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6 {
font-family: "Vollkorn", sans-serif;
font-weight: 500;
}
.spotlight .pearl-post strong a, .spotlight .pearl-post .author a, .spotlight .pearl-post blockquote a, .spotlight .pearl-post .quote a, .footer-links a, .h1 a, .h2 a, .h3 a, .h4 a, .h5 a, .h6 a,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
color: inherit;
}
.header .menu-item-type-custom a[href*=book], .header .menu-item-type-custom a[href*=contact], #content div.wpforms-container-full input[type=submit],
#content div.wpforms-container-full button[type=submit],
#content div.wpforms-container-full .wpforms-page-button, button, input[type=submit] {
font-weight: 600;
}
.header .menu-item-type-custom a[href*=book], .header .menu-item-type-custom a[href*=contact], #content div.wpforms-container-full input[type=submit],
#content div.wpforms-container-full button[type=submit],
#content div.wpforms-container-full .wpforms-page-button, button, input[type=submit] {
-webkit-appearance: none;
padding: 1rem 2rem;
}
#content div.wpforms-container-full input[type=submit],
#content div.wpforms-container-full button[type=submit],
#content div.wpforms-container-full .wpforms-page-button, button, input[type=submit] {
background-color: #367a87;
color: #f1f1f1;
border: 1px solid #367a87;
}
#content div.wpforms-container-full input[type=submit]:hover,
#content div.wpforms-container-full button[type=submit]:hover,
#content div.wpforms-container-full .wpforms-page-button:hover, button:hover, input[type=submit]:hover {
background-color: #285962;
color: #cfc3aa;
border-color: #285962;
}
.header .menu-item-type-custom a[href*=book], .header .menu-item-type-custom a[href*=contact] {
background-color: transparent;
color: #d9bf53;
border: 1px solid #d9bf53;
}
.header .menu-item-type-custom a[href*=book]:hover, .header .menu-item-type-custom a[href*=contact]:hover {
background-color: #d9bf53;
color: #0f2125;
}
html {
font-size: 11px;
}
@media (min-width: 701px) {
html {
font-size: 10px;
}
}
body {
font-family: "Zilla Slab", sans-serif;
font-weight: 400;
font-size: 1.7rem;
line-height: 1.5;
color: #111;
}
h1, .h1 {
font-size: 5rem;
margin-bottom: 3rem;
}
h2, .h2 {
font-size: 3.5rem;
margin-bottom: 2rem;
}
h3, .h3 {
font-size: 2.8rem;
margin-bottom: 1.5rem;
}
@media (max-width: 700px) {
h1, .h1 {
font-size: 4rem;
}
}
@media (max-width: 700px) {
h2, .h2 {
font-size: 3rem;
}
}
@media (max-width: 700px) {
h3, .h3 {
font-size: 2.6rem;
}
}
a {
text-decoration: none;
color: #e2ddd2;
}
a:hover {
color: #e0c346;
}
@media (max-width: 460px) {
.site-footer .centered {
padding: 0 1rem;
}
}
.type-page {
padding-top: 3rem;
padding-bottom: 3rem;
}
#page {
min-height: 100vh;
flex-direction: column;
align-items: stretch;
overflow: hidden;
word-wrap: break-word;
}
#page #content {
flex-grow: 1;
position: relative;
}
#page .site-header,
#page .site-footer {
flex-shrink: 0;
}
div.edit-post {
position: absolute;
bottom: 0;
right: 0;
}
div.edit-post a {
opacity: 0.7;
background-color: rgb(192, 175, 139);
font-weight: bold;
color: #111;
padding: 5px;
}
div.edit-post a:hover {
opacity: 1;
color: #111;
}
.footer-links li,
.header li {
display: inline-block;
}
.header a {
color: #e2ddd2;
}
.header a:hover {
color: #e0c346;
}
.header li {
margin: 0 1rem;
}
.header .menu-item-type-custom a[href*=book], .header .menu-item-type-custom a[href*=contact] {
display: block;
}
#menu-main-menu {
text-align: center;
}
@media (max-width: 700px) {
#menu-main-menu li {
margin: 0 0.8rem;
}
}
@media (max-width: 460px) {
#menu-main-menu li {
font-size: 1.45rem;
margin: 0 0.8rem;
}
}
@media (max-width: 359px) {
#menu-main-menu li {
font-size: 1.35rem;
margin: 0 0.5rem;
}
}
@media (max-width: 999px) {
#menu-main-menu li:last-child {
display: block;
margin-top: 1.5rem;
text-align: center;
}
}
#menu-main-menu li:first-child {
font-family: "Tahoma";
}
#menu-main-menu li:first-child a {
display: inline-block;
position: relative;
font-size: 18px;
top: -1px;
}
@media (max-width: 460px) {
#menu-main-menu li:first-child a {
font-size: 16px;
top: -1px;
}
}
@media (max-width: 359px) {
#menu-main-menu li:first-child a {
font-size: 15px;
top: 0px;
}
}
.footer-links {
text-align: center;
margin: 2rem 0;
}
.footer-links li {
margin: 0 1rem;
}
@media (max-width: 460px) {
.footer-links li {
font-size: 1.25rem;
margin: 0 0.5rem;
}
}
.header .centered {
justify-content: space-between;
}
@media (min-width: 1000px) {
.header .centered {
display: flex;
}
}
@media (max-width: 460px) {
.header_top .centered {
padding: 0;
}
}
@media (max-width: 999px) {
.header_top .widget-area-header {
display: flex;
flex-flow: row-reverse;
gap: 2rem;
align-items: center;
justify-content: center;
padding-bottom: 2rem;
}
}
@media (min-width: 1000px) {
.header_top .widget-area {
display: flex;
flex-flow: row-reverse;
gap: 2rem;
align-items: center;
}
}
.logo {
order: 1;
}
.site-logo {
padding: 2rem;
}
.site-logo img {
margin: 0 auto;
}
.navigation {
order: 2;
}
.header_top {
background-color: rgba(20, 24, 25, 0.7);
}
.header {
position: relative;
}
.header > div {
position: relative;
z-index: 2;
}
.header:after, .header:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
background: no-repeat;
background-size: cover;
background-position: center;
}
.header:before {
background-image: url(//pearlforte.com/wp-content/themes/pearl/assets/images/header-bg.jpeg);
}
.header:after {
background-image: url(//pearlforte.com/wp-content/themes/pearl/assets/images/header-bg-over.svg);
opacity: 0.5;
z-index: 1;
background-color: #101010;
opacity: 0.73;
}
.header_bottom h1 {
color: #e2ddd2;
padding: 2rem 0 1rem;
}
.site-footer {
background-color: #141819;
padding: 0 0 2rem 0;
color: #e2ddd2;
font-size: 1.5rem;
}
.site-footer .site-logo {
width: 25rem;
margin: 0 auto;
}
.site-footer .site-logo img {
margin: 0 auto;
}
.site-footer .color-palette {
margin-bottom: 4rem;
}
.site-footer .copyright {
font-size: 1.2rem;
text-align: center;
}
.home-services {
padding: 4rem 0;
}
.home-posts .pearl-post {
padding: 2rem 0;
background-color: #f9f8f5;
}
.home-posts .pearl-post:nth-child(2n) {
background-color: #fff;
}
.home-posts .pearl-post:nth-child(2n) .post-image {
border-color: #f9f8f5;
}
@media (min-width: 701px) {
.home-posts .pearl-post {
padding: 4rem 0;
}
.home-posts .pearl-post:last-child {
padding-bottom: 8rem;
}
}
.header_top .widget_block {
display: inline-block;
}
.wp-block-embed-spotify,
.podcast-post {
background-color: #cfe0e3;
}
.wp-embed-responsive .wp-has-aspect-ratio .wp-block-embed__wrapper:before {
padding-top: 20rem;
}
.podcast-post {
padding: 4rem 0 1rem;
}
.wp-block-embed-spotify {
overflow: hidden;
padding: 2rem 0;
margin: 0;
}
.wp-embed-responsive .wp-block-embed-spotify iframe {
height: 20rem;
}
.post-author {
color: #73623f;
font-size: 1.4rem;
}
.post-date {
color: rgb(69, 155, 171);
font-size: 1.4rem;
margin-bottom: 0.5rem;
}
#post-35 {
background: #fff;
padding: 2rem;
margin-top: 3rem;
margin-bottom: 3rem;
border-radius: 1rem;
}
.page-id-35 #main {
background: #cfe0e3;
overflow: hidden;
padding: 0 2rem;
}
.pearl-single-post {
padding-top: 2rem;
padding-bottom: 2rem;
}
@media (min-width: 701px) {
.pearl-single-post {
padding-top: 4rem;
padding-bottom: 4rem;
}
}
.pearl-single-post .post {
margin-bottom: 2rem;
}
.pearl-single-post .entry-thumb {
margin-bottom: 2rem;
width: 100%;
}
.pearl-single-post .entry-thumb img {
width: 100%;
max-width: 100% !important;
}
@media (min-width: 701px) {
.pearl-single-post .entry-thumb {
float: right;
width: 40%;
margin-left: 2rem;
}
}
.pearl-single-post .post-date {
margin-bottom: 2rem;
}
.pearl-archive .pearl-post {
border-bottom: 1px solid #73623f;
padding-bottom: 2rem;
}
.pearl-archive .pearl-posts-list {
margin-bottom: 6rem;
}
.pagination {
overflow: hidden;
padding: 2rem 0;
margin-bottom: 4rem;
}
.pagination ul {
float: right;
}
.pagination li {
display: inline-block;
margin-left: 1rem;
}
.pagination span, .pagination a {
padding: 1rem 1.5rem;
}
.pagination span {
color: #73623f;
background-color: #f6f3ee;
border: 1px solid rgb(192, 175, 139);
}
.pagination a {
color: rgb(69, 155, 171);
border: 1px solid rgb(69, 155, 171);
}
.pagination a:hover {
color: #f1f1f1;
background-color: rgb(69, 155, 171);
}
.pearl-post {
position: relative;
}
.pearl-archive .pearl-post {
margin-bottom: 2rem;
}
.pearl-archive h2 {
margin-bottom: 1rem;
}
.widget-area-home_content > .widget {
background-color: #cfe0e3;
}
@media (max-width: 700px) {
.widget-area-home_content > .widget .wp-block-embed {
padding-top: 2rem;
padding-bottom: 2rem;
}
}
.home-posts .pearl-post-inner {
overflow: hidden;
position: relative;
}
.home-posts .pearl-post {
position: relative;
overflow: hidden;
width: 100%;
}
@media (min-width: 701px) {
.home-posts .pearl-post:nth-child(2n) .post-image {
float: right;
}
.home-posts .pearl-post:nth-child(2n) .post-content-wrapper {
float: left;
padding-left: 0;
padding-right: 3rem;
}
}
.home-posts .post-image {
border: 1rem solid #fff;
border-radius: 1rem;
max-width: 400px;
margin: 0 auto;
}
@media (min-width: 701px) {
.home-posts .post-image {
width: 30%;
float: left;
}
}
.home-posts .post-image img {
width: 100%;
height: auto !important;
border-radius: 1rem;
max-width: 100% !important;
}
.home-posts .post-content-wrapper {
padding-top: 2rem;
}
@media (min-width: 701px) {
.home-posts .post-content-wrapper {
padding-left: 3rem;
width: 67%;
float: left;
}
}
.spotlight .pearl-post {
padding: 10rem 0;
max-width: 79rem;
}
@media (max-width: 700px) {
.spotlight .pearl-post {
padding: 4rem 0;
}
}
.spotlight .pearl-post blockquote, .spotlight .pearl-post .quote {
padding-left: 4rem;
padding-right: 2rem;
position: relative;
color: #e2ddd2;
font-size: 2.4rem;
margin-bottom: 3rem;
}
.spotlight .pearl-post blockquote:before, .spotlight .pearl-post blockquote:after, .spotlight .pearl-post .quote:before, .spotlight .pearl-post .quote:after {
color: #cdb76f;
font-size: 7rem;
position: absolute;
}
.spotlight .pearl-post blockquote:before, .spotlight .pearl-post .quote:before {
content: open-quote;
top: -3rem;
left: 0;
}
.spotlight .pearl-post blockquote:after, .spotlight .pearl-post .quote:after {
content: close-quote;
bottom: -7rem;
right: 0;
}
.spotlight .pearl-post .pearl-post-inner {
position: relative;
}
.spotlight .pearl-post strong, .spotlight .pearl-post .author {
color: #cdb76f;
font-size: 3rem;
}
.home-services h2 {
text-align: center;
}
@media (min-width: 701px) {
.home-services .pearl-posts-list {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
}
.home-services .post-content-wrapper {
position: relative;
z-index: 3;
background: rgba(227, 219, 200, 0.4);
height: 100%;
padding: 1rem;
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.home-services .post-content-wrapper .post-title {
position: relative;
top: 75%;
transform: translateY(-50%);
font-size: 2.3rem;
color: #0f2125;
background: rgba(255, 255, 255, 0.6);
width: 120%;
left: -10%;
padding: 0 10%;
}
.home-services .pearl-post {
padding: 1rem 0.5rem;
max-width: 400px;
margin: 0 auto;
}
@media (min-width: 701px) {
.home-services .pearl-post {
width: 30%;
}
}
.home-services .pearl-post-inner {
width: 100%;
position: relative;
overflow: hidden;
color: white;
text-align: center;
border-radius: 1rem;
}
.home-services .post-image {
height: 20rem;
}
.home-services .post-image img {
display: block;
width: 100%;
height: auto !important;
max-width: 100% !important;
}
@media (min-width: 1200px) {
.rtl .home-services .pearl-post {
width: 23%;
}
}
#content div.wpforms-container-full input[type=submit],
#content div.wpforms-container-full button[type=submit],
#content div.wpforms-container-full .wpforms-page-button {
--marina: 2;
}
div.wpforms-container-full {
max-width: 600px;
margin: 2rem 0;
}
div.wpforms-container-full input[type=date], div.wpforms-container-full input[type=datetime], div.wpforms-container-full input[type=datetime-local], div.wpforms-container-full input[type=email], div.wpforms-container-full input[type=month], div.wpforms-container-full input[type=number], div.wpforms-container-full input[type=password], div.wpforms-container-full input[type=range], div.wpforms-container-full input[type=search], div.wpforms-container-full input[type=tel], div.wpforms-container-full input[type=text], div.wpforms-container-full input[type=time], div.wpforms-container-full input[type=url], div.wpforms-container-full input[type=week], div.wpforms-container-full select, div.wpforms-container-full textarea {
border-color: rgb(69, 155, 171);
}