/* MateracoPedi (Materacopedia) — PRO File: templates/Materac_Wiki/style.css Notes: - Theme toggling: add [data-theme="dark"] on or (default is light) - Uses classes mp-* from Materac_Wiki-Templeat.php */ :root{ --mp-bg0:#f5f7fb; --mp-bg1:#ffffff; --mp-card: rgba(10,15,25,.035); --mp-card2: rgba(10,15,25,.055); --mp-border: rgba(10,15,25,.10); --mp-border2: rgba(10,15,25,.14); --mp-txt:#0b1220; --mp-muted: rgba(11,18,32,.70); --mp-muted2: rgba(11,18,32,.52); --mp-accent:#1f66ff; /* MO blue */ --mp-accent2:#6b4dff; /* violet accent */ --mp-good:#12c48b; --mp-warn:#ffb84a; --mp-danger:#ff3e7a; --mp-shadow: 0 18px 55px rgba(10,15,25,.14); --mp-shadow2: 0 10px 26px rgba(10,15,25,.10); --mp-r12:12px; --mp-r14:14px; --mp-r16:16px; --mp-r18:18px; --mp-r22:22px; --mp-blur: blur(14px); --mp-max: 1240px; --mp-focus: 0 0 0 3px rgba(31,102,255,.25); --mp-grad: linear-gradient(120deg, rgba(31,102,255,.16), rgba(107,77,255,.10)); --mp-grad2: radial-gradient(900px 240px at 30% 0%, rgba(31,102,255,.18), transparent 60%), radial-gradient(700px 220px at 78% 10%, rgba(107,77,255,.16), transparent 55%); } /* Dark mode (MO-ish, like your news-pro vars) */ [data-theme="dark"]{ --mp-bg0:#070a10; --mp-bg1:#0b1220; --mp-card: rgba(255,255,255,.045); --mp-card2: rgba(255,255,255,.065); --mp-border: rgba(255,255,255,.10); --mp-border2: rgba(255,255,255,.14); --mp-txt:#eaf0ff; --mp-muted: rgba(234,240,255,.72); --mp-muted2: rgba(234,240,255,.55); --mp-accent:#6aa8ff; --mp-accent2:#9b7bff; --mp-shadow: 0 18px 60px rgba(0,0,0,.35); --mp-shadow2: 0 12px 28px rgba(0,0,0,.28); --mp-focus: 0 0 0 3px rgba(106,168,255,.22); --mp-grad: linear-gradient(120deg, rgba(106,168,255,.18), rgba(155,123,255,.12)); --mp-grad2: radial-gradient(900px 240px at 30% 0%, rgba(106,168,255,.20), transparent 60%), radial-gradient(700px 220px at 78% 10%, rgba(155,123,255,.16), transparent 55%); } /* Base */ *{ box-sizing:border-box; } html,body{ height:100%; } body{ margin:0; color:var(--mp-txt); background: var(--mp-grad2), linear-gradient(180deg, var(--mp-bg0), var(--mp-bg1)); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji"; line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } a{ color:inherit; text-decoration:none; } a:hover{ text-decoration:none; } img{ max-width:100%; height:auto; display:block; } kbd{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:.9em; padding:.15rem .38rem; border-radius:10px; background: var(--mp-card); border: 1px solid var(--mp-border); } /* Focus */ :focus{ outline:none; } :focus-visible{ box-shadow: var(--mp-focus); border-radius: 10px; } /* Skip link */ .mp-skip{ position:absolute; left:-9999px; top:10px; z-index:9999; padding:.7rem 1rem; background: var(--mp-bg1); border:1px solid var(--mp-border); border-radius: 999px; box-shadow: var(--mp-shadow2); } .mp-skip:focus{ left:12px; } /* Layout shell */ .mp-shell{ min-height:100vh; display:flex; flex-direction:column; } /* Topbar */ .mp-top{ position:sticky; top:0; z-index:50; backdrop-filter: var(--mp-blur); -webkit-backdrop-filter: var(--mp-blur); background: color-mix(in srgb, var(--mp-bg1) 78%, transparent); border-bottom: 1px solid var(--mp-border); } .mp-top-in{ max-width: calc(var(--mp-max) + 40px); margin: 0 auto; padding: 14px 20px; display:grid; grid-template-columns: 1fr minmax(280px, 520px) auto; gap: 14px; align-items:center; } .mp-brand{ display:flex; flex-direction:column; gap:2px; min-width: 220px; } .mp-logo{ display:flex; align-items:center; gap:10px; } .mp-dot{ width:12px; height:12px; border-radius:50%; background: linear-gradient(135deg, var(--mp-accent), var(--mp-accent2)); box-shadow: 0 0 0 6px color-mix(in srgb, var(--mp-accent) 16%, transparent); } .mp-logoTxt{ font-weight: 860; letter-spacing: -0.02em; font-size: 18px; } .mp-logoEm{ color: var(--mp-accent); } .mp-sub{ font-size: 12px; color: var(--mp-muted); } /* Search */ .mp-search{ position:relative; display:flex; align-items:center; gap:10px; padding: 10px 10px 10px 12px; border-radius: 999px; background: var(--mp-card); border: 1px solid var(--mp-border); box-shadow: 0 6px 16px rgba(0,0,0,.06); } [data-theme="dark"] .mp-search{ box-shadow: 0 8px 18px rgba(0,0,0,.22); } .mp-searchLbl{ position:absolute; left:-9999px; } .mp-searchInp{ width:100%; border:0; outline:none; background: transparent; color: var(--mp-txt); font-size: 14px; letter-spacing: .01em; } .mp-searchInp::placeholder{ color: var(--mp-muted2); } .mp-searchBtn{ border: 1px solid var(--mp-border); background: color-mix(in srgb, var(--mp-bg1) 70%, transparent); color: var(--mp-txt); border-radius: 999px; padding: 10px 12px; display:flex; align-items:center; gap:8px; cursor:pointer; transition: transform .12s ease, border-color .12s ease, background .12s ease; } .mp-searchBtn:hover{ transform: translateY(-1px); border-color: color-mix(in srgb, var(--mp-accent) 40%, var(--mp-border)); background: color-mix(in srgb, var(--mp-accent) 8%, var(--mp-bg1)); } .mp-ic{ font-weight: 800; } .mp-searchBtnTxt{ font-weight: 700; font-size: 13px; } /* Top nav */ .mp-topNav{ display:flex; align-items:center; gap:10px; justify-self:end; } .mp-topLink{ font-size: 13px; color: var(--mp-muted); padding: 8px 10px; border-radius: 999px; transition: background .12s ease, color .12s ease; } .mp-topLink:hover{ background: var(--mp-card); color: var(--mp-txt); } .mp-topChip{ display:flex; align-items:center; gap:10px; border-radius: 999px; padding: 8px 12px; border: 1px solid var(--mp-border); background: var(--mp-card); color: var(--mp-txt); cursor:pointer; transition: transform .12s ease, border-color .12s ease; } .mp-topChip:hover{ transform: translateY(-1px); border-color: color-mix(in srgb, var(--mp-accent) 35%, var(--mp-border)); } .mp-chipDot{ width:10px; height:10px; border-radius:50%; background: linear-gradient(135deg, var(--mp-accent), var(--mp-accent2)); box-shadow: 0 0 0 6px color-mix(in srgb, var(--mp-accent) 14%, transparent); } /* Body grid */ .mp-body{ max-width: calc(var(--mp-max) + 40px); margin: 0 auto; width:100%; padding: 18px 20px 42px; display:grid; grid-template-columns: 280px 1fr; gap: 18px; align-items:start; } /* Sidebar */ .mp-side{ position:sticky; top: 88px; align-self:start; display:flex; flex-direction:column; gap: 14px; } .mp-sideCard{ border-radius: var(--mp-r18); background: color-mix(in srgb, var(--mp-bg1) 70%, transparent); border: 1px solid var(--mp-border); box-shadow: var(--mp-shadow2); padding: 14px; overflow:hidden; } [data-theme="dark"] .mp-sideCard{ background: color-mix(in srgb, var(--mp-bg1) 65%, transparent); } .mp-sideTitle{ font-weight: 840; letter-spacing: -0.01em; margin-bottom: 10px; font-size: 13px; color: var(--mp-muted); text-transform: uppercase; } .mp-sideList{ display:flex; flex-direction:column; gap: 8px; } .mp-sideBtns{ display:flex; flex-wrap:wrap; gap: 10px; } .mp-btn{ border:1px solid var(--mp-border); background: var(--mp-card); color: var(--mp-txt); border-radius: 12px; padding: 10px 12px; cursor:pointer; font-weight: 720; font-size: 13px; transition: transform .12s ease, border-color .12s ease, background .12s ease; } .mp-btn:hover{ transform: translateY(-1px); border-color: color-mix(in srgb, var(--mp-accent) 35%, var(--mp-border)); background: color-mix(in srgb, var(--mp-accent) 8%, var(--mp-card)); } .mp-sideNote{ background: var(--mp-grad); } .mp-sideP{ margin:0; color: color-mix(in srgb, var(--mp-txt) 85%, var(--mp-muted)); font-size: 13px; } /* Main */ .mp-main{ min-width:0; display:flex; flex-direction:column; gap: 14px; } /* Hero */ .mp-hero{ border-radius: var(--mp-r22); border: 1px solid var(--mp-border); background: color-mix(in srgb, var(--mp-bg1) 70%, transparent); box-shadow: var(--mp-shadow); padding: 18px; display:flex; align-items:stretch; justify-content:space-between; gap: 18px; } [data-theme="dark"] .mp-hero{ background: color-mix(in srgb, var(--mp-bg1) 62%, transparent); } .mp-heroLeft{ min-width:0; display:flex; flex-direction:column; gap: 10px; } .mp-h1{ margin:0; font-size: clamp(22px, 2.2vw, 34px); letter-spacing: -0.03em; line-height:1.1; font-weight: 900; } .mp-meta{ display:flex; align-items:center; gap: 10px; flex-wrap:wrap; color: var(--mp-muted); font-size: 13px; } .mp-badge{ display:inline-flex; align-items:center; gap:8px; border-radius: 999px; padding: 6px 10px; border:1px solid var(--mp-border); font-weight: 800; font-size: 12px; letter-spacing: .02em; } .mp-badgeSoft{ background: color-mix(in srgb, var(--mp-accent) 10%, var(--mp-card)); border-color: color-mix(in srgb, var(--mp-accent) 26%, var(--mp-border)); } .mp-dotSep{ opacity:.6; } .mp-muted{ color: var(--mp-muted); } .mp-actions{ display:flex; gap: 10px; flex-wrap:wrap; } .mp-cta, .mp-ghost{ border-radius: 14px; padding: 10px 12px; cursor:pointer; font-weight: 820; font-size: 13px; transition: transform .12s ease, border-color .12s ease, background .12s ease; border: 1px solid var(--mp-border); } .mp-cta{ background: linear-gradient(135deg, var(--mp-accent), var(--mp-accent2)); color: #fff; border-color: color-mix(in srgb, #fff 14%, transparent); box-shadow: 0 10px 26px color-mix(in srgb, var(--mp-accent) 22%, transparent); } .mp-cta:hover{ transform: translateY(-1px); } .mp-ghost{ background: var(--mp-card); color: var(--mp-txt); } .mp-ghost:hover{ transform: translateY(-1px); border-color: color-mix(in srgb, var(--mp-accent) 35%, var(--mp-border)); background: color-mix(in srgb, var(--mp-accent) 6%, var(--mp-card)); } /* Hero right */ .mp-heroRight{ width: 320px; max-width: 40%; display:flex; align-items:stretch; } .mp-mini{ width:100%; border-radius: var(--mp-r18); border: 1px solid var(--mp-border); background: var(--mp-card); padding: 12px; display:flex; flex-direction:column; gap: 10px; } .mp-miniTitle{ font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--mp-muted); font-weight: 860; } .mp-miniRow{ display:flex; flex-wrap:wrap; gap: 10px; } .mp-chip{ display:inline-flex; align-items:center; gap:8px; border-radius: 999px; padding: 8px 10px; border:1px solid var(--mp-border); background: color-mix(in srgb, var(--mp-bg1) 70%, transparent); color: var(--mp-txt); font-size: 12px; font-weight: 780; cursor:pointer; transition: transform .12s ease, border-color .12s ease, background .12s ease; } .mp-chip:hover{ transform: translateY(-1px); border-color: color-mix(in srgb, var(--mp-accent) 35%, var(--mp-border)); background: color-mix(in srgb, var(--mp-accent) 8%, var(--mp-bg1)); } /* Skeleton chip */ .mp-chipSkel{ width: 88px; height: 34px; padding: 0; border-radius: 999px; background: var(--mp-card); position:relative; overflow:hidden; border: 1px solid var(--mp-border); } .mp-chipSkel::after{ content:""; position:absolute; inset:-40% -60%; background: linear-gradient(90deg, transparent, color-mix(in srgb, #fff 26%, transparent), transparent); opacity: .55; transform: translateX(-40%); animation: mpShimmer 1.15s linear infinite; } [data-theme="dark"] .mp-chipSkel::after{ background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent); } /* Content grid (article + infobox) */ .mp-grid{ display:grid; grid-template-columns: 1fr 340px; gap: 16px; align-items:start; } /* Article card */ .mp-article{ border-radius: var(--mp-r22); border: 1px solid var(--mp-border); background: color-mix(in srgb, var(--mp-bg1) 72%, transparent); box-shadow: var(--mp-shadow); overflow:hidden; } .mp-toc{ padding: 14px 16px 10px; border-bottom: 1px solid var(--mp-border); background: color-mix(in srgb, var(--mp-card) 70%, transparent); } .mp-tocTitle{ font-weight: 900; letter-spacing: -0.02em; font-size: 13px; color: var(--mp-muted); text-transform: uppercase; margin-bottom: 10px; } .mp-tocList{ margin:0; padding-left: 18px; display:grid; gap: 7px; color: var(--mp-muted); font-size: 13px; } .mp-tocList a{ color: var(--mp-muted); } .mp-tocList a:hover{ color: var(--mp-txt); } /* Article content */ .mp-content{ padding: 18px 18px 6px; min-height: 260px; } .mp-content h2, .mp-content h3{ letter-spacing:-0.02em; } .mp-content h2{ margin: 18px 0 10px; font-size: 20px; font-weight: 920; } .mp-content h3{ margin: 16px 0 8px; font-size: 16px; font-weight: 880; color: color-mix(in srgb, var(--mp-txt) 92%, var(--mp-muted)); } .mp-content p{ margin: 0 0 12px; color: color-mix(in srgb, var(--mp-txt) 92%, var(--mp-muted)); font-size: 15px; } .mp-content ul, .mp-content ol{ margin: 0 0 14px 18px; color: color-mix(in srgb, var(--mp-txt) 90%, var(--mp-muted)); } .mp-content li{ margin: 6px 0; } .mp-content blockquote{ margin: 14px 0; padding: 12px 14px; border-radius: var(--mp-r16); border: 1px solid var(--mp-border); background: var(--mp-card); color: color-mix(in srgb, var(--mp-txt) 88%, var(--mp-muted)); } .mp-content code{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: .92em; padding: .12rem .36rem; border-radius: 10px; background: var(--mp-card); border: 1px solid var(--mp-border); } /* Footer area: tags + related */ .mp-footer{ padding: 12px 18px 18px; border-top: 1px solid var(--mp-border); background: color-mix(in srgb, var(--mp-card) 70%, transparent); display:flex; flex-direction:column; gap: 14px; } .mp-tags{ display:flex; flex-wrap:wrap; gap: 10px; } .mp-tag{ display:inline-flex; align-items:center; border-radius: 999px; padding: 8px 10px; border:1px solid var(--mp-border); background: color-mix(in srgb, var(--mp-accent) 8%, var(--mp-card)); color: color-mix(in srgb, var(--mp-txt) 92%, var(--mp-muted)); font-weight: 820; font-size: 12px; cursor:pointer; transition: transform .12s ease, border-color .12s ease, background .12s ease; } .mp-tag:hover{ transform: translateY(-1px); border-color: color-mix(in srgb, var(--mp-accent) 40%, var(--mp-border)); background: color-mix(in srgb, var(--mp-accent) 14%, var(--mp-card)); } .mp-tagSkel{ width: 96px; height: 34px; padding:0; background: var(--mp-card); position:relative; overflow:hidden; } .mp-tagSkel::after{ content:""; position:absolute; inset:-40% -60%; background: linear-gradient(90deg, transparent, color-mix(in srgb, #fff 28%, transparent), transparent); opacity: .55; animation: mpShimmer 1.2s linear infinite; } /* Related */ .mp-relTitle{ font-weight: 920; letter-spacing: -0.02em; margin-bottom: 10px; } .mp-relGrid{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .mp-relCard{ border-radius: var(--mp-r18); border: 1px solid var(--mp-border); background: var(--mp-card); padding: 12px; min-height: 86px; box-shadow: 0 10px 22px rgba(0,0,0,.06); } [data-theme="dark"] .mp-relCard{ box-shadow: 0 12px 24px rgba(0,0,0,.22); } .mp-skelCard{ position:relative; overflow:hidden; } .mp-skelCard::after{ content:""; position:absolute; inset:-40% -60%; background: linear-gradient(90deg, transparent, color-mix(in srgb, #fff 28%, transparent), transparent); opacity: .55; transform: translateX(-40%); animation: mpShimmer 1.15s linear infinite; } /* Infobox */ .mp-info{ display:flex; flex-direction:column; gap: 14px; } .mp-infoCard{ border-radius: var(--mp-r22); border: 1px solid var(--mp-border); background: color-mix(in srgb, var(--mp-bg1) 70%, transparent); box-shadow: var(--mp-shadow2); overflow:hidden; } .mp-infoTitle{ padding: 12px 14px; border-bottom: 1px solid var(--mp-border); background: color-mix(in srgb, var(--mp-card) 70%, transparent); font-weight: 920; letter-spacing: -0.02em; } .mp-infoBody{ padding: 12px 14px 14px; display:grid; gap: 10px; color: color-mix(in srgb, var(--mp-txt) 90%, var(--mp-muted)); font-size: 13px; } /* Drawer (results/list) */ .mp-drawer[hidden]{ display:none; } .mp-drawer{ position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display:flex; align-items:flex-start; justify-content:center; padding: 22px 12px; } .mp-drawerIn{ width: min(860px, 96vw); max-height: 86vh; overflow:hidden; border-radius: var(--mp-r22); border: 1px solid var(--mp-border); background: color-mix(in srgb, var(--mp-bg1) 75%, transparent); box-shadow: var(--mp-shadow); display:flex; flex-direction:column; } .mp-drawerTop{ display:flex; align-items:center; justify-content:space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--mp-border); background: color-mix(in srgb, var(--mp-card) 70%, transparent); } .mp-drawerTitle{ font-weight: 920; letter-spacing: -0.02em; } .mp-x{ width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--mp-border); background: var(--mp-card); color: var(--mp-txt); cursor:pointer; font-size: 22px; line-height: 0; display:grid; place-items:center; transition: transform .12s ease, border-color .12s ease; } .mp-x:hover{ transform: translateY(-1px); border-color: color-mix(in srgb, var(--mp-danger) 45%, var(--mp-border)); } .mp-drawerList{ padding: 12px 14px 14px; overflow:auto; } /* Toast */ .mp-toast[hidden]{ display:none; } .mp-toast{ position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 90; } .mp-toastIn{ display:flex; align-items:center; gap: 10px; padding: 12px 12px 12px 12px; border-radius: 999px; border: 1px solid var(--mp-border); background: color-mix(in srgb, var(--mp-bg1) 72%, transparent); backdrop-filter: var(--mp-blur); -webkit-backdrop-filter: var(--mp-blur); box-shadow: var(--mp-shadow); } .mp-toastDot{ width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, var(--mp-accent), var(--mp-accent2)); box-shadow: 0 0 0 6px color-mix(in srgb, var(--mp-accent) 14%, transparent); } .mp-toastTxt{ font-weight: 800; font-size: 13px; color: color-mix(in srgb, var(--mp-txt) 92%, var(--mp-muted)); } .mp-toastX{ width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--mp-border); background: var(--mp-card); color: var(--mp-txt); cursor:pointer; font-size: 18px; line-height: 0; display:grid; place-items:center; transition: transform .12s ease, border-color .12s ease; } .mp-toastX:hover{ transform: translateY(-1px); border-color: color-mix(in srgb, var(--mp-danger) 45%, var(--mp-border)); } /* Skeleton primitives */ .mp-skelLine{ height: 10px; border-radius: 999px; background: var(--mp-card); border: 1px solid var(--mp-border); position:relative; overflow:hidden; } .mp-skelLine::after{ content:""; position:absolute; inset:-40% -60%; background: linear-gradient(90deg, transparent, color-mix(in srgb, #fff 28%, transparent), transparent); opacity: .55; transform: translateX(-40%); animation: mpShimmer 1.15s linear infinite; } [data-theme="dark"] .mp-skelLine::after{ background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent); } .mp-skelBlock{ height: 52px; border-radius: var(--mp-r16); background: var(--mp-card); border: 1px solid var(--mp-border); position:relative; overflow:hidden; margin: 10px 0; } .mp-skelBlock::after{ content:""; position:absolute; inset:-40% -60%; background: linear-gradient(90deg, transparent, color-mix(in srgb, #fff 28%, transparent), transparent); opacity: .55; transform: translateX(-40%); animation: mpShimmer 1.2s linear infinite; } @keyframes mpShimmer{ to{ transform: translateX(40%); } } /* Responsive */ @media (max-width: 1100px){ .mp-top-in{ grid-template-columns: 1fr minmax(240px, 1fr); grid-template-areas: "brand nav" "search search"; } .mp-brand{ grid-area: brand; } .mp-topNav{ grid-area: nav; } .mp-search{ grid-area: search; } .mp-body{ grid-template-columns: 260px 1fr; } .mp-grid{ grid-template-columns: 1fr 320px; } .mp-relGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 920px){ .mp-body{ grid-template-columns: 1fr; } .mp-side{ position: relative; top: auto; order: 2; } .mp-grid{ grid-template-columns: 1fr; } .mp-heroRight{ display:none; } .mp-relGrid{ grid-template-columns: 1fr; } } /* ========================================= MateracoPedi: scroll do tytułu po "Otwórz" - zapobiega schowaniu H1 pod topbarem ========================================= */ :root{ --mpTopH: 92px; /* fallback jeśli JS nie ustawi */ } #mpTitle{ scroll-margin-top: calc(var(--mpTopH) + 12px); } @media (max-width: 520px){ .mp-top-in{ padding: 12px 12px; } .mp-body{ padding: 14px 12px 34px; } .mp-hero{ padding: 14px; } .mp-content{ padding: 14px 14px 6px; } .mp-footer{ padding: 12px 14px 14px; } .mp-actions{ gap: 8px; } .mp-cta, .mp-ghost{ width: 100%; justify-content:center; } }