/* ============================================================ Sivas Şehir Çiçekçilik — Design Tokens (CSS Custom Properties) Butik • Mor • Zarif • Taze Sadece :root'u projeye dahil etmen yeterli. ============================================================ */ :root { /* ----------------------------------------------------------- 1) RENK — PALET (ham tonlar) ----------------------------------------------------------- */ /* Mor ailesi — marka imzası */ --plum-900: #3D0F49; --plum-800: #4E1560; --plum-700: #5E1A72; /* PRIMARY — logo / buton / başlık vurgusu */ --grape-500: #7B1E8F; /* tabela moru / canlı vurgu */ --orchid-400: #9B3DAE;/* hover / gradyan orta */ --lilac-300: #C08FD4; --lilac-200: #DDBEE8; /* yumuşak zemin / kart / rozet */ --lilac-100: #F0E2F5; --mist-50: #FAF5FC; /* sayfa arka planı (kırık lila-beyaz) */ /* Aksan renkleri */ --rose-500: #E85D9E; /* çiçek pembesi — kutlama / sevgi */ --rose-200: #F6C6DC; --leaf-600: #2F7D5A; /* yaprak yeşili — tazelik / peyzaj */ --leaf-100: #DCEFE6; --gold-500: #C6A15B; /* çikolata / premium hediye */ --gold-100: #F3E9D3; /* Nötrler */ --ink: #241028; /* mor-siyah metin (saf siyah kullanma) */ --slate-600: #6B5A70; /* ikincil metin */ --slate-300: #B9AABF; /* placeholder / disabled */ --line: #ECE2F0; /* ince ayraç / border */ --cream: #FBF8FC; --white: #FFFFFF; /* ----------------------------------------------------------- 2) RENK — SEMANTİK (rollerle kullan) ----------------------------------------------------------- */ --color-brand: var(--plum-700); --color-brand-strong: var(--plum-800); --color-brand-vivid: var(--grape-500); --color-accent: var(--rose-500); --color-fresh: var(--leaf-600); --color-premium: var(--gold-500); --color-bg: var(--mist-50); --color-surface: var(--white); --color-surface-soft: var(--lilac-100); --color-surface-sunk: var(--lilac-200); --color-text: var(--ink); --color-text-muted: var(--slate-600); --color-text-on-brand: var(--white); --color-text-on-accent: var(--white); --color-border: var(--line); --color-border-strong: var(--lilac-300); --color-focus: var(--orchid-400); /* Durum renkleri (form / bildirim) */ --color-success: var(--leaf-600); --color-danger: #C0341F; --color-info: var(--grape-500); /* ----------------------------------------------------------- 3) GRADYANLAR & İMZA DOKULARI ----------------------------------------------------------- */ --gradient-brand: linear-gradient(135deg, var(--plum-700) 0%, var(--grape-500) 55%, var(--orchid-400) 100%); --gradient-bloom: linear-gradient(135deg, var(--grape-500) 0%, var(--rose-500) 100%); --gradient-mist: linear-gradient(180deg, var(--white) 0%, var(--mist-50) 100%); /* Vitrin ışığı — hero üstü yumuşak highlight */ --glow-window: radial-gradient(120% 90% at 50% -10%, rgba(155,61,174,.14) 0%, rgba(155,61,174,0) 60%); /* ----------------------------------------------------------- 4) TİPOGRAFİ ----------------------------------------------------------- */ --font-display: "Playfair Display", Georgia, "Times New Roman", serif; --font-sans: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif; /* Modüler ölçek (~1.2 major-third'e yakın, mobil dostu) */ --text-xs: 0.75rem; /* 12 */ --text-sm: 0.875rem; /* 14 */ --text-base: 1rem; /* 16 */ --text-md: 1.125rem; /* 18 — gövde büyük */ --text-lg: 1.375rem; /* 22 */ --text-xl: 1.75rem; /* 28 */ --text-2xl: 2.25rem; /* 36 */ --text-3xl: 3rem; /* 48 — bölüm başlığı */ --text-4xl: 4rem; /* 64 — hero */ --font-light: 300; --font-regular: 400; --font-medium: 500; --font-semibold:600; --font-bold: 700; --leading-tight: 1.1; --leading-heading: 1.18; --leading-body: 1.65; --tracking-tight: -0.01em; --tracking-normal: 0em; --tracking-label: 0.16em; /* ETİKET / uppercase ritmi */ /* ----------------------------------------------------------- 5) BOŞLUK (spacing) — 4px tabanlı ----------------------------------------------------------- */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ --space-9: 6rem; /* 96 */ --space-10: 8rem; /* 128 — bölüm dikey nefesi */ /* ----------------------------------------------------------- 6) YARIÇAP (radius) ----------------------------------------------------------- */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 12px; /* kartlar */ --radius-lg: 20px; /* büyük panel */ --radius-xl: 28px; --radius-pill: 999px; /* çip / rozet / buton */ /* ----------------------------------------------------------- 7) GÖLGE — mor tonlu, yumuşak (premium his) ----------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(36,16,40,.06); --shadow-sm: 0 2px 8px rgba(94,26,114,.08); --shadow-md: 0 8px 24px rgba(94,26,114,.12); --shadow-lg: 0 18px 48px rgba(94,26,114,.16); --shadow-bloom: 0 12px 32px rgba(232,93,158,.22); /* pembe glow — CTA */ --ring-focus: 0 0 0 3px rgba(155,61,174,.35); /* ----------------------------------------------------------- 8) HAREKET (motion) ----------------------------------------------------------- */ --dur-micro: 160ms; --dur-base: 320ms; --dur-scene: 600ms; --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-in-out:cubic-bezier(.65, 0, .35, 1); /* ----------------------------------------------------------- 9) DÜZEN (layout) ----------------------------------------------------------- */ --container: 1200px; --container-text: 720px; --gutter: clamp(1rem, 4vw, 3rem); --header-h: 76px; --z-header: 100; --z-overlay: 500; --z-modal: 1000; } /* ============================================================ DARK / GECE MODU (opsiyonel) — mor gece vitrini ============================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: #1A0A20; --color-surface: #24102B; --color-surface-soft: #301538; --color-surface-sunk: #3B1A45; --color-text: #F3E7F7; --color-text-muted: #C3A9CC; --color-border: #40204A; --color-brand: var(--orchid-400); --color-text-on-brand: #1A0A20; --shadow-sm: 0 2px 8px rgba(0,0,0,.4); --shadow-md: 0 8px 24px rgba(0,0,0,.5); --shadow-lg: 0 18px 48px rgba(0,0,0,.55); } } /* Zorunlu tema geçişleri için :root[data-theme="dark"] / ["light"] de override edebilir */ [data-theme="dark"] { --color-bg: #1A0A20; --color-surface: #24102B; --color-surface-soft:#301538; --color-surface-sunk:#3B1A45; --color-text:#F3E7F7; --color-text-muted:#C3A9CC; --color-border:#40204A; --color-brand:var(--orchid-400); --color-text-on-brand:#1A0A20; } /* ============================================================ ERİŞİLEBİLİRLİK ============================================================ */ @media (prefers-reduced-motion: reduce) { :root { --dur-micro: 0ms; --dur-base: 0ms; --dur-scene: 0ms; } } /* ============================================================ ÖRNEK HAZIR SINIFLAR (opsiyonel yardımcılar) ============================================================ */ .brand-label { font-family: var(--font-sans); font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: var(--text-sm); color: var(--color-brand-vivid); } .btn-primary { font-family: var(--font-sans); font-weight: var(--font-semibold); color: var(--color-text-on-brand); background: var(--gradient-brand); border-radius: var(--radius-pill); padding: var(--space-3) var(--space-6); box-shadow: var(--shadow-md); transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out); } .btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } .card-bloom { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .card-bloom:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }