/* ============================================================ THEME-42BIT.CSS — "42bit style" sötét, sárga accent, sansserif Aktív: ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); [data-theme="42bit"] { /* Színek — fekete háttér, sárga "42BIT" brand accent */ --color-bg: #000; --color-bg-soft: #0a0a0a; --color-text: #f4f4f4; --color-text-muted: rgba(244, 244, 244, 0.6); --color-text-faint: rgba(244, 244, 244, 0.35); --color-border: rgba(244, 244, 244, 0.1); /* Brand sárga — a 42BIT karika színe */ --color-accent: #fcb900; --color-accent-soft: rgba(252, 185, 0, 0.14); /* Tipográfia — Inter (sansserif), modern és karakteres */ --font-display: 'Inter', system-ui, -apple-system, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; /* A karakteres uppercase + tight tracking a 42bit "industrial" feel-je */ --tracking-display: 0.16em; --tracking-nav: 0.2em; --tracking-tight: 0.05em; /* Grid: itt is 0 gap, hogy a kártyák egymáshoz érjenek */ --grid-gap: 0; } /* ---------- BRAND ÁTRENDEZÉS ---------- A header közepén a karika logó VAN a név fölött (kicsi, max 2.5rem), alatta jön a név sansserif-ben, alatta a tagline. ---------------------------------------------------- */ [data-theme="42bit"] .brand { position: relative; padding-top: 0; } [data-theme="42bit"] .brand-name { font-family: var(--font-display); font-weight: 600; font-size: clamp(0.875rem, 0.78rem + 0.4vw, 1rem); letter-spacing: var(--tracking-display); } [data-theme="42bit"] .brand-tagline { font-style: normal; font-weight: 400; font-size: 0.625rem; letter-spacing: 0.22em; color: var(--color-accent); opacity: 0.85; } /* ---------- NAV ---------- */ [data-theme="42bit"] .nav-primary a, [data-theme="42bit"] .nav-overlay a { font-family: var(--font-display); font-weight: 500; font-size: 0.6875rem; letter-spacing: var(--tracking-nav); } [data-theme="42bit"] .nav-primary a { position: relative; } /* Sárga aláhúzás a hover/aktív linknek — markáns brand-marker */ [data-theme="42bit"] .nav-primary a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--t-med) var(--ease-out); } [data-theme="42bit"] .nav-primary a:hover::after, [data-theme="42bit"] .nav-primary a[aria-current="page"]::after { transform: scaleX(1); } [data-theme="42bit"] .nav-primary a:hover, [data-theme="42bit"] .nav-primary a[aria-current="page"] { color: var(--color-text); } /* ---------- UTILITY ICONS ---------- */ [data-theme="42bit"] .nav-utility a:hover { color: var(--color-accent); } /* ---------- PROJECT CARD ---------- */ [data-theme="42bit"] .project-card__title { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.05em; font-size: var(--fs-h2); } [data-theme="42bit"] .project-card__category { color: var(--color-accent); font-weight: 500; letter-spacing: 0.18em; opacity: 0.9; } /* Az overlay markánsabb: erősebb fekete + sárga vonal alulra */ [data-theme="42bit"] .project-card__overlay { background: linear-gradient( 180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0.85) 100% ); } [data-theme="42bit"] .project-card::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 0; height: 2px; background: var(--color-accent); transform: translateX(-50%); transition: width var(--t-med) var(--ease-out); pointer-events: none; z-index: 2; } [data-theme="42bit"] .project-card:hover::after, [data-theme="42bit"] .project-card:focus-visible::after { width: 100%; } /* ---------- FOOTER ---------- */ [data-theme="42bit"] .site-footer { font-family: var(--font-display); letter-spacing: 0.18em; } /* ---------- BACK TO TOP — sárga karika ---------- */ [data-theme="42bit"] .back-to-top { background: var(--color-accent-soft); border: 1px solid var(--color-accent); color: var(--color-accent); } [data-theme="42bit"] .back-to-top:hover { background: var(--color-accent); color: #000; } /* ---------- LIGHTBOX ---------- */ [data-theme="42bit"] .lightbox__title { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.04em; } [data-theme="42bit"] .lightbox__category { color: var(--color-accent); font-style: normal; font-weight: 500; } [data-theme="42bit"] .lightbox__close:hover { background: var(--color-accent); color: #000; } /* ---------- CONTACT OLDAL ---------- */ [data-theme="42bit"] .contact__heading { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; font-size: clamp(1rem, 0.9rem + 0.6vw, 1.25rem); } [data-theme="42bit"] .contact__bio { font-family: var(--font-body); } [data-theme="42bit"] .contact__email { color: var(--color-accent); border-bottom: 1px solid transparent; font-weight: 500; } [data-theme="42bit"] .contact__email:hover { border-bottom-color: var(--color-accent); color: #fff; } /* ---------- VIGNETTE — finom, kevésbé erős mint Gevirtznél ---------- */ [data-theme="42bit"] body::before { content: ''; position: fixed; inset: 0; background: radial-gradient( ellipse at top, rgba(252, 185, 0, 0.04) 0%, transparent 50% ); pointer-events: none; z-index: 1; } [data-theme="42bit"] .site-header, [data-theme="42bit"] .page-main, [data-theme="42bit"] .site-footer { position: relative; z-index: 2; }