style.css - master - Cjyz/Piter

style.css
585 строк6 KB
Cjyz
Create: app.py, Procfile, README.md, requirements.txt, day1.html, day2.html, day3.html, day4.html, index.html, map.js, script.js, style.css, icon.png
31 июл 2026, 22:07
Верифицирован
31 июл 2026, 22:07036bee5
/* =========================
   ОСНОВНЫЕ НАСТРОЙКИ
========================= */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;

    font-family: 
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    background: linear-gradient(
        135deg,
        #eef5ff,
        #ffffff
    );

    color: #222;
}

/* =========================
   КОНТЕЙНЕР
========================= */

.container {

    width: 92%;
    max-width: 1000px;

    margin: 30px auto;

}

/* =========================
   ШАПКА
========================= */

.header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 25px;

    background: rgba(255,255,255,0.85);

    backdrop-filter: blur(10px);

    border-radius: 25px;

    box-shadow:
    0 10px 30px rgba(0,0,0,0.12);

    margin-bottom: 30px;

}

.header h1 {

    margin:0;

    font-size:32px;

}

.header p {

    margin-top:8px;

    color:#666;

}

/* =========================
   БЮДЖЕТ
========================= */

.budget {

    background:#eef5ff;

    padding:15px 25px;

    border-radius:20px;

    font-size:25px;

    font-weight:700;

    color:#2456ff;

}

/* =========================
   ЗАГОЛОВКИ
========================= */

h1 {

    text-align:center;

    font-size:42px;

    color:#244cff;

}

h2 {

    text-align:center;

    color:#555;

    font-weight:500;

}

/* =========================
   КНОПКИ ДНЕЙ
========================= */

.buttons {

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:20px;

    margin-top:50px;

}

button {

    border:none;

    cursor:pointer;

    padding:20px 35px;

    border-radius:22px;

    font-size:20px;

    color:white;

    background:#2456ff;

    transition:.3s;

}

button:hover {

    transform:translateY(-5px);

    box-shadow:
    0 10px 25px rgba(36,86,255,.35);

}

/* =========================
   ССЫЛКИ
========================= */

a {

    color:inherit;

}

.back {

    display:inline-block;

    margin:25px 0;

    color:#2456ff;

    text-decoration:none;

    font-weight:600;

}

/* =========================
   ТАЙМЛАЙН
========================= */

.timeline {

    margin-top:40px;

}

.event {

    display:flex;

    gap:20px;

    margin-bottom:30px;

    animation:fade .5s ease;

}

.time {

    min-width:90px;

    padding-top:20px;

    font-size:20px;

    font-weight:700;

    color:#2456ff;

}

.card {

    flex:1;

    background:white;

    padding:25px;

    border-radius:25px;

    box-shadow:

    0 8px 25px rgba(0,0,0,.12);

    transition:.3s;

}

.card:hover {

    transform:translateY(-5px);

}

.card h3 {

    margin-top:0;

    font-size:24px;

}

.card p {

    color:#555;

    line-height:1.5;

}

/* =========================
   ЧЕКБОКС
========================= */

label {

    display:flex;

    align-items:center;

    gap:10px;

    margin-top:20px;

    font-size:17px;

}

.visit {

    width:20px;

    height:20px;

}

/* =========================
   ПРОГРЕСС
========================= */

#progress {

    background:white;

    padding:15px;

    border-radius:20px;

    text-align:center;

    font-size:20px;

    font-weight:700;

    color:#2456ff;

    margin:20px 0;

}

/* =========================
   КАРТА
========================= */

.route {

    display:inline-block;

    margin-top:20px;

    padding:12px 20px;

    border-radius:15px;

    background:#2456ff;

    color:white;

    text-decoration:none;

    transition:.3s;

}

.route:hover {

    background:#173bc5;

}

/* =========================
   ЦЕНА
========================= */

.price {

    margin-top:15px;

    color:#009b4d;

    font-weight:700;

    font-size:18px;

}

/* =========================
   РЕДАКТИРОВАНИЕ
========================= */

.edit-panel {

    background:white;

    padding:25px;

    border-radius:25px;

    margin-top:30px;

    box-shadow:

    0 8px 20px rgba(0,0,0,.1);

}

input,
textarea {

    width:100%;

    padding:12px;

    border-radius:15px;

    border:1px solid #ddd;

    font-size:16px;

    margin-bottom:15px;

}

.add-btn {

    background:#00a651;

}

.delete-btn {

    background:#ff3b30;

}

/* =========================
   АНИМАЦИЯ
========================= */

@keyframes fade {

    from {

        opacity:0;

        transform:translateY(20px);

    }

    to {

        opacity:1;

        transform:none;

    }

}

/* =========================
   ТЕЛЕФОН
========================= */
@media(max-width:700px) {

.container {

    width:94%;

}

.header {

    flex-direction:column;

    gap:20px;

    text-align:center;

}

h1 {

    font-size:32px;

}

.event {

    flex-direction:column;

    gap:5px;

}

.time {

    padding-left:10px;

}

.card {

    padding:20px;

}

button {

    width:100%;

}

}
/* =====================
   МОБИЛЬНАЯ ВЕРСИЯ
===================== */
@media (max-width:600px){

body{
    background:#f5f7ff;
}

.container{

    width:95%;
    margin:15px auto;

}

.header{

    padding:18px;

    border-radius:20px;

}

.header h1{

    font-size:26px;

}

.header p{

    font-size:14px;

}

.card{

    padding:18px;

    border-radius:20px;

}

.card h3{

    font-size:20px;

}

.time{

    font-size:18px;

}

.route{

    width:100%;

    text-align:center;

}

button{

    width:100%;

    margin-top:10px;

}

}
#map{

width:100%;

height:500px;

border-radius:25px;

box-shadow:
0 10px 25px rgba(0,0,0,.15);

margin:30px 0;

}