Velora Renk Sistemi
veloravize.com'un gündüz ve gece modundaki bütün renk değişkenleri, hangi elemanda kullanıldıkları ve ölçülmüş kontrast oranları. Renkler yalnızca bu değişkenler üzerinden değişir; hiçbir bileşene sabit renk yazılmaz.
Tema nasıl seçiliyor
Sayfa açılırken <html> etiketine data-theme="light" veya data-theme="dark" yazılır. Sıra şudur: kullanıcının daha önce yaptığı seçim (tarayıcıda saklanır) → yoksa işletim sisteminin tercihi. Kullanıcı üstbilgideki ay/güneş düğmesine basana kadar işletim sistemi tercihi canlı izlenir; bastığı anda seçimi kalıcı olur.
Titreme yok
Tema, sayfa ilk boyanmadan önce <head> içindeki küçük bir betikle yazılır. Sayfa önce beyaz açılıp sonra kararmaz.
Değişkenler tek kapsamda
Bütün değişkenler :root üzerinde çevrilir. Alt kapsamda (.vvc gibi) yeniden tanımlanmaz — sebebi 06 numaralı bölümde.
Düğme yeri
Üstbilgide, arama ikonunun solunda. Sunucu tarafında basılır, bu yüzden sayfa yerleşimi kaymaz.
Çekirdek değişkenler
Sitenin tamamı bu listeden beslenir. Sol sütun gündüz, sağ sütun gece değeridir.
| Değişken | Gündüz | Gece | Nerede |
|---|---|---|---|
| --v-page | #FFFFFF | #0B1C33 | Sayfa zemini |
| --v-card | #FFFFFF | #132943 | Kart, açılır menü, SSS, yazı kutusu |
| --v-surface | #F5F8FC | #10263F | Sayfa başlığı bandı, yan kart, bilgi şeridi |
| --v-surface-2 | #EEF3FA | #14304C | İkinci düzey bölüm zemini |
| --v-band | #08254D | #14304C | .v-navy koyu bölümler |
| --v-field | #FFFFFF | #0E2138 | Form alanı ve arama kutusu zemini |
| --v-text | #334155 | #C6D6E9 | Gövde metni |
| --v-muted | #5C6B82 | #92A8C6 | Açıklama, künye, kırıntı yolu |
| --v-heading | #08254D | #E9F0FA | h1–h6 |
| --v-ink | #08254D | #E9F0FA | Menü, etiket, SSS başlığı, ikon düğmesi |
| --v-link | #2C5896 | #8FB6EE | Metin içi bağlantı |
| --v-blue | #2C5896 | #8FB6EE | Mavi metin rolü (22 kural) |
| --v-fill | #2C5896 | #3F72BC | Dolu düğme zemini (yalnız gecede ayrışır) |
| --v-fill-hover | #244E89 | #4676BD | Dolu düğme üzerine gelince |
| --v-gold | #E7C16A | #E7C16A | Vurgu, üst etiket, altın düğme — değişmez |
| --v-gold-tint | #FFF6E3 | #2E2716 | Rozet zemini |
| --v-border | #E3E9F2 | #24405F | Dekoratif kart kenarlığı |
| --v-border-strong | #7897C3 | #5C8ABF | Etkileşimli denetim kenarlığı (alan, ikon düğmesi) |
| --v-border-muted | #CBD7E8 | #1E3654 | Ayırıcı çizgi |
| --v-header-bg | rgba(255,255,255,.92) | rgba(11,28,51,.92) | Üstbilgi (yarı saydam) |
| --v-disabled-bg | #E5E7EB | #22303F | Pasif düğme zemini |
| --v-disabled-fg | #565E6B | #9AA7B8 | Pasif düğme yazısı |
#E7C16A, WhatsApp yeşili #2BB65E ve lacivert marka rengi #08254D iki modda da aynıdır. Altın ve yeşil zaten koyu zemin üzerinde kullanılıyor; lacivert ise gece modunda yalnızca zemin olarak kalır, metin rolü --v-ink'e devredilmiştir.Elemanlar
Hangi bileşen hangi rengi alıyor. Değerler canlı sitede ölçüldü.
| Eleman | Gündüz | Gece | Not |
|---|---|---|---|
| Birincil düğme | #2C5896 / beyaz | #3F72BC / beyaz | Başvurumu Başlat, form gönder, asistan CTA |
| Altın düğme | #E7C16A / #08254D | #E7C16A / #08254D | Değişmez |
| WhatsApp düğmesi | #2BB65E / #06301A | #2BB65E / #06301A | Marka rengi, değişmez |
| İkincil düğme | saydam / #08254D | saydam / #E9F0FA | Kenarlık --v-border-strong |
| Üstbilgi | beyaz %92 / #08254D | #0B1C33 %92 / #E9F0FA | Menü rengi Elementor'dan geliyor, geçersiz kılınıyor |
| Menü üzerine gelince | #2563EB | #8FB6EE | — |
| Açılır menü | #FFFFFF | #132943 | Üzerine gelince --v-surface-2 |
| Altbilgi | #061B39 | #061B39 | Zaten koyu, değişmez |
| Form alanı | #FFFFFF / #08254D | #0E2138 / #E9F0FA | Kenarlık #5C8ABF, yer tutucu #92A8C6 |
| Kart | #FFFFFF | #132943 | Kenarlık --v-border |
| SSS akordiyonu | #FFFFFF | #132943 | Başlık --v-ink |
| Yazı listesi kartı | #FFFFFF | #132943 | Rehber sayfası |
| Hero fotoğrafı | özgün | parlaklık %78 | Gecede bir tık kısılır |
| Logo | özgün | beyaz rozet | Aşağıdaki nota bakın |
Üzerine gelince
Hover ve odak durumunda her düğmenin aldığı zemin.
| Düğme | Normal | Üzerine gelince | Not |
|---|---|---|---|
| Birincil | #2C5896 · #3F72BC | #244E89 · #4676BD | gündüz · gece |
| İkincil | saydam | --v-surface | Kenarlık koyulaşır |
| #2BB65E | #29AE59 | Marka rengi | |
| Altın | #E7C16A | #DCB35C | — |
| Menü bağlantısı | --v-ink | #2563EB · #8FB6EE | Yalnızca yazı rengi |
| Arama / gece modu ikonu | saydam | --v-surface | Kenarlık --v-ink |
| Asistan · ülke kartı (fotoğraflı) | fotoğraf | saydam | Fotoğraf korunur; gölge artar |
| Asistan · kart (düz) | --vvc-ground | --vvc-ground | Kenarlık + gölge değişir |
| Asistan · seçili kart | --vvc-blue-tint | --vvc-blue-tint | — |
| Asistan · durum rozeti | --vvc-ground | --vvc-ground | Kenarlık maviye döner |
| Asistan · geri / atla / baştan başla | saydam | saydam | Yalnızca yazı rengi değişir |
| Asistan · kırıntı yolu | --vvc-surface | --vvc-blue-tint | — |
reset.css dosyası
bütün <button> ögelerine hover ve odak durumunda pembe zemin veriyor:
button:hover{background-color:#CC3366}. Kendi hover zeminini tanımlamayan her düğme bu rengi
devralıyordu — asistandaki 9 ülke kartı, vize türü ve kategori kartları, durum rozetleri ve geri/atla
bağlantıları dahil. Tek bir transparent ile susturulamaz, çünkü o zaman kartların kendi zemini
de kaybolur. Her düğme kendi zeminini açıkça geri alacak şekilde düzeltildi; yukarıdaki tablo sonucu
gösteriyor. Yeni bir <button> eklerken hover zeminini de tanımla — yoksa pembe geri gelir.Vize Belge Asistanı
Asistanın kendi değişken seti var; aynı mantıkla çevrilir.
| Değişken | Gündüz | Gece | Nerede |
|---|---|---|---|
| --vvc-ground | #FFFFFF | #132943 | Kart zemini |
| --vvc-surface | #F5F8FC | #10263F | Özet şeridi, grup başlığı |
| --vvc-ink | #1E3252 | #E9F0FA | Belge adı |
| --vvc-body | #41546F | #C6D6E9 | Belge açıklaması |
| --vvc-muted | #5C6B82 | #92A8C6 | Adım bilgisi, "Baştan başla" |
| --vvc-navy | #08254D | #E9F0FA | Kart başlığı, seçim özeti |
| --vvc-blue | #2C5896 | #8FB6EE | "Zorunlu" rozeti, geri bağlantısı |
| --vvc-gold | #8D620C | #E7C16A | "Gerekirse" rozeti |
| --vvc-warn | #8A5A00 | #F0C674 | Çakışma uyarısı |
| --vvc-warn-bg | #FFF8E8 | #33280F | Uyarı zemini |
| --vvc-line | #E3E9F2 | #24405F | Kart kenarlığı |
| --vvc-line-strong | #7897C3 | #5C8ABF | Seçilebilir kart kenarlığı |
Kontrast defteri
Hesaplanmış oranlar. Normal metin 4.5:1, iri metin ve metin dışı öğeler 3:1 ister.
| Ölçüm | Gerekli | Gündüz | Gece |
|---|---|---|---|
| Gövde metni / sayfa | 4.5 | 10.35 | 11.56 |
| Soluk metin / sayfa | 4.5 | 5.41 | 7.03 |
| Başlık / sayfa | 4.5 | 15.19 | 14.91 |
| Bağlantı / sayfa | 4.5 | 7.13 | 8.22 |
| Bağlantı / kart | 4.5 | 7.13 | 7.08 |
| Birincil düğme yazısı | 4.5 | 7.13 | 4.83 |
| Birincil düğme, üzerine gelince | 4.5 | 8.31 | 4.58 |
| Altın düğme yazısı | 4.5 | 8.85 | 8.85 |
| WhatsApp düğmesi yazısı | 4.5 | 5.50 | 5.50 |
| Pasif düğme yazısı | 4.5 | 5.29 | 5.50 |
| Form alanı metni | 4.5 | 15.19 | 14.16 |
| Form alanı yer tutucusu | 4.5 | 5.41 | 6.68 |
| Asistan gövde metni | 4.5 | 7.71 | 9.96 |
| Asistan "Gerekirse" rozeti | 4.5 | 5.02 | 8.63 |
| Asistan uyarı metni | 4.5 | 5.60 | 8.98 |
| Birincil düğme / sayfa (metin dışı) | 3.0 | 7.13 | 3.54 |
| Güçlü kenarlık / sayfa (metin dışı) | 3.0 | 3.00 | 4.76 |
| Altın düğme / sayfa (metin dışı) | 3.0 | 1.72 | 9.96 |
| WhatsApp düğmesi / sayfa (metin dışı) | 3.0 | 2.64 | 6.48 |
Kurallar ve tuzaklar
Bu sistemi değiştirirken bilinmesi gerekenler. Her biri kurulum sırasında bizzat karşılaşıldı.
Değişkenleri alt kapsamda çevirme
Tarayıcı, tema değişince .vvc gibi bir alt kapsamda yeniden tanımlanan değişkenleri ekranda duran düğümler için tazelemiyor: değişken doğru değeri alıyor ama elemanın rengi eskide kalıyor. Bu yüzden asistanın değişkenleri de :root'a taşındı ve geçişte köke bir kerelik zorunlu yeniden hesaplama yapılıyor.
Mavi hem metin hem zemin
Koyu zeminde metin en az 4.5:1 ister; üzerinde beyaz yazı olan dolu düğme ise daha koyu bir mavi ister. Tek değer ikisini karşılamıyor. Bu yüzden --v-blue metin için, --v-fill dolu düğme için ayrıldı.
Lacivert hem metin hem zemin
Aynı çatışma lacivertte de var. Metin kullanımları --v-ink'e taşındı (33 kural); --v-navy yalnızca zemin olarak kaldı.
Temanın pembesi
reset.css her <button> ögesine hover'da #CC3366 zemin veriyor. Kendi hover zeminini tanımlamayan düğme bu rengi alır. Yeni düğme eklerken hover zeminini de yaz.
Elementor özgüllükte yeniyor
Gövde zemini .elementor-kit ile, üstbilgi ve form alanları widget ayarlarıyla basılıyor. Bunlar tasarım sistemindeki kuralları yendiği için gece modunda ayrıca geçersiz kılınır — dosyada hangi kuralın neden !important taşıdığı yazılıdır.
Yüzeye sabit renk yazma
Kurulumdan önce 14 kural zemini #fff olarak sabitlemişti; bunlar çevrilemiyordu. Hepsi --v-card / --v-field'a bağlandı. Yeni bir kart eklerken de token kullan.
Elementor global renkleri
Başlıklar rengini Elementor'un global değişkenlerinden alır ve bunlar h1–h6 kuralını yener. Gece modunda primary, secondary, text ve yüzey globalleri de çevrilir; accent (altın) ve "White Element" bilerek dokunulmadan bırakıldı.