/* ============================================================================ makeXcellence · theme.css — warstwa wyglądu (wrzesień 2026) ---------------------------------------------------------------------------- Jeden plik doładowany na KAŻDEJ stronie po jej własnych stylach. Nadpisuje tylko wygląd: fonty, promienie, karty, kolory akcentów, odstępy. Nie zmienia treści, H1/H2, kolejności sekcji ani danych dla Google. Wyłączenie = usunięcie ze strony. Fonty: Inter Tight (nagłówki), JetBrains Mono (kickery, liczby, etykiety), Barlow (tekst) — ładowane z Google Fonts w każdej strony. ========================================================================== */ /* ------------------------------------------------------------ 1. TOKENY -- */ :root{ --display:'Inter Tight','Inter',system-ui,-apple-system,'Segoe UI',sans-serif; --mono:'JetBrains Mono','Share Tech Mono',ui-monospace,Menlo,monospace; --body:'Barlow','Helvetica Neue',Arial,sans-serif; --bg:#0b0b0c; --panel:rgba(255,255,255,.028); --panel2:rgba(255,255,255,.016); --bdr:rgba(255,255,255,.085); --bdr-hi:rgba(255,222,89,.45); --txt-2:#c4c4c4; --r:12px; /* karty */ --r-sm:8px; /* przyciski, pola, małe boxy */ --r-pill:999px;/* pigułki, tagi */ } body{background:var(--bg)} /* ------------------------------------------------------ 2. TYPOGRAFIA ---- */ /* Nagłówki: Inter Tight, ciaśniejszy tracking, mniej wersalików */ .hero-title,.page-hero-title,.sec-title,.split-title,.cta-final h2,.founder-name, .fp-h1,.lf-h1,.wai-teaser-title,.game-title{ font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:.98} .hero-title{font-size:clamp(40px,6.6vw,92px);line-height:.96;margin-bottom:28px;max-width:1100px} .page-hero-title{font-size:clamp(38px,5.6vw,76px);line-height:.98} .sec-title{font-size:clamp(34px,4.6vw,62px);margin-bottom:18px} .split-title{font-size:clamp(30px,4vw,50px)} .cta-final h2{font-size:clamp(30px,4vw,48px)} .founder-name{font-size:clamp(28px,3.6vw,42px)} .fp-h1{font-size:clamp(44px,7vw,96px);letter-spacing:-.035em} /* Podtytuły: zwykły zapis zamiast wersalików w Barlow Condensed */ .hero-subtitle,.sec-subtitle{ font-family:var(--body);font-weight:500;font-size:clamp(18px,1.6vw,22px);line-height:1.45; color:var(--txt-2);text-transform:none;letter-spacing:0;max-width:680px} .hero-subtitle{margin-bottom:40px} .sec-subtitle{margin-bottom:28px} .hero-subtitle .y,.sec-subtitle .y{color:var(--yel);font-weight:700} .page-hero-sub,.fp-lead,.lf-lead{font-family:var(--body);font-size:clamp(18px,1.6vw,22px);line-height:1.5;color:var(--txt-2)} /* Tytuły kart / H3: Barlow 700, zwykły zapis */ .cel-title,.card-generic h3,.value-card h4,.usluga-title,.form-card h3,.method-card h3, .tl-content h4,.scenario-title,.blog-title,.blog-card h3,.fp-card-title,.lf-card-title{ font-family:var(--body);font-weight:700;text-transform:none;letter-spacing:-.01em;line-height:1.2} .cel-title,.card-generic h3,.form-card h3,.method-card h3{font-size:22px} .value-card h4,.usluga-title{font-size:19px} .tl-content h4{font-size:17px} .scenario-title{font-size:16px} /* Śródtytuły artykułu: Inter Tight, zwykły zapis */ .article-body h2{font-family:var(--display);font-weight:800;font-size:28px;letter-spacing:-.02em;text-transform:none;line-height:1.15} .article-body h3{font-family:var(--body);font-weight:700;font-size:20px;letter-spacing:0;text-transform:none} .article-body p,.article-body li{font-size:17px;line-height:1.7} /* Małe etykiety, które mają zostać w mono */ .cel-action,.discover-title,.role-title,.usluga-sub,.blog-meta,.thumb-corner,.sec-count,.video-countbar{ font-family:var(--mono);font-weight:500;letter-spacing:.14em;font-size:11px} .cel-num,.card-num,.usluga-num,.method-num{font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.08em;color:#666} .hero-prop-num{font-family:var(--mono);font-weight:500;font-size:13px;color:var(--yel);letter-spacing:.06em} /* Liczby w kafelkach KPI i statystykach: mono */ .kpi-cell,.kpi-stat-num,.kpi-sum-num{font-family:var(--mono);font-weight:700} .kpi-stat-num,.kpi-sum-num{font-size:22px} .about-stat .num,.about-stat-num,.stat-num,.pill-stat-num,.big-num{font-family:var(--display);font-weight:800;letter-spacing:-.03em} /* -------------------------------------------------------- 3. KICKERY ---- */ /* „// ETYKIETA" — bez obramowanej pigułki, sam mono */ .hero-kicker,.sec-kicker,.fp-kicker,.lf-kicker,.callout-kicker,.proces-cta-kicker,.game-kicker, .sources-kicker,.wai-teaser-kicker,.kicker{ display:inline-flex;align-items:center;gap:10px; padding:0;border:0;border-radius:0;background:none; font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.2em;color:var(--yel); text-transform:uppercase;max-width:100%} .fp-kicker-dot{display:none} .hero-kicker{margin-bottom:26px} .sec-kicker{margin-bottom:16px} .fp-kicker{margin-bottom:28px} .contact-info .sec-kicker,.kontakt-grid .sec-kicker{align-self:flex-start} .tag-poprzez,.split-tag{ font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.16em; color:var(--yel);background:rgba(255,222,89,.12);border:1px solid rgba(255,222,89,.35); border-radius:var(--r-pill);padding:7px 14px} /* ------------------------------------------------------- 4. NAWIGACJA ---- */ .nav{background:rgba(11,11,12,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)} .nav-links a,.topnav .nav-links a{ font-family:var(--body);font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase} .topnav{background:rgba(11,11,12,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)} .topnav-inner,.fp-wrap{max-width:1280px} .topnav .nav-links{gap:26px} .topnav .nav-links a{color:#bdbdbd} .topnav .nav-links a:hover{color:#fff} .topnav .nav-links a.active{color:var(--yel)} .nav-lang a{font-family:var(--body);font-weight:700;font-size:12px;border-radius:6px} .brand{font-family:var(--display);font-weight:800;letter-spacing:-.02em;font-size:19px} /* Podstrony na mobile: menu jako przewijany rząd pod logo (zamiast znikać) */ @media (max-width:820px){ .topnav-inner{flex-wrap:wrap;row-gap:12px} .topnav .nav-links{display:flex!important;order:3;width:100%;overflow-x:auto;gap:18px; padding:2px 0 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch} .topnav .nav-links::-webkit-scrollbar{display:none} .topnav .nav-links li{flex:0 0 auto} .topnav .nav-links a{font-size:12px;white-space:nowrap} } /* --------------------------------------------------- 5. HERO / NAGŁÓWKI -- */ /* bez żółtych „szyn" (dwa odcinki pod nagłówkiem i nad stopką) */ .hero::after,.page-hero::after,.footer::before{display:none} .hero{padding:96px 32px 88px; background: radial-gradient(900px 440px at 12% -10%,rgba(255,222,89,.13),transparent 70%), radial-gradient(700px 520px at 96% 110%,rgba(255,222,89,.05),transparent 70%), var(--bg)} .hero::before,.page-hero::before{opacity:.6; -webkit-mask-image:linear-gradient(#000 30%,transparent 100%);mask-image:linear-gradient(#000 30%,transparent 100%)} .page-hero{padding:72px 32px 64px; background:radial-gradient(800px 400px at 12% -10%,rgba(255,222,89,.11),transparent 70%),var(--bg)} /* 01–04 w hero: lista z liniami zamiast pudełek */ .hero-props{display:grid;grid-template-columns:repeat(2,1fr);gap:0 48px;max-width:880px;margin-bottom:44px} .hero-prop{background:none;border:0;border-top:1px solid var(--bdr);border-radius:0;padding:16px 0;gap:18px} .hero-prop:hover{transform:none;border-color:var(--bdr-hi)} .hero-prop-text{font-weight:500;font-size:17px;color:#f2f2f2} @media (max-width:600px){.hero-props{grid-template-columns:1fr;gap:0}.hero{padding:64px 20px 56px}} /* -------------------------------------------------------- 6. PRZYCISKI --- */ .btn-primary,.btn-secondary,.btn-sec,.page-btn,.fp-btn,.lf-btn,.vbtn{ font-family:var(--body);font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase; padding:15px 24px;border-radius:var(--r-sm)} .btn-secondary,.btn-sec{border:1px solid rgba(255,255,255,.18);color:#fff} .btn-secondary:hover,.btn-sec:hover{border-color:var(--yel);color:var(--yel);background:rgba(255,222,89,.06)} .btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(255,222,89,.18)} .filter-pill{font-family:var(--body);font-weight:600;font-size:12px;letter-spacing:.06em;padding:8px 16px} .nav-mobile-toggle{border-radius:var(--r-sm)} /* ----------------------------------------------------------- 7. KARTY ---- */ /* Jeden promień dla kart (12px) i jeden dla małych boxów (8–10px) */ .cel-tile,.cel-foot,.card-generic,.scenario-card,.about-stat,.tl-item,.value-card,.usluga, .blog-card,.callout,.form-card,.method-card,.ai-block,.proces-cta,.kpi-letter-card,.kpi-summary-bar, .contact-card,.stat-box,.pill-stat,.discover-card,.table-wrap,.role,.founder-card,.split-visual, .dashboard-frame,.founder-photo,.game-card,.fp-card,.lf-card,.tool-card,.video-featured,.video-card,.vsub{ border-radius:var(--r)} .cel-icon,.card-generic .icon-box,.scenario-icon,.scenario-cta,.benefit,.value-card .icon-box,.usluga-icon, .contact-card .icon-box,.thumb-icon,.form-card input,.form-card textarea,.form-success{border-radius:10px} .cel-icon,.card-generic .icon-box,.value-card .icon-box,.usluga-icon,.contact-card .icon-box{ background:rgba(255,222,89,.1);border:0} .cel-tile:hover,.card-generic:hover,.usluga:hover,.blog-card:hover,.value-card:hover,.tl-item:hover, .method-card:hover,.contact-card:hover,.discover-card:hover,.scenario-card:hover,.about-stat:hover{ border-color:var(--bdr-hi);transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,0,0,.35)} .cel-tile{padding:26px 26px 24px} .cel-icon{width:44px;height:44px;margin-bottom:26px} .cel-foot{background:none;border:0;border-left:2px solid var(--yel);border-radius:0;padding:6px 0 6px 22px; font-size:16px;color:var(--txt-2);font-weight:400} .form-card,.founder-card,.kpi-letter-card,.proces-cta,.ai-block{border-top:2px solid var(--yel)} .game-card{border:1px solid var(--bdr-hi);box-shadow:none; background:radial-gradient(600px 300px at 50% 0%,rgba(255,222,89,.10),transparent 70%),var(--panel)} .cta-final{border-top:1px solid var(--bdr); background:radial-gradient(900px 400px at 50% 0%,rgba(255,222,89,.10),transparent 65%),var(--bg);padding:96px 32px} /* Blog: znikają „duchy" tekstu nad obrazkiem (data i kategoria są w metryce pod nim) */ .blog-card .thumb-corner{display:none} .blog-card .thumb img{opacity:1!important} .blog-card .thumb{height:200px} /* ---------------------------------------------------------- 8. ODSTĘPY -- */ section.s{padding:80px 32px} @media (max-width:700px){section.s{padding:56px 20px}} .sec-inner{max-width:1280px} /* ---------------------------------------------------------- 9. STOPKA --- */ .footer{padding:56px 32px 28px;border-top:1px solid var(--bdr)} .footer .contact-card,.footer-card{border-radius:var(--r)} .fp-footer{font-family:var(--mono);font-size:11px;letter-spacing:.1em} /* ----------------------------------------------------- 10. PODSTRONY ----- */ /* FACTORY / PHYSICS: zamiast konturu — żółte słowo jak na stronie głównej (na WIDEO / NARZĘDZIA / TOOLS span .outline został usunięty z HTML — jeden wyraz, jeden kolor) */ .fp-h1 .outline{-webkit-text-stroke:0;color:var(--yel)} .fp-wrap{padding:80px 32px 100px} .callout{border-radius:var(--r)} @media (max-width:700px){.fp-wrap{padding:48px 20px 72px}} /* --------------------------------------------------- 11. DOSTĘPNOŚĆ ----- */ :focus-visible{outline:2px solid var(--yel);outline-offset:3px;border-radius:4px} @media (prefers-reduced-motion:reduce){*{transition:none!important}} /* ------------------------------------------------ 12. DOPRECYZOWANIA ---- */ /* tekst w kartach: czytelniejszy rozmiar */ .card-generic p,.usluga p,.usluga-desc,.value-card p,.method-card p,.tool-lead,.blog-excerpt,.blog-body p,.tl-content p{font-size:15px;line-height:1.6} .cta-final p{font-size:18px;line-height:1.5;color:var(--txt-2)} .card-generic .pill{font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:.02em;border-radius:var(--r-pill)} /* Cookies w stopce: w linii kontenera */ footer .mxc-link{display:block;max-width:1280px;margin:14px auto 0} .fp-footer .mxc-link,.lf-footer .mxc-link{display:inline;margin:0} /* Kafelki „Nasz cel" na telefonie: kompaktowe wiersze zamiast wysokich kart */ @media (max-width:700px){ .cel-grid{gap:10px} .cel-tile{display:grid;grid-template-columns:44px 1fr;column-gap:16px;align-items:center;padding:16px 18px} .cel-icon{margin:0;grid-row:1/3} .cel-action{margin-bottom:2px} .cel-title{font-size:18px} .cel-num{top:14px;right:16px} } /* Podstrony: ta sama szerokość kontenera co strona główna */ .topnav-inner,.fp-wrap,.lf-wrap{max-width:1280px} .lf-wrap{padding:80px 32px 100px} .lf-h1{font-size:clamp(40px,6vw,84px)} /* Podstrony: tytuły kart i przyciski jak na stronie głównej */ .tool-title,.fp-card-title,.lf-card-title,.tool-card h3,.fp-card h3,.lf-card h3{font-family:var(--body);font-weight:700;font-size:20px;letter-spacing:-.01em;text-transform:none;line-height:1.2} .tool-cta,.btn{font-family:var(--body);font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase;border-radius:var(--r-sm)} .tool-cta{padding:14px 22px} .tool-card{border-radius:var(--r)} .tool-thumb{height:160px} .tool-badge{font-family:var(--mono);letter-spacing:.14em} /* Narzędzia: karty „wkrótce" jako krótkie notki, nie pusta ⅔ rzędu */ .tools-grid{align-items:start} .tool-card.coming{opacity:.75;border-style:dashed} .tool-card.coming .tool-thumb{display:none} .tool-card.coming .tool-body{padding-top:52px} .tool-card.coming:hover{opacity:1} /* Etykiety statystyk: mono zamiast Arial Black */ .about-stat .lbl,.about-stat-lbl,.stat-lbl,.pill-stat-lbl,.lf-stat-lbl,.fp-stat-lbl,.stat-label{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase} /* Podstrony, mobile: delikatne wygaszenie prawej krawędzi przewijanego menu */ @media (max-width:820px){ .topnav .nav-links{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent);padding-right:24px} } /* 404 */ body.e404,.e404 .code,.e404 .brand,.e404 a{font-family:var(--display)} .e404 .code{font-weight:800;letter-spacing:-.04em} .e404 .msg{font-family:var(--body)}