html { /* задаем стиль для всей страницы, т.к. тег родительский */
font-family: "Open sans", sans-serif;
display: flex; margin: 10px auto; justify-content: center;
/* располагает все блоки на странице по центру, не только текст */
background-image: linear-gradient(270deg, RGB(238,238,238), RGB(171,171,171));
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body{margin-top: 10px;}
/* h1-задаем свойства для простого тега HTML */
/*красный {margin: 10px auto 30px; color: #f32c12; font-style: italic; text-align: center; text-shadow: 2px 2px 7px black;} */
h1 {
font-family: "Open sans", sans-serif;
margin: 5px auto; color: #3498db; font-style: italic; text-align: center; text-shadow: 2px 2px 7px black;}
h2 {
font-family: "Open sans", sans-serif;
margin: 5px auto; color: #f39c12; font-style: italic; text-align: center; text-shadow: 2px 2px 4px black;}
.h-blue {color: #3498db;}
hr {box-sizing: content-box;height: 5;overflow: visible;}
.styleBox {
max-width: 20em;
border: 1px solid #444;
border-radius: 20px;
box-shadow: 9px 9px 7px #777;
background-image: linear-gradient(180deg, rgb(170, 221, 255), rgb(249, 255, 255) 45%, #bbb);
margin: 0 auto;
margin-top: 15px;
opacity: 1;
transform: translateY(0) scale(1);
transition: opacity 0.35s ease, transform 0.35s ease;
}
.styleBox:hover {
cursor: pointer;
background-image:
linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), /* Тёмный слой */
linear-gradient(180deg, rgb(170, 221, 255), rgb(249, 255, 255) 45%, #bbb);
}
.data {
padding: 5px;
display: flex;
flex-direction: row;
align-items: center;
gap: 0; /* самое главное — убрать промежутки */
}
/* через точку - задаем свойства для контейнеров-классов */
.icon{background-color: #8fbcff;width: 40px;height: 40px;border-radius: 50%;line-height: 40px; border: 2px solid #484786;}
.power-text{font-family: "Pacifico", sans-serif; font-weight: 600; padding-left: 5px; font-style: italic; font-size: 19px; width: 150px; text-align: left; color: #0c0ea3; /*background-color: #f39c12;*/}
.power{font-weight: 600/* толщ шрифта */;font-size: 24px;color: #f39c12; width: 90px; text-align: right; padding-right: 5px;
text-shadow: 2px 1px 2px black/* по-гориз по-верт размытость цвет */; /*background-color: #0c0ea3;*/}
.superscript1S{
font-size: 14px;
font-weight: 600;
width: 25px;
text-align: left;
position: relative; /* даёт возможность двигать вверх/вниз */
top: -7px; /* поднимай больше/меньше как нужно */
color: #f39c12;
text-shadow: 2px 1px 2px black;
/* background-color: #0c0ea3; */
}
.superscript2S{font-size: 14px;font-weight: 600;position: absolute;right: -35px;top: 2px;}
.superscript4S{font-size: 14px;font-weight: 600;position: absolute;right: -27px;top: 2px;}
.fade-out {
opacity: 0 !important;
transform: translateY(20px) scale(0.97);
pointer-events: none;
}
.hidden {
display: none !important;
}
.fade-in {
opacity: 1;
transform: translateY(0) scale(1);
}
/* Кнопка назад */
#backBtn {
padding: 10px 20px;
font-size: 18px;
background: linear-gradient(135deg, #3498db, #2980b9);
color: white;
border: none;
border-radius: 10px;
cursor: pointer;
display: none;
box-shadow: 3px 3px 10px #555;
}
#backBtn:hover {
background-color: #1d6fa5;
cursor: pointer;
}
#ctrlBtn {
padding: 10px 20px;
font-size: 18px;
background: linear-gradient(135deg, #3498db, #2980b9);
color: white;
border: none;
border-radius: 10px;
cursor: pointer;
display: none;
box-shadow: 3px 3px 10px #555;
}
#ctrlBtn:hover {
background-color: #1d6fa5;
cursor: pointer;
}
.no-clicks {
pointer-events: none;
}
.weatherBox {
max-width: 20em;
border: 1px solid #444;
border-radius: 20px;
box-shadow: 9px 9px 7px #777;
background-image: linear-gradient(180deg, rgb(170, 221, 255), rgb(249, 255, 255) 45%, #bbb);
margin: 0 auto;
margin-top: 15px;
opacity: 1;
transform: translateY(0) scale(1);
transition: opacity 0.35s ease, transform 0.35s ease;
text-align: center;
}
/* Анимация исчезновения для weatherBox */
.weatherBox.fade-out {
opacity: 0;
transform: scale(0.9);
}
.weatherBox.hidden {
display: none;
}
/* Новые стили для weatherBox */
.weather-temp-row {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
width:20em
/* width: 80%; */
/* margin-left: 20px; */
/* padding: 10px 5px; */
}
.buttons-row {
display: flex;
justify-content: center;
align-items: center;
gap: 60px;
width:20em
/* width: 80%; */
/* margin-left: 20px; */
/* padding: 10px 5px; */
}
/* Левая колонка */
.weather-left-col {
display: flex;
flex-direction: column;
align-items: center; /* ← выравнивание по левому краю */
justify-content: center;
margin-top: 5px;
}
/* Температура */
.weather-temp {
margin: 0;
font-size: 24px;
color: #f39c12;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
/* “Погода от Яндекса” — теперь нормально встанет под температурой */
.weather-yandex {
margin: 0;
margin-top: -5px;
font-size: 18px;
color: #3498db;
text-shadow: 2px 2px 2px black;
text-align: left;
}
/* .weather-yandex {
font-family: "Open sans", sans-serif;
margin: 3px 0; color: #3498db; font-style: italic; text-align: center; text-shadow: 2px 2px 4px black;} */
.weather-icon-box {
/* background-color: #3498db; */
/* border: 2px solid #2980b9; */
/* margin-left: 5px; */
background-color: #8fdfff;
width: 40px;
height: 40px;
border-radius: 50%;
line-height: 40px;
border: 2px solid #484786;
margin-top: 5px;
}
.yandex-text{font-family: "Pacifico", sans-serif; font-weight: 600; padding-left: 5px; font-style: italic; font-size: 19px; width: 165px; text-align: left; color: #0c0ea3;
margin-left: 20px;
}
.yandex{font-weight: 600/* толщ шрифта */;font-size: 24px;color: #f39c12; width: 60px; text-align: left; padding-right: 5px;
text-shadow: 2px 1px 2px black;
margin-left: auto;
margin-right: 20px;
}
.weather-link-container {
text-align: center;
padding: 15px;
border-top: 1px solid #bdc3c7;
}
.weather-link {
display: inline-block;
background: linear-gradient(135deg, #3498db, #2980b9);
color: white;
text-decoration: none;
border-radius: 25px;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
padding: 12px 25px;
width: 72%;
margin-bottom: 10px;
}
.weather-link:hover {
background: linear-gradient(135deg, #2980b9, #1d6fa5);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
}
.forecast-link {
color: #3498db;
text-decoration: none;
font-weight: 500;
padding: 8px 16px;
border: 2px solid #3498db;
border-radius: 20px;
transition: all 0.3s ease;
}
.forecast-link:hover {
background: #3498db;
color: white;
}
.mtypeBox {
max-width: 20em;
border: 1px solid #444;
border-radius: 20px;
box-shadow: 9px 9px 7px #777;
background-image: linear-gradient(180deg, rgb(170, 221, 255), rgb(249, 255, 255) 45%, #bbb);
margin: 0 auto;
margin-top: 15px;
opacity: 1;
transform: translateY(0) scale(1);
transition: opacity 0.35s ease, transform 0.35s ease;
cursor: pointer;
text-align: center;
}
.mtypeBox:hover {
cursor: pointer;
background-image:
linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
linear-gradient(180deg, rgb(170, 221, 255), rgb(249, 255, 255) 45%, #bbb);
}
.mtypeBox.hidden {
display: none;
}
.mtypeBox.fade-out {
opacity: 0;
transform: translateY(20px) scale(0.97);
}