/* ========================================================= Home UI - Blue Light Palette + Optional Dark Theme File: camp/public/assets/css/home.css ========================================================= */ /* ---------- Theme Variables ---------- */ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&display=swap'); :root{ /* Layout */ --w: 1100px; --r: 18px; --font: "Tajawal", system-ui, -apple-system, "Segoe UI", Tahoma, Arial; /* Blue Palette (Light) */ --bg: #f5f8ff; /* page background */ --card: #ffffff; /* cards */ --text: #0f172a; /* main text */ --muted: #64748b; /* secondary text */ --soft: #94a3b8; /* subtle text */ --line: #e6edf8; /* borders */ --brand: #2563eb; /* primary blue */ --brand2: #1d4ed8; /* deep blue */ --accent: #38bdf8; /* sky accent (links/hover) */ h1, h2, h3, h4, .brand h1, .block-h h2, .item .t, .footTitle { font-weight: 800; } /* Effects */ --shadow: 0 10px 24px rgba(15, 23, 42, .06); /* soft shadow */ --hover: rgba(37, 99, 235, .08); --focus: rgba(37, 99, 235, .16); /* Status (optional) */ --ok: #16a34a; --warn: #f59e0b; --danger: #ef4444; /* Typography scale */ --h1: 20px; --h2: 15px; --base: 14px; --small: 12px; } /* Optional Dark Theme (activate by adding data-theme="dark" on ) */ html[data-theme="dark"]{ --bg:#0b1220; --card:#0f1a2e; --text:#eaf0ff; --muted:#a7b6d6; --soft: rgba(255,255,255,.60); --line: rgba(255,255,255,.10); --brand:#6ea8ff; --brand2:#7c5cff; --accent:#8bd3ff; --shadow: 0 14px 40px rgba(0,0,0,.35); --hover: rgba(110,168,255,.12); --focus: rgba(110,168,255,.20); } /* ---------- Base ---------- */ *{ box-sizing:border-box; } html, body{ height:100%; } body{ margin:0; font-family:var(--font); font-size:var(--base); color:var(--text); background: radial-gradient(900px 500px at 0% -10%, rgba(37,99,235,.08), transparent 60%), radial-gradient(800px 500px at 100% 0%, rgba(56,189,248,.08), transparent 60%), var(--bg); min-height:100vh; } a{ color:inherit; text-decoration:none; } img{ max-width:100%; display:block; } .container{ max-width:var(--w); margin:0 auto; padding:24px 16px 40px; } /* ---------- Cards ---------- */ .card{ border:1px solid var(--line); border-radius:var(--r); background:var(--card); box-shadow:var(--shadow); overflow:hidden; } /* ---------- Header (Top Section) ---------- */ .header{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 18px; } .brand{ display:flex; align-items:center; gap:12px; } .logo{ width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background: linear-gradient(135deg, rgba(37,99,235,.16), rgba(56,189,248,.18)); border:1px solid var(--line); } .brand h1{ margin:0; font-size:var(--h1); font-weight:900; letter-spacing:.2px; } .brand p{ margin:4px 0 0; color:var(--muted); font-size:13px; line-height:1.65; } /* ---------- Buttons ---------- */ .actions{ display:flex; gap:10px; flex-wrap:wrap; } .btn{ padding:10px 14px; border-radius:14px; border:1px solid var(--line); background:rgba(255,255,255,.65); color:var(--text); cursor:pointer; font-weight:800; transition: transform .08s ease, background .15s ease, box-shadow .15s ease; } html[data-theme="dark"] .btn{ background:rgba(255,255,255,.04); } .btn:hover{ background:var(--hover); } .btn:active{ transform: translateY(1px); } .btn.primary{ border:0; color:#fff; background: linear-gradient(135deg, var(--brand), var(--brand2)); box-shadow: 0 12px 26px rgba(37,99,235,.18); } .btn.primary:hover{ box-shadow: 0 14px 32px rgba(37,99,235,.22); } /* ---------- Middle Section ---------- */ .main{ margin-top:16px; } /* Ticker */ .ticker{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:16px; border:1px solid var(--line); background: rgba(37,99,235,.04); overflow:hidden; } html[data-theme="dark"] .ticker{ background: rgba(255,255,255,.03); } .ticker .tag{ font-size:var(--small); padding:6px 10px; border-radius:999px; background: rgba(37,99,235,.10); border:1px solid rgba(37,99,235,.18); color: var(--text); white-space:nowrap; font-weight:900; } .ticker .marquee{ flex:1; color:var(--muted); white-space:nowrap; overflow:hidden; position:relative; } .ticker .marquee span{ display:inline-block; padding-right:40px; animation: move 18s linear infinite; } @keyframes move{ from{ transform: translateX(-10%); } to { transform: translateX(110%); } } /* Grid blocks */ .grid{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:14px; margin-top:14px; } @media (max-width: 980px){ .grid{ grid-template-columns:1fr; } } .block-h{ padding:14px 16px 10px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; } .block-h h2{ margin:0; font-size:var(--h2); font-weight:900; letter-spacing:.15px; } .block-h .more{ color:var(--muted); font-size:var(--small); } .list{ padding:10px 12px 14px; } .item{ padding:10px 10px; border:1px solid var(--line); border-radius:14px; background: rgba(15, 23, 42, .02); margin-top:10px; } html[data-theme="dark"] .item{ background: rgba(0,0,0,.14); border-color: rgba(255,255,255,.08); } .item:first-child{ margin-top:0; } .item .t{ font-weight:900; font-size:13px; } .item .m{ color:var(--muted); font-size:12.5px; margin-top:5px; line-height:1.7; } .meta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; color: rgba(100,116,139,.95); font-size:11px; } html[data-theme="dark"] .meta{ color: rgba(255,255,255,.55); } /* ---------- Mini Slider (Images) ---------- */ .slider{ margin-top:14px; } .mini{ padding:12px; } .miniWrap{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; } @media (max-width: 520px){ .miniWrap{ grid-template-columns:1fr; } } .miniAd{ border:1px solid var(--line); background: rgba(37,99,235,.03); border-radius:16px; overflow:hidden; height:110px; position:relative; display:block; transition: transform .12s ease, box-shadow .12s ease; } html[data-theme="dark"] .miniAd{ background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.10); } .miniAd:hover{ transform: translateY(-1px); box-shadow: 0 12px 24px rgba(15,23,42,.08); } .miniAd img{ width:100%; height:100%; object-fit:cover; } .miniAd .cap{ position:absolute; inset:auto 10px 10px 10px; padding:8px 10px; border-radius:14px; background: rgba(15,23,42,.55); border:1px solid rgba(255,255,255,.12); font-size:12px; color:#fff; line-height:1.5; } /* ---------- Footer (Bottom Section) ---------- */ .footer{ margin-top:16px; padding:16px 18px; display:flex; align-items:flex-start; justify-content:space-between; gap:14px; } @media (max-width: 820px){ .footer{ flex-direction:column; } } .footTitle{ font-weight:900; font-size:14px; } .footMuted{ color:var(--muted); font-size:13px; line-height:1.7; margin-top:6px; } .social{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; } .chip{ padding:8px 10px; border-radius:999px; border:1px solid var(--line); background: rgba(37,99,235,.04); font-size:12px; color:var(--text); font-weight:800; } .chip:hover{ background: rgba(37,99,235,.08); } /* ---------- Forms (for request_form.php + track.php) ---------- */ input, textarea, select{ border:1px solid var(--line); background: rgba(255,255,255,.70); color: var(--text); border-radius:14px; padding:12px 12px; font-family: inherit; } html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select{ background: rgba(0,0,0,.15); } input:focus, textarea:focus, select:focus{ outline:none; border-color: rgba(37,99,235,.45); box-shadow: 0 0 0 4px var(--focus); } /* Optional: selection */ ::selection{ background: rgba(37,99,235,.18); } /* ===== Ticker Base ===== */ .ticker{ display:flex; gap:12px; align-items:center; } .ticker .badge{ flex:0 0 auto; padding:6px 10px; border-radius:12px; border:1px solid var(--line); color:var(--acc-dark); background:#ffffff; font-weight:800; font-size:12px; } .ticker-track{ position:relative; overflow:hidden; flex:1 1 auto; border-radius:14px; border:1px solid var(--line); background:#fbfdff; min-height:42px; display:flex; align-items:center; } /* ===== Marquee ===== */ .ticker-move{ display:flex; gap:16px; align-items:center; white-space:nowrap; will-change:transform; animation: tickerMarquee var(--ticker-duration, 35s) linear infinite; padding:0 14px; } @keyframes tickerMarquee{ from { transform: translateX(0); } to { transform: translateX(-50%); } } .ticker-item{ display:inline-flex; align-items:center; gap:8px; padding:10px 8px; color:var(--text); font-size:13px; } .ticker-item::after{ content:"•"; color:var(--muted); margin-inline-start:12px; } .ticker-item:last-child::after{ content:""; } /* Pause on hover */ .ticker[data-pause="1"]:hover .ticker-move{ animation-play-state:paused; } /* ===== Rotate ===== */ .ticker-rotate{ width:100%; padding:0 14px; } .ticker-rot-item{ display:inline-flex; width:100%; padding:10px 0; opacity:1; transform:translateY(0); transition: opacity .25s ease, transform .25s ease; } .ticker-rot-item.is-out{ opacity:0; transform:translateY(-4px); } .ticker-rot-item.is-in{ opacity:0; transform:translateY(4px); }