/* --------------------------------Font-------------------------------- */ @font-face { font-family: "MurreyC"; src: url("fonts/MurreyC/murreyc.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "MurreyC"; src: url("fonts/MurreyC/murreyc.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "MurreyC"; src: url("fonts/MurreyC/murreyc.eot") format("eot"); font-weight: 400; font-style: normal; font-display: swap; } /* --------------------------------MAIN-------------------------------- */ body { background: url("images/ChatGPT\ Image\ 5\ янв.\ 2026\ г.\,\ 15_49_39.png") no-repeat 100% 100% fixed; background-size: cover; font-family: "MurreyC"; font-size: 16px; font-weight: 400; letter-spacing: 3px; height: auto; } button { background-color: #3a1f09; padding: 0 15px; border-radius: 33px; transition: all .1s; color: #e5b97e; box-shadow: #3a1f09 2px 4px 10px 2px; } button:hover { background-color: #f0c590; color: #b06029; transform: scale(1.015); } img { max-width: 100%; } .content { } /* -------------------------------HEADER------------------------------ */ .header { width: 100%; background-color: #663c24; padding: 20px 180px; margin-top: 40px; margin-bottom: 40px; box-shadow: #3a1f09 2px 4px 10px 2px; } .nav { } .menu { display: flex; justify-content: center; gap: 20px; } .items_up { display: flex; gap: 20px; } .items_down { display: flex; gap: 20px; } .item { color: #e7b15c; font-size: 36px; font-weight: 900; transition: all .3s; text-shadow: 1px 2px #322624; } .item:hover { } .link { transition: all .3s; } .link:hover { text-decoration: underline; } /* BURGER */ .burger { display: none; width: 40px; height: 30px; position: relative; cursor: pointer; z-index: 1001; } .burger span { position: absolute; left: 0; width: 100%; height: 4px; background: #e7b15c; border-radius: 5px; transition: 0.4s; } /* 3 полоски */ .burger span:nth-child(1) { top: 0; } .burger span:nth-child(2) { top: 50%; transform: translateY(-50%); } .burger span:nth-child(3) { bottom: 0; } .burger.active span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); } .burger.active span:nth-child(2) { opacity: 0; } .burger.active span:nth-child(3) { top: 50%; transform: translateY(-50%) rotate(-45deg); } /* MOBILE MENU */ @media (max-width: 900px) { .header { position: fixed; padding: 20px; display: flex; justify-content: space-between; align-items: center; z-index: 100; width: 10%; border-radius: 10px; margin-left: 40px; box-shadow: #444 2px 2px 4px 0px; } .burger { display: block; display: flex; } .nav { position: fixed; top: 0; left: 0; /* ВАЖНО */ width: 100%; height: 100vh; background: rgba(102, 60, 36, 0.97); backdrop-filter: blur(12px); display: flex; justify-content: center; align-items: center; transform: translateY(-100%); transition: 0.5s ease; z-index: 1000; } .nav.active { transform: translateY(0); } .nav::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, transparent 40%, rgba(0,0,0,0.4)); } .menu { flex-direction: column; gap: 30px; text-align: center; } .item { font-size: 28px; } .link { position: relative; } /* красивый hover эффект */ .link::after { content: ""; position: absolute; left: 0; bottom: -5px; width: 0%; height: 2px; background: #e7b15c; transition: 0.3s; } .link:hover::after { width: 100%; } } /* --------------------------------Welcome----------------------------- */ .heading { background: url("images/25.png") 50% 100% / cover; margin: 0px 400px; /* border: 10px solid rgb(184, 136, 48); */ /* border: 15px double rgb(184, 136, 48); */ height: 640px; box-shadow: #000000 2px 4px 10px 2px; } .heading_content { padding: 15px 100px; } .heading_cont { position: relative; z-index: 1; padding: 20px 0px 20px 0px; text-align: center; box-shadow: #000000 2px 4px 10px 2px; } .heading_cont::after { z-index: -1; position: absolute; content: ""; display: block; background-color: rgba(184, 136, 48, 0.8); height: 100%; width: 100%; top: 0; border: 1px solid #42240c; } .heding_title { font-size: 42px; font-weight: 900; /* text-decoration: underline; */ } .heading_info { font-size: 36px; font-weight: 700; text-transform: uppercase; /* color: #eccfae; */ } .heading_date { font-size: 32px; font-weight: 700; border-top: 3px solid #000; border-bottom: 3px solid #000; /* background-image: linear-gradient(to left, rgb(66, 36, 12), rgb(184, 136, 48)); */ } .heading_text { font-size: 26px; padding: 0 20px; font-weight: 700; } .btn_share { margin-top: 10px; font-size: 30px; } .asise { } .time{ padding-top: 15px; font-size: 110px; text-align: center; background-image: linear-gradient(90deg,rgba(26, 21, 26, 1) 0%, rgba(101, 62, 39, 1) 50%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: #000 2px 2px 6px; } /* -----------------------------------PEOPLE-------------------------------------- */ .people { width: 1400px; margin: 0 auto; /* padding-bottom: 80px; */ padding-top: 40px; } .heading_h4 { margin-top: 40px; } h4 { display: block; border-top: 3px solid #000; border-bottom: 3px solid #000 ; font-size: 60px; text-align: center; font-weight: 900; width: 30%; margin: 0 auto; line-height: 1.2; margin-bottom: 40px; } .newlywed { margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; width: 100%; margin-bottom: 40px; } .newlywed_item { display: flex; align-items: center; background-color: rgba(245, 198, 124, 0.9); padding: 20px; box-shadow: #000000 2px 4px 10px 2px; } .img_newlywed { width: 40%; width: 240px; height: 240px; border-radius: 50%; border: 1px solid #47312c; } .newlywed_text { margin-left: 20px; width: 60%; } .newlywed_title { font-size: 29px; font-weight: 700; text-decoration: underline; line-height: 1.5; margin-bottom: 15px; } .newlywed_info { font-size: 26px; } .guest_list { } .guest_inner { display: flex; justify-content: space-around; } .guest_item { text-align: center; background: url("images/55555.jpg") 100% 100% / cover; padding: 40px 80px; border-radius: 33px; opacity: 0.8; } .guest_index { font-size: 48px; font-weight: 900; font-style: italic; color: rgb(252, 220, 180); } .guest_item_list { } .guest_name { font-size: 36px; font-style: italic; color: #e5b97e; } /* ---------------------------------TIMETABLE----------------------------------- */ .timetable { margin: 0 auto; width: 80%; padding-bottom: 60px; padding-top: 40px; } .time_wrapper { height: 700px; display: flex; align-items: center; justify-content: center; position: relative; } .time_wrapper::after { position: absolute; content: ""; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); } .time_inner { height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .time_content { z-index: 10; } .time_row_up { display: flex; justify-content: space-between; margin-bottom: 40px; } .row_up_item { background-color: #e5b97e; width: 380px; padding: 35px; display: flex; justify-content: center; align-items: center; text-align: center; border-radius: 33px; margin: 0 20px; } .time_img_box { } .time_img { width: 60px; height: 60px; margin-bottom: 10px; } .time_line { } .time_row_down { display: flex; justify-content: space-between; } .time_h6 { font-size: 26px; font-weight: 900; } .time_p { font-size: 28px; font-weight: 900; text-decoration: underline; margin-bottom: 10px; } .time_comment { font-size: 24px; } /* ----------------------------------TRANSFER--------------------------------------- */ .transfer { margin-bottom: 60px; padding-top: 40px; } .transfer_title { } .transfer_inner { margin-top: 60px; } .transfer_map { margin: 0 auto; display: flex; justify-content: center; align-items: center; gap: 100px; } .map > div { border: 1px solid #000; width: 760px; /* или 100% */ height: 500px; } .map iframe { width: 100%; height: 100%; border: none; } .map_adress { font-size: 50px; text-align: center; margin-top: 20px; font-weight: 900; } .map_info { font-size: 50px; text-align: center; margin-top: 10px; font-weight: 900; } .map_time { font-size: 50px; text-align: center; margin-top: 10px; font-weight: 900; } /* --------------------------------PHOTOS-------------------------------------- */ .photos { padding-bottom: 140px; margin: 0 60px; padding-top: 60px; } .photos_title { margin-bottom: 100px; } .swiper_img { height: 500px; border: 5px dotted #000; } .swiper { width: 100%; height: 550px; text-align: center; padding: 20px; margin: 0px auto; overflow: hidden !important; /* возвращаем скрытие слайдов */ } .swiper-wrapper { width: 100%; } .swiper-slide { text-align: center; } .swiper-navigation-icon { color: #000; } .swiper-button-prev { left: -10px !important; } .swiper-button-next { right: -10px !important; } /* --------------------------------------------TODOLIST------------------------------------------------------ */ .to-do-list { padding-bottom: 100px; padding-top: 40px; } .do-list_title { } .to-do-list_wrapper { width: 100%; padding-top: 40px; } .to-do-list_items { margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px; width: 60%; } .to-do-list_item { background: linear-gradient(135deg, #f3d9c6, #e8c3a4, #d9a77a); backdrop-filter: blur(6px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); width: 300px; height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 30px; text-align: center; font-size: 28px; font-weight: 900; border-radius: 20px; border: 1px solid rgba(0,0,0,0.05); color: #3e2a1f; text-shadow: 0 1px 1px rgba(255,255,255,0.3); } .to-do-list_item_img { width: 50px; height: 50px; } /* ---------------------------ANSWER----------------------------------- */ .answer { padding-bottom: 100px; padding-top: 40px; } .answer_wrapper { background: linear-gradient(135deg, #f3d9c6, #e8c3a4, #d9a77a); padding: 50px; margin: 0 300px; border-radius: 25px; box-shadow: 0 15px 40px rgba(0,0,0,0.08); margin-top: 20px; } .answer_heading { text-align: center; font-size: 42px; margin-bottom: 50px; color: #2f1e14; font-weight: 900; } .form-info { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 50px; margin-bottom: 40px; } .form-connect { width: 100%; display: flex; flex-direction: column; gap: 20px; } .form_name { color: #2f1e14; display: flex; flex-direction: column; gap: 20px; font-size: 36px; font-weight: 700; justify-content: space-between; width: 500px; } label { display: flex; justify-content: space-between; } .label_1 { flex-direction: column; gap: 20px; } .block_title { font-weight: 700; margin-bottom: 20px; color: #2f1e14; font-size: 36px; } .option { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 30px; justify-content: start; } input[type="text"] { padding: 12px 15px; border-radius: 20px; border: none; background: #fffaf3; font-size: 18px; } input[type="radio"], input[type="checkbox"] { width: 18px; height: 18px; } .answer_btn { grid-column: 1 / -1; padding: 18px 40px; border-radius: 30px; border: none; font-size: 36px; font-weight: 700; background: #2f1e14; color: white; cursor: pointer; transition: 0.3s ease; } .answer_btn:hover { background: #1e140d; transform: translateY(-3px); } .form_name input[type="text"] { width: 320px; /* одинаковая ширина */ height: 50px; /* одинаковая высота */ padding: 0 20px; border-radius: 25px; border: none; background-color: #ffffff; outline: none; font-size: 30px; } textarea { padding: 0 20px; border-radius: 25px; border: none; background-color: #ffffff; font-size: 30px; } /* -----------------------------FOOTER---------------------------------- */ .footer { background-color: #2f1e14; color: #fff; box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.3); } .footer_inner { display: flex; justify-content: space-between; align-items: center; padding: 20px 30px; } .footer_title { display: flex; flex-direction: column; text-align: center; gap: 5px; } .fotter_logo { font-size: 42px; text-decoration: underline; margin-bottom: 25px; } .footer_date { font-size: 36px; } .footer_place { font-size: 30px; } .footer_contacts { display: flex; flex-direction: column; align-items: center; gap: 10px; } .footer_cnt { display: flex; align-items: center; gap: 12px; font-size: 30px; transition: all .3s; } .footer_cnt:hover { text-decoration: underline; } .footer_cnt svg:hover { transform: scale(1.02); } .footer_text { font-size: 50px; } .footer_cntcts { display: flex; gap: 30px; } .footer_copy { font-size: 30px; text-align: end; } .footer_hashtag { text-decoration: underline; font-size: 36px; margin-bottom: 25px; } .footer_copyright { } /* --------------------------------------------------------ADAPTIVE------------------------------------------------------ */ /* обычные экраны */ @media (max-width: 1720px) { .item { font-size: 30px; } .map > div { width: 680px; height: 450px; } .heading { margin: 0 350px; } } @media (max-width: 1620px) { .row_up_item { width: 350px; } .time_img { width: 50px; height: 50px; } .time_h6 { font-size: 22px; } .time_p { font-size: 26px; } .time_comment { font-size: 22px; } .img_newlywed { height: 200px; width: 200px; } .heading { margin: 0 300px; height: 580px; } } @media (max-width: 1520px) { .menu { flex-direction: column; } .items_up, .items_down { justify-content: center; gap: 100px; } .heading_content { padding: 15px 60px; } .heading { margin: 0 280px; } .time { font-size: 90px; } .transfer_map { gap: 50px; } .map > div { width: 620px; height: 420px; } .form_name { font-size: 30px; width: 430px; } .block_title { font-size: 30px; } .form_name input[type="text"] { width: 300px; } .answer_btn { font-size: 30px; } .to-do-list_items { width: 70%; } } @media (max-width: 1420px) { .heading { margin: 0 250px; } .newlywed { width: 50%; } .row_up_item { width: 300px; } .time_comment { font-size: 20px; } .time_p { font-size: 22px; } .time_img { width: 40px; height: 40px; } .map > div { width: 560px; height: 400px; } .map_adress { font-size: 30px; } .map_info { font-size: 35px; } .map_time { font-size: 40px; } .form-info { display: block; grid: none; } .form_name { width: 100%; padding: 0 140px; margin-bottom: 30px; } .form_menu, .form_drink { padding: 0 140px; margin-bottom: 30px; } .newlywed { display: flex; flex-direction: column; } .newlywed_text { margin-left: 50px; } .people { width: auto; } } @media (max-width: 1320px){ .heading { height: 480px; } .time { font-size: 70px; } .newlywed_info { font-size: 24px; } .form_name { padding: 0 80px; } .form_menu, .form_drink { padding: 0 80px; } .newlywed_info { font-size: 22px; } .map > div { width: 500px; height: 350px; } .heading { margin: 0 200px; } .to-do-list_items { width: 80%; } .img_newlywed { height: 160px; width: 160px; } } @media (max-width: 1220px){ .heading { margin: 0 160px; } }