). ============================================================= */ .n360{ --color-bg: #ebeae5; --color-bg-alt: #f4f3f0; --color-surface: #fcfbf9; --color-primary: #4c6665; --color-primary-dark: #34504f; --color-accent: #ad7b6b; --color-navy: #00192f; --color-slate: #9ab5ae; --color-text: #00192f; --color-text-dim: #5f6a70; --color-border: rgba(var(--color-navy-rgb),0.10); /* Warianty R,G,B (bez #) — potrzebne wszędzie tam, gdzie kolor trzeba złożyć w rgba() z własnym poziomem przezroczystości (cienie, poświaty, tła kul); same zmienne HEX z wiersza wyżej się tu nie nadają. Dzięki temu każda nowa paleta kolorystyczna (patrz .n360.n360-ocean w pliku n360-theme-ocean.css) nadpisuje WSZYSTKO, podmieniając tylko te zmienne — bez dotykania reguł CSS w tym i w drugim arkuszu. */ --color-primary-rgb: 76,102,101; --color-accent-rgb: 173,123,107; --color-slate-rgb: 154,181,174; --color-navy-rgb: 0,25,47; --color-bg-alt-rgb: 244,243,240; --color-surface-rgb: 252,251,249; --color-glass-rgb: 219,218,213; /* dawniej „Beige #DBDAD5” z nagłówka — pas refrakcji na szklanych kartach */ --color-accent-text: #2a1109; /* tekst na przyciskach/akcentach w --color-accent — musi z nim kontrastować */ --color-step1: #7e9a93; /* dodatkowe odcienie do kółek diagramu „Jak to działa” / „Zespół” */ --color-step4: #6b7f86; /* Kierunek światła: z lewej góry -> cień pada w prawo-dół */ --shadow: 10px 16px 30px -10px rgba(var(--color-navy-rgb),0.28); --shadow-icon: 5px 6px 12px rgba(var(--color-navy-rgb),.4); --radius: 22px; --pill-radius: 60px; --edge-opacity: .4; --maxw: 1180px; font-family:'Roboto', system-ui, -apple-system, sans-serif; background:var(--color-bg); color:var(--color-text); line-height:1.6; } /* Ramka demo ma szerokość 100vw (wyłamuje się z kontenera Elementora). 100vw liczy też szerokość pionowego suwaka, więc bez tego pojawiałby się poziomy pasek przewijania. `clip` na bywa niestabilne (propaguje się na cały viewport i w niektórych przeglądarkach potrafi zablokować przewijanie strony) — `hidden` jest bezpieczniejsze i tu wystarczające. */ body{overflow-x:hidden;} .n360 *{box-sizing:border-box;margin:0;padding:0;} .n360 a{color:inherit;text-decoration:none;} .n360 img{max-width:100%;display:block;} .n360 .container{max-width:var(--maxw);margin:0 auto;padding:0 24px;} .n360 .n360-sec{padding:110px 0;position:relative;} /* text-transform/letter-spacing z !important — Elementor ma globalne "Site Settings" z czcionkami nagłówków (Cal Sans / Golos Text), które nadpisują .n360 hX zwykłą regułą elementu h1..h6 — te fonty są wizualnie grubsze/większe niż Roboto 700, mimo tej samej deklarowanej wagi. Bez !important nagłówki wychodzą Z Wielkiej Litery Każdego Słowa. UWAGA: font-family/font-weight celowo BEZ !important — inaczej blokowałyby własny wybór czcionki/wagi z kontrolki typografii na widgecie (np. Orbitron w Hero), bo taka kontrolka generuje zwykłą (nie !important) regułę i nawet wyższa specyficzność jej selektora ({{WRAPPER}} .hero h1) nie pomaga przeciw !important. Samo .n360 h1 nadal wygrywa z gołym "h1,h2,h3" z kitu Elementora dzięki wyższej specyficzności (klasa+element vs sam element), więc domyślne Roboto 700 działa i tak, bez !important. */ .n360 h1,.n360 h2,.n360 h3{ line-height:1.15;color:var(--color-navy); font-family:'Roboto', system-ui, -apple-system, sans-serif; font-weight:700; text-transform:none !important;letter-spacing:normal !important; } .n360 h2{font-size:clamp(28px,4vw,42px);margin-bottom:16px;} .n360 .eyebrow{ display:inline-block;color:var(--color-primary); font-weight:700;letter-spacing:.08em;text-transform:uppercase; font-size:13px;margin-bottom:14px; } .n360 .lead{color:var(--color-text-dim);font-size:18px;max-width:640px;} .n360 .center{text-align:center;margin-left:auto;margin-right:auto;} /* ---------- MENU ---------- */ .n360-nav{ position:sticky;top:0;z-index:100; backdrop-filter:blur(12px); background:rgba(255,255,255,0.85); border-bottom:1px solid rgba(var(--color-navy-rgb),0.10); } .n360-nav nav{ max-width:1180px;margin:0 auto;padding:16px 24px; display:flex;align-items:center;justify-content:space-between; } .n360 .logo{font-weight:800;font-size:20px;letter-spacing:-.02em;color:var(--color-navy);} .n360 .logo span, .n360 .b360{color:var(--color-primary);} .n360 .nav-links{display:flex;gap:32px;font-size:15px;color:var(--color-text-dim);} .n360 .nav-links a:hover{color:var(--color-navy);} /* pulsowanie pozycji menu — --pulse-color/--pulse-dur/--pulse-scale ustawiane inline z panelu widgetu (osobno dla każdej pozycji, w PHP) */ .n360 .nav-links a.nav-pulse{ position:relative; animation:n360NavPulse var(--pulse-dur,1.6s) ease-in-out infinite; } .n360 .nav-links a.nav-pulse::before{ content:'';position:absolute;inset:-8px -12px;z-index:-1;border-radius:999px; background:var(--pulse-color,var(--color-primary));opacity:.16; animation:n360NavPulseRing var(--pulse-dur,1.6s) ease-out infinite; } @keyframes n360NavPulse{ 0%,100%{transform:scale(1);color:inherit;} 50%{transform:scale(var(--pulse-scale,1.12));color:var(--pulse-color,var(--color-primary));} } @keyframes n360NavPulseRing{ 0%{opacity:.22;transform:scale(.85);} 70%{opacity:0;transform:scale(1.35);} 100%{opacity:0;transform:scale(1.35);} } @media (prefers-reduced-motion: reduce){ .n360 .nav-links a.nav-pulse, .n360 .nav-links a.nav-pulse::before{animation:none;} } .n360 .nav-cta{display:flex;gap:12px;} /* ---------- PRZYCISKI ---------- */ .n360 .btn{ display:inline-flex;align-items:center;gap:8px; padding:13px 26px;border-radius:999px;font-weight:700;font-size:15px; border:1px solid transparent;cursor:pointer;transition:transform .2s ease, box-shadow .2s ease; white-space:nowrap; } .n360 .btn:hover{transform:translateY(-2px);} .n360 .btn-primary{background:var(--color-primary);color:#fff;box-shadow:0 10px 24px -10px rgba(var(--color-primary-rgb),.6);} .n360 .btn-primary:hover{box-shadow:0 14px 28px -10px rgba(var(--color-primary-rgb),.8);} .n360 .btn-outline{background:#fff;border-color:var(--color-border);color:var(--color-navy);} .n360 .btn-outline:hover{border-color:var(--color-primary);} .n360 .btn-accent{background:var(--color-accent);color:var(--color-accent-text);} .n360 .btn-sm{padding:9px 18px;font-size:14px;} /* ikony w przyciskach — płaskie, biorą kolor tekstu */ .n360 .btn .ico{width:17px;height:17px;flex:0 0 auto;fill:currentColor;display:block;} .n360 .btn-sm .ico{width:15px;height:15px;} /* PRZYCISKI WYPUKŁE (hero, „Dla kogo”, baner, stopka, wycena, prezentacja wdrożenia) */ .n360 .hero .hero-cta .btn, .n360 .audience-card .btn, .n360 .cta-banner .btn, .n360 .footer-call .btn, .n360 .n360-quote .btn, .n360 .showcase-n3d .btn{ position:relative; box-shadow: 9px 11px 18px -6px rgba(var(--color-navy-rgb),.28), -6px -7px 14px -7px rgba(255,255,255,.65), inset 2px 2px 2px -1px rgba(255,255,255,.55), inset -2px -3px 4px -2px rgba(var(--color-navy-rgb),.22); transition:top .18s ease, box-shadow .18s ease; } .n360 .hero .hero-cta .btn:hover, .n360 .audience-card .btn:hover, .n360 .cta-banner .btn:hover, .n360 .footer-call .btn:hover, .n360 .n360-quote .btn:hover, .n360 .showcase-n3d .btn:hover{ transform:none;top:-2px; box-shadow: 12px 15px 24px -7px rgba(var(--color-navy-rgb),.32), -7px -9px 16px -8px rgba(255,255,255,.75), inset 2px 2px 2px -1px rgba(255,255,255,.6), inset -2px -3px 4px -2px rgba(var(--color-navy-rgb),.24); } /* blask kontaktowy w trybie soft-light */ .n360 .hero .hero-cta .btn::before, .n360 .audience-card .btn::before, .n360 .cta-banner .btn::before, .n360 .footer-call .btn::before, .n360 .n360-quote .btn::before, .n360 .showcase-n3d .btn::before{ content:'';position:absolute;inset:0;z-index:-1;pointer-events:none; border-radius:inherit; background:rgba(255,255,255,.55); transform:translate(-3px,-4px); filter:blur(7px); mix-blend-mode:soft-light; } .n360 .cta-banner .btn-outline::before{display:none;} .n360 .hero .hero-cta .btn:hover::before, .n360 .audience-card .btn:hover::before, .n360 .cta-banner .btn:hover::before, .n360 .showcase-n3d .btn:hover::before{transform:translate(-4px,-5px);} .n360 .hero .hero-cta .btn:active::before, .n360 .audience-card .btn:active::before, .n360 .cta-banner .btn:active::before, .n360 .showcase-n3d .btn:active::before{transform:translate(-1px,-1px);} .n360 .hero .hero-cta .btn:active, .n360 .audience-card .btn:active, .n360 .cta-banner .btn:active, .n360 .footer-call .btn:active, .n360 .n360-quote .btn:active, .n360 .showcase-n3d .btn:active{ transform:none;top:1px; box-shadow: 3px 4px 7px -3px rgba(var(--color-navy-rgb),.22), -3px -3px 6px -3px rgba(255,255,255,.85), inset 5px 6px 10px -4px rgba(var(--color-navy-rgb),.32), inset -3px -4px 8px -4px rgba(255,255,255,.5); } /* OBRYSY DEKORACYJNE wokół przycisku — poza przyciskiem, więc hover ich nie rusza. z-index:0 (nie samo position:relative) tworzy WŁASNY kontekst warstwowania — bez tego obrysy (z-index:-1) "toną" pod całym nieprzezroczystym tłem najbliższego przodka, który sam tworzy kontekst (np. karty .showcase-n3d), zamiast wylądować tylko za samym przyciskiem. Zaobserwowane w karcie Nawigatora 3D: obrysy były niewidoczne wszędzie poza kartą — malowały się pod całym jej tłem, widoczne tylko tam, gdzie wystawały poza jej krawędź. */ .n360 .cta-wrap{ position:relative;z-index:0;display:inline-flex; --ring-gap:50px; --ring-gap-2:80px; --ring4-shift:95px; } .n360 .cta-wrap .hero-ring{ position:absolute;z-index:-1;pointer-events:none; border:1px solid rgba(var(--color-primary-rgb),.24); } .n360 .cta-wrap .r1{inset:calc(-1 * var(--ring-gap)); border-radius:999px;} .n360 .cta-wrap .r2{inset:calc(-1 * var(--ring-gap-2));border-radius:999px;} /* duże koła otaczają pigułki, nie przecinają ich; średnica liczona od szerokości przycisku */ .n360 .cta-wrap .r3{ width:calc(200% + 230px);aspect-ratio:1;height:auto;border-radius:50%; left:0;top:50%;transform:translate(-50%,-50%); border-color:rgba(var(--color-primary-rgb),.30); } .n360 .cta-wrap .r4{ width:calc(200% + 500px);aspect-ratio:1;height:auto;border-radius:50%; left:0;top:50%;transform:translate(calc(-50% - var(--ring4-shift)),-50%); border-color:rgba(var(--color-primary-rgb),.30); } /* na banerze obrysy w kolorze przycisku akcentowego */ .n360 .cta-banner .cta-wrap .hero-ring{border-color:rgba(var(--color-accent-rgb),.45);} .n360 .cta-banner .cta-wrap .r3{border-color:rgba(var(--color-accent-rgb),.50);} .n360 .cta-banner .cta-wrap .r4{border-color:rgba(var(--color-accent-rgb),.50);} /* ---------- HERO ---------- */ /* z-index:2 — Hero i „Czym jest” to osobne widgety Elementora, każdy z własnym nieprzezroczystym tłem (.n360{background:...}), więc kolejny widget w DOM zwyczajnie zamalowuje to, co wystaje poza dolną krawędź poprzedniego. Duże obrysy kół w .cta-wrap (r3/r4) celowo wychodzą poza sekcję Hero — bez podniesienia z-index byłyby ucinane równą linią na granicy sekcji. Wciąż mieszczą się w górnym paddingu „Czym jest” (110px), więc nie nachodzą na jego treść. Nav ma z-index:100, więc nadal zostaje nad tym bez zmian. */ .n360 .hero{ position:relative;z-index:2; padding-top:120px;padding-bottom:100px; background: radial-gradient(600px 400px at 15% 20%, rgba(var(--color-primary-rgb),.12), transparent 60%), radial-gradient(500px 400px at 85% 10%, rgba(var(--color-accent-rgb),.14), transparent 60%); } /* !important na display/grid-template-columns: motyw Antra ma regułę z wyższą specyficznością narzucającą własny układ (prawdopodobnie block albo flex) na dzieciach .container — bez tego tekst i obrazek nie stoją obok siebie w dwóch kolumnach, tylko każdy zachowuje się jak osobny blok */ .n360 .hero-grid{ display:grid !important;grid-template-columns:1.1fr .9fr !important; gap:60px;align-items:center; perspective:1100px;perspective-origin:65% 50%; } .n360 .hero h1{font-size:clamp(36px,5.5vw,58px);margin-bottom:22px;} .n360 .hero h1 .highlight{color:var(--color-primary);} .n360 .hero p.lead{margin-bottom:34px;} .n360 .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:28px;} .n360 .hero-stats{display:flex;gap:36px;margin-top:40px;} .n360 .hero-stats div b{display:block;font-size:26px;color:var(--color-primary);} .n360 .hero-stats div span{font-size:13px;color:var(--color-text-dim);} .n360 .hero-visual{ border-radius:var(--radius); display:flex;align-items:center;justify-content:center; /* !important: bez tego telefon (position:absolute) traci punkt odniesienia, jeśli motyw nadpisze position na tym kontenerze, i "wypada" z nakładki do normalnego przepływu obok zrzutu zamiast go zachodzić */ position:relative !important; /* kolor widoczny w 10-pikselowej ramce wokół zrzutu */ background:linear-gradient(135deg, #ffffff, var(--color-bg-alt)); border:1px solid var(--color-border); box-shadow:var(--shadow); } .n360 .hero-visual--img{ padding:10px;overflow:visible; transform-style:preserve-3d; } .n360 .hero-visual--img > img{ width:100%;height:auto;display:block; border-radius:calc(var(--radius) - 10px); } /* MAKIETA TELEFONU nałożona na zrzut z komputera. position/left/bottom/z-index z !important — to one dają efekt nałożenia; motyw Antra ma na tyle specyficzne reguły, że bez !important telefon ląduje jako zwykły element w przepływie flexa .hero-visual, obok zrzutu, zamiast go zachodzić w lewym dolnym rogu. */ .n360 .hero-phone{ position:absolute !important;left:-36px !important;bottom:-48px !important;z-index:2 !important; transform-style:preserve-3d; width:146px;aspect-ratio:9/19.5; background:var(--color-navy);border-radius:25px;padding:0; box-shadow: 12px 15px 24px -10px rgba(var(--color-navy-rgb),.42), 4px 6px 9px -5px rgba(var(--color-navy-rgb),.32), inset 1px 1px 0 rgba(255,255,255,.30); } .n360 .hero-phone .hero-phone-notch{ position:absolute;top:10px;left:50%;transform:translateX(-50%); width:42px;height:6px;border-radius:99px;background:#000;z-index:2; } /* pole ekranu — osobna warstwa wcięta o grubość obudowy, żeby obraz nie wchodził na ramkę */ .n360 .hero-phone-screen{ position:absolute;inset:7px; border-radius:20px;overflow:hidden; } /* dwa ekrany przewijane w poziomie; trzeci kadr to kopia pierwszego, więc pętla nie skacze */ .n360 .hero-phone-track{ display:flex;width:100%;height:100%; animation:n360PhoneSwap 12s cubic-bezier(.7,0,.2,1) infinite; } .n360 .hero-phone-track img{ flex:0 0 100%;width:100%;height:100%; object-fit:cover;object-position:50% 0;display:block; } @keyframes n360PhoneSwap{ 0%,30% {transform:translateX(0);} 40%,70% {transform:translateX(-100%);} 80%,100% {transform:translateX(-200%);} } @media(prefers-reduced-motion: reduce){ .n360 .hero-phone-track{animation:none;} } /* ---------- CZYM JEST NAWIGATOR ---------- */ /* z-index:3 — wyżej niż .hero (2), żeby treść tej sekcji (obrazek, tekst) zasłaniała obrys koła wystający z Hero, a samo puste tło sekcji (poza about-grid) dalej go pokazywało — patrz komentarz przy .n360 .hero. */ .n360 .about-grid{ position:relative;z-index:3; display:grid !important;grid-template-columns:1fr 1fr !important; gap:60px;align-items:center; perspective:1100px;perspective-origin:35% 50%; } .n360 .about-visual--img{ padding:10px;border:none; background:linear-gradient(135deg,#ffffff,var(--color-bg)); border-radius:var(--radius); transform-style:preserve-3d; box-shadow:16px 22px 44px -18px rgba(var(--color-navy-rgb),.32), 3px 5px 12px -8px rgba(var(--color-navy-rgb),.18); } .n360 .about-visual--img img{width:100%;height:auto;display:block;border-radius:calc(var(--radius) - 10px);} @media(max-width:860px){ /* !important, bo bazowa reguła też ma !important — inaczej ten wariant mobilny nigdy by jej nie przebił i strona zostałaby na 2 kolumnach na telefonie */ .n360 .hero-grid,.n360 .about-grid{grid-template-columns:1fr !important;} .n360 .nav-links{display:none;} .n360 .hero-phone{left:auto;right:-10px;bottom:-36px;width:123px;} } /* ---------- OPAKOWANIA WIDGETÓW ---------- */ /* Menu: position:sticky nie zadziała, jeśli opakowanie przycina zawartość, dlatego wrapper widgetu menu ma overflow:visible i przezroczyste tło. */ .n360.n360-navwrap{overflow:visible;background:transparent;} /* Zastępnik obrazu, dopóki w Elementorze nie wybrano pliku */ .n360 .n360-ph{ display:flex;align-items:center;justify-content:center;text-align:center; min-height:220px;padding:24px; border-radius:calc(var(--radius) - 10px); background:repeating-linear-gradient(45deg,var(--color-bg-alt) 0 12px,var(--color-bg) 12px 24px); color:var(--color-text-dim);font-size:13.5px;line-height:1.5; } .n360 .hero-phone-screen .n360-ph{min-height:100%;height:100%;border-radius:0;font-size:11px;padding:8px;} .n360 .flow-node .n360-ph{position:absolute;inset:0;z-index:1;border-radius:50%;min-height:0;font-size:10px;padding:6px;}