/* ============================================================ Arktronics - Tudásbázis / cikk design system Egy helyen: token-rendszer (világos + sötét), teljes nav a főoldal mintájára, cikk-komponensek. Sima .html cikkek linkelik. A sötét/világos váltót a nav.js kezeli (delegálva), a villanás- mentes téma-init a -ben fut. Minden hover valódi CSS. ============================================================ */ :root{ --line-rgb:31,32,35; --bg:#FFFFFF; --surface:#F6F5F2; --card:#FFFFFF; --field:#FBFAF8; --chrome:#F4F3F0; --ink:#1F2023; --ink-soft:#5C6066; --ink-mute:#6C7075; --accent:#2B5CFF; --accent-hover:#1E48D8; --btn-solid-bg:#1F2023; --btn-solid-hover:#3A3B40; --panel-dark:#0A0B0D; --panel-dark-ink:#F2F3F0; --panel-dark-accent:#7B9EFF; --nav-bg:rgba(255,255,255,0.82); color-scheme: light; } :root[data-theme="dark"]{ --line-rgb:255,255,255; --bg:#0C0D10; --surface:#17191E; --card:#141619; --field:#191B20; --chrome:#1B1D22; --ink:#ECEEF1; --ink-soft:#ABAFB7; --ink-mute:#9298A2; --accent:#6E8CFF; --accent-hover:#8AA1FF; --btn-solid-bg:#2B5CFF; --btn-solid-hover:#1E48D8; --panel-dark:#08090B; --panel-dark-ink:#F2F3F0; --panel-dark-accent:#8AA1FF; --nav-bg:rgba(12,13,16,0.82); color-scheme: dark; } /* ---- alap ---- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; background:var(--bg); } body { margin:0; background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; font-family:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; transition:background 0.3s ease; } ::selection { background:var(--accent); color:#FFFFFF; } a { color:var(--accent); } a:hover { color:var(--accent-hover); } a:focus-visible, button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; } :focus:not(:focus-visible) { outline:none; } img { max-width:100%; height:auto; } /* ---- téma-váltó viselkedés ---- */ [data-icon-sun] { display:none; } [data-icon-moon] { display:block; } :root[data-theme="dark"] [data-icon-moon] { display:none; } :root[data-theme="dark"] [data-icon-sun] { display:block; } :root.theme-anim, :root.theme-anim * { transition: background-color 0.32s ease, color 0.32s ease, border-color 0.32s ease, fill 0.32s ease !important; } @keyframes ark-fadeUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } } /* ============================================================ NAV - a főoldal navja, sima CSS-sel (dc-runtime nélkül) ============================================================ */ .ark-nav{ position:fixed; top:0; left:0; right:0; z-index:50; background:var(--nav-bg); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid rgba(var(--line-rgb),0.07); } .ark-nav-inner{ max-width:1240px; margin:0 auto; padding:0 clamp(20px,4vw,40px); height:64px; display:flex; align-items:center; justify-content:space-between; gap:24px; } .ark-brand{ text-decoration:none; font-weight:700; font-size:19px; letter-spacing:-0.02em; color:var(--ink); white-space:nowrap; } .ark-brand span{ color:var(--accent); } .ark-nav-links{ display:flex; align-items:center; gap:30px; } .ark-nav-link{ text-decoration:none; white-space:nowrap; font-weight:500; font-size:14.5px; color:var(--ink-soft); background-image:linear-gradient(currentColor,currentColor); background-size:0% 1.5px; background-position:0 100%; background-repeat:no-repeat; padding-bottom:3px; transition:color 0.25s, background-size 0.35s cubic-bezier(0.16,1,0.3,1); } .ark-nav-link:hover{ color:var(--ink); background-size:100% 1.5px; } .ark-nav-current{ font-weight:600; font-size:14.5px; color:var(--ink); white-space:nowrap; padding-bottom:3px; border-bottom:1.5px solid var(--accent); } .ark-nav-right{ display:flex; align-items:center; gap:12px; } .ark-btn-solid{ text-decoration:none; background:var(--btn-solid-bg); color:#FFFFFF; font-weight:600; font-size:14.5px; padding:11px 22px; border-radius:999px; white-space:nowrap; transition:background 0.25s cubic-bezier(0.16,1,0.3,1); } .ark-btn-solid:hover{ background:var(--btn-solid-hover); color:#FFFFFF; } .ark-theme-toggle{ display:flex; align-items:center; justify-content:center; width:40px; height:40px; flex:none; border:1px solid rgba(var(--line-rgb),0.14); border-radius:11px; background:var(--card); color:var(--ink); cursor:pointer; padding:0; transition:background 0.2s,border-color 0.2s,color 0.2s; } .ark-theme-toggle:hover{ background:var(--surface); border-color:rgba(var(--line-rgb),0.26); } .ark-menu-toggle{ display:none; align-items:center; justify-content:center; flex-direction:column; gap:4px; width:42px; height:42px; border:1px solid rgba(var(--line-rgb),0.14); border-radius:12px; background:var(--card); cursor:pointer; padding:0; } .ark-menu-toggle span{ width:17px; height:2px; border-radius:2px; background:var(--ink); } .ark-mobile-menu{ display:none; position:fixed; top:64px; left:0; right:0; z-index:49; background:var(--card); border-bottom:1px solid rgba(var(--line-rgb),0.1); box-shadow:0 24px 48px -20px rgba(10,11,13,0.25); animation:ark-fadeUp 0.28s cubic-bezier(0.16,1,0.3,1); flex-direction:column; padding:14px clamp(20px,4vw,40px) 22px; } .ark-mobile-menu.open{ display:flex; } .ark-mobile-menu a{ text-decoration:none; font-weight:500; font-size:17px; color:var(--ink); padding:13px 0; border-bottom:1px solid rgba(var(--line-rgb),0.07); } .ark-mobile-menu a:last-child{ border-bottom:none; } @media (max-width:900px){ .ark-hide-mobile{ display:none !important; } .ark-menu-toggle{ display:flex; } } /* ---- lebegő háttér-glow (mint a főoldalon) ---- */ .ark-glow{ position:fixed; inset:0; z-index:0; pointer-events:none; background:radial-gradient(90% 60% at 82% -8%, rgba(43,92,255,0.07) 0%, rgba(255,255,255,0) 60%); } :root[data-theme="dark"] .ark-glow{ background:radial-gradient(90% 60% at 82% -8%, rgba(110,140,255,0.10) 0%, rgba(12,13,16,0) 60%); } /* ============================================================ CIKK-KOMPONENSEK ============================================================ */ .wrap{ max-width:820px; margin:0 auto; padding:0 clamp(20px,4vw,40px); position:relative; z-index:1; } .ark-main{ padding-top:64px; } h1{ font-weight:500; font-size:clamp(2rem,5vw,3.3rem); line-height:1.08; letter-spacing:-0.03em; color:var(--ink); margin:0 0 18px; text-wrap:balance; } h2{ font-weight:500; font-size:clamp(1.45rem,3vw,2rem); line-height:1.15; letter-spacing:-0.02em; color:var(--ink); margin:clamp(38px,6vw,56px) 0 18px; } h3{ font-weight:600; font-size:17px; line-height:1.35; color:var(--ink); margin:0 0 8px; } p{ font-size:16.5px; line-height:1.7; color:var(--ink-soft); text-wrap:pretty; } .lede{ font-size:18px; line-height:1.62; color:var(--ink-soft); } .mono{ font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:0.14em; color:var(--ink-mute); } strong{ color:var(--ink); font-weight:600; } /* válasz-doboz / kiemelt kártya */ .card, .answer{ background:var(--surface); border-radius:16px; padding:clamp(20px,3vw,28px); } .answer p{ font-size:17px; color:var(--ink); margin:0; } .answer .mono{ margin-bottom:10px; } /* táblázat */ .tbl-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; } table{ width:100%; border-collapse:collapse; margin:8px 0; font-size:14.5px; } th,td{ text-align:left; padding:12px; border-bottom:1px solid rgba(var(--line-rgb),0.1); vertical-align:top; } th{ font-weight:600; color:var(--ink); } td{ color:var(--ink-soft); } td strong{ color:var(--ink); } /* listák */ ul{ padding-left:20px; } li{ font-size:16px; line-height:1.7; color:var(--ink-soft); margin-bottom:6px; } /* lépés-lista (számozott, sávos) */ .steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; } .steps li{ display:flex; gap:16px; padding:16px 0; border-top:1px solid rgba(var(--line-rgb),0.1); margin:0; } .steps li:last-child{ border-bottom:1px solid rgba(var(--line-rgb),0.1); } .steps .n{ flex:none; width:26px; height:26px; border-radius:8px; background:var(--surface); color:var(--ink); font-family:'JetBrains Mono',monospace; font-size:12.5px; display:flex; align-items:center; justify-content:center; } /* statisztika-kiemelés (monokróm) */ .stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:14px; } .stat{ border:1px solid rgba(var(--line-rgb),0.12); border-radius:16px; padding:clamp(18px,2.6vw,24px); } .stat .num{ font-weight:600; font-size:clamp(1.9rem,4vw,2.5rem); letter-spacing:-0.02em; color:var(--ink); line-height:1; } .stat .lbl{ font-size:13.5px; line-height:1.5; color:var(--ink-soft); margin-top:10px; } .stat .src{ display:block; margin-top:8px; } /* forrás-hivatkozás sor */ .src{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:0.04em; color:var(--ink-mute); } .src a{ color:var(--ink-mute); text-decoration:underline; text-underline-offset:2px; } .src a:hover{ color:var(--accent); } /* jegyzet-doboz (bal sávos, visszafogott) */ .callout{ border-left:2px solid rgba(var(--line-rgb),0.35); padding:4px 0 4px 18px; margin:clamp(24px,4vw,32px) 0; } .callout p{ margin:0; color:var(--ink-soft); } /* CTA */ .cta{ display:inline-block; background:var(--accent); color:#FFFFFF; text-decoration:none; font-weight:700; font-size:16px; padding:15px 28px; border-radius:12px; transition:background 0.25s; } .cta:hover{ background:var(--accent-hover); color:#FFFFFF; } .cta-ghost{ font-weight:600; font-size:14.5px; } /* pró/kontra kártyapár (monokróm - jel marad, szín semleges) */ .pc-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:16px; } .pc{ border:1px solid rgba(var(--line-rgb),0.12); border-radius:16px; padding:clamp(18px,2.6vw,24px); } .pc ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; } .pc li{ display:flex; gap:10px; font-size:14.5px; line-height:1.6; color:var(--ink-soft); margin:0; } .pc li .m{ flex:none; color:var(--ink); } /* GYIK */ .faq{ border-top:1px solid rgba(var(--line-rgb),0.14); } .faq-item{ padding:18px 0; border-bottom:1px solid rgba(var(--line-rgb),0.1); } .faq-item p{ margin:8px 0 0; font-size:15px; color:var(--ink-soft); } /* kapcsolódó cikkek */ .related{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:12px; } .rel-card{ text-decoration:none; border:1px solid rgba(var(--line-rgb),0.14); border-radius:14px; padding:16px 18px; display:flex; flex-direction:column; gap:7px; transition:border-color 0.25s, background 0.25s; } .rel-card:hover{ border-color:var(--accent); background:var(--surface); } .rel-card .tag{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:0.1em; color:var(--accent); } .rel-card .ttl{ font-weight:600; font-size:15px; line-height:1.35; color:var(--ink); } /* CTA-panel (sötét, mindkét módban) */ .cta-panel{ background:var(--panel-dark); border-radius:20px; padding:clamp(24px,4vw,36px); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 24px; } .cta-panel .t{ font-weight:600; font-size:19px; letter-spacing:-0.01em; color:var(--panel-dark-ink); margin-bottom:6px; } .cta-panel p{ font-size:14.5px; line-height:1.6; color:rgba(242,243,240,0.65); margin:0; max-width:420px; } .cta-panel .go{ text-decoration:none; background:#FFFFFF; color:#1F2023; font-weight:600; font-size:15px; padding:13px 26px; border-radius:999px; white-space:nowrap; transition:background 0.25s; } .cta-panel .go:hover{ background:#E8E9E6; color:#1F2023; } /* lábléc (sötét panel mindkét módban) */ .ark-footer{ background:var(--panel-dark); padding:clamp(48px,6vw,72px) clamp(20px,4vw,40px) 26px; position:relative; z-index:1; } .ark-footer-inner{ max-width:1080px; margin:0 auto; } .ark-footer-top{ display:flex; flex-wrap:wrap; gap:24px 60px; justify-content:space-between; align-items:flex-start; padding-bottom:28px; border-bottom:1px solid rgba(242,243,240,0.12); } .ark-footer .brand{ font-weight:700; font-size:22px; color:var(--panel-dark-ink); margin-bottom:10px; } .ark-footer .brand span{ color:var(--panel-dark-accent); } .ark-footer p{ font-size:14px; line-height:1.6; color:rgba(242,243,240,0.6); margin:0; max-width:380px; } .ark-footer a{ text-decoration:none; } .ark-footer .fcol{ display:flex; flex-direction:column; gap:9px; } .ark-footer .fcol a, .ark-footer .fcol span{ color:rgba(242,243,240,0.75); font-size:14px; } .ark-footer .fcol a.mail{ color:var(--panel-dark-accent); font-weight:600; } .ark-footer-bot{ padding-top:18px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; } .ark-footer-bot span, .ark-footer-bot a{ font-size:13px; color:rgba(242,243,240,0.45); } .ark-footer .flinks{ display:flex; gap:22px; flex-wrap:wrap; } .ark-footer .flinks a{ color:rgba(242,243,240,0.65); font-size:13.5px; transition:color 0.2s; } .ark-footer .flinks a:hover{ color:#FFFFFF; } /* kód-blokk (schema-sablonokhoz) - tokenizált, sötét-mód-kész */ pre{ background:var(--chrome); border:1px solid rgba(var(--line-rgb),0.1); border-radius:12px; padding:16px 18px; overflow-x:auto; -webkit-overflow-scrolling:touch; margin:16px 0; } pre code{ font-family:'JetBrains Mono',monospace; font-size:12.5px; line-height:1.65; color:var(--ink); white-space:pre; background:none; padding:0; border-radius:0; } code{ font-family:'JetBrains Mono',monospace; font-size:0.9em; background:var(--chrome); padding:1px 6px; border-radius:5px; color:var(--ink); } .code-label{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:clamp(24px,4vw,32px) 0 0; } .code-label .mono{ color:var(--ink-mute); } /* tudásbázis hub - kategória-blokkok + kártyák */ .hub-cat{ margin-top:clamp(40px,6vw,64px); } .hub-cat-head{ margin-bottom:18px; } .hub-cat-head h2{ margin:0 0 6px; } .hub-cat-head p{ margin:0; font-size:15px; color:var(--ink-mute); } .hub-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); gap:14px; } .hub-card{ text-decoration:none; border:1px solid rgba(var(--line-rgb),0.14); border-radius:16px; padding:20px 22px; display:flex; flex-direction:column; gap:9px; transition:border-color 0.25s, background 0.25s, transform 0.25s; } .hub-card:hover{ border-color:var(--accent); background:var(--surface); transform:translateY(-2px); } .hub-card .tag{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.12em; color:var(--accent); } .hub-card .ttl{ font-weight:600; font-size:16.5px; line-height:1.3; color:var(--ink); } .hub-card .desc{ font-size:13.5px; line-height:1.55; color:var(--ink-soft); } .hub-card.feat{ border-color:rgba(var(--line-rgb),0.2); background:var(--surface); } /* fejléc / törzs helykitöltés a fix nav alatt */ .ark-header{ padding:clamp(50px,8vw,90px) clamp(20px,4vw,40px) clamp(24px,4vw,36px); position:relative; z-index:1; } .ark-article{ padding:0 clamp(20px,4vw,40px) clamp(50px,7vw,80px); position:relative; z-index:1; } .breadcrumb{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; align-items:center; } .breadcrumb a.mono{ text-decoration:none; } .breadcrumb a.mono:hover{ color:var(--accent); } /* Az oldalkereső stílusai külön fájlban: search.css (a search.js tölti be). */ /* ============================================================ CIKK-KÉNYELEM (enhance.js) - TOC, csík, vissza-fel, másolás ============================================================ */ .ark-article h2, .ark-article h3{ scroll-margin-top:92px; } .ark-anchor{ text-decoration:none; color:var(--ink-mute); margin-left:8px; font-weight:400; opacity:0; transition:opacity .18s, color .18s; } .ark-article h2:hover .ark-anchor, .ark-article h3:hover .ark-anchor{ opacity:.5; } .ark-anchor:hover{ opacity:1 !important; color:var(--accent); } /* olvasás-folyamat csík (felül, egyetlen vékony vonal) */ .ark-progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:60; pointer-events:none; } .ark-progress span{ display:block; height:100%; background:var(--accent); transform:scaleX(0); transform-origin:0 50%; will-change:transform; } /* vissza-fel gomb (az EGYETLEN sarok-widget) */ .ark-totop{ position:fixed; bottom:22px; right:22px; z-index:55; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink); background:var(--card); border:1px solid rgba(var(--line-rgb),0.16); box-shadow:0 10px 30px -12px rgba(8,10,14,.4); opacity:0; transform:translateY(8px); pointer-events:none; transition:opacity .2s, transform .2s, border-color .2s, background .2s; } .ark-totop.show{ opacity:1; transform:translateY(0); pointer-events:auto; } .ark-totop:hover{ border-color:var(--accent); background:var(--surface); } /* asztali tartalomjegyzék - oldalsáv (fix, a 820px-es hasáb jobb margóján) */ .ark-toc{ display:none; } @media (min-width:1240px){ .ark-toc{ display:block; position:fixed; top:50%; transform:translateY(-50%); left:calc(50% + 430px); right:16px; max-width:224px; max-height:74vh; overflow-y:auto; z-index:40; } .ark-toc-l{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:12px; padding-left:13px; } .ark-toc ul{ list-style:none; margin:0; padding:0; border-left:1.5px solid rgba(var(--line-rgb),0.1); } .ark-toc a{ display:block; text-decoration:none; font-size:13px; line-height:1.4; color:var(--ink-mute); padding:6px 0 6px 13px; margin-left:-1.5px; border-left:1.5px solid transparent; transition:color .18s, border-color .18s; } .ark-toc a:hover{ color:var(--ink); } .ark-toc a.on{ color:var(--accent); border-left-color:var(--accent); font-weight:500; } } /* mobil tartalomjegyzék - lenyíló (az összefoglaló után) */ .ark-toc-m{ margin:0 0 clamp(26px,4vw,34px); border:1px solid rgba(var(--line-rgb),0.13); border-radius:12px; background:var(--surface); overflow:hidden; } @media (min-width:1240px){ .ark-toc-m{ display:none; } } .ark-toc-m summary{ cursor:pointer; list-style:none; padding:13px 16px; font-weight:600; font-size:14.5px; color:var(--ink); display:flex; align-items:center; gap:10px; } .ark-toc-m summary::-webkit-details-marker{ display:none; } .ark-toc-m summary::after{ content:"\25BE"; margin-left:6px; color:var(--ink-mute); transition:transform .2s; } .ark-toc-m[open] summary::after{ transform:rotate(180deg); } .ark-toc-m-c{ margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:400; color:var(--ink-mute); } .ark-toc-m ul{ list-style:none; margin:0; padding:0 8px 8px; } .ark-toc-m a{ display:block; text-decoration:none; font-size:14px; color:var(--ink-soft); padding:9px 8px; border-radius:8px; } .ark-toc-m a:hover{ background:var(--card); color:var(--ink); } /* kód-másolás */ .ark-pre-wrap{ position:relative; } .ark-copy{ position:absolute; top:9px; right:9px; cursor:pointer; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--ink-soft); background:var(--card); border:1px solid rgba(var(--line-rgb),0.18); border-radius:7px; padding:5px 9px; opacity:0; transition:opacity .18s, color .18s, border-color .18s; } .ark-pre-wrap:hover .ark-copy, .ark-copy:focus-visible{ opacity:1; } .ark-copy:hover{ color:var(--ink); border-color:var(--accent); } .ark-copy.done{ color:var(--accent); border-color:var(--accent); opacity:1; } @media (hover:none){ .ark-copy{ opacity:1; } } /* nemrég olvastad */ .ark-recent{ margin-bottom:clamp(30px,4vw,42px); } /* nyomtatás / PDF-mentés */ @media print{ .ark-nav, .ark-mobile-menu, .ark-glow, .ark-footer, .ark-toc, .ark-toc-m, .ark-progress, .ark-totop, .ark-nav-search, .ark-search-overlay, .cta-panel, .ark-anchor, .ark-copy, .ark-recent{ display:none !important; } html, body{ background:#fff !important; color:#000 !important; } .ark-main, .wrap{ max-width:none !important; } a{ color:#000 !important; text-decoration:underline; } a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:10.5px; color:#555; word-break:break-all; } pre, .answer, .faq-item, .steps li, .stat{ break-inside:avoid; } }