/* ========================================================================= Bozóky Pincészet – wireframe / UX prototípus Közös stíluslap az összes wireframe HTML-hez. Két megjelenítési mód: -> vázlat (wireframe, szürkeárnyalatos) -> színes előnézet (irány-design) A módot a fejlécben lévő kapcsoló állítja (localStorage-ban tárolva). ========================================================================= */ /* ------------------------------------------------------------------------- 1. Design tokenek ---------------------------------------------------------------------- */ :root { /* Tipográfia */ --font-display: "Georgia", "Iowan Old Style", "Times New Roman", serif; --font-text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --fs-300: 0.8125rem; /* 13px – címkék, metaadat */ --fs-400: 0.9375rem; /* 15px – kiegészítő szöveg */ --fs-500: 1.0625rem; /* 17px – alap folyószöveg */ --fs-600: 1.375rem; /* 22px – kártyacím */ --fs-700: 1.75rem; /* 28px – H3 */ --fs-800: 2.375rem; /* 38px – H2 */ --fs-900: clamp(2.5rem, 6vw, 4rem); /* H1 / hero */ --lh-tight: 1.15; --lh-normal: 1.6; /* Térköz – 8px alapú skála */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; /* Rács */ --container: 1200px; --container-narrow: 760px; --radius: 4px; --radius-lg: 8px; /* Színek – VÁZLAT mód (alapértelmezett) */ --c-bg: #ffffff; --c-bg-alt: #f4f4f5; --c-bg-deep: #e4e4e7; --c-ink: #18181b; --c-ink-soft: #52525b; --c-ink-faint: #a1a1aa; --c-line: #d4d4d8; --c-line-strong: #71717a; --c-accent: #3f3f46; --c-accent-ink: #ffffff; --c-accent-soft: #e4e4e7; --c-focus: #2563eb; --c-error: #b3261e; --c-success: #1f7a4d; --shadow-sm: none; --shadow-md: none; --ph-style: repeating-linear-gradient(135deg, #e9e9ec 0 10px, #f4f4f5 10px 20px); } /* Színek – SZÍNES ELŐNÉZET mód (javasolt arculati irány) */ .mode-preview { --c-bg: #fdfbf7; --c-bg-alt: #f5efe4; --c-bg-deep: #2a1418; --c-ink: #211a16; --c-ink-soft: #5c5049; --c-ink-faint: #9a8d84; --c-line: #e0d5c4; --c-line-strong: #c0ab8e; --c-accent: #6b2135; /* móri bor-bordó */ --c-accent-ink: #fdfbf7; --c-accent-soft: #f3e7e9; --c-gold: #b08d4f; --shadow-sm: 0 1px 2px rgba(33, 26, 22, .06), 0 2px 8px rgba(33, 26, 22, .04); --shadow-md: 0 4px 12px rgba(33, 26, 22, .08), 0 12px 32px rgba(33, 26, 22, .07); --ph-style: linear-gradient(135deg, #e7dbc8 0%, #d8c7ae 100%); } /* ------------------------------------------------------------------------- 2. Alapok ---------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } body { margin: 0; background: var(--c-bg); color: var(--c-ink); font-family: var(--font-text); font-size: var(--fs-500); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--font-display); line-height: var(--lh-tight); font-weight: 600; margin: 0 0 var(--sp-4); letter-spacing: -0.01em; } h1 { font-size: var(--fs-900); } h2 { font-size: var(--fs-800); } h3 { font-size: var(--fs-700); } h4 { font-size: var(--fs-600); } p { margin: 0 0 var(--sp-4); max-width: 68ch; } a { color: inherit; text-decoration-color: var(--c-line-strong); text-underline-offset: 3px; } a:hover { text-decoration-color: currentColor; } img { max-width: 100%; display: block; } ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.2em; } li { margin-bottom: var(--sp-2); } :focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; border-radius: 2px; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: var(--sp-4); top: -100px; z-index: 999; background: var(--c-accent); color: var(--c-accent-ink); padding: var(--sp-3) var(--sp-5); border-radius: var(--radius); transition: top .15s ease; } .skip-link:focus { top: var(--sp-4); } /* ------------------------------------------------------------------------- 3. Elrendezés ---------------------------------------------------------------------- */ .container { width: min(100% - 2 * var(--sp-5), var(--container)); margin-inline: auto; } .container--narrow { width: min(100% - 2 * var(--sp-5), var(--container-narrow)); margin-inline: auto; } .section { padding-block: var(--sp-9); } .section--tight { padding-block: var(--sp-7); } .section--alt { background: var(--c-bg-alt); } .section--deep { background: var(--c-bg-deep); } .mode-preview .section--deep { color: #f5efe4; } .mode-preview .section--deep h2, .mode-preview .section--deep h3 { color: #fff; } .section__head { margin-bottom: var(--sp-7); max-width: 62ch; } .section__head p { color: var(--c-ink-soft); margin-bottom: 0; } .eyebrow { display: block; font-family: var(--font-text); font-size: var(--fs-300); letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink-soft); margin-bottom: var(--sp-3); } .mode-preview .eyebrow { color: var(--c-accent); } .grid { display: grid; gap: var(--sp-6); } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } .grid--sidebar { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-8); align-items: start; } .grid--split { grid-template-columns: repeat(2, 1fr); gap: var(--sp-8); align-items: center; } .stack > * + * { margin-top: var(--sp-4); } .flow-end { margin-top: var(--sp-6); } @media (max-width: 960px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(2, 1fr); } .grid--sidebar, .grid--split { grid-template-columns: 1fr; gap: var(--sp-6); } } @media (max-width: 620px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } .section { padding-block: var(--sp-7); } } /* ------------------------------------------------------------------------- 4. Kép-helyőrzők (wireframe placeholder) ---------------------------------------------------------------------- */ .ph { position: relative; background: var(--ph-style); border: 1px dashed var(--c-line-strong); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; text-align: center; color: var(--c-ink-soft); font-size: var(--fs-300); font-family: var(--font-text); padding: var(--sp-4); overflow: hidden; } .mode-preview .ph { border-style: solid; border-color: var(--c-line); color: #6b5a48; } .ph::after { content: attr(data-label); display: block; max-width: 90%; line-height: 1.4; } .ph--1x1 { aspect-ratio: 1 / 1; } .ph--4x3 { aspect-ratio: 4 / 3; } .ph--3x2 { aspect-ratio: 3 / 2; } .ph--16x9 { aspect-ratio: 16 / 9; } .ph--21x9 { aspect-ratio: 21 / 9; } .ph--bottle { aspect-ratio: 3 / 4; } .ph--hero { aspect-ratio: 16 / 7; min-height: 340px; } .ph--map { aspect-ratio: 16 / 9; min-height: 280px; } /* ------------------------------------------------------------------------- 5. Gombok ---------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 48px; /* mobil érintési célméret */ padding: var(--sp-3) var(--sp-6); border: 1px solid var(--c-accent); border-radius: var(--radius); background: var(--c-accent); color: var(--c-accent-ink); font: 600 var(--fs-400)/1 var(--font-text); text-decoration: none; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, background .12s ease; } .btn:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn--ghost { background: transparent; color: var(--c-ink); border-color: var(--c-line-strong); } .mode-preview .btn--ghost { color: var(--c-accent); border-color: var(--c-accent); } .btn--ghost:hover { background: var(--c-accent-soft); } .btn--light { background: transparent; color: inherit; border-color: currentColor; } .btn--lg { min-height: 56px; padding: var(--sp-4) var(--sp-7); font-size: var(--fs-500); } .btn--block { width: 100%; } .btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); } .link-more { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-400); font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; } .mode-preview .link-more { color: var(--c-accent); } /* ------------------------------------------------------------------------- 6. Fejléc + vízszintes főmenü ---------------------------------------------------------------------- */ .topbar { background: var(--c-bg-alt); border-bottom: 1px solid var(--c-line); font-size: var(--fs-300); } .mode-preview .topbar { background: var(--c-bg-deep); color: #e8ded0; border-bottom: none; } .topbar__inner { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); min-height: 40px; } .topbar__list { display: flex; gap: var(--sp-5); list-style: none; margin: 0; padding: 0; } .topbar__list li { margin: 0; } .topbar a { text-decoration: none; } .topbar a:hover { text-decoration: underline; } @media (max-width: 760px) { .topbar { display: none; } } .site-header { position: sticky; top: 0; z-index: 100; background: var(--c-bg); border-bottom: 1px solid var(--c-line); } .mode-preview .site-header { box-shadow: var(--shadow-sm); } .site-header__inner { display: flex; align-items: center; gap: var(--sp-4); min-height: 84px; } .logo { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; flex-shrink: 0; } .logo__mark { width: 48px; height: 48px; flex: none; border: 1px dashed var(--c-line-strong); border-radius: 50%; display: grid; place-items: center; font-size: 10px; color: var(--c-ink-soft); text-align: center; line-height: 1.1; } .mode-preview .logo__mark { border: 1px solid var(--c-accent); color: var(--c-accent); } .logo__text { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; line-height: 1.1; } .logo__sub { display: block; font-family: var(--font-text); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink-soft); font-weight: 400; } /* Fő navigáció – a kezdőoldalon és minden aloldalon vízszintesen */ .mainnav { margin-left: auto; align-self: stretch; } .mainnav__list { display: flex; align-items: stretch; height: 100%; gap: var(--sp-1); list-style: none; margin: 0; padding: 0; } .mainnav__list > li { margin: 0; position: relative; display: flex; align-items: center; } .mainnav__link { display: flex; align-items: center; gap: 6px; padding: var(--sp-3) 10px; font-size: var(--fs-400); font-weight: 500; text-decoration: none; border-radius: var(--radius); white-space: nowrap; } .mainnav__link:hover { background: var(--c-bg-alt); } .mainnav__link[aria-current] { font-weight: 700; box-shadow: inset 0 -2px 0 var(--c-accent); } .mainnav__link svg { width: 10px; height: 10px; flex: none; } /* Legördülő almenü */ .mainnav__sub { position: absolute; top: 100%; left: 0; z-index: 20; min-width: 260px; margin: 0; padding: var(--sp-2); list-style: none; background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); display: none; } /* Láthatatlan "híd" a menüpont és a lenyíló között: e nélkül az egér a köztes néhány pixelen elveszti a hovert, és a menü becsukódik. */ .mainnav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* A menüpont a fejléc teljes magasságát kitölti: nagyobb célterület, és a lenyíló pontosan a fejléc alsó vonalánál nyílik. */ .mainnav__list > li > .mainnav__link { height: 100%; } .mainnav__sub li { margin: 0; } .mainnav__sub a { display: block; padding: var(--sp-3); font-size: var(--fs-400); text-decoration: none; border-radius: var(--radius); } .mainnav__sub a:hover { background: var(--c-bg-alt); } .mainnav__sub a span { display: block; font-size: var(--fs-300); color: var(--c-ink-soft); } .has-sub:hover .mainnav__sub, .has-sub:focus-within .mainnav__sub, .mainnav__link[aria-expanded="true"] + .mainnav__sub { display: block; } .mainnav__mobile-cta { display: none; } .header__cta { flex: none; } /* Mobil menü */ .navtoggle { display: none; margin-left: auto; width: 48px; height: 48px; border: 1px solid var(--c-line-strong); border-radius: var(--radius); background: transparent; cursor: pointer; align-items: center; justify-content: center; gap: 4px; flex-direction: column; } .navtoggle span { display: block; width: 20px; height: 2px; background: var(--c-ink); } @media (max-width: 1200px) { .navtoggle { display: flex; } .header__cta { display: none; } .mainnav { position: fixed; inset: 84px 0 0 0; z-index: 90; background: var(--c-bg); border-top: 1px solid var(--c-line); padding: var(--sp-5); overflow-y: auto; display: none; } .mainnav.is-open { display: block; } .mainnav__list { flex-direction: column; align-items: stretch; height: auto; gap: 0; } .mainnav__list > li { display: block; border-bottom: 1px solid var(--c-line); } .mainnav__list > li > .mainnav__link { height: auto; } .mainnav__link { padding: var(--sp-4) var(--sp-2); font-size: var(--fs-600); font-family: var(--font-display); justify-content: space-between; } .mainnav__sub { position: static; display: none; box-shadow: none; border: none; padding: 0 0 var(--sp-3) var(--sp-4); } .mainnav__sub a { padding: var(--sp-3) var(--sp-2); } .has-sub:hover .mainnav__sub { display: none; } .mainnav__link[aria-expanded="true"] + .mainnav__sub { display: block; } .mainnav__mobile-cta { display: block; margin-top: var(--sp-5); } } /* ------------------------------------------------------------------------- 7. Morzsamenü ---------------------------------------------------------------------- */ .breadcrumb { border-bottom: 1px solid var(--c-line); font-size: var(--fs-300); } .breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; margin: 0; padding: var(--sp-3) 0; } .breadcrumb li { margin: 0; display: flex; gap: var(--sp-2); align-items: center; color: var(--c-ink-soft); } .breadcrumb li + li::before { content: "›"; color: var(--c-ink-faint); } .breadcrumb a { text-decoration: none; } .breadcrumb a:hover { text-decoration: underline; } .breadcrumb [aria-current="page"] { color: var(--c-ink); font-weight: 600; } /* ------------------------------------------------------------------------- 8. Hero ---------------------------------------------------------------------- */ .hero { position: relative; border-bottom: 1px solid var(--c-line); } .hero__media { position: relative; } .hero__media .ph { border-radius: 0; border-left: 0; border-right: 0; } .hero__overlay { position: absolute; inset: 0; display: flex; align-items: center; pointer-events: none; } .hero__box { pointer-events: auto; background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: var(--sp-7); max-width: 620px; box-shadow: var(--shadow-md); } .mode-preview .hero__box { background: rgba(253, 251, 247, .95); backdrop-filter: blur(4px); } .hero__box h1 { margin-bottom: var(--sp-4); } .hero__box p { font-size: var(--fs-600); font-family: var(--font-display); color: var(--c-ink-soft); } /* Hero adatsor: kisebb, sans-serif, függőleges vonallal elválasztott tételek. A nagyobb specifikusság kell, különben a .hero__box p szabály felülírja. */ .hero__box .hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); margin: var(--sp-6) 0 0; padding-top: var(--sp-5); border-top: 1px solid var(--c-line); font-family: var(--font-text); font-size: var(--fs-300); line-height: 1.3; letter-spacing: .02em; color: var(--c-ink-soft); } .hero__meta span { display: flex; align-items: center; } .hero__meta span + span::before { content: ""; flex: none; width: 1px; height: 14px; margin-right: var(--sp-4); background: var(--c-line-strong); } @media (max-width: 620px) { .hero__box .hero__meta { flex-direction: column; align-items: flex-start; gap: var(--sp-2); } .hero__meta span + span::before { display: none; } } @media (max-width: 860px) { .hero__overlay { position: static; } .hero__box { max-width: none; border-radius: 0; border-inline: 0; border-top: 0; padding: var(--sp-6) var(--sp-5); box-shadow: none; } .ph--hero { min-height: 240px; aspect-ratio: 4/3; } } /* Aloldal-fejléc */ .pagehead { padding-block: var(--sp-8) var(--sp-6); border-bottom: 1px solid var(--c-line); background: var(--c-bg-alt); } .pagehead p { font-size: var(--fs-600); color: var(--c-ink-soft); font-family: var(--font-display); margin-bottom: 0; } /* ------------------------------------------------------------------------- 9. Kártyák ---------------------------------------------------------------------- */ .card { display: flex; flex-direction: column; background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow .15s ease, transform .15s ease; } .card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .card__media .ph { border: 0; border-radius: 0; border-bottom: 1px dashed var(--c-line-strong); } .mode-preview .card__media .ph { border-bottom: 1px solid var(--c-line); } .card__body { padding: var(--sp-5); display: flex; flex-direction: column; flex: 1; } .card__body h3, .card__body h4 { margin-bottom: var(--sp-2); } .card__body p { font-size: var(--fs-400); color: var(--c-ink-soft); } .card__foot { margin-top: auto; padding-top: var(--sp-4); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); } .card a.stretched::after { content: ""; position: absolute; inset: 0; } .card { position: relative; } /* USP / érték-blokkok */ .usp { display: flex; gap: var(--sp-4); } .usp__icon { width: 44px; height: 44px; flex: none; border: 1px dashed var(--c-line-strong); border-radius: 50%; display: grid; place-items: center; font-size: 10px; color: var(--c-ink-soft); } .mode-preview .usp__icon { border: 1px solid var(--c-accent); color: var(--c-accent); } .usp h3 { font-size: var(--fs-600); margin-bottom: var(--sp-1); } .usp p { font-size: var(--fs-400); color: var(--c-ink-soft); margin-bottom: 0; } /* Bor-kártya */ .wine-card__media { background: var(--c-bg-alt); padding: var(--sp-5); } .wine-card__media .ph { background: transparent; } .wine-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); } .tag { display: inline-block; padding: 3px var(--sp-3); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; border: 1px solid var(--c-line-strong); border-radius: 999px; color: var(--c-ink-soft); } .mode-preview .tag { border-color: var(--c-line); } .tag--award { border-style: double; border-width: 3px; } .mode-preview .tag--award { border: 1px solid var(--c-gold); color: var(--c-gold); } .price { font-family: var(--font-display); font-size: var(--fs-600); font-weight: 600; white-space: nowrap; } .price small { display: block; font-family: var(--font-text); font-size: var(--fs-300); font-weight: 400; color: var(--c-ink-soft); } /* Csomag / programkártya */ .package { border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: var(--sp-6); display: flex; flex-direction: column; background: var(--c-bg); } .package--featured { border-width: 2px; border-color: var(--c-accent); } .package__flag { font-size: var(--fs-300); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-accent); margin-bottom: var(--sp-2); } .package__price { font-family: var(--font-display); font-size: 2rem; font-weight: 600; margin: var(--sp-3) 0 var(--sp-1); } .package__price small { font-family: var(--font-text); font-size: var(--fs-400); font-weight: 400; color: var(--c-ink-soft); } .package ul { list-style: none; padding: 0; margin: var(--sp-4) 0; font-size: var(--fs-400); } .package li { padding-left: 1.5em; position: relative; color: var(--c-ink-soft); } .package li::before { content: "—"; position: absolute; left: 0; color: var(--c-ink-faint); } .package .btn { margin-top: auto; } /* ------------------------------------------------------------------------- 10. Táblázat (árlista, boradatok) ---------------------------------------------------------------------- */ .table-wrap { overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--radius-lg); } table { width: 100%; border-collapse: collapse; font-size: var(--fs-400); } caption { text-align: left; padding: var(--sp-4) var(--sp-5); font-weight: 600; font-family: var(--font-display); font-size: var(--fs-600); border-bottom: 1px solid var(--c-line); } th, td { padding: var(--sp-3) var(--sp-5); text-align: left; border-bottom: 1px solid var(--c-line); vertical-align: top; } thead th { background: var(--c-bg-alt); font-size: var(--fs-300); text-transform: uppercase; letter-spacing: .08em; } tbody tr:last-child td { border-bottom: 0; } td.num, th.num { text-align: right; white-space: nowrap; } /* Táblázatok mobilon: szűkebb belső margó és tördelhető ár-oszlop, hogy a rövid árlisták ne vízszintes görgetéssel jelenjenek meg. */ @media (max-width: 620px) { caption { padding: var(--sp-3) var(--sp-4); } th, td { padding: var(--sp-3) var(--sp-4); } td.num, th.num { white-space: normal; } } .spec-list { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-2) var(--sp-5); margin: 0; font-size: var(--fs-400); } .spec-list dt { color: var(--c-ink-soft); } .spec-list dd { margin: 0; font-weight: 600; } /* ------------------------------------------------------------------------- 11. Szűrő / eszköztár ---------------------------------------------------------------------- */ .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding: var(--sp-4) 0; border-bottom: 1px solid var(--c-line); margin-bottom: var(--sp-6); } .toolbar__label { font-size: var(--fs-300); text-transform: uppercase; letter-spacing: .08em; color: var(--c-ink-soft); margin-right: var(--sp-2); } .chip { min-height: 40px; display: inline-flex; align-items: center; padding: 0 var(--sp-4); border: 1px solid var(--c-line-strong); border-radius: 999px; background: transparent; color: inherit; font: 500 var(--fs-400)/1 var(--font-text); cursor: pointer; } .chip:hover { background: var(--c-bg-alt); } .chip[aria-pressed="true"] { background: var(--c-accent); color: var(--c-accent-ink); border-color: var(--c-accent); } .toolbar__count { margin-left: auto; font-size: var(--fs-400); color: var(--c-ink-soft); } /* ------------------------------------------------------------------------- 12. Űrlap ---------------------------------------------------------------------- */ .form { max-width: 720px; } .fieldset { border: 0; padding: 0; margin: 0 0 var(--sp-7); } .fieldset > legend { font-family: var(--font-display); font-size: var(--fs-700); font-weight: 600; padding: 0; margin-bottom: var(--sp-2); } .fieldset__hint { font-size: var(--fs-400); color: var(--c-ink-soft); margin-bottom: var(--sp-5); } .field { margin-bottom: var(--sp-5); } .field > label, .field > .label { display: block; font-weight: 600; font-size: var(--fs-400); margin-bottom: var(--sp-2); } .field .hint { display: block; font-weight: 400; font-size: var(--fs-300); color: var(--c-ink-soft); margin-top: 2px; } .req { color: var(--c-accent); } .mode-preview .req { color: #a31b3a; } input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="time"], input[type="number"], select, textarea { width: 100%; min-height: 48px; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--c-line-strong); border-radius: var(--radius); background: var(--c-bg); color: var(--c-ink); font: var(--fs-500)/1.4 var(--font-text); } textarea { min-height: 130px; resize: vertical; } input:hover, select:hover, textarea:hover { border-color: var(--c-ink-soft); } .field--error input, .field--error select, .field--error textarea { border-color: var(--c-error); border-width: 2px; } .error-text { display: none; color: var(--c-error); font-size: var(--fs-400); font-weight: 600; margin-top: var(--sp-2); } .field--error .error-text { display: block; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); } @media (max-width: 620px) { .form-row { grid-template-columns: 1fr; gap: 0; } } .choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--sp-3); } .choice { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-4); border: 1px solid var(--c-line-strong); border-radius: var(--radius); cursor: pointer; font-size: var(--fs-400); } .choice:hover { background: var(--c-bg-alt); } .choice input { margin: 2px 0 0; width: 20px; height: 20px; flex: none; accent-color: var(--c-accent); } .choice strong { display: block; } .choice span { color: var(--c-ink-soft); font-size: var(--fs-300); } .choice:has(input:checked) { border-color: var(--c-accent); border-width: 2px; padding: calc(var(--sp-4) - 1px); } .form-summary { position: sticky; top: 104px; border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: var(--sp-5); background: var(--c-bg-alt); font-size: var(--fs-400); } .form-summary h3 { font-size: var(--fs-600); } .form-summary dl { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2) var(--sp-4); margin: 0 0 var(--sp-4); } .form-summary dt { color: var(--c-ink-soft); } .form-summary dd { margin: 0; font-weight: 600; text-align: right; } .form-summary__total { border-top: 1px solid var(--c-line-strong); padding-top: var(--sp-3); font-size: var(--fs-600); font-family: var(--font-display); display: flex; justify-content: space-between; } .alert { border: 1px solid var(--c-line-strong); border-left-width: 4px; border-radius: var(--radius); padding: var(--sp-4) var(--sp-5); background: var(--c-bg-alt); font-size: var(--fs-400); margin-bottom: var(--sp-5); } .alert h2, .alert h3 { font-size: var(--fs-600); margin-bottom: var(--sp-2); } .alert p:last-child { margin-bottom: 0; } .alert--error { border-left-color: var(--c-error); } .alert--success { border-left-color: var(--c-success); } /* ------------------------------------------------------------------------- 13. Galéria ---------------------------------------------------------------------- */ .gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); } .gallery__item { border: 0; padding: 0; background: none; cursor: pointer; } .gallery__item .ph { transition: opacity .15s ease; } .gallery__item:hover .ph { opacity: .82; } .gallery__item--wide { grid-column: span 2; } @media (max-width: 960px) { .gallery { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 620px) { .gallery { grid-template-columns: repeat(2, 1fr); } .gallery__item--wide { grid-column: span 2; } } .lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.86); display: none; align-items: center; justify-content: center; padding: var(--sp-5); } .lightbox[open], .lightbox.is-open { display: flex; } .lightbox__inner { width: min(100%, 900px); } .lightbox__inner .ph { background: #2b2b2b; border-color: #555; color: #ddd; } .lightbox__bar { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); color: #fff; margin-top: var(--sp-3); font-size: var(--fs-400); } .lightbox__bar button { background: transparent; border: 1px solid #888; color: #fff; min-height: 44px; padding: 0 var(--sp-4); border-radius: var(--radius); cursor: pointer; } /* ------------------------------------------------------------------------- 14. Hír / cikk ---------------------------------------------------------------------- */ .article { font-size: 1.125rem; } .article p { max-width: 68ch; } .article h2 { font-size: var(--fs-700); margin-top: var(--sp-7); } .article blockquote { margin: var(--sp-6) 0; padding-left: var(--sp-5); border-left: 3px solid var(--c-accent); font-family: var(--font-display); font-size: var(--fs-600); font-style: italic; color: var(--c-ink-soft); } .article figure { margin: var(--sp-6) 0; } .article figcaption { font-size: var(--fs-300); color: var(--c-ink-soft); margin-top: var(--sp-2); } .meta { display: flex; flex-wrap: wrap; gap: var(--sp-4); font-size: var(--fs-300); color: var(--c-ink-soft); margin-bottom: var(--sp-5); } .aside-box { border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: var(--sp-5); background: var(--c-bg-alt); font-size: var(--fs-400); } .aside-box h3 { font-size: var(--fs-600); } .aside-box ul { list-style: none; padding: 0; margin: 0; } .aside-box li + li { border-top: 1px solid var(--c-line); padding-top: var(--sp-3); margin-top: var(--sp-3); } .aside-box a { text-decoration: none; font-weight: 600; } .aside-box a:hover { text-decoration: underline; } .sticky { position: sticky; top: 104px; } /* Idővonal (család története) */ .timeline { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--c-line); } .timeline li { position: relative; padding: 0 0 var(--sp-6) var(--sp-6); margin: 0; } .timeline li::before { content: ""; position: absolute; left: -7px; top: 8px; width: 12px; height: 12px; border-radius: 50%; background: var(--c-bg); border: 2px solid var(--c-accent); } .timeline h3 { font-size: var(--fs-600); margin-bottom: var(--sp-1); } .timeline time { font-size: var(--fs-300); letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-soft); display: block; margin-bottom: var(--sp-1); } .timeline p { font-size: var(--fs-400); color: var(--c-ink-soft); margin: 0; } /* Akkordeon (GYIK) */ .accordion { border-top: 1px solid var(--c-line); } .accordion__item { border-bottom: 1px solid var(--c-line); } .accordion__btn { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); padding: var(--sp-5) 0; background: none; border: 0; cursor: pointer; font: 600 var(--fs-600)/1.3 var(--font-display); color: inherit; text-align: left; } .accordion__btn::after { content: "+"; font-size: 1.5rem; font-family: var(--font-text); color: var(--c-ink-soft); flex: none; } .accordion__btn[aria-expanded="true"]::after { content: "–"; } .accordion__panel { padding-bottom: var(--sp-5); font-size: var(--fs-400); color: var(--c-ink-soft); } .accordion__panel[hidden] { display: none; } /* CTA sáv */ .cta-band { background: var(--c-bg-deep); padding-block: var(--sp-8); } .mode-preview .cta-band { color: #f5efe4; } .mode-preview .cta-band h2 { color: #fff; } .cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); flex-wrap: wrap; } .cta-band p { margin-bottom: 0; color: inherit; opacity: .85; } /* ------------------------------------------------------------------------- 15. Lábléc ---------------------------------------------------------------------- */ .site-footer { background: var(--c-bg-alt); border-top: 1px solid var(--c-line); padding-block: var(--sp-8) var(--sp-5); font-size: var(--fs-400); } .mode-preview .site-footer { background: var(--c-bg-deep); color: #d9cec0; border-top: none; } .mode-preview .site-footer h3 { color: #fff; } .mode-preview .site-footer a { color: #e8ded0; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--sp-6); } .footer-grid h3 { font-size: var(--fs-400); font-family: var(--font-text); text-transform: uppercase; letter-spacing: .1em; margin-bottom: var(--sp-4); } .footer-grid ul { list-style: none; padding: 0; margin: 0; } .footer-grid li { margin-bottom: var(--sp-2); } .footer-grid a { text-decoration: none; } .footer-grid a:hover { text-decoration: underline; } .footer-bottom { margin-top: var(--sp-7); padding-top: var(--sp-4); border-top: 1px solid var(--c-line); display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between; font-size: var(--fs-300); color: var(--c-ink-soft); } .mode-preview .footer-bottom { border-top-color: rgba(255,255,255,.15); color: #b6a795; } .footer-bottom ul { display: flex; gap: var(--sp-4); list-style: none; margin: 0; padding: 0; } @media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } } /* 18+ / felelős fogyasztás */ .age-note { display: flex; gap: var(--sp-3); align-items: center; font-size: var(--fs-300); color: var(--c-ink-soft); border: 1px solid var(--c-line); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); } .age-note b { flex: none; border: 1px solid currentColor; border-radius: 50%; width: 34px; height: 34px; display: grid; place-items: center; } /* ------------------------------------------------------------------------- 16. Wireframe-eszköztár és annotációk (csak a prototípusban!) ---------------------------------------------------------------------- */ .wf-bar { /* Elrejtve, hogy az ügyfélnek szánt nézetben ne zavarjon. Visszakapcsolás: az alábbi "none" helyére írjon "flex"-et. */ display: none; position: fixed; right: var(--sp-4); bottom: var(--sp-4); z-index: 500; gap: var(--sp-2); align-items: center; background: #18181b; color: #fff; padding: var(--sp-2); border-radius: 999px; box-shadow: 0 6px 24px rgba(0,0,0,.28); font: 500 var(--fs-300)/1 var(--font-text); } .wf-bar button { background: transparent; border: 1px solid #52525b; color: #fff; border-radius: 999px; padding: 10px var(--sp-4); cursor: pointer; font: inherit; min-height: 40px; } .wf-bar button[aria-pressed="true"] { background: #fff; color: #18181b; border-color: #fff; } @media print { .wf-bar { display: none; } } .note { position: relative; border: 1px dashed #b45309; background: #fffbeb; color: #7c2d12; border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); font: 500 var(--fs-300)/1.5 var(--font-text); margin: var(--sp-3) 0; display: none; } .note::before { content: "UX megjegyzés — "; font-weight: 700; } .show-notes .note { display: block; } .note code { background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 3px; } /* Blokk-jelölés vázlat módban: melyik sáv mit tartalmaz */ .show-notes [data-block]::before { content: attr(data-block); position: absolute; top: 0; left: 0; z-index: 5; background: #b45309; color: #fff; font: 700 10px/1 var(--font-text); letter-spacing: .08em; text-transform: uppercase; padding: 5px 8px; border-bottom-right-radius: var(--radius); } [data-block] { position: relative; } @media print { .site-header { position: static; } .note { display: block; } } /* Mobil érintési célméret: a lábléc- és almenüpontok legalább 32 px magasak legyenek (WCAG 2.2 · 2.5.8 Target Size Minimum). */ @media (max-width: 760px) { .footer-grid a, .footer-bottom a, .breadcrumb a { display: inline-block; padding-block: 7px; } .footer-grid li { margin-bottom: 0; } }