/* ========================================================================== Mailhook front template 2026 – „modern postai” arculat Papír alap, tinta szöveg, narancs + légiposta-kék, bélyeg / bélyegző / boríték. A Bootstrap 5 (CDN) marad az alap a modul-oldalak és a modal miatt; minden saját osztály mh- előtagú, hogy ne ütközzön vele. Tartalom: 1. tokenek 2. alap 3. közös elemek 4. fejléc 5. hero 6. előnyök 7. funkciók 8. telefon 9. vélemények 10. csomagok 10b. GYIK 11. blog + rólunk 12. kapcsolat + űrlap 13. lábléc 14. modal, süti-sáv 15. belső (modul-) oldalak 16. reszponzív ========================================================================== */ /* 1. Tokenek ---------------------------------------------------------------- */ :root { --mh-paper: #F6F1E7; --mh-paper-2: #ECE3D2; --mh-card: #FFFCF6; --mh-ink: #0E2238; --mh-ink-2: #43546A; --mh-ink-soft: #1B3450; /* 2026-09: óvatosan pasztellesebb narancs (#FF5A1F → #EC6E41, HSL 16° 82% 59%). Fehér felirat rajta 3.06:1 (csak félkövér gombfeliratra), tinta szöveg 5.3:1. */ --mh-orange: #EC6E41; --mh-orange-hover: #D65B2E; /* sötétebb: fehér feliratú gombok hover-állapota (3.9:1) */ --mh-orange-deep: #B4461C; /* narancs szöveg világos alapon (4.8:1 a papíron) */ --mh-on-orange: #FFFFFF; /* narancs alapú elemek felirata (gomb, címke, lépésszám, telefonos sáv); a hero kiemelt szava sötét marad */ --mh-blue: #0F5BC2; --mh-on-ink-muted: #A9B6C6; --mh-on-blue-muted: #D6E4FA; --mh-rule: rgba(14, 34, 56, 0.16); --mh-rule-strong: rgba(14, 34, 56, 0.28); --mh-error: #B3261E; --mh-success: #1D6B3A; --mh-font-display: 'Bricolage Grotesque', 'Arial Narrow', 'Helvetica Neue', sans-serif; --mh-font-body: 'Instrument Sans', 'Segoe UI', system-ui, -apple-system, sans-serif; --mh-font-mono: 'IBM Plex Mono', 'Cascadia Mono', Consolas, monospace; --mh-pad: clamp(20px, 5vw, 72px); --mh-max: 1296px; --mh-section: clamp(56px, 7vw, 88px); --mh-radius: 6px; --mh-header-h: 88px; --mh-stripes: repeating-linear-gradient(135deg, var(--mh-orange) 0 18px, var(--mh-card) 18px 30px, var(--mh-blue) 30px 48px, var(--mh-card) 48px 60px); } /* 2. Alap ------------------------------------------------------------------- */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body.mh-body { margin: 0; height: auto; /* a régi téma html,body{height:100%}-a megtörné a sticky fejlécet */ min-height: 100%; background: var(--mh-paper); color: var(--mh-ink); font-family: var(--mh-font-body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .mh-body [id] { scroll-margin-top: calc(var(--mh-header-h) + 16px); } .mh-body ::selection { background: var(--mh-orange); color: var(--mh-on-orange); } .mh-body :focus-visible { outline: 2.5px solid var(--mh-blue); outline-offset: 3px; border-radius: 2px; } .mh-on-dark :focus-visible, .mh-footer :focus-visible { outline-color: var(--mh-orange); } .mh-on-orange :focus-visible { outline-color: var(--mh-ink); } .mh-wrap { width: 100%; max-width: calc(var(--mh-max) + 2 * var(--mh-pad)); margin-inline: auto; padding-inline: var(--mh-pad); } .mh-section { padding-block: var(--mh-section); } .mh-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .mh-mark, .mh-icon { display: block; flex-shrink: 0; } /* 3. Közös elemek ----------------------------------------------------------- */ .mh-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--mh-font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mh-orange-deep); } .mh-eyebrow::before { content: ""; width: 10px; height: 10px; flex-shrink: 0; background: var(--mh-orange); } .mh-eyebrow--muted { color: var(--mh-ink-2); } .mh-eyebrow--ink { color: var(--mh-ink); } .mh-eyebrow--on-ink { color: var(--mh-on-ink-muted); } .mh-eyebrow--on-blue { color: var(--mh-on-blue-muted); } .mh-eyebrow--on-blue::before { background: var(--mh-paper); } .mh-eyebrow--on-orange { color: var(--mh-on-orange); } .mh-eyebrow--on-orange::before { background: var(--mh-on-orange); } .mh-h2 { margin: 18px 0 0; font-family: var(--mh-font-display); font-weight: 800; font-size: clamp(32px, 4vw, 52px); line-height: 1.06; letter-spacing: -0.03em; font-stretch: 88%; color: inherit; text-wrap: balance; } .mh-h2--xl { font-size: clamp(34px, 4.4vw, 56px); } .mh-h2--md { font-size: clamp(30px, 3.4vw, 44px); } .mh-lead { margin: 0; font-size: clamp(17px, 1.5vw, 19px); line-height: 1.5; color: var(--mh-ink-2); } .mh-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; } .mh-head .mh-lead { max-width: 460px; margin-bottom: 6px; } .mh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 0 22px; border: 1.5px solid var(--mh-ink); border-radius: var(--mh-radius); background: transparent; color: var(--mh-ink); font-family: var(--mh-font-body); font-size: 16px; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color .15s ease, color .15s ease, transform .15s ease; } .mh-btn:hover { background: var(--mh-ink); color: var(--mh-paper); text-decoration: none; } .mh-btn:active { transform: translateY(1px); } .mh-btn--primary { background: var(--mh-orange); border-color: var(--mh-orange); color: var(--mh-on-orange); } .mh-btn--primary:hover { background: var(--mh-orange-hover); border-color: var(--mh-orange-hover); color: var(--mh-on-orange); } .mh-btn--ink { background: var(--mh-ink); color: var(--mh-paper); } .mh-btn--ink:hover { background: var(--mh-ink-soft); color: var(--mh-paper); } .mh-btn--paper { background: var(--mh-paper); color: var(--mh-ink); border-color: var(--mh-paper); } .mh-btn--paper:hover { background: var(--mh-card); color: var(--mh-ink); } .mh-btn--lg { min-height: 58px; padding: 0 28px; font-size: 17px; } .mh-btn--block { display: flex; width: 100%; } .mh-btn--noborder { border-color: transparent; } /* Nagybetűs fordítási kulcsok (MEGRENDELEM…) mondatkezdő írásmóddal. */ .mh-sentence { display: inline-block; text-transform: lowercase; } .mh-sentence::first-letter { text-transform: uppercase; } .mh-textlink { color: var(--mh-ink); font-weight: 600; text-underline-offset: 5px; } .mh-textlink:hover { color: var(--mh-orange-deep); } .mh-stripe { height: 16px; background: var(--mh-stripes); } /* 4. Fejléc ----------------------------------------------------------------- */ .mh-topbar { background: var(--mh-ink); color: var(--mh-paper); font-family: var(--mh-font-mono); font-size: 12.5px; letter-spacing: 0.04em; } .mh-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; } .mh-topbar__phone { display: flex; align-items: center; gap: 10px; } .mh-topbar a { color: var(--mh-paper); font-weight: 500; text-decoration: none; white-space: nowrap; } .mh-topbar a:hover { color: var(--mh-orange); } .mh-topbar__hours { color: var(--mh-on-ink-muted); white-space: nowrap; } .mh-header { position: sticky; top: 0; z-index: 1030; background: var(--mh-paper); border-bottom: 1px solid var(--mh-rule); background-image: none; min-height: 0; } .mh-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--mh-header-h); } .mh-logo { display: inline-flex; align-items: center; gap: 12px; color: var(--mh-ink); text-decoration: none; } a.mh-logo:hover { color: var(--mh-ink); text-decoration: none; } .mh-logo__word { font-family: var(--mh-font-display); font-weight: 800; font-size: 30px; letter-spacing: -0.045em; line-height: 1; } .mh-logo--footer .mh-logo__word { font-size: 32px; color: var(--mh-paper); } .mh-nav { display: flex; align-items: center; gap: 28px; } .mh-nav__list { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 34px); margin: 0; padding: 0; list-style: none; } .mh-nav__link { display: inline-block; padding: 12px 0; color: var(--mh-ink); font-size: 15.5px; font-weight: 500; text-decoration: none; border-bottom: 2px solid transparent; } .mh-nav__link:hover { color: var(--mh-ink); border-bottom-color: var(--mh-orange); text-decoration: none; } .mh-header__actions { display: flex; align-items: center; gap: 12px; } .mh-header__actions .mh-btn { min-height: 46px; padding: 0 20px; font-size: 15.5px; } .mh-burger { display: none; width: 46px; height: 46px; padding: 0; align-items: center; justify-content: center; border: 1.5px solid var(--mh-ink); border-radius: var(--mh-radius); background: transparent; color: var(--mh-ink); cursor: pointer; } .mh-burger .mh-icon--close { display: none; } .mh-nav-open .mh-burger .mh-icon--menu { display: none; } .mh-nav-open .mh-burger .mh-icon--close { display: block; } /* 5. Hero ------------------------------------------------------------------- */ .mh-hero { padding-block: 40px var(--mh-section); } .mh-hero__inner { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); align-items: center; gap: 40px; } .mh-hero__title { margin: 26px 0 0; font-family: var(--mh-font-display); font-weight: 800; font-size: clamp(44px, 6vw, 86px); line-height: 1; letter-spacing: -0.035em; font-stretch: 82%; color: var(--mh-ink); } .mh-footnote a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } .mh-hero__fn { color: inherit; font-weight: 700; text-decoration: none; } .mh-hero__fn:hover { text-decoration: underline; } .mh-hero__mark { display: inline-block; margin: 0.09em 0 0 -0.07em; padding: 0 0.18em 0.09em; background: var(--mh-orange); border-radius: 4px; transform: rotate(-1.5deg); } .mh-hero__sub { margin: 28px 0 0; max-width: 600px; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--mh-ink-2); text-wrap: pretty; } .mh-hero__cta { margin-top: 36px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 28px; } .mh-ticks { margin: 28px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 15px; font-weight: 500; color: var(--mh-ink-2); } .mh-ticks li { display: inline-flex; align-items: center; gap: 8px; } .mh-ticks .mh-icon { color: var(--mh-orange-deep); } /* A boríték fix 600×500-as rajz, nagyítással illesztjük a dobozába. A --mh-env-s töréspontonként az a méretarány, amivel a rajz az oszlopába biztosan belefér (asztali görgetősávval is, a tartomány legkeskenyebb szélességén); a mailhook2026.js a doboz tényleges szélességéből (--mh-env-k) ennél csak kisebbet állíthat, ha valahol mégis szűkebb a hely. A régi, konténer + tan(atan2()) megoldás iOS-en nem működött: a rajz teljes méretben kilógott, és az egész oldal kicsinyítve jelent meg. */ .mh-hero { overflow-x: clip; } .mh-hero__art { --mh-env-s: 0.97; justify-self: end; width: 100%; max-width: calc(600px * var(--mh-env-s)); aspect-ratio: 6 / 5; min-height: 0; } .mh-env { position: relative; width: 600px; height: 500px; transform: scale(var(--mh-env-k, var(--mh-env-s))); transform-origin: top left; } @media (max-width: 1439px) { .mh-hero__art { --mh-env-s: 0.94; } } @media (max-width: 1399px) { .mh-hero__art { --mh-env-s: 0.91; } } @media (max-width: 1359px) { .mh-hero__art { --mh-env-s: 0.88; } } @media (max-width: 1319px) { .mh-hero__art { --mh-env-s: 0.86; } } @media (max-width: 1279px) { .mh-hero__art { --mh-env-s: 0.83; } } @media (max-width: 1239px) { .mh-hero__art { --mh-env-s: 0.8; } } @media (max-width: 1199px) { .mh-hero__art { --mh-env-s: 0.76; } } @media (max-width: 1149px) { .mh-hero__art { --mh-env-s: 0.73; } } /* 1099 px alatt a rajz a szöveg alá kerül, a teljes tartalomszélességbe. */ @media (max-width: 1099px) { .mh-hero__art { --mh-env-s: 0.95; } } @media (max-width: 699px) { .mh-hero__art { --mh-env-s: 0.8; } } @media (max-width: 559px) { .mh-hero__art { --mh-env-s: 0.65; } } @media (max-width: 439px) { .mh-hero__art { --mh-env-s: 0.55; } } @media (max-width: 374px) { .mh-hero__art { --mh-env-s: 0.53; } } @media (max-width: 359px) { .mh-hero__art { --mh-env-s: 0.46; } } .mh-env__back { position: absolute; left: 118px; top: 26px; width: 450px; height: 330px; background: var(--mh-blue); border-radius: 6px; transform: rotate(6deg); } .mh-env__front { position: absolute; left: 14px; top: 62px; width: 560px; height: 392px; padding: 14px; border-radius: 6px; background: var(--mh-stripes); transform: rotate(-3deg); box-shadow: 0 30px 50px -30px rgba(14, 34, 56, 0.6); } .mh-env__paper { position: relative; height: 100%; background: var(--mh-card); border-radius: 2px; } .mh-env__tag { font-family: var(--mh-font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mh-ink-2); } .mh-env__sender { position: absolute; left: 30px; top: 26px; display: flex; flex-direction: column; gap: 3px; } .mh-env__sender strong { font-size: 16px; font-weight: 600; } .mh-env__sender span:last-child { font-family: var(--mh-font-mono); font-size: 12.5px; color: var(--mh-ink-2); } .mh-env__stamp { position: absolute; right: 30px; top: 26px; } .mh-env__postmark { position: absolute; left: 176px; top: 82px; transform: rotate(-8deg); } .mh-env__address { position: absolute; left: 30px; top: 212px; width: 340px; display: flex; flex-direction: column; } .mh-env__to { margin-top: 8px; font-family: var(--mh-font-display); font-weight: 800; font-size: 32px; line-height: 1.05; letter-spacing: -0.025em; font-stretch: 88%; } .mh-env__line { width: 270px; margin-top: 8px; padding-bottom: 6px; border-bottom: 1.5px dotted var(--mh-ink-2); font-size: 15px; } .mh-env__line:first-of-type { margin-top: 12px; } .mh-env__label { position: absolute; right: 30px; bottom: 26px; padding: 7px 12px; background: var(--mh-blue); color: var(--mh-card); border-radius: 3px; font-family: var(--mh-font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; } /* 6. Előnyök (tinta) -------------------------------------------------------- */ .mh-benefits { background: var(--mh-ink); color: var(--mh-paper); } .mh-benefits__grid { margin-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; } .mh-benefit { border-top: 1.5px solid rgba(246, 241, 231, 0.35); padding-top: 28px; } .mh-benefit__fig { height: 116px; display: flex; align-items: flex-end; gap: 14px; } .mh-benefit__num { font-family: var(--mh-font-display); font-weight: 800; font-size: 132px; line-height: 0.82; letter-spacing: -0.04em; font-stretch: 82%; color: var(--mh-orange); } .mh-benefit__inf { display: block; width: 168px; height: 112px; margin-bottom: -6px; } .mh-benefit__unit { padding-bottom: 4px; font-family: var(--mh-font-display); font-weight: 700; font-size: 30px; line-height: 1; letter-spacing: -0.02em; } .mh-benefit h3 { margin: 22px 0 0; font-family: var(--mh-font-display); font-weight: 700; font-size: 24px; line-height: 1.25; letter-spacing: -0.015em; color: var(--mh-paper); } .mh-benefit p { margin: 12px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--mh-on-ink-muted); text-wrap: pretty; } /* 7. Funkciók --------------------------------------------------------------- */ .mh-fgrid { margin-top: 52px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; align-items: start; } .mh-fgroup__head { margin: 0; border-bottom: 1.5px solid var(--mh-ink); } .mh-fgroup__bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; width: 100%; min-height: 78px; padding: 0 0 14px; color: var(--mh-ink); } .mh-fgroup__name { font-family: var(--mh-font-display); font-weight: 700; font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; } .mh-fgroup__count { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 4px; font-size: 14px; font-weight: 500; color: var(--mh-ink-2); white-space: nowrap; } .mh-fitem { padding: 18px 0; border-bottom: 1px solid var(--mh-rule); } .mh-fitem h4 { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-family: var(--mh-font-body); font-size: 16.5px; font-weight: 700; line-height: 1.3; color: var(--mh-ink); } .mh-fitem h4 .mh-icon { flex-shrink: 0; margin-top: 1px; color: var(--mh-orange); } .mh-fitem p { margin: 6px 0 0; padding-left: 26px; font-size: 15px; line-height: 1.55; color: var(--mh-ink-2); } /* oszloponként a két legerősebb pont kiemelve; a többi a gombra nyílik (JS nélkül mind látszik) */ .mh-fitem--top h4 { font-size: 17.5px; } .mh-fitem--top h4 .mh-icon { margin-top: 2px; } .mh-js .mh-features:not(.is-expanded) .mh-fitem--more { display: none; } .mh-features__more { display: none; margin-top: 40px; justify-content: center; } .mh-js .mh-features__more { display: flex; } .mh-features__label-open { display: none; } .mh-features.is-expanded .mh-features__label-open { display: inline; } .mh-features.is-expanded .mh-features__label-closed { display: none; } .mh-features__toggle .mh-icon { transition: transform .2s ease; } .mh-features.is-expanded .mh-features__toggle .mh-icon { transform: rotate(45deg); } @media (prefers-reduced-motion: reduce) { .mh-features__toggle .mh-icon { transition: none; } } /* 8. Telefonos támogatás (narancs) ------------------------------------------ */ /* Narancs alapon tinta szöveg: a folyó szövegnél ez adja meg a 4.5:1-et (fehérrel 3:1 lenne). */ .mh-phone { background: var(--mh-orange); color: var(--mh-on-orange); padding-block: clamp(56px, 6vw, 72px); } .mh-phone .mh-h2 { color: var(--mh-on-orange); } .mh-phone__inner { display: flex; align-items: center; justify-content: space-between; gap: 40px 64px; flex-wrap: wrap; } .mh-phone__copy { flex: 1 1 420px; max-width: 600px; } .mh-phone__copy p { margin: 18px 0 0; font-size: 17px; font-weight: 500; line-height: 1.6; color: var(--mh-on-orange); text-wrap: pretty; } .mh-phone__call { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; } /* A telefonszámot a törzsbetűvel szedjük: a keskenyített display-betű szűk betűközzel összefolyatta a számjegyeket. Egyforma széles (tabular) számjegyek, enyhe betűköz. */ .mh-phone__number { font-family: var(--mh-font-body); font-weight: 700; font-size: clamp(32px, 5vw, 64px); line-height: 1.1; letter-spacing: 0.01em; font-variant-numeric: tabular-nums lining-nums; color: var(--mh-on-orange); text-decoration: none; white-space: nowrap; } .mh-phone__number:hover { color: var(--mh-on-orange); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; } .mh-phone__hours { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: var(--mh-on-orange); } /* 9. Vélemények ------------------------------------------------------------- */ .mh-quotes__grid { margin-top: 52px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; align-items: start; } .mh-quote { margin: 0; padding: 32px; display: flex; flex-direction: column; background: var(--mh-card); border: 1.5px solid var(--mh-ink); border-radius: 4px; } .mh-quote:nth-child(1) { transform: rotate(-0.8deg); } .mh-quote:nth-child(2) { transform: rotate(0.6deg); } .mh-quote:nth-child(3) { transform: rotate(-0.4deg); } .mh-quote__top { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mh-ink-2); } .mh-quote blockquote { margin: 22px 0 0; padding: 0; border: 0; font-size: 16px; line-height: 1.6; font-style: normal; color: var(--mh-ink); text-wrap: pretty; } .mh-quote blockquote::before, .mh-quote blockquote::after { content: none; } .mh-quote figcaption { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--mh-rule-strong); display: flex; flex-direction: column; gap: 4px; } .mh-quote figcaption strong { font-size: 16px; font-weight: 700; } .mh-quote figcaption a, .mh-quote figcaption span { font-size: 14.5px; color: var(--mh-ink-2); text-decoration: none; } .mh-quote figcaption a:hover { color: var(--mh-orange-deep); text-decoration: underline; } /* 10. Csomagok (bézs) ------------------------------------------------------- */ /* --mh-pricing-bg: a szekció háttere; a bélyeg-fogazat pöttyei is ezt a színt kapják. */ .mh-pricing { --mh-pricing-bg: var(--mh-paper-2); background: var(--mh-pricing-bg); color: var(--mh-ink); } .mh-subsel { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; } .mh-subsel__label { font-size: 15px; font-weight: 600; } .mh-subsel__btns { display: flex; gap: 8px; } .mh-subsel__btn { min-width: 96px; height: 48px; padding: 0 18px; border: 1.5px solid var(--mh-ink); border-radius: var(--mh-radius); background: transparent; color: var(--mh-ink); font-family: var(--mh-font-body); font-size: 16px; font-weight: 700; cursor: pointer; transition: background-color .15s ease, color .15s ease; } .mh-subsel__btn:hover { background: rgba(14, 34, 56, 0.1); } .mh-subsel__btn[aria-pressed="true"] { background: var(--mh-ink); color: var(--mh-paper); } .mh-plans { margin-top: 48px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; } /* 5 csomag (2027-es árlista, Mini csomaggal): széles képernyőn egy sorban, tömörebb kártyákkal; közepes szélességen 3 + 2, keskenyebben 2 + 2 + 1 kártya, középre igazítva. */ .mh-plans--5 { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; } .mh-plans--5 > .mh-plan-clip { flex: 0 0 calc((100% - 4 * 20px) / 5); } .mh-plans--5 .mh-plan { margin: -6px; padding: 24px 16px 20px; border-width: 12px; } .mh-plans--5 .mh-plan__amount { font-size: 44px; } .mh-plans--5 .mh-plan__specs div { gap: 8px; font-size: 14px; } @media (max-width: 1279px) { .mh-plans--5 { gap: 28px; } .mh-plans--5 > .mh-plan-clip { flex-basis: calc((100% - 2 * 28px) / 3); } .mh-plans--5 .mh-plan { margin: -8px; padding: 26px 22px 22px; border-width: 16px; } .mh-plans--5 .mh-plan__amount { font-size: 52px; } .mh-plans--5 .mh-plan__specs div { gap: 12px; font-size: 15px; } } @media (max-width: 899px) { .mh-plans--5 > .mh-plan-clip { flex-basis: calc((100% - 28px) / 2); } } @media (max-width: 699px) { .mh-plans--5 > .mh-plan-clip { flex-basis: 100%; } } /* Bélyeg-fogazat: a háttérszínű pöttyös keret felét a külső doboz levágja. */ .mh-plan-clip { display: flex; overflow: hidden; min-width: 0; } .mh-plan { --p-bg: var(--mh-card); --p-fg: var(--mh-ink); --p-sub: var(--mh-ink-2); --p-rule: var(--mh-rule); --p-btn-bg: var(--mh-ink); --p-btn-fg: var(--mh-paper); --p-btn-hover: var(--mh-ink-soft); flex: 1 1 auto; min-width: 0; margin: -8px; padding: 26px 22px 22px; border: 16px dotted var(--mh-pricing-bg, var(--mh-paper-2)); background: var(--p-bg); color: var(--p-fg); display: flex; flex-direction: column; transition: background-color .2s ease, color .2s ease; } .mh-plan.is-selected { --p-bg: var(--mh-ink); --p-fg: var(--mh-paper); --p-sub: var(--mh-on-ink-muted); --p-rule: rgba(246, 241, 231, 0.22); --p-btn-bg: var(--mh-orange); --p-btn-fg: var(--mh-on-orange); --p-btn-hover: var(--mh-orange-hover); } /* A kártyán belül csak két betűcsalád: display az árnak, body minden másnak. */ .mh-plan__top { min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .mh-plan__name { margin: 0; font-family: var(--mh-font-body); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: inherit; } .mh-plan__badge { display: none; padding: 4px 8px; border-radius: 3px; background: var(--mh-orange); color: var(--mh-on-orange); font-family: var(--mh-font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } .mh-plan.is-selected .mh-plan__badge { display: inline-block; } .mh-plan__price { margin-top: 18px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; } .mh-plan__amount { font-family: var(--mh-font-display); font-weight: 800; font-size: 52px; line-height: 1; letter-spacing: -0.03em; font-stretch: 85%; white-space: nowrap; } .mh-plan__cur { font-family: var(--mh-font-display); font-weight: 700; font-size: 22px; line-height: 1; } .mh-plan__per { font-size: 15px; color: var(--p-sub); } .mh-plan__gross { margin-top: 8px; min-height: 19px; font-size: 13.5px; color: var(--p-sub); } .mh-plan__specs { margin: 22px 0 0; padding: 6px 0 0; border-top: 1.5px solid var(--p-fg); } .mh-plan__specs div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--p-rule); font-size: 15px; } .mh-plan__specs dt { font-weight: 400; color: var(--p-sub); } .mh-plan__specs dd { margin: 0; font-weight: 600; text-align: right; } .mh-plan__cta { margin-top: auto; padding-top: 22px; } .mh-plan__cta .mh-btn { min-height: 50px; border-color: transparent; background: var(--p-btn-bg); color: var(--p-btn-fg); } .mh-plan__cta .mh-btn:hover { background: var(--p-btn-hover); color: var(--p-btn-fg); } .mh-free { margin-top: 28px; padding: 22px 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; border: 1.5px solid var(--mh-ink); border-radius: 8px; } .mh-free__title { margin: 0; font-family: var(--mh-font-display); font-weight: 800; font-size: 24px; letter-spacing: -0.02em; } .mh-free__list { flex: 1 1 420px; margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 15px; } .mh-free__list li::before { content: "· "; } .mh-custom { margin-top: 28px; padding: 40px 44px; display: flex; align-items: center; gap: 32px 48px; background: var(--mh-ink); color: var(--mh-paper); border-radius: 8px; } .mh-custom__copy { flex: 0 0 400px; max-width: 100%; } .mh-custom__copy h3 { margin: 14px 0 0; font-family: var(--mh-font-display); font-weight: 800; font-size: clamp(30px, 3vw, 40px); line-height: 1.08; letter-spacing: -0.03em; font-stretch: 88%; color: var(--mh-paper); } .mh-custom__copy p { margin: 12px 0 0; font-size: 16px; line-height: 1.6; color: var(--mh-on-ink-muted); } .mh-custom__list { flex: 1 1 auto; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; font-size: 15px; line-height: 1.35; } .mh-custom__list li { display: flex; align-items: flex-start; gap: 10px; } .mh-custom__list .mh-icon { color: var(--mh-orange); margin-top: 1px; } .mh-custom .mh-btn { flex-shrink: 0; } .mh-notes { margin-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 48px; } .mh-note { border-top: 1.5px solid var(--mh-ink); padding-top: 18px; } .mh-note h3 { margin: 0; font-family: var(--mh-font-display); font-weight: 700; font-size: 22px; line-height: 1.25; letter-spacing: -0.015em; color: var(--mh-ink); } .mh-note p { margin: 10px 0 0; font-size: 15.5px; line-height: 1.6; } .mh-pricing__foot { margin-top: 32px; display: flex; align-items: center; justify-content: space-between; gap: 20px 48px; flex-wrap: wrap; } .mh-footnote { flex: 1 1 420px; max-width: 760px; margin: 0; font-size: 14px; line-height: 1.6; color: var(--mh-ink-2); } .mh-notice { margin: 0; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 1.5px solid var(--mh-ink); border-radius: var(--mh-radius); font-size: 14.5px; font-weight: 600; } /* 10b. GYIK a főoldalon (natív
, JS nélkül is működik) --------------- */ .mh-faq__inner { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: clamp(32px, 6vw, 96px); align-items: start; } .mh-faq__intro .mh-lead { margin-top: 18px; max-width: 420px; } .mh-faq__all { margin-top: 20px; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; } .mh-faq__list { border-top: 1.5px solid var(--mh-ink); } .mh-qa { border-bottom: 1px solid var(--mh-rule-strong); } .mh-qa__q { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; padding: 18px 0; list-style: none; cursor: pointer; font-family: var(--mh-font-display); font-size: clamp(19px, 1.8vw, 22px); font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; color: var(--mh-ink); } .mh-qa__q::-webkit-details-marker { display: none; } .mh-qa__q::marker { content: ""; } .mh-qa__q:hover { color: var(--mh-orange-deep); } .mh-qa__icon { flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 1.5px solid currentColor; border-radius: 50%; transition: transform .2s ease, background-color .2s ease; } .mh-qa[open] .mh-qa__icon { transform: rotate(45deg); background: var(--mh-ink); border-color: var(--mh-ink); color: var(--mh-paper); } .mh-qa__a { padding: 0 56px 24px 0; font-size: 16.5px; line-height: 1.65; color: var(--mh-ink-2); } .mh-qa__a p, .mh-qa__a ul { margin: 0; } .mh-qa__a ul { padding-left: 20px; display: grid; gap: 6px; } .mh-qa__a a { color: var(--mh-ink); font-weight: 600; } @media (prefers-reduced-motion: reduce) { .mh-qa__icon { transition: none; } } /* 11. Blog + A Mailhookról -------------------------------------------------- */ .mh-know__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; } .mh-posts { margin: 36px 0 0; padding: 0; list-style: none; border-top: 1.5px solid var(--mh-ink); } .mh-post { border-bottom: 1px solid var(--mh-rule-strong); } .mh-post a { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 24px 0; color: var(--mh-ink); text-decoration: none; } .mh-post__date { display: block; font-family: var(--mh-font-mono); font-size: 13px; color: var(--mh-ink-2); } .mh-post__title { display: block; margin-top: 8px; font-family: var(--mh-font-display); font-weight: 700; font-size: clamp(20px, 2vw, 24px); line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; } .mh-post__go { flex-shrink: 0; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--mh-ink); border-radius: 50%; transition: background-color .15s ease, color .15s ease; } .mh-post a:hover .mh-post__go { background: var(--mh-ink); color: var(--mh-paper); } .mh-post a:hover .mh-post__title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; } .mh-posts__all { margin-top: 12px; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; } .mh-about { padding: clamp(28px, 3.4vw, 40px) clamp(24px, 3.6vw, 44px); background: var(--mh-card); border: 1.5px solid var(--mh-ink); border-radius: 4px; } .mh-about h2 { margin: 16px 0 18px; font-family: var(--mh-font-display); font-weight: 800; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.12; letter-spacing: -0.025em; font-stretch: 88%; color: var(--mh-ink); text-wrap: balance; } .mh-about h3 { margin: 22px 0 6px; font-family: var(--mh-font-body); font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--mh-ink); } .mh-about p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--mh-ink-2); text-wrap: pretty; } .mh-about .mh-about__gdpr { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--mh-rule-strong); font-size: 14.5px; font-weight: 600; color: var(--mh-ink); } /* 12. Kapcsolat: levelezőlap + FormBoxWidget űrlap -------------------------- */ .mh-contact { background: var(--mh-paper-2); } .mh-postcard { margin-top: 48px; padding: clamp(24px, 3.4vw, 40px) clamp(20px, 3.6vw, 44px); display: grid; grid-template-columns: minmax(0, 1fr) 1.5px minmax(0, 1fr); gap: clamp(24px, 3.6vw, 44px); background: var(--mh-card); border: 1.5px solid var(--mh-ink); border-radius: var(--mh-radius); } .mh-postcard__rule { background: var(--mh-ink); } .mh-postcard__msg { display: flex; flex-direction: column; gap: 28px; } .mh-postcard__hello { margin: 0; font-family: var(--mh-font-display); font-weight: 800; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; letter-spacing: -0.025em; font-stretch: 88%; } .mh-postcard__postmark { display: block; margin-top: auto; max-width: 100%; height: auto; transform: rotate(-6deg); transform-origin: left bottom; opacity: 0.85; } .mh-postcard__lines { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 22px; } .mh-cline { display: flex; align-items: flex-start; gap: 14px; } .mh-cline__ic { flex-shrink: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--mh-ink); border-radius: 50%; } .mh-cline__body { display: flex; flex-direction: column; gap: 3px; } .mh-cline__label { font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mh-ink-2); } .mh-cline__value { font-size: 19px; font-weight: 700; color: var(--mh-ink); text-decoration: none; } a.mh-cline__value:hover { color: var(--mh-orange-deep); text-decoration: underline; } .mh-cline__note { font-size: 14px; color: var(--mh-ink-2); } .mh-postcard__form-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mh-ink-2); } .mh-postcard__form-head span { padding-top: 6px; } /* A FormBoxWidget (ViDinamicForm) generált markupja: form.ViActiveForm > div.row.ViForm. > .label + .field + .error_msg */ .mh-form form { display: flex; flex-direction: column; gap: 16px; margin: 0; } .mh-form .ViForm.row { display: block; width: auto; max-width: none; margin: 0; padding: 0; flex: none; --bs-gutter-x: 0; --bs-gutter-y: 0; } .mh-form .ViForm.row > * { width: auto; max-width: none; padding: 0; margin-top: 0; } .mh-form .label { display: block; padding: 0; font-family: var(--mh-font-body); font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mh-ink-2); white-space: normal; text-align: left; } .mh-form .label label { margin: 0; } .mh-form input[type="text"], .mh-form input[type="email"], .mh-form input[type="tel"], .mh-form textarea, .mh-form select, .mh-form .form-control { display: block; width: 100%; height: 46px; padding: 0; border: 0; border-bottom: 1.5px solid var(--mh-ink); border-radius: 0; background: transparent; box-shadow: none; color: var(--mh-ink); font-family: var(--mh-font-body); font-size: 17px; } .mh-form textarea { height: 120px; padding-top: 10px; resize: vertical; } .mh-form .form-control:focus { border-bottom-color: var(--mh-blue); box-shadow: 0 1.5px 0 var(--mh-blue); outline: 0; background: transparent; } .mh-form .form-control::placeholder { color: #5B6B80; opacity: 1; } .mh-form input.error, .mh-form textarea.error { border-bottom-color: var(--mh-error); } .mh-form .ViForm.error_msg { display: none; margin-top: 6px; padding: 0; font-size: 14px; font-weight: 600; color: var(--mh-error); background: transparent; border: 0; } .mh-form .ViForm.error_msg.active { display: block; } .mh-form .ViForm.common_error.success { display: block; padding: 12px 14px; border: 1.5px solid var(--mh-success); border-radius: var(--mh-radius); color: var(--mh-success); } .mh-form .ViForm.row.adatkezelesi_tajekoztato .label { display: none; } .mh-form .ViForm.row.adatkezelesi_tajekoztato .field { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding-top: 6px; font-size: 14.5px; line-height: 1.45; } .mh-form input[type="checkbox"] { flex-shrink: 0; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--mh-ink); } .mh-form .ViForm.row.adatkezelesi_tajekoztato a { color: var(--mh-ink); font-weight: 600; } .mh-form .session_ad_keyword, .mh-form .ViForm.row.form_id { display: none !important; } .mh-form .viButtonDesigned, .mh-form button.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 28px; border: 1.5px solid var(--mh-orange); border-radius: var(--mh-radius); background: var(--mh-orange); color: var(--mh-on-orange); font-family: var(--mh-font-body); font-size: 17px; font-weight: 700; text-transform: none; letter-spacing: 0; box-shadow: none; cursor: pointer; } .mh-form .viButtonDesigned:hover, .mh-form button.btn:hover { background: var(--mh-orange-hover); border-color: var(--mh-orange-hover); color: var(--mh-on-orange); } .mh-form .ViForm.row.kuldes, .mh-form .ViForm.row.ajanlatkeres_submit { display: flex; justify-content: flex-end; } .mh-form .errorListBox { padding: 12px 14px; border: 1.5px solid var(--mh-error); border-radius: var(--mh-radius); color: var(--mh-error); font-size: 14.5px; } .mh-form .errorListBox ul { margin: 6px 0 0; padding-left: 18px; } /* 13. Lábléc ---------------------------------------------------------------- */ .mh-footer { background: var(--mh-ink); color: var(--mh-paper); padding-top: 72px; overflow: hidden; } .mh-footer__top { display: flex; justify-content: space-between; gap: 40px 64px; flex-wrap: wrap; } .mh-footer__brand { max-width: 360px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; } .mh-footer__brand p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--mh-on-ink-muted); } .mh-footer__cols { display: flex; gap: 32px clamp(32px, 5vw, 80px); flex-wrap: wrap; } .mh-footer__col { display: flex; flex-direction: column; gap: 4px; } .mh-footer__col h2 { margin: 0 0 8px; font-family: var(--mh-font-body); font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mh-on-ink-muted); } .mh-footer__col a, .mh-footer__col span { padding: 6px 0; color: var(--mh-paper); font-size: 15.5px; text-decoration: none; } .mh-footer__col a:hover { color: var(--mh-orange); } .mh-footer__partners { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 24px; margin-top: 8px; } .mh-footer__partners a { flex: 0 0 auto; } .mh-footer__partners img { display: block; height: 32px; width: auto; max-width: 100%; } .mh-footer__legal { margin-top: 56px; padding-top: 22px; border-top: 1px solid rgba(246, 241, 231, 0.22); display: flex; align-items: center; justify-content: space-between; gap: 14px 32px; flex-wrap: wrap; font-size: 14px; color: var(--mh-on-ink-muted); } .mh-footer__legal nav { display: flex; gap: 8px 28px; flex-wrap: wrap; } .mh-footer__pay { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; } .mh-footer__pay img { display: block; width: 22px; height: 22px; border-radius: 4px; } .mh-footer__legal a { color: var(--mh-paper); text-underline-offset: 4px; } .mh-footer__legal a:hover { color: var(--mh-orange); } .mh-share { display: flex; align-items: center; gap: 14px; } .mh-share a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; font-size: 20px; color: var(--mh-paper); text-decoration: none; } .mh-footer__word { margin: 40px 0 -0.16em; font-family: var(--mh-font-display); font-weight: 800; font-size: clamp(88px, 21vw, 300px); line-height: 0.74; letter-spacing: -0.05em; color: var(--mh-ink-soft); text-align: center; white-space: nowrap; user-select: none; } /* 14. Modal + süti-sáv ------------------------------------------------------ */ .mh-dialog .modal-content { background: var(--mh-card); border: 1.5px solid var(--mh-ink); border-radius: 8px; color: var(--mh-ink); } .mh-dialog .modal-header { padding: 22px 28px; border-bottom: 1.5px solid var(--mh-ink); align-items: center; } .mh-dialog .modal-title { margin: 0; font-family: var(--mh-font-display); font-weight: 800; font-size: 26px; letter-spacing: -0.02em; color: var(--mh-ink); } .mh-dialog .modal-body { padding: 24px 28px 28px; } .mh-dialog__close { width: 44px; height: 44px; margin: -6px -10px -6px auto; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--mh-ink); cursor: pointer; } .mh-dialog .mh-form form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; } .mh-dialog .mh-form .common_error, .mh-dialog .mh-form .ViForm.row.ajanlatkeres_submit, .mh-dialog .mh-form .ViForm.row.adatkezelesi_tajekoztato, .mh-dialog .mh-form .errorListBox { grid-column: 1 / -1; } /* Süti-hozzájárulás (cookieInfo.php + js/mhconsent.js): középre felugró, kétpaneles ablak. Az első panelen az „elfogadom” és az „elutasítom” egyforma súlyú gomb (EDPB ajánlás). */ .mh-consent { position: fixed; inset: 0; z-index: 1090; display: flex; align-items: center; justify-content: center; padding: 16px; font-family: var(--mh-font-body); } .mh-consent[hidden] { display: none; } .mh-consent__backdrop { position: absolute; inset: 0; background: rgba(14, 34, 56, 0.55); } .mh-consent__panel { position: relative; width: min(640px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; padding: clamp(22px, 3vw, 32px); background: var(--mh-card); color: var(--mh-ink); border: 1.5px solid var(--mh-ink); border-radius: 12px; box-shadow: 0 30px 60px -24px rgba(14, 34, 56, 0.6); overflow: auto; } .mh-consent__panel[hidden] { display: none; } .mh-consent__panel:focus { outline: none; } .mh-consent__panel--prefs { width: min(760px, 100%); padding-bottom: 0; overflow: hidden; } .mh-consent__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .mh-consent .mh-consent__title { margin: 0; font-family: var(--mh-font-display); font-size: clamp(22px, 2.6vw, 28px); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: var(--mh-ink); } .mh-consent__close { margin-left: auto; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: transparent; color: var(--mh-ink); cursor: pointer; } .mh-consent__close:hover { background: var(--mh-paper-2); } .mh-consent__text, .mh-consent__text p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.6; color: var(--mh-ink-2); } .mh-consent__text a, .mh-consent__links a { color: var(--mh-ink); font-weight: 600; text-underline-offset: 3px; } .mh-consent__links { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 4px 0 18px; font-size: 15px; } .mh-consent__actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .mh-consent__actions .mh-btn { min-height: 50px; padding: 0 14px; font-size: 15.5px; text-align: center; white-space: normal; } .mh-consent__actions--prefs { position: sticky; bottom: 0; margin: 0 calc(-1 * clamp(22px, 3vw, 32px)); padding: 16px clamp(22px, 3vw, 32px) clamp(18px, 2.4vw, 24px); background: var(--mh-card); border-top: 1px solid var(--mh-rule-strong); } .mh-consent__scroll { overflow: auto; margin: 0 calc(-1 * clamp(22px, 3vw, 32px)); padding: 0 clamp(22px, 3vw, 32px) 18px; } .mh-ccat { padding: 16px 0; border-top: 1px solid var(--mh-rule-strong); } .mh-ccat__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; } .mh-consent .mh-ccat__title h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 4px; font-family: var(--mh-font-display); font-size: 19px; font-weight: 700; color: var(--mh-ink); } .mh-ccat__title p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--mh-ink-2); } .mh-ccat__tag { padding: 2px 9px; border-radius: 99px; background: var(--mh-paper-2); font-family: var(--mh-font-body); font-size: 12.5px; font-weight: 700; color: var(--mh-ink); } .mh-ccat__subs { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 12px; padding-left: 2px; } .mh-ccat__subs .mh-check { display: inline-flex; align-items: center; gap: 10px; margin: 0; min-height: 36px; font-size: 15px; font-weight: 600; color: var(--mh-ink); cursor: pointer; } .mh-ccat__subs .mh-check input { flex-shrink: 0; width: 22px; height: 22px; margin: 0; accent-color: var(--mh-ink); cursor: pointer; } .mh-ccat__subs small { font-weight: 500; color: var(--mh-ink-2); } .mh-ccat__more { margin-top: 8px; } .mh-ccat__more summary { display: inline-flex; align-items: center; min-height: 36px; cursor: pointer; font-size: 14.5px; font-weight: 700; color: var(--mh-ink); text-decoration: underline; text-underline-offset: 3px; } .mh-ccat__table { width: 100%; margin-top: 6px; border-collapse: collapse; font-size: 13.5px; line-height: 1.45; color: var(--mh-ink); } .mh-ccat__table th, .mh-ccat__table td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--mh-rule); text-align: left; vertical-align: top; } .mh-ccat__table thead th { font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mh-ink-2); } .mh-ccat__table tbody th { font-weight: 700; white-space: nowrap; } /* kapcsoló (role="switch" jelölőnégyzet) */ .mh-switch { position: relative; flex-shrink: 0; display: inline-flex; align-items: center; width: 52px; height: 30px; margin: 2px 0 0; cursor: pointer; } .mh-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .mh-switch input:disabled { cursor: not-allowed; } .mh-switch__track { width: 52px; height: 30px; border-radius: 99px; background: #8A96A5; transition: background-color .15s ease; position: relative; } .mh-switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgba(14, 34, 56, 0.35); transition: transform .15s ease; } .mh-switch input:checked + .mh-switch__track { background: var(--mh-ink); } .mh-switch input:checked + .mh-switch__track::after { transform: translateX(22px); } .mh-switch input:disabled + .mh-switch__track { background: var(--mh-ink-2); opacity: 0.75; } .mh-switch input:focus-visible + .mh-switch__track { outline: 2.5px solid var(--mh-blue); outline-offset: 3px; } /* bal alsó fogaskerék: a döntés bármikor módosítható */ .mh-consent-gear { position: fixed; left: 16px; bottom: 16px; z-index: 1085; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--mh-paper); border-radius: 50%; background: var(--mh-ink); color: var(--mh-paper); box-shadow: 0 10px 24px -10px rgba(14, 34, 56, 0.7); cursor: pointer; } .mh-consent-gear[hidden] { display: none; } .mh-consent-gear:hover { background: var(--mh-ink-soft); } .mh-consent-gear:focus-visible { outline: 2.5px solid var(--mh-orange); outline-offset: 3px; } html.mh-consent-lock { overflow: hidden; } .mh-footer__linkbtn { padding: 0; border: 0; background: none; color: var(--mh-paper); font: inherit; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; } .mh-footer__linkbtn:hover { color: var(--mh-orange); } @media (max-width: 599px) { .mh-consent { align-items: flex-end; padding: 8px; } .mh-consent__panel { max-height: calc(100vh - 16px); } .mh-consent__actions { grid-template-columns: minmax(0, 1fr); } .mh-ccat__table thead { display: none; } .mh-ccat__table tr { display: grid; grid-template-columns: minmax(0, 1fr); padding: 8px 0; border-bottom: 1px solid var(--mh-rule); } .mh-ccat__table th, .mh-ccat__table td { padding: 2px 0; border: 0; } } @media (prefers-reduced-motion: reduce) { .mh-switch__track, .mh-switch__track::after { transition: none; } } /* 15. Belső (modul-) oldalak ------------------------------------------------ Itt a régi creative400.css is betöltődik (rendelés, kosár, űrlapok stílusai); ez a réteg az új arculatra hangolja a közös elemeket. */ .mh-body--inner { font-family: var(--mh-font-body); background: var(--mh-paper); color: var(--mh-ink); overflow-x: hidden; } .mh-inner section:not([class*="mh-"]) { padding: 24px 0; } .mh-inner { padding-block: clamp(40px, 5vw, 64px) clamp(56px, 7vw, 88px); min-height: 50vh; overflow-x: clip; } .mh-inner--narrow .mh-wrap { max-width: calc(880px + 2 * var(--mh-pad)); } .mh-inner h1, .mh-inner h2, .mh-inner h3, .mh-inner .h1, .mh-inner .h2, .mh-inner .h3 { font-family: var(--mh-font-display); font-weight: 800; letter-spacing: -0.025em; color: var(--mh-ink); text-transform: none; } .mh-inner h1, .mh-inner .h1 { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.04; font-stretch: 88%; text-align: left !important; } .mh-inner h2 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.12; } .mh-inner h3 { font-size: 21px; line-height: 1.2; font-weight: 700; } .mh-inner p, .mh-inner li { color: var(--mh-ink); } .mh-inner a { color: var(--mh-ink); text-underline-offset: 3px; } .mh-inner a:hover { color: var(--mh-orange-deep); } .mh-inner hr, .mh-inner hr.primary { width: 100%; max-width: none; height: 1.5px !important; margin: 20px 0 28px !important; border: 0; background: var(--mh-ink); color: var(--mh-ink) !important; opacity: 1; } .mh-inner .content-text, .mh-inner .news-content { max-width: 760px; font-size: 17px; line-height: 1.7; text-align: left !important; } .mh-inner .content-text img, .mh-inner .news-content img { max-width: 100%; height: auto; } .mh-inner .card-text { font-size: 14px; color: var(--mh-ink-2); } .mh-inner .btn, .mh-body--inner .modal .btn { min-height: 44px; padding: 10px 20px; border: 1.5px solid var(--mh-ink); border-radius: var(--mh-radius); font-family: var(--mh-font-body); font-size: 15.5px; font-weight: 700; text-transform: none; letter-spacing: 0; box-shadow: none; } .mh-inner .btn-primary, .mh-inner .btn-success { background: var(--mh-orange) !important; border-color: var(--mh-orange) !important; color: var(--mh-on-orange) !important; } .mh-inner .btn-primary:hover, .mh-inner .btn-success:hover { background: var(--mh-orange-hover) !important; border-color: var(--mh-orange-hover) !important; color: var(--mh-on-orange) !important; } /* a régi mailhook.css csupa nagybetűs, be nem töltött Open Sans jelölőnégyzet-címkéi */ .mh-inner .checkbox label { font-family: var(--mh-font-body); font-size: 16px; font-weight: 600; text-transform: none; color: var(--mh-ink); } .mh-inner .btn-default, .mh-inner .btn-secondary, .mh-body--inner .modal .btn-default, .mh-body--inner .modal .btn-secondary { background: transparent !important; border-color: var(--mh-ink) !important; color: var(--mh-ink) !important; } .mh-inner .btn-default:hover, .mh-inner .btn-secondary:hover { background: var(--mh-ink) !important; color: var(--mh-paper) !important; } .mh-inner .btn-link { min-height: 0; padding: 0; border: 0; } .mh-inner .form-control, .mh-inner select, .mh-inner input[type="text"], .mh-inner input[type="password"], .mh-inner input[type="email"], .mh-inner textarea { border: 1.5px solid var(--mh-ink); border-radius: var(--mh-radius); background: var(--mh-card); color: var(--mh-ink); box-shadow: none; font-family: var(--mh-font-body); } .mh-inner .form-control:focus { border-color: var(--mh-blue); box-shadow: 0 0 0 3px rgba(15, 91, 194, 0.2); } .mh-inner label { color: var(--mh-ink); } .mh-inner .order-panel, .mh-inner .panel, .mh-inner .card { background: var(--mh-card); border: 1.5px solid var(--mh-ink); border-radius: var(--mh-radius); box-shadow: none; } .mh-inner .panel-heading { background: var(--mh-ink); color: var(--mh-paper); border-radius: 4px 4px 0 0; font-family: var(--mh-font-display); } .mh-inner .panel-heading h1, .mh-inner .panel-heading h2, .mh-inner .panel-heading h3 { color: var(--mh-paper); } .mh-inner table { color: var(--mh-ink); } /* blog lista – minden kártya egyforma magas: az oszlop flex-konténer, a kártya kitölti, a cím mindig 3 sornyi helyet foglal (a modul 3 sorra vágja), a „Bővebben” gomb alulra kerül. (A modul sablonja -t ágyaz -ba, ezért a böngésző szétbontja: .card > a csak a kép, a szöveg a .card-body első -jában van, utána jön a gomb.) */ .mh-inner #content-row > [class*="col-"] { display: flex; } .mh-inner #content-row .card { display: flex; flex-direction: column; width: 100%; height: auto !important; overflow: hidden; text-align: left; } .mh-inner #content-row .card > a { display: block; flex: none; } .mh-inner #content-row .card img { display: block; width: 100%; height: auto; aspect-ratio: 728 / 372; object-fit: cover; border-bottom: 1.5px solid var(--mh-ink); } .mh-inner #content-row .card-body { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px 22px 24px; } .mh-inner #content-row .card-body > a:not(.btn) { display: block; width: 100%; color: var(--mh-ink) !important; text-decoration: none; } .mh-inner #content-row .card-title { margin: 0; min-height: 3.6em; font-size: 21px; line-height: 1.2; } .mh-inner #content-row .card-text { margin: 8px 0 0; } .mh-inner #content-row .card-body hr { display: none; } .mh-inner #content-row .card-body .btn { margin-top: auto; } /* GYIK harmonika – a régi .custom-accordion szabályok felülírásával */ .mh-inner #gyik .container { padding: 0; max-width: 880px; margin: 0; } .mh-inner .custom-accordion .accordion-item { background: transparent; margin: 0; border: 0; border-bottom: 1px solid var(--mh-rule-strong); border-radius: 0; overflow: visible; } .mh-inner .custom-accordion .accordion-item h2 { margin: 0; } .mh-inner .custom-accordion .accordion-item .btn-link { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 64px; padding: 16px 0; border: 0; background: transparent; color: var(--mh-ink); font-family: var(--mh-font-display); font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; text-align: left; white-space: normal; text-decoration: none; } .mh-inner .custom-accordion .accordion-item .btn-link:hover { color: var(--mh-orange-deep); } /* a régi „+” jelet a szöveg elől a sor végére tesszük */ .mh-inner .custom-accordion .accordion-item .btn-link::before { content: "+"; position: static; order: 2; left: auto; top: auto; transform: none; flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 1.5px solid currentColor; border-radius: 50%; font-family: var(--mh-font-body); font-size: 20px; font-weight: 400; line-height: 1; } .mh-inner .custom-accordion .accordion-item .btn-link[aria-expanded="true"]::before { content: "\2013"; } .mh-inner .custom-accordion .accordion-item.active .btn-link { color: var(--mh-ink); background: transparent; } .mh-inner .custom-accordion .accordion-item .accordion-body { padding: 0 0 22px; background: transparent; font-size: 16.5px; line-height: 1.65; } .mh-inner .custom-accordion .accordion-item .accordion-body p { margin: 0; } /* A modul-oldalak alján betöltött csomag-sáv panelként ül a tartalom szélességében. (Teljes szélességű full-bleedhez 50vw kellene, ami a függőleges görgetősáv szélességével túllóg – ezért panel.) */ .mh-inner .mh-pricing--embedded { margin: clamp(48px, 6vw, 80px) 0 0; border-radius: 10px; padding-block: clamp(40px, 5vw, 64px); } .mh-inner .mh-pricing--embedded > .mh-wrap { max-width: none; padding-inline: clamp(20px, 3vw, 40px); } /* a belső oldalak általános h3-szabálya ne írja felül a csomagkártya címkéjét */ .mh-inner .mh-plan__name { margin: 0; font-family: var(--mh-font-body); font-size: 13px; font-weight: 700; line-height: 1.3; letter-spacing: 0.1em; text-transform: uppercase; color: inherit; } /* Rendelési folyamat lépésjelzője: a modul sablonja inline stílusokkal színez (#337ab7 az aktív lépés, white az inaktív), ezért csak !important-tal és az inline színre illesztett attribútum-szelektorral hangolható az arculatra. */ .mh-inner #header { gap: 12px; } .mh-inner #header .box { border: 1.5px solid var(--mh-ink) !important; border-radius: 8px; overflow: hidden; } .mh-inner #header .box[style*="337ab7"] { background-color: var(--mh-ink) !important; } .mh-inner #header .box[style*="white"] { background-color: var(--mh-card) !important; } .mh-inner #header .box p { color: var(--mh-ink) !important; font-family: var(--mh-font-body); font-weight: 600; } .mh-inner #header .box[style*="337ab7"] p { color: var(--mh-paper) !important; } .mh-inner #header #number span { background-color: var(--mh-orange) !important; color: var(--mh-on-orange) !important; } .mh-inner #header #number h1 { color: var(--mh-ink) !important; font-family: var(--mh-font-display); font-weight: 800; } /* 15a. Jogi dokumentumok (Core/Templates/Show: ÁSZF, adatkezelési és süti-tájékoztató) */ .mh-legal { max-width: 860px; font-size: 16.5px; line-height: 1.7; color: var(--mh-ink); } .mh-inner .mh-legal h1 { margin: 0 0 12px; } .mh-inner .mh-legal h2 { margin: 44px 0 14px; padding-top: 22px; border-top: 1.5px solid var(--mh-ink); font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; } .mh-inner .mh-legal h3 { margin: 28px 0 10px; font-size: 19px; line-height: 1.3; } .mh-inner .mh-legal h4 { margin: 20px 0 8px; font-family: var(--mh-font-body); font-size: 16.5px; font-weight: 700; } .mh-legal p, .mh-legal li { margin: 0 0 12px; } .mh-legal ul, .mh-legal ol { padding-left: 22px; margin: 0 0 14px; } .mh-legal a { font-weight: 600; overflow-wrap: anywhere; } .mh-legal table { width: 100%; margin: 8px 0 20px; border-collapse: collapse; font-size: 15px; line-height: 1.5; } .mh-legal th, .mh-legal td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--mh-rule-strong); text-align: left; vertical-align: top; } .mh-legal thead th { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mh-ink-2); } .mh-legal .mh-legal__meta { margin: 0 0 24px; font-size: 15px; color: var(--mh-ink-2); } .mh-legal .mh-legal__toc { margin: 24px 0 8px; padding: 18px 22px; border: 1.5px solid var(--mh-ink); border-radius: 10px; background: var(--mh-card); } .mh-legal .mh-legal__toc ol { margin: 8px 0 0; columns: 2 260px; column-gap: 32px; } .mh-legal .mh-legal__toc li { margin: 0 0 6px; break-inside: avoid; } .mh-legal .mh-legal__box { margin: 16px 0 20px; padding: 14px 18px; border-left: 3px solid var(--mh-orange); background: var(--mh-card); } .mh-legal dl { display: grid; grid-template-columns: minmax(140px, max-content) minmax(0, 1fr); gap: 6px 20px; margin: 0 0 16px; } .mh-legal dt { font-weight: 700; } .mh-legal dd { margin: 0; } @media (max-width: 599px) { .mh-legal dl { grid-template-columns: minmax(0, 1fr); gap: 0; } .mh-legal dd { margin-bottom: 8px; } } /* Telefonon a 4 oszlopos (pl. süti-) táblázatok nem férnek ki; a .mh-inner levágná a jobb oldalukat, ezért vízszintesen görgethetők. */ @media (max-width: 599px) { .mh-legal table { display: block; overflow-x: auto; } } /* 15b. Regisztráció / megrendelés (a ServiceOrder modul felülírt sablonjai: templates/mailhookFront2026/modules/ServiceOrder/tmpl/*) ------------------ */ .mh-checkout { --mh-cbox-pad: clamp(20px, 3vw, 32px); } .mh-steps { list-style: none; margin: 0 0 clamp(28px, 4vw, 44px); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .mh-steps__item { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 16px; border: 1.5px solid var(--mh-rule-strong); border-radius: 10px; color: var(--mh-ink-2); font-size: 15.5px; font-weight: 600; line-height: 1.25; } .mh-steps__num { flex-shrink: 0; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: 1.5px solid currentColor; border-radius: 50%; font-family: var(--mh-font-display); font-size: 16px; font-weight: 800; } .mh-steps__item.is-done { border-color: var(--mh-ink); color: var(--mh-ink); } .mh-steps__item.is-done .mh-steps__num { background: var(--mh-ink); border-color: var(--mh-ink); color: var(--mh-paper); } .mh-steps__item.is-current { background: var(--mh-ink); border-color: var(--mh-ink); color: var(--mh-paper); } .mh-steps__item.is-current .mh-steps__num { background: var(--mh-orange); border-color: var(--mh-orange); color: var(--mh-on-orange); } .mh-checkout__head { max-width: 760px; margin-bottom: clamp(24px, 3vw, 36px); } .mh-inner .mh-checkout__head h1 { margin: 14px 0 0; } .mh-checkout__head .mh-lead { margin-top: 14px; } .mh-checkout__form { margin: 0; } .mh-checkout__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: clamp(24px, 3vw, 40px); align-items: start; } .mh-checkout__main { display: flex; flex-direction: column; gap: 20px; min-width: 0; } .mh-checkout__side { position: sticky; top: calc(var(--mh-header-h) + 20px); display: flex; flex-direction: column; gap: 16px; min-width: 0; } .mh-cbox { background: var(--mh-card); border: 1.5px solid var(--mh-ink); border-radius: 10px; padding: var(--mh-cbox-pad); } .mh-inner .mh-cbox__title { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; font-size: 22px; line-height: 1.2; font-weight: 800; } .mh-cbox__num { flex-shrink: 0; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--mh-orange); color: var(--mh-on-orange); font-size: 15px; font-weight: 800; } .mh-cbox__opt { font-family: var(--mh-font-body); font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--mh-ink-2); } .mh-inner .mh-cbox__hint { margin: -8px 0 20px; font-size: 15.5px; color: var(--mh-ink-2); } .mh-inner .mh-cbox__foot { margin: 16px 0 0; font-size: 14.5px; color: var(--mh-ink-2); } .mh-cbox__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; } .mh-inner .mh-cbox__edit { font-size: 15px; font-weight: 600; white-space: nowrap; } /* mezők */ .mh-fields { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px 16px; } .mh-field { grid-column: span 6; display: flex; flex-direction: column; gap: 6px; min-width: 0; } .mh-field--half { grid-column: span 3; } .mh-field--third { grid-column: span 2; } .mh-field--twothirds { grid-column: span 4; } .mh-inner .mh-field > label:not(.mh-check) { margin: 0; font-size: 15px; font-weight: 600; color: var(--mh-ink); } .mh-inner .mh-cbox .form-control { height: 50px; padding: 0 14px; background: #FFFFFF; font-size: 16.5px; } .mh-inner .mh-cbox textarea.form-control { height: 112px; padding: 12px 14px; resize: vertical; } .mh-inner .mh-cbox .form-control::placeholder { color: #6A788A; opacity: 1; } .mh-field .error_msg { font-size: 14.5px; font-weight: 600; color: var(--mh-error); } .mh-inner .mh-field .form-control.error { border-color: var(--mh-error); } .mh-field__msg { font-size: 14.5px; font-weight: 600; } .mh-field__msg--error { color: var(--mh-error); } .mh-field__msg--ok { color: var(--mh-success); } .mh-inner .mh-check { display: flex; align-items: flex-start; gap: 12px; margin: 0; font-size: 15.5px; font-weight: 500; line-height: 1.5; color: var(--mh-ink); cursor: pointer; } .mh-check input[type="checkbox"] { flex-shrink: 0; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--mh-ink); cursor: pointer; } .mh-inner .mh-check a { font-weight: 600; } .mh-agree { display: grid; gap: 16px; } /* választókártyák (időszak, fizetési mód) */ .mh-choices { display: grid; gap: 12px; margin: 0; padding: 0; border: 0; min-width: 0; } .mh-inner .mh-choice { display: flex; align-items: center; gap: 14px; margin: 0; padding: 16px 18px; border: 1.5px solid var(--mh-rule-strong); border-radius: 10px; background: var(--mh-paper); cursor: pointer; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; } .mh-choice:hover { border-color: var(--mh-ink); } .mh-choice input[type="radio"] { flex-shrink: 0; width: 22px; height: 22px; margin: 0; accent-color: var(--mh-ink); cursor: pointer; } .mh-choice:has(input:checked) { border-color: var(--mh-ink); background: #FFFFFF; box-shadow: inset 0 0 0 1.5px var(--mh-ink); } .mh-choice:has(input:focus-visible) { outline: 2.5px solid var(--mh-blue); outline-offset: 3px; } .mh-choice__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; min-width: 0; } .mh-choice__title { font-size: 17px; font-weight: 700; color: var(--mh-ink); } .mh-choice__desc { font-size: 14.5px; line-height: 1.45; color: var(--mh-ink-2); } .mh-choice__badge { display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 99px; background: var(--mh-orange); color: var(--mh-on-orange); font-size: 12.5px; font-weight: 700; vertical-align: 2px; white-space: nowrap; } .mh-choice__price { flex-shrink: 0; text-align: right; font-family: var(--mh-font-display); font-size: 22px; font-weight: 800; line-height: 1.1; color: var(--mh-ink); white-space: nowrap; } .mh-choice__price small { display: block; margin-top: 4px; font-family: var(--mh-font-body); font-size: 13.5px; font-weight: 500; color: var(--mh-ink-2); } .mh-choice__logo { flex-shrink: 0; width: 32px; height: 32px; border-radius: 6px; } /* csomagválasztó (linkek) */ /* 4 vagy 5 csomag (a Mini csak a 2027-es árlistában van): annyi oszlop, amennyi kényelmesen elfér. */ .mh-pkgs { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 12px; } .mh-inner a.mh-pkg { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1.5px solid var(--mh-rule-strong); border-radius: 10px; background: var(--mh-paper); color: var(--mh-ink); text-decoration: none; transition: border-color .15s ease, background-color .15s ease; } .mh-inner a.mh-pkg:hover { border-color: var(--mh-ink); color: var(--mh-ink); } .mh-pkg__name { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .mh-pkg__price { font-family: var(--mh-font-display); font-size: 26px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; } .mh-pkg__price small { font-family: var(--mh-font-body); font-size: 13.5px; font-weight: 600; letter-spacing: 0; } .mh-pkg__meta { font-size: 14px; line-height: 1.4; color: var(--mh-ink-2); } .mh-pkg__pick { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; } .mh-inner a.mh-pkg.is-selected, .mh-inner a.mh-pkg.is-selected:hover { background: var(--mh-ink); border-color: var(--mh-ink); color: var(--mh-paper); } .mh-pkg.is-selected .mh-pkg__meta { color: var(--mh-on-ink-muted); } .mh-pkg.is-selected .mh-pkg__pick { color: var(--mh-orange); } /* összesítő + oldalsáv */ .mh-summary { padding: 24px; border-radius: 10px; background: var(--mh-ink); color: var(--mh-paper); } .mh-inner .mh-summary__title { margin: 0 0 16px; font-size: 20px; color: var(--mh-paper); } .mh-summary__item { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid rgba(246, 241, 231, 0.22); } .mh-summary__item strong { display: block; font-size: 16.5px; line-height: 1.3; } .mh-summary__item span { display: block; margin-top: 2px; font-size: 14.5px; color: var(--mh-on-ink-muted); } .mh-summary__specs { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; font-size: 15px; } .mh-inner .mh-summary__specs li { display: flex; align-items: center; gap: 10px; color: var(--mh-paper); } .mh-summary__specs .mh-icon { color: var(--mh-orange); } .mh-summary__rows { margin: 18px 0 0; padding-top: 6px; border-top: 1px solid rgba(246, 241, 231, 0.22); } .mh-summary__rows div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 15px; } .mh-summary__rows dt { font-weight: 500; color: var(--mh-on-ink-muted); } .mh-summary__rows dd { margin: 0; font-weight: 600; text-align: right; } .mh-summary__rows .mh-summary__total { margin-top: 6px; padding-top: 14px; border-top: 1.5px solid var(--mh-paper); } .mh-summary__rows .mh-summary__total dt { color: var(--mh-paper); font-weight: 700; } .mh-summary__rows .mh-summary__total dd { font-family: var(--mh-font-display); font-size: 26px; font-weight: 800; letter-spacing: -0.02em; } .mh-inner .mh-summary__extra { margin: 0; font-size: 14.5px; color: var(--mh-ink-2); } .mh-trust { list-style: none; margin: 0; padding: 18px 20px; display: grid; gap: 10px; border: 1.5px solid var(--mh-rule-strong); border-radius: 10px; font-size: 15px; } .mh-inner .mh-trust li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.4; } .mh-trust .mh-icon { margin-top: 1px; color: var(--mh-orange-deep); } .mh-help { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 0 4px; font-size: 15px; } .mh-inner .mh-help__title { margin: 0 0 4px; font-weight: 700; } .mh-inner .mh-help a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; font-weight: 600; text-decoration: none; } .mh-inner .mh-help a:hover { text-decoration: underline; } .mh-help__note { margin: -6px 0 4px 24px; font-size: 13.5px; color: var(--mh-ink-2); } /* ellenőrzés + véglegesítés */ .mh-review { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; margin: 0; } .mh-review div { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .mh-review dt { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mh-ink-2); } .mh-review dd { margin: 0; font-size: 16.5px; font-weight: 600; color: var(--mh-ink); overflow-wrap: anywhere; } .mh-review__empty { color: var(--mh-ink-2); font-weight: 400; } .mh-accepted { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; font-size: 15.5px; } .mh-inner .mh-accepted li { display: flex; align-items: flex-start; gap: 10px; } .mh-accepted .mh-icon { margin-top: 2px; color: var(--mh-success); } .mh-inner .mh-finalnote { margin: 0 0 4px; padding: 12px 14px; border-left: 3px solid var(--mh-orange); background: var(--mh-paper); font-size: 15px; font-weight: 600; } .mh-submit-row { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-top: 22px; } .mh-linkbtn { padding: 0; border: 0; background: none; cursor: pointer; font-family: var(--mh-font-body); font-size: 15.5px; text-decoration: underline; } /* a ViActiveFormWidget saját