/* ========================================================================== CLIN-TEAM — стили сайта ========================================================================== */ :root{ --bg: #F5F8F9; --surface: #FFFFFF; --surface-2: #EEF3F4; --ink: #10232B; --ink-soft: #4C6572; --ink-faint: #7C939E; --line: #DCE6E8; --accent: #0E7C86; --accent-ink: #063A40; --accent-soft: #E3F3F1; --accent-2: #FF6B4A; --accent-2-ink: #7A2A16; --accent-2-soft: #FFE7DF; --radius-s: 8px; --radius-m: 14px; --radius-l: 22px; --shadow-1: 0 1px 2px rgba(16,35,43,.06), 0 6px 20px -8px rgba(16,35,43,.18); --shadow-2: 0 12px 32px -12px rgba(16,35,43,.28); --maxw: 1180px; --header-h: 72px; } /* Тёмная тема отключена: сайт всегда остаётся светлым, независимо от настроек устройства посетителя. Правило ниже применяется только если на вручную поставить data-theme="dark" (сейчас нигде не ставится). */ :root[data-theme="dark"]{ --bg: #0A1416; --surface: #101C1F; --surface-2: #16262A; --ink: #EAF3F3; --ink-soft: #A9BFC4; --ink-faint: #75909699; --line: #223236; --accent: #3FBAC0; --accent-ink: #DFF7F5; --accent-soft: #123336; --accent-2: #FF8B69; --accent-2-ink: #FFE3D6; --accent-2-soft: #3A2118; --shadow-1: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px -8px rgba(0,0,0,.5); --shadow-2: 0 16px 40px -14px rgba(0,0,0,.6); } *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } } body{ margin:0; background:var(--bg); color:var(--ink); font-family:'Manrope', 'Segoe UI', system-ui, sans-serif; font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; padding-inline:0; overflow-x:hidden; } img{ max-width:100%; display:block; } .wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:20px; } @media (min-width:900px){ .wrap{ padding-inline:32px; } } h1,h2,h3,h4{ font-family:'Sora', 'Segoe UI', system-ui, sans-serif; font-weight:700; line-height:1.15; margin:0; text-wrap:balance; color:var(--ink); } .eyebrow{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:12.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--accent); font-weight:600; display:inline-flex; align-items:center; gap:8px; } .eyebrow::before{ content:""; width:16px; height:2px; background:var(--accent-2); border-radius:2px; } .nums{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums; } a{ color:inherit; } .visually-hidden{ position:absolute; width:1px;height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } /* ---------------- Buttons ---------------- */ .btn{ --pad-y: 13px; display:inline-flex; align-items:center; justify-content:center; gap:9px; padding: var(--pad-y) 22px; border-radius:999px; font-family:'Manrope', sans-serif; font-weight:700; font-size:15px; text-decoration:none; border:1.5px solid transparent; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease; min-height:44px; white-space:nowrap; } .btn:active{ transform:translateY(1px); } .btn:focus-visible{ outline:2.5px solid var(--accent); outline-offset:2px; } .btn-primary{ background:var(--accent); color:#F4FFFE; box-shadow:var(--shadow-1); } .btn-primary:hover{ background:var(--accent-ink); } .btn-ghost{ background:var(--surface); color:var(--ink); border-color:var(--line); } .btn-ghost:hover{ border-color:var(--accent); color:var(--accent-ink); } .btn-viber{ background:var(--accent-2-soft); color:var(--accent-2-ink); } .btn-viber:hover{ background:var(--accent-2); color:#fff; } .messenger-row{ display:flex; gap:10px; align-items:center; } .messenger-row:empty{ display:none; } .messenger-link{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px; flex:none; color:#fff; transition:transform .15s ease, filter .15s ease; } .messenger-link svg{ width:21px; height:21px; } .messenger-link:hover{ transform:translateY(-2px); filter:brightness(1.08); } .messenger-link[hidden]{ display:none; } .messenger-link.viber{ background:#7360F2; box-shadow:0 4px 12px -4px rgba(115,96,242,.55); } .messenger-link.whatsapp{ background:#25D366; box-shadow:0 4px 12px -4px rgba(37,211,102,.55); } .messenger-link.telegram{ background:#29A9EB; box-shadow:0 4px 12px -4px rgba(41,169,235,.55); } .btn-block{ width:100%; } .btn svg{ width:18px; height:18px; flex:none; } /* ---------------- Header ---------------- */ .site-header{ position:sticky; top: env(safe-area-inset-top, 0px); z-index:50; background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:blur(10px) saturate(1.2); -webkit-backdrop-filter:blur(10px) saturate(1.2); border-bottom:1px solid var(--line); } .site-header > .wrap{ display:flex; align-items:center; justify-content:space-between; height:var(--header-h); gap:16px; } .brand{ display:flex; align-items:center; gap:10px; text-decoration:none; flex:none; } .brand-mark{ width:38px; height:38px; flex:none; object-fit:contain; } .brand-word{ font-family:'Sora', sans-serif; font-weight:800; font-size:19px; letter-spacing:-.01em; color:var(--ink); white-space:nowrap; } .brand-word b{ color:var(--accent); font-weight:800; } .main-nav{ display:none; gap:6px; align-items:center; } .main-nav a{ text-decoration:none; color:var(--ink-soft); font-weight:600; font-size:14.5px; padding:9px 13px; border-radius:999px; transition:background-color .15s ease, color .15s ease; } .main-nav a:hover{ background:var(--surface-2); color:var(--ink); } .header-cta{ display:none; align-items:center; gap:10px; } .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px; border:1.5px solid var(--line); background:var(--surface); flex:none; cursor:pointer; } .nav-toggle svg{ width:20px; height:20px; } .nav-toggle .i-close{ display:none; } .nav-open .nav-toggle .i-burger{ display:none; } .nav-open .nav-toggle .i-close{ display:block; } @media (min-width:980px){ .main-nav{ display:flex; } .header-cta{ display:flex; } .nav-toggle{ display:none; } } .mobile-panel{ display:none; border-bottom:1px solid var(--line); background:var(--surface); } .nav-open .mobile-panel{ display:block; } .mobile-panel .wrap{ padding-block:14px; display:flex; flex-direction:column; gap:2px; } .mobile-panel a{ text-decoration:none; color:var(--ink); font-weight:600; font-size:16px; padding:13px 6px; border-bottom:1px solid var(--line); } .mobile-panel a:last-of-type{ border-bottom:none; } .mobile-panel .mp-cta{ display:flex; flex-direction:column; gap:10px; padding-top:14px; } .mobile-panel .mp-cta .messenger-row{ justify-content:center; } /* ---------------- Hero ---------------- */ .hero{ padding-block: 44px 56px; position:relative; overflow:clip; } .hero::before{ content:""; position:absolute; inset:-20% -10% auto -10%; height:420px; background: radial-gradient(60% 60% at 20% 20%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%), radial-gradient(50% 50% at 85% 10%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 70%); pointer-events:none; z-index:0; } .hero .wrap{ position:relative; z-index:1; } .hero-grid{ display:grid; gap:32px; } @media (min-width:980px){ .hero-grid{ grid-template-columns:1.1fr .9fr; align-items:center; gap:48px; } } .hero h1{ font-size:clamp(30px, 6vw, 48px); margin-top:14px; max-width:16ch; } .hero-sub{ margin-top:16px; color:var(--ink-soft); font-size:17px; max-width:46ch; } .hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; } .hero-facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden; margin-top:32px; max-width:560px; } .hero-fact{ background:var(--surface); padding:13px 10px; text-align:left; } .hero-fact .num{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-weight:600; font-size:16.5px; color:var(--accent-ink); display:block; white-space:nowrap; } .hero-fact .lbl{ font-size:11.5px; color:var(--ink-faint); margin-top:3px; display:block; line-height:1.3; } @media (min-width:460px){ .hero-fact .num{ font-size:19px; } } .hero-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-l); padding:26px; box-shadow:var(--shadow-2); } .hero-card-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; } .hero-card-head .tag{ font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--accent-ink); background:var(--accent-soft); padding:5px 10px; border-radius:999px; font-weight:600; } .hero-card-title{ font-size:17px; margin-top:14px; } .hero-steps{ list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:14px; } .hero-steps li{ display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:var(--ink-soft); } .hero-steps .n{ flex:none; width:26px; height:26px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono', monospace; font-size:12.5px; font-weight:700; } .hero-steps strong{ color:var(--ink); display:block; font-weight:700; } /* ---------------- Section shell ---------------- */ section{ padding-block:56px; scroll-margin-top:calc(var(--header-h) + 12px); } .section-head{ max-width:640px; margin-bottom:34px; } .section-head h2{ font-size:clamp(24px, 4vw, 34px); margin-top:12px; } .section-head p{ color:var(--ink-soft); margin-top:12px; font-size:15.5px; } .section-alt{ background:var(--surface); border-block:1px solid var(--line); } /* ---------------- Services ---------------- */ .services-grid{ display:grid; grid-template-columns:1fr; gap:16px; } @media (min-width:640px){ .services-grid{ grid-template-columns:repeat(2,1fr); } } @media (min-width:980px){ .services-grid{ grid-template-columns:repeat(3,1fr); } } .service-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m); padding:22px; display:flex; flex-direction:column; gap:12px; transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease; } .service-card:hover{ border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow:var(--shadow-1); transform:translateY(-2px); } .service-icon{ width:44px; height:44px; border-radius:12px; background:var(--accent-soft); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; flex:none; } .service-icon svg{ width:22px; height:22px; } .service-card h3{ font-size:17px; } .service-card p{ margin:0; color:var(--ink-soft); font-size:14.5px; } .extra-tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; } .extra-tags span{ display:inline-flex; align-items:center; gap:7px; background:var(--surface); border:1px solid var(--line); padding:9px 14px; border-radius:999px; font-size:13.5px; color:var(--ink-soft); font-weight:600; } .extra-tags span::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--accent-2); flex:none; } /* ---------------- Pricing ---------------- */ .price-tabs{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; margin-bottom:24px; scrollbar-width:none; } .price-tabs::-webkit-scrollbar{ display:none; } .price-tab{ flex:none; border:1.5px solid var(--line); background:var(--surface); color:var(--ink-soft); font-family:'Manrope',sans-serif; font-weight:700; font-size:14px; padding:11px 18px; border-radius:999px; cursor:pointer; min-height:44px; transition:all .15s ease; } .price-tab[aria-selected="true"]{ background:var(--ink); border-color:var(--ink); color:var(--bg); } :root[data-theme="dark"] .price-tab[aria-selected="true"], @media (prefers-color-scheme:dark){ } .price-panel{ display:none; } .price-panel.is-active{ display:block; } .price-note{ display:flex; gap:10px; align-items:flex-start; background:var(--accent-soft); color:var(--accent-ink); border-radius:var(--radius-m); padding:14px 16px; font-size:13.5px; margin-top:18px; } .price-note svg{ width:18px; height:18px; flex:none; margin-top:1px; } /* room price cards (mobile-first; becomes table on wide) */ .room-cards{ display:grid; grid-template-columns:1fr; gap:12px; } @media (min-width:700px){ .room-cards{ grid-template-columns:repeat(2,1fr); } } @media (min-width:1000px){ .room-cards{ grid-template-columns:repeat(5,1fr); } } .room-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m); padding:18px; } .room-card .room-title{ font-family:'Sora',sans-serif; font-weight:700; font-size:15.5px; padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid var(--line); } .room-card dl{ margin:0; display:flex; flex-direction:column; gap:9px; } .room-card .row{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; } .room-card dt{ font-size:13px; color:var(--ink-faint); } .room-card dd{ margin:0; font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:14.5px; color:var(--ink); white-space:nowrap; } .room-card.is-highlight{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; position:relative; } .room-card.is-highlight::after{ content:"популярно"; position:absolute; top:-10px; right:14px; background:var(--accent-2); color:#fff; font-size:10.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; padding:4px 9px; border-radius:999px; } .simple-price-list{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden; } @media (min-width:700px){ .simple-price-list{ grid-template-columns:1fr 1fr; } } .price-line{ background:var(--surface); padding:16px 18px; display:flex; align-items:center; justify-content:space-between; gap:14px; } .price-line .label{ font-size:14.5px; color:var(--ink); font-weight:600; } .price-line .label small{ display:block; font-weight:500; color:var(--ink-faint); font-size:12px; margin-top:2px; } .price-line .value{ font-family:'IBM Plex Mono',monospace; font-weight:600; color:var(--accent-ink); white-space:nowrap; font-size:15px; } .price-line .value.tbd{ color:var(--ink-faint); font-size:13px; font-weight:600; } /* ---------------- How it works ---------------- */ .steps{ display:grid; grid-template-columns:1fr; gap:14px; } @media (min-width:760px){ .steps{ grid-template-columns:repeat(4,1fr); } } .step{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m); padding:20px; position:relative; } .step .n{ font-family:'Sora',sans-serif; font-weight:800; font-size:26px; color:var(--accent); display:block; } .step h3{ font-size:15.5px; margin-top:10px; } .step p{ font-size:13.5px; color:var(--ink-soft); margin:8px 0 0; } /* ---------------- Gallery ---------------- */ .gallery-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; } @media (min-width:640px){ .gallery-grid{ grid-template-columns:repeat(3,1fr); } } .gallery-tile{ aspect-ratio:4/3; border-radius:var(--radius-m); border:1.5px dashed var(--line); background:var(--surface); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--ink-faint); text-align:center; padding:12px; } .gallery-tile svg{ width:26px; height:26px; opacity:.7; } .gallery-tile span{ font-size:11.5px; font-weight:600; } .gallery-note{ margin-top:18px; color:var(--ink-faint); font-size:13px; } .gallery-tile.has-photo{ cursor:pointer; padding:0; border:none; overflow:hidden; } .gallery-tile.has-photo img{ transition:transform .25s ease; } .gallery-tile.has-photo:hover img{ transform:scale(1.05); } /* ---------------- Lightbox ---------------- */ .lightbox{ position:fixed; inset:0; z-index:100; background:rgba(6,14,16,.88); display:flex; align-items:center; justify-content:center; padding:24px; animation:lightboxFade .15s ease; } .lightbox[hidden]{ display:none; } @keyframes lightboxFade{ from{ opacity:0; } to{ opacity:1; } } .lightbox-img{ max-width:min(920px, 100%); max-height:calc(100dvh - 48px); border-radius:var(--radius-m); box-shadow:0 20px 60px -20px rgba(0,0,0,.6); object-fit:contain; } .lightbox-close{ position:fixed; top:18px; right:18px; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.25); cursor:pointer; transition:background .15s ease; } .lightbox-close:hover{ background:rgba(255,255,255,.22); } .lightbox-close svg{ width:20px; height:20px; } /* ---------------- Trust badges ---------------- */ .badges{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; } @media (min-width:760px){ .badges{ grid-template-columns:repeat(4,1fr); } } .badge{ display:flex; align-items:center; gap:10px; padding:14px; border-radius:var(--radius-m); background:var(--surface); border:1px solid var(--line); font-size:13px; font-weight:700; color:var(--ink-soft); } .badge svg{ width:20px; height:20px; color:var(--accent); flex:none; } /* ---------------- Contact / CTA ---------------- */ .cta-band{ background:var(--ink); color:var(--bg); border-radius:var(--radius-l); padding:36px 26px; display:grid; gap:24px; position:relative; overflow:clip; } .cta-band::before{ content:""; position:absolute; inset:0; background:radial-gradient(60% 100% at 100% 0%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 70%); pointer-events:none; } @media (min-width:900px){ .cta-band{ grid-template-columns:1.2fr .8fr; align-items:center; padding:46px 48px; } } .cta-band h2{ color:#F5FBFA; font-size:clamp(22px,4vw,30px); } .cta-band p{ color:#B9CBCE; margin-top:10px; font-size:15px; max-width:48ch; } .cta-band .phone-big{ font-family:'Sora',sans-serif; font-weight:800; font-size:clamp(22px,4vw,28px); color:#F5FBFA; text-decoration:none; display:inline-block; margin-top:4px; } .cta-panel{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:var(--radius-m); padding:22px; position:relative; z-index:1; } .cta-panel .city{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:#9FD9D6; letter-spacing:.06em; text-transform:uppercase; } .cta-panel .hours{ color:#B9CBCE; font-size:13.5px; margin-top:14px; } .cta-panel .btn-row{ display:flex; flex-direction:column; gap:10px; margin-top:18px; } .cta-panel .btn-ghost{ background:transparent; border-color:rgba(255,255,255,.28); color:#F5FBFA; } .cta-panel .btn-ghost:hover{ border-color:#fff; } /* ---------------- Footer ---------------- */ .site-footer{ border-top:1px solid var(--line); padding-block:28px; margin-top:8px; } .footer-row{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; } .footer-brand{ display:flex; align-items:center; gap:9px; } .footer-brand .brand-mark{ width:28px; height:28px; } .footer-brand span{ font-family:'Sora',sans-serif; font-weight:700; font-size:14.5px; } .footer-meta{ color:var(--ink-faint); font-size:12.5px; display:flex; gap:16px; flex-wrap:wrap; } .footer-social{ display:flex; gap:12px; } .footer-social:empty{ display:none; } .social-link{ display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:13px; color:#fff; background:linear-gradient(150deg, var(--accent), var(--accent-ink)); border:1px solid transparent; box-shadow:0 4px 14px -4px rgba(14,124,134,.55); transition:transform .15s ease, box-shadow .15s ease, filter .15s ease; } .social-link svg{ width:23px; height:23px; } .social-link:hover{ transform:translateY(-2px) scale(1.05); box-shadow:0 8px 20px -6px rgba(14,124,134,.65); filter:brightness(1.08); } .social-link[hidden]{ display:none; } .cta-panel .footer-social .social-link{ background:linear-gradient(150deg, #3FBAC0, #0E7C86); box-shadow:0 4px 14px -4px rgba(0,0,0,.45); } .cta-panel .footer-social .social-link:hover{ filter:brightness(1.15); } /* Admin entry (subtle) */ .admin-link{ color:var(--ink-faint); font-size:11.5px; text-decoration:none; border-bottom:1px dotted var(--ink-faint); }