.image-swap {
transition: opacity 0.4s ease-in-out, transform 0.4s ease;
will-change: opacity;
display: block;
} .wp-block-image a:hover {
box-shadow: 0 8px 25px rgba(0,0,0,0.25);
overflow: hidden;
} @font-face {
font-family: 'Times New Roman PS'; src: url(//cafe-sultan.ru/wp-content/themes/cafe-sultan/fonts/timesnewromanpsmt.ttf) format('truetype');
font-weight: 400; font-style: normal;
font-display: swap; } @font-face {
font-family: 'Times New Roman PS';
src: url(//cafe-sultan.ru/wp-content/themes/cafe-sultan/fonts/timesnewromanps_italicmt.ttf) format('truetype');
font-weight: 400;
font-style: italic;
font-display: swap;
} *, *::before, *::after {
box-sizing: border-box; margin: 0;
padding: 0;
}
body {
font-family: 'Times New Roman PS', serif; font-size: 18px; line-height: 1.6; color: #fff;
background-color: #000;
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.content {
width: 100%;
max-width: 1440px;
padding: 20px;
margin: 0 auto;
} h1, h2, h3, h4, h5, h6 {
}
h1 {
font-size: clamp(2rem, 5vw, 4rem);
line-height: 1.2;
margin-bottom: 0.5em;
font-weight: 400;
}
h2 {
font-size: clamp(1.75rem, 4vw, 3rem);
line-height: 1.3;
margin-bottom: 0.5em;
}
h3 {
font-size: clamp(1.5rem, 3vw, 2.25rem);
line-height: 1.4;
margin-bottom: 0.5em;
}
h4 {
font-size: clamp(1.25rem, 2.5vw, 1.75rem);
line-height: 1.4;
margin-bottom: 0.5em;
}
h5 {
font-size: clamp(1.1rem, 2vw, 1.5rem);
line-height: 1.5;
margin-bottom: 0.5em;
}
h6 {
font-size: clamp(1rem, 1.5vw, 1.25rem);
line-height: 1.5;
margin-bottom: 0.5em;
text-transform: uppercase;
letter-spacing: 1px;
} p {
}
a {
color: #ffffff;
text-decoration: none;
transition: color 0.3s ease;
}
.content a {
color: #8e00a7;
}
a:hover {
color: #ccc;
}
ul, ol {
margin-bottom: 1.5em;
padding-left: 1.5em;
}
li {
margin-bottom: 0.5em;
}
img {
max-width: 100%;
height: auto;
display: block;
} .head-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
z-index: 2;
padding: 15px 20px;
box-sizing: border-box;
color: #fff;
font-family: 'Times New Roman PS', serif;
}
.head-info-2 {
position: relative;
width: 100%;
min-height: 300px;
}
.head-adress a {
width: fit-content;
}
.hti-t {
display: flex;
gap: 60px;
max-width: 1400px;
width: 100%;
margin: 0 auto;
padding: 5px 0;
}
.hti-t > a {
display: inline-block;
line-height: 0;
flex-shrink: 0;
}
.hti-t > a img {
max-height: 100px;
width: auto;
}
.hti-t .hti-tr {
display: flex;
flex-wrap: wrap;
gap: 20px;
flex-direction: column;
padding-top: 20px;
}
.hti-tr .head-menu{
display: flex;
gap: 60px;
background-color: #221f20;
padding: 0 20px;
}
.hti-t .hti-tr .head-menu a {
color: #fff;
text-decoration: none;
font-size: 1.5rem;
font-weight: 500;
padding: 5px 8px;
text-shadow: 0 2px 4px rgba(0,0,0,0.7);
transition: opacity 0.2s ease;
white-space: nowrap;
}
.hti-tr .head-adress {
display: flex;
flex-direction: column;
gap: 0;
}
.hti-b {
max-width: 1400px;
width: 100%;
margin: 0 auto;
padding: 5px 0 10px;
}
.hti-b div {
display: grid;
align-items: center;
font-size: 1rem;
margin: 0 auto;
width: fit-content;
}
.hti-b p {
margin: 0;
text-shadow: 0 2px 4px rgba(0,0,0,0.7);
}
.hti-b a {
color: #fff;
text-decoration: none;
font-weight: 600;
text-shadow: 0 2px 4px rgba(0,0,0,0.7);
transition: opacity 0.2s;
}
.head-2-info {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 20px;
flex-wrap: wrap;
max-width: 1400px;
width: 100%;
margin: 0 auto;
padding: 10px 0 20px;
}
.head2i-l {
flex: 1 1 300px;
max-width: 55%;
}
.head2i-l p {
margin: 0;
font-size: 22px;
line-height: 1.5;
text-shadow: 0 2px 4px rgba(0,0,0,0.7);
}
.head2i-r {
flex: 0 0 auto;
display: flex;
flex-direction: column;
gap: 6px;
text-align: right;
}
.head2i-r h2 {
margin: 0;
font-size: 36px;
font-weight: 600;
line-height: 1.3;
text-shadow: 0 2px 4px rgba(0,0,0,0.7);
}
.head-info {
position: relative;
width: 100%;
min-height: 400px;
}
.head-info img.head-fon {
width: 100%;
height: auto;
display: block;
object-fit: contain;
object-position: center;
}  .delivery-banner {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999; width: 300px;
background: #fff; border-radius: 12px;
box-shadow: 0 10px 25px rgba(0,0,0,0.15); overflow: hidden; opacity: 0;
transform: translateY(100px); transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; } .delivery-banner.visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
} .delivery-banner.closed {
display: none !important;
} .delivery-close {
position: absolute;
top: 8px;
right: 8px;
width: 24px;
height: 24px;
background: rgba(0, 0, 0, 0.5); color: #fff;
border: none;
border-radius: 50%;
font-size: 18px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s ease;
z-index: 2;
}
.delivery-close:hover {
background: rgba(0, 0, 0, 0.8);
} .img-dostav {
width: 100%;
height: auto;
display: block;
} @media (max-width: 768px) {
.delivery-banner {
width: calc(100% - 40px); max-width: 320px; bottom: 15px;
right: 20px;
left: 20px; margin: 0 auto;
}
}
footer {
background-image: url(https://cafe-sultan.ru/wp-content/uploads/2026/03/back-footer.webp);
background-size: cover; background-position: center; background-repeat: no-repeat; min-height: 200px; width: 100%; }
footer .footer-logo {
max-height: 100px;
width: auto;
}
.back-foot {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
margin: 0 auto;
max-width: 1400px;
padding-top: 40px;
position: relative;
overflow: hidden;
}
footer hr {
margin: 10px auto;
max-width: 1400px;
border-color: #727272;
}
.foot-bot {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
max-width: 1400px;
position: relative;
margin: 0px auto;
padding-bottom: 10px;
}
.foot-bot a {
color: #727272;
}
.foot-into {
display: flex;
flex-direction: column;
font-size: 24px;
}
.foot-soc {
display: flex;
align-items: center;
}
.foot-soc img {
max-width: 50px;
margin-right: 10px;
}
.foot-soc a {
font-size: 30px;
}  .section-title {
text-align: center;
font-size: clamp(1.8rem, 4vw, 2.5rem);
margin: 40px 0;
color: #fff;
font-weight: 600;
}
a h2.section-title:hover {
color: #751e5b;
} .menu-slider {
max-width: 1400px;
margin: 0 auto;
position: relative;
padding: 0 40px;
}
.menu-slide {
}
.menu-slide img {
width: 100%;
height: auto;
display: block;
border-radius: 8px;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
} .menu-slider .slick-prev,
.menu-slider .slick-next {
width: 45px;
height: 45px;
background: rgba(0,0,0,0.6);
border-radius: 50%;
z-index: 10;
transition: background 0.3s;
}
.menu-slider .slick-prev:hover,
.menu-slider .slick-next:hover {
background: rgba(0,0,0,0.8);
}
.menu-slider .slick-prev:before,
.menu-slider .slick-next:before {
font-size: 40px;
color: #fff;
opacity: 1;
} .gallery-slider {
position: relative;
padding: 0 40px;
}
.gallery-slide {
padding: 10px;
}
.gallery-slide img {
width: 100%;
height: 500px;
object-fit: cover;
display: block;
box-shadow: 0 3px 15px rgba(0,0,0,0.1);
transition: transform 0.3s;
}
.gallery-slide img:hover {
transform: scale(1.02);
} .gallery-slider .slick-prev,
.gallery-slider .slick-next {
width: 45px;
height: 45px;
background: rgba(0,0,0,0.5);
border-radius: 50%;
z-index: 10;
}
.gallery-slider .slick-prev:hover,
.gallery-slider .slick-next:hover {
background: rgba(0,0,0,0.7);
}
.gallery-slider .slick-prev:before,
.gallery-slider .slick-next:before {
font-size: 40px;
color: #fff;
opacity: 1;
}  .page-bank .banquet-intro,.page-bank .banquet-halls,.page-bank .banquet-cta {
padding: 40px 0;
} .page-bank .banquet-intro h1 {
text-align: center;
margin-bottom: 20px;
color: #fff;
}
.page-bank .lead-text {
text-align: center;
font-size: 1.1em;
line-height: 1.6;
max-width: 800px;
margin: 0 auto 30px;
color: #666;
}
.page-bank .booking-contacts {
text-align: center;
padding: 20px;
border-radius: 8px;
margin: 0 auto;
display: block;
max-width: 500px;
border: solid 1px #fff;
}
.page-bank .booking-label {
font-weight: bold;
margin-bottom: 10px;
}
.page-bank .phone-numbers a {
display: block;
font-size: 1.2em;
color: #d4af37; text-decoration: none;
margin: 5px 0;
font-weight: bold;
}
.page-bank .phone-numbers a:hover {
color: #b8962e;
} .page-bank .halls-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 40px;
} .page-bank .hall-card {
border: 1px solid #eee;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
transition: transform 0.3s ease;
}
.page-bank .hall-card:hover {
transform: translateY(-5px);
}
.page-bank .hall-image {
position: relative;
height: 250px;
}
.page-bank .hall-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.page-bank .hall-capacity {
position: absolute;
bottom: 10px;
right: 10px;
background: rgba(0,0,0,0.7);
color: #fff;
padding: 5px 10px;
border-radius: 4px;
font-size: 0.9em;
}
.page-bank .hall-content {
padding: 20px;
}
.page-bank .hall-content h2 {
margin-top: 0;
color: #8d8d8d;
font-size: 1.4em;
}
.page-bank .hall-desc {
color: #878787;
line-height: 1.5;
margin-bottom: 15px;
}
.page-bank .hall-features {
list-style: none;
padding: 0;
margin: 0;
}
.page-bank .hall-features li {
padding: 5px 0;
border-bottom: 1px solid #f0f0f0;
color: #555;
font-size: 0.95em;
}
.page-bank .hall-features li:last-child {
border-bottom: none;
} .page-bank .banquet-cta {
text-align: center;
border: solid 1px #fff;
border-radius: 20px;
}
.page-bank .phone-numbers-large a {
display: inline-block;
margin: 10px 15px;
font-size: 1.5em;
color: #d4af37;
text-decoration: none;
font-weight: bold;
}  .restaurant-menu {
max-width: 1200px;
margin: 0 auto;
padding: 2rem 1rem;
color: #333;
line-height: 1.5;
}
.restaurant-menu h1 {
text-align: center;
margin-bottom: 1.5rem;
color: #fff;
}
.menu-hero figcaption {
text-align: center;
font-size: 1.1rem;
color: #666;
margin-bottom: 2rem;
max-width: 800px;
margin-left: auto;
margin-right: auto;
} .menu-accordion {
margin-bottom: 2rem;
border: 1px solid #e9ecef;
border-radius: 12px;
overflow: hidden;
}
.menu-accordion summary {
padding: 1rem 1.5rem;
font-size: 1.3rem;
font-weight: 600;
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
gap: 0.5rem;
color: #fff;
}
.menu-accordion summary::-webkit-details-marker { display: none; }
.menu-accordion summary::after {
content: "▼";
font-size: 0.9rem;
margin-left: auto;
transition: transform 0.2s;
}
.menu-accordion[open] summary::after { transform: rotate(180deg); } .menu-category .mcat-img {
width: 100%;
max-height: 500px;
object-fit: cover;
display: block;
border-bottom: 1px solid #e9ecef;
object-position: top;
}
.menu-category .lightbox {
display: block;
cursor: zoom-in;
} .menu-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
padding: 1.5rem;
}
.menu-item {
display: flex;
flex-direction: column;
border: 1px solid #e9ecef;
border-radius: 12px;
overflow: hidden;
background: #fff;
transition: transform 0.2s, box-shadow 0.2s;
}
.menu-item:hover {
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.menu-item img {
width: 100%;
height: 200px;
object-fit: cover;
border-bottom: 1px solid #e9ecef;
}
.menu-item-content {
padding: 1.2rem;
display: flex;
flex-direction: column;
flex: 1;
}
.menu-item h3 {
margin: 0 0 0.5rem;
font-size: 1.15rem;
color: #2c3e50;
}
.menu-item p {
margin: 0 0 1rem;
color: #666;
font-size: 0.95rem;
flex: 1;
}
.price {
font-weight: 700;
font-size: 1.1rem;
margin-top: auto;
} .menu-download {
text-align: center;
margin-top: 3rem;
padding: 2rem;
background: #f8f9fa;
border-radius: 12px;
}
.menu-download p { margin: 0 0 1rem; color: #666; }
.btn-download {
display: inline-block;
padding: 0.9rem 1.8rem;
background: #2c3e50;
color: #fff;
text-decoration: none;
border-radius: 6px;
font-weight: 500;
transition: background 0.2s;
}
.btn-download:hover { background: #1a252f; } @media (max-width: 768px) {
.restaurant-menu { padding: 1rem; }
.menu-grid { grid-template-columns: 1fr; }
.menu-item img { height: 180px; }
} @media only screen and (min-width: 768px) {
.ht-mob {
display: none;
}
.home-page .wp-block-gallery-1 {
gap: 40px !important;
margin-bottom: 40px !important;
}
.home-page .wp-block-gallery-1 figure {
width: calc(50% - 20px) !important;
}
.home-page .wp-block-gallery-2 {
gap: 40px !important;
}
.home-page .wp-block-gallery-2 figure {
width: calc(25% - 40px) !important;
}
.home-page .wp-block-gallery-1 figcaption, .home-page .wp-block-gallery-2 figcaption {
font-size: 32px !important;
padding: 20px !important;
}
}
@media (max-width: 1600px) { .hti-tr .head-menu {
gap: 30px;
}
.hti-t {
padding: 0 60px;
}
.hti-t > a img {
max-height: 80px;
}
}
@media (max-width: 1400px) {  .back-foot {
padding: 40px 20px 0 20px;
}
}
@media (max-width: 1200px) { .hti-tr .head-menu {
gap: 30px;
}
.hti-t {
padding: 0 60px;
}
.hti-t > a img {
max-height: 80px;
}
.hti-t .hti-tr .head-menu a {
font-size: 18px;
padding: 5px 6px;
}
.head2i-l p {
font-size: 20px;
}
.head2i-r h2 {
font-size: 32px;
} .menu-slider .slick-prev {
left: -10px;
}
.menu-slider .slick-next {
right: -10px;
}
.menu-slide {
padding: 0 40px;
}
}
@media (max-width: 968px) {
.hti-tr .head-menu {
display: none;
}
.hti-t {
gap: 0;
flex-direction: column;
justify-content: center;
align-items: center;
}
.hti-tr .head-adress {
align-items: center;
}
.head2i-r h2 {
font-size: 24px;
}
.head2i-l p {
font-size: 16px;
}
.hti-tr .head-adress p,.hti-tr .head-adress a {
font-size: 16px;
}
}
@media (max-width: 768px) { .head-info img.head-fon {
width: auto;
height: 300px;
display: block;
object-fit: cover;
object-position: center;
}
.head-1-info {
position: absolute;
top: 10px;
left: 0;
width: 100%;
}
.head-info-2 {
position: relative;
width: 100%;
min-height: 170px;
}
.head-content {
position: static;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
z-index: 2;
padding: 15px 20px;
color: #fff;
font-family: 'Times New Roman PS', serif;
}
.head-info {
min-height: auto;
}
.head-2-info {
flex-direction: column;
align-items: flex-start;
text-align: left;
gap: 20px;
}
.head2i-l {
max-width: 100%;
flex: 1 1;
}
.ht-pc {
display: none;
}
.head2i-r {
text-align: center;
width: 100%;
}
.hti-b div {
flex-direction: column;
gap: 8px;
align-items: center;
}
.head2i-r h2 {
font-size: 24px;
}
.head2i-l p {
font-size: 18px;
text-align: center;
} .cafe-menu,
.cafe-gallary {
padding: 10px 0;
}
.section-title {
margin: 20px 0;
}
.gallery-slider {
padding: 0 35px;
}
.gallery-slide img {
height: 250px;
} .back-foot {
flex-direction: column;
text-align: center;
gap: 20px;
padding: 40px 20px;
}
.foot-bot {
flex-direction: column;
text-align: center;
gap: 20px;
}
}
@media (max-width: 480px) { .head-info img.head-fon {
width: auto;
height: 250px;
display: block;
object-fit: cover;
object-position: center;
}
.hti-t {
padding: 0 20px;
}
.head-2-info {
}
.head-content {
padding: 10px 15px;
}
.hti-t > a img {
max-height: 55px;
}
.hti-t > div a {
font-size: 0.95rem;
gap: 6px 12px;
}
.hti-b div {
font-size: 0.9rem;
}
.head2i-r h2 {
font-size: 22px;
} .menu-slide {
padding: 0;
}
.gallery-slider {
padding: 0 30px;
}
.gallery-slide img {
height: 220px;
}
.menu-slider .slick-prev,
.menu-slider .slick-next,
.gallery-slider .slick-prev,
.gallery-slider .slick-next {
width: 40px;
height: 40px;
}
.menu-slider .slick-prev:before,
.menu-slider .slick-next:before,
.gallery-slider .slick-prev:before,
.gallery-slider .slick-next:before {
font-size: 18px;
}
}