/* main.css – Kod Serca Font: IBM Plex Mono (pelne polskie znaki) Motywy przez data-theme na ------------------------------------------------------------------ */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=Quicksand:wght@600;700&display=swap'); /* ── ZMIENNE MOTYWOW ────────────────────────────────────────────── */ :root, [data-theme="pink"] { --bg: #180a14; --panel: rgba(42,15,31,.85); --border: #5a1a3a; --accent: #ff6eb4; --pink2: #ffaadd; --pink3: #ffd6ec; --yellow: #ffb347; --red: #ff4f7b; --green: #b5ead7; --text: #ffe0f0; --muted: #c47fa0; --muted2: #7a4060; --code: #110619; --glow: 0 0 10px #ff6eb433; --mono: 'IBM Plex Mono', 'Courier New', monospace; --sans: 'Quicksand', sans-serif; } [data-theme="matrix"] { --bg: #000900; --panel: rgba(0,18,0,.9); --border: #005000; --accent: #00ff41; --pink2: #00cc33; --pink3: #ccffcc; --yellow: #aaff00; --red: #ff4444; --green: #00ff41; --text: #ccffcc; --muted: #306030; --muted2: #204020; --code: #000500; --glow: 0 0 10px #00ff4133; } [data-theme="paper"] { --bg: #f5f0e8; --panel: rgba(236,229,213,.9); --border: #c0b090; --accent: #8b4513; --pink2: #a0522d; --pink3: #d2691e; --yellow: #d4860a; --red: #cc3300; --green: #3a6b3a; --text: #2c1a0a; --muted: #8a7055; --muted2: #b09070; --code: #fff8f0; --glow: 0 0 10px rgba(139,69,19,.2); } [data-theme="cyber"] { --bg: #0a0014; --panel: rgba(16,0,30,.9); --border: #440066; --accent: #ffee00; --pink2: #ff00aa; --pink3: #ff88dd; --yellow: #ffee00; --red: #ff0044; --green: #00ffaa; --text: #eeeeff; --muted: #6644aa; --muted2: #442288; --code: #05000a; --glow: 0 0 12px #ffee0044; } /* ── RESET ──────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--mono); background: var(--bg); background-attachment: fixed; color: var(--text); min-height: 100vh; line-height: 1.5; } /* scanline overlay tylko dla ciemnych motywow */ [data-theme="pink"] body::before, [data-theme="matrix"] body::before, [data-theme="cyber"] body::before { content: ''; pointer-events: none; position: fixed; inset: 0; background: repeating-linear-gradient( 0deg, transparent, transparent 3px, rgba(0,0,0,.05) 3px, rgba(0,0,0,.05) 4px ); z-index: 0; } [data-theme="pink"] body { background: linear-gradient(135deg, #1e0818 0%, #180a14 45%, #0f0520 100%); } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--pink2); text-shadow: var(--glow); } strong { color: var(--pink2); } code { background: var(--code); padding: .08rem .35rem; border-radius: 3px; font-size: .82rem; color: var(--pink2); font-family: var(--mono); } /* ── NAWIGACJA ──────────────────────────────────────────────────── */ nav { background: var(--panel); border-bottom: 1px solid var(--border); padding: .65rem 1.4rem; display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; position: sticky; top: 0; z-index: 100; backdrop-filter: blur(8px); } .logo { font-family: var(--sans); color: var(--accent); font-size: 1.15rem; font-weight: 700; text-shadow: var(--glow); white-space: nowrap; line-height: 1.1; } .logo small { display: block; font-family: var(--mono); font-size: .65rem; color: var(--muted); letter-spacing: 2px; font-weight: 400; } nav a { color: var(--muted); font-size: .8rem; white-space: nowrap; transition: color .2s; } nav a:hover { color: var(--accent); text-shadow: none; } .nav-count { margin-left: auto; font-family: var(--sans); font-weight: 700; font-size: 1rem; color: var(--accent); background: var(--code); border: 1px solid var(--border); border-radius: 20px; padding: .12rem .8rem; text-shadow: var(--glow); white-space: nowrap; } /* ── WYBOR MOTYWU W NAV ─────────────────────────────────────────── */ .theme-picker { display: flex; align-items: center; gap: .35rem; margin-left: .5rem; } .theme-picker label { font-size: .7rem; color: var(--muted2); } .theme-picker select { background: var(--code); color: var(--text); border: 1px solid var(--border); padding: .18rem .4rem; font-family: var(--mono); font-size: .75rem; cursor: pointer; border-radius: 3px; width: auto; } .theme-picker select:focus { outline: 1px solid var(--accent); } /* ── MAIN WRAP ──────────────────────────────────────────────────── */ .wrap { max-width: 860px; margin: 0 auto; padding: 2rem 1rem 5rem; position: relative; z-index: 1; } h1 { color: var(--accent); font-size: 1.3rem; margin-bottom: .9rem; text-shadow: var(--glow); } h2 { color: var(--pink2); font-size: .95rem; margin: 1.7rem 0 .7rem; letter-spacing: .4px; } /* ── ALERTY ─────────────────────────────────────────────────────── */ .alert { padding: .7rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: .85rem; } .alert-ok { background: #1a0820; border: 1px solid var(--accent); color: var(--pink2); } .alert-err { background: #200410; border: 1px solid var(--red); color: var(--red); } .alert-warn { background: #201000; border: 1px solid var(--yellow); color: var(--yellow);} /* ── FORMULARZE ─────────────────────────────────────────────────── */ .form-group { margin-bottom: 1rem; } label.lbl { display: block; color: var(--muted); font-size: .75rem; margin-bottom: .3rem; letter-spacing: .5px; text-transform: uppercase; } .field-hint { color: var(--muted2); font-size: .72rem; margin-top: .28rem; line-height: 1.55; } input[type=text], textarea, select { width: 100%; padding: .55rem .8rem; background: var(--code); border: 1px solid var(--border); color: var(--text); border-radius: 8px; font-family: var(--mono); font-size: .86rem; transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: var(--glow); } textarea { resize: vertical; min-height: 130px; line-height: 1.6; } select option { background: var(--bg); } .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; } /* ── PRZYCISKI ──────────────────────────────────────────────────── */ button, .btn { background: var(--accent); color: #18010c; border: none; padding: .52rem 1.15rem; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: .85rem; font-family: var(--mono); transition: filter .2s, box-shadow .2s; letter-spacing: .4px; display: inline-block; } button:hover, .btn:hover { filter: brightness(1.12); box-shadow: var(--glow); } .btn-ghost { background: transparent; color: var(--accent); border: 1px solid var(--accent); } .btn-ghost:hover { background: rgba(255,110,180,.08); } .btn-sm { padding: .26rem .6rem; font-size: .76rem; } .btn-gen { background: var(--pink2); color: #18010c; margin-bottom: .8rem; } /* ── KARTY PROFILI ──────────────────────────────────────────────── */ .card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.1rem; margin-bottom: .75rem; transition: border-color .25s, box-shadow .25s; } .card:hover { border-color: var(--accent); box-shadow: var(--glow); } .card-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .35rem; margin-bottom: .5rem; } .card-handle { font-family: var(--sans); font-weight: 700; color: var(--accent); font-size: .97rem; text-shadow: var(--glow); } .card-gender { font-family: var(--mono); font-weight: 400; font-size: .78rem; } .card-meta { color: var(--muted2); font-size: .72rem; } .card-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .5rem; } .tag { background: rgba(255,110,180,.1); border: 1px solid var(--border); color: var(--pink2); border-radius: 20px; padding: .1rem .55rem; font-size: .72rem; } .tag-loc { background: rgba(181,234,215,.07); border-color: #3a6050; color: var(--green); } .geekcode-block { background: var(--code); padding: .75rem; border-radius: 6px; font-size: .8rem; white-space: pre-wrap; word-break: break-all; color: var(--pink2); border: 1px solid var(--border); line-height: 1.65; } .badge { display: inline-block; background: rgba(255,110,180,.1); border: 1px solid var(--accent); color: var(--pink2); border-radius: 20px; padding: .1rem .6rem; font-size: .76rem; margin-top: .5rem; } /* ── HERO ───────────────────────────────────────────────────────── */ .hero { text-align: center; padding: 2.5rem 1rem 2rem; } .hero-title { font-family: var(--sans); font-size: 2.4rem; font-weight: 700; color: var(--accent); text-shadow: 0 0 30px #ff6eb455; margin-bottom: .3rem; } .hero-tag { font-size: .78rem; color: var(--muted); letter-spacing: 3px; margin-bottom: 1.5rem; } .hero-pitch { color: var(--text); font-size: .88rem; line-height: 1.85; max-width: 560px; margin: 0 auto 1.8rem; } .hero-btns { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; } .blink { animation: blink 1.1s step-end infinite; } @keyframes blink { 50% { opacity: 0; } } /* ── INFO BOX ───────────────────────────────────────────────────── */ .info-box { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.1rem; margin-bottom: 1rem; } .info-box p { color: var(--muted); font-size: .83rem; line-height: 1.75; } .info-box p+p { margin-top: .6rem; } /* ── COMPARE ────────────────────────────────────────────────────── */ .compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.2rem; } .cbox { background: var(--code); border: 1px solid var(--border); border-radius: 10px; padding: .9rem 1rem; } .cbox h3 { font-size: .8rem; margin-bottom: .55rem; } .cbox.bad h3 { color: var(--red); } .cbox.good h3 { color: var(--green); } .cbox p { font-size: .79rem; color: var(--muted); line-height: 1.65; } .cbox .note { font-size: .72rem; margin-top: .5rem; } .cbox.bad .note { color: var(--red); } .cbox.good .note { color: var(--green); } /* ── SCALE TABLE ────────────────────────────────────────────────── */ .scale-table { width: 100%; border-collapse: collapse; font-size: .8rem; margin-bottom: 1rem; } .scale-table th { color: var(--pink2); text-align: left; padding: .4rem .6rem; border-bottom: 1px solid var(--border); font-size: .74rem; text-transform: uppercase; letter-spacing: .4px; } .scale-table td { padding: .33rem .6rem; color: var(--text); border-bottom: 1px solid var(--code); vertical-align: top; line-height: 1.5; } .scale-table td:first-child { color: var(--accent); white-space: nowrap; width: 90px; font-size: .79rem; } .scale-table tr:last-child td { border-bottom: none; } .scale-table tr:hover td { background: rgba(255,110,180,.04); } /* ── GUIDE GRID ─────────────────────────────────────────────────── */ .guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap: .5rem; margin-bottom: 1rem; } .guide-item { background: var(--code); border: 1px solid var(--border); border-radius: 7px; padding: .55rem .75rem; } .guide-item strong { color: var(--accent); font-size: .82rem; } .guide-item span { color: var(--muted); display: block; font-size: .72rem; margin-top: .1rem; line-height: 1.4; } /* ── FILTRY WYSZUKIWANIA ────────────────────────────────────────── */ .filters { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: .9rem 1rem; margin-bottom: 1.2rem; } .search-main { display: flex; gap: .5rem; margin-bottom: .7rem; } .search-main input { flex: 1; } .filter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap: .6rem; } .filter-label { color: var(--muted2); font-size: .7rem; text-transform: uppercase; letter-spacing: .5px; margin-bottom: .25rem; } .search-tip { font-size: .72rem; color: var(--muted2); margin-top: .6rem; line-height: 1.5; } /* ── COOKIE BANNER ──────────────────────────────────────────────── */ #cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background: var(--panel); border-top: 1px solid var(--border); padding: .8rem 1.4rem; display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; z-index: 999; font-size: .79rem; backdrop-filter: blur(6px); } #cookie-banner p { color: var(--muted); } /* ── POLITYKI ───────────────────────────────────────────────────── */ .policy h2 { color: var(--yellow); margin-top: 1.4rem; } .policy p, .policy li { line-height: 1.78; color: var(--text); margin-bottom: .7rem; font-size: .84rem; } .policy ul { padding-left: 1.4rem; margin-bottom: .75rem; } /* ── FOOTER ─────────────────────────────────────────────────────── */ footer { text-align: center; color: var(--muted2); font-size: .73rem; padding: 1.5rem 1rem; border-top: 1px solid var(--border); margin-top: 2rem; position: relative; z-index: 1; } /* ── RESPONSIVE ─────────────────────────────────────────────────── */ @media (max-width: 600px) { .hero-title { font-size: 1.7rem; } .compare, .row2 { grid-template-columns: 1fr; } .filter-grid { grid-template-columns: 1fr 1fr; } nav { gap: .5rem; } .theme-picker { width: 100%; } }