/* ========================================================== AURORA WEDDING WEBSITE RESPONSIVE.CSS Part 1 : Global Responsive Version : 1.0 ========================================================== */ /* ========================================================== LARGE DESKTOP 1600px ========================================================== */ @media screen and (max-width:1600px){ .section{ padding:120px 7%; } } /* ========================================================== DESKTOP 1400px ========================================================== */ @media screen and (max-width:1400px){ :root{ --fs-hero:4.8rem; --fs-h1:3.2rem; --fs-h2:2.3rem; } .section{ padding:110px 6%; } } /* ========================================================== LAPTOP 1200px ========================================================== */ @media screen and (max-width:1200px){ :root{ --fs-hero:4.2rem; --fs-h1:3rem; --fs-h2:2.2rem; } .section{ padding:100px 5%; } .section-header{ margin-bottom:60px; } } /* ========================================================== TABLET 992px ========================================================== */ @media screen and (max-width:992px){ :root{ --fs-hero:3.8rem; --fs-h1:2.8rem; --fs-h2:2rem; --fs-h3:1.4rem; } html{ font-size:95%; } .section{ padding:90px 5%; } .section-header{ max-width:680px; } .btn-primary, .btn-secondary, .btn-outline{ min-width:170px; padding:14px 28px; } } /* ========================================================== MOBILE 768px ========================================================== */ @media screen and (max-width:768px){ :root{ --fs-hero:3.2rem; --fs-h1:2.5rem; --fs-h2:1.9rem; --fs-h3:1.3rem; --fs-body:.96rem; } html{ font-size:94%; } .section{ padding:80px 24px; } .section-header{ margin-bottom:50px; } .section-subtitle{ letter-spacing:2px; } .btn-primary, .btn-secondary, .btn-outline{ min-width:160px; padding:14px 26px; } } /* ========================================================== LARGE PHONE 576px ========================================================== */ @media screen and (max-width:576px){ :root{ --fs-hero:2.9rem; --fs-h1:2.2rem; --fs-h2:1.8rem; } html{ font-size:93%; } .section{ padding:70px 20px; } .section-header{ margin-bottom:42px; } .section-description{ width:100%; } .btn-primary, .btn-secondary, .btn-outline{ width:100%; } } /* ========================================================== PHONE 430px ========================================================== */ @media screen and (max-width:430px){ :root{ --fs-hero:2.6rem; --fs-h1:2rem; --fs-h2:1.65rem; } .section{ padding:65px 18px; } } /* ========================================================== SMALL PHONE 390px ========================================================== */ @media screen and (max-width:390px){ html{ font-size:92%; } .section{ padding:60px 16px; } } /* ========================================================== iPHONE 375px ========================================================== */ @media screen and (max-width:375px){ :root{ --fs-hero:2.45rem; --fs-h1:1.9rem; --fs-h2:1.55rem; } } /* ========================================================== EXTRA SMALL 360px ========================================================== */ @media screen and (max-width:360px){ html{ font-size:91%; } } /* ========================================================== MINI DEVICE 320px ========================================================== */ @media screen and (max-width:320px){ :root{ --fs-hero:2.2rem; --fs-h1:1.7rem; --fs-h2:1.45rem; } html{ font-size:90%; } .section{ padding:55px 14px; } } /* ========================================================== HERO RESPONSIVE ========================================================== */ /* ========================================================== LAPTOP 1200px ========================================================== */ @media screen and (max-width:1200px){ #hero{ padding:110px 5% 70px; } .hero-container{ gap:60px; } .hero-title{ font-size:clamp(3.6rem,7vw,5rem); } .hero-image img{ width:460px; } .hero-image::before{ width:460px; height:460px; } } /* ========================================================== TABLET 992px ========================================================== */ @media screen and (max-width:992px){ #hero{ padding:100px 5% 60px; } .hero-container{ grid-template-columns:1fr; gap:60px; text-align:center; } .hero-content{ align-items:center; order:2; } .hero-image{ order:1; } .hero-description{ max-width:640px; margin-left:auto; margin-right:auto; } .hero-action{ justify-content:center; flex-wrap:wrap; } } /* ========================================================== MOBILE 768px ========================================================== */ @media screen and (max-width:768px){ #hero{ min-height:100svh; padding:90px 24px 50px; } .hero-container{ gap:48px; } .hero-title{ font-size:clamp(2.8rem,11vw,4rem); line-height:1; } .hero-image img{ width:340px; } .hero-image::before{ width:340px; height:340px; } .hero-description{ margin-bottom:32px; } .hero-action{ width:100%; gap:14px; } .hero-action .btn-primary{ width:100%; min-width:unset; } } /* ========================================================== LARGE PHONE 576px ========================================================== */ @media screen and (max-width:576px){ #hero{ padding:80px 20px 45px; } .hero-overline{ font-size:.85rem; letter-spacing:2px; } .hero-date{ font-size:.9rem; } .hero-wedding-date{ font-size:1.7rem; } .hero-image img{ width:300px; } .hero-image::before{ width:300px; height:300px; } } /* ========================================================== PHONE 430px ========================================================== */ @media screen and (max-width:430px){ .hero-title{ font-size:2.6rem; } .hero-image img{ width:270px; } .hero-image::before{ width:270px; height:270px; } } /* ========================================================== SMALL PHONE 390px ========================================================== */ @media screen and (max-width:390px){ #hero{ padding:75px 18px 40px; } .hero-container{ gap:40px; } .hero-wedding-date{ font-size:1.5rem; } } /* ========================================================== iPHONE 375px ========================================================== */ @media screen and (max-width:375px){ .hero-title{ font-size:2.4rem; } .hero-image img{ width:250px; } .hero-image::before{ width:250px; height:250px; } } /* ========================================================== EXTRA SMALL 360px ========================================================== */ @media screen and (max-width:360px){ .hero-description{ font-size:.95rem; } .hero-action{ gap:12px; } } /* ========================================================== MINI DEVICE 320px ========================================================== */ @media screen and (max-width:320px){ #hero{ padding:70px 14px 36px; } .hero-title{ font-size:2.15rem; } .hero-image img{ width:220px; } .hero-image::before{ width:220px; height:220px; } .hero-wedding-date{ font-size:1.35rem; } } /* ========================================================== INVITEE MUSIC BUTTON SCROLL INDICATOR ========================================================== */ /* ========================================================== LAPTOP 1200px ========================================================== */ @media screen and (max-width:1200px){ #invitee{ padding-bottom:110px; } .invitee-card{ max-width:620px; } } /* ========================================================== TABLET 992px ========================================================== */ @media screen and (max-width:992px){ #invitee{ padding-left:5%; padding-right:5%; } .invitee-card{ padding:40px 34px; } #guestName{ font-size:1.9rem; } } /* ========================================================== MOBILE 768px ========================================================== */ @media screen and (max-width:768px){ #invitee{ padding-left:24px; padding-right:24px; padding-bottom:90px; } .invitee-card{ padding:34px 24px; } .invitee-label{ font-size:.85rem; } #guestName{ font-size:1.7rem; } .invitee-note{ margin-bottom:28px; } .invitee-card .btn-secondary{ width:100%; min-width:unset; } .music-button{ right:20px; bottom:20px; width:54px; height:54px; } .music-button svg{ width:20px; height:20px; } .scroll-indicator{ bottom:20px; } } /* ========================================================== LARGE PHONE 576px ========================================================== */ @media screen and (max-width:576px){ .invitee-card{ padding:30px 20px; } #guestName{ font-size:1.55rem; } .invitee-note{ font-size:.95rem; } .music-button{ width:50px; height:50px; } } /* ========================================================== PHONE 430px ========================================================== */ @media screen and (max-width:430px){ #invitee{ padding-left:18px; padding-right:18px; } .invitee-card{ border-radius:var(--radius-md); } .scroll-indicator{ width:28px; height:52px; } } /* ========================================================== SMALL PHONE 390px ========================================================== */ @media screen and (max-width:390px){ .invitee-card{ padding:28px 18px; } #guestName{ font-size:1.45rem; } .music-button{ right:16px; bottom:16px; } } /* ========================================================== iPHONE 375px ========================================================== */ @media screen and (max-width:375px){ .invitee-label{ font-size:.8rem; } .invitee-note{ font-size:.9rem; } } /* ========================================================== EXTRA SMALL 360px ========================================================== */ @media screen and (max-width:360px){ .music-button{ width:48px; height:48px; } .music-button svg{ width:18px; height:18px; } } /* ========================================================== MINI DEVICE 320px ========================================================== */ @media screen and (max-width:320px){ #invitee{ padding-left:14px; padding-right:14px; padding-bottom:70px; } .invitee-card{ padding:24px 16px; } #guestName{ font-size:1.3rem; } .scroll-indicator{ width:24px; height:46px; } } /* ========================================================== OUR STORY COUNTDOWN ========================================================== */ /* ========================================================== LAPTOP 1200px ========================================================== */ @media screen and (max-width:1200px){ .story-wrapper{ gap:28px; } .story-card{ padding:38px 30px; } .countdown-wrapper{ gap:24px; } } /* ========================================================== TABLET 992px ========================================================== */ @media screen and (max-width:992px){ .story-wrapper{ grid-template-columns:1fr; gap:24px; } .story-card{ padding:34px 28px; } .story-wrapper > *{ min-height:auto; } .countdown-wrapper{ grid-template-columns:repeat(2,1fr); gap:22px; } .count-box{ padding:34px 20px; } } /* ========================================================== MOBILE 768px ========================================================== */ @media screen and (max-width:768px){ .story-card{ padding:30px 24px; } .story-icon{ width:60px; height:60px; margin-bottom:20px; font-size:1.5rem; } .story-card h3{ margin-bottom:14px; } .countdown-wrapper{ gap:18px; } .count-box{ padding:28px 18px; } .count-box span{ font-size:2.8rem; } } /* ========================================================== LARGE PHONE 576px ========================================================== */ @media screen and (max-width:576px){ .story-card{ padding:26px 20px; } .story-icon{ width:54px; height:54px; font-size:1.35rem; } .countdown-wrapper{ grid-template-columns:repeat(2,1fr); gap:16px; } .count-box{ padding:24px 16px; } .count-box span{ font-size:2.4rem; } .count-box small{ font-size:.8rem; } } /* ========================================================== PHONE 430px ========================================================== */ @media screen and (max-width:430px){ .story-card{ border-radius:var(--radius-md); } .count-box{ border-radius:var(--radius-md); } .count-box span{ font-size:2.2rem; } } /* ========================================================== SMALL PHONE 390px ========================================================== */ @media screen and (max-width:390px){ .story-card{ padding:24px 18px; } .count-box{ padding:22px 14px; } .count-box span{ font-size:2rem; } } /* ========================================================== iPHONE 375px ========================================================== */ @media screen and (max-width:375px){ .story-icon{ width:50px; height:50px; font-size:1.25rem; } .count-box small{ font-size:.75rem; letter-spacing:.5px; } } /* ========================================================== EXTRA SMALL 360px ========================================================== */ @media screen and (max-width:360px){ .countdown-wrapper{ gap:14px; } .count-box{ padding:20px 12px; } } /* ========================================================== MINI DEVICE 320px ========================================================== */ @media screen and (max-width:320px){ .story-card{ padding:20px 16px; } .story-card h3{ font-size:1.2rem; } .story-card p{ font-size:.9rem; } .count-box{ padding:18px 10px; } .count-box span{ font-size:1.8rem; } .count-box small{ font-size:.7rem; } } /* ========================================================== WEDDING EVENT GALLERY ========================================================== */ /* ========================================================== LAPTOP 1200px ========================================================== */ @media screen and (max-width:1200px){ .event-wrapper{ gap:30px; } .event-card{ padding:42px 30px; } .gallery-grid{ gap:20px; } } /* ========================================================== TABLET 992px ========================================================== */ @media screen and (max-width:992px){ .event-wrapper{ grid-template-columns:1fr; gap:24px; } .event-card{ max-width:720px; width:100%; margin:0 auto; } .gallery-grid{ grid-template-columns:repeat(2,1fr); gap:18px; } } /* ========================================================== MOBILE 768px ========================================================== */ @media screen and (max-width:768px){ .event-card{ padding:34px 24px; } .event-card h3{ font-size:1.7rem; } .event-location{ max-width:100%; } .event-card .btn-outline{ width:100%; } .gallery-grid{ grid-template-columns:1fr; gap:18px; } .gallery-item{ border-radius:var(--radius-md); } } /* ========================================================== LARGE PHONE 576px ========================================================== */ @media screen and (max-width:576px){ .event-card{ padding:30px 20px; } .event-card h3{ font-size:1.5rem; } .event-date{ font-size:.9rem; } .event-time{ font-size:1rem; } .gallery-grid{ gap:16px; } } /* ========================================================== PHONE 430px ========================================================== */ @media screen and (max-width:430px){ .event-card{ border-radius:var(--radius-md); } .gallery-item img{ aspect-ratio:4/5; } } /* ========================================================== SMALL PHONE 390px ========================================================== */ @media screen and (max-width:390px){ .event-card{ padding:26px 18px; } .event-location{ margin-bottom:22px; } } /* ========================================================== iPHONE 375px ========================================================== */ @media screen and (max-width:375px){ .gallery-grid{ gap:14px; } } /* ========================================================== EXTRA SMALL 360px ========================================================== */ @media screen and (max-width:360px){ .event-card h3{ font-size:1.35rem; } .gallery-item{ border-radius:14px; } } /* ========================================================== MINI DEVICE 320px ========================================================== */ @media screen and (max-width:320px){ .event-card{ padding:22px 16px; } .event-date{ font-size:.85rem; } .event-time{ font-size:.9rem; } .event-location{ font-size:.88rem; } .gallery-grid{ gap:12px; } } /* ========================================================== RSVP WISHES WEDDING GIFT FOOTER ========================================================== */ /* ========================================================== LAPTOP 1200px ========================================================== */ @media screen and (max-width:1200px){ .rsvp-wrapper, .wishes-wrapper, .gift-wrapper{ max-width:900px; } } /* ========================================================== TABLET 992px ========================================================== */ @media screen and (max-width:992px){ #laso-rsvp{ padding:26px; } #wish-form{ padding:30px; } .gift-card{ max-width:700px; margin:0 auto; } #footer{ padding:70px 5% 45px; } } /* ========================================================== MOBILE 768px ========================================================== */ @media screen and (max-width:768px){ .rsvp-wrapper, .wishes-wrapper, .gift-wrapper{ max-width:100%; } #laso-rsvp{ min-height:560px; padding:20px; } #laso-rsvp iframe{ min-height:540px; } .wish-card{ padding:22px 20px; } #wish-form{ padding:24px; } #wish-form .btn-primary{ width:100%; } .gift-card{ padding:34px 24px; } #copyRekening{ width:100%; } #footer{ padding:60px 24px 36px; } .footer-content h3{ font-size:2.2rem; } } /* ========================================================== LARGE PHONE 576px ========================================================== */ @media screen and (max-width:576px){ #laso-rsvp{ min-height:520px; padding:18px; } #laso-rsvp iframe{ min-height:500px; } .wish-card{ padding:20px 18px; } #wish-form{ padding:20px; } .gift-card{ padding:30px 20px; } .account-number{ font-size:1.8rem; } } /* ========================================================== PHONE 430px ========================================================== */ @media screen and (max-width:430px){ #laso-rsvp{ border-radius:var(--radius-md); } #wish-form{ border-radius:var(--radius-md); } .wish-card{ border-radius:var(--radius-md); } .gift-card{ border-radius:var(--radius-md); } } /* ========================================================== SMALL PHONE 390px ========================================================== */ @media screen and (max-width:390px){ #laso-rsvp{ padding:16px; } #wish-form{ padding:18px; } .gift-card{ padding:26px 18px; } .account-number{ font-size:1.6rem; } .footer-content h3{ font-size:2rem; } } /* ========================================================== iPHONE 375px ========================================================== */ @media screen and (max-width:375px){ .wish-card{ padding:18px 16px; } .footer-content p{ font-size:.92rem; } } /* ========================================================== EXTRA SMALL 360px ========================================================== */ @media screen and (max-width:360px){ .account-number{ font-size:1.5rem; } .footer-content h3{ font-size:1.8rem; } } /* ========================================================== MINI DEVICE 320px ========================================================== */ @media screen and (max-width:320px){ #laso-rsvp{ min-height:480px; padding:14px; } #laso-rsvp iframe{ min-height:460px; } .wish-card{ padding:16px 14px; } #wish-form{ padding:16px; } #wish-form input, #wish-form textarea{ padding:12px 14px; } .gift-card{ padding:22px 16px; } .account-number{ font-size:1.3rem; letter-spacing:.5px; } .footer-content h3{ font-size:1.6rem; } .footer-content small{ font-size:.75rem; } }