/*
Theme Name: Sarmant Mini
Author: Arttu Teronen
Author URI: https://sarmantti.fi
Description: A very simple theme made by Sarmantti
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 7.2
Version: 1.0.0
Text Domain: sarmant_mini
*/
/** CUSTOM CSS **/
:root {
--transition-time: 0.3s;
--transition-type: ease-in-out;
--transition-base: var(--transition-time) var(--transition-type);
--inherit-underline-color: inherit;
--active-link-underline: underline 0.125em;
--active-link-color: rgba(0, 0, 0, 0.1);
--active-link: var(--active-link-underline) var(--active-link-color);
--color-error: #AB4E52;
--color-success: #00A550;
--color-warning: #E69F64;
--color-base: #F9F9F9;
--color-contrast: #111111;
--color-accent-1: #2E2E2E;
--color-accent-2: #E49733;
--color-accent-3: #D83B3B;
--color-accent-4: #1B9ABA;
--color-accent-5: #16684E;
--border-base: 1px solid var(--wp--preset--color--contrast);
--height-full-page: 100vh;
--height-full-page: 100dvh;
--height-full-page: 100svh;
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
overflow-x: clip;
@view-transition {
navigation: auto;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
/* Turn off any transition
*/
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
transition: none !important;
}
/* Turn off view-transitions
*/
@view-transition {
navigation: none !important;
}
}
body {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
background-color: var(--wp--preset--color--base);
}
main.wp-block-group {
@media screen and (max-width:30em) {
padding-inline: 0.5em;
}
}
:is(h1,h2,h3) {
text-wrap: pretty;
}
.content-full-height {
height: var(--height-full-page);
}
ol.wp-block-list {
padding-inline-start: 1.25em;
}
.mobile-align-left {
text-align: left;
}
:where(.wp-site-blocks) > :last-child {
margin-block-start: 0!important;
margin-block-end: 0;
}
/* Transition time and type for each link and input element except Site Title */
.wp-element-button, button, input, textarea, a:where(:not(.wp-block-site-title)) {
/* transition: 0.3s ease-in-out; */
transition: var(--transition-base)
}
/** COLUMNS
*/
:is(.wp-block-columns.is-layout-flex.wp-block-columns-is-layout-flex) {
column-gap: clamp(1em, 5em, 8em);
row-gap: clamp(1em, 3em, 4em);
margin-bottom: 4em;
}
div.wp-block-query > ul.wp-block-post-template:not(.is-style-carousel-this) {
padding-inline: 6em;
@media screen and (max-width:48.875em) {
padding-inline: 2em;
}
}
:is(.wp-block-columns.fp-carousel-cols.is-layout-flex.wp-block-columns-is-layout-flex.fp-carousel-cols) {
margin-bottom: 0;
}
/** FOOTER **
*/
footer {
padding-top: clamp(2em, 5em, 10em);
/* padding-top: clamp(6em, 8em, 10em); */
.clamp-img {
width: clamp(4em, 16em, 19em);
aspect-ratio: unset;
}
:where(.wp-block-site-logo) {
width: clamp(6em, 20vw, 12.5em);
}
/* OLD LAYOUT STYLE */
/* @media screen and (max-width: 62em) {
.footer-upper {
flex-wrap: wrap;
flex-direction: column;
gap: 0.5em;
figure.wp-block-image.clamp-img:first-of-type, figure.wp-block-image.clamp-img:nth-of-type(2) {
margin-bottom: 3em;
}
}
}*/
@media screen and (max-width: 48.875em) {
:is(nav ul.wp-block-navigation__container.wp-block-navigation) {
flex-direction: column;
}
}
}
footer {
container: footer / inline-size;
}
/* NEW LAYOUT */
.footer-upper {
margin-bottom: clamp(6em, 12em, 14em);
padding-inline: var(--wp--preset--spacing--clamp-xx-large);
row-gap: 3em;
:where(.clamp-img) {
text-align: center;
}
:where(img) {
max-height: 140px;
width: auto;
}
figure.eu-logo {
width: 100%;
}
> * {
place-self: center;
}
}
@container footer (width < 90rem) {
.footer-upper {
/* background: red; */
grid-template-columns: repeat(2, minmax(0, 1fr));
padding-bottom: 2.5em;
:where(.clear-group:first-of-type) {
display:none;
}
:where(.clear-group:nth-of-type(2)) {
order: 7
}
}
}
@container footer (width < 48.875rem) {
.footer-upper {
/* background: red; */
grid-template-columns: repeat(1, minmax(0, 1fr));
padding-inline: var(--wp--preset--spacing--clamp-regular);
margin-bottom: 6em;
/* :where(.clear-group) {
display: none;
} */
}
}
/* OLD LAYOUT */
/* .footer-upper {
margin-bottom: clamp(6em, 12em, 14em);
padding-right: clamp(0em, 10em, 14em);
} */
.footer-bottom:before {
display: block;
position: absolute;
top: -27.7vw;
left: 0;
right: 0;
height: 27.778vw;
width: 100vw;
content: "";
background-size: cover;
/* background-image: url('data:image/svg+xml,'), linear-gradient(180deg, var(--wp--preset--color--base) 5%, red 6%); */
z-index: -1;
box-shadow: 0 0 0 var(--wp--preset--color--base);
/* border-bottom: 1px solid var(--wp--preset--color--accent-1); */
}
.footer-images {
display: flex;
justify-content: space-evenly;
figure {
max-width: 75em;
}
}
/* Red to Blue */
:where(main.site-main.has-accent-3-to-accent-4-180-gradient-background.has-background) ~ .site-footer .footer-bottom:before {
background-image: url('data:image/svg+xml,'), linear-gradient(180deg, var(--wp--preset--color--base) 5%, var(--color-accent-4) 6%);
}
/* Green to Blue */
:where(main.site-main.has-accent-5-to-accent-4-180-gradient-background.has-background) ~ .site-footer .footer-bottom:before {
background-image: url('data:image/svg+xml,'), linear-gradient(180deg, var(--wp--preset--color--base) 5%, var(--color-accent-4) 6%);
}
/* Yellow to Red */
:where(main.site-main.has-accent-2-to-accent-3-180-gradient-background.has-background) ~ .site-footer .footer-bottom:before {
background-image: url('data:image/svg+xml,'), linear-gradient(180deg, var(--wp--preset--color--base) 5%, var(--color-accent-3) 6%);
}
/* Green to Yellow */
:where(main.site-main.has-accent-5-to-accent-2-180-gradient-background.has-background) ~ .site-footer .footer-bottom:before {
background-image: url('data:image/svg+xml,'), linear-gradient(180deg, var(--wp--preset--color--base) 5%, var(--color-accent-2) 6%);
}
h2.text-wrap-pretty > a {
word-break: initial;
}
/* GRID TEMPLATES */
/******************/
:where(.sarmant-card) a::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: " ";
}
.is-content-fit-content {
max-width: fit-content!important;
}
.is-margin-inline-none {
margin-inline: 0!important;
}
.margin-inline-auto {
margin-inline: auto!important;
}
.is-justify-self-center {
justify-self: anchor-center;
}
.is-content-max-width-30 {
max-width: 30ch;
margin-inline: auto;
}
.is-content-max-width-40 {
max-width: 40ch;
margin-inline: auto;
}
.is-content-max-width-75 {
max-width: 75ch;
margin-inline: auto;
}
/** CAROUSEL Settings
*/
.wp-block-cb-carousel-v2 {
max-height: 50vh;
}
.slick-dots {
position: unset;
&:focus {
outline: 1px solid blue;
}
}
.slick-dotted.slick-slider {
margin-bottom: 0;
}
:where(.slick-dots) li button::before {
font-size: 16px!important;
}
:where(.slick-slide) {
position: relative;
}
.slick-arrow {
margin: 0;
border-radius: 50%;
justify-content: center;
align-items: center;
place-items: center;
&:focus {
outline: 2px solid black;
}
&.slick-next,
&.slick-prev {
z-index: 1;
font-size: 0;
width: min-content;
height: min-content;
}
&.slick-next {
right:-15px;
}
&.slick-prev {
left:-15px;
}
&.slick-next::before, &.slick-prev::before {
font-size: var(--wp--preset--font-size--x-large);
border-radius: inherit;
opacity: 1;
color: #d9d9d9;
}
&.slick-prev::before {
content: url('data:image/svg+xml;utf8,');
}
&.slick-next::before {
content: url('data:image/svg+xml;utf8,');
}
}
@media screen and (max-width: 48.875em) {
/* @media screen and (max-width: 37.5em) { */
.is-style-grid-cols-one {
grid-template-columns: 1fr!important;
}
.order-reverse {
flex-direction: column-reverse;
}
header :where(div.wp-block-site-logo) {
max-width: 180px;
}
}
.list-style-none {
list-style-type: none;
padding-left: 0;
text-wrap: pretty;
}
.text-wrap-pretty {
text-wrap: pretty;
}
.align-items-start {
align-items: start;
}
.has-shadow-accent {
filter:drop-shadow(0 0.5em 1em var(--wp--preset--color--accent-2));
}
/****************/
/***NAVIGATION***/
/****************/
header :where(.wp-block-site-logo):not(.hide-on-desktop) {
padding-block: 0.5em;
width: 280px;
}
.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
color: var(--wp--preset--color--accent-2);
}
.main-navigation {
:where(.is-menu-open) ul.wp-block-navigation__container.is-responsive.main-navigation {
margin: 0 auto!important;
}
:where(.is-menu-open) .wp-block-navigation__responsive-container-content {
padding-top:0!important;
}
:where(.is-menu-open) {
padding-top: 4em!important;
}
}
.wp-block-navigation__container.is-responsive.wp-block-navigation {
justify-content: end;
gap: 3em !important;
}
nav.is-responsive {
/* width: 100%; */
place-content: end;
}
.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
background-color: var(--wp--preset--color--accent-1)!important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
align-items: center!important;
}
button.wp-block-navigation__responsive-container-open, button.wp-block-navigation__responsive-container-close {
color: var(--wp--preset--color--base);
svg {
width: 32px;
height: 32px;
}
}
/*
* Make the mobile navigation menu appear sooner
*/
@media ( min-width: 78em ) {
.wp-block-navigation__responsive-container-open:not(.always-shown) {
display: none !important;
}
nav.is-responsive {
width: 70%;
}
.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
display: block !important;
}
.hide-on-desktop {
display: none!important;
pointer-events: none!important;
}
}
@media ( min-width: 37.5em ) {
.wp-block-navigation__responsive-container-open:not(.always-shown) {
display: flex;
}
.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
display: none;
}
}
@media ( max-width: 74em ) {
.is-space-between-mobile {
justify-content: space-between!important;
}
:where(.justify-left-mobile) {
justify-content: left!important;
}
.is-style-grid-cols-one {
grid-template-columns: 1fr!important;
}
.hide-on-mobile {
display: none!important;
pointer-events: none!important;
}
.lead-columns {
.wp-block-column:nth-of-type(1) {
flex-basis: var(--flex-20)!important;
}
.wp-block-column:nth-of-type(2) {
flex-basis: var(--flex-80)!important;
}
}
/* OLD LAYOUT */
/* .footer-upper {
margin-inline: auto !important;
padding-inline: 0;
justify-content: center;
} */
}
/*** CONTACT FORM ***/
label.your-message {
& > span {
width: 100%;
}
}
.form-last-row {
display: flex;
flex-direction: row;
}
label.captcha {
grid-area: captcha;
}
div.cf-turnstile {
grid-area: turnstile;
}
div.wpcf7-response-output {
grid-area: response-output;
margin-inline: 0!important;
margin-block: 0.5em!important;
}
form.wpcf7-form {
display: flex;
flex-direction: column;
gap: 2em;
.cf-first-row {
background: var(--wp--preset--color--base);
border: var(--border-base);
border-radius: 0.5em;
padding: 0.5em;
display: flex;
flex-direction: row;
column-gap: 0.25em;
> * {
flex: 1;
flex-direction: row;
display: flex;
text-wrap: nowrap;
column-gap: 0.25em;
}
label {
span.wpcf-form-control-wrap {
width: 100%;
input {
max-width: 100%;
}
}
}
}
:where(span.wpcf7-form-control-wrap) {
width: 100%;
}
:where(span.wpcf7-form-control-wrap) > input.wpcf7-form-control {
width: 100%;
max-width: 100%;
}
& > label {
display: flex;
padding: 0.5em;
background: var(--wp--preset--color--base);
border: var(--border-base);
border-radius: 0.5em;
text-wrap: nowrap;
gap: 0.25em;
span.wpcf7-form-control-wrap {
width: 100%;
max-width: 100%;
& > textarea {
/* border: 1px solid #16684e42; */
border: 1px solid black;
width: inherit;
background: #CAD3D0;
font-size: inherit;
border-radius: 0.25em;
}
}
}
input {
/* border: 1px solid #16684e42; */
border: 1px solid black;
background: #CAD3D0;
width: inherit;
font-size: inherit;
border-radius: 0.25em;
}
:is(input.wpcf7-submit) {
color: var(--wp--preset--color--base);
border-radius: 1.5625em;
border: none;
font-family: inherit;
font-size: inherit;
font-weight: 700;
padding-top: var(--wp--preset--spacing--no-clamp-small);
padding-right: var(--wp--preset--spacing--no-clamp-small);
padding-bottom: var(--wp--preset--spacing--no-clamp-small);
padding-left: var(--wp--preset--spacing--no-clamp-small);
text-decoration: none;
text-transform: uppercase;
min-width: 8em;
max-width: 10em;
background: var(--wp--preset--color--accent-5);
color: var(--wp--preset--color--base);
transition: all 0.2s ease, visibility 0s;
&:hover {
/* transform: scale(0.98); */
filter: drop-shadow(0 0.15em 0.30em var(--wp--preset--color--accent-5));
cursor: pointer;
background: var(--wp--preset--color--accent-5);
}
}
/* fieldset.hidden-fields-container {
display: none !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
} */
}
@media screen and (max-width: 48.875em) {
form.wpcf7-form {
.cf-first-row {
border: none;
flex-direction: column;
display: flex;
background: var(--wp--preset--color--base);
padding: 0;
gap: 2em;
label {
flex-direction: column;
display: flex;
padding: 0.5em;
background: var(--wp--preset--color--base);
border: var(--border-base);
border-radius: 0.5em;
text-wrap: nowrap;
gap: 0.25em;
}
& > label {
flex-direction: column;
}
}
:where(label) {
flex-direction: column;
}
}
}
/*** WP TABLE ***/
.wp-block-table td, .wp-block-table th {
padding: 0;
}
.wp-block-table tr {
padding-block: 1em;
}
/*** SCROLL TO TOP BUTTON ***/
.scroll-to-top {
position: fixed;
bottom: 6em;
right: 0.75em;
z-index: 10000;
opacity: 0;
background-color: var(--wp--preset--color--accent-1);
color: var(--wp--preset--color--base);
cursor: pointer;
border-radius: 100%;
font-size: clamp(1rem, 2.5vw, 1.5rem);
transition: 0.5s;
width: 2.5em;
height: 2.5em;
text-align: center;
align-content: center;
border: 0.06em solid;
svg {
fill: var(--wp--preset--color--base);
}
}
.show-back-to-top-btn {
opacity: 1!important;
transform: translateY(0);
}
.custom-z-index {
z-index: var(--z-index-m1);
}
/* :where(.block-editor-iframe__body, .editor-styles-wrapper) {
background: var(--editor-body-bg-color)!important;
} */
.is-style-carousel-this {
.wp-block-post-featured-image {
width: clamp(100%, 30vw, 100%);
margin-inline: 0;
height: auto;
z-index: 1;
img {
aspect-ratio: 1 / 1;
width: auto;
object-fit: cover;
}
}
.wp-block-group:has(> .carousel-text) {
z-index: 2;
display: flex;
position: absolute;
bottom: 0;
width: 100%;
flex-direction: row;
min-height: 6em;
}
.carousel-text {
align-self: center;
}
.carousel-date {
}
}