/* ========================================================================== sakaryasporsigorta.com — Tasarım Tokenları Marka kaynağı: sakaryaspor.org.tr kurumsal kimliği Bu dosya Bootstrap'ten SONRA yüklenir ve onun --bs-* değişkenlerini ezer. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Fontlar — Galano Grotesque (kulübün kurumsal fontu) -------------------------------------------------------------------------- */ @font-face { font-family: "Galano Grotesque"; src: url("../fonts/galano-medium.woff2") format("woff2"), url("../fonts/galano-medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Galano Grotesque"; src: url("../fonts/galano-semibold.woff2") format("woff2"), url("../fonts/galano-semibold.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Galano Grotesque"; src: url("../fonts/galano-bold.woff2") format("woff2"), url("../fonts/galano-bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; } /* -------------------------------------------------------------------------- 2. Marka tokenları -------------------------------------------------------------------------- */ :root { /* Yeşil ölçeği. #087335 kulübün resmi yeşili — yüzey/buton/kenarlık olarak kullanılır (üstünde beyaz metin 5.99:1 ✓). Koyu zeminde METİN olarak kontrastı 3.31:1 olduğu için okunabilir yeşil ayrı tanımlandı. */ --ss-green: #087335; --ss-green-hover: #0a9442; --ss-green-deep: #054d23; --ss-green-text: #0db04b; /* koyu zeminde yeşil metin — 6.91:1 ✓ */ --ss-neon: #00ff88; /* mikro vurgu — 14.8:1 ✓ */ /* Nötrler */ --ss-black: #000000; --ss-bg: #0a0a0a; --ss-bg-alt: #0d100e; --ss-surface: #121212; --ss-surface-2: #191919; --ss-surface-3: #202020; /* Çizgi ve metin */ --ss-line: rgba(255, 255, 255, 0.10); --ss-line-strong: rgba(255, 255, 255, 0.20); --ss-text: #ffffff; --ss-text-soft: #d4d4d4; /* 15.9:1 */ --ss-text-muted: #a8a8a8; /* 9.4:1 */ /* Işık efektleri */ --ss-glow-green: rgba(8, 115, 53, 0.45); --ss-glow-neon: rgba(0, 255, 136, 0.20); /* Aralık ritmi — 4/8px tabanlı */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem; /* Bölüm dikey ritmi */ --section-y: clamp(4rem, 9vw, 8rem); /* Köşe yarıçapı */ --r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px; /* Hareket */ --t-fast: 150ms; --t-base: 250ms; --t-slow: 400ms; --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); /* Katman sırası */ --z-base: 1; --z-sticky: 100; --z-header: 1030; --z-overlay: 1040; --z-modal: 1050; /* Ölçüler */ --header-h: 84px; --header-h-mobile: 68px; --content-max: 1320px; } /* -------------------------------------------------------------------------- 3. Bootstrap köprüsü — ile birlikte çalışır -------------------------------------------------------------------------- */ :root, [data-bs-theme="dark"] { --bs-body-bg: var(--ss-bg); --bs-body-color: var(--ss-text-soft); --bs-body-font-family: "Galano Grotesque", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --bs-body-font-size: 1rem; --bs-body-font-weight: 500; --bs-body-line-height: 1.65; --bs-emphasis-color: var(--ss-text); --bs-secondary-color: var(--ss-text-muted); --bs-tertiary-color: var(--ss-text-muted); --bs-border-color: var(--ss-line); --bs-border-radius: var(--r-md); --bs-border-radius-sm: var(--r-sm); --bs-border-radius-lg: var(--r-lg); --bs-border-radius-xl: var(--r-xl); --bs-primary: var(--ss-green); --bs-primary-rgb: 8, 115, 53; --bs-link-color: var(--ss-green-text); --bs-link-hover-color: var(--ss-neon); --bs-link-color-rgb: 13, 176, 75; --bs-heading-color: var(--ss-text); --bs-focus-ring-color: rgba(0, 255, 136, 0.55); --bs-focus-ring-width: 2px; --bs-dropdown-bg: var(--ss-surface-2); --bs-dropdown-border-color: var(--ss-line); --bs-dropdown-link-color: var(--ss-text-soft); --bs-dropdown-link-hover-bg: rgba(255, 255, 255, 0.06); --bs-dropdown-link-hover-color: var(--ss-text); --bs-offcanvas-bg: var(--ss-bg); --bs-offcanvas-color: var(--ss-text-soft); --bs-offcanvas-border-color: transparent; --bs-offcanvas-zindex: var(--z-modal); }