/* ----------------------------------------------------------------------------- Lovas Máté Photo – egyedi téma A sablon (style.css) fájljait nem írjuk át, csak felülrétegezzük: ez a fájl utolsóként töltődik be a front layoutban, így bármikor kivehető. -------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- 1. Sötét szekciók háttere A sablon eredetileg egyszínű #181818-at használt, ami "steril", digitális feketének hat. Helyette három réteg kerül egymásra, mind CSS-ből (nincs plusz képfájl, nincs plusz hálózati kérés): a) VIGNETTA – a szélek felé sötétedő, középen alig világosabb sugaras átmenet. Ez klasszikus fotós/nagyítós eszköz, és épp a szöveg alatt hagyja a legvilágosabb részt. b) SZEMCSE – nagyon halvány filmszemcse (SVG zaj, ~1 kB, data-URI), ez veszi el a felület digitális laposságát. c) HANGOLÁS – az oldal saját kék akcentusából (#9eb9d7) egy leheletnyi szín a szekció tetején, hogy a sötét ne semleges szürke legyen. A szöveg kontrasztja nem romlik: fehér a #16181b-n kb. 15:1 (WCAG AAA). -------------------------------------------------------------------------- */ .dark-wrapper { background-color: #16181b; /* A sorrend számít: az elöl álló réteg van felül. */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E"), radial-gradient(ellipse 110% 85% at 50% 42%, rgba(255, 255, 255, .055) 0%, rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .38) 100%), linear-gradient(180deg, rgba(158, 185, 215, .05) 0%, rgba(158, 185, 215, 0) 38%); background-repeat: repeat, no-repeat, no-repeat; background-size: 180px 180px, cover, cover; background-position: center center; } /* A lábléc marad a legsötétebb pont (ez tartja meg a szekciók ritmusát), de ugyanazt a szemcsés-vignettás kezelést kapja. */ footer.dark-wrapper { background-color: #131417; } .sub-footer.dark-wrapper { background-color: #101114; } /* A háttérrel megegyező hangolású elválasztó vonalak a fekete helyett. */ .dark-wrapper hr { border-color: rgba(255, 255, 255, .08); } /* ----------------------------------------------------------------------------- 2. Landing oldalak fejléce A menüsáv "transparent absolute", vagyis RÁLEBEG a tartalomra – ott, ahol a fejléc mögött fotó van (album-oldal, kezdőlapi slider), ez szándékos hatás. Kép nélküli, sima sötét fejlécnél viszont a cím becsúszik a logó alá, ezért itt akkora felső térköz kell, ami biztosan elfér a menüsáv alatt. A méret nem találomra van: a menüsáv = 25px + logó + 25px, a logó pedig asztali nézetben legfeljebb 140px (=190px), 991.98px alatt 70-80px (=120-130px). -------------------------------------------------------------------------- */ .landing-hero { padding-top: 220px; padding-bottom: 60px; } @media (max-width: 991.98px) { .landing-hero { padding-top: 150px; padding-bottom: 40px; } } /* ----------------------------------------------------------------------------- 3. Lábléc-navigáció -------------------------------------------------------------------------- */ .footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; max-width: 820px; margin: 0 auto; font-size: 15px; } .footer-nav a { color: rgba(255, 255, 255, .65); } .footer-nav a:hover { color: #9eb9d7; } /* ----------------------------------------------------------------------------- 4. Hiányzó magyar betűk a Montserratban (ő ű Ő Ű) A sablonnal érkezett Montserrat betűkészlet (public/type/montserrat/, a type/icons.css tölti be) LATIN-ONLY részhalmaz: 211-216 glifát tartalmaz, és pont a négy magyar kettős ékezetes betű hiányzik belőle (a hármaspont, U+2026 szintén). Mivel a sablon `font-family: 'Montserrat'`-ot ír TARTALÉK CSALÁD NÉLKÜL, ezeket a karaktereket a böngésző az alapértelmezett SERIF betűvel rajzolta ki - innen a "furán néz ki az ő és az ű" a .lead szövegekben és a Montserratos címekben. (A Muli ezzel szemben a Google Fontsról teljes latin-ext készlettel jön, ott nincs hiba - ezért látszott csak egyes szövegeknél.) A javítás SZÁNDÉKOSAN nem cseréli le a meglévő fájlokat: a mai Montserrat 1-7%-kal szélesebb betűket ad, amitől az egész oldalon elcsúsznának a sortörések. Helyette a hivatalos Montserratból KIZÁRÓLAG ezekre a karakterekre készült ~3 kB-os részhalmaz kerül be, `unicode-range`-dzsel leszűkítve - minden más karakter ugyanabból a fájlból jön, mint eddig. A böngésző az azonos családra/vastagságra deklarált utolsó illeszkedő @font-face-t választja, ezért ennek a fájlnak a icons.css UTÁN kell betöltődnie (a layoutban így is van). Forrás: Google Fonts – Montserrat (SIL Open Font License 1.1). -------------------------------------------------------------------------- */ @font-face { font-family: 'Montserrat'; src: url('../type/montserrat/Montserrat-Light-hu.woff2') format('woff2'), url('../type/montserrat/Montserrat-Light-hu.woff') format('woff'); font-weight: 300; font-style: normal; font-display: swap; unicode-range: U+0150-0151, U+0170-0171, U+2026; } @font-face { font-family: 'Montserrat'; src: url('../type/montserrat/Montserrat-LightItalic-hu.woff2') format('woff2'), url('../type/montserrat/Montserrat-LightItalic-hu.woff') format('woff'); font-weight: 300; font-style: italic; font-display: swap; unicode-range: U+0150-0151, U+0170-0171, U+2026; } @font-face { font-family: 'Montserrat'; src: url('../type/montserrat/Montserrat-Regular-hu.woff2') format('woff2'), url('../type/montserrat/Montserrat-Regular-hu.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; unicode-range: U+0150-0151, U+0170-0171, U+2026; } @font-face { font-family: 'Montserrat'; src: url('../type/montserrat/Montserrat-Italic-hu.woff2') format('woff2'), url('../type/montserrat/Montserrat-Italic-hu.woff') format('woff'); font-weight: normal; font-style: italic; font-display: swap; unicode-range: U+0150-0151, U+0170-0171, U+2026; } @font-face { font-family: 'Montserrat'; src: url('../type/montserrat/Montserrat-Medium-hu.woff2') format('woff2'), url('../type/montserrat/Montserrat-Medium-hu.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0150-0151, U+0170-0171, U+2026; } @font-face { font-family: 'Montserrat'; src: url('../type/montserrat/Montserrat-MediumItalic-hu.woff2') format('woff2'), url('../type/montserrat/Montserrat-MediumItalic-hu.woff') format('woff'); font-weight: 500; font-style: italic; font-display: swap; unicode-range: U+0150-0151, U+0170-0171, U+2026; } @font-face { font-family: 'Montserrat'; src: url('../type/montserrat/Montserrat-SemiBold-hu.woff2') format('woff2'), url('../type/montserrat/Montserrat-SemiBold-hu.woff') format('woff'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0150-0151, U+0170-0171, U+2026; } @font-face { font-family: 'Montserrat'; src: url('../type/montserrat/Montserrat-SemiBoldItalic-hu.woff2') format('woff2'), url('../type/montserrat/Montserrat-SemiBoldItalic-hu.woff') format('woff'); font-weight: 600; font-style: italic; font-display: swap; unicode-range: U+0150-0151, U+0170-0171, U+2026; } @font-face { font-family: 'Montserrat'; src: url('../type/montserrat/Montserrat-Bold-hu.woff2') format('woff2'), url('../type/montserrat/Montserrat-Bold-hu.woff') format('woff'); font-weight: bold; font-style: normal; font-display: swap; unicode-range: U+0150-0151, U+0170-0171, U+2026; } @font-face { font-family: 'Montserrat'; src: url('../type/montserrat/Montserrat-BoldItalic-hu.woff2') format('woff2'), url('../type/montserrat/Montserrat-BoldItalic-hu.woff') format('woff'); font-weight: bold; font-style: italic; font-display: swap; unicode-range: U+0150-0151, U+0170-0171, U+2026; }