/* =====================================================================
RYZHAK CLINIC — Тема «Золота рамка» (1b) · DROP-IN
---------------------------------------------------------------------
НІЧОГО ДОПИСУВАТИ НЕ ТРЕБА. Стилі чіпляються прямо на стандартні теги
(body, h1–h3, p, a, button, input, label). Просто підключіть цей файл
ОСТАННІМ у :
Логотип (img) НЕ чіпаємо — лишається оригінальний коричневий.
Якщо десь стиль не «переміг» ваш старий CSS — цей файл спеціально
написаний із високою специфічністю та кількома !important на ключових
властивостях, тож має накластися поверх наявного.
===================================================================== */
/* Шрифти вшито локально у fonts.css (Montserrat + Playfair Display). Google Fonts прибрано. */
:root{
--rz-bg:#FFFFFF; --rz-brown:#592800; --rz-brown-ink:#3d1c00;
--rz-gold:#C9A35A; --rz-gold-hover:#b98f42; --rz-gold-soft:#DCC9A0;
--rz-gold-line:#EAD9AE; --rz-beige:#F3EBDA; --rz-beige-tint:#FBF6ED;
--rz-text:#4f4a42; --rz-text-soft:#6b6459; --rz-muted:#b5b0a6;
--rz-border:#EDEDED; --rz-input-border:#E3E3E3;
--rz-font-display:'Playfair Display',Georgia,serif;
--rz-font-body:'Montserrat',-apple-system,Segoe UI,Roboto,sans-serif;
--rz-radius:2px;
}
/* ---------- БАЗА ---------- */
html,body{
background:var(--rz-bg) !important;
color:var(--rz-text);
font-family:var(--rz-font-body);
-webkit-font-smoothing:antialiased;
}
body{ line-height:1.6; }
/* ---------- ТИПОГРАФІКА ---------- */
h1,h2,h3,h4,h5,h6{
font-family:var(--rz-font-display) !important;
color:var(--rz-brown) !important;
letter-spacing:-.01em;
line-height:1.12;
text-wrap:balance;
}
h1{ font-weight:600; font-size:clamp(38px,6vw,54px); line-height:1.02; }
h2{ font-weight:500; font-size:clamp(24px,4vw,34px); line-height:1.16; }
h3{ font-weight:600; font-size:24px; }
p,li{ font-family:var(--rz-font-body); color:var(--rz-text); text-wrap:pretty; }
/* Надзаголовок / eyebrow: маленький верхній підпис — часто або .eyebrow */
small,.eyebrow{
font:600 10.5px/1 var(--rz-font-body);
letter-spacing:.16em; text-transform:uppercase; color:var(--rz-gold);
}
/* ---------- ПОСИЛАННЯ ---------- */
a{ color:#8a6a2f; text-decoration:none; transition:.2s; }
a:hover{ color:var(--rz-brown); }
/* ---------- КНОПКИ ---------- */
button,
.btn,.button,
input[type="submit"],input[type="button"],
a.btn,a.button{
font:600 12.5px/1 var(--rz-font-body) !important;
letter-spacing:.12em; text-transform:uppercase;
color:var(--rz-brown-ink) !important;
background:var(--rz-gold) !important;
border:1.5px solid var(--rz-gold) !important;
padding:16px 32px; border-radius:var(--rz-radius) !important;
cursor:pointer; box-shadow:0 8px 20px -10px rgba(201,163,90,.7);
transition:.2s; display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
button:hover,.btn:hover,.button:hover,
input[type="submit"]:hover,input[type="button"]:hover,
a.btn:hover,a.button:hover{
background:var(--rz-gold-hover) !important; border-color:var(--rz-gold-hover) !important;
box-shadow:0 12px 26px -10px rgba(201,163,90,.9);
}
button:focus-visible,.btn:focus-visible,.button:focus-visible{
outline:2px solid var(--rz-brown); outline-offset:3px;
}
/* Вторинна кнопка: якщо у вас є .btn-secondary / .secondary / [data-variant=secondary] */
.btn-secondary,.secondary,button.secondary,[data-variant="secondary"]{
color:var(--rz-brown) !important; background:var(--rz-bg) !important;
border:1.5px solid var(--rz-gold-soft) !important; box-shadow:none !important;
}
.btn-secondary:hover,.secondary:hover,button.secondary:hover,[data-variant="secondary"]:hover{
border-color:var(--rz-gold) !important; background:var(--rz-beige-tint) !important;
}
/* ---------- ПОЛЯ ВВОДУ ---------- */
input,textarea,select{
font:400 13.5px/1.4 var(--rz-font-body) !important;
color:var(--rz-brown) !important; background:var(--rz-bg) !important;
border:1px solid var(--rz-input-border) !important;
border-radius:var(--rz-radius) !important; padding:13px 14px;
}
/* не перетворюємо кнопки-inputs на текстові поля */
input[type="submit"],input[type="button"]{ padding:16px 32px; }
input::placeholder,textarea::placeholder{ color:var(--rz-muted) !important; }
input:focus,textarea:focus,select:focus{
outline:none !important; border-color:var(--rz-gold) !important;
box-shadow:0 0 0 3px rgba(201,163,90,.18) !important;
}
label{ font:500 12px/1 var(--rz-font-body); color:var(--rz-text); }
/* ---------- КАРТКИ (типові класи) ---------- */
.card,.service,.service-card,article.card{
position:relative; background:var(--rz-bg);
border:1px solid var(--rz-border) !important; border-radius:var(--rz-radius) !important;
padding:30px 32px;
}
.card::before,.service::before,.service-card::before{
content:""; position:absolute; top:0; left:0; height:100%;
border-left:2px solid var(--rz-gold);
}
/* ---------- БЕЙДЖ / ТЕГИ (типові класи) ---------- */
.badge,.tag,.chip{
display:inline-flex; align-items:center; gap:8px;
font:600 11.5px/1 var(--rz-font-body) !important;
color:var(--rz-brown) !important;
border:1px solid var(--rz-gold-soft) !important;
border-radius:var(--rz-radius) !important; padding:9px 14px;
}
.badge{ color:var(--rz-brown-ink) !important; background:var(--rz-gold) !important; border-color:var(--rz-gold) !important; text-transform:uppercase; letter-spacing:.1em; }
/* ---------- Тонка золота лінія-роздільник ---------- */
hr{ border:none; border-top:1px solid var(--rz-gold-soft); margin:32px 0; }