/* ========================================================================== Diyetisyen Antalya — paylasilan tasarim dili -------------------------------------------------------------------------- Uc mulk de bu dosyadan beslenir: ana site https://diyetisyenantalya.com/ blog https://diyetisyenantalya.com/blog/ (Ghost, Solo) tarifler https://diyetisyenantalya.com/tarifler/ (Ghost, Taste) Kalip (duzen) uclunde kasitli olarak farklidir; ortak olan sudur: renk rolleri, tipografi olcegi, bosluk ritmi, kose yaricaplari, hareket. Ghost temalari bu dosyayi su sekilde alir: Tema kendi degerlerini asagidaki degiskenleri yeniden tanimlayarak ezer. ========================================================================== */ :root { /* --- Marka renkleri ----------------------------------------------- NOT: bu iki renk kucuk metinde WCAG AA kontrastini gecmiyor (#8aaf15 krem kart uzerinde 1.88, #ff9c07 beyazda 2.10). Bu bilerek alinmis bir karar; marka gorunumu tercih edildi. Metin rolu ayri degiskende tutuluyor ki fikir degisirse tek yerden donulebilsin. */ --da-yesil: #8aaf15; /* Dolu yesil butonun hover tonu: %12 koyu. Buton hover'i once scale(1.1) ile veriliyordu; metin buyudugunde bulaniklasip komsu ogelerin uzerine tasiyordu. Ton degisimi butonlarda alisilmis karsilik. */ --da-yesil-koyu: #799a12; --da-turuncu: #ff9c07; /* Metin olarak kullanilan marka renkleri (su an marka rengiyle ayni) */ --da-yesil-metin: var(--da-yesil); --da-turuncu-metin: var(--da-turuncu); /* --- Notrler ------------------------------------------------------ */ --da-metin: #5b5b5b; --da-metin-koyu: #3a3a3a; --da-metin-silik: #8a8a8a; --da-zemin: #ffffff; --da-zemin-krem: #faf6e9; /* tarifler kalibinin zemini */ --da-yuzey: #d8e1bd; /* kart zemini, soft yesil */ --da-yuzey-koyu: #c9d1b0; /* yuzeyin hover tonu */ --da-cizgi: #e4e4e4; /* --- Tipografi ---------------------------------------------------- Montserrat uc mulkte de govde ve baslik yazi tipidir. Tarifler kalibi display basliklarda serif kullanir; o tema kendi --da-font-display degerini ezer. Zincirin sonundaki emoji yazi tipleri sart: Ghost'tan gelen ozetler yazi govdesinden turetiliyor ve icinde emoji olabiliyor. Montserrat ve Arial bunlari tasimiyor; birlesik (ZWJ) diziler sistem yedegine duzgun dusmedigi icin bos kutu olarak ciziliyordu. */ --da-font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji'; --da-font-display: var(--da-font); --da-olcek-1: 2.5rem; /* sayfa basligi */ --da-olcek-2: 1.75rem; /* bolum basligi */ --da-olcek-3: 1.25rem; /* alt baslik */ --da-olcek-4: 1rem; /* kart basligi */ --da-olcek-govde: 1rem; --da-olcek-kucuk: .875rem; --da-satir-siki: 1.25; --da-satir-govde: 1.7; --da-agirlik-normal: 400; --da-agirlik-orta: 500; --da-agirlik-kalin: 600; --da-agirlik-cok-kalin: 700; /* --- Bosluk ritmi (4px tabanli) ----------------------------------- */ --da-bosluk-1: .25rem; --da-bosluk-2: .5rem; --da-bosluk-3: .75rem; --da-bosluk-4: 1rem; --da-bosluk-6: 1.5rem; --da-bosluk-8: 2rem; --da-bosluk-12: 3rem; --da-bosluk-16: 4rem; --da-bosluk-24: 6rem; /* bolumler arasi */ /* --- Bicim -------------------------------------------------------- */ --da-yaricap: .5rem; /* buton, kucuk oge */ --da-yaricap-kart: 1rem; /* kart */ --da-yaricap-tam: 999px; /* hap */ --da-golge-kart: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .06); --da-golge-yukselti: 0 2px 4px rgba(0, 0, 0, .06), 0 16px 32px rgba(0, 0, 0, .10); /* --- Hareket ------------------------------------------------------ */ --da-gecis: .2s cubic-bezier(.25, .1, .25, 1); --da-gecis-yavas: .35s cubic-bezier(.25, .1, .25, 1); /* --- Bolum ritmi --------------------------------------------------- Sayfa 6800px ve butun bolum aralari 70px idi; bolumler birbirine yapisiyordu. Tek yerden yonetilen olcek. 5.5rem (66px) olcek disi bir ara degerdi ve mobilde bolumler hala biraz sikisik duruyordu; 6rem hem olcege oturuyor hem nefes veriyor. */ --da-bolum-arasi: 6rem; /* --- Bolum basligi vurgu cubugu ------------------------------------ Onceden her bolumde elle farkli genislik yaziliyordu (154-252px). */ --da-vurgu-genislik: 3.5rem; --da-vurgu-kalinlik: 3px; /* Vurgu cubugunun ALTINDAKI bosluk. Bu bosluk cubugun kendi isidir; sonraki ogenin margin-top'una yaslanmaz. Bolumlerin ust ogesi flex oldugu icin marj daralmasi yok ve sonraki oge kendi ust marjini sifirladigi an bosluk kayboluyordu. */ --da-baslik-arasi: 2rem; /* --- Sabit basligin etkin yuksekligi -------------------------------- Capa navigasyonu (#hakkimizda gibi) icin kullanilir. Onemli olan basligin sayfa tepesindeki yuksekligi degil, KAYDIRILMIS haldeki yuksekligi: capaya atlandiginda sayfa zaten kaymis oluyor ve navbar kucuk halde duruyor. Onceden buyuk hale gore (90px + 4em) hesaplaniyordu; sonuc her capada 61-67px olu bosluktu. Kucuk hal: logo 66px + 2 x .45rem dolgu. */ --da-baslik-yuksekligi: calc(66px + .9rem); /* --- Kart ic dolgusu ----------------------------------------------- Kart sayfada tekrar eden tek bir roldur; dolgusu da tek yerden gelir. Onceden bes kart tipi dort farkli deger kullaniyordu (hizmet 24/24/36, ekip 18, yorum 18, ozet 18, yazi 14.4); ayni rolun farkli goruntusu duzensizlik hissinin ana kaynagiydi. 18px mobilde ayrica dardi. */ --da-kart-dolgu: 2rem; /* --- Dokunma hedefi ----------------------------------------------- */ --da-dokunma: 44px; /* --- Katman sirasi ------------------------------------------------ */ --da-kat-govde: 1; --da-kat-yuzen: 9; --da-kat-baslik: 10; --da-kat-menu: 11; --da-kat-menu-ustu: 12; } @media (min-width: 992px) { :root { --da-bolum-arasi: 8.5rem; } } /* Hareket azaltma tercihi uc mulkte de gecerli. */ @media (prefers-reduced-motion: reduce) { :root { --da-gecis: .01ms; --da-gecis-yavas: .01ms; } }