@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); @font-face { font-family: "FJAKAFONT"; src: url('../font/FJAKA_Font.otf') format('opentype'), url('../font/FJAKA_Font.ttf') format('truetype'); } :root { --red: #fb452e; --yellow: #fdfcbe; /* --black: #0B1215; */ --black: #1C1C1C; --white: #FAF9F6; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; user-select: none; letter-spacing: .5px; font-synthesis: none !important; } a { text-decoration: none; } ::-webkit-scrollbar { display: none; } html, body { margin: 0; padding: 0; /* ensure grows with your content */ min-height: 100vh; max-width: 100%; overflow-x: hidden; touch-action: pan-y; -webkit-font-smoothing: subpixel-antialiased; } html { background-color: var(--black); } img, video, canvas { display: block; max-width: 100%; } body { /* black from 0–90%, then gradient to #fdfcbe from 90–100% */ background: linear-gradient(to bottom, var(--black) 0%, var(--black) 75%, var(--yellow) 100%); background-repeat: no-repeat; } .intro { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; overflow: hidden; display: flex; flex-direction: column; background-color: var(--white); } .intro_line { flex: 1; background: var(--black); clip-path: inset(0% 0% 0% 0%); } .intro img { position: absolute; top: 0; left: 50%; transform: translate(-50%, 0%); padding-inline: 1rem; margin-top: 20vh; z-index: -1; } header { background-color: var(--red); width: 100%; padding: 1rem 2rem; margin-top: 2rem; position: fixed; z-index: 2; box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px; } .header_image { position: absolute; top: -50%; left: 50%; transform: translateX(-50%); width: 110px; z-index: -1; } .header_links { display: flex; justify-content: center; gap: 5rem; width: fit-content; margin: 0px auto; padding-right: 65px; } .header_links>.link, .header_expand>.link { font-family: Inter; text-decoration: none; color: var(--yellow); font-weight: 1000; cursor: pointer; } .header_links>.link:hover, .header_expand>.link:hover { text-decoration: underline; } .header_expand { background-color: var(--red); z-index: 1; display: flex; flex-direction: column; gap: 2rem; font-size: 2.4rem; margin-top: 2.4em; height: calc(110svh - 61px); width: 100%; position: fixed; } .plus_menu { position: absolute; top: -2px; left: 50%; transform: translateX(-50%); font-size: 4rem; color: var(--yellow); } @media screen and (min-width: 1230px) { .header_links>.link { font-size: 1.5rem; } .header_expand, .plus_menu { display: none !important; } .tickets>img { width: 250px; } .section_title { font-size: 10em; } #moments>.section_title { padding-inline: 3rem; } .splide__slide img { width: 19vw !important; } .flower .text { font-size: 3rem; } .text_slide { font-size: 2rem; } #boutique { flex-direction: row; } .card { width: 40%; } .card_title { font-size: 4rem; } .card>a>.card_title>span>* { width: 50px; } .card>a>.card_title>span { height: 50px; width: 50px; } .card:hover>a>.card_image>img { transition: .25s ease-in-out; filter: grayscale(0); } .card_image>img { filter: grayscale(1); transition: .25s ease-in-out; } #about { padding-inline: 5rem; } #newsletter { flex-direction: row; } #submit-newsletter-form, #newsletter>.title { width: 50%; } #newsletter>.title { font-size: 4rem; } #submit-newsletter-form>input { font-size: 3rem; } .contacts_content { flex-direction: row; } .contacts_content>* { width: 32%; text-align: center; } .contacts_content>div>.title { font-size: 4rem; } .madeby { flex-direction: row; } .contacts>.content { justify-content: center; } .socials>.content { justify-content: center; } .splide_slide_text>.location { font-size: 1.5rem; } } @media screen and (max-width: 1230px) { .header_links>.link { font-size: 1.5rem; opacity: 0 !important; pointer-events: none; cursor: default; } .tickets>img { width: 200px; } .header_expand>.link { font-size: 2rem !important; } .header_expand { gap: 3rem; } .section_title { font-size: 4rem; } #moments>.section_title { padding-inline: 1rem; } .splide__slide img { height: 250px; } .flower .text { font-size: 2rem; } .text_slide { padding: 0 .3rem !important; font-size: 1rem; } #boutique { flex-direction: column; gap: 5rem; padding: 1rem; } .card { width: 100%; } .card_title { font-size: 2.5rem !important; } .card>a>.card_title>span>* { width: 35px; } .card>a>.card_title>span { height: 35px; width: 35px; } #newsletter { flex-direction: column; } #submit-newsletter-form, #newsletter>.title { width: 100%; } #newsletter>.title { font-size: 3rem; } #submit-newsletter-form>input { font-size: 2rem; } .contacts_content { flex-direction: column; justify-content: center; align-items: center; gap: 1rem; margin-top: 1rem; } .contacts_content>* { width: 100%; text-align: left; } .contacts_content>div>.title { font-size: 3rem; text-align: left; } .madeby { margin-top: 2rem !important; flex-direction: column; align-items: center; gap: .5rem; } .socials>.content { justify-content: flex-start; } .splide_slide_text>.location { font-size: .8rem; } } #landing { margin-top: 20vh; display: flex; justify-content: space-between; align-items: center; padding-inline: 1rem; flex-direction: column; margin-bottom: 4rem; gap: 1rem; } .bx-chevron-down-circle { text-align: center; } .bx-chevron-down-circle>span { font-size: .5rem; font-family: Inter; text-transform: lowercase; } .tickets { display: flex; justify-content: center; align-items: center; } #fjaka { margin-top: 4rem; } .fjaka_content { color: var(--yellow); border-radius: 30%; max-width: 800px; margin: 0px auto; padding: 1rem; font-size: 2rem; font-family: Inter; font-weight: 400; font-style: normal; } :root { --animation-speed: 30s; /* one full cycle */ --mask-width: 200px; /* width of the fade at edges */ --slide-width: 150px; /* width of each slide */ --slide-count: 14; /* total slides (7 originals + 7 clones) */ } /* Keyframes to move exactly one “set” (7 slides) off-screen */ @keyframes scroll { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--slide-width) * (var(--slide-count) / 2))); } } .slider { width: 100%; margin: auto; overflow: hidden; position: relative; margin-block: 4rem; } .slider::after { right: 0; transform: rotate(180deg); } .slider::before { left: 0; } /* The moving track */ .slide-track { display: flex; width: calc(var(--slide-width) * var(--slide-count)); animation: scroll var(--animation-speed) linear infinite; } /* Individual slides */ .slide { flex: 0 0 auto; width: var(--slide-width); height: 100%; margin-right: 20px; } .slide img { display: block; width: 150px; height: auto; object-fit: contain; } #moments { margin-block: 5rem; } .section_title { color: var(--yellow); font-family: Inter; font-weight: 1000; margin-bottom: 2.5rem; } /* make sure images fill their slides */ .splide__slide img { width: auto; display: block; border-radius: 999px 999px 999px 100px; margin-bottom: .7rem; margin-top: .7rem; box-shadow: 0 0 0 5px var(--red); transition: .25s ease-in-out; } .splide__pagination, .splide__arrows { display: none !important; } .splide_slide_text { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; padding-bottom: 10px; } .splide_slide_text>.date { color: var(--yellow); font-size: 1.5rem; font-family: Inter; font-weight: 1000; text-align: left; } .splide_slide_text>.location { color: var(--yellow); font-family: Inter; font-weight: 400; text-align: left; } .about_content { display: flex; flex-direction: column; padding: 1rem; gap: 5rem; } .flower { position: relative; width: 100%; display: flex; transition: .25s ease-in-out; } .flower:hover>.flower_content>.text, .flower:active>.flower_content>.text { background-color: var(--white); color: var(--red); transition: .25s ease-in-out; mix-blend-mode: difference; } .flower_content { position: relative; } .flower:nth-child(1) { justify-content: flex-start; } .flower:nth-child(2) { justify-content: center; } .flower:nth-child(3) { justify-content: flex-end; } .flower img { width: 700px; } .flower .text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: Inter; font-weight: 1000; width: 90%; margin: 0px auto; text-align: center; color: var(--white); background-color: var(--red); padding: 1rem 1rem; } #boutique { display: flex; justify-content: space-around; margin-top: 5rem; } .card { background-color: var(--red); border-radius: 2rem; color: var(--white); display: flex; flex-direction: column; font-family: Inter; font-weight: 1000; overflow: hidden; transition: all .25s ease-in-out; padding: 1rem; justify-content: flex-end; } .card>a { color: var(--white); } .card>a>.card_title>span>* { position: absolute; fill: var(--white); } .card>a>.card_title>span { overflow: hidden; position: relative; } .card:hover>a>.card_title>span>.topArrow { transition: all .25s ease-in-out; transition: 0.5s cubic-bezier(0.85, 0, 0.15, 1); transform: translate(3rem, -3rem) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1); } .card:hover>a>.card_title>span>.bottomArrow { transition: 0.5s cubic-bezier(0.85, 0, 0.15, 1); transform: translate(0px, 0px) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1); opacity: 1; } .card>a>.card_title>span>.bottomArrow { transform: translate(-2.25rem, 2.25rem) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1); opacity: 0; } .card_image>img { border-radius: 1.5rem; } .card_title { display: flex; align-items: center; gap: .5rem; } #newsletter { margin-block: 5rem; margin-inline: auto; display: flex; padding-inline: 1rem; max-width: max-content; gap: 2rem; justify-content: center; align-items: center; } #newsletter>.title { color: var(--white); font-family: Inter; font-weight: 700; display: flex; flex-direction: column; justify-content: center; align-items: center; line-height: 1; } #submit-newsletter-form { display: flex; flex-direction: column; gap: 1rem; } #submit-newsletter-form>button { padding: 1rem; border-radius: 2rem; border: none; background-color: var(--red); color: var(--white); font-family: Inter; font-weight: 1000; text-transform: uppercase; transition: .25s ease-in-out; font-size: 1.5rem; } #submit-newsletter-form>button:hover { background-color: var(--white); color: var(--red); } #submit-newsletter-form>input:focus-visible { border: none; } #submit-newsletter-form > input { background-color: transparent; border: none; border-bottom: 1px solid var(--white); border-radius: 0 !important; color: var(--white); outline: none; -webkit-appearance: none; appearance: none; box-shadow: none; padding: 0; margin: 0; } #submit-newsletter-form>input::placeholder { background-color: transparent; border: none; color: var(--white); } input:focus { outline: none; } #contacts { margin-top: 5rem; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 1rem; font-family: Inter; } .contacts_content { display: flex; align-items: center; justify-content: space-between; width: 100%; } .contacts_content>div>.title { font-weight: 1000; text-shadow: 0px 0px 4px #fdfcbe8f; } .contacts>.content { display: flex; flex-direction: row; align-items: center; gap: 1rem; } .social-icon { background-color: var(--red); padding: .5rem; border-radius: 50%; border: 2px solid var(--yellow); transition: .25s ease-in-out; } .social-icon:hover { background-color: var(--yellow); border: 2px solid var(--red); transition: .25s ease-in-out; fill: var(--red); } .socials>.content>a { margin-right: -13px; } .madeby { margin-top: 1rem; display: flex; justify-content: space-between; width: 100%; font-weight: 300; } .noise::before { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; content: ""; /* you can control opacity of noise */ opacity: .035; z-index: 10000000; pointer-events: none; background: url("../noise.gif"); } .fjaka_font { font-family: FJAKAFONT; line-height: 1; } .nav_container { position: fixed; left: 50%; transform: translateX(-50%); top: 1%; width: 110px; height: 100px; z-index: 10; } .image_inner_container { position: relative; } .star_image { width: 100%; height: 100%; } .back { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: Inter; font-weight: 1000; color: #ffd79f; font-size: 1.4rem; text-decoration: underline; padding-block: 40px; } #moment_landing { position: relative; z-index: 1; } #moment_landing>.content { height: 100svh; position: relative; background: var(--black); } #moment_landing>.content>img { width: 100%; height: 100%; object-fit: cover; } #moment_landing>.content>.title { position: absolute; bottom: 1.8rem; left: .8rem; display: flex; flex-direction: column; justify-content: center; align-items: center; font-family: Inter; line-height: 1; gap: 10px; font-weight: 600; background-color: var(--red); color: var(--yellow); padding: .5rem 1rem; } #moment_landing>.content>.subtitle { position: absolute; bottom: 1.8rem; right: .8rem; display: flex; flex-direction: column; justify-content: center; align-items: center; font-family: Inter; line-height: 1; gap: 10px; font-weight: 600; background-color: var(--red); color: var(--yellow); padding: .6rem 1rem; box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px; } #moment_landing>.content>.title, #moment_landing>.content>.subtitle { border: 2px solid #ffd79f; } @media screen and (min-width: 1230px) { #moment_landing>.content>.title { font-size: 4rem; } .subtitle { font-size: 2rem; } } @media screen and (max-width: 1230px) { #moment_landing>.content>.title { font-size: 1.7rem; } .subtitle { font-size: 1.5rem; } } .eks { font-size: small !important; } .row { display: -ms-flexbox; /* IE10 */ display: flex; -ms-flex-wrap: wrap; /* IE10 */ flex-wrap: wrap; } .column { -ms-flex: 50%; /* IE10 */ flex: 50%; max-width: 50%; padding-left: 1rem; padding-right: 1rem; padding-bottom: 1rem; } .column img { margin-top: 20px; vertical-align: middle; margin-inline: auto; } @media screen and (max-width: 550px) { #moment_landing .content .title>a:nth-of-type(2) { font-size: 1.6rem !important; } } /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */ @media screen and (max-width: 1500px) { .column { -ms-flex: 100%; flex: 100%; max-width: 100%; } } #backimage { fill: #ffd79f; width: 100px; height: 100px; margin-top: 8px; transition: .25s ease-in-out; } .back:hover>#backimage { fill: black; transition: .25s ease-in-out; } a { color: var(--yellow); } .back:hover>#backimage { color: black; } .momentselected { transition: .25s ease-in-out; box-shadow: 0 0 0 7px var(--yellow) !important; } .tickets-hand { position: fixed; top: 60%; /* Vertical position of the arm's pivot point */ right: 0%; /* Anchors the right edge of the image to the right edge of the viewport */ z-index: 1; height: auto; /* Ensures image scales proportionally */ /* IMPORTANT: Adjust transform-origin for a realistic arm swing. 115% 50% means the pivot point for the arm is 15% of the element's width *beyond* its right edge, and vertically centered. This simulates a shoulder or elbow joint that is off-screen to the right. You might need to fine-tune this '115%' percentage based on the exact dimensions of your image and how far off-screen you want the pivot. */ transform-origin: 115% 50%; animation: giveTicketWithShake 4s ease-in-out infinite; } @keyframes giveTicketWithShake { 0% { /* Initial state: Hand is further off-screen to the right (furthest way back). translateX(50px) pushes the entire element 50px to the right from its default right:0% position. Adjust this value (e.g., 20px, 100px) if you want it more or less off-screen initially. */ transform: translateX(50px) translateY(0) rotate(0deg); } 25% { /* Reach out: Hand extends forward (left) until its right edge is at right:0%. translateX(0) means the element's right edge is flush with the viewport's right edge. This is the "max left" position for the *element*. Adjust translateY and rotate for the presentation angle of the hand. */ transform: translateX(0) translateY(1px) rotate(-2deg); } 30% { /* First subtle wobble during hold. Oscillates around translateX(0) */ transform: translateX(-1.5px) translateY(1.5px) rotate(-2.5deg); } 35% { /* Second subtle wobble */ transform: translateX(0.5px) translateY(1px) rotate(-2.5deg); } 40% { /* Third subtle wobble */ transform: translateX(-2px) translateY(1.8px) rotate(-2.8deg); } 45% { /* Fourth subtle wobble */ transform: translateX(1px) translateY(1.2px) rotate(-2.2deg); } 50% { /* End of shake, holding steady before retracting. Values are the same as 25% (or very close to it) to hold the extended position. */ transform: translateX(0) translateY(1px) rotate(-2deg); } 75% { /* Begin retracting: Hand pulls back. This value should be somewhere between 0 (extended) and 50px (fully retracted). */ transform: translateX(20px) translateY(.5px) rotate(-1deg); } 95% { /* Subtle "overshoot" or slight relaxation before full return for natural feel. */ transform: translateX(45px) translateY(-.6px) rotate(.5deg); } 100% { /* Return to rest: Back to the starting position (furthest way back). */ transform: translateX(50px) translateY(0) rotate(0deg); } } @media screen and (min-width: 551px) { .tickets-hand { width: 15vw; } .thank-you { padding-block: 250px; } .splide__slide img:hover { box-shadow: 0 0 0 10px var(--yellow); transition: .25s ease-in-out; } } @media screen and (max-width: 550px) { .tickets-hand { width: 35vw; height: auto; } .thank-you { padding-top: 200px; padding-bottom: 4rem; } .splide__slide img:hover { box-shadow: 0; transition: .25s ease-in-out; } } .splide.is-initialized { z-index: 1; } .thank-you { color: var(--red); font-family: 'Inter'; font-weight: 900; text-align: center; font-size: 3rem; }