/*
Theme Name: Kavárenský Masterclass
Theme URI: https://www.instagram.com/tomasqprochazka/
Description: Šablona pro Kavárenský Masterclass, kde Tom – nejkrásnější, nejchytřejší a nejvychillovanější barista – promění každý šálek na malé umělecké dílo a každou přednášku na zenový zážitek.
Author: UXCode
Author URI: https://uxcode.cz
Version: 1.0.0
Text Domain: qmt
*/
body, html {
padding: 0;
margin: 0;
}
*, ::after, ::before {
box-sizing: border-box;
}
body{
--bg: var(--light-bg, #ECECEC);
--text: var(--light-text, #1E1E1E);
--highlight: var(--light-highlight, #ED1C24);
}
body[data-scheme='dark']{
--bg: var(--dark-bg, #ECECEC);
--text: var(--dark-text, #1E1E1E);
--highlight: var(--dark-highlight, #ED1C24);
}
body {
background-color: var(--bg);
color: var(--text);
font-family: "aktiv-grotesk", system-ui, -apple-system, Arial, sans-serif;
font-size: 18px;
line-height: 23px;
}
body[data-scheme]{
&,
#header {
transition: color .3s, background-color .3s, transform .3s;
}
}
.container{
@media (max-width: 999px) {
padding: 0 20px;
}
@media (min-width: 1000px) and (max-width: 1511px) {
padding: 0 56px;
}
@media (min-width: 1512px) {
padding-left: calc( 50vw - 700px );
padding-right: calc( 50vw - 700px );
}
}
#header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
display: grid;
background-color: var(--bg);
transform: translateY(0);
&.hidden {
transform: translateY(-100%);
}
@media (max-width: 999px) {
grid-template-columns: 31px 1fr 68px;
}
@media (min-width: 1000px) {
grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 999px) {
padding-top: 20px;
padding-bottom: 20px;
}
@media (min-width: 1000px) {
padding-top: 35px;
padding-bottom: 35px;
}
.left_logo {
text-align: left;
align-self: end;
max-height: 35px;
overflow: hidden;
.image{
display: inline-block;
background-color: var(--text);
@media (max-width: 999px) {
width: 31px;
height: 25px;
mask-size: 31px 25px !important;
}
@media (min-width: 1000px) {
width: 37px;
height: 30px;
mask-size: 37px 30px;
}
}
}
.center_logo {
text-align: center;
.image{
display: inline-block;
background-color: var(--text);
}
@media (max-width: 999px) {
align-self: center;
.image.desktop {
display: none;
}
}
@media (min-width: 1000px) {
align-self: start;
.image.mobile {
display: none;
}
}
}
}
#color_switcher {
text-align: right;
max-height: 35px;
overflow: hidden;
transition: all .3s;
&:hover {
--text: var(--highlight);
}
.button {
display: inline-grid;
position: relative;
line-height: 31px;
height: 35px;
border-radius: 17px;
letter-spacing: -.2px;
border: 2px solid var(--text);
background-color: var(--text);
color: var(--bg);
transition: all .3s;
.scheme {
display: block;
min-width: 31px;
height: 31px;
overflow: hidden;
text-align: center;
transition: all .3s;
div:first-child {
display: inline-block;
}
div:last-child {
display: inline-block;
}
}
@media (max-width: 999px) {
width: 68px;
grid-template-columns: 32px 32px;
.scheme div:last-child {
display: none;
}
}
@media (min-width: 1000px) {
width: 110px;
}
}
label {
position: absolute;
inset: 0;
display: block;
cursor: pointer;
}
}
#color_switcher .button::after {
content: "";
display: table;
clear: both;
}
body:not([data-scheme='dark']) #header #color_switcher {
label#color_scheme_light {
display: none;
}
.button {
@media (min-width: 1000px) {
grid-template-columns: 74px 32px;
}
}
.dark{
border-radius: 50%;
color: var(--text);
background-color: var(--bg);
div:last-child {
font-size: 0;
}
}
.light{
padding-left: 6px;
}
}
body[data-scheme='dark'] #header #color_switcher {
label#color_scheme_dark {
display: none;
}
.button {
@media (min-width: 1000px) {
grid-template-columns: 32px 74px;
}
}
.light{
border-radius: 50%;
color: var(--text);
background-color: var(--bg);
div:last-child {
font-size: 0;
}
}
.dark{
padding-right: 11px;
}
}
#footer {
display: grid;
.social {
a {
display: inline-block;
font-size: 0;
width: 20px;
height: 20px;
background-color: var(--text);
transition: transform .3s;
&.facebook{
mask: url('data:image/svg+xml,');
}
&.instagram{
mask: url('data:image/svg+xml,');
}
&.linkedin{
mask: url('data:image/svg+xml,');
}
&.email{
mask: url('data:image/svg+xml,');
}
&:hover {
background-color: var(--highlight);
transform: scale(1.3);
}
}
}
@media (max-width: 999px) {
grid-template-columns: 1fr;
gap: 25px;
padding-top: 130px;
padding-bottom: 35px;
.copy {
order: 2;
text-align: center;
font-size: 13px;
line-height: 17px;
}
.social {
text-align: center;
a {
margin: 0 10px;
}
}
}
@media (min-width: 1000px) {
grid-template-columns: 1fr 1fr;
padding-top: 65px;
padding-bottom: 35px;
.copy {
font-size: 15px;
line-height: 20px;
padding-top: 10px;
}
.social {
text-align: right;
font-size: 15px;
line-height: 19px;
a{
margin-left: 20px;
}
}
}
}