:root {
color: inherit;
font-family: "Jost", sans-serif;
overflow-x: hidden;
margin: 0;
background: initial;
}
body, h1, h2, h3, h4, h5, h6, p, a, nav, ul, li {
color: inherit;
font-family: "Jost", sans-serif;
overflow-x: hidden;
margin: 0;
background: initial;
}
body {
color: #392411;
font-family: "Jost", sans-serif;
overflow-x: hidden;
margin: 0;
background: #F7F1E5;
}
html, body {
-ms-overflow-style: none;
scrollbar-width: none;
-webkit-font-smoothing: antialiased;
scroll-behavior: smooth;
&::-webkit-scrollbar {
display: none;
}
}
footer {
margin-left: auto;
margin-right: auto;
padding-top: 100px;
padding-bottom: 25px;
text-align: center;
}
h1 {
font-family: "Borel", cursive;
}
h2 {
opacity: 0.7;
font-weight: 400;
}
h4 {
opacity: 0.9;
}
nav {
position: relative;
top: 0;
padding-top: 16px;
ul {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: center;
align-items: center;
justify-content: space-around;
li {
overflow: hidden;
margin-left: 2px;
margin-right: 2px;
a {
display: block;
height: 16pt;
overflow: hidden;
text-decoration: initial;
padding: 16px;
transition: all 200ms ease 0s;
background: #00000000;
border-radius: 2px;
&:hover {
color: #FFFFFF;
background: #00000070;
border-radius: 8px;
}
}
}
}
}
.zooming-image {
object-fit: contain;
object-position: center;
height: auto;
overflow: hidden;
> img {
width: 100%;
vertical-align: middle;
max-width: 550px;
transition: transform 2000ms cubic-bezier(0.18, 1.05, 0.4, 0.97) 0s;
transform: scale(1.0);
&:hover {
transform: scale(1.1);
}
}
@media (hover:none) {
> div.bottom-content {
transform: translateY(-100%);
}
}
&:hover {
> div.bottom-content {
transform: translateY(-100%);
}
}
> div.bottom-content {
text-align: center;
padding: 10px;
background: #00000073;
color: white;
transition: transform 1000ms cubic-bezier(0.18, 1.05, 0.4, 0.97) 0s;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
transform: translateY(0);
}
}
.wedding-party-container {
display: grid;
grid-template-columns: repeat(6, 1fr);
@media screen and (max-width: 700px) {
grid-template-columns: repeat(3, 1fr);
}
}
.button {
display: inline-block;
min-width: fit-content;
border-radius: 8px;
background-color: transparent;
border: 2px solid #392411;
color: #392411;
text-align: center;
padding: 10px 20px;
transition: all 500ms ease 0s;
cursor: pointer;
&:is(.white) {
color: white;
border-color: white;
}
span {
cursor: pointer;
display: inline-block;
position: relative;
transition: all 500ms ease 0s;
padding-right: 10px;
padding-left: 10px;
&::after {
content: '→';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: all 500ms ease 0s;
}
}
&:is(.target-blank) {
@media (hover:none) {
span {
&::after {
content: '→';
transform: rotate(-45deg);
}
}
}
&:hover {
span {
&::after {
content: '→';
transform: rotate(-45deg);
}
}
}
}
@media (hover:none) {
span {
padding-right: 20px;
padding-left: 0;
&::after {
content: '→';
opacity: 1;
right: 0;
}
}
}
&:hover {
span {
padding-right: 20px;
padding-left: 0;
&::after {
content: '→';
opacity: 1;
right: 0;
}
}
}
}
.card {
border-radius: 12px;
background-color: white;
margin: 16px;
overflow: hidden;
box-sizing: border-box;
h2 {
font-size: min(4vw, 1.5em);
}
> .card-img {
width: 100%;
object-fit: cover;
~ .card-body {
margin-bottom: -12px;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
transform: translateY(-12px);
background-color: white;
width: calc(100% - calc(16px * 2));
}
}
&:is(.card-large) {
> .card-body {
padding: 32px;
}
}
> .card-body {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-content: center;
align-items: flex-start;
justify-content: center;
padding: 16px;
> .card-title-row {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
align-items: center;
justify-content: space-between;
> p {
}
}
}
}