/* ============================================================ Lorea – kujundussüsteem v3 (professionaalne, rosa-kuldne) ============================================================ */ /* Google Fonts laetakse HTML-i kaudu (mitte-blokeerivalt) – vaata layoutide */ :root { --rose-deep: #a84a68; --rose: #d9688d; --rose-soft: #e98aa6; --blush: #f7e3e8; --blush-soft: #fdf4f6; --cream: #faf6f4; --gold: #c6a664; --gold-dark: #a8861c; --gold-soft: #f3ead2; --ink: #33282b; --ink-soft: #7d6b70; --line: #eedfe3; --line-gold: #e7d9b5; --white: #ffffff; --success: #4d9e6f; --danger: #cf5252; --warning: #cf9a3d; --info: #5b7fb5; --radius: 18px; --radius-sm: 10px; --shadow: 0 1px 2px rgba(51,40,43,.04), 0 10px 30px rgba(217,104,141,.08); --shadow-lg: 0 2px 6px rgba(51,40,43,.06), 0 24px 60px rgba(217,104,141,.14); --font-head: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); color: var(--ink); background: var(--cream); line-height: 1.6; font-size: 15px; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: var(--rose); text-decoration: none; transition: color .15s; } a:hover { color: var(--rose-deep); } h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.22; margin: 0 0 .45em; font-weight: 600; } h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); } h2 { font-size: clamp(1.5rem, 3vw, 2rem); } h3 { font-size: 1.15rem; } h4 { font-size: 1rem; } p { margin: 0 0 .85em; } code { background: var(--blush-soft); padding: 2px 7px; border-radius: 6px; font-size: 13px; color: var(--rose-deep); } hr { border: none; border-top: 1px solid var(--line); margin: 18px 0; } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .container-sm { max-width: 880px; margin: 0 auto; padding: 0 20px; } .container-narrow { max-width: 540px; margin: 0 auto; padding: 0 20px; } /* ============ Nupud ============ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: 999px; border: 1px solid transparent; font-family: var(--font-body); font-size: 14.5px; font-weight: 600; cursor: pointer; text-decoration: none; transition: all .18s ease; line-height: 1.2; white-space: nowrap; background: linear-gradient(135deg, var(--rose), var(--rose-deep)); color: #fff; box-shadow: 0 6px 18px rgba(217,104,141,.3); } .btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 10px 26px rgba(217,104,141,.38); filter: brightness(1.04); } .btn:active { transform: translateY(0); } .btn-lg { padding: 15px 30px; font-size: 16px; } .btn-sm { padding: 7px 14px; font-size: 13px; } .btn-block { width: 100%; } .btn-outline { background: transparent; color: var(--rose-deep); border: 1.5px solid var(--rose-deep); box-shadow: none; } .btn-outline:hover { background: var(--blush-soft); box-shadow: none; } .btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); box-shadow: none; } .btn-ghost:hover { color: var(--ink); background: #fff; box-shadow: none; transform: none; } .btn-gold { background: linear-gradient(135deg, #e2c98a, var(--gold)); color: #3f2f0a; box-shadow: 0 6px 18px rgba(198,166,100,.35); } .btn-gold:hover { box-shadow: 0 10px 26px rgba(198,166,100,.45); } .btn-white { background: #fff; color: var(--rose-deep); box-shadow: 0 6px 18px rgba(51,40,43,.16); } .btn-white:hover { box-shadow: 0 10px 26px rgba(51,40,43,.22); } .btn-success { background: linear-gradient(135deg, #58b07c, #3e8a5f); } .btn-danger { background: linear-gradient(135deg, #e05b5b, #b83c3c); } .btn-warning { background: linear-gradient(135deg, #e0a950, #b97f2c); } .btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; } /* ============ Vormid ============ */ .form-group { margin-bottom: 16px; } .form-group label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; color: var(--ink-soft); letter-spacing: .2px; } .form-group .hint { font-size: 12.5px; color: var(--ink-soft); margin-top: 4px; } .form-control { width: 100%; padding: 12px 15px; border: 1.5px solid var(--line); border-radius: 12px; font-size: 14.5px; font-family: var(--font-body); background: #fff; color: var(--ink); transition: border-color .15s, box-shadow .15s; } .form-control:focus { outline: none; border-color: var(--rose); box-shadow: 0 0 0 4px rgba(217,104,141,.12); } textarea.form-control { min-height: 96px; resize: vertical; } select.form-control { appearance: auto; } .form-error { color: var(--danger); font-size: 12.5px; display: block; margin-top: 4px; } .form-check { display: flex; gap: 9px; align-items: center; font-size: 14px; margin: 8px 0; cursor: pointer; } .form-check input { width: 18px; height: 18px; accent-color: var(--rose); } /* ============ Teated ============ */ .flash-wrap { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 500; width: min(560px, 94vw); } .flash { padding: 13px 18px; border-radius: 14px; margin-bottom: 8px; font-weight: 600; font-size: 14px; box-shadow: var(--shadow-lg); display: flex; gap: 10px; align-items: flex-start; animation: slideDown .25s ease; } .flash-success { background: #e9f6ee; color: #2c6b47; border: 1px solid #c2e6d0; } .flash-error { background: #fdecec; color: #8f2626; border: 1px solid #f3c6c6; } .flash-info { background: var(--gold-soft); color: #7a6213; border: 1px solid var(--line-gold); } @keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } /* ============ Päis ============ */ .site-header { position: sticky; top: 0; z-index: 120; background: rgba(255,255,255,.88); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } .site-header .container { display: flex; align-items: center; gap: 22px; height: 70px; } .brand { font-size: 21px; font-weight: 800; color: var(--rose-deep); letter-spacing: -.4px; display: flex; align-items: center; gap: 9px; font-family: var(--font-head); } .brand:hover { text-decoration: none; } .brand .dot { width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, var(--rose), var(--gold)); display: inline-block; box-shadow: 0 0 0 3px var(--blush); } .brand .dot-gold { background: linear-gradient(135deg, var(--gold), #ecd9a8); box-shadow: 0 0 0 3px var(--gold-soft); } .brand small { font-family: var(--font-body); font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; margin-left: 2px; } .header-search { flex: 1; max-width: 440px; } .header-search form { display: flex; gap: 8px; } .header-actions { margin-left: auto; display: flex; gap: 10px; align-items: center; } /* ============ Jalus ============ */ .site-footer { background: linear-gradient(180deg, #4a363b, #38272b); color: #e8d5d9; margin-top: 70px; padding: 48px 0 22px; font-size: 13.5px; } .site-footer a { color: #f2c3cf; } .site-footer a:hover { color: #fff; } .site-footer .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 30px; } .site-footer h4 { color: #fff; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; font-family: var(--font-body); font-weight: 700; } .site-footer .legal-row { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.14); padding-top: 18px; display: flex; gap: 22px; flex-wrap: wrap; font-size: 12.5px; align-items: center; } /* ============ Hero ============ */ .hero { position: relative; color: #fff; overflow: hidden; padding: 0; } .hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; } .hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(50,20,28,.88) 8%, rgba(50,20,28,.55) 45%, rgba(50,20,28,.15) 80%); } .hero .in { position: relative; z-index: 2; padding: 110px 0 130px; max-width: 640px; } .hero .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; font-weight: 700; color: #f2d9a4; margin-bottom: 18px; } .hero .eyebrow::before, .hero .eyebrow::after { content: ''; width: 26px; height: 1px; background: rgba(242,217,164,.6); } .hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); color: #fff; margin-bottom: 16px; text-shadow: 0 4px 30px rgba(0,0,0,.3); } .hero p { font-size: 17px; color: rgba(255,255,255,.9); max-width: 520px; margin-bottom: 28px; } .hero-search { display: grid; grid-template-columns: 2fr 1fr auto; gap: 6px; background: #fff; padding: 8px; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.3); max-width: 620px; } .hero-search input, .hero-search select { border: none; padding: 12px 14px; font-size: 15px; border-radius: 12px; font-family: var(--font-body); color: var(--ink); background: #fff; min-width: 0; width: 100%; } .hero-search .btn { white-space: nowrap; align-self: stretch; } @media (max-width: 560px) { .hero-search { grid-template-columns: 1fr 1fr; } .hero-search input { grid-column: 1 / -1; } .hero-search .btn { grid-column: 1 / -1; } } .hero-cta { margin-top: 26px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; } .hero-trust { margin-top: 30px; display: flex; gap: 26px; flex-wrap: wrap; color: rgba(255,255,255,.85); font-size: 13.5px; font-weight: 500; } .hero-trust span { display: flex; align-items: center; gap: 8px; } /* ============ Sektsioonid ============ */ .section { padding: 56px 0; } .section-title { text-align: center; margin-bottom: 34px; } .section-title h2 { position: relative; display: inline-block; padding-bottom: 14px; } .section-title h2::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 60px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--gold), var(--rose), var(--gold)); } .section-title .sub { color: var(--ink-soft); max-width: 560px; margin: 10px auto 0; font-size: 15px; } .section-title.left { text-align: left; } .section-title.left h2::after { left: 0; transform: none; } /* ============ Salongikaardid ============ */ .salon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 22px; } .salon-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: all .22s ease; position: relative; box-shadow: 0 2px 10px rgba(51,40,43,.05); } .salon-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: var(--line-gold); } .salon-card .cover { height: 150px; background: linear-gradient(135deg, var(--blush), var(--gold-soft)); position: relative; overflow: hidden; } .salon-card .cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .salon-card:hover .cover img { transform: scale(1.05); } .salon-card .cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(51,40,43,.18)); } .salon-card .body { padding: 16px 18px 18px; flex: 1; display: flex; flex-direction: column; } .salon-card .logo-sm { width: 58px; height: 58px; border-radius: 16px; object-fit: cover; margin-top: -40px; border: 3px solid #fff; background: #fff; box-shadow: 0 4px 14px rgba(51,40,43,.18); position: relative; z-index: 2; } .salon-card h3 { margin: 12px 0 3px; font-size: 1.1rem; } .salon-card .meta { color: var(--ink-soft); font-size: 13px; display: flex; align-items: center; gap: 6px; } .salon-card .foot { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; } .rating { color: var(--gold-dark); font-weight: 700; } .rating .count { color: var(--ink-soft); font-weight: 400; } .badge { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .3px; } .badge-featured { background: linear-gradient(135deg, #d9bd7c, var(--gold-dark)); color: #fff; box-shadow: 0 3px 10px rgba(168,134,28,.35); } .badge-trial { background: var(--blush); color: var(--rose-deep); } .badge-city { background: var(--blush-soft); color: var(--rose-deep); border: 1px solid var(--line); } .badge-gold { background: var(--gold-soft); color: var(--gold-dark); border: 1px solid var(--line-gold); } /* ============ Kaardid / tabelid ============ */ .card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); transition: border-color .18s; } .card:hover { border-color: var(--line-gold); } .card .card-head { padding: 18px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .card .card-head h3 { margin: 0; font-size: 1.05rem; display: flex; align-items: center; gap: 9px; position: relative; padding-bottom: 4px; } .card .card-head h3::after { content: ''; position: absolute; left: 0; bottom: 0; width: 34px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--gold), var(--rose-soft)); } .card .card-body { padding: 20px; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } @media (max-width: 900px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } .stat-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; position: relative; overflow: hidden; box-shadow: var(--shadow); } .stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--rose), var(--gold)); } .stat-card .num { font-size: 1.8rem; font-weight: 800; color: var(--rose-deep); line-height: 1.15; font-family: var(--font-body); } .stat-card .lbl { font-size: 11.5px; color: var(--ink-soft); font-weight: 700; text-transform: uppercase; letter-spacing: .8px; margin-top: 5px; } .stat-card .ic { position: absolute; right: 16px; top: 16px; font-size: 24px; opacity: .85; } .table-wrap { overflow-x: auto; } table.table { width: 100%; border-collapse: collapse; font-size: 14px; } .table th { text-align: left; padding: 12px 14px; color: var(--ink-soft); font-size: 11.5px; text-transform: uppercase; letter-spacing: .7px; border-bottom: 2px solid var(--line-gold); white-space: nowrap; background: var(--blush-soft); } .table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; } .table tr:last-child td { border-bottom: none; } .table .actions { white-space: nowrap; text-align: right; } .table tbody tr:hover { background: #fdf9fa; } /* ============ Staatused ============ */ .status { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; } .status-pending { background: #fbf0d8; color: #8a6414; } .status-confirmed { background: #e2f4e9; color: #27603e; } .status-cancelled { background: #fbe3e3; color: #8f2626; } .status-completed { background: #e3ecf9; color: #2c4f7c; } .status-no_show { background: #f3e6fa; color: #6a2c8f; } .status-rescheduled { background: #fde8ef; color: #8f2f4d; } /* ============ Salongi avalik leht ============ */ .salon-hero { position: relative; color: #fff; } .salon-hero .cover-img { position: absolute; inset: 0; background-size: cover; background-position: center; } .salon-hero .cover-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(40,18,24,.3), rgba(40,18,24,.72)); } .salon-hero .content { position: relative; z-index: 2; padding: 130px 0 46px; } .salon-hero h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); margin: 12px 0 6px; text-shadow: 0 3px 20px rgba(0,0,0,.35); } .salon-hero .tagline { opacity: .96; font-size: 17px; font-family: var(--font-head); font-style: italic; } .salon-hero .chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .chip { background: rgba(255,255,255,.18); backdrop-filter: blur(8px); padding: 7px 15px; border-radius: 999px; font-size: 13px; font-weight: 600; border: 1px solid rgba(255,255,255,.3); } .salon-nav { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 70px; z-index: 100; box-shadow: 0 4px 16px rgba(51,40,43,.05); } .salon-nav .container { display: flex; gap: 6px; overflow-x: auto; } .salon-nav a { padding: 15px 16px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; border-bottom: 3px solid transparent; font-size: 14px; } .salon-nav a:hover { text-decoration: none; color: var(--ink); } .salon-nav a.active { color: var(--rose); border-bottom-color: var(--rose); } .service-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); } .service-row:last-child { border-bottom: none; } .service-row .price { font-weight: 800; color: var(--rose-deep); white-space: nowrap; font-size: 15.5px; } .employee-card { text-align: center; padding: 20px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; transition: all .18s ease; } .employee-card:hover { border-color: var(--line-gold); box-shadow: var(--shadow-lg); transform: translateY(-2px); } .employee-card img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; border: 3px solid var(--blush); margin: 0 auto; } .employee-card h4 { margin: 12px 0 3px; } .employee-card .role { color: var(--ink-soft); font-size: 13px; } .info-list { list-style: none; padding: 0; margin: 0; } .info-list li { display: flex; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; } .info-list li:last-child { border-bottom: none; } .info-list .ic { color: var(--rose); width: 22px; text-align: center; } /* ============ Mallid ============ */ .tpl-elegant { font-family: var(--font-head); } .tpl-elegant .salon-hero .content { text-align: center; padding: 150px 0 60px; } .tpl-elegant .salon-hero h1 { font-size: clamp(2.4rem, 5.5vw, 3.8rem); font-weight: 500; letter-spacing: 2px; text-transform: uppercase; } .tpl-elegant .salon-hero .tagline { font-style: italic; font-size: 18px; } .tpl-elegant .logo-ring { width: 130px; height: 130px; border-radius: 50%; border: 2px solid rgba(242,217,164,.8); padding: 7px; background: rgba(255,255,255,.16); backdrop-filter: blur(5px); margin: 0 auto 6px; } .tpl-elegant .logo-ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .tpl-elegant .section-title h2 { font-weight: 500; text-transform: uppercase; letter-spacing: 3px; } .tpl-elegant .service-row .price { color: var(--gold-dark); } .tpl-elegant h2, .tpl-elegant h3, .tpl-elegant h4 { font-weight: 500; } .tpl-modern .salon-hero .content { padding: 140px 0 50px; } .tpl-modern .salon-hero h1 { font-weight: 800; letter-spacing: -.5px; text-transform: uppercase; } .tpl-modern .section-title h2 { font-weight: 800; text-transform: uppercase; letter-spacing: 1px; } .tpl-modern .card { border-radius: 10px; } .tpl-modern .btn { border-radius: 8px; } .tpl-modern .service-row { padding: 12px 0; } /* ============ Broneerimine ============ */ .book-wizard .steps { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; } .step-pill { padding: 7px 14px; border-radius: 999px; background: #fff; border: 1.5px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink-soft); } .step-pill.active { border-color: var(--rose); color: var(--rose); background: var(--blush-soft); } .step-pill.done { border-color: var(--success); color: var(--success); } .service-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; } .pick-card { border: 1.5px solid var(--line); border-radius: 14px; padding: 15px; cursor: pointer; background: #fff; transition: all .14s ease; } .pick-card:hover { border-color: var(--rose); box-shadow: 0 4px 16px rgba(217,104,141,.14); transform: translateY(-1px); } .pick-card.selected { border-color: var(--rose); background: var(--blush-soft); box-shadow: 0 0 0 4px rgba(217,104,141,.14); } .slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; } .slot-btn { padding: 11px 6px; border: 1.5px solid var(--line); border-radius: 11px; background: #fff; font-weight: 700; font-size: 14px; cursor: pointer; color: var(--ink); font-family: var(--font-body); transition: all .12s; } .slot-btn:hover { border-color: var(--rose); color: var(--rose); } .slot-btn.selected { background: linear-gradient(135deg, var(--rose), var(--rose-deep)); color: #fff; border-color: transparent; box-shadow: 0 4px 12px rgba(217,104,141,.3); } .emp-pick { display: flex; gap: 8px; flex-wrap: wrap; } .emp-pick .pick-card { padding: 10px 16px; border-radius: 999px; } /* Step-by-step viisard */ .bk-steps { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 10px 12px; background: var(--blush-soft); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 18px; font-size: 13px; font-weight: 600; color: var(--ink-soft); } .bk-steps span { padding: 4px 9px; border-radius: 8px; white-space: nowrap; } .bk-steps span.active { background: linear-gradient(135deg, var(--rose), var(--rose-deep)); color: #fff; box-shadow: 0 3px 10px rgba(217,104,141,.3); } .bk-steps i { color: var(--line-strong, #d9c6cc); font-style: normal; } .bk-step { display: none; } /* Kategooria-samm on vaikimisi nähtav – leht ei ole kunagi tühi, isegi kui JS-i laadimine ebaõnnestub (teised sammud avab JS). */ .bk-step[data-step="1"] { display: block; } .bk-step h3 { margin-bottom: 10px; } .bk-summary .kv-box { border: 1px solid var(--line-gold); background: var(--gold-soft); } @media (max-width: 600px) { .bk-steps { font-size: 12px; gap: 2px; } .bk-steps span { padding: 3px 6px; } .bk-steps i { display: none; } } .date-pills { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; } .date-pill { min-width: 78px; text-align: center; padding: 11px 8px; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; cursor: pointer; font-size: 12.5px; font-family: var(--font-body); transition: all .12s; } .date-pill .d { font-size: 17px; font-weight: 800; display: block; } .date-pill.selected { background: linear-gradient(135deg, var(--rose), var(--rose-deep)); color: #fff; border-color: transparent; box-shadow: 0 4px 12px rgba(217,104,141,.3); } /* ============ Autentimine ============ */ .auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 26px 16px; background: radial-gradient(800px 400px at 90% -10%, rgba(198,166,100,.25), transparent 60%), radial-gradient(700px 400px at -20px 110%, rgba(232,120,154,.2), transparent 55%), var(--cream); } .auth-card { width: 100%; max-width: 460px; background: #fff; border-radius: 24px; box-shadow: var(--shadow-lg); padding: 34px; border: 1px solid var(--line-gold); } .auth-card.wide { max-width: 640px; } .auth-logo { text-align: center; margin-bottom: 20px; } .auth-logo .brand { justify-content: center; font-size: 26px; } .auth-sub { text-align: center; color: var(--ink-soft); margin: -8px 0 22px; font-size: 14.5px; } /* ============ Dashboard ============ */ .dash { display: flex; min-height: 100vh; } .dash-side { width: 248px; color: var(--rose-deep); flex-shrink: 0; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow: hidden; background: linear-gradient(180deg, #fdeef4 0%, #fbd9e6 55%, #f8ccdd 100%); box-shadow: 4px 0 24px rgba(200,74,112,.10); border-right: 1px solid #f3c9d8; } .dash-side .brand { padding: 16px 18px 8px; font-size: 17px; color: var(--rose-deep); } .dash-side .side-label { padding: 10px 18px 4px; font-size: 10px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--rose); font-weight: 800; font-family: var(--font-body); } .dash-side a.side-link { display: flex; gap: 10px; align-items: center; padding: 7px 18px; color: var(--rose-deep); font-size: 13px; font-weight: 600; position: relative; transition: all .12s; margin: 0; border-radius: 0; min-height: 32px; } .dash-side a.side-link:hover { background: rgba(255,255,255,.65); color: var(--rose-deep); text-decoration: none; } .dash-side a.side-link.active { background: #fff; color: var(--rose-deep); font-weight: 800; box-shadow: 0 2px 10px rgba(200,74,112,.16); } .dash-side a.side-link.active::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px; border-radius: 0 4px 4px 0; background: linear-gradient(180deg, var(--gold), var(--rose-soft)); } .dash-side .side-link .ic { width: 20px; text-align: center; font-size: 15px; } .dash-side .side-user { margin-top: auto; padding: 10px 18px; border-top: 1px solid rgba(200,74,112,.18); font-size: 12px; color: var(--rose-deep); } .dash-side .side-user a { color: var(--rose); } .dash-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: linear-gradient(180deg, #fff7fa 0%, var(--cream) 220px); } .dash-top { background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom: 1px solid #f3c9d8; padding: 0 24px; height: 64px; display: flex; align-items: center; gap: 14px; position: sticky; top: 0; z-index: 90; } .dash-top .crumb { font-weight: 700; color: var(--ink); font-size: 15px; } .dash-top .spacer { flex: 1; } .dash-content { padding: 26px; max-width: 1340px; width: 100%; margin: 0 auto; } .dash-welcome { background: linear-gradient(135deg, #fff 0%, var(--blush-soft) 55%, var(--gold-soft) 130%); border: 1px solid var(--line-gold); border-radius: var(--radius); padding: 26px 28px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; position: relative; overflow: hidden; } .dash-welcome::after { content: ''; position: absolute; right: -70px; top: -70px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(198,166,100,.22), transparent 70%); } .dash-welcome h2 { margin: 0 0 4px; font-size: 1.5rem; } .dash-welcome .sub { color: var(--ink-soft); font-size: 14px; } .dash-welcome .actions { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; } .quick-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; } .qa-btn { display: flex; align-items: center; gap: 11px; padding: 15px 16px; border-radius: 14px; border: 1px solid var(--line); background: #fff; font-weight: 600; font-size: 13.5px; color: var(--ink); transition: all .15s; } .qa-btn:hover { border-color: var(--rose); color: var(--rose); box-shadow: 0 5px 18px rgba(217,104,141,.14); transform: translateY(-1px); text-decoration: none; } .qa-btn .qi { font-size: 21px; } .qa-btn.gold { border-color: var(--line-gold); background: linear-gradient(135deg, var(--gold-soft), #fff); } .qa-btn.gold:hover { border-color: var(--gold); color: var(--gold-dark); } /* ============ Kalender ============ */ .cal-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; } .cal-grid { display: flex; align-items: stretch; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: auto; position: relative; } .cal-timecol { width: 56px; flex-shrink: 0; border-right: 1px solid var(--line); background: var(--blush-soft); } .cal-corner { height: 26px; background: var(--blush-soft); } .cal-cols { display: flex; flex: 1; min-width: 0; } .cal-col { flex: 1 1 0; min-width: 150px; border-left: 1px solid var(--line); position: relative; } .cal-cols > .cal-col:first-child { border-left: none; } .cal-col-head { padding: 8px 8px; text-align: center; font-weight: 700; font-size: 13px; border-bottom: 1px solid var(--line); background: var(--blush-soft); } .cal-time { text-align: right; padding-right: 8px; font-size: 10.5px; color: var(--ink-soft); position: relative; height: 26px; border-top: 1px solid #f6eef0; line-height: 26px; background: var(--blush-soft); } .cal-body { position: relative; } .cal-slot { height: 26px; border-bottom: 1px solid #fbf1f3; cursor: pointer; } .cal-slot:hover { background: var(--blush-soft); } .cal-event { position: absolute; left: 3px; right: 3px; border-radius: 9px; padding: 5px 9px; font-size: 12px; color: #fff; cursor: grab; overflow: hidden; z-index: 3; box-shadow: 0 3px 8px rgba(0,0,0,.2); border: 1px solid rgba(255,255,255,.45); } .cal-event:active { cursor: grabbing; } .cal-event .t { font-weight: 700; } .cal-event.dragging { opacity: .5; } /* ============ Modaal ============ */ .modal-overlay { position: fixed; inset: 0; background: rgba(48,22,30,.55); z-index: 400; display: none; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; backdrop-filter: blur(4px); } .modal-overlay.open { display: flex; animation: fadeIn .18s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .modal { background: #fff; border-radius: 20px; width: 100%; max-width: 560px; box-shadow: 0 30px 70px rgba(48,22,30,.4); border: 1px solid var(--line-gold); animation: modalUp .22s ease; } @keyframes modalUp { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } } .modal.wide { max-width: 800px; } .modal-head { padding: 20px 24px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; border-radius: 20px 20px 0 0; background: linear-gradient(135deg, var(--blush-soft), transparent); } .modal-head h3 { margin: 0; display: flex; align-items: center; gap: 9px; } .modal-body { padding: 22px 24px; } .modal-foot { padding: 16px 24px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; background: var(--blush-soft); border-radius: 0 0 20px 20px; } /* ============ Küpsised ============ */ .cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 600; max-width: 740px; margin: 0 auto; background: #fff; border: 1px solid var(--line-gold); border-radius: 18px; box-shadow: 0 24px 60px rgba(48,22,30,.35); padding: 18px 20px; display: none; align-items: center; gap: 18px; flex-wrap: wrap; } .cookie-banner.show { display: flex; animation: modalUp .28s ease; } .cookie-banner .txt { flex: 1; min-width: 240px; font-size: 13.5px; } .cookie-banner .txt strong { display: block; margin-bottom: 3px; } .cookie-banner .acts { display: flex; gap: 9px; flex-wrap: wrap; } /* ============ Misc ============ */ .muted { color: var(--ink-soft); } .small { font-size: 13px; } .flex { display: flex; gap: 10px; align-items: center; } .flex-between { display: flex; gap: 12px; align-items: center; justify-content: space-between; } .wrap { flex-wrap: wrap; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 26px; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 26px; } .avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: var(--blush); } .tabs { display: flex; gap: 2px; border-bottom: 1.5px solid var(--line); margin-bottom: 20px; flex-wrap: wrap; overflow: visible; } .tabs a { padding: 9px 13px; font-weight: 600; font-size: 14px; color: var(--ink-soft); border-bottom: 3px solid transparent; white-space: nowrap; border-radius: 10px 10px 0 0; } .tabs a:hover { text-decoration: none; color: var(--ink); background: var(--blush-soft); } .tabs a.active { color: var(--rose); border-bottom-color: var(--rose); background: linear-gradient(180deg, var(--blush-soft), transparent); } /* Seadete menüü – kompaktne; mahub laial ekraanil ühele reale, kitsal mähitakse (EI keri) */ .tabs.tabs-single { flex-wrap: wrap; overflow: visible; row-gap: 2px; } .tabs.tabs-single a { padding: 8px 11px; font-size: 13px; } /* Rikkalik tekstitoimetaja (uudiskiri jm) */ .rte { border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; } .rte:focus-within { border-color: var(--rose); } .rte-toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--line); background: var(--blush-soft); } .rte-toolbar button { border: 1px solid transparent; background: transparent; border-radius: 8px; padding: 5px 10px; font-weight: 700; color: var(--ink); cursor: pointer; font-size: 13px; } .rte-toolbar button:hover { background: #fff; border-color: var(--line-gold); } .rte-sep { width: 1px; background: var(--line); margin: 2px 6px; } .rte-area { min-height: 180px; max-height: 420px; overflow-y: auto; padding: 14px 16px; font-size: 15px; line-height: 1.6; color: var(--ink); outline: none; } .rte-area:empty::before { content: attr(data-placeholder); color: #b9a9ae; } .rte-area ul, .rte-area ol { padding-left: 22px; margin: 8px 0; } .rte-area a { color: var(--rose); } .pill { display: inline-block; background: var(--blush); color: var(--rose-deep); border-radius: 999px; padding: 3px 11px; font-size: 12px; font-weight: 700; } .pill-gold { background: var(--gold-soft); color: var(--gold-dark); border: 1px solid var(--line-gold); } .pagination { display: flex; gap: 6px; justify-content: center; margin-top: 22px; } .pagination a, .pagination span { padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font-size: 13.5px; font-weight: 600; } .pagination .cur { background: var(--rose); color: #fff; border-color: transparent; } .empty { text-align: center; padding: 48px 16px; color: var(--ink-soft); } .empty .big { font-size: 42px; margin-bottom: 10px; } .kv { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 14px; } .kv:last-child { border-bottom: none; } .kv .k { color: var(--ink-soft); } .kv .v { font-weight: 600; text-align: right; } progress { width: 100%; height: 10px; border-radius: 999px; overflow: hidden; appearance: none; } progress::-webkit-progress-bar { background: #f2e7ea; border-radius: 999px; } progress::-webkit-progress-value { background: linear-gradient(90deg, var(--rose), var(--gold)); border-radius: 999px; } .onboarding-progress { display: flex; gap: 6px; margin: 18px 0 26px; } .onboarding-progress .op-step { flex: 1; height: 8px; border-radius: 999px; background: var(--line); } .onboarding-progress .op-step.done { background: linear-gradient(90deg, var(--success), #7cc39a); } .onboarding-progress .op-step.current { background: linear-gradient(90deg, var(--rose), var(--gold)); } .stars { color: var(--gold); letter-spacing: 2px; } .stars .off { color: #e5d8da; } .review-item { padding: 16px 0; border-bottom: 1px solid var(--line); } .review-item:last-child { border-bottom: none; } .review-item .who { font-weight: 700; } .review-item .when { color: var(--ink-soft); font-size: 12.5px; } .review-item .reply { background: var(--blush-soft); border-left: 3px solid var(--gold); padding: 11px 15px; border-radius: 0 11px 11px 0; margin-top: 9px; font-size: 13.5px; } .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; } .gallery-grid img { width: 100%; height: 150px; object-fit: cover; border-radius: 13px; border: 1px solid var(--line); } .kv-box { background: var(--blush-soft); border: 1px solid var(--line); border-radius: 14px; padding: 15px 17px; } .notif-item { padding: 14px 17px; border-bottom: 1px solid var(--line); display: flex; gap: 11px; align-items: flex-start; } .notif-item.unread { background: #fdf6f8; } .notif-item:last-child { border-bottom: none; } .notif-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rose); margin-top: 6px; flex-shrink: 0; } .text-center { text-align: center; } .right { text-align: right; } .danger-zone { border: 1px solid #f3c6c6; background: #fdf0f0; border-radius: var(--radius); padding: 16px; } /* ============ Paketid ============ */ .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 22px; align-items: stretch; } .plan-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 30px 28px; display: flex; flex-direction: column; position: relative; transition: all .2s ease; } .plan-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--line-gold); } .plan-card.popular { border: 2px solid var(--gold); box-shadow: var(--shadow-lg); } .plan-card.popular .plan-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #d9bd7c, var(--gold-dark)); color: #fff; padding: 6px 18px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .8px; box-shadow: 0 5px 16px rgba(168,134,28,.4); font-family: var(--font-body); } .plan-card h3 { font-size: 1.4rem; margin-bottom: 4px; } .plan-card .plan-desc { color: var(--ink-soft); font-size: 13.5px; min-height: 42px; } .plan-card .plan-price { margin: 16px 0; } .plan-card .plan-price .amount { font-size: 2.3rem; font-weight: 800; color: var(--rose-deep); font-family: var(--font-body); } .plan-card .plan-price .per { color: var(--ink-soft); font-size: 14px; } .plan-card ul { list-style: none; padding: 0; margin: 0 0 20px; flex: 1; } .plan-card ul li { padding: 8px 0 8px 28px; position: relative; font-size: 14px; border-bottom: 1px dashed var(--line); } .plan-card ul li:last-child { border-bottom: none; } .plan-card ul li::before { content: '✓'; position: absolute; left: 4px; color: var(--gold-dark); font-weight: 800; } .plan-card ul li.no::before { content: '✕'; color: #d8c9cb; } /* ============ CTA ============ */ .salon-cta { position: relative; overflow: hidden; border-radius: 24px; background: linear-gradient(135deg, #9c3a5c 0%, #b56b75 55%, #9c7a3c 140%); color: #fff; padding: 52px 44px; } .salon-cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(600px 240px at 90% -30px, rgba(242,217,164,.4), transparent 60%); } .salon-cta .in { position: relative; z-index: 2; display: flex; align-items: center; gap: 30px; flex-wrap: wrap; } .salon-cta h2 { font-size: 1.9rem; margin: 0 0 8px; color: #fff; } .salon-cta p { opacity: .93; max-width: 560px; } .salon-cta .acts { margin-left: auto; display: flex; gap: 14px; flex-wrap: wrap; } /* ============ Feature strip ============ */ .feature-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; } .feature-item { text-align: center; padding: 26px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; transition: all .18s ease; } .feature-item:hover { border-color: var(--line-gold); box-shadow: var(--shadow-lg); transform: translateY(-3px); } .feature-item .fi { width: 58px; height: 58px; margin: 0 auto 14px; border-radius: 16px; background: linear-gradient(135deg, var(--blush), var(--gold-soft)); display: flex; align-items: center; justify-content: center; } .feature-item .fi svg { width: 26px; height: 26px; stroke: var(--rose-deep); } .feature-item h4 { margin: 0 0 5px; font-family: var(--font-body); font-weight: 700; } .feature-item p { color: var(--ink-soft); font-size: 13.5px; margin: 0; } /* ============ Tpl pick ============ */ .tpl-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; } .tpl-card { border: 2px solid var(--line); border-radius: 16px; padding: 15px; text-align: center; cursor: pointer; position: relative; transition: all .15s; background: #fff; } .tpl-card:hover { border-color: var(--rose); } .tpl-card.selected { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(198,166,100,.2); } .tpl-card .preview { height: 96px; border-radius: 11px; margin-bottom: 11px; border: 1px solid var(--line); overflow: hidden; position: relative; } .tpl-card .preview .bar { height: 14px; background: rgba(217,104,141,.85); } .tpl-card .preview .bar2 { height: 34px; background: linear-gradient(135deg, var(--blush), var(--blush-soft)); } .tpl-card .preview .goldline { height: 3px; background: linear-gradient(90deg, var(--gold), var(--gold-soft)); } .tpl-card .lock { position: absolute; top: 9px; right: 9px; background: #fff; border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,.16); font-size: 14px; } .tpl-card .upgrade { font-size: 11.5px; color: var(--gold-dark); font-weight: 700; } .divider-gold { border: none; height: 1px; background: linear-gradient(90deg, transparent, var(--line-gold), transparent); margin: 22px 0; } /* ============ Registreerimise paketi valik ============ */ .plan-radio { border: 2px solid var(--line); border-radius: 16px; padding: 18px; cursor: pointer; transition: all .15s; background: #fff; position: relative; } .plan-radio:hover { border-color: var(--rose); } .plan-radio.selected { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(198,166,100,.2); background: linear-gradient(135deg, var(--gold-soft), #fff); } .plan-radio input { position: absolute; opacity: 0; } .plan-radio .pr-name { font-weight: 800; font-size: 1.1rem; color: var(--ink); display: flex; align-items: center; justify-content: space-between; } .plan-radio .pr-price { color: var(--rose-deep); font-weight: 800; font-size: 1.25rem; } .plan-radio .pr-feat { font-size: 12.5px; color: var(--ink-soft); margin-top: 6px; line-height: 1.5; } @media (max-width: 900px) { .dash-side { position: fixed; left: 0; top: 0; bottom: 0; z-index: 250; transform: translateX(-100%); transition: .22s ease; box-shadow: none; } .dash-side.open { transform: none; box-shadow: 0 0 60px rgba(48,22,30,.5); } .dash-top .menu-btn { display: inline-flex; } .site-header .header-search { display: none; } .hero .in { padding: 80px 0 100px; } .salon-cta { padding: 36px 26px; } } .menu-btn { display: none; } /* ============================================================ MALLID – reaalsed disainierinevused (mitte ainult hero) ============================================================ */ /* ---------- ELEGANTNE: serif, kuld, luksus ---------- */ .tpl-elegant { font-family: var(--font-head); } .tpl-elegant body, .tpl-elegant { background: #fbf8f3; } .tpl-elegant .salon-nav { background: #fffdf9; } .tpl-elegant .salon-nav a { font-family: var(--font-head); letter-spacing: 1px; text-transform: uppercase; font-size: 12.5px; } .tpl-elegant .salon-hero .content { text-align: center; padding: 150px 0 64px; } .tpl-elegant .salon-hero h1 { font-size: clamp(2.4rem, 5.5vw, 3.8rem); font-weight: 500; letter-spacing: 3px; text-transform: uppercase; } .tpl-elegant .salon-hero .tagline { font-style: italic; font-size: 18px; } .tpl-elegant .logo-ring { width: 130px; height: 130px; border-radius: 50%; border: 2px solid rgba(242,217,164,.85); padding: 7px; background: rgba(255,255,255,.16); backdrop-filter: blur(5px); margin: 0 auto 8px; } .tpl-elegant .logo-ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .tpl-elegant .section { padding: 60px 0; } .tpl-elegant .section-title h2 { font-weight: 500; text-transform: uppercase; letter-spacing: 3px; font-size: 1.6rem; } .tpl-elegant .section-title h2::after { width: 80px; background: linear-gradient(90deg, var(--gold), transparent); } .tpl-elegant .card { border: 1px solid var(--line-gold); border-radius: 22px; box-shadow: none; background: #fffdf9; } .tpl-elegant .card-head { background: linear-gradient(180deg, var(--gold-soft), transparent); border-bottom: 1px solid var(--line-gold); } .tpl-elegant .service-row { border-bottom: 1px dashed var(--line-gold); padding: 18px 4px; } .tpl-elegant .service-row .price { color: var(--gold-dark); font-family: var(--font-head); font-size: 1.1rem; } .tpl-elegant .employee-card { border: 1px solid var(--line-gold); border-radius: 50% 50% 18px 18px; padding-top: 26px; background: #fffdf9; } .tpl-elegant .employee-card img { border: 3px solid var(--gold-soft); } .tpl-elegant .info-list li { border-bottom: 1px dashed var(--line-gold); } .tpl-elegant .info-list .ic { color: var(--gold-dark); } .tpl-elegant .review-item { border-bottom: 1px dashed var(--line-gold); } .tpl-elegant .review-item .reply { border-left-color: var(--gold); } .tpl-elegant .gallery-grid img { border: 2px solid var(--gold-soft); border-radius: 16px; } .tpl-elegant h2, .tpl-elegant h3, .tpl-elegant h4 { font-weight: 500; letter-spacing: .3px; } .tpl-elegant .btn { border-radius: 2px 14px 2px 14px; font-family: var(--font-head); letter-spacing: 1px; } .tpl-elegant .chip { border-radius: 2px 12px 2px 12px; } /* ---------- KAASAEGNE: julge, tume, terav ---------- */ .tpl-modern { background: #f4f2f2; } .tpl-modern .salon-hero .content { padding: 150px 0 56px; } .tpl-modern .salon-hero h1 { font-weight: 900; letter-spacing: -1.5px; text-transform: uppercase; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.05; } .tpl-modern .salon-nav { background: #1c1417; border-bottom: none; } .tpl-modern .salon-nav a { color: rgba(255,255,255,.75); border-bottom: 3px solid transparent; } .tpl-modern .salon-nav a:hover { color: #fff; } .tpl-modern .salon-nav a.active { color: #fff; border-bottom-color: var(--rose-soft); } .tpl-modern .section-title h2 { font-weight: 900; text-transform: uppercase; letter-spacing: 1.5px; } .tpl-modern .section-title h2::after { width: 100%; height: 6px; background: var(--rose); } .tpl-modern .card { border-radius: 8px; border: 1px solid #e3ddde; box-shadow: none; } .tpl-modern .card-head { border-radius: 8px 8px 0 0; background: #faf8f8; } .tpl-modern .service-row { padding: 14px 0; border-bottom: 1px solid #e8e2e3; } .tpl-modern .service-row .price { font-weight: 900; color: var(--rose-deep); font-size: 1.05rem; } .tpl-modern .employee-card { border-radius: 8px; border: 1px solid #e3ddde; } .tpl-modern .employee-card img { border-radius: 8px; border: none; width: 100%; height: 130px; object-fit: cover; } .tpl-modern .btn { border-radius: 6px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px; font-size: 13px; } .tpl-modern .badge { border-radius: 4px; } .tpl-modern .status { border-radius: 4px; } .tpl-modern .gallery-grid img { border-radius: 6px; border: none; } .tpl-modern .review-item { border-bottom: 1px solid #e8e2e3; } .tpl-modern .info-list li { border-bottom: 1px solid #e8e2e3; } .tpl-modern .info-list .ic { color: var(--rose); } /* Külgriba: lühikestel ekraanidel tihenda, et menüü EI hakkaks scrollima */ @media (max-height: 720px) { .dash-side .brand { padding: 10px 18px 6px; font-size: 16px; } .dash-side .side-label { padding: 7px 18px 3px; } .dash-side a.side-link { padding: 5px 18px; font-size: 12.5px; min-height: 27px; } .dash-side .side-user { padding: 6px 18px; font-size: 11px; } } /* ============================================================ PREMIUM ESILEHT (luksuslik beauty marketplace) ============================================================ */ /* Hero – full-bleed taustapilt + fade */ /* Hero – premium pilt paremal, fadeb sisse vasakult; vasakul kreemikas taust */ .prem-hero { position: relative; padding: 0; overflow: visible; min-height: 640px; display: flex; align-items: center; background: linear-gradient(135deg, #faf3f0 0%, #fdf4f6 60%, #f7e8ec 100%); } /* Sujuv fade: hero taust läheb üle benefitsi taustavärviks (cream #faf6f4) */ .prem-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: -160px; height: 300px; z-index: 1; background: linear-gradient(180deg, rgba(250,246,244,0) 0%, rgba(250,246,244,.5) 30%, rgba(250,246,244,.9) 58%, rgba(250,246,244,1) 80%); pointer-events: none; } .prem-hero-bgimg { position: absolute; top: 0; left: 0; right: 0; bottom: -140px; background-size: cover; background-position: right center; } .prem-hero-fade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(250,243,240,1) 0%, rgba(250,243,240,.99) 30%, rgba(250,243,240,.95) 48%, rgba(250,243,240,.7) 62%, rgba(250,243,240,.35) 75%, rgba(250,243,240,0) 90%); } .prem-hero-in { position: relative; z-index: 2; width: 100%; padding-top: 56px; padding-bottom: 72px; } .prem-hero-text { max-width: 640px; padding: 30px 0; } .prem-eyebrow { display: inline-block; font-size: 12px; letter-spacing: 3px; font-weight: 700; color: var(--gold-dark); text-transform: uppercase; margin-bottom: 18px; } .prem-h1 { font-family: var(--font-head); font-weight: 600; font-size: clamp(42px, 5vw, 64px); line-height: 1.08; color: #3a2b30; margin: 0 0 18px; letter-spacing: -.5px; } .prem-h1-accent { color: var(--rose); } .prem-hero-sub { font-size: 17px; line-height: 1.65; color: var(--ink-soft); max-width: 520px; margin: 0 0 30px; } /* Otsingukast */ .prem-search { display: grid; grid-template-columns: 1fr 1px 1fr auto; align-items: stretch; background: #fff; border-radius: 22px; box-shadow: 0 18px 50px rgba(168,74,104,.14), 0 3px 10px rgba(168,74,104,.06); border: 1px solid rgba(217,104,141,.14); padding: 8px; max-width: 740px; gap: 0; } .prem-search-field { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-radius: 14px; min-width: 0; } .prem-search-inner { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; } .prem-search-field:focus-within { background: var(--blush-soft); } .prem-search-ic { font-size: 18px; } .prem-search-label { font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--gold-dark); white-space: nowrap; } .prem-search-field input, .prem-search-field select { border: 0; outline: 0; background: transparent; font-size: 13.5px; color: var(--ink); width: 100%; min-width: 0; max-width: 100%; font-family: var(--font-body); } .prem-search-field input::placeholder, .prem-search-field select { color: #9b8b90; opacity: 1; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .prem-search-field input::placeholder { color: #b9a9ae; } .prem-search-sep { width: 1px; background: var(--line); } .prem-search-btn { border: 0; cursor: pointer; background: linear-gradient(135deg, #d8b44a, #c6a664); color: #fff; font-weight: 700; font-size: 15px; border-radius: 16px; padding: 0 30px; font-family: var(--font-body); letter-spacing: .2px; transition: transform .15s ease, box-shadow .15s ease; } .prem-search-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(198,166,100,.5); } /* Usaldusriba */ .prem-trust { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 22px; font-size: 13.5px; color: var(--ink-soft); font-weight: 600; } .prem-trust span { display: inline-flex; align-items: center; gap: 6px; } @media (max-width: 640px) { .prem-hero { min-height: 560px; } .prem-hero-bgimg { background-position: 70% center; } .prem-hero-fade { background: linear-gradient(180deg, rgba(250,243,240,.99) 0%, rgba(250,243,240,.94) 40%, rgba(250,243,240,.75) 65%, rgba(250,243,240,.4) 85%, rgba(250,243,240,.1) 100%); } .prem-search { grid-template-columns: 1fr; gap: 6px; } .prem-search-sep { display: none; } .prem-search-btn { padding: 15px; } } /* Benefits */ .prem-benefits { padding: 130px 0 20px; position: relative; } .prem-benefits-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } .prem-benefit { text-align: center; padding: 8px 12px; } .prem-benefit-ic { width: 64px; height: 64px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-size: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--gold-soft), #fff); border: 1px solid var(--line-gold); box-shadow: 0 6px 18px rgba(198,166,100,.16); } .prem-benefit h4 { font-family: var(--font-head); font-size: 19px; font-weight: 600; color: #3a2b30; margin: 0 0 8px; } .prem-benefit p { font-size: 14px; color: var(--ink-soft); line-height: 1.6; margin: 0; } /* Sektsioonid */ .prem-section { padding: 64px 0 20px; } .prem-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 30px; } .prem-h2 { font-family: var(--font-head); font-weight: 600; font-size: clamp(28px, 3.4vw, 38px); color: #3a2b30; margin: 0; letter-spacing: -.3px; } .prem-sec-sub { color: var(--ink-soft); margin: 8px 0 0; } .prem-link { color: var(--gold-dark); font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap; } .prem-link:hover { color: var(--rose); } /* Kategooriakaardid */ .prem-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .prem-cat-card { position: relative; border-radius: 24px; overflow: hidden; height: 200px; display: block; text-decoration: none; box-shadow: 0 12px 30px rgba(168,74,104,.10); } .prem-cat-img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .5s ease; } .prem-cat-card:hover .prem-cat-img { transform: scale(1.06); } .prem-cat-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(40,20,25,.02), rgba(40,20,25,.55)); } .prem-cat-body { position: absolute; left: 20px; bottom: 18px; color: #fff; display: flex; flex-direction: column; gap: 2px; } .prem-cat-name { font-family: var(--font-head); font-size: 22px; font-weight: 600; text-shadow: 0 2px 12px rgba(0,0,0,.25); } .prem-cat-cnt { font-size: 13px; opacity: .92; text-shadow: 0 1px 8px rgba(0,0,0,.3); } /* Salongikaardid */ .prem-salon-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .prem-salon-card { background: #fff; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(168,74,104,.07); transition: transform .18s ease, box-shadow .18s ease; position: relative; } .prem-salon-card:hover { transform: translateY(-4px); box-shadow: 0 22px 50px rgba(168,74,104,.16); } .prem-salon-img { display: block; height: 200px; overflow: hidden; } .prem-salon-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .prem-salon-card:hover .prem-salon-img img { transform: scale(1.05); } .prem-fav { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); font-size: 19px; color: var(--rose); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,.12); transition: transform .15s ease; } .prem-fav:hover { transform: scale(1.12); } .prem-salon-body { padding: 18px 20px 20px; } .prem-salon-body h3 { margin: 0 0 6px; font-size: 17px; font-weight: 700; } .prem-salon-body h3 a { color: #3a2b30; text-decoration: none; } .prem-salon-meta { font-size: 13px; color: var(--ink-soft); margin-bottom: 14px; } .prem-salon-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .prem-rating { font-weight: 700; color: var(--gold-dark); font-size: 14px; } .prem-rating em { font-style: normal; color: var(--ink-soft); font-weight: 500; } .prem-book-btn { background: linear-gradient(135deg, var(--rose), var(--rose-deep)); color: #fff !important; border-radius: 999px; padding: 9px 20px; font-size: 13.5px; font-weight: 700; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; } .prem-book-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(217,104,141,.35); } .prem-empty { grid-column: 1/-1; text-align: center; color: var(--ink-soft); padding: 30px; } /* Salongiomanike CTA */ .prem-owner { background: linear-gradient(135deg, #f3d9de 0%, #eec9d1 55%, #e8bcc6 100%); margin: 60px 0 20px; border-radius: 0; } .prem-owner-in { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; padding: 70px 24px; } .prem-owner-eyebrow { font-size: 12px; letter-spacing: 3px; font-weight: 700; color: var(--rose-deep); text-transform: uppercase; margin-bottom: 12px; display: inline-block; } .prem-owner-h2 { font-family: var(--font-head); font-weight: 600; font-size: clamp(30px, 3.6vw, 42px); color: #4a2530; margin: 0 0 14px; } .prem-owner-sub { font-size: 16px; color: #6d4a54; margin: 0 0 22px; } .prem-owner-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; margin-bottom: 30px; font-size: 14.5px; color: #5d3a44; font-weight: 600; } .prem-owner-btn { display: inline-block; background: linear-gradient(135deg, #d8b44a, #c6a664); color: #fff !important; border-radius: 999px; padding: 15px 40px; font-size: 16px; font-weight: 700; text-decoration: none; box-shadow: 0 10px 26px rgba(198,166,100,.4); transition: transform .15s ease, box-shadow .15s ease; } .prem-owner-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(198,166,100,.5); } .prem-owner-img img { width: 100%; max-width: 460px; aspect-ratio: 4/3; object-fit: cover; border-radius: 26px; box-shadow: 0 26px 60px rgba(120,50,70,.28); } /* Paketid */ .prem-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .prem-plan { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 30px 28px; position: relative; box-shadow: 0 10px 30px rgba(168,74,104,.06); } .prem-plan-popular { border: 2px solid var(--gold); box-shadow: 0 18px 46px rgba(198,166,100,.22); } .prem-plan-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #d8b44a, #c6a664); color: #fff; font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 5px 14px; white-space: nowrap; } .prem-plan h3 { font-family: var(--font-head); font-size: 22px; margin: 0 0 6px; color: #3a2b30; } .prem-plan-desc { font-size: 13.5px; color: var(--ink-soft); min-height: 40px; margin-bottom: 14px; } .prem-plan-price { font-size: 34px; font-weight: 800; color: var(--rose-deep); margin-bottom: 18px; } .prem-plan-price em { font-size: 14px; font-style: normal; font-weight: 500; color: var(--ink-soft); } .prem-plan ul { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 10px; } .prem-plan ul li { font-size: 14px; color: var(--ink); padding-left: 26px; position: relative; } .prem-plan ul li::before { content: '✓'; position: absolute; left: 0; color: var(--gold-dark); font-weight: 700; } .prem-plan-btn { width: 100%; border: 0; cursor: pointer; border-radius: 999px; padding: 13px; font-size: 15px; font-weight: 700; font-family: var(--font-body); background: var(--blush); color: var(--rose-deep); transition: all .15s ease; } .prem-plan-popular .prem-plan-btn { background: linear-gradient(135deg, var(--rose), var(--rose-deep)); color: #fff; } .prem-plan-btn:hover { transform: translateY(-1px); } /* Mobiil */ @media (max-width: 1000px) { .prem-benefits-grid { grid-template-columns: repeat(2, 1fr); } .prem-cat-grid { grid-template-columns: repeat(2, 1fr); } .prem-salon-grid { grid-template-columns: repeat(2, 1fr); } .prem-owner-in { grid-template-columns: 1fr; padding: 48px 24px; } .prem-plans { grid-template-columns: 1fr; } } @media (max-width: 640px) { .prem-search { grid-template-columns: 1fr; gap: 6px; } .prem-search-sep { display: none; } .prem-search-btn { padding: 15px; } .prem-benefits-grid, .prem-cat-grid, .prem-salon-grid { grid-template-columns: 1fr; } .prem-owner-checks { grid-template-columns: 1fr; } .prem-hero-in { padding-top: 28px; } } /* ============================================================ PREMIUM HEADER + FOOTER ============================================================ */ .prem-header { position: sticky; top: 0; z-index: 200; background: rgba(250,243,240,.9); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(217,104,141,.10); } .prem-header-in { display: flex; align-items: center; gap: 28px; height: 74px; } .prem-brand { display: block; } .prem-nav { display: flex; gap: 26px; margin: 0 auto; } .prem-nav a { color: #5d4a50; font-size: 14.5px; font-weight: 600; text-decoration: none; transition: color .15s ease; position: relative; padding: 6px 0; } .prem-nav a:hover { color: var(--rose-deep); } .prem-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--rose), var(--gold)); transform: scaleX(0); transition: transform .2s ease; } .prem-nav a:hover::after { transform: scaleX(1); } .prem-header-right { display: flex; align-items: center; gap: 14px; } .prem-lang { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); text-decoration: none; padding: 5px 9px; border-radius: 999px; } .prem-lang.active { background: var(--blush); color: var(--rose-deep); } .prem-fav-link { font-size: 21px; color: var(--rose-deep); text-decoration: none; transition: transform .15s ease; } .prem-fav-link:hover { transform: scale(1.15); } .prem-login-btn { border: 0; background: transparent; color: #5d4a50; font-weight: 700; font-size: 14px; cursor: pointer; font-family: var(--font-body); text-decoration: none; } .prem-login-btn:hover { color: var(--rose-deep); } .prem-gold-pill { display: inline-block; background: linear-gradient(135deg, #d8b44a, #c6a664); color: #fff !important; border-radius: 999px; padding: 10px 22px; font-size: 14px; font-weight: 700; text-decoration: none; box-shadow: 0 6px 18px rgba(198,166,100,.35); transition: transform .15s ease, box-shadow .15s ease; white-space: nowrap; } .prem-gold-pill:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(198,166,100,.45); } /* Footer */ .prem-footer { background: linear-gradient(180deg, #faf3f0, #f6e8ec); border-top: 1px solid rgba(217,104,141,.10); padding: 60px 0 0; margin-top: 70px; } .prem-footer-in { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 44px; } .prem-footer-brand .prem-footer-tag { font-family: var(--font-head); font-size: 17px; color: var(--rose-deep); margin: 0; } .prem-footer-col h4 { font-family: var(--font-head); font-size: 16px; color: #3a2b30; margin: 0 0 14px; } .prem-footer-col { display: flex; flex-direction: column; gap: 9px; } .prem-footer-col a { color: var(--ink-soft); font-size: 14px; text-decoration: none; transition: color .15s ease; } .prem-footer-col a:hover { color: var(--rose-deep); } .prem-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid rgba(217,104,141,.10); padding: 20px 0 24px; font-size: 13px; color: var(--ink-soft); } .prem-footer-bottom a { color: var(--ink-soft); text-decoration: none; margin-left: 14px; } .prem-footer-bottom a:hover { color: var(--rose-deep); } .prem-footer-legal { display: flex; flex-wrap: wrap; } @media (max-width: 1000px) { .prem-header-in { flex-wrap: wrap; height: auto; padding: 12px 16px; gap: 12px; } .prem-nav { order: 3; width: 100%; justify-content: center; gap: 18px; flex-wrap: wrap; } .prem-footer-in { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .prem-nav { gap: 14px; font-size: 13px; } .prem-gold-pill { padding: 8px 14px; font-size: 13px; } .prem-footer-in { grid-template-columns: 1fr; } } /* Kontakt */ .prem-contact-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: start; } .prem-contact-info { display: flex; flex-direction: column; } @media (max-width: 900px) { .prem-contact-grid { grid-template-columns: 1fr; } } /* ============================================================ Ligipääsetavus (WCAG) – fookus, liikumine, kontrast, skip-link ============================================================ */ :root { /* Kontrastitokenid: tekstikasutuseks piisava kontrastsusega toonid (WCAG AA: 4.5:1 tavatekstile) – kaunistusvärvid jäävad muutumatuks */ --gold-text: #8a6a12; /* 5.1:1 valgel – kuldse teksti asemel */ --rose-btn: #bf4a70; /* 4.7:1 valge tekstiga – nuppude taust */ } /* Klaviatuurifookus – nähtav rõngas ainult klaviatuuriga liikujale */ :focus-visible { outline: 3px solid var(--rose-btn); outline-offset: 2px; border-radius: 4px; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .prem-nav a:focus-visible, .side-link:focus-visible, .card:focus-visible, .search-btn:focus-visible { outline: 3px solid var(--rose-btn); outline-offset: 2px; } /* Vähendatud liikumine */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } html { scroll-behavior: auto !important; } } /* Liigu sisu juurde – link (klaviatuurikasutajale) */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 9999; background: var(--rose-deep); color: #fff; padding: 12px 20px; border-radius: 0 0 10px 0; font-weight: 700; text-decoration: none; } .skip-link:focus { left: 0; position: fixed; } /* Kontrasti parandused */ .prem-gold-pill { background: linear-gradient(135deg, #e2c98a, var(--gold)); color: #3f2f0a !important; } a.prem-link, .prem-link { color: var(--rose-deep); } .text-gold, .gold-text { color: var(--gold-text) !important; } /* Mobiilipäis: mitte kleepuv, menüü ühel real keritav */ @media (max-width: 700px) { .site-header.prem-header { position: static; } .prem-header-in { flex-wrap: nowrap; gap: 8px; } .prem-nav { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; gap: 10px; padding-bottom: 4px; } .prem-nav::-webkit-scrollbar { height: 3px; } .prem-nav a { white-space: nowrap; } /* Puutealade miinimum 44×44px (WCAG 2.5.8) */ .prem-nav a, .prem-login-btn, .prem-gold-pill, .prem-lang, .btn, .side-link { min-height: 44px; display: inline-flex; align-items: center; } } /* Menüü vahejooned (admini/dashboardi külgmenüü) */ .side-sep { height: 1px; background: rgba(216,104,141,.15); margin: 8px 10px; } /* Esiletõstetud (soovitatud) salongi kuldne täht – väikese overlapiga pildi nurgal */ .prem-salon-img { position: relative; display: block; } .prem-featured-star { position: absolute; top: 10px; left: 10px; z-index: 2; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #ffd76a, #d8a820); color: #5a4300; font-size: 17px; line-height: 30px; text-align: center; box-shadow: 0 3px 10px rgba(0,0,0,.25); } /* Salongi lehe kuldne täht – väikese overlapiga logo nurgal */ .salon-star { top: -6px; left: -6px; width: 26px; height: 26px; line-height: 26px; font-size: 15px; } /* Menüü lugemata-märge (badge) */ .menu-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px; border-radius: 999px; background: #e05b5b; color: #fff; font-size: 11px; font-weight: 700; line-height: 1; } .side-link .menu-badge { float: right; margin-top: 2px; } /* Paketid – paindlik paigutus (1–4 veergu olenevalt pakettide arvust) */ .prem-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; } @media (max-width: 1000px) { .prem-plans { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } } @media (max-width: 600px) { .prem-plans { grid-template-columns: 1fr; } }