/* ========================================================================== Etkin İnsan Gelişim Enstitüsü — Tasarım Tokenları v1 · 05.09.2026 · Venüs Ajans Karar dokümanı: _temp/04-tasarim-brief.md ========================================================================== */ /* -------------------------------------------------------------------------- FONT — self-host (§ B4) Variable font: tek dosya 400–700 aralığının tamamını karşılıyor. Dosyalar html-files/fonts/ içinde — indirildi, hazır. İki altküme: latin-ext (ğ ş ı İ ç ö ü) + latin. Toplam 45 KB. -------------------------------------------------------------------------- */ @font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-latin-ext.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* ------------------------------------------------------------------ RENK ------------------------------------------------------------------ */ /* zeminler */ --ei-bg: #FFFFFF; /* ana zemin · ~%60 */ --ei-band: #F3F4E9; /* bölüm bandı · ~%18 · iki bant arka arkaya gelmez */ --ei-mint: #D5FFD3; /* vurgu yüzeyi · ~%12 · sayfada EN FAZLA 2 blok */ --ei-bg-dark: #123338; /* koyu bölüm, footer */ /* metin */ --ei-text: #123338; --ei-text-muted: rgba(18, 51, 56, .72); --ei-text-faint: rgba(18, 51, 56, .54); --ei-text-on-dark: #F3F4E9; /* aksiyon */ --ei-primary: #123338; --ei-primary-hover: #0B2429; --ei-on-primary: #FFFFFF; --ei-secondary: #54755E; /* link, ikon, aktif menü, kategori etiketi */ --ei-secondary-hover: #456450; /* vurgu — ZEMİN olarak, üstüne daima --ei-text beyaz yazı ile 1.40:1, kullanmayın */ --ei-accent: #F8D686; /* çizgi */ --ei-rule: rgba(18, 51, 56, .15); --ei-rule-soft: rgba(18, 51, 56, .08); /* ------------------------------------------------------------------ BİÇİM ------------------------------------------------------------------ */ --ei-radius-pill: 50px; /* SADECE butonlar */ --ei-radius-card: 6px; /* kart, panel, görsel */ /* ------------------------------------------------------------------ TİPOGRAFİ ------------------------------------------------------------------ */ --ei-font: "Montserrat", "Helvetica Neue", Arial, sans-serif; --ei-h1: clamp(34px, 5.6vw, 58px); --ei-h2: clamp(24px, 3.4vw, 36px); --ei-h3: 1.25rem; /* 20px */ --ei-body: 1.0625rem; /* 17px */ --ei-small: 0.875rem; /* 14px */ --ei-label: 0.6875rem; /* 11px */ --ei-measure: 65ch; /* gövde metni max satır uzunluğu */ } /* -------------------------------------------------------------------------- TABAN NOT: ZORUNLU. Tanımlı değilse text-transform:uppercase "i" harfini "I" yapar → ETKIN INSAN. Doğrusu: ETKİN İNSAN. -------------------------------------------------------------------------- */ body { margin: 0; background: var(--ei-bg); color: var(--ei-text); font-family: var(--ei-font); font-size: var(--ei-body); font-weight: 400; /* 300 KULLANMAYIN — Türkçe aksanlar inceliyor */ line-height: 1.65; -webkit-font-smoothing: antialiased; } h1, h2, h3 { margin: 0; text-wrap: balance; } h1 { font-size: var(--ei-h1); font-weight: 700; letter-spacing: -.022em; line-height: 1.05; } h2 { font-size: var(--ei-h2); font-weight: 600; letter-spacing: -.018em; line-height: 1.15; } h3 { font-size: var(--ei-h3); font-weight: 600; letter-spacing: -.005em; line-height: 1.30; } p { margin: 0; max-width: var(--ei-measure); } .ei-small { font-size: var(--ei-small); line-height: 1.55; color: var(--ei-text-muted); } .ei-label { font-size: var(--ei-label); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ei-secondary); } a { color: var(--ei-secondary); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--ei-secondary-hover); } :focus-visible { outline: 2px solid var(--ei-primary); outline-offset: 2px; } /* -------------------------------------------------------------------------- YÜZEYLER Beyaz ile bant arası fark 1.11:1 — hairline çizgi GÖRÜNMEZ. Geçiş her zaman geniş blokla yapılır, border ile değil. -------------------------------------------------------------------------- */ .ei-band { background: var(--ei-band); } .ei-mint { background: var(--ei-mint); } /* sayfada en fazla 2 kez */ .ei-dark { background: var(--ei-bg-dark); color: var(--ei-text-on-dark); } .ei-card { background: var(--ei-bg); border-radius: var(--ei-radius-card); padding: 22px; } .ei-band .ei-card { background: var(--ei-bg); } .ei-bg .ei-card { background: var(--ei-band); } /* -------------------------------------------------------------------------- BUTONLAR — radius 50px, sitenin imza detayı -------------------------------------------------------------------------- */ .ei-btn { display: inline-block; font-family: inherit; font-size: var(--ei-small); font-weight: 600; letter-spacing: .03em; padding: 13px 28px; border-radius: var(--ei-radius-pill); border: 1.5px solid transparent; background: var(--ei-primary); color: var(--ei-on-primary); text-decoration: none; cursor: pointer; transition: background-color .18s ease, color .18s ease; } .ei-btn:hover { background: var(--ei-primary-hover); color: var(--ei-on-primary); } .ei-btn--ghost { background: transparent; color: var(--ei-primary); border-color: var(--ei-primary); } .ei-btn--ghost:hover { background: var(--ei-primary); color: var(--ei-on-primary); } /* -------------------------------------------------------------------------- ROZET — bal sarısı, üstünde daima koyu petrol (9.61:1) Yalnızca onay ve aciliyet: "Yoga Alliance Onaylı", "Son 3 kontenjan" -------------------------------------------------------------------------- */ .ei-badge { display: inline-block; background: var(--ei-accent); color: var(--ei-text); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 6px 14px; border-radius: var(--ei-radius-pill); } @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }