/* ========================================================= Control Pass — alap ========================================================= */ *, *::before, *::after { box-sizing: border-box; } html, body, h1, h2, h3, h4, p, ul, ol, li, figure, blockquote { margin: 0; padding: 0; } ul, ol { list-style: none; } img { display: block; max-width: 100%; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } input, select, textarea { font: inherit; color: inherit; } :root { --paper: #f4f2ed; --paper-2: #ffffff; --paper-3: #eae7df; --ink: #14161a; --ink-2: #4b4f57; --ink-3: #646870; /* 5.0:1 papíron, 4.5:1 a --paper-3 sávon (WCAG AA) */ --rule: #dad6cc; --rule-2: #c3beb2; --accent: #0b5fa5; --brand: #2e7cc4; --brand-deep: #2e3399; --live: #1a7a48; /* Fix szerepű felületek: a felső szalag és a kapcsolat/lábléc sáv világos módban is sötét, ezért nem a --paper/--ink párost követik. */ --bar-bg: #14161a; --bar-fg: rgba(244,242,237,.72); --band-bg: #14161a; --band-fg: #e7e5e0; --band-rule: rgba(231,229,224,.25); --band-rule-2:rgba(231,229,224,.14); --band-mute: rgba(231,229,224,.5); --scrim: rgba(20,22,26,.55); --photo: saturate(.86) contrast(1.03); --portrait: grayscale(1) contrast(1.06) brightness(1.02); --portrait-on:grayscale(0) contrast(1) brightness(1); --mark: none; --sans: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif; --mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, Consolas, monospace; --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif; --gut: 28px; --max: 1320px; --ease: cubic-bezier(.22,.68,.3,1); color-scheme: light; } /* ── Sötét mód ── A választott téma a data-theme attribútumban él, amit a inline szkriptje ír ki még az első festés előtt. A lenti @media blokk ugyanezt a palettát ismétli, és csak akkor jut szerephez, ha a JS nem fut le: ilyenkor nincs data-theme, és a rendszerbeállítás dönt. */ :root[data-theme="dark"] { --paper: #1a1917; --paper-2: #211f1c; --paper-3: #121110; --ink: #ecebe4; --ink-2: #a9a69d; --ink-3: #8b877e; --rule: #322f2a; --rule-2: #4a4640; --accent: #6cb0ee; --brand: #5aa0e0; --brand-deep: #7b86e8; --live: #4bbd85; --bar-bg: #232120; --bar-fg: rgba(236,235,228,.62); --band-bg: #232120; --band-fg: #ecebe4; --band-rule: rgba(236,235,228,.22); --band-rule-2:rgba(236,235,228,.12); --band-mute: rgba(236,235,228,.48); --scrim: rgba(0,0,0,.66); --photo: saturate(.8) contrast(1.02) brightness(.88); --portrait: grayscale(1) contrast(1.02) brightness(.82); --portrait-on:grayscale(0) contrast(1) brightness(.94); --mark: brightness(0) invert(1); color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --paper: #1a1917; --paper-2: #211f1c; --paper-3: #121110; --ink: #ecebe4; --ink-2: #a9a69d; --ink-3: #8b877e; --rule: #322f2a; --rule-2: #4a4640; --accent: #6cb0ee; --brand: #5aa0e0; --brand-deep: #7b86e8; --live: #4bbd85; --bar-bg: #232120; --bar-fg: rgba(236,235,228,.62); --band-bg: #232120; --band-fg: #ecebe4; --band-rule: rgba(236,235,228,.22); --band-rule-2:rgba(236,235,228,.12); --band-mute: rgba(236,235,228,.48); --scrim: rgba(0,0,0,.66); --photo: saturate(.8) contrast(1.02) brightness(.88); --portrait: grayscale(1) contrast(1.02) brightness(.82); --portrait-on:grayscale(0) contrast(1) brightness(.94); --mark: brightness(0) invert(1); color-scheme: dark; } } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 104px; } /* Témaváltáskor a színátmenetek elmaszatolnák a váltást. */ .theme-switching, .theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: none !important; } body { font-family: var(--sans); font-size: 16.5px; line-height: 1.62; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; font-feature-settings: "kern" 1; overflow-x: hidden; } a { color: inherit; text-decoration: none; } ::selection { background: var(--ink); color: var(--paper); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ---- tipográfia segédosztályok ---- */ .mono { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 400; } .serif { font-family: var(--serif); } .h-display { font-size: clamp(40px, 6.1vw, 88px); font-weight: 700; line-height: .96; letter-spacing: -.038em; font-stretch: 105%; } .h-section { font-size: clamp(29px, 4.1vw, 54px); font-weight: 700; line-height: 1.02; letter-spacing: -.028em; text-wrap: balance; } .lead { font-family: var(--serif); font-size: clamp(18px, 1.55vw, 22px); line-height: 1.48; font-weight: 400; color: var(--ink-2); } .num { font-variant-numeric: tabular-nums; } /* ---- rács ---- */ .wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); } .grid12 { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 28px; } .rule { height: 1px; background: var(--rule); border: 0; } /* ---- segédosztályok ---- Ezek korábban inline style attribútumok voltak. A szigorú CSP viszont blokkolja a style="" attribútumot (hash-sel sem engedélyezhető), ezért minden statikus stílus osztályba került. Dinamikus értéket a site.js állít be CSSOM-on keresztül, ami CSP alatt megengedett. */ .col-title { grid-column: 1 / span 6; } .col-title-wide { grid-column: 1 / span 7; } .col-intro { grid-column: 8 / span 5; margin-top: 0; } /* megjelenés-késleltetés lépcsőzéshez */ .d1 { --d: .05s; } .d2 { --d: .10s; } .d3 { --d: .15s; } .d4 { --d: .20s; } .head-actions { display: flex; align-items: center; gap: 14px; } /* ---- szekció fejléc ---- */ .sec { padding: clamp(72px, 9vw, 130px) 0; } /* Módosítók: a .sec UTÁN kell állniuk, mert azonos specifikusságnál a később definiált szabály nyer. */ .sec-tight { padding-top: 0; } .sec-alt { background: var(--paper-3); } .sec-head { margin-bottom: clamp(40px, 5vw, 68px); } .sec-head .eyebrow { display: flex; align-items: baseline; gap: 14px; color: var(--ink-3); padding-bottom: 14px; margin-bottom: 26px; border-bottom: 1px solid var(--rule); } .sec-head .eyebrow b { color: var(--ink); font-weight: 500; } .sec-head .eyebrow .sp { flex: 1; } .sec-head p.intro { color: var(--ink-2); max-width: 52ch; margin-top: 18px; } /* ========================================================= Felső szalag ========================================================= */ .topbar { background: var(--bar-bg); color: var(--bar-fg); } .topbar .wrap { display: flex; align-items: center; justify-content: space-between; height: 34px; gap: 20px; } .topbar .mono { font-size: 10.5px; letter-spacing: .12em; white-space: nowrap; } .topbar .right { display: flex; gap: 22px; align-items: center; } .topbar a:hover { color: var(--band-fg); } .topbar .sep { opacity: .45; } /* ========================================================= Fejléc ========================================================= */ .head { position: sticky; top: 0; z-index: 60; background: var(--paper); border-bottom: 1px solid var(--rule); transition: transform .35s var(--ease), border-color .3s; } .head.is-hidden { transform: translateY(-101%); } .head .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 24px; } /* logó-lockup: a CP jelet kivágjuk a képből, a névsor típusból jön */ .lockup { display: flex; align-items: center; gap: 11px; } .lockup .mark { width: 44px; height: 25px; overflow: hidden; flex: none; filter: var(--mark); } .lockup .mark img { width: 44px; height: auto; } .lockup .wordmark { font-size: 13.5px; font-weight: 600; letter-spacing: .085em; text-transform: uppercase; line-height: 1; } .lockup .wordmark span { display: block; font-family: var(--mono); font-size: 9.5px; font-weight: 400; letter-spacing: .2em; color: var(--ink-3); margin-top: 4px; } .nav { display: flex; align-items: center; gap: 26px; } .nav a { font-family: var(--mono); font-size: 11px; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-2); padding: 6px 0; position: relative; transition: color .18s; } .nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .28s var(--ease); } .nav a:hover { color: var(--ink); } .nav a:hover::after { transform: scaleX(1); } .nav a.is-current { color: var(--ink); } .nav a.is-current::after { transform: scaleX(1); background: var(--accent); } .head-cta { display: inline-flex; align-items: center; gap: 9px; background: var(--ink); color: var(--paper); padding: 10px 16px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; transition: background .2s; } .head-cta:hover { background: var(--brand-deep); } .head-cta svg { width: 10px; height: 10px; } .theme-toggle { width: 34px; height: 34px; display: grid; place-items: center; flex: none; border: 1px solid var(--rule-2); color: var(--ink-2); transition: border-color .2s, color .2s; } .theme-toggle:hover { border-color: var(--ink); color: var(--ink); } .theme-toggle svg { width: 15px; height: 15px; } .theme-toggle .i-sun { display: none; } [data-theme="dark"] .theme-toggle .i-sun { display: block; } [data-theme="dark"] .theme-toggle .i-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .theme-toggle .i-sun { display: block; } :root:not([data-theme]) .theme-toggle .i-moon { display: none; } } .burger { display: none; width: 40px; height: 40px; position: relative; margin-right: -8px; } .burger i { position: absolute; left: 9px; width: 22px; height: 1.5px; background: var(--ink); transition: transform .3s var(--ease), opacity .2s; } .burger i:nth-child(1) { top: 15px; } .burger i:nth-child(2) { top: 21px; } .burger i:nth-child(3) { top: 27px; } body.menu-open .burger i:nth-child(1) { transform: translateY(6px) rotate(45deg); } body.menu-open .burger i:nth-child(2) { opacity: 0; } body.menu-open .burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .sheet { position: fixed; inset: var(--sheet-top, 103px) 0 0; z-index: 55; background: var(--paper); padding: 0 var(--gut); display: none; flex-direction: column; } body.menu-open .sheet { display: flex; } .sheet a { display: flex; align-items: baseline; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--rule); font-size: 26px; font-weight: 600; letter-spacing: -.02em; } .sheet a em { font-family: var(--mono); font-style: normal; font-size: 11px; color: var(--ink-3); letter-spacing: .1em; } .sheet .sheet-foot { margin-top: auto; padding: 26px 0; } /* ========================================================= Hero ========================================================= */ .hero { padding: clamp(56px, 7vw, 96px) 0 0; } .hero .grid12 { align-items: end; row-gap: 44px; } .hero-copy { grid-column: 1 / span 7; } .hero-eyebrow { color: var(--ink-3); margin-bottom: clamp(26px, 3.4vw, 44px); } .hero-copy h1 { margin-bottom: 30px; } .hero-copy h1 em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.02em; } .hero-copy .lead { max-width: 44ch; } .hero-actions { display: flex; flex-wrap: wrap; gap: 0 40px; margin-top: 38px; padding-top: 22px; border-top: 1px solid var(--rule); } .link-arrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; padding: 10px 0; position: relative; } .link-arrow svg { width: 13px; height: 13px; transition: transform .3s var(--ease); } .link-arrow::after { content: ""; position: absolute; left: 0; bottom: 4px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); } .link-arrow:hover svg { transform: translateX(5px); } .link-arrow:hover::after { transform: scaleX(1); } .hero-figure { grid-column: 9 / span 4; } .hero-figure .shot { aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-3); } .hero-figure img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 45%; filter: var(--photo); } .hero-figure figcaption { display: flex; gap: 10px; margin-top: 12px; color: var(--ink-3); font-size: 10.5px; line-height: 1.5; letter-spacing: .08em; } /* mérőszámok */ .metrics { margin-top: clamp(56px, 7vw, 96px); border-top: 1px solid var(--ink); display: grid; grid-template-columns: repeat(3, 1fr); } .metrics .m { padding: 26px 26px 30px 0; border-left: 1px solid var(--rule); padding-left: 26px; } .metrics .m:first-child { border-left: 0; padding-left: 0; } .metrics .m .v { font-size: clamp(38px, 4.6vw, 62px); font-weight: 700; letter-spacing: -.04em; line-height: 1; margin-bottom: 10px; } .metrics .m .l { color: var(--ink-3); } .scroll-cue { display: flex; align-items: center; gap: 10px; color: var(--ink-3); padding: 18px 0 0; } .scroll-cue svg { width: 12px; height: 12px; animation: nudge 2.4s var(--ease) infinite; } @keyframes nudge { 0%, 70%, 100% { transform: translateY(0); } 35% { transform: translateY(4px); } } /* ========================================================= 01 — Szolgáltatások ========================================================= */ .svc-list { border-top: 1px solid var(--ink); } .svc { display: grid; grid-template-columns: 64px 3.4fr 5fr 3.2fr; gap: 28px; padding: 30px 0 32px; border-bottom: 1px solid var(--rule); position: relative; transition: background .3s var(--ease); } .svc::before { content: ""; position: absolute; inset: 0 -20px; background: var(--paper-2); opacity: 0; transition: opacity .3s var(--ease); } .svc:hover::before { opacity: 1; } .svc > * { position: relative; } .svc .n { color: var(--ink-3); padding-top: 7px; } .svc h3 { font-size: clamp(20px, 2vw, 27px); font-weight: 600; letter-spacing: -.024em; line-height: 1.15; transition: transform .35s var(--ease); } .svc:hover h3 { transform: translateX(6px); } .svc p { color: var(--ink-2); max-width: 46ch; } .svc .tags { color: var(--ink-3); line-height: 1.9; padding-top: 5px; } .svc .tags span::after { content: " · "; opacity: .55; } .svc .tags span:last-child::after { content: ""; } /* ========================================================= 02 — Csomagok ========================================================= */ .plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; } .plan { padding: 26px 30px 32px 0; border-top: 1px solid var(--rule-2); border-left: 1px solid var(--rule); padding-left: 30px; } .plan:first-child { border-left: 0; padding-left: 0; } .plan.is-featured { border-top: 2px solid var(--ink); } .plan .tier { display: flex; justify-content: space-between; color: var(--ink-3); margin-bottom: 26px; } .plan .tier .rec { color: var(--accent); } .plan h3 { font-size: 26px; font-weight: 600; letter-spacing: -.025em; margin-bottom: 12px; } .plan .desc { color: var(--ink-2); font-size: 15.5px; min-height: 4.6em; } .plan ul { margin: 26px 0 30px; border-top: 1px solid var(--rule); } .plan li { display: grid; grid-template-columns: 22px 1fr; gap: 4px; padding: 11px 0; border-bottom: 1px solid var(--rule); font-size: 15px; line-height: 1.45; } .plan li::before { content: "+"; font-family: var(--mono); font-size: 12px; color: var(--ink-3); line-height: 1.7; } .plan .link-arrow { color: var(--ink); } .plan.is-featured .link-arrow { color: var(--accent); } /* ========================================================= 03 — Referenciák ========================================================= */ .filters { display: flex; gap: 26px; flex-wrap: wrap; margin-bottom: 30px; } .filters button { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding: 7px 0; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; } .filters button:hover { color: var(--ink); } .filters button.is-on { color: var(--ink); border-bottom-color: var(--ink); } .filters button i { font-style: normal; color: var(--ink-3); margin-left: 6px; } .ref { border-top: 1px solid var(--ink); } .ref-row { border-bottom: 1px solid var(--rule); } .ref-head { display: grid; grid-template-columns: 104px minmax(0,1fr) 190px 132px 132px 20px; gap: 24px; align-items: baseline; width: 100%; text-align: left; padding: 21px 0; transition: padding .3s var(--ease); } .ref-row:hover .ref-head { padding-left: 10px; padding-right: 10px; } .ref-year, .ref-cat, .ref-loc, .ref-state { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } .ref-title { font-size: 19px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; } .ref-state { display: inline-flex; align-items: center; gap: 8px; } .ref-state i { width: 6px; height: 6px; border-radius: 50%; background: var(--rule-2); flex: none; } .ref-state.is-active { color: var(--live); } .ref-state.is-active i { background: var(--live); } .ref-toggle { position: relative; height: 12px; justify-self: end; } .ref-toggle::before, .ref-toggle::after { content: ""; position: absolute; top: 5px; right: 0; width: 11px; height: 1px; background: var(--ink); transition: transform .3s var(--ease); } .ref-toggle::after { transform: rotate(90deg); } .ref-head[aria-expanded="true"] .ref-toggle::after { transform: rotate(0deg); } .ref-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); } .ref-head[aria-expanded="true"] + .ref-body { grid-template-rows: 1fr; } .ref-body > div { overflow: hidden; } .ref-body p { color: var(--ink-2); max-width: 62ch; padding: 0 0 26px 128px; font-size: 15.5px; } /* ========================================================= 04 — Partnerek ========================================================= */ .partners { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); } .partner { background: var(--paper); padding: 24px 24px 26px; min-height: 128px; display: flex; flex-direction: column; transition: background .25s; } .partner:hover { background: var(--paper-2); } .partner .top { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; color: var(--ink-3); } .partner .swatch { width: 10px; height: 10px; flex: none; transition: width .3s var(--ease); } .partner:hover .swatch { width: 26px; } .partner .pname { font-size: 16.5px; font-weight: 600; letter-spacing: -.015em; margin-top: auto; } .partner .ptype { color: var(--ink-3); margin-top: 6px; } /* ========================================================= 05 — Csapat ========================================================= */ .team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 28px; } .member .portrait { aspect-ratio: 1 / 1; overflow: hidden; background: var(--paper-3); margin-bottom: 16px; } .member .portrait img { width: 100%; height: 100%; object-fit: cover; filter: var(--portrait); transition: filter .5s var(--ease), transform .7s var(--ease); } .member:hover .portrait img { filter: var(--portrait-on); transform: scale(1.02); } .member .initials { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border: 1px solid var(--rule); font-family: var(--mono); font-size: clamp(26px, 3vw, 38px); letter-spacing: .04em; color: var(--ink-3); background: var(--paper); } .member .mname { font-size: 17.5px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; } .member .mrole { color: var(--ink-2); font-size: 14.5px; margin-top: 3px; } .member .mrole-en { display: block; color: var(--ink-3); margin-top: 5px; font-size: 10px; } .member .mmail { display: inline-block; margin-top: 12px; font-size: 13.5px; color: var(--ink-2); border-bottom: 1px solid var(--rule-2); padding-bottom: 2px; word-break: break-all; transition: color .2s, border-color .2s; } .member .mmail:hover { color: var(--accent); border-color: var(--accent); } .member .mtel { display: block; margin-top: 8px; font-size: 13.5px; color: var(--ink-2); } /* ========================================================= 06 — Kapcsolat + lábléc (sötét sáv) ========================================================= */ .dark { background: var(--band-bg); color: var(--band-fg); } .dark ::selection { background: var(--band-fg); color: #14161a; } .dark .sec-head .eyebrow { border-color: var(--band-rule-2); color: var(--band-mute); } .dark .sec-head .eyebrow b { color: var(--band-fg); } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 80px; } /* A sáv mindkét témában sötét, ezért itt fix áttetszőség is helyes. Nem a --band-mute, mert az a kisebb feliratokhoz halványabb. */ .contact-lead { color: rgba(231,229,224,.72); max-width: 38ch; margin-bottom: 38px; } .cdl { border-top: 1px solid rgba(231,229,224,.25); } .cdl div { display: grid; grid-template-columns: 132px 1fr; gap: 20px; padding: 17px 0; border-bottom: 1px solid rgba(231,229,224,.14); align-items: baseline; } .cdl dt { color: rgba(231,229,224,.5); } .cdl dd { font-size: 17px; font-weight: 500; letter-spacing: -.01em; } .cdl dd a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; } form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } .field { margin-bottom: 22px; } .field label { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(231,229,224,.5); margin-bottom: 9px; } .field input, .field select, .field textarea { width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(231,229,224,.28); padding: 9px 0; font-size: 16px; color: #fff; border-radius: 0; transition: border-color .25s; } .field textarea { min-height: 88px; resize: vertical; } .field select { appearance: none; cursor: pointer; } .field select option { background: var(--band-bg); color: var(--band-fg); } .field input::placeholder, .field textarea::placeholder { color: rgba(231,229,224,.3); } .field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-bottom-color: #fff; } .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 0; } .submit { width: 100%; background: var(--band-fg); color: #14161a; padding: 17px 22px; display: flex; align-items: center; justify-content: space-between; font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; transition: background .2s; } .submit:hover { background: #fff; } .submit svg { width: 14px; height: 14px; transition: transform .3s var(--ease); } .submit:hover svg { transform: translateX(5px); } .form-note { color: rgba(231,229,224,.42); margin-top: 14px; line-height: 1.7; } footer { border-top: 1px solid rgba(231,229,224,.18); } .foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding: 56px 0 44px; } .foot-brand p { color: rgba(231,229,224,.55); max-width: 34ch; font-size: 15px; margin-top: 20px; } .foot-brand .lockup .wordmark { color: #fff; } .foot-brand .lockup .wordmark span { color: rgba(231,229,224,.45); } .foot-brand .lockup .mark { filter: brightness(0) invert(1); opacity: .92; } .foot-col h4 { color: rgba(231,229,224,.45); font-weight: 400; margin-bottom: 18px; } .foot-col li { margin-bottom: 10px; } .foot-col a { color: rgba(231,229,224,.8); font-size: 14.5px; transition: color .2s; } .foot-col a:hover { color: #fff; } .foot-bottom { border-top: 1px solid rgba(231,229,224,.14); padding: 22px 0 30px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; color: rgba(231,229,224,.42); } .foot-bottom a:hover { color: #fff; } /* ========================================================= Modál ========================================================= */ .modal-bg { position: fixed; inset: 0; z-index: 80; background: var(--scrim); display: none; align-items: center; justify-content: center; padding: 24px; backdrop-filter: blur(2px); } .modal-bg.is-open { display: flex; } .modal { background: var(--paper); width: min(520px, 100%); max-height: 90vh; overflow-y: auto; padding: 34px; border: 1px solid var(--ink); position: relative; } .modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-bottom: 20px; margin-bottom: 24px; border-bottom: 1px solid var(--rule); } .modal-head .mono { color: var(--ink-3); } .modal h3 { font-size: 25px; font-weight: 600; letter-spacing: -.025em; margin-top: 10px; } .modal .x { width: 26px; height: 26px; position: relative; flex: none; } .modal .x::before, .modal .x::after { content: ""; position: absolute; left: 3px; top: 12px; width: 20px; height: 1.5px; background: var(--ink); } .modal .x::before { transform: rotate(45deg); } .modal .x::after { transform: rotate(-45deg); } .modal textarea { min-height: 70px; } .modal .field label { color: var(--ink-3); } .modal .field input, .modal .field textarea { color: var(--ink); border-bottom-color: var(--rule-2); } .modal .field input::placeholder, .modal .field textarea::placeholder { color: var(--ink-3); } .modal .field input:focus, .modal .field textarea:focus { border-bottom-color: var(--ink); } .modal .submit { background: var(--ink); color: var(--paper); } .modal .submit:hover { background: var(--brand-deep); } .modal .form-note { color: var(--ink-3); } /* ========================================================= Megjelenés-animáció ========================================================= */ .js [data-reveal] { opacity: 0; transform: translateY(14px); } .js [data-reveal].is-in { opacity: 1; transform: none; transition: opacity .6s var(--ease) var(--d, 0s), transform .6s var(--ease) var(--d, 0s); } /* ========================================================= Reszponzív ========================================================= */ @media (max-width: 1080px) { .nav { display: none; } .burger { display: block; } .head-cta { display: none; } .hero-copy { grid-column: 1 / span 12; } .hero-figure { grid-column: 1 / span 12; max-width: 420px; } .hero-figure .shot { aspect-ratio: 16 / 11; } .svc { grid-template-columns: 48px 1fr; gap: 12px 20px; } .svc p { grid-column: 2; max-width: none; } .svc .tags { grid-column: 2; padding-top: 0; } .ref-head { grid-template-columns: 92px minmax(0,1fr) 130px 20px; } .ref-cat { display: none; } .ref-body p { padding-left: 116px; } .team { grid-template-columns: repeat(3, 1fr); } .partners { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 820px) { :root { --gut: 20px; } html { scroll-padding-top: 80px; } /* A szekciófejlécek ne maradjanak féloldalasak keskeny kijelzőn */ .col-title, .col-title-wide, .col-intro { grid-column: 1 / -1; } .col-intro { margin-top: 18px; } .topbar .right .hide-sm { display: none; } .plans { grid-template-columns: 1fr; } .plan { border-left: 0; padding-left: 0; padding-right: 0; margin-top: 34px; } .plan:first-child { margin-top: 0; } .plan .desc { min-height: 0; } .contact-grid { grid-template-columns: 1fr; gap: 52px; } .foot-grid { grid-template-columns: 1fr 1fr; gap: 34px; } .team { grid-template-columns: repeat(2, 1fr); } .partners { grid-template-columns: repeat(2, 1fr); } .metrics .m .v { font-size: 34px; } } @media (max-width: 620px) { body { font-size: 16px; } .metrics { grid-template-columns: 1fr; } .metrics .m { border-left: 0; padding: 18px 0; border-bottom: 1px solid var(--rule); display: flex; align-items: baseline; justify-content: space-between; gap: 20px; } .metrics .m .v { margin-bottom: 0; font-size: 32px; } .metrics .m .l { text-align: right; } .ref-head { grid-template-columns: 1fr 20px; gap: 8px 16px; padding: 18px 0; } .ref-year { grid-column: 1; } .ref-title { grid-column: 1 / -1; order: 2; } .ref-loc, .ref-state { order: 3; } .ref-loc { grid-column: 1; } .ref-state { grid-column: 1; } .ref-toggle { grid-row: 1; grid-column: 2; } .ref-body p { padding-left: 0; } .filters { gap: 18px; } form .row { grid-template-columns: 1fr; gap: 0; } .foot-grid { grid-template-columns: 1fr; } .modal { padding: 24px; } .topbar .hide-xs { display: none; } .topbar .mono { font-size: 10px; letter-spacing: .08em; } .topbar .right { gap: 16px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } .js [data-reveal] { opacity: 1; transform: none; } } @media print { .topbar, .head, .sheet, .modal-bg, .filters { display: none; } body { background: #fff; } }