/* ───────────────────────────────────────────── Interaktív komponensek (TaskForge-ihlette, brand-színekkel) styles.css UTÁN töltsd be. Vanilla JS: app.js ───────────────────────────────────────────── */ /* ─── HUB BUBORÉKOK (hero, csoportosított integrációk) ─── */ .hub3 { position: relative; display: grid; grid-template-columns: 1fr 1.25fr 1fr; grid-template-rows: 1fr 1.3fr 1fr; gap: 12px; max-width: 560px; margin: 0 auto; } .hub3-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } .hub3-lines line { fill: none; stroke-width: 0.5; stroke-linecap: round; stroke-dasharray: 1.6 2.6; } .hub3-lines .lo line { stroke: rgba(240,145,60,0.55); animation: ai-dash 1.2s linear infinite; } .hub3-lines .lg line { stroke: rgba(132,184,63,0.6); animation: ai-dash 1.2s linear infinite; } .hub3 > .bubble, .hub3 > .hub-center { position: relative; z-index: 1; } .bubble { background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); padding: .7rem .7rem; display: flex; flex-direction: column; gap: .45rem; align-items: center; justify-content: center; text-align: center; } .bubble-label { font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .bubble-icons { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; align-items: center; } .bubble-icons img { width: 24px; height: 24px; object-fit: contain; display: block; } .bubble-icons .emo { font-size: 18px; line-height: 1; } .hub-center { z-index: 2; align-self: center; border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid var(--gold); box-shadow: 0 16px 40px rgba(240,145,60,0.22); } .hub-center .ai-screen-bar { height: 15px; } .hub-center img { display: block; width: 100%; height: auto; } @media (max-width: 820px) { .hub3 { grid-template-columns: 1fr 1fr; grid-template-rows: none; } .hub3-lines { display: none; } .hub-center { grid-column: 1 / -1; order: -1; } } @media (max-width: 460px) { .hub3 { grid-template-columns: 1fr; } } /* ─── AI HUB (hero diagram, mozgó vonalak) ─── */ .ai-hub { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1 / 1; margin: 0 auto; } .ai-lines { position: absolute; inset: 0; width: 100%; height: 100%; } .ai-lines line { fill: none; stroke: var(--border); stroke-width: 0.5; stroke-linecap: round; stroke-dasharray: 1.6 2.6; } .ai-lines .lines-in line { stroke: rgba(240,145,60,0.6); animation: ai-dash 1.2s linear infinite; } .ai-lines .lines-out line { stroke: rgba(132,184,63,0.65); animation: ai-dash 1.2s linear infinite; } @keyframes ai-dash { to { stroke-dashoffset: -8.4; } } .ai-node { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: .3rem; width: 84px; z-index: 1; } .ai-ic { width: 46px; height: 46px; border-radius: 12px; background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; overflow: hidden; } .ai-ic img { width: 30px; height: 30px; object-fit: contain; } .ai-cap { font-size: .64rem; font-weight: 600; color: var(--text); text-align: center; line-height: 1.15; } /* központi vezérlőpult-képernyő a hub közepén */ .ai-screen { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 48%; border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid var(--border); box-shadow: 0 16px 42px rgba(27,26,36,0.22); z-index: 3; } .ai-screen-bar { height: 16px; background: var(--bg2); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 3px; padding: 0 6px; } .ai-screen-bar i { width: 5px; height: 5px; border-radius: 50%; display: block; } .ai-screen-bar i:nth-child(1) { background: #F0913C; } .ai-screen-bar i:nth-child(2) { background: #E8C24A; } .ai-screen-bar i:nth-child(3) { background: #84B83F; } .ai-screen img { display: block; width: 100%; height: auto; } .ai-screen { cursor: pointer; transition: box-shadow .25s; } .ai-screen:hover { animation: screen-pop .6s ease; box-shadow: 0 26px 60px rgba(240,145,60,0.32); } @keyframes screen-pop { 0% { transform: translate(-50%, -50%); } 35% { transform: translate(-50%, calc(-50% - 18px)); } 65% { transform: translate(-50%, calc(-50% + 4px)); } 82% { transform: translate(-50%, calc(-50% - 2px)); } 100% { transform: translate(-50%, -50%); } } .ai-node.center { z-index: 2; } .ai-node.center .ai-ic { width: 66px; height: 66px; border-radius: 16px; border-color: var(--gold); box-shadow: 0 10px 30px rgba(240,145,60,0.30); animation: ai-pulse 2.4s ease-in-out infinite; } .ai-node.center .ai-ic img { width: 42px; height: 42px; } .ai-node.center .ai-cap { font-size: .82rem; font-weight: 700; color: var(--white); } @keyframes ai-pulse { 0%,100% { box-shadow: 0 10px 30px rgba(240,145,60,0.28); } 50% { box-shadow: 0 12px 42px rgba(240,145,60,0.5); } } @media (max-width: 980px) { .ai-hub { max-width: 420px; } } @media (max-width: 600px) { .ai-hub { max-width: 340px; } .ai-node { width: 64px; } .ai-ic { width: 38px; height: 38px; } .ai-ic img { width: 24px; height: 24px; } .ai-cap { font-size: .56rem; } .ai-node.center .ai-ic { width: 54px; height: 54px; } } /* ─── INTEGRÁCIÓ KATEGÓRIÁK (integrációs oldal) ─── */ .int-cat { margin-bottom: 2.6rem; scroll-margin-top: 120px; } .func-card { scroll-margin-top: 120px; } .int-cat h3 { font-size: 1.3rem; font-weight: 700; color: var(--white); letter-spacing: -0.01em; margin-bottom: .35rem; } .int-cat > p { color: var(--text); font-size: .98rem; max-width: 66ch; } .int-grid { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-top: 1.3rem; } .int-item { display: flex; flex-direction: column; align-items: center; gap: .5rem; width: 118px; } .int-item .logo-tile { width: 118px; height: 82px; } .int-item > span:last-child { font-size: .82rem; font-weight: 500; color: var(--text); text-align: center; } @media (max-width: 600px) { .int-item { width: 46%; } .int-item .logo-tile { width: 100%; } } /* ─── FUNKCIÓLISTA (funkciók oldal) ─── */ .ai-tag { display: inline-block; font-size: .62rem; font-weight: 800; letter-spacing: .06em; color: #0E0D13; background: var(--gold); border-radius: 5px; padding: .1rem .36rem; margin-right: .5rem; vertical-align: middle; text-transform: uppercase; line-height: 1.1; } .func-card { text-align: left; } .func-card .card-icon { margin-left: 0; } .func-card h3 { margin-bottom: .5rem; } .func-card > p { margin-bottom: .4rem; } .func-card .checklist { margin: 1.1rem 0 0; } .func-card .checklist li { font-size: .95rem; } /* ─── IZOMETRIKUS ILLUSZTRÁCIÓ ─── */ .iso-illu { width: 100%; max-width: 540px; height: auto; display: block; margin: 0 auto; animation: iso-float 5s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .iso-illu { animation: none; } } @keyframes iso-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } .iso-float { animation: iso-float 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } /* ─── JOGI OLDAL ─── */ .legal { max-width: 62rem; } .legal h2 { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.01em; color: var(--white); margin: 2.2rem 0 .7rem; } .legal h2:first-child { margin-top: 0; } .legal p { color: var(--text); font-size: 1rem; line-height: 1.7; margin-bottom: 1rem; } .legal ul { margin: 0 0 1.1rem 1.3rem; display: flex; flex-direction: column; gap: .4rem; } .legal ol { margin: 0 0 1.1rem 1.5rem; list-style: decimal; display: flex; flex-direction: column; gap: .5rem; } .legal li { color: var(--text); font-size: 1rem; line-height: 1.6; } .legal strong { color: var(--white); font-weight: 600; } .legal a { color: var(--gold); text-decoration: none; } .legal a:hover { text-decoration: underline; } /* ─── ŰRLAP ELFOGADÁS (consent) ─── */ .form-consent { margin: .2rem 0 1.2rem; } .consent-label { display: flex; align-items: flex-start; gap: .6rem; cursor: pointer; font-size: 0.88rem; color: var(--text); font-weight: 400; text-transform: none; letter-spacing: normal; } .consent-label input { width: auto; margin-top: .15rem; accent-color: var(--gold); flex: none; } .consent-label a { color: var(--gold); text-decoration: underline; } /* ─── COOKIE SÁV ─── */ .cookie-bar { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; max-width: 760px; margin: 0 auto; z-index: 120; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 1.1rem 1.3rem; display: none; align-items: center; gap: 1rem; flex-wrap: wrap; } .cookie-bar.show { display: flex; } .cookie-bar p { flex: 1 1 300px; font-size: 0.9rem; color: var(--text); margin: 0; line-height: 1.5; } .cookie-bar a { color: var(--gold); text-decoration: underline; } .cookie-bar .cookie-actions { display: flex; gap: .6rem; flex: none; } .cookie-bar .btn-primary, .cookie-bar .btn-ghost { padding: .6rem 1.3rem; font-size: 0.82rem; } /* ─── ÖSSZEKÖTŐ VONAL-DÍSZEK (áramkör stílus) ─── */ :root { --conn-orange: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 90' fill='none'%3E%3Cpath d='M24 70 L96 38 H276' stroke='%23F0913C' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='24' cy='70' r='7' fill='%23F0913C'/%3E%3Ccircle cx='276' cy='38' r='7' fill='%23F0913C'/%3E%3C/svg%3E"); --conn-green: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 90' fill='none'%3E%3Cpath d='M14 45 H138' stroke='%2384B83F' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M150 45 L176 30 H284' stroke='%2384B83F' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M150 45 L176 60 H284' stroke='%2384B83F' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='150' cy='45' r='7' fill='%2384B83F'/%3E%3Ccircle cx='284' cy='30' r='6' fill='%2384B83F'/%3E%3Ccircle cx='284' cy='60' r='6' fill='%2384B83F'/%3E%3C/svg%3E"); --conn-orange2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 90' fill='none'%3E%3Cpath d='M16 32 H96 L126 60 H198 L228 32 H284' stroke='%23F0913C' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='16' cy='32' r='7' fill='%23F0913C'/%3E%3Ccircle cx='284' cy='32' r='7' fill='%23F0913C'/%3E%3Ccircle cx='162' cy='60' r='5' fill='%23F0913C'/%3E%3C/svg%3E"); --conn-green2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 90' fill='none'%3E%3Cpath d='M16 58 H130 L168 30 H284' stroke='%2384B83F' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='16' cy='58' r='7' fill='%2384B83F'/%3E%3Ccircle cx='130' cy='58' r='5' fill='%2384B83F'/%3E%3Ccircle cx='284' cy='30' r='7' fill='%2384B83F'/%3E%3C/svg%3E"); } .conn-deco { position: absolute; pointer-events: none; background-repeat: no-repeat; background-size: contain; opacity: .85; z-index: 0; width: 190px; height: 57px; } .conn-deco.orange { background-image: var(--conn-orange); } .conn-deco.green { background-image: var(--conn-green); } /* Automatikus széldíszek MINDEN szekcióra (ritkítva, 4 változat váltakozva) */ section:not(.hero):not(.cta-section):nth-of-type(5n+1)::before, section:not(.hero):not(.cta-section):nth-of-type(5n+2)::before, section:not(.hero):not(.cta-section):nth-of-type(5n+4)::before, section:not(.hero):not(.cta-section):nth-of-type(5n)::before { content: ''; position: absolute; top: 1.7rem; width: 168px; height: 50px; background-repeat: no-repeat; background-position: center; background-size: contain; opacity: .7; pointer-events: none; z-index: 0; } section:not(.hero):not(.cta-section):nth-of-type(5n+1)::before { left: 0; background-image: var(--conn-orange); } section:not(.hero):not(.cta-section):nth-of-type(5n+2)::before { right: 0; background-image: var(--conn-green); transform: scaleX(-1); } section:not(.hero):not(.cta-section):nth-of-type(5n+4)::before { left: 0; background-image: var(--conn-orange2); } section:not(.hero):not(.cta-section):nth-of-type(5n)::before { right: 0; background-image: var(--conn-green2); transform: scaleX(-1); } @media (max-width: 700px) { section:not(.hero):not(.cta-section)::before { display: none; } } /* CTA-kártya sarkaiba (minden oldalon) */ .cta-section::before { content: ''; position: absolute; top: 26px; left: 26px; width: 150px; height: 45px; background: var(--conn-orange) no-repeat center/contain; opacity: .8; pointer-events: none; } .cta-section::after { content: ''; position: absolute; bottom: 26px; right: 26px; width: 160px; height: 48px; background: var(--conn-green) no-repeat center/contain; opacity: .8; pointer-events: none; transform: rotate(180deg); } @media (max-width: 700px) { .cta-section::before, .cta-section::after, .conn-deco { display: none; } } /* ─── PROMO KIEMELŐ BLOKK ─── */ .promo { position: relative; overflow: hidden; background: linear-gradient(120deg, rgba(132,184,63,0.28) 0%, rgba(132,184,63,0.12) 45%, rgba(240,145,60,0.12) 100%); border: 1px solid rgba(132,184,63,0.35); border-radius: var(--radius); box-shadow: var(--shadow); padding: 3rem 2.6rem; } .promo::after { content: ''; position: absolute; top: 18px; right: 18px; width: 150px; height: 45px; background: var(--conn-orange) no-repeat center/contain; opacity: .7; pointer-events: none; } @media (max-width: 700px) { .promo::after { display: none; } } .promo .section-tag { color: var(--gold2); } .promo .section-tag::before { background: var(--gold2); } .promo h2 { margin-bottom: 1rem; } .promo p { color: var(--text); font-size: 1.08rem; max-width: 62ch; margin-bottom: 1rem; } .promo p strong { color: var(--white); font-weight: 700; } .promo .cta-row { margin-top: 1.6rem; } @media (max-width: 600px) { .promo { padding: 2rem 1.4rem; } } /* ─── LEBEGŐ OLDALSÓ FÜL (ingyenes pályázatírás) ─── */ .floating-tab { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 95; display: inline-flex; align-items: center; gap: .5rem; writing-mode: vertical-rl; background: var(--gold2); color: #fff; font-family: 'Inter', sans-serif; font-weight: 600; font-size: .82rem; letter-spacing: .01em; padding: 1.1rem .55rem; border-radius: 14px 0 0 14px; box-shadow: -8px 10px 26px rgba(132,184,63,0.38); text-decoration: none; transition: padding .25s ease, box-shadow .25s, background .2s; } .floating-tab:hover { background: #74a534; padding-left: 1rem; box-shadow: -10px 14px 32px rgba(132,184,63,0.5); } .floating-tab .ft-ic { font-size: 1rem; } @media (max-width: 600px) { .floating-tab { font-size: .74rem; padding: .9rem .45rem; } } /* ─── GOMB NYÍL HOVER ─── */ .btn-primary .arr, .btn-ghost .arr { transition: transform .2s; } .btn-primary:hover .arr, .btn-ghost:hover .arr { transform: translateX(4px); } /* ─── STATISZTIKA / SZÁMLÁLÓK ─── */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .stat { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 2rem 1.6rem; text-align: center; } .stat-num { font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 800; letter-spacing: -0.03em; color: var(--gold); line-height: 1; } .stat-num .suf { color: var(--gold2); } .stat-label { margin-top: .6rem; font-size: 0.95rem; color: var(--text); } /* ─── INTEGRÁCIÓS IKON-MARQUEE (két sor, ellentétes irány) ─── */ .logo-marquee { display: flex; flex-direction: column; gap: 1.1rem; } .logo-row { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); } .logo-track { display: flex; gap: 1.1rem; width: max-content; animation: logo-scroll 55s linear infinite; will-change: transform; } .logo-track.rev { animation-name: logo-scroll-rev; } .logo-marquee:hover .logo-track { animation-play-state: paused; } .logo-tile { flex: none; width: 132px; height: 104px; border-radius: 20px; background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; padding: 14px; transition: transform .2s, box-shadow .2s; } .logo-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .logo-tile img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; } .logo-tile-text { font-size: .95rem; font-weight: 700; color: var(--muted); text-align: center; line-height: 1.2; } @keyframes logo-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes logo-scroll-rev { from { transform: translateX(-50%); } to { transform: translateX(0); } } @media (prefers-reduced-motion: reduce) { .logo-track { animation: none; } } @media (max-width: 600px) { .logo-tile { width: 100px; height: 84px; padding: 12px; border-radius: 16px; } } /* ─── FOLYAMATÁBRA ─── */ .flow { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; margin-top: 3rem; } .flow-step { position: relative; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.6rem 1.1rem; text-align: center; } .flow-step .flow-ic { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; font-size: 1.3rem; background: rgba(240,145,60,0.10); margin-bottom: .8rem; } .flow-step h4 { font-size: 0.98rem; font-weight: 700; color: var(--white); margin-bottom: .3rem; letter-spacing: -0.01em; } .flow-step p { font-size: 0.82rem; color: var(--muted); line-height: 1.5; } .flow-step:not(:last-child)::after { content: '→'; position: absolute; top: 50%; right: -0.85rem; transform: translateY(-50%); color: var(--gold); font-weight: 700; font-size: 1.1rem; z-index: 1; } /* ─── KÓD-TABOK ─── */ .tabs { margin-top: 1rem; } .tab-btns { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.2rem; } .tab-btn { font-family: 'Inter', sans-serif; font-size: 0.9rem; font-weight: 600; color: var(--text); background: #fff; border: 1px solid var(--border); border-radius: var(--radius-pill); padding: .55rem 1.2rem; cursor: pointer; transition: all .2s; } .tab-btn:hover { border-color: var(--gold); color: var(--gold); } .tab-btn.active { background: var(--gold); border-color: var(--gold); color: #fff; box-shadow: 0 6px 16px rgba(240,145,60,0.28); } .tab-panel { display: none; } .tab-panel.active { display: block; animation: fadeUp .4s ease; } .code-block { background: #1B1A24; color: #E7E5EE; border-radius: var(--radius); padding: 1.6rem 1.8rem; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 0.88rem; line-height: 1.7; overflow-x: auto; box-shadow: var(--shadow-lg); } .code-block .k { color: #F0913C; } /* kulcsszó / metódus */ .code-block .s { color: #84B83F; } /* string */ .code-block .c { color: #6E6A7A; } /* komment */ .code-block .p { color: #B6B2C2; } /* írásjel */ /* ─── VÉLEMÉNY CAROUSEL ─── */ .carousel { position: relative; } .carousel-track { display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: .5rem; scrollbar-width: none; } .carousel-track::-webkit-scrollbar { display: none; } .testimonial { flex: 0 0 360px; max-width: 85vw; scroll-snap-align: start; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 2rem; } .testimonial .stars { color: var(--gold); letter-spacing: 2px; margin-bottom: 1rem; font-size: 0.95rem; } .testimonial blockquote { font-size: 1.02rem; color: var(--white); line-height: 1.6; margin-bottom: 1.4rem; } .testimonial .who { display: flex; align-items: center; gap: .8rem; } .testimonial .avatar { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--gold2)); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 1rem; } .testimonial .who b { color: var(--white); font-weight: 700; font-size: 0.95rem; display: block; } .testimonial .who span { color: var(--muted); font-size: 0.85rem; } .carousel-nav { display: flex; gap: .6rem; margin-top: 1.6rem; } .car-btn { width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow); cursor: pointer; font-size: 1.1rem; color: var(--white); display: flex; align-items: center; justify-content: center; transition: all .2s; } .car-btn:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); } /* ─── GYIK ACCORDION ─── */ .faq { max-width: 60rem; margin-top: 1rem; display: flex; flex-direction: column; gap: 1rem; } .faq-item { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-family: 'Inter', sans-serif; font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; color: var(--white); background: none; border: none; cursor: pointer; padding: 1.3rem 1.6rem; text-align: left; } .faq-ic { flex: none; width: 26px; height: 26px; position: relative; transition: transform .25s; } .faq-ic::before, .faq-ic::after { content: ''; position: absolute; background: var(--gold); border-radius: 2px; } .faq-ic::before { top: 12px; left: 4px; right: 4px; height: 2px; } .faq-ic::after { left: 12px; top: 4px; bottom: 4px; width: 2px; transition: transform .25s; } .faq-item.open .faq-ic::after { transform: scaleY(0); } .faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; } .faq-a-inner { padding: 0 1.6rem 1.4rem; color: var(--text); font-size: 1rem; line-height: 1.65; } /* ─── USE-CASE BUILDER (váltogatható folyamat-diagram) ─── */ .usecase { display: grid; grid-template-columns: 300px 1fr; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; } .uc-tabs { background: var(--bg2); padding: .8rem; display: flex; flex-direction: column; gap: .3rem; border-right: 1px solid var(--border); } .uc-tab { font-family: 'Inter', sans-serif; text-align: left; background: none; border: none; border-left: 3px solid transparent; border-radius: 10px; padding: .9rem 1rem; cursor: pointer; transition: background .2s, border-color .2s, box-shadow .2s; } .uc-tab:hover { background: rgba(240,145,60,0.06); } .uc-tab.active { background: #fff; border-left-color: var(--gold); box-shadow: var(--shadow); } .uc-tab b { display: block; font-size: .98rem; font-weight: 700; letter-spacing: -0.01em; color: var(--white); margin-bottom: .15rem; } .uc-tab span { font-size: .85rem; color: var(--muted); line-height: 1.4; } .uc-canvas { padding: 2.5rem 2rem; position: relative; display: flex; align-items: center; min-height: 340px; overflow: hidden; background-image: radial-gradient(rgba(27,26,36,0.055) 1px, transparent 1.5px); background-size: 22px 22px; } .uc-panel { display: none; width: 100%; } .uc-panel.active { display: block; animation: fadeUp .4s ease; } /* node-folyam */ .wf { display: flex; align-items: center; gap: .55rem; overflow-x: auto; padding-bottom: .6rem; scrollbar-width: none; } .wf::-webkit-scrollbar { display: none; } .wf-node { display: flex; align-items: center; gap: .6rem; background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); padding: .65rem .85rem; flex: none; } .wf-node.accent { border-color: var(--gold); box-shadow: 0 10px 24px rgba(240,145,60,0.20); } .wf-ic { width: 36px; height: 36px; border-radius: 9px; flex: none; background: var(--bg2); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; overflow: hidden; } .wf-node.accent .wf-ic { background: rgba(240,145,60,0.14); } .wf-ic img { width: 26px; height: 26px; object-fit: contain; } .wf-label b { display: block; font-size: .85rem; font-weight: 700; color: var(--white); line-height: 1.2; white-space: nowrap; } .wf-label small { font-size: .72rem; color: var(--muted); white-space: nowrap; } .wf-conn { width: 26px; height: 2px; background: var(--border); position: relative; flex: none; } .wf-conn::after { content: ''; position: absolute; right: -1px; top: 50%; transform: translateY(-50%); border-left: 6px solid var(--gold); border-top: 4px solid transparent; border-bottom: 4px solid transparent; } /* elágazás (egy node → két kimenet) */ .wf-fork { display: flex; align-items: center; flex: none; } .fork-stem { width: 18px; height: 2px; background: var(--border); flex: none; } .wf-branch { position: relative; display: flex; flex-direction: column; gap: 1rem; padding-left: 18px; } .wf-branch::before { content: ''; position: absolute; left: 0; top: 25%; bottom: 25%; width: 2px; background: var(--border); } .wf-branch.b3 { gap: .8rem; } .wf-branch.b3::before { top: 16.5%; bottom: 16.5%; } .wf-branch.b4 { gap: .7rem; } .wf-branch.b4::before { top: 11%; bottom: 11%; } .branch-row { display: flex; align-items: center; } .fork-arm { width: 18px; height: 2px; background: var(--border); flex: none; position: relative; } .fork-arm::after { content: ''; position: absolute; right: -1px; top: 50%; transform: translateY(-50%); border-left: 6px solid var(--gold); border-top: 4px solid transparent; border-bottom: 4px solid transparent; } /* összevonás (két bemenet → egy node) */ .wf-merge { display: flex; align-items: center; flex: none; } .merge-col { position: relative; display: flex; flex-direction: column; gap: 1rem; width: 200px; } .merge-col::after { content: ''; position: absolute; right: 0; top: 25%; bottom: 25%; width: 2px; background: var(--border); } .branch-row-in { display: flex; align-items: center; } .branch-row-in .wf-node { flex: 1; min-width: 0; } .merge-arm { width: 18px; height: 2px; background: var(--border); flex: none; } .wf-node.multi { gap: .5rem; } .wf-minis { display: flex; gap: .25rem; } .wf-mini { width: 30px; height: 30px; border-radius: 8px; background: #fff; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; overflow: hidden; flex: none; } .wf-mini img { width: 22px; height: 22px; object-fit: contain; } @media (max-width: 820px) { .usecase { grid-template-columns: 1fr; } .uc-tabs { flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--border); scrollbar-width: none; } .uc-tabs::-webkit-scrollbar { display: none; } .uc-tab { flex: none; min-width: 210px; border-left: none; border-bottom: 3px solid transparent; } .uc-tab.active { border-left: none; border-bottom-color: var(--gold); } .uc-canvas { min-height: 260px; padding: 2rem 1.2rem; } } /* ─── RESZPONZÍV ─── */ @media (max-width: 980px) { .stats { grid-template-columns: repeat(2, 1fr); } .flow { grid-template-columns: repeat(3, 1fr); } .flow-step:nth-child(3)::after { display: none; } } @media (max-width: 600px) { .stats { grid-template-columns: repeat(2, 1fr); } .flow { grid-template-columns: repeat(2, 1fr); } .flow-step:nth-child(odd)::after { display: none; } .testimonial { flex-basis: 300px; } } /* ───────────────────────────────────────────── ÁRAZÁS OLDAL ───────────────────────────────────────────── */ /* "Hamarosan" jelvény a modulkártyákon */ .soon-badge { display: inline-block; font-family: 'Inter', sans-serif; font-size: .6rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: var(--bg2); color: var(--gold-d); border: 1px solid var(--border); padding: .16rem .55rem; border-radius: var(--radius-pill); margin-left: .55rem; vertical-align: middle; } .feature-card.is-soon { background: var(--bg2); } /* Modulkártya fejléc (ikon + cím egy sorban, jelvénnyel) */ .mod-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .7rem; } .mod-head .feature-icon { margin-bottom: 0; } .mod-head h3 { margin-bottom: 0; } /* Marketplace rács — logó + ország-chipek */ .mk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 1rem; } .mk-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.6rem 1.5rem; } .mk-card-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .9rem; } .mk-card-head img { width: 30px; height: 30px; object-fit: contain; } .mk-card-head .mk-emoji { width: 36px; height: 36px; border-radius: 10px; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; background: rgba(240,145,60,0.10); } .mk-card-head .mk-name { font-size: 1.1rem; font-weight: 700; color: var(--white); letter-spacing: -0.01em; } .cc-row { display: flex; flex-wrap: wrap; gap: .45rem; } .cc { display: inline-flex; align-items: center; gap: .45rem; font-family: 'Inter', sans-serif; font-size: .78rem; font-weight: 600; color: var(--text); background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: .22rem .65rem; } .cc.cc-soon { color: var(--muted); } .cc-flag { width: 18px; height: 13px; object-fit: cover; border-radius: 2px; flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(27,26,36,0.08); } .cc-logo { width: 16px; height: 16px; object-fit: contain; flex: 0 0 auto; } .feat-note { color: var(--muted); font-size: .82rem; font-weight: 400; } @media (max-width: 900px) { .mk-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .mk-grid { grid-template-columns: 1fr; } } /* Piactér-lista (függőleges: piactér balra, országok jobbra) */ .mk-list { margin-top: 1.2rem; } .mk-list-title { font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gold); margin-bottom: .6rem; } .mk-row { display: flex; align-items: center; gap: 1.2rem; padding: .7rem 0; border-bottom: 1px solid var(--border); } .mk-row:last-child { border-bottom: none; } .mk-row-head { display: flex; align-items: center; gap: .6rem; flex: 0 0 150px; min-width: 0; } .mk-row-head img { width: 26px; height: 26px; object-fit: contain; } .mk-row-head .mk-emoji { width: 30px; height: 30px; border-radius: 8px; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; background: rgba(240,145,60,0.10); } .mk-row-head .mk-name { font-size: 1rem; font-weight: 700; color: var(--white); letter-spacing: -0.01em; } .mk-row .cc-row { flex: 1 1 auto; } @media (max-width: 600px) { .mk-row { flex-direction: column; align-items: flex-start; gap: .5rem; } .mk-row-head { flex: none; } } /* ─── Havi / éves kapcsoló ─── */ .pricing-toggle-wrap { display: flex; justify-content: center; padding: 0 1.5rem; margin-top: -1rem; } .pricing-toggle { display: inline-flex; align-items: center; gap: .7rem; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-pill); padding: .45rem .9rem; box-shadow: var(--shadow); font-family: 'Inter', sans-serif; font-size: .92rem; font-weight: 600; color: var(--text); } .pricing-toggle .save { color: var(--gold2); font-weight: 700; } .switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: none; } .switch input { opacity: 0; width: 0; height: 0; } .switch .slider { position: absolute; inset: 0; cursor: pointer; background: var(--bg2); border: 1px solid var(--border); border-radius: 999px; transition: .2s; } .switch .slider::before { content: ''; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px; background: var(--gold); border-radius: 50%; transition: .2s; } .switch input:checked + .slider { background: rgba(240,145,60,0.15); border-color: var(--gold); } .switch input:checked + .slider::before { transform: translateX(20px); } /* ─── Csomag-rács + kártyák ─── */ .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 1.5rem; } .pricing-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } .pricing-grid--single { grid-template-columns: minmax(0, 540px); justify-content: center; } .tier-card--gift { border-color: var(--gold2); background: rgba(132,184,63,0.06); } .tier-badge--gift { background: var(--gold2); } .gift-lead { font-size: .92rem; color: var(--text); margin: .35rem 0 .6rem; } /* Mintaoldal-előnézet az ajándék-kártyában — hoverre ránagyít */ .gift-preview { display: block; flex: 0 0 auto; height: 200px; margin-top: auto; margin-bottom: 1.1rem; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 6px 18px rgba(0,0,0,0.10); cursor: zoom-in; } .gift-preview img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .5s ease; } .aio-duo .tier-cta { margin-top: 0; } .gift-preview:hover img { transform: scale(1.22); } .gift-preview:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* Választott szolgáltatások a kapcsolat űrlapon */ .svc-list { overflow-x: auto; } .svc-table { width: 100%; border-collapse: collapse; font-size: .86rem; } .svc-table th, .svc-table td { border: 1px solid var(--border); padding: .5rem .55rem; text-align: center; vertical-align: middle; } .svc-table th { background: var(--bg2); color: var(--white); font-weight: 700; font-size: .76rem; } .svc-table th:first-child, .svc-table td:first-child { text-align: left; } .svc-td-name { font-weight: 700; color: var(--white); } .svc-td-empty { color: var(--muted); } .svc-table input[type="radio"] { width: 18px; height: 18px; min-width: 18px; padding: 0; margin: 0; accent-color: var(--gold); cursor: pointer; } /* All-in-one + ajándék — kiemelt összevont keret */ .aio-bundle { position: relative; max-width: 900px; margin: 2.4rem auto 0; padding: 2.4rem 1.6rem 1.6rem; border: 2px solid var(--gold); border-radius: calc(var(--radius) + 6px); background: linear-gradient(180deg, rgba(240,145,60,0.07), rgba(132,184,63,0.05)); box-shadow: 0 24px 60px rgba(240,145,60,0.18); } .aio-bundle-tag { position: absolute; top: -.9rem; left: 50%; transform: translateX(-50%); background: var(--gold); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: .35rem 1.1rem; border-radius: var(--radius-pill); white-space: nowrap; box-shadow: 0 8px 20px rgba(240,145,60,0.3); } .aio-duo { display: flex; align-items: stretch; justify-content: center; gap: 1.2rem; } .aio-duo .tier-card { flex: 1 1 0; margin: 0; } .aio-plus { flex: 0 0 auto; align-self: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; width: 66px; height: 66px; border-radius: 50%; background: #fff; border: 2px solid var(--gold); box-shadow: 0 8px 22px rgba(240,145,60,0.28); } .aio-plus-sign { font-size: 1.7rem; font-weight: 800; color: var(--gold); line-height: 1; } .aio-plus-gift { font-size: 1.2rem; line-height: 1; } @media (max-width: 760px) { .aio-plus { margin: -.4rem auto; } } @media (max-width: 760px) { .aio-duo { flex-direction: column; } } .tier-card { position: relative; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.9rem 1.5rem 1.6rem; display: flex; flex-direction: column; } .tier-card.featured { border-color: var(--gold); box-shadow: 0 16px 44px rgba(240,145,60,0.18); } .tier-badge { position: absolute; top: -.7rem; left: 50%; transform: translateX(-50%); background: var(--gold); color: #fff; font-size: .6rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: .2rem .7rem; border-radius: var(--radius-pill); white-space: nowrap; } .tier-name { font-size: 1.1rem; font-weight: 700; color: var(--white); letter-spacing: -0.01em; } .price { margin: .55rem 0 1.1rem; } .price-amount { font-size: 2rem; font-weight: 800; color: var(--white); letter-spacing: -0.02em; } .price-period { font-size: .85rem; color: var(--muted); font-weight: 600; } .price-annual-note { display: block; font-size: .76rem; color: var(--gold2); font-weight: 600; margin-top: .25rem; min-height: 1.1em; } .tier-features { list-style: none; display: flex; flex-direction: column; gap: .55rem; margin: .2rem 0 1.4rem; } .tier-features li { position: relative; padding-left: 1.6rem; font-size: .92rem; color: var(--text); line-height: 1.5; } .tier-features li::before { content: '✓'; position: absolute; left: 0; color: var(--gold2); font-weight: 800; } .tier-cta { margin-top: auto; text-align: center; } /* Modul szekció fejléc (ikon + cím) */ .module-price-head { display: flex; align-items: center; gap: .7rem; } .module-price-head .feature-icon { margin-bottom: 0; flex: none; } @media (max-width: 980px) { .pricing-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 820px) { .pricing-grid, .pricing-grid.cols-4 { grid-template-columns: 1fr; } } /* ───────────────────────────────────────────── ÁRAZÁS KONFIGURÁTOR + KALKULÁTOR ───────────────────────────────────────────── */ .config-wrap { display: grid; grid-template-columns: 1fr 330px; gap: 2rem; align-items: start; margin-top: 1.5rem; position: relative; } .cfg-group-title { font-family: 'Inter', sans-serif; font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--gold); margin: 1.8rem 0 .9rem; } .cfg-group-title:first-child { margin-top: 0; } .cfg-row { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.2rem 1.3rem; margin-bottom: 1rem; } .cfg-rowhead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .cfg-title { display: flex; align-items: center; gap: .7rem; } .cfg-title .feature-icon { width: 42px; height: 42px; font-size: 1.2rem; margin-bottom: 0; flex: none; } .cfg-name { font-size: 1.05rem; font-weight: 700; color: var(--white); letter-spacing: -0.01em; } .cfg-controls { display: flex; align-items: center; gap: .55rem; } .cfg-bl { font-size: .82rem; font-weight: 600; color: var(--text); white-space: nowrap; } .cfg-bl .save { color: var(--gold2); font-weight: 700; } .switch--sm { width: 40px; height: 23px; } .switch--sm .slider::before { height: 15px; width: 15px; } .switch--sm input:checked + .slider::before { transform: translateX(17px); } .cfg-expand { background: none; border: 1px solid var(--border); border-radius: var(--radius-pill); padding: .3rem .85rem; font-family: 'Inter', sans-serif; font-size: .82rem; font-weight: 600; color: var(--gold-d); cursor: pointer; transition: border-color .2s, background .2s; white-space: nowrap; } .cfg-expand:hover { border-color: var(--gold); background: rgba(240,145,60,0.06); } .cfg-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin-top: 1.1rem; } .cfg-opts.cols-4 { grid-template-columns: repeat(4, 1fr); } .cfg-opt { position: relative; text-align: left; cursor: pointer; background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .25rem; font-family: 'Inter', sans-serif; transition: border-color .18s, background .18s, box-shadow .18s; } .cfg-opt:hover { border-color: var(--gold); } .cfg-opt.active { border-color: var(--gold); background: rgba(240,145,60,0.08); box-shadow: 0 6px 18px rgba(240,145,60,0.14); } .cfg-opt.active::after { content: '✓'; position: absolute; top: .55rem; right: .75rem; color: var(--gold); font-weight: 800; } .cfg-opt-name { font-size: 1.05rem; font-weight: 700; color: var(--white); } .cfg-opt-price { font-size: 1.15rem; font-weight: 800; color: var(--gold-d); } .cfg-opt-sub { font-size: .74rem; color: var(--muted); } .cfg-opt-price s { color: var(--muted); font-weight: 600; } .cfg-opt-promo { display: block; margin-top: .15rem; color: var(--gold2); font-weight: 800; font-size: .82rem; } .cfg-opt-net { color: var(--muted); font-weight: 600; font-size: .6rem; } .cfg-opt-eur { display: block; margin-top: .1rem; color: var(--muted); font-weight: 700; font-size: .78rem; } .cfg-opt-promo-eur { color: var(--gold2); font-weight: 800; } /* Pénznem-váltó az összegzőben */ .cfg-sum-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: 1rem; } .cfg-sum-head h3 { margin-bottom: 0; } .cfg-cur { display: inline-flex; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 2px; flex: 0 0 auto; } .cfg-cur-btn { border: none; background: none; cursor: pointer; font-family: 'Inter', sans-serif; font-size: .82rem; font-weight: 700; color: var(--muted); padding: .25rem .7rem; border-radius: var(--radius-pill); transition: background .2s, color .2s; } .cfg-cur-btn.active { background: var(--gold); color: #fff; } .cfg-details-link { margin-top: 1rem; padding-top: .9rem; border-top: 1px dashed var(--border); } .cfg-details-link a { font-family: 'Inter', sans-serif; font-size: .9rem; font-weight: 700; color: var(--gold-d); text-decoration: none; } .cfg-details-link a:hover { text-decoration: underline; } /* Hamarosan modul a konfigurátorban */ .cfg-soon { margin-top: 1rem; padding: .9rem 1rem; border: 1px dashed rgba(224,86,79,0.45); background: rgba(224,86,79,0.07); border-radius: var(--radius-sm); color: #E0564F; font-weight: 700; font-size: .92rem; } .cfg-row.is-soon .soon-badge { background: rgba(224,86,79,0.12); color: #E0564F; border-color: rgba(224,86,79,0.4); } .cfg-opt-pick { margin-top: .8rem; width: 100%; background: var(--gold); color: #fff; border: none; cursor: pointer; font-family: 'Inter', sans-serif; font-size: .88rem; font-weight: 700; padding: .58rem .8rem; border-radius: var(--radius-pill); transition: background .2s; } .cfg-opt-pick:hover { background: var(--gold-d); } .cfg-opt.active .cfg-opt-pick { background: var(--gold2); } .cfg-opt-expand { margin-top: .6rem; align-self: center; background: none; border: none; padding: 0; font-family: 'Inter', sans-serif; font-size: .78rem; font-weight: 700; color: var(--gold-d); cursor: pointer; } .cfg-opt-expand:hover { text-decoration: underline; } .cfg-pick-note { margin-top: .8rem; font-size: .82rem; color: var(--muted); font-weight: 600; } .cfg-pick-note.on { color: var(--gold2); } .cfg-rownote { margin-top: .7rem; padding: .7rem .9rem; background: rgba(132,184,63,0.08); border: 1px solid rgba(132,184,63,0.3); border-radius: var(--radius-sm); font-size: .85rem; font-weight: 600; color: var(--gold2); } .cfg-groupnote { margin: 1.1rem 0 .2rem; padding: 1rem 1.1rem; background: rgba(132,184,63,0.07); border: 1px solid rgba(132,184,63,0.28); border-radius: var(--radius-sm); } .cfg-groupnote-title { display: block; font-family: 'Inter', sans-serif; font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--gold); margin-bottom: .5rem; } .cfg-groupnote p { font-size: .9rem; line-height: 1.65; color: var(--text); margin: 0 0 .55rem; } .cfg-groupnote p:last-child { margin-bottom: 0; } .cfg-groupnote strong { color: var(--white); font-weight: 700; } .cfg-details { display: none; margin-top: 1.1rem; border-top: 1px dashed var(--border); padding-top: 1.1rem; } .cfg-row.is-open .cfg-details { display: block; } .cfg-row:hover .cfg-details { display: block; } .cfg-details-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; } .cfg-details-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } .cfg-det-name { font-size: .85rem; font-weight: 700; color: var(--white); margin-bottom: .5rem; } .cfg-details .tier-features { margin: 0; } .cfg-details .tier-features li { font-size: .86rem; } /* Kalkulátor panel — a jobb oszlopban; JS pinneli, hogy görgetéskor kövesse a képernyőt */ .cfg-summary { position: static; z-index: 20; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 1.4rem; transition: opacity .25s ease, visibility .25s ease; } .cfg-summary.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; } .cfg-summary h3 { font-size: 1.1rem; font-weight: 700; color: var(--white); margin-bottom: 1rem; } .cfg-sum-line { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .65rem 0; border-bottom: 1px solid var(--border); font-size: .92rem; color: var(--text); } .cfg-sum-line b { font-size: 1.2rem; color: var(--white); white-space: nowrap; } .cfg-sum-line.muted { color: var(--muted); border-bottom: none; } .cfg-summary .btn-primary { width: 100%; text-align: center; margin-top: 1.1rem; } .cfg-sum-aio { display: block; width: 100%; text-align: center; margin-top: .6rem; font-size: .82rem; line-height: 1.3; padding: .55rem .8rem; } .cfg-sum-fine { font-size: .74rem; color: var(--muted); margin-top: .85rem; line-height: 1.5; } .cfg-note-wrap { margin: .2rem 0 .5rem; } .cfg-note-label { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gold); margin-bottom: .35rem; } .cfg-note { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .55rem .7rem; font-family: 'Inter', sans-serif; font-size: .9rem; color: var(--text); resize: vertical; box-sizing: border-box; } .cfg-note:focus { outline: none; border-color: var(--gold); } /* Felső végösszeg + tételes lista */ .cfg-sum-total { margin: .2rem 0 .8rem; } .cfg-sum-total-amt { display: block; font-size: 1.65rem; font-weight: 800; color: var(--white); letter-spacing: -0.02em; line-height: 1.1; } .cfg-sum-total-yr { display: block; font-size: .85rem; color: var(--muted); font-weight: 600; margin-top: .15rem; } .cfg-sum-first { display: block; font-size: 1.05rem; font-weight: 800; color: var(--gold2); margin-top: .3rem; } .cfg-items { margin: .5rem 0 .2rem; border-top: 1px solid var(--border); padding-top: .8rem; } .cfg-items-title { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gold); margin-bottom: .55rem; } .cfg-item { display: flex; justify-content: space-between; gap: .6rem; align-items: baseline; padding: .32rem 0; font-size: .84rem; border-bottom: 1px solid var(--border); } .cfg-item:last-child { border-bottom: none; } .cfg-item-name { color: var(--text); } .cfg-item-tier { display: block; color: var(--muted); font-weight: 600; font-size: .8rem; } .cfg-item-tag { font-size: .6rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--gold2); } .cfg-item-price { color: var(--white); font-weight: 700; white-space: nowrap; } .cfg-items-empty { font-size: .84rem; color: var(--muted); } /* Akciós (99 Ft) megjelenítés az összegzőben */ .cfg-sum-total-amt s { display: block; font-size: .9rem; font-weight: 600; color: var(--muted); } .cfg-sum-green { color: var(--gold2); } .cfg-item-price { white-space: normal; text-align: right; } .cfg-item-price s { display: block; color: var(--muted); font-weight: 600; } .cfg-item-green { display: block; color: var(--gold2); font-weight: 800; } /* All-in-one kártya saját kapcsoló */ .aio-billing { display: flex; align-items: center; gap: .55rem; margin: .2rem 0 .4rem; } @media (max-width: 980px) { .config-wrap { grid-template-columns: 1fr; } .cfg-details-grid, .cfg-details-grid.cols-4 { grid-template-columns: 1fr; } .cfg-list { padding-bottom: 110px; } /* Mobil: alsó sáv */ .cfg-summary { position: fixed; top: auto; right: 0; left: 0; bottom: 0; width: 100%; max-width: none; z-index: 50; border-radius: 0; border-left: none; border-right: none; padding: .8rem 1.2rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .cfg-summary h3, .cfg-summary .cfg-sum-fine, .cfg-summary .cfg-items, .cfg-summary .cfg-sum-total-yr, .cfg-summary .cfg-note-wrap { display: none; } .cfg-summary .cfg-sum-total { margin: 0; flex: 1 1 auto; } .cfg-summary .cfg-sum-line { border: none; padding: .1rem 0; flex: 1 1 auto; } .cfg-summary .btn-primary { width: auto; margin-top: 0; flex: 0 0 auto; } } @media (max-width: 620px) { .cfg-opts, .cfg-opts.cols-4 { grid-template-columns: 1fr; } .cfg-rowhead { gap: .6rem; } .cfg-summary .btn-primary { width: 100%; } } .aszf-date { display: inline-flex; align-items: center; font-size: .85rem; font-weight: 600; color: var(--muted); margin-left: .2rem; } /* ─── Jogi dokumentumok: kitöltendő adatblokk és aláírás-sáv (DPA, NDA) ─── */ .legal-fill { border: 1px solid rgba(255,255,255,.14); border-radius: .6rem; padding: 1rem 1.1rem; margin: 0 0 1.2rem; background: rgba(255,255,255,.03); color: var(--text); font-size: .95rem; line-height: 1.9; } .legal-sign { display: flex; flex-wrap: wrap; gap: 2.5rem; margin: 2.5rem 0 1rem; } .legal-sign > div { flex: 1 1 15rem; text-align: center; color: var(--muted); font-size: .9rem; font-weight: 600; } .legal-sign-line { display: block; border-top: 1px solid rgba(255,255,255,.28); margin: 0 0 .5rem; } /* ─── Nyomtatás / PDF (pl. ÁSZF) ─── */ @media print { nav, footer, .cookie-bar, #cookieBar, .floating-tab, .nav-toggle, .page-hero-bg, .menu-overlay, .mobile-menu, .aszf-pdf-link, .aszf-date, .aszf-archive, .section-divider { display: none !important; } body { background: #fff !important; color: #000 !important; } .page-hero { padding: .5rem 1.5rem 1rem !important; min-height: 0 !important; } .page-hero h1, .legal h2, .legal h3, .legal strong { color: #000 !important; } .legal p, .legal li, .lead { color: #1B1A24 !important; } .legal-fill { border-color: #999 !important; background: #fff !important; color: #000 !important; } .legal-sign > div { color: #000 !important; } .legal-sign-line { border-top-color: #000 !important; } a { color: #000 !important; text-decoration: underline; } section { padding: .5rem 1.5rem !important; } } /* ═══════════════════════════════════════════════════════════════════ SALES LANDING (monolith-erp.php) — saját „ml-” névtér. A szöveg Anna László anyagából származik; itt csak a megjelenés van. Minden osztály ml- előtaggal, hogy semmi ne ütközzön a meglévővel. ═══════════════════════════════════════════════════════════════════ */ /* A horgonymenü miatt a szekciók ne csússzanak a sáv alá */ .ml-anchors ~ section[id], section[id].contact-section { scroll-margin-top: 124px; } /* ─── Hero ─── */ .ml-hero .page-hero-inner { max-width: 940px; margin-inline: auto; text-align: center; } .ml-hero h1 { /* Az alap `.page-hero h1` 4,4rem-ig nő és `max-width: 20ch` — rövid, balra zárt címekhez. Középre zárt hero-ban a 20ch-s doboznak nincs automatikus margója, ezért balra ül (a szöveg optikailag elcsúszik), ráadásul a szűk doboz fölöslegesen három sorba töri a címet. Itt tehát feloldjuk és középre zárjuk a dobozt is. */ max-width: none; margin-inline: auto; font-size: clamp(2.1rem, 4vw, 3.5rem); text-wrap: balance; margin-bottom: 1.2rem; } .ml-hero .lead { margin-left: auto; margin-right: auto; max-width: 720px; text-wrap: pretty; } .ml-hero .cta-row { justify-content: center; } /* ─── Horgonymenü ─── */ .ml-anchors { /* FONTOS: a menu.css `nav { display:flex; padding:.5rem 2.5rem; justify-content:space-between }` szabálya minden