/* ========================================================================== LUMÉ — GLOBAL DESIGN SYSTEM (Picostrap5 child) Enqueue: functions.php → tema/Bootstrap CSS'inden SONRA (priority 50). İKİ KATMAN: • GLOBAL (site geneli, güvenli): fontlar, :root token'lar (BRAND PALETTE), tema class'ları, @keyframes, reduced-motion, print. • ".lume-site" ALTINDA SCOPE'LU: CSS reset, body/element stilleri ve tüm utility class'lar (.container/.btn/.card/.badge/.input/.section ...). NEDEN: Bu CSS WooCommerce (sepet/checkout/hesap) dahil HER sayfada yüklenir. Reset ve .container/.btn gibi class'lar global olsaydı Bootstrap/Woo bozulurdu. Çözüm: LUMÉ pazarlama içeriğini
ile sar; Woo sayfaları sarmalanmaz → sadece güvenli token katmanını alır, tasarımı bozulmaz. ========================================================================== */ /* ════════════════════════════════════════════ 01. GOOGLE FONTS (global) ════════════════════════════════════════════ */ /* Fontlar artik 'de ile yukleniyor (functions.php wp_head) — daha hizli render. Eski @import (render-blocking + seri zincir) kaldirildi. */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } /* ════════════════════════════════════════════ 03. SHARED DESIGN TOKENS (:root — global) ════════════════════════════════════════════ */ :root { /* Fonts */ --font-primary: 'Montserrat', sans-serif; --font-secondary: 'Inter', sans-serif; --font-accent: 'Nunito', sans-serif; --font-sans: var(--font-secondary); --font-serif: var(--font-primary); /* Radii */ --radius-sm: 4px; --radius-md: 8px; --radius-card: 12px; --radius-lg: 24px; --radius-xl: 40px; --radius-pill: 999px; /* Shadows */ --shadow-xs: 0 1px 4px rgba(0,0,0,.05); --shadow-sm: 0 2px 12px rgba(26,45,74,.07); --shadow: 0 4px 24px rgba(26,45,74,.09); --shadow-md: 0 8px 40px rgba(26,45,74,.12); --shadow-lg: 0 16px 64px rgba(26,45,74,.15); /* Transitions */ --ease: .22s ease; --ease-md: .36s ease; --ease-lg: .50s ease; /* Z-index stack */ --z-base: 1; --z-raised: 10; --z-sticky: 50; --z-navbar: 100; --z-drawer: 200; --z-modal: 300; --z-toast: 400; /* Stem Cell accent */ --stem-1: #6a5ab8; --stem-2: #3a3a8c; /* Nötr renkler */ --white: #ffffff; --black: #0c0c0c; /* ── BRAND PALETTE — TEK KAYNAK ── Marka rengini değiştirmek için SADECE burayı düzenle. */ --brand-rose: #b85a72; --brand-rose-light: #c8748c; --brand-rose-deep: #8c3a52; --brand-rose-deeper: #6f2c35; --brand-rose-10: rgba(184,90,114,.10); --brand-navy: #1a2d4a; --brand-navy-dark: #112038; --brand-navy-light: #253d60; --brand-bg: #faf6f3; --brand-surface: #ffffff; --brand-text: #2c2420; --brand-muted: #9e8f8a; --brand-line: #e8dfdb; --brand-success: #2d6a4f; /* ── HEADER & FOOTER component token'ları (GLOBAL) ── Drawer/search overlay .nh konteynerinin DIŞINDA render edilir; bu yüzden bu token'lar :root'ta tanımlı OLMALI yoksa drawer arka planı/metni kaybolur. (Mobil menü bug'ının kök sebebi buydu.) */ --ink: #0e1f3c; --ink-60: rgba(14,31,60,.60); --ink-45: rgba(14,31,60,.45); --ink-40: rgba(14,31,60,.40); --ink-30: rgba(14,31,60,.30); --ink-12: rgba(14,31,60,.12); --ink-07: rgba(14,31,60,.07); --pink: var(--brand-rose); --pink-10: var(--brand-rose-10); --gold: #b8956b; --cream: #faf6f2; --warm: #f4ede7; --glass: rgba(250,246,242,.94); } /* ════════════════════════════════════════════ 04. MEN'S THEME (global) ════════════════════════════════════════════ */ .theme-men, [data-theme="men"] { --primary: #2c5a8c; --primary-light: #5a8ab8; --primary-dark: #1a3558; --navy: #1a3558; --bg-page: #f0f4f8; --bg-subtle: #e4edf6; --bg-card: #ffffff; --text: #111827; --muted: #4b6480; --line: #bccfe0; --cta-gradient: linear-gradient(135deg, #1a3558 0%, #2c5a8c 100%); --cta-shadow: rgba(26, 53, 88, .30); --badge-bg: rgba(44, 90, 140, .09); --badge-border: rgba(44, 90, 140, .20); --hover-border: #2c5a8c; --section-bg-a: linear-gradient(145deg, #f0f4f8 0%, #e4edf6 45%, #eef2f8 100%); --section-bg-b: linear-gradient(145deg, #f4f7fb 0%, #e8f0f8 40%, #f0f5fb 100%); } /* ════════════════════════════════════════════ 05. WOMEN'S THEME (global) ════════════════════════════════════════════ */ .theme-women, [data-theme="women"] { --primary: #b85a72; --primary-light: #c8748c; --primary-dark: #8c3a52; --navy: #122544; --bg-page: #faf6f3; --bg-subtle: #f5ede8; --bg-card: #ffffff; --text: #2c2420; --muted: #9e8f8a; --line: #e8dfdb; --cta-gradient: linear-gradient(135deg, #b85a72 0%, #c8748c 100%); --cta-shadow: rgba(184, 90, 114, .32); --badge-bg: rgba(184, 90, 114, .09); --badge-border: rgba(184, 90, 114, .20); --hover-border: #c8748c; --section-bg-a: linear-gradient(145deg, #faf6f3 0%, #f5ede8 40%, #faf0f2 100%); --section-bg-b: linear-gradient(145deg, #fdf9f6 0%, #f8eff0 40%, #fdf5f0 100%); } /* ════════════════════════════════════════════ 02. CSS RESET → .lume-site altında scope'lu ════════════════════════════════════════════ */ .lume-site *, .lume-site *::before, .lume-site *::after { box-sizing: border-box; margin: 0; padding: 0; } .lume-site { font-family: var(--font-sans); color: var(--brand-text, #2c2420); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Sayfa component'lerinin yerel alias adlarını marka token'larına bağla (about/contact/faq/legal... :root yerine .lume-site'a taşındı). Tek kaynak. */ .lume-site { --bg: var(--brand-bg); --navy: var(--brand-navy); --navy-dark: var(--brand-navy-dark); --navy-light: var(--brand-navy-light); --bordo: var(--brand-rose-deep); --bordo-dark: var(--brand-rose-deeper); --text: var(--brand-text); --muted: var(--brand-muted); --line: var(--brand-line); --success: var(--brand-success); --serif: var(--font-serif); --sans: var(--font-sans); } .lume-site img, .lume-site video, .lume-site svg { display: block; max-width: 100%; } /* Form reset'i :where() ile SIFIR özgüllüğe indirildi → component'lerin kendi buton/input renkleri (.lp-submit{background:linear-gradient} vb.) her zaman kazanır. ESKİDEN .lume-site button (0,1,1) component .lp-submit{background} (0,1,0) kuralını ezip `background:none` yapıyordu → koyu buton beyaz kartta görünmez, sadece hover'da pembe çıkıyordu (a{color:inherit} ile AYNI G5 tuzağı). Artık çözüldü. */ :where(.lume-site) button, :where(.lume-site) input, :where(.lume-site) select, :where(.lume-site) textarea { font: inherit; border: none; background: none; outline: none; } .lume-site a { text-decoration: none; } /* color:inherit reset'i :where() ile SIFIR özgüllüğe indirildi → component'lerin kendi buton renkleri (.slide__cta{color:#fff} vb.) her zaman kazanır. ESKİDEN .lume-site a (0,1,1) component .btn{color} (0,1,0) kuralını ezip koyu zeminli butonlarda yazıyı görünmez yapıyordu (G5 tuzağı). Artık çözüldü. */ :where(.lume-site) a { color: inherit; } .lume-site ul, .lume-site ol { list-style: none; } .lume-site h1, .lume-site h2, .lume-site h3, .lume-site h4, .lume-site h5, .lume-site h6 { font-weight: inherit; line-height: 1.15; } .lume-site p { line-height: 1.7; } /* ════════════════════════════════════════════ 06. TYPOGRAPHY UTILITIES (.lume-site) ════════════════════════════════════════════ */ .lume-site .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: .20em; text-transform: uppercase; color: var(--primary, var(--brand-rose)); } .lume-site .eyebrow--lined::before, .lume-site .eyebrow--lined::after { content: ''; flex-shrink: 0; width: 32px; height: 1px; background: currentColor; opacity: .50; } .lume-site .eyebrow--pill { background: var(--badge-bg); border: 1px solid var(--badge-border); border-radius: var(--radius-pill); padding: 6px 18px; } .lume-site .section-title { font-family: var(--font-serif); font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 500; line-height: 1.1; color: var(--navy, var(--brand-navy)); letter-spacing: -.01em; } .lume-site .section-title em { font-style: italic; color: var(--primary, var(--brand-rose)); } .lume-site .section-subtitle { font-family: var(--font-sans); font-size: clamp(.95rem, 1.5vw, 1.05rem); font-weight: 300; line-height: 1.78; color: var(--muted, var(--brand-muted)); } .lume-site .label { font-family: var(--font-sans); font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--muted, var(--brand-muted)); } .lume-site .divider { width: 100%; height: 1px; background: var(--line, var(--brand-line)); border: none; margin-block: 0; } /* ════════════════════════════════════════════ 07. LAYOUT — CONTAINER & SECTION (.lume-site) ════════════════════════════════════════════ */ /* Bootstrap container-* varyantlari da kapsanir: .lume-site * reset'i Bootstrap'in margin:auto'sunu ezer → icerik sola yapisir (social bug'i). Bu kural (0,2,0) reset'ten (0,1,0) guclu oldugu icin ortalama geri gelir. */ .lume-site .container, .lume-site .container-sm, .lume-site .container-md, .lume-site .container-lg, .lume-site .container-xl, .lume-site .container-xxl { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: 24px; } .lume-site .container--sm { max-width: 800px; } .lume-site .container--md { max-width: 1024px; } .lume-site .container--lg { max-width: 1440px; } .lume-site .section { padding-block: 80px 100px; } .lume-site .section--sm { padding-block: 56px 72px; } .lume-site .section--lg { padding-block: 100px 128px; } .lume-site .section-header { text-align: center; max-width: 680px; margin-inline: auto; } .lume-site .section-header > * + * { margin-top: 18px; } /* ════════════════════════════════════════════ 08. BUTTON SYSTEM (.lume-site) ════════════════════════════════════════════ */ .lume-site .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; border-radius: var(--radius-pill); padding: 14px 36px; cursor: pointer; white-space: nowrap; transition: transform var(--ease), box-shadow var(--ease), background var(--ease), color var(--ease), border-color var(--ease); position: relative; border: 1.5px solid transparent; } .lume-site .btn:hover { transform: translateY(-2px); } .lume-site .btn:active { transform: translateY(0); } .lume-site .btn--primary { color: var(--white); background: var(--cta-gradient); box-shadow: 0 4px 20px var(--cta-shadow); } .lume-site .btn--primary:hover { box-shadow: 0 8px 32px var(--cta-shadow); } .lume-site .btn--outline { color: var(--primary); background: transparent; border-color: var(--primary); } .lume-site .btn--outline:hover { background: var(--badge-bg); } .lume-site .btn--ghost { color: var(--muted); background: transparent; border-color: var(--line); } .lume-site .btn--ghost:hover { color: var(--primary); border-color: var(--primary); } .lume-site .btn--dark { color: var(--white); background: var(--navy, var(--brand-navy)); box-shadow: 0 4px 20px rgba(0,0,0,.18); } .lume-site .btn--dark:hover { box-shadow: 0 8px 32px rgba(0,0,0,.26); } .lume-site .btn--white { color: var(--navy, var(--brand-navy)); background: var(--white); box-shadow: 0 4px 20px rgba(0,0,0,.10); } .lume-site .btn--white:hover { box-shadow: 0 8px 32px rgba(0,0,0,.16); } .lume-site .btn--xs { padding: 7px 16px; font-size: 10px; } .lume-site .btn--sm { padding: 11px 26px; font-size: 11px; } .lume-site .btn--lg { padding: 17px 48px; font-size: 13px; } .lume-site .btn--xl { padding: 20px 56px; font-size: 14px; } .lume-site .btn--full { width: 100%; } .lume-site .btn:disabled, .lume-site .btn[disabled], .lume-site .btn.is-disabled, .lume-site .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; box-shadow: none; transform: none; } .lume-site .btn.is-loading { color: transparent !important; pointer-events: none; } .lume-site .btn.is-loading::after { content: ''; position: absolute; width: 16px; height: 16px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin .6s linear infinite; color: var(--white); } /* ════════════════════════════════════════════ 09. BADGE & PILL SYSTEM (.lume-site) ════════════════════════════════════════════ */ .lume-site .badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-size: 10px; font-weight: 600; letter-spacing: .10em; text-transform: uppercase; border-radius: var(--radius-pill); padding: 6px 14px; border: 1px solid transparent; } .lume-site .badge::before { content: '◆'; font-size: .5rem; } .lume-site .badge--primary { color: var(--primary); background: var(--badge-bg); border-color: var(--badge-border); } .lume-site .badge--dark { color: var(--white); background: var(--navy, var(--brand-navy)); border-color: var(--navy, var(--brand-navy)); } .lume-site .badge--stem { color: var(--stem-1); background: rgba(106,90,184,.09); border-color: rgba(106,90,184,.22); } .lume-site .badge--stem-dark { color: var(--white); background: linear-gradient(135deg, var(--stem-1), var(--stem-2)); border: none; box-shadow: 0 3px 12px rgba(106,90,184,.28); } .lume-site .pill { display: inline-flex; align-items: center; font-family: var(--font-sans); font-size: 11px; font-weight: 500; letter-spacing: .04em; border-radius: var(--radius-pill); padding: 4px 12px; border: 1px solid transparent; white-space: nowrap; } .lume-site .pill--default { color: var(--navy, var(--brand-navy)); background: rgba(26,37,68,.07); border-color: rgba(26,37,68,.12); } .lume-site .pill--primary { color: var(--primary-dark, var(--primary)); background: var(--badge-bg); border-color: var(--badge-border); } /* ════════════════════════════════════════════ 10. CARD BASE (.lume-site) ════════════════════════════════════════════ */ .lume-site .card { background: var(--bg-card, #fff); border: 1px solid var(--line, var(--brand-line)); border-radius: var(--radius-card); overflow: hidden; transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease); } .lume-site .card--hoverable:hover { transform: translateY(-4px); border-color: var(--hover-border, var(--primary)); box-shadow: var(--shadow-md); } .lume-site .card--shadow { box-shadow: var(--shadow); } .lume-site .card--raised { box-shadow: var(--shadow-md); } .lume-site .card--flat { border: none; box-shadow: none; } /* ════════════════════════════════════════════ 11. FORM ELEMENTS (.lume-site) ════════════════════════════════════════════ */ .lume-site .input { font-family: var(--font-sans); font-size: 14px; font-weight: 400; color: var(--text, var(--brand-text)); background: var(--white); border: 1.5px solid var(--line, var(--brand-line)); border-radius: var(--radius-card); padding: 13px 18px; width: 100%; transition: border-color var(--ease), box-shadow var(--ease); } .lume-site .input::placeholder { color: var(--muted, var(--brand-muted)); opacity: 1; } .lume-site .input:focus { border-color: var(--primary, var(--brand-rose)); box-shadow: 0 0 0 3px var(--badge-bg, var(--brand-rose-10)); } .lume-site .input--pill { border-radius: var(--radius-pill); } .lume-site .input--sm { padding: 10px 16px; font-size: 13px; } .lume-site .input--lg { padding: 16px 22px; font-size: 15px; } .lume-site .input:disabled, .lume-site .input[readonly] { background: var(--bg-subtle, #f4f4f4); color: var(--muted, var(--brand-muted)); cursor: not-allowed; opacity: .7; } .lume-site .input[aria-invalid="true"], .lume-site .input.is-invalid { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192,57,43,.12); } /* ════════════════════════════════════════════ 12. ANIMATIONS (@keyframes global + class'lar .lume-site) ════════════════════════════════════════════ */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes spin { to { transform: rotate(360deg); } } .lume-site .anim-fade-up { animation: fadeInUp .6s var(--ease) both; } .lume-site .anim-fade-in { animation: fadeIn .5s var(--ease) both; } .lume-site .anim-slide-left { animation: slideInLeft .5s var(--ease) both; } .lume-site .anim-slide-right{ animation: slideInRight .5s var(--ease) both; } .lume-site .skeleton { background: linear-gradient(90deg, var(--line) 25%, rgba(255,255,255,.7) 50%, var(--line) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite linear; border-radius: var(--radius-md); color: transparent !important; } /* ════════════════════════════════════════════ 13. ACCESSIBILITY ════════════════════════════════════════════ */ .lume-site .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .lume-site :focus-visible { outline: 2px solid var(--primary, var(--brand-rose)); outline-offset: 3px; border-radius: 2px; } /* ════════════════════════════════════════════ 14. RESPONSIVE OVERRIDES (.lume-site) ════════════════════════════════════════════ */ @media (max-width: 1024px) { .lume-site .container, .lume-site .container-xl { padding-inline: 20px; } .lume-site .section { padding-block: 64px 80px; } .lume-site .section--lg { padding-block: 80px 100px; } } @media (max-width: 768px) { .lume-site .section { padding-block: 56px 72px; } .lume-site .section--sm { padding-block: 40px 52px; } } @media (max-width: 640px) { .lume-site .container, .lume-site .container-xl { padding-inline: 16px; } .lume-site .section { padding-block: 48px 60px; } .lume-site .section--lg { padding-block: 64px 80px; } .lume-site .btn { padding: 13px 28px; } .lume-site .btn--lg { padding: 15px 36px; } .lume-site .btn--xl { padding: 16px 44px; } .lume-site .section-title { font-size: clamp(1.8rem, 8vw, 2.6rem); } } @media (max-width: 400px) { .lume-site .container, .lume-site .container-xl { padding-inline: 14px; } } /* Ana sayfada cift "join" bandi olmasin: loyalty bolumunun Inner Circle kayit formu varken footer'in "Join the Community" bulten bandi gizlenir. Diger tum sayfalarda footer bulteni gorunmeye devam eder. */ body.home .nf-nl { display: none; } /* ════════════════════════════════════════════ 15. REDUCED MOTION (global — WCAG 2.3.3) ════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { .lume-site *, .lume-site *::before, .lume-site *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .lume-site .anim-fade-up, .lume-site .anim-fade-in, .lume-site .anim-slide-left, .lume-site .anim-slide-right { opacity: 1 !important; transform: none !important; } .lume-site .skeleton { animation: none !important; } } /* ════════════════════════════════════════════ 16. PRINT (legal / fatura / sipariş onayı) ════════════════════════════════════════════ */ @media print { .lume-site *, .lume-site *::before, .lume-site *::after { background: #fff !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; } .nh, .nf, .nh-drawer, .nh-search, .no-print { display: none !important; } .lume-site a { text-decoration: underline; } .lume-site a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; } .lume-site .section, .lume-site .section--lg, .lume-site .section--sm { padding-block: 16px !important; } } /* ════════════════════════════════════════════ 17. MOBİL YATAY TAŞMA GUARD (mobil öncelik) Picostrap body=flex-column; #theme-main flex item'ının min-width:auto'su geniş bir çocukla viewport'u aşıp içeriği sağdan kırpıyordu. min-width:0 flex item'ın küçülmesine izin verir; .lume-site viewport'a sabitlenir. ════════════════════════════════════════════ */ #theme-main { min-width: 0; max-width: 100%; overflow-x: clip; } .lume-site { min-width: 0; max-width: 100%; overflow-x: clip; } /* ════════════════════════════════════════════ ATC modal — wp_footer'da GLOBAL basılıyor ama gizleme kuralı woo-lume.css'teydi; woo-lume yüklenmeyen sayfalarda (about/science vb.) dev "Added to cart" ikonu görünüyordu. Gizlemeyi global'e taşı; woo-lume'un .lume-atc-modal.open kuralı (yüklü sayfalarda, daha yüksek özgüllük) açıldığında gösterir. ════════════════════════════════════════════ */ .lume-atc-modal { display: none; } /* ════════════════════════════════════════════ SCROLL-REVEAL — imzalı motion (içerik sayfaları). reduced-motion'a saygılı. JS yalnız görünür-alan-altı bölümlere .lume-reveal ekler → JS yoksa içerik görünür kalır (fail-safe); hero (ilk bölüm) anında görünür (LCP). ════════════════════════════════════════════ */ @media (prefers-reduced-motion: no-preference) { .lume-reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s cubic-bezier(.4, 0, .2, 1), transform .6s cubic-bezier(.4, 0, .2, 1); } .lume-reveal.is-in { opacity: 1; transform: none; } }