@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
/* Register fonts */
@font-face {
font-family: "Josefin";
font-style: normal;
font-weight: 100 700;
font-display: swap;
font-optical-sizing: auto;
-webkit-font-smoothing: antialiased;
src: url("../fonts/josefin-sans.woff2") format("woff2");
}
@font-face {
font-family: "Jost";
font-style: normal;
font-weight: 100 700;
font-display: swap;
font-optical-sizing: auto;
-webkit-font-smoothing: antialiased;
src: url("../fonts/jost.woff2") format("woff2");
}
/* Add a custom height utility to handle WP top admin bar */
@media screen and (min-width: 783px) {
.min-h-wp {
min-height: calc(100vh - 32px);
}
}
@media screen and (max-width: 782px) {
.min-h-wp {
min-height: calc(100vh - 46px);
}
}
}
/* Apply some styles on the WP Content area */
#wpcontent {
@apply min-h-wp bg-white p-4;
}
.backwpup-typography {
@apply font-body text-primary-darker;
}
@media screen and (max-width: 782px) {
.auto-fold #wpcontent {
@apply p-4;
}
}
/* Fix WordPress defaults inside WP Content area */
#wpbody-content li {
@apply mb-0;
}
/* Remove WP admin styles from inputs, textareas and selects */
#wpbody-content input,
#wpbody-content textarea,
#wpbody-content select {
border: none;
background: none;
box-shadow: none;
min-height: auto;
font-size: 1rem;
line-height: inherit;
max-width: 100%;
}
#wpbody-content select:not([disabled]):hover {
color: inherit;
}
#wpbody-content .input-base {
@apply px-4 pb-1 pt-6;
}
#wpbody-content .input-special {
@apply px-2 py-[14px];
}
#wpbody-content .select-transparent {
@apply pb-1 pl-4 pr-10 pt-6;
}
/* input with moving label. */
#wpbody-content .input-base:placeholder-shown:not(:focus) ~ .input-base-label {
@apply top-4 text-base text-grey-500;
}
/* select with moving label */
#wpbody-content .select:has(option[value=""]:checked) .select-label {
@apply left-4 top-4 text-base text-grey-500;
}