/* ============================================================ netmetro — "Our mission" / "Küldetésünk" oldal (.nm redesign) Közös az EN (en/contents/content_about.php) és HU (hu/...) változathoz. ÖNÁLLÓ: a content-partial linkeli a Sora/Hanken fontot; itt minden .nm érték hardcode-olva, mert az aloldal-layout (layout_default) nem tölti a nm-redesign.css-t. Scope: minden szabály a .nm-about alatt. ============================================================ */ /* Tokenek + alap .nm tipográfia: közös nm-tokens.css (a layout_default -je tölti). A .nm-about.nm wrapper a .nm osztály révén megkapja — itt már nem duplikáljuk (Fázis 2b). */ .nm-about *,.nm-about *::before,.nm-about *::after{box-sizing:border-box;} .nm-about h1,.nm-about h2,.nm-about h3,.nm-about h4{font-family:var(--nm-font-display);font-weight:700;line-height:1.1;letter-spacing:-.02em;margin:0;color:var(--nm-ink);} .nm-about p{margin:0;} .nm-about a{color:inherit;text-decoration:none;} .nm-about svg{display:block;overflow:visible;} .nm-about .nm-container{width:100%;max-width:var(--nm-container);margin:0 auto;padding:0 28px;position:relative;z-index:2;} .nm-about .nm-eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--nm-font-display);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--nm-primary);} .nm-about .nm-eyebrow::before{content:"";width:26px;height:2px;background:var(--nm-primary);border-radius:2px;} .nm-about .nm-eyebrow.on-dark{color:#ffb4a8;} .nm-about .nm-eyebrow.on-dark::before{background:#ffb4a8;} .nm-about .nm-lead{font-size:19px;color:var(--nm-ink-soft);margin-top:22px;} .nm-about .nm-hl{color:var(--nm-primary);} .nm-about .nm-btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--nm-font-display);font-weight:600;font-size:16px;padding:15px 26px;border-radius:999px;line-height:1;transition:transform .2s var(--nm-ease),box-shadow .25s,background .2s,color .2s;cursor:pointer;border:0;} .nm-about .nm-btn svg{width:18px;height:18px;} .nm-about .nm-btn-primary{background:var(--nm-primary);color:#fff;box-shadow:var(--nm-shadow-primary);} .nm-about .nm-btn-primary:hover{transform:translateY(-2px);color:#fff;} .nm-about .nm-btn-ghost{background:transparent;color:var(--nm-ink);border:1.5px solid var(--nm-line);} .nm-about .nm-btn-ghost:hover{border-color:var(--nm-ink);transform:translateY(-2px);} .nm-about .nm-btn-lg{padding:18px 32px;font-size:17px;} .nm-about .nm-cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap;} /* ====== HERO ====== */ .nm-about .nm-hero{position:relative;overflow:hidden;background:var(--nm-bg);} .nm-about .nm-fx{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;} .nm-about .nm-blob{display:block;border-radius:50%;filter:blur(64px);position:absolute;} .nm-about .nm-b-red{width:440px;height:440px;opacity:.45;top:-12%;right:-6%;background:radial-gradient(circle,color-mix(in srgb,var(--nm-primary) 75%,transparent),transparent 68%);animation:nm-drift1 15s var(--nm-ease) infinite;} .nm-about .nm-b-navy{width:400px;height:400px;opacity:.40;bottom:-22%;left:-8%;background:radial-gradient(circle,color-mix(in srgb,var(--nm-navy) 65%,transparent),transparent 68%);animation:nm-drift2 19s var(--nm-ease) infinite;} .nm-about .nm-b-gold{width:280px;height:280px;opacity:.38;top:34%;left:46%;background:radial-gradient(circle,color-mix(in srgb,var(--nm-accent) 70%,transparent),transparent 66%);animation:nm-drift1 17s var(--nm-ease) infinite reverse;} .nm-about .nm-fx-grid{position:absolute;inset:-18%;background-image:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--nm-ink) 34%,transparent) 1.2px,transparent 0);background-size:32px 32px;opacity:.13;-webkit-mask-image:radial-gradient(125% 100% at 62% 0%,#000 28%,transparent 74%);mask-image:radial-gradient(125% 100% at 62% 0%,#000 28%,transparent 74%);} .nm-about .nm-net{position:absolute;inset:-6%;width:112%;height:112%;opacity:.4;-webkit-mask-image:linear-gradient(100deg,transparent 6%,#000 34%);mask-image:linear-gradient(100deg,transparent 6%,#000 34%);} .nm-about .nm-net polyline{fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:9 15;} .nm-about .nm-net .nm-route-a polyline{stroke:var(--nm-primary);animation:nm-dash 5s linear infinite;} .nm-about .nm-net .nm-route-b polyline{stroke:var(--nm-navy);animation:nm-dash 7s linear infinite reverse;} .nm-about .nm-net .nm-stn{fill:var(--nm-surface);stroke-width:2.6;} .nm-about .nm-net .nm-route-a .nm-stn{stroke:var(--nm-primary);} .nm-about .nm-net .nm-route-b .nm-stn{stroke:var(--nm-navy);} @keyframes nm-dash{to{stroke-dashoffset:-48;}} @keyframes nm-drift1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(26px,-22px) scale(1.06);}} @keyframes nm-drift2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-30px,18px) scale(1.08);}} @keyframes nm-floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}} .nm-about .nm-floaty{animation:nm-floaty 6s var(--nm-ease) infinite;} .nm-about .nm-floaty.nm-d1{animation-delay:-2s;} .nm-about .nm-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding:74px 0 96px;} .nm-about .nm-hero h1{font-size:clamp(33px,4.4vw,54px);} /* ---- founder's note card (a régi csapatfotó HELYÉRE) ---- */ .nm-about .nm-qcard{position:relative;background:var(--nm-surface);border:1px solid var(--nm-line);border-radius:var(--nm-radius-lg);box-shadow:var(--nm-shadow);padding:40px 36px;} .nm-about .nm-qcard .nm-qlabel{display:flex;align-items:center;gap:9px;font-family:var(--nm-font-display);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--nm-ink-soft);} .nm-about .nm-qcard .nm-qlabel::before{content:"";width:22px;height:2px;background:var(--nm-primary);border-radius:2px;} .nm-about .nm-qmark{position:absolute;top:20px;right:30px;font-family:var(--nm-font-display);font-weight:800;font-size:120px;line-height:.7;color:var(--nm-primary);opacity:.13;} .nm-about .nm-qcard blockquote{margin:22px 0 28px;font-family:var(--nm-font-display);font-weight:700;font-size:clamp(21px,2.3vw,27px);line-height:1.3;letter-spacing:-.01em;color:var(--nm-ink);} .nm-about .nm-author{display:flex;align-items:center;gap:14px;} .nm-about .nm-avatar{width:52px;height:52px;border-radius:15px;background:linear-gradient(135deg,var(--nm-primary),#f0873f);color:#fff;display:grid;place-items:center;font-family:var(--nm-font-display);font-weight:800;font-size:18px;box-shadow:var(--nm-shadow-primary);} .nm-about .nm-aname{font-family:var(--nm-font-display);font-weight:700;font-size:16px;} .nm-about .nm-arole{font-size:13.5px;color:var(--nm-ink-soft);} .nm-about .nm-float{position:absolute;background:var(--nm-surface);border-radius:16px;box-shadow:var(--nm-shadow);border:1px solid var(--nm-line);padding:13px 16px;display:flex;gap:12px;align-items:center;z-index:3;} .nm-about .nm-fic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex:0 0 auto;} .nm-about .nm-fic svg{width:20px;height:20px;} .nm-about .nm-ft{display:block;font-family:var(--nm-font-display);font-weight:700;font-size:15px;line-height:1.1;} .nm-about .nm-fd{display:block;font-size:12.5px;color:var(--nm-ink-soft);margin-top:2px;} /* ====== SECTIONS ====== */ .nm-about .nm-section{padding:clamp(60px,8vw,100px) 0;position:relative;background:var(--nm-bg);} .nm-about .nm-section.bg-2{background:var(--nm-surface-2);} .nm-about .nm-section.bg-dark{background:var(--nm-dark);color:var(--nm-dark-ink);} .nm-about .nm-section.bg-dark h2,.nm-about .nm-section.bg-dark h3{color:#fff;} .nm-about .nm-section.bg-dark .nm-prose p{color:var(--nm-dark-soft);} .nm-about .nm-section-head{max-width:780px;} .nm-about .nm-section-head.center{margin:0 auto;text-align:center;} .nm-about .nm-section-head h2{font-size:clamp(28px,3.6vw,42px);margin-top:14px;} .nm-about .nm-prose{max-width:780px;margin-top:26px;} .nm-about .nm-prose p{margin-top:18px;color:var(--nm-ink-soft);font-size:17.5px;} .nm-about .nm-prose strong{color:var(--nm-ink);font-weight:600;} .nm-about .nm-section.bg-dark .nm-prose strong{color:#fff;} .nm-about .nm-pullquote{margin:34px 0 0;padding:24px 28px;border-left:3px solid var(--nm-primary);background:color-mix(in srgb,var(--nm-primary) 7%,transparent);border-radius:0 14px 14px 0;font-family:var(--nm-font-display);font-weight:700;font-size:clamp(20px,2.2vw,26px);line-height:1.3;color:var(--nm-ink);} .nm-about .nm-section.bg-dark .nm-pullquote{background:rgba(255,255,255,.06);color:#fff;border-left-color:#ffb4a8;} /* ---- 3-card "how" grid ---- */ .nm-about .nm-cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:54px;} .nm-about .nm-card{background:var(--nm-surface);border:1px solid var(--nm-line);border-radius:var(--nm-radius);box-shadow:var(--nm-shadow-sm);padding:30px 26px;} .nm-about .nm-card-ic{width:50px;height:50px;border-radius:14px;background:color-mix(in srgb,var(--nm-primary) 12%,transparent);color:var(--nm-primary);display:grid;place-items:center;margin-bottom:18px;} .nm-about .nm-card-ic svg{width:24px;height:24px;} .nm-about .nm-card h3{font-size:19px;} .nm-about .nm-card p{margin-top:10px;color:var(--nm-ink-soft);font-size:15.5px;} /* ---- CTA strip ---- */ .nm-about .nm-ctaband{background:var(--nm-dark);color:#fff;border-radius:var(--nm-radius-lg);padding:54px 48px;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;box-shadow:var(--nm-shadow);} .nm-about .nm-ctaband h2{color:#fff;font-size:clamp(24px,3vw,34px);max-width:620px;} @media (max-width:900px){ .nm-about .nm-grid{grid-template-columns:1fr;gap:40px;padding:48px 0 60px;} .nm-about .nm-cards-3{grid-template-columns:1fr;} .nm-about .nm-float{display:none;} } @media (prefers-reduced-motion:reduce){ .nm-about .nm-blob,.nm-about .nm-net polyline,.nm-about .nm-floaty{animation:none!important;} }