/* ============================= Libernet — stil complet (comfort palette + human touch) ============================= */ /* Paletă & temă automată */ :root{ --bg:#e9ecf2; --bg-elev:#f3f4f6; --text:#1a1f27; --muted:#4b5563; --primary:#2563eb; --primary-contrast:#fff; --border:#d1d5db; --shadow:0 8px 24px rgba(0,0,0,.08); color-scheme: light dark; } @media (prefers-color-scheme:dark){ :root{ --bg:#0f1218; --bg-elev:#181c24; --text:#e5e7eb; --muted:#9ca3af; --primary:#60a5fa; --primary-contrast:#0f1218; --border:#1f2937; --shadow:0 8px 24px rgba(0,0,0,.35); } } /* Reset & bază */ *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif; background:var(--bg); color:var(--text); line-height:1.6; /* Textură fină foarte subtilă */ background-image: radial-gradient(1px 1px at 20% 10%, rgba(0,0,0,.015) 0, transparent 100%), radial-gradient(1px 1px at 80% 30%, rgba(0,0,0,.018) 0, transparent 100%), radial-gradient(1px 1px at 50% 80%, rgba(0,0,0,.012) 0, transparent 100%); } @media (prefers-color-scheme:dark){ body{background-image: radial-gradient(1px 1px at 20% 10%, rgba(255,255,255,.020) 0, transparent 100%), radial-gradient(1px 1px at 80% 30%, rgba(255,255,255,.018) 0, transparent 100%), radial-gradient(1px 1px at 50% 80%, rgba(255,255,255,.015) 0, transparent 100%)} } img,svg{display:block;max-width:100%;height:auto} .container{width:min(1100px,100% - 2rem);margin-inline:auto} .flow>*+*{margin-top:clamp(1rem,1.5vw,1.25rem)} :focus-visible{outline:2px solid var(--primary);outline-offset:2px} .skip-link{position:absolute;left:-9999px} .skip-link:focus{left:8px;top:8px;background:var(--primary);color:var(--primary-contrast);padding:.5rem .75rem;border-radius:.5rem} /* Header – FIX, mereu vizibil */ .site-header{ position:fixed; top:0; left:0; right:0; z-index:120; backdrop-filter:saturate(180%) blur(6px); background:color-mix(in oklab, var(--bg) 85%, transparent); border-bottom:1px solid var(--border); } body{padding-top:var(--header-h,56px)} .header-bar{display:grid;grid-template-columns:auto 40px 1fr auto;align-items:center;gap:.75rem;padding:.6rem 0} .brand{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;color:inherit} .brand-mark{width:28px;height:28px;fill:var(--primary)} .brand-name{font-weight:800;letter-spacing:.2px} /* Navigație */ .site-nav ul{display:flex;gap:.75rem;list-style:none;padding:0;margin:0} .site-nav a{text-decoration:none;padding:.5rem .75rem;border-radius:.6rem;color:inherit} .site-nav a:hover{background:color-mix(in oklab, var(--primary) 15%, var(--bg-elev))} .site-nav a[aria-current="page"]{background:color-mix(in oklab, var(--primary) 25%, var(--bg-elev))} .nav-toggle{appearance:none;border:1px solid var(--border);background:var(--bg-elev);border-radius:.6rem;padding:.4rem;display:grid;place-items:center;cursor:pointer} .site-nav{display:none} .site-nav.open{display:block;position:absolute;left:0;right:0;top:100%;background:var(--bg-elev);border-bottom:1px solid var(--border);box-shadow:var(--shadow)} .site-nav.open ul{flex-direction:column;padding:.5rem} @media (min-width:900px){.header-bar{grid-template-columns:auto 1fr auto}.nav-toggle{display:none}.site-nav{display:block;position:static}.site-nav ul{flex-direction:row}} /* Hero & tipografie */ .hero{padding:1.5rem 0} .hero--small{padding:1rem 0} .hero-title{font-size:clamp(1.6rem,2.8vw,2.6rem);line-height:1.2;font-weight:800;letter-spacing:-.01em} .lead{font-size:clamp(1rem,1.5vw,1.125rem);color:var(--muted)} .prose p{margin:.8rem 0} /* Grile & carduri */ .section{margin-top:1.5rem} .section>h2{font-size:clamp(1.25rem,1.8vw,1.6rem);margin:0 0 .75rem} .grid{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:.9rem} @media (min-width:600px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:900px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}} .card{ display:block;padding:1rem;background:color-mix(in oklab, var(--bg-elev) 95%, var(--bg)); border:1px solid color-mix(in oklab, var(--border) 90%, var(--bg)); border-radius:1rem; box-shadow:var(--shadow); text-decoration:none; color:inherit; transition:transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease, border-color .18s ease; } .card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.12)} .card h3{margin:0 0 .25rem;font-size:1.05rem;font-weight:800} .card p{margin:0;color:var(--muted)} /* TOC fix & centrat */ .toc{ position:fixed; top:calc(var(--header-h,56px) + 8px); left:0; right:0; z-index:60; padding:.5rem 0 .65rem; border-bottom:1px dashed var(--border); background:color-mix(in oklab, var(--bg-elev) 92%, transparent); box-shadow:var(--shadow); } .toc-inner{display:flex;gap:.5rem;justify-content:center;align-items:center;overflow-x:auto;padding:0 .75rem} .toc a{text-decoration:none;padding:.35rem .6rem;border-radius:.6rem;border:1px solid var(--border);background:var(--bg-elev);flex:0 0 auto; box-shadow:inset 0 -1px 0 rgba(0,0,0,.05); transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease} .toc a:hover{border-color:color-mix(in oklab, var(--primary) 35%, var(--border))} .toc a:active{transform:translateY(1px);box-shadow:inset 0 1px 0 rgba(0,0,0,.06)} .toc-spacer{height:56px} /* Footer */ .site-footer{margin-top:3rem;border-top:2px solid color-mix(in oklab, var(--primary) 15%, var(--border));background:color-mix(in oklab, var(--bg) 90%, transparent)} .site-footer .container{padding:1rem 0;text-align:center} .site-footer p{margin:.25rem 0;color:var(--muted)} .site-footer a{color:var(--primary)} .site-footer .footnote{margin-top:.5rem;opacity:.85;font-size:.95rem} /* Umanizare — marker sub titluri */ .hero-title,.section>h2{position:relative;letter-spacing:-.005em} .hero-title::after,.section>h2::after{ content:"";position:absolute;left:0;right:0;bottom:.18em;height:.45em;z-index:-1; background:linear-gradient(90deg,color-mix(in oklab,var(--primary) 22%,var(--bg)) 0%,color-mix(in oklab,var(--primary) 12%,var(--bg)) 100%); border-radius:.25em;opacity:.35 } /* Carduri: tactil + variații subtile ale razei */ .card{box-shadow:0 1px 0 rgba(0,0,0,.04),0 10px 18px rgba(0,0,0,.08)} .grid .card:nth-child(3n+1){border-radius:1.05rem} .grid .card:nth-child(3n+2){border-radius:1rem} .grid .card:nth-child(3n){border-radius:1.15rem} .card:focus-visible{outline:2px solid color-mix(in oklab,var(--primary) 55%,var(--bg));outline-offset:3px;border-radius:1.1rem} /* Accent lateral mic la titluri de secțiune */ .section>h2{padding-left:.6rem;border-left:3px solid color-mix(in oklab,var(--primary) 28%, var(--border))} /* Lățime mai intimă pe desktop mare */ @media (min-width:1200px){.container{width:min(1000px,100% - 2rem)}} /* ========================================================= Libernet Handmade — personal touches (subtle & unique) ========================================================= */ /* A) Paletă puțin mai caldă (doar nuanță; păstrează contrastul) */ :root { --bg: #eceff3; --bg-elev: #f6f7f9; --text: #1b2230; --muted: #525d6d; --primary: #2a61e0; /* albastru Libernet, ușor stins */ --border: #d5dbe3; } @media (prefers-color-scheme: dark){ :root{ --bg: #0f1319; --bg-elev: #171c24; --text: #e6e9ee; --muted: #a5aebb; --primary: #6aa3ff; --border: #223042; } } /* B) Titluri „trasate” cu marker ondulat (uman) */ .hero-title, .section > h2 { position: relative; letter-spacing: -0.006em; } .hero-title::after, .section > h2::after { content:""; position:absolute; left:0; right:0; bottom:.2em; height:.46em; z-index:-1; /* SVG inline ca fundal, urmă ondulată discretă */ background: url("data:image/svg+xml;utf8,\ \ \ ") 0 100%/100% 100% no-repeat; opacity: .9; } /* C) Carduri: hârtie reală + mic „pliu” în colț + asimetrie controlată */ .card { background: color-mix(in oklab, var(--bg-elev) 96%, var(--bg)); border: 1px solid color-mix(in oklab, var(--border) 88%, var(--bg)); box-shadow: 0 0.5px 0 rgba(0,0,0,.04), 0 10px 18px rgba(0,0,0,.08); position: relative; } .card::after { /* pliu mic în colțul dreapta-sus */ content:""; position:absolute; top:-1px; right:-1px; width:14px; height:14px; background: linear-gradient(135deg, rgba(0,0,0,.06), rgba(0,0,0,0)) ; clip-path: polygon(0 0, 100% 0, 100% 100%); border-top-right-radius: .5rem; opacity:.25; pointer-events:none; } .grid .card:nth-child(5n+1){ transform: rotate(.2deg); } .grid .card:nth-child(5n+3){ transform: rotate(-.25deg); } .grid .card:nth-child(5n+4){ transform: rotate(.15deg); } .card:hover { transform: translateY(-2px) rotate(0deg); } /* indicator „punct de cerneală” la titlul cardului */ .card h3 { position: relative; padding-left: .9rem; } .card h3::before { content:""; position:absolute; left:.15rem; top:.45em; width:.42rem; height:.42rem; background: color-mix(in oklab, var(--primary) 70%, var(--bg)); border-radius: 50%; box-shadow: 0 0 0 2px color-mix(in oklab, var(--primary) 18%, var(--bg)); } /* D) Separatoare „scribble” între secțiuni (opțional) */ .section { scroll-margin-top: calc(var(--header-h,56px) + 72px); } .section + .section { margin-top: 2rem; position: relative; } .section + .section::before { content:""; position:absolute; left:0; right:0; top:-1rem; height:24px; background: url("data:image/svg+xml;utf8,\ \ \ ") center/100% 100% no-repeat; opacity:.55; } @media (prefers-color-scheme: dark){ .section + .section::before { background-image: url("data:image/svg+xml;utf8,\ \ \ "); } } /* E) TOC pastile — tactile, apăsabile */ .toc a { border-color: color-mix(in oklab, var(--border) 85%, var(--bg)); background: linear-gradient(180deg, color-mix(in oklab, var(--bg-elev) 100%, transparent) 0%, color-mix(in oklab, var(--bg-elev) 92%, transparent) 100%); box-shadow: inset 0 -1px 0 rgba(0,0,0,.04), 0 0 0 1px rgba(0,0,0,0.02); } .toc a:active { transform: translateY(1px); } /* F) Titluri de secțiune cu bandă laterală „atelier” */ .section > h2 { padding-left: .6rem; border-left: 3px solid color-mix(in oklab, var(--primary) 30%, var(--border)); } /* G) Container un pic mai intim pe ecrane mari (uman) */ @media (min-width: 1200px) { .container { width: min(980px, 100% - 2rem); } } hr.scribble { border: none; height: 22px; margin: 1.25rem 0; background: url("data:image/svg+xml;utf8,\ \ \ ") center/100% 100% no-repeat; opacity:.6; } @media (prefers-color-scheme: dark){ hr.scribble{ background-image: url("data:image/svg+xml;utf8,\ \ \ "); }}