/* ========================================================= InteriorNexa — Themeable CSS (Warm / Cool / Lux) - Switch theme via: or "lux" - Defaults to "warm" if no data-theme is set - Auto dark-mode supported ========================================================= */ /* ---------- 1) Color Tokens (Warm Minimal – default) ---------- */ :root{ --bg: #f5f3ef; /* ivory */ --bg-2: #e9e3dc; /* sand */ --text: #2b2b2b; /* slate */ --muted: #6d6a67; /* taupe muted */ --card: #ffffff; --border: #e7e1da; --accent: #b87333; /* copper */ --accent-600: #9c5f2b; --accent-200: #edd7c5; /* NEW: Adaptive header/footer for WARM */ --header-bg: #faf7f3; --header-text:#2b2b2b; --footer-bg: #f0ece7; --footer-text:#555555; --radius: 12px; --shadow: 0 8px 24px rgba(31,31,31,.12); --shadow-lg:0 14px 30px rgba(31,31,31,.18); } /* ---------- 2) Alt Themes ---------- */ /* Scandinavian Cool */ :root[data-theme="cool"]{ --bg:#f3f6f8; --bg-2:#e8edf0; --text:#222427; --muted:#5b646b; --card:#ffffff; --border:#e2e8f0; --accent:#4f7cac; --accent-600:#3e6286; --accent-200:#cfe0ec; --shadow:0 8px 24px rgba(34,36,39,.12); --shadow-lg:0 14px 30px rgba(34,36,39,.18); /* NEW: Adaptive header/footer for COOL */ --header-bg:#ffffff; --header-text:#222427; --footer-bg:#f1f5f9; --footer-text:#444444; } /* Luxury Dark */ :root[data-theme="lux"]{ --bg:#111213; --bg-2:#141619; --text:#ebebeb; --muted:#bfbab2; --card:#191c1f; --border:#282d31; --accent:#c8a96b; --accent-600:#b89359; --accent-200:#eadbb8; --shadow:0 8px 24px rgba(0,0,0,.35); --shadow-lg:0 14px 30px rgba(0,0,0,.45); /* NEW: Adaptive header/footer for LUX */ --header-bg:#1a1a1a; --header-text:#f5f5f5; --footer-bg:#0f0f0f; --footer-text:#bfbab2; } /* ---------- 3) Base / Typography / Layout ---------- */ *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans"; color:var(--text); background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } h1,h2,h3{margin:0 0 .6rem; line-height:1.25} h1{font-size:42px; font-weight:800} h2{font-size:28px; font-weight:700} p{margin:.25rem 0 .75rem; color:var(--muted)} a{color:var(--accent); text-decoration:none} a:hover{color:var(--accent-600); text-decoration:underline} :focus-visible{outline:3px solid var(--accent-200); outline-offset:2px} .container{max-width:1100px; margin:0 auto; padding:0 22px} main.container{padding:48px 22px} /* ---------- 4) Header / Navbar (ADAPTIVE) ---------- */ header{ background:var(--header-bg); color:var(--header-text); position:relative; z-index:10; box-shadow:0 2px 6px rgba(0,0,0,.05); } header .container{display:flex; align-items:center; justify-content:space-between; padding:16px 22px} header nav ul{list-style:none; display:flex; gap:26px; margin:0; padding:0} header a{color:var(--header-text); text-decoration:none; font-weight:700; position:relative} header a::after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:transparent; transition:all .2s} header a:hover::after{background:var(--accent)} /* ---------- 5) Footer (ADAPTIVE) ---------- */ footer{ background:var(--footer-bg); color:var(--footer-text); margin-top:40px; box-shadow:0 -2px 6px rgba(0,0,0,.05); } footer .container{padding:16px 22px; text-align:center} footer a{color:var(--accent)} footer a:hover{color:var(--accent-600)} /* ---------- 6) Breadcrumbs (اختياري) ---------- */ .breadcrumbs{margin:6px 0 14px; font-size:14px; color:#8a8a8a} .breadcrumbs a{color:#666} .breadcrumbs a:hover{text-decoration:underline} .breadcrumbs span{margin:0 6px} /* ---------- 7) Buttons (اختياري) ---------- */ .btn{ display:inline-block; padding:.7rem 1.1rem; border-radius:999px; background:var(--accent); color:#fff; font-weight:600; box-shadow:0 6px 18px color-mix(in srgb, var(--accent) 30%, transparent); transition:transform .12s, box-shadow .12s, background .12s; } .btn:hover{ background:var(--accent-600); transform:translateY(-1px) } /* ---------- 8) Cards / Gallery ---------- */ .card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; } .card:hover{ box-shadow:var(--shadow-lg) } .gallery{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:20px; margin-top:24px; } .gallery-item{ display:flex; flex-direction:column; background:var(--card); border:1px solid var(--border); border-radius:calc(var(--radius) + 2px); overflow:hidden; color:inherit; text-decoration:none; box-shadow:var(--shadow); transition:transform .18s, box-shadow .18s; } .gallery-item:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg) } .gallery-item img{ width:100%; height:220px; object-fit:cover; display:block; } .gallery-item span{ padding:10px 12px; font-size:14px; color:var(--text); font-weight:500; } /* ---------- 9) Lightbox (إن فعّلته بكود JS سابقاً) ---------- */ .lightbox{ position:fixed; inset:0; background:rgba(0,0,0,.85); display:flex; align-items:center; justify-content:center; gap:16px; padding:24px; z-index:1000; } .lightbox.hidden{ display:none } .lightbox img{ max-width:min(92vw, 1200px); max-height:80vh; border-radius:12px; box-shadow:0 8px 32px rgba(0,0,0,.35); } #lb-caption{ position:absolute; bottom:18px; left:50%; transform:translateX(-50%); color:#fff; background:rgba(0,0,0,.35); padding:8px 14px; border-radius:999px; font-size:14px; backdrop-filter:blur(4px); max-width:90vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .lb-close,.lb-prev,.lb-next{ position:absolute; background:rgba(255,255,255,.12); color:#fff; border:0; width:42px; height:42px; border-radius:50%; cursor:pointer; font-size:22px; display:grid; place-items:center; transition:background .15s; } .lb-close:hover,.lb-prev:hover,.lb-next:hover{ background:rgba(255,255,255,.2) } .lb-close{ top:16px; right:16px } .lb-prev{ left:16px } .lb-next{ right:16px } /* ---------- 10) Motion / Accessibility ---------- */ @media (prefers-reduced-motion: reduce){ *{animation:none!important; transition:none!important} } /* ---------- 11) Auto Dark Mode (يمكن تعطيله بإزالة هذا القسم) ---------- */ /* نغمّق الخلفيات قليلاً ونقوّي تباين النصوص مع الحفاظ على هوية الثيم */ @media (prefers-color-scheme: dark){ :root{ --bg: color-mix(in srgb, var(--bg) 5%, black); --bg-2: color-mix(in srgb, var(--bg-2) 15%, black); --text: #ececec; --muted: #bdb8b2; --card: color-mix(in srgb, var(--card) 85%, #151515); --border:color-mix(in srgb, var(--border) 35%, #2a2a2a); --shadow: 0 8px 24px rgba(0,0,0,.35); --shadow-lg: 0 14px 30px rgba(0,0,0,.45); /* NEW: Darken header/footer adaptively (ما عدا ثيم lux فهو داكن أصلاً) */ --header-bg: color-mix(in srgb, var(--header-bg) 75%, #0f0f0f); --header-text: #eaeaea; --footer-bg: color-mix(in srgb, var(--footer-bg) 75%, #0c0c0c); --footer-text: #d6d3cf; } :root[data-theme="lux"]{ /* اترك قيم lux كما هي */ --header-bg:#1a1a1a; --header-text:#f5f5f5; --footer-bg:#0f0f0f; --footer-text:#bfbab2; } } /* ---------- 12) Theme Toggle Button ---------- */ .theme-toggle{ background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; cursor: pointer; font-weight: 600; box-shadow: 0 4px 10px rgba(0,0,0,.08); transition: transform .12s ease, box-shadow .12s ease, background .12s ease; } .theme-toggle:hover{ transform: translateY(-1px); box-shadow: 0 10px 20px rgba(0,0,0,.12); }