/* ============================================================ HaarLab Premium Upgrade — Font, Renk & CTA Eklenecek dosya: haarlab-premium-upgrade.css olarak index.php sonuna eklenecek ============================================================ */ /* 1. GOOGLE FONTS — DM Sans + DM Serif Display Inter'in yerine geçer, önbellekten gelir */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,700;0,9..40,900;1,9..40,400&family=DM+Serif+Display:ital@0;1&display=swap'); /* ============================================================ 2. RENK PALETİ — Lacivert + Altın sistemi Mevcut :root'u override eder ============================================================ */ :root { /* ——— Yeni marka renkleri ——— */ --navy: #1B2B4B; /* Koyu lacivert — ana marka rengi */ --navy-deep: #111E33; /* Daha koyu, header/footer */ --navy-mid: #243859; /* Kartlar, section bg */ --navy-light: #2D4A73; /* Hover state'ler */ --gold: #C9A96E; /* Altın — aksan rengi (eski #d6b36a'dan biraz daha rafine) */ --gold-dark: #A8864E; /* Buton hover */ --gold-light: #E8D4A8; /* Çok açık altın, bg aksan */ --cream: #F8F4EE; /* Sayfa arka planı */ --cream-dark: #F0E9DC; /* Section ayraçları */ --white: #fff; --muted: #5C6B84; /* Body metin ikincil */ --text-dark: #1B2B4B; /* Ana body rengi — navy ile aynı */ --line: rgba(201,169,110,.22); /* Eski değişkenleri yenilere yönlendir (geriye dönük uyumluluk) */ --dark: var(--navy-deep); --dark2: var(--navy-mid); } /* ============================================================ 3. GLOBAL TİPOGRAFİ — DM Sans body, DM Serif başlıklar ============================================================ */ body { font-family: 'DM Sans', Arial, sans-serif; font-size: 16px; color: var(--text-dark); background: var(--cream); -webkit-font-smoothing: antialiased; } /* Başlıklar — DM Serif Display */ h1, h2 { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; /* Serif display fontlarda 400 = görsel ağırlık zaten var */ letter-spacing: -0.01em; } h3, h4, h5, h6 { font-family: 'DM Sans', Arial, sans-serif; font-weight: 700; } /* Hero H1 özelleştirme */ .hero h1, .inner-hero h1, .location-hero h1 { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; line-height: 1.06; letter-spacing: -0.02em; } /* Eyebrow etiketleri — DM Sans, izleme ile */ .eyebrow { font-family: 'DM Sans', Arial, sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); } /* Navigasyon */ .site-header nav a { font-family: 'DM Sans', Arial, sans-serif; font-weight: 500; font-size: 14px; } /* İstatistik sayıları — DM Serif */ .premium-trust-grid b, .hero-stats b { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; } /* ============================================================ 4. HEADER — Lacivert palette ============================================================ */ .site-header { background: rgba(27, 43, 75, 0.97); border-bottom: 1px solid rgba(201,169,110,.18); box-shadow: 0 12px 40px rgba(17, 30, 51, 0.28); } .site-header nav a:hover { color: var(--gold); } .brand-mark { background: var(--gold); color: var(--navy-deep); } /* ============================================================ 5. HERO — Lacivert zemin ============================================================ */ .hero { background: var(--navy-deep); } .premium-hero .hero-bg { background: linear-gradient(90deg, rgba(27,43,75,.72) 0%, rgba(27,43,75,.44) 40%, rgba(27,43,75,.12) 100%), var(--hero-photo, url('../img/hero.svg')) center right/cover no-repeat !important; } .hero-shine { background: radial-gradient(circle at 16% 20%, rgba(201,169,110,.22), transparent 26%), radial-gradient(circle at 72% 16%, rgba(255,255,255,.08), transparent 18%); } /* ============================================================ 6. BUTONLAR — Gold + Lacivert ============================================================ */ .btn-gold { background: var(--gold); color: var(--navy-deep); font-family: 'DM Sans', Arial, sans-serif; font-weight: 700; letter-spacing: 0.01em; box-shadow: 0 12px 36px rgba(201,169,110,.28); transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease; } .btn-gold:hover { background: var(--gold-dark); box-shadow: 0 16px 44px rgba(201,169,110,.38); transform: translateY(-2px); } .btn-dark { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); color: white; font-family: 'DM Sans', Arial, sans-serif; font-weight: 600; transition: background 0.2s ease; } .btn-dark:hover { background: rgba(255,255,255,.13); } /* Lacivert arka plan üzerindeki koyu btn için navy varyantı */ .btn-navy { background: var(--navy); color: var(--gold); border: 1px solid rgba(201,169,110,.35); font-family: 'DM Sans', Arial, sans-serif; font-weight: 700; border-radius: 999px; padding: 15px 24px; display: inline-flex; align-items: center; justify-content: center; transition: background 0.2s ease, border-color 0.2s ease; } .btn-navy:hover { background: var(--navy-light); border-color: var(--gold); } /* ============================================================ 7. BÖLÜME ÖZEL CTA'LAR Her bölümde farklı buton metni — CSS class bazlı ============================================================ */ /* --- Standorte bölümü: "Standort wählen" --- */ .locations-section .cta-standort { display: inline-flex; align-items: center; gap: 8px; background: var(--gold); color: var(--navy-deep); font-family: 'DM Sans', Arial, sans-serif; font-weight: 700; border-radius: 999px; padding: 13px 22px; font-size: 14px; transition: background 0.2s ease; } .locations-section .cta-standort:hover { background: var(--gold-dark); } /* --- Behandlungen bölümü: "Klinik vergleichen" --- */ .services-section .section-head .cta-compare { display: inline-flex; align-items: center; gap: 8px; color: var(--navy); font-family: 'DM Sans', Arial, sans-serif; font-weight: 700; border: 1.5px solid var(--navy); border-radius: 999px; padding: 11px 20px; font-size: 14px; transition: background 0.2s ease, color 0.2s ease; } .services-section .section-head .cta-compare:hover { background: var(--navy); color: var(--gold); } /* --- Why / Expertise bölümü: "Kostenlos beraten lassen" --- */ .cta-beratung { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--gold); font-family: 'DM Sans', Arial, sans-serif; font-weight: 700; border: 1.5px solid var(--gold); border-radius: 999px; padding: 13px 22px; font-size: 15px; transition: background 0.2s ease, color 0.2s ease; } .cta-beratung:hover { background: var(--gold); color: var(--navy-deep); } /* ============================================================ 8. DARK SECTION'LAR — Navy paleti ============================================================ */ .dark-section, .method-section, .premium-method, .why-haarlab, .premium-results { background: var(--navy-deep); } .map-card { background: var(--navy-mid); } .steps article { border-color: rgba(201,169,110,.18); background: rgba(255,255,255,.04); } .steps span { border-color: var(--gold); color: var(--gold); } .why-cards article { border-color: rgba(201,169,110,.2); } .final-box { background: var(--navy-deep); background-image: radial-gradient(circle at 78% 18%, rgba(201,169,110,.2), transparent 32%); } /* Result kartları */ .result-card { background: var(--navy-mid); border-color: rgba(255,255,255,.09); } /* Location treatment grid */ .location-treatment-grid article { background: var(--navy-mid); border-color: rgba(201,169,110,.18); } /* ============================================================ 9. AÇIK SECTION'LAR — Krem/beyaz paleti ============================================================ */ .benefit-strip { background: var(--white); border-top: 1px solid var(--gold-light); border-bottom: 1px solid var(--gold-light); } .benefit-card { background: linear-gradient(180deg, #fff, var(--cream)); border-color: var(--gold-light); } .icon { background: #F5EDD8; color: var(--gold-dark); } .service-card, .blog-card, .location-cards article { border-color: #EAE0CC; } .stage9-showcase { background: linear-gradient(180deg, var(--white), var(--cream)); } .review-proof { background: var(--cream); } .review-card { border-color: #DDD3BB; } .review-cta { background: var(--navy-deep); } .review-card p { color: var(--text-dark); } /* ============================================================ 10. TİPOGRAFİ — Body metin renkleri ============================================================ */ .benefit-card p, .service-body p, .blog-card p, .location-cards p, .inner-article p, .expertise p { color: var(--muted); } .article-meta span, .location-info-pill span { background: #F2E8D5; color: #5B4419; border-color: #E0C898; } .premium-list li { background: #F6EFE4; border-color: #E5D8C0; color: var(--text-dark); } .premium-list li:before { color: var(--gold-dark); } .faq-section details { background: #F6EFE4; border-color: #E5D8C0; } .sidebar-links a { background: #F6EFE4; color: var(--text-dark); } .sidebar-links a:hover { background: var(--gold-light); } /* Link renkleri */ .service-body a, .blog-card a, .location-cards a, .text-link { color: var(--gold-dark); } .rendered-content a, .inner-article a { color: #9A6E30; } .rendered-content a:hover, .inner-article a:hover { background: #F2E8D5; color: var(--navy); } /* ============================================================ 11. PREMIUM TRUST STRIP ============================================================ */ .premium-trust-strip { border-top-color: rgba(201,169,110,.28); border-bottom-color: rgba(201,169,110,.28); } .premium-trust-grid b { color: var(--navy); font-size: 32px; } .premium-trust-grid span { color: var(--muted); font-weight: 600; } .premium-trust-grid div { border-right-color: var(--gold-light); } /* ============================================================ 12. INNER / DETAY SAYFASI ============================================================ */ .inner-content-section { background: linear-gradient(180deg, var(--white), var(--cream)); } .inner-article { border-color: #E5D8C0; } .article-cta-box { background: radial-gradient(circle at 14% 20%, rgba(201,169,110,.22), transparent 30%), linear-gradient(135deg, var(--navy-deep), var(--navy-mid)); } .sidebar-card { border-color: #E5D8C0; } /* ============================================================ 13. FOOTER ============================================================ */ footer { background: var(--navy-deep); } /* ============================================================ 14. YÜZER AKSIYONLAR (WhatsApp, Phone butonları) ============================================================ */ .floating-phone, .floating-wa { box-shadow: 0 8px 28px rgba(17,30,51,.32); }