/*
2024 Theme
[2024 Wikidot Theme]
by Gyess
*/
:root {
/* S-CSS-P */
--theme-base: "black-highlighter";
--theme-id: "kalasan";
--theme-name: "Kalasan Theme";
/* Header */
--logo-image: url("https://imgur.com/p6gLF62.png"); /* changed */
--header-title: "Kalasan Belakang Restaurant"; /* changed */
--header-subtitle: "You've eaten here before."; /* changed */
--swatch-headerh1-color: var(--white-monochrome);
--swatch-headerh2-color: var(--white-monochrome);
/* Typefaces */
--body-font: 'Public Sans', Inter, Verdana, Geneva, "Helvetica Neue", "Helvetica", sans-serif;
--UI-font: "Fantasque Sans Mono", Courier New, Ubuntu Mono, Consolas, monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--header-font: 'Fantasque Sans Mono', Courier New, Ubuntu Mono, Consolas, monospace;
--title-font: var(--header-font);
--mono-font: 'Fantasque Sans Mono', Recursive, Consolas, monaco, monospace;
/* Colors */
--white-monochrome: 252, 252, 252;
--pale-gray-monochrome: 242, 220, 189; /* changed */
--light-pale-gray-monochrome: 242, 220, 189; /* changed */
--very-light-gray-monochrome: 220, 215, 210;
--light-gray-monochrome: 165, 160, 155;
--gray-monochrome: 166, 110, 75; /* changed */
--dark-gray-monochrome: 115, 80, 54; /* changed */
--black-monochrome: 31, 28, 20;
--pale-accent: 230, 23, 68;
--bright-accent: 99, 147, 166; /* changed */
--medium-accent: 191, 130, 94; /* changed */
--dark-accent: 191, 130, 94; /* changed */
--alt-accent: 221, 102, 17;
/* Liminal Variables */
--header-text-shadow: 0px 2px 3px rgba(0,0,0,0.8);
--header-text-shadow-hover: 0px 5px 3px rgba(0,0,0,0.3);
--quote-shadow: 0 2px 4px rgba(var(--black-monochrome),0.25);
--footer-message: var(--header-subtitle);
/* Swatches */
--swatch-secondary-color: var(--white-monochrome);
--swatch-menubg-color: var(--white-monochrome);
--rating-module-bg-color: var(--swatch-menubg-color);
--swatch-sidebar-collapsible-tab-bg: var(--swatch-primary-darkest);
--swatch-topmenu-bg-color: var(--gray-monochrome);
--swatch-topmenu-border-color: var(--swatch-topmenu-bg-color);
--gradient-header: linear-gradient( to bottom, rgb(var(--bright-accent)) 0%, rgb(var(--dark-accent)) 100%);
--gradient-background: linear-gradient( to bottom, rgb(var(--swatch-background)), rgb(var(--swatch-background)));
--diagonal-stripes: transparent;
--background-gradient-distance: 40rem; /* will not go further than 100vh */
--background-gradient-color: var(--gray-monochrome); /* This will display at low opacity */
/* Measurements */
--scrollbar-width: 0.7rem;
--swatch-background: var(--pale-gray-monochrome);
--sidebar-width-on-desktop: calc(var(--base-font-size) * (266 / 15));
--body-width-on-desktop: 45.75rem;
--header-height-on-desktop: 12rem; /* changed */
--header-height-on-mobile: 12rem; /* changed */
--wallpaper-mask-size: 5em; /* changed */
}
/* START NEW CODE */
#header::before {
content: '';
position: absolute;
top: 60%;
left: 50%;
animation: moveLogo 3s ease-in-out forwards;
}
@keyframes moveLogo {
0% { transform: translate(-50%, -60%); }
100% { transform: translate(-40%, -60%); }
}
#header h1,
#header h1 a {
font-size: 1.3em;
font-family: "Dancing Script", cursive !important;
}
#header h2,
#header h2 span,
#header h2 span::before {
font-size: 1.1em;
font-family: "Dancing Script", cursive !important;
}
/* FOR PAGE TITLE */
/* #page-title::before, .meta-title::before {
content: "# ";
}
:is(#page-title,
.meta-title)::after {
background: transparent;
border-bottom: 3px dotted black;
} */
#page-title {
display: block;
padding: 1rem;
position: relative;
background-color: white;
box-shadow: 0px 1px 1.9px -4px rgba(0, 0, 0, 0.1), 0px 6px 15px -4px rgba(0, 0, 0, 0.2);
color: rgb(50, 50, 53);
--posX: -20vw;
}
#page-title::before,
#page-title::after {
content: "";
height: 98%;
position: absolute;
width: 98%;
background-color: white;
z-index: -1;
}
#page-title::before {
left: -5px;
top: 4px;
transform: rotate(-1deg);
}
#page-title::after {
right: -3px;
top: 1px;
transform: rotate(.8deg);
}
#page-title::before {
box-shadow: 0px 1px 1.9px -4px rgba(0, 0, 0, 0.1), 0px 6px 15px -4px rgba(0, 0, 0, 0.1);
}
#page-title::after {
box-shadow: 0px 1px 1.9px -4px rgba(0, 0, 0, 0.1), 0px 6px 15px -4px rgba(0, 0, 0, 0.05);
}
/* FOR EDITOR */
input.text#edit-page-title,
textarea#edit-page-textarea {
background: rgb(var(--white-monochrome)) !important;
}
/* FOR WIDER DEVICES */
@media only screen and (min-width: 900px) {
#header::before {
content: '';
position: absolute;
top: 60%;
left: 50%;
animation: moveLogo 3s ease-in-out forwards;
}
@keyframes moveLogo {
0% { transform: translate(-50%, -60%); }
100% { transform: translate(-30%, -60%); }
}
#header h1,
#header h1 a {
position: absolute;
top: 30%;
left: 50%;
font-size: 1.5em;
animation: moveTitle 3s ease-in-out forwards;
}
@keyframes moveTitle {
0% { transform: translate(-50%, -30%); }
100% { transform: translate(-65%, -30%); }
}
#header h2,
#header h2 span,
#header h2 span::before {
position: absolute;
top: 50%;
left: 50%;
font-size: 1.2em;
animation: moveSubtitle 3s ease-in-out forwards;
}
@keyframes moveSubtitle {
0% { transform: translate(-50%, -50%); }
100% { transform: translate(-55%, -50%); }
}
}