/* =========================================
1. SETUP & VARIABLES
========================================= */
/* ŁADOWANIE CZCIONKI - Optymalizacja display: swap */
@font-face { font-family: "SteinerLight"; src: url("/assets/fonts/Steinerlight.ttf") format("truetype"); font-weight: normal; font-style: normal; font-display: swap; }
:root { --header-height: 72px; --radius: 4px; --easing: cubic-bezier(0.65, 0, 0.35, 1); --trans-speed: 0.8s; --bg-body: #f0f0f0; --bg-menu: #ffffff; --bg-card: #f8f9fa; --bg-secondary: #f4f4f4; --bg-footer-bar: #f1f5f9; --bg-step: #f1f1f1; --text-main: #2a2a2a; --text-muted: #555555; --border: #e0e0e0; --accent: #d33c14; --accent-text: #b8330f; --success: #00ff41; --color-grey-tech: #1f1f1f; --hover-fill: #eeeeee; }
[data-theme="dark"] { --bg-body: #0e0f11; --bg-menu: #141518; --bg-card: #16181c; --bg-secondary: #16181c; --bg-footer-bar: #202329; --bg-step: #141518; --text-main: #ffffff; --text-muted: #888888; --border: rgba(255,255,255,0.1); --accent: #d33c14; --accent-text: #ff5a2c; --color-grey-tech: #202329; --hover-fill: #202329; }
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-padding-top: var(--header-height); }
/* v20260513-3: overflow-x:clip (NIE hidden) — hidden implicitly daje overflow-y:auto i tworzy scroll context, ktore blokuje position:sticky w childach (tabbar). clip clipuje horizontal bez side effect. */
body { background-color: var(--bg-body); color: var(--text-main); font-family: "Rajdhani", sans-serif; font-size: 1.05rem; overflow-x: clip; width: 100%; transition: background-color 0.3s ease, color 0.3s ease; line-height: 1.62; }
/* =========================================
3. HERO SLIDER
========================================= */
.slide-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; opacity: 0; transition: opacity 1s ease; z-index: 0; box-shadow: inset 0 -400px 400px rgba(0,0,0,0.9); }
.slide-bg.active { opacity: 1; }
.bg-1 { background-image: radial-gradient(circle at 70% 40%, #202329, #000); }
.bg-2 { background-image: radial-gradient(circle at 30% 60%, #0a1a2a, #000); }
.bg-3 { background-image: radial-gradient(circle at 60% 60%, #1a0500, #000); }
.slide-content { display: none; flex-direction: column; align-items: flex-start; }
.slide-content.active { display: flex; }
.slide-content.active .hero-badge { animation: slideUpFade 0.8s forwards; opacity: 0; }
.slide-content.active .hero-title { animation: slideUpFade 0.8s 0.2s forwards; opacity: 0; }
.slide-content.active .hero-desc { animation: slideUpFade 0.8s 0.4s forwards; opacity: 0; }
.slide-content.active .cta-group { animation: slideUpFade 0.8s 0.6s forwards; opacity: 0; }
@keyframes slideUpFade {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
.hero-title { font-family: "Rajdhani", sans-serif; font-size: clamp(3.5rem, 6vw, 6.5rem); font-weight: 700; color: #fff; line-height: 0.95; margin-bottom: 20px; text-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.hero-title span { color: var(--accent); }
.hero-desc { font-size: 1rem; color: rgba(255,255,255,0.72); max-width: 760px; margin-bottom: 34px; line-height: 1.55; }
.cta-group { display: flex; gap: 20px; pointer-events: auto; }
.btn { display: inline-block; padding: 16px 36px; border-radius: var(--radius); font-weight: 700; text-decoration: none; text-transform: uppercase; letter-spacing: 1px; font-size: 0.9rem; border: none; cursor: pointer; transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); position: relative; z-index: 1; }
.btn-primary { background: var(--accent); color: white; border: 1px solid var(--accent); }
.btn-primary:hover { background: transparent; color: var(--accent); box-shadow: 0 10px 20px rgba(211, 60, 20, 0.2); }
/* v20260514-13: white→accent tint (jak .hdr-cta default). */
.btn-secondary { background: rgba(211, 60, 20, .05); color: var(--accent); border: 1px solid var(--accent); }
.btn-secondary:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.control-item { flex: 1; cursor: pointer; position: relative; padding-top: 20px; background: none; border: 0; text-align: left; color: inherit; }
.control-item:hover .control-label, .control-item.active .control-label { color: #fff; }
@keyframes fillBar {
from { width: 0%; }
to { width: 100%; }
}
.control-item.active .progress-fill { animation: fillBar 5000ms linear forwards; }
/* =========================================
4. COMPONENTS & SECTIONS
========================================= */
/* Marquee */
.marquee-container { width: 100%; overflow: hidden; padding: 60px 0; background: var(--bg-card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); position: relative; mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent); }
.marquee-content { display: flex; width: fit-content; gap: 80px; animation: scroll 40s linear infinite; align-items: center; }
.marquee-container:hover .marquee-content { animation-play-state: paused; }
.marquee-logo-img { height: 45px; width: auto; opacity: 0.5; filter: grayscale(100%); transition: all 0.4s; display: block; cursor: pointer; }
.marquee-logo-img:hover { opacity: 1; filter: grayscale(0%); transform: scale(1.1); }
@keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
[data-theme="dark"] .marquee-logo-img { opacity: 0.4; filter: grayscale(100%) brightness(1.2); }
[data-theme="dark"] .marquee-logo-img:hover { opacity: 1; filter: grayscale(0%) brightness(1); }
/* Common Layout */
section { padding: 100px 0; position: relative; }
.container { max-width: 92vw; margin: 0 auto; padding: 0; }
section.container { padding: 96px 0; }
.section-header { margin-bottom: 56px; text-align: left; }
.section-header h2 { font-size: clamp(2.3rem, 3.6vw, 3.1rem); margin: 0 0 24px; padding: 0; font-weight: 700; color: var(--text-main); font-family: "Rajdhani"; text-transform: uppercase; letter-spacing: 1px; line-height: 0.95; display: block; }
.section-header h2.chars-ready { color: transparent; }
.section-desc { font-family: "Rajdhani"; color: var(--text-muted); font-size: 1.08rem; margin: 0; line-height: 1.65; max-width: 100%; }
/* Animation Utils */
.section-header h2 span.char-reveal { display: inline-block; opacity: 0; filter: blur(4px); transform: translateY(18px) !important; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); white-space: pre; }
.section-header.is-visible h2 span.char-reveal { opacity: 1; transform: translateY(0); filter: blur(0); color: var(--text-main); }
.reveal-dark .section-header.is-visible h2 span.char-reveal, .reveal-accent .section-header.is-visible h2 span.char-reveal { color: #ffffff !important; }
.separator-anim { width: 100%; height: 1px; background: var(--border); margin-bottom: 40px; position: relative; overflow: hidden; transform: none !important; }
.section-header .separator-anim { margin-top: 0; margin-bottom: 22px; }
.sep-line { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 4s cubic-bezier(0.23, 1, 0.32, 1); transition-delay: 0.2s; }
.separator-anim.is-visible .sep-line, .is-visible .sep-line { transform: scaleX(1); }
.fade-in-section { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; will-change: opacity, transform; }
.fade-in-section.is-visible { opacity: 1; transform: none; }
/* Reveal Effects */
.reveal-block { position: relative; background: transparent !important; isolation: isolate; }
.reveal-block::before { content: ""; position: absolute; top: 0; left: -100vw; width: 200vw; height: 100%; z-index: -1; transition: transform 0.8s var(--easing); transform: scaleX(0); transform-origin: left; }
.reveal-block.active::before { transform: scaleX(1); }
.reveal-dark .section-desc { color: #aaa !important; }
.reveal-light::before { background-color: var(--bg-body); }
.reveal-light { color: var(--text-main); }
.reveal-accent .section-desc { color: #fff !important; }
/* About & Terminal */
.grid-3-about { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 40px; align-items: center; width: 100%; }
.about-visual-wrapper { position: relative; padding: 20px; display: flex; justify-content: center; align-items: center; width: fit-content; margin: 0 auto; }
.image-blob { width: 100%; max-width: 500px; aspect-ratio: 1 / 1; border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; overflow: hidden; position: relative; box-shadow: 20px 20px 0px rgba(0,0,0,0.05); transition: all 0.5s ease; }
.image-blob:hover { border-radius: 50%; }
.about-img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); }
.experience-badge-float { position: absolute; bottom: 0px; right: -20px; width: 140px; height: 140px; background: var(--accent); border: 8px solid var(--bg-body); border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: #fff; box-shadow: 0 10px 30px rgba(211, 60, 20, 0.4); animation: floatBadge 3s ease-in-out infinite; z-index: 10; }
@keyframes floatBadge {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.exp-number { font-family: "Rajdhani", sans-serif; font-size: 3rem; font-weight: 700; line-height: 1; }
.exp-text { font-size: 0.8rem; line-height: 1.1; text-transform: uppercase; }
.features-row { display: flex; gap: 30px; margin-bottom: 30px; }
.feature-box { display: flex; align-items: center; gap: 15px; }
.fb-icon { color: var(--accent); background: rgba(211, 60, 20, 0.1); width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fb-title { font-family: "Rajdhani", sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--text-main); margin: 0; }
.fb-desc { font-size: 0.85rem; color: var(--text-muted); }
.terminal-wrapper { width: 100%; display: flex; flex-direction: column; align-items: flex-end; gap: 20px; }
@keyframes pulsePhone {
0% { box-shadow: 0 0 0 0 rgba(211, 60, 20, 0.7); }
70% { box-shadow: 0 0 0 10px rgba(211, 60, 20, 0); }
100% { box-shadow: 0 0 0 0 rgba(211, 60, 20, 0); }
}
.terminal-window { background: #141518; border-radius: 8px; box-shadow: 0 20px 50px -10px rgba(0,0,0,0.5); border: 1px solid #333; overflow: hidden; font-family: "Fira Code", monospace; font-size: 0.85rem; min-height: 300px; width: 100%; }
.terminal-header { background: #202329; padding: 12px 15px; display: flex; gap: 8px; border-bottom: 1px solid #222; }
.dot { width: 10px; height: 10px; border-radius: 50%; }
.red { background: #333; }
.yellow { background: #333; }
.green { background: #333; }
.terminal-body { padding: 25px; color: #ccc; }
.cmd { color: var(--accent); }
.success { color: var(--success); }
.cursor { display: inline-block; width: 8px; height: 15px; background: var(--accent); animation: blink 1s infinite; vertical-align: -4px; }
@keyframes blink { 50% { opacity: 0; } }
/* Services Grid */
.offer-header .section-desc { max-width: 860px; }
.offer-card:focus-within
.offer-card:hover .offer-arrow, .offer-card:focus-within .offer-arrow { border-color: rgba(211,60,20,0.55); color: #fff; background: rgba(211,60,20,0.14); }
/* Tech Stack */
/* Case Studies */
/* v20260511-33 (b): zmniejszony odstep miedzy naglowkiem 05/Projekty a kartami (z 80px na 32px) */
#case-studies .section-header-row { display: flex; justify-content: space-between; align-items: flex-end; width: 100%; margin-bottom: 32px; gap: 40px; }
#case-studies .section-header-row .section-header { flex: 1; margin-bottom: 0; width: 100%; }
.slider-card.active .slide-number{ background-color: #e0e0e0; }
.reveal-clients.active .section-header, .reveal-clients.active .clients-grid { opacity: 1; transform: translateY(0); }
.reveal-clients .section-header{ opacity: 0; transform: translateY(30px); transition: all 0.6s ease 0.4s; }
/* v20260511-41 AUDIT: usuniete bloki .expertise-* (tabs + visual-frame + nav z auto-rotation).
Sekcja Technologie zostala zastapiona przez .fx-tech-card grid (v31). */
/* Process roadmap */
/* Custom Scrollbar */
.custom-scrollbar-thumb.active { cursor: grabbing; background: #000; }
/* =========================================
NEW SPLIT CONTACT SECTION
========================================= */
.contact-split-section { padding: 0 !important; overflow: hidden; width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; border-top: 1px solid var(--border); }
.contact-split-container { display: flex; min-height: 800px; width: 100%; }
/* LEFT SIDE - INFO PANEL */
.contact-info-panel { flex: 1; background-color: var(--bg-body); display: flex; align-items: center; justify-content: flex-end; padding: 80px 5vw; position: relative; }
/* v20260516-2 | "dziubek" — trojkat dziedziczacy tlo lewej kolumny: var(--bg-body) + ten sam linear-gradient,
pelna wysokosc panelu (gradient wyrownany), clip-path tnie do trojkata. Wchodzi w czarne tlo prawej. */
.contact-info-panel::after { content: ""; position: absolute; left: 100%; top: 0; bottom: 0; width: 19px; background-color: var(--bg-body); background-image: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.12)); -webkit-clip-path: polygon(0 calc(50% - 23px), 100% 50%, 0 calc(50% + 23px)); clip-path: polygon(0 calc(50% - 23px), 100% 50%, 0 calc(50% + 23px)); z-index: 3; pointer-events: none; }
[data-theme="dark"] .contact-info-panel::after { background: #121214; }
@media (max-width: 1100px) { .contact-info-panel::after { display: none; } }
.info-content-wrapper { max-width: 600px; width: 100%; }
.info-badge { display: inline-block; padding: 6px 15px; background: rgba(211, 60, 20, 0.08); color: var(--accent); font-weight: 800; font-size: 0.75rem; letter-spacing: 2px; border-radius: 4px; margin-bottom: 25px; }
.info-title { font-size: 2.5rem !important; line-height: 1.1; color: var(--text-main) !important; margin-bottom: 50px; }
.info-items-list { display: flex; flex-direction: column; gap: 35px; margin-bottom: 60px; }
.info-item { display: flex; align-items: center; gap: 20px; }
.ii-icon { width: 54px; height: 54px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; }
.ii-icon svg { width: 24px; height: 24px; }
.ii-text { display: flex; flex-direction: column; }
.ii-text span { font-size: 0.85rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
.ii-text a, .ii-text strong { font-size: 1.4rem; color: var(--text-main); text-decoration: none; font-weight: 700; transition: color 0.3s; }
.ii-text a:hover { color: var(--accent); }
.contact-mini-points { list-style: none; padding: 0; margin: 0 0 0 10px; max-width: 440px; display: grid; gap: 12px; }
.contact-mini-points li { position: relative; padding-left: 18px; color: var(--text-muted); font-size: 0.98rem; line-height: 1.65; }
.contact-mini-points li::before { content: ""; position: absolute; left: 0; top: 0.78em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); transform: translateY(-50%); }
/* RIGHT SIDE - FORM PANEL */
.contact-form-panel { background-color: #0e0f11 !important; padding: 80px 5vw !important; flex: 1; display: flex; align-items: center; justify-content: flex-start; color: #fff; }
.form-row { display: flex; gap: 30px; width: 100%; }
.form-row .input-field { flex: 1; }
.message-field { margin-top: 20px; }
.input-field textarea { min-height: 150px; resize: none; padding-top: 15px !important; display: block; margin-bottom: 0; vertical-align: bottom; }
.input-field textarea:focus ~ label, .input-field textarea:valid ~ label { top: -25px !important; }
@media (max-width: 768px) {
.form-row { flex-direction: column; gap: 0; }
}
/* v20260511-41 AUDIT: usuniete .expertise-nav-item hover (unused). */
@media (max-width: 1099px) {
:root { --header-height: 68px; }
}
.interest-label {
font-family: 'Fira Code', 'Roboto Mono', monospace;
font-size: 0.7rem;
letter-spacing: 1.5px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
margin-top: 30px;
margin-bottom: 0;
}
/* v20260529-1 a11y: grupy chipów owinięte w fieldset/legend (WCAG 1.3.1) — reset domyślnego ramowania */
.interest-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend.interest-label { display: block; width: 100%; padding: 0; float: none; }
.interest-grid { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 12px; padding-bottom: 30px; }
.chip { cursor: pointer; display: inline-block; position: relative; }
.chip input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.chip span {
display: inline-flex; align-items: center; position: relative;
padding: 10px 20px; border-radius: 999px;
background: rgba(39, 39, 42, 0.5);
color: rgba(244, 244, 245, 0.7);
font-size: 0.95rem; font-weight: 600;
letter-spacing: 0.3px; white-space: nowrap; overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.22);
transition:
background-color 0.2s ease,
color 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
padding-right 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
border-color 0.25s ease;
}
.chip:hover span { background: rgba(39, 39, 42, 0.5); border-color: var(--accent); }
.chip input:checked + span {
background: var(--accent);
color: #fff;
padding-right: 38px;
border-color: var(--accent);
box-shadow: none;
}
.chip input:checked + span:hover,
.chip:hover input:checked + span { background: var(--accent); border-color: var(--accent); }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip span::after {
content: ''; position: absolute; right: 12px; top: 50%;
width: 16px; height: 16px; border-radius: 50%;
background-color: #fff;
background-image: url("data:image/svg+xml;utf8,");
background-size: 11px 11px; background-position: center; background-repeat: no-repeat;
transform: translateY(-50%) scale(0);
opacity: 0;
transition:
transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275),
opacity 0.18s ease;
}
.chip input:checked + span::after { transform: translateY(-50%) scale(1); opacity: 1; }
.input-field { position: relative; margin-bottom: 40px; width: 100%; }
.input-field input, .input-field textarea { width: 100%; padding: 10px 0; background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,0.2); color: #fff; font-size: 1.1rem; font-family: "Rajdhani", sans-serif; transition: all 0.8s; }
.input-field label { position: absolute; top: 10px; left: 0; color: rgba(255,255,255,0.4); pointer-events: none; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); font-size: 1.1rem; }
.input-field input:focus ~ label, .input-field input:not(:placeholder-shown) ~ label, .input-field textarea:focus ~ label, .input-field textarea:not(:placeholder-shown) ~ label { top: -20px; font-size: 0.75rem; color: var(--accent); letter-spacing: 1px; }
.input-field input:focus, .input-field textarea:focus { outline: none !important; box-shadow: none !important; }
.focus-border { position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background-color: var(--accent); transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); z-index: 2; }
.input-field input:focus ~ .focus-border, .input-field textarea:focus ~ .focus-border, .input-field:hover .focus-border { width: 100%; }
/* v20260514-13: white→accent tint (jak .hdr-cta default). */
.btn-submit-dash { margin-top: 20px; width: 100%; padding: 20px; background: rgba(211, 60, 20, .05); border: 1px solid var(--accent); color: var(--accent); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.btn-submit-dash:hover { background: var(--accent); border-color: var(--accent); color: #fff !important; transform: translateY(-5px); box-shadow: 0 15px 30px rgba(211, 60, 20, 0.3); }
.btn-submit-dash:hover span { color: #fff !important; }
[data-theme="dark"] .contact-form-panel { background-color: #0e0f11; }
.form-content-wrapper { max-width: 650px; width: 100%; }
.form-title { font-size: 2.5rem !important; color: #fff !important; margin-bottom: 15px; }
/* FORM STYLING */
/* RESPONSIVENESS SPLIT */
@media (max-width: 1100px) {
.contact-split-container { flex-direction: column; min-height: auto; }
.contact-info-panel, .contact-form-panel { justify-content: center; padding: 80px 4vw; }
.info-content-wrapper, .form-content-wrapper { max-width: 100%; }
.info-title { font-size: 2rem !important; }
.form-title { font-size: 2rem !important; }
.contact-mini-points { margin-left: 0; max-width: 100%; }
}
.contact-split-section.reveal-block::before { background-color: var(--bg-body); }
/* =========================================
6. SITE FOOTER
========================================= */
.site-footer { background-color: var(--bg-card); border-top: 1px solid var(--border); padding: 100px 0 40px 0; font-family: "Rajdhani", sans-serif; text-align: left; }
@media (min-width: 1100px) {
.site-footer .footer-grid { grid-template-columns: minmax(260px, 1.2fr) minmax(180px, 0.8fr) minmax(180px, 0.8fr) minmax(260px, 1.2fr); gap: 60px; align-items: start; display: grid; margin-bottom: 80px; }
}
.footer-logo-mobile-trigger { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.footer-logo { font-family: "SteinerLight", sans-serif; font-size: 2rem; text-decoration: none; color: var(--text-main); display: block; margin-bottom: 25px; }
.footer-logo .accent { color: var(--accent); }
.footer-bio { color: var(--text-muted); font-size: 0.95rem; line-height: 1.7; margin-bottom: 30px; }
.footer-socials { display: flex; gap: 15px; }
.footer-socials a { width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 4px; display: flex; align-items: center; justify-content: center; color: var(--text-main); transition: 0.3s; }
.footer-socials a:hover { background-color: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-3px); }
.footer-socials svg { width: 18px; height: 18px; }
.footer-title { font-size: 1.1rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-main); margin-bottom: 30px; position: relative; }
.footer-links { list-style: none; padding: 0; }
.footer-links li { margin-bottom: 12px; }
.footer-links a {
text-decoration: none; color: var(--text-muted); font-weight: 600;
background-image: linear-gradient(currentColor, currentColor);
background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat;
padding-bottom: 1px;
transition: color .2s, background-size .35s cubic-bezier(.16,1,.3,1);
}
.footer-links a:hover, .footer-links a:focus-visible { color: var(--accent); background-size: 100% 1px; }
.footer-direct { display: flex; flex-direction: column; gap: 10px; }
.direct-link {
display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
color: var(--text-main); font-weight: 700; font-size: 1rem;
background-image: linear-gradient(var(--accent), var(--accent));
background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat;
padding-bottom: 1px; align-self: flex-start;
transition: color .2s, background-size .35s cubic-bezier(.16,1,.3,1);
}
.direct-link:hover, .direct-link:focus-visible { background-size: 100% 1px; }
.direct-link svg { width: 18px; color: var(--accent); }
/* v20260513-1: Newsletter w footerze (pattern z dev.flexnet.pl) */
.footer-desc { color: var(--text-muted); font-size: 0.95rem; line-height: 1.5; margin-bottom: 18px; }
.footer-newsletter { display: flex; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; }
.footer-newsletter input[type=email] { flex: 1 1 180px; min-width: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; padding: 10px 14px; color: var(--text-main); font-family: inherit; font-size: 0.95rem; transition: border-color 0.2s; }
.footer-newsletter input[type=email]::placeholder { color: var(--text-muted); }
.footer-newsletter input[type=email]:focus { outline: none; border-color: var(--accent); }
.footer-newsletter button { background: var(--accent); color: #ffffff; border: none; border-radius: 4px; padding: 10px 22px; font-family: inherit; font-weight: 700; font-size: 0.85rem; letter-spacing: 1.2px; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: background 0.2s, opacity 0.2s; }
.footer-newsletter button:hover { background: #b8330f; }
.footer-newsletter button:disabled { opacity: 0.7; cursor: not-allowed; }
/* Bottom Bar */
.footer-bottom { padding-top: 40px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 32px; font-size: 0.85rem; color: var(--text-muted); }
/* v20260511-30: 2 spany — copyright + dane firmy. Desktop: ze slash separatorem inline. Mobile: 2 osobne wiersze. */
.footer-bottom__info {
flex: 1 1 auto;
min-width: 0;
line-height: 1.7;
color: var(--text-muted);
font-size: 0.82rem;
}
.footer-bottom__copy,
.footer-bottom__company { display: inline; }
.footer-bottom__copy::after {
content: " / ";
color: var(--text-muted);
opacity: 0.5;
margin: 0 4px;
}
.footer-bottom__info code {
font-family: 'Fira Code', ui-monospace, monospace;
font-size: 0.92em;
color: var(--text-main);
white-space: nowrap;
}
.legal-links { display: flex; gap: 25px; align-items: center; flex-shrink: 0; }
.legal-links a {
text-decoration: none; color: inherit;
background-image: linear-gradient(currentColor, currentColor);
background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat;
padding-bottom: 1px;
transition: color .2s, background-size .35s cubic-bezier(.16,1,.3,1);
}
.legal-links a:hover, .legal-links a:focus-visible { color: var(--accent); background-size: 100% 1px; }
/* Cookie settings — kompaktowa ikonka zamiast długiego tekstu */
.legal-cookie-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; background: transparent; border: 1px solid var(--border); border-radius: 4px; color: inherit; cursor: pointer; transition: border-color 0.15s, background 0.15s; flex-shrink: 0; overflow: hidden; position: relative; }
.legal-cookie-btn:hover, .legal-cookie-btn:focus-visible { border-color: var(--accent); background: rgba(211, 60, 20, 0.05); outline: none; }
/* Cookie roll — analogiczny do theme-toggle (sun/moon): pionowy obrot odslaniajacy drugą twarz w akcencie */
.cookie-roll { width: 100%; height: 100%; transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1); pointer-events: none; }
.cookie-face-normal, .cookie-face-hover { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.cookie-face-hover { color: var(--accent); }
.legal-cookie-btn:hover .cookie-roll, .legal-cookie-btn:focus-visible .cookie-roll { transform: translateY(-100%); }
.legal-cookie-btn svg { width: 18px; height: 18px; display: block; }
@media (prefers-reduced-motion: reduce) { .cookie-roll { transition: none; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.footer-toggle-icon { display: none; transition: transform 0.3s ease; }
@media (max-width: 1100px) {
.site-footer .footer-grid { grid-template-columns: 1fr 1fr; }
}
/* =========================================
7. FINAL MEDIA QUERIES & UTILS
========================================= */
@media (max-width: 1400px) {
.grid-3-about { grid-template-columns: 1fr 1.2fr; grid-template-areas: "img txt" "term term"; }
.grid-3-about > :nth-child(1) { grid-area: img; }
.grid-3-about > :nth-child(2) { grid-area: txt; }
.grid-3-about > :nth-child(3) { grid-area: term; margin-top: 30px; }
.terminal-wrapper { justify-content: center; align-items: center; }
}
@media (max-width: 900px) {
body { width: 100% !important; overflow-x: clip; position: relative; }
.reveal-block::before { width: 100% !important; left: 0 !important; }
.container{ max-width: 100% !important; padding-left: 20px !important; padding-right: 20px !important; overflow: hidden; }
.hero-title { font-size: 2.8rem !important; margin-bottom: 15px !important; line-height: 1.1 !important; }
.hero-desc { font-size: 1rem !important; margin-bottom: 30px !important; line-height: 1.5 !important; }
.cta-group { gap: 15px !important; }
.btn { padding: 14px 24px !important; font-size: 0.85rem !important; }
.section-header-row { flex-direction: column; gap: 20px; text-align: left; align-items: flex-start; }
.grid-3-about { grid-template-columns: 1fr; grid-template-areas: "img" "txt" "term"; gap: 60px; }
.about-content-wrapper { padding: 0; }
.section-header h2 { font-size: 2.15rem !important; line-height: 1.05; margin: 0 0 14px; }
h2 { font-size: 2rem; }
}
@media (max-width: 768px) {
.site-footer .footer-grid { grid-template-columns: 1fr; gap: 0; }
.footer-col { border-bottom: 1px solid var(--border); padding-bottom: 0; margin-bottom: 0; }
.footer-title, .brand-col .footer-logo-mobile-trigger { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.footer-logo { display: flex; justify-content: space-between; align-items: center; cursor: pointer; padding: 20px 0; margin-bottom: 0; }
.footer-toggle-icon { display: block; width: 12px; height: 12px; fill: none; stroke: var(--text-muted); stroke-width: 3; }
.footer-col .footer-links, .footer-col .footer-bio, .footer-col .footer-socials, .footer-col .footer-newsletter, .footer-col .footer-desc, .footer-col .footer-direct { max-height: 0; overflow: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); opacity: 0; margin: 0 !important; }
.footer-col.is-active .footer-links, .footer-col.is-active .footer-bio, .footer-col.is-active .footer-socials, .footer-col.is-active .footer-newsletter, .footer-col.is-active .footer-desc, .footer-col.is-active .footer-direct { max-height: 500px; opacity: 1; padding-bottom: 30px; margin-top: 10px !important; }
.footer-col.is-active .footer-toggle-icon { transform: rotate(180deg); stroke: var(--accent); }
/* v20260513-4: newsletter col bez accordion na mobile — zawsze widoczny (CTA wazne, user nie wie ze trzeba kliknac).
:has() szuka col ktora zawiera form.footer-newsletter. */
.footer-col:has(.footer-newsletter) .footer-newsletter,
.footer-col:has(.footer-newsletter) .footer-desc,
.footer-col:has(.footer-newsletter) .footer-direct { max-height: none !important; opacity: 1 !important; overflow: visible !important; margin-top: 10px !important; padding-bottom: 24px !important; }
.footer-col:has(.footer-newsletter) .footer-title { cursor: default !important; }
.footer-col:has(.footer-newsletter) .footer-toggle-icon { display: none !important; }
/* v20260511-27: stopka na komorce — wszystkie elementy zwijaja sie do kolumny zamiast bycia rozjechane */
.site-footer { padding: 56px 0 28px !important; }
.site-footer .container { padding: 0 20px !important; overflow: visible; }
/* v20260511-28: brand-col bez accordion — bio + socials zawsze widoczne, chevron ukryty.
Accordion nie dzialal a tylko ukrywal opis firmy. */
.footer-col.brand-col { border-bottom: 1px solid var(--border); padding-bottom: 28px; }
.footer-col.brand-col .footer-logo-mobile-trigger .footer-toggle-icon { display: none !important; }
.footer-col.brand-col .footer-logo { padding: 20px 0 12px !important; cursor: default !important; }
.footer-col.brand-col .footer-bio,
.footer-col.brand-col .footer-socials {
max-height: none !important;
opacity: 1 !important;
overflow: visible !important;
margin: 0 0 16px 0 !important;
padding-bottom: 0 !important;
}
.footer-col.brand-col .footer-socials { margin-bottom: 0 !important; }
/* Dolny pasek mobile: copyright + dane firmy + linki — wszystko w kolumnie */
.footer-bottom {
flex-direction: column;
align-items: flex-start;
gap: 18px;
padding-top: 22px;
margin-top: 0;
border-top: 0;
font-size: 0.78rem;
text-align: left;
}
.footer-bottom__info {
font-size: 0.78rem;
line-height: 1.7;
color: var(--text-muted);
display: flex;
flex-direction: column;
gap: 6px;
}
.footer-bottom__info code { font-size: 0.95em; }
/* v20260511-30: mobile — copy i company w osobnych liniach, bez slash separatora */
.footer-bottom__copy,
.footer-bottom__company { display: block; }
.footer-bottom__copy::after { content: none !important; }
.legal-links {
flex-wrap: wrap;
gap: 12px 18px;
width: 100%;
align-items: center;
}
.legal-links a {
font-size: 0.8rem;
line-height: 1;
}
.legal-cookie-btn { margin-left: auto; }
}
@media (max-width: 480px) {
/* v20260526-1: ikona cookie — shrink + inline (bez margin-left:auto wymuszającego osobny wiersz) */
.legal-cookie-btn { width: 26px; height: 26px; margin-left: 0; }
.legal-cookie-btn svg { width: 14px; height: 14px; }
}
@media (max-width: 380px) {
.footer-legal__ids { font-size: 0.65rem; }
.legal-links { gap: 10px 14px; }
.legal-links a { font-size: 0.74rem; }
}
/* CASE STUDIES - Techlink-like light palette + accent #d33c14 */
#case-studies .section-header h2{color:#111;}
#case-studies .section-header .section-desc, #case-studies .section-desc{color:#555;}
/* Big, subtle number like Techlink */
/* Image reveal: L->P via clip-path (no black overlay, no opacity) */
/* Light overlay to keep readability while image is visible (no black) */
.slider-card.active{border-color:rgba(211,60,20,0.55) !important;}
#case-studies .slider-card.active{border-color:rgba(211,60,20,0.55) !important;}
/* --- FlexNet: Broken link / asset indicator (added 2026-01-26) --- */
@keyframes fxBlink404 {
0%, 49% { outline-color: rgba(255, 59, 48, 0.0); box-shadow: none; }
50%, 100% { outline-color: rgba(255, 59, 48, 1); box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.25); }
}
/* =========================================
FLEXNET CONTACT PREMIUM OVERRIDES v20260321-8
========================================= */
[data-theme="dark"] .contact-info-panel {
background: #121214;
}
.info-content-wrapper {
max-width: 620px;
}
.info-badge {
background: rgba(211, 60, 20, 0.09);
border: 1px solid rgba(211, 60, 20, 0.16);
}
.info-title {
max-width: 560px;
margin-bottom: 24px;
letter-spacing: -0.02em;
}
.info-title .accent-text {
color: var(--accent);
}
.info-items-list {
gap: 16px;
margin-bottom: 36px;
}
.ii-icon {
width: 58px;
height: 58px;
border-radius: 16px;
background: var(--bg-card);
}
.ii-text {
gap: 2px;
}
.ii-text span {
font-size: .78rem;
letter-spacing: 1.5px;
}
.ii-text a,
.ii-text strong {
font-size: 1.28rem;
line-height: 1.2;
}
.contact-mini-points {
margin: 0;
max-width: 100%;
}
.contact-mini-points li {
padding-left: 20px;
font-size: .98rem;
}
.contact-mini-points li::before {
top: .82em;
}
.contact-form-panel {
position: relative;
background: #000 !important;
}
.contact-form-panel::before { content: none; }
.form-content-wrapper {
max-width: 640px;
position: relative;
z-index: 1;
}
.form-title {
max-width: 520px;
margin-bottom: 14px;
letter-spacing: -0.03em;
line-height: 1.02;
}
.interest-grid {
gap: 10px;
padding-top: 18px;
padding-bottom: 26px;
}
.chip span {
padding: 10px 18px;
background: rgba(255,255,255,0.02);
backdrop-filter: blur(6px);
}
.chip:hover span {
background: rgba(211,60,20,0.08);
}
.chip input:checked + span {
box-shadow: 0 10px 18px rgba(211,60,20,0.22);
}
.input-field {
margin-bottom: 34px;
}
.input-field input,
.input-field textarea {
border-bottom-color: rgba(255,255,255,0.16);
}
.input-field input:hover,
.input-field textarea:hover {
border-bottom-color: rgba(255,255,255,0.28);
}
.input-field label {
color: rgba(255,255,255,0.48);
}
.btn-submit-dash {
min-height: 62px;
border-radius: 12px;
border-color: var(--accent);
background: rgba(211, 60, 20, .05);
letter-spacing: 1.4px;
}
.btn-submit-dash span {
color: var(--accent);
}
.btn-submit-dash:hover,
.btn-submit-dash:focus-visible {
color: #fff !important;
}
.btn-submit-dash:hover span,
.btn-submit-dash:focus-visible span {
color: #fff !important;
}
@media (max-width: 1100px) {
.contact-info-panel,
.contact-form-panel {
padding: 72px 24px !important;
}
.info-title {
max-width: 100%;
}
}
@media (max-width: 900px) {
.contact-split-section {
left: auto;
right: auto;
margin-left: 0;
margin-right: 0;
width: 100%;
}
.contact-info-panel,
.contact-form-panel {
padding: 52px 20px !important;
}
.info-item {
padding: 16px 16px;
border-radius: 16px;
}
.ii-text a,
.ii-text strong {
font-size: 1.08rem;
}
.form-title {
font-size: 2.5rem !important;
}
}
.pain-card,
.outcome-card{
border-radius: 8px;
border: 1px solid var(--border);
transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.outcome-card{
background: var(--bg-card);
}
.pain-card,
.outcome-card{
padding: 28px;
}
.pain-card:hover,
.outcome-card:hover{
transform: translateY(-4px);
border-color: rgba(211,60,20,0.45);
box-shadow: 0 16px 34px rgba(0,0,0,0.08);
}
.outcome-card strong {
display: block;
color: var(--text-main);
font-size: 1.25rem;
line-height: 1.2;
margin-bottom: 10px;
text-transform: uppercase;
}
.outcome-card span {
display: block;
color: var(--text-muted);
line-height: 1.6;
}
.pain-grid,
.outcome-grid{
display: grid;
gap: 20px;
}
.outcome-grid{
grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* =========================================
v20260321-11 — technical shell refresh
exact base: latest uploaded flexnet-robocza.zip
========================================= */
:root {
--tech-blue: #2c63ff;
--tech-navy: #07111d;
--tech-surface: #0b1017;
--tech-surface-2: #0f1621;
--shell-line: rgba(255,255,255,0.12);
--shell-line-strong: rgba(255,255,255,0.18);
--shell-glow-orange: rgba(211,60,20,0.18);
--shell-glow-blue: rgba(44,99,255,0.16);
--shell-corner: 18px;
}
/* Section backgrounds inspired by Ditto-like shells and Bequant-like technical glow */
/* v20260511-15: usuniete #tech::after (siatka 64x64px + gradient w naglowku)
oraz #tech.reveal-accent::before (radial color gradients) — user prosil o czyste tlo. */
#tech::after,
#tech.reveal-accent::before {
display: none !important;
}
#tech.reveal-accent {
color: #fff;
}
#tech.reveal-accent .section-desc {
color: rgba(255,255,255,0.76) !important;
}
/* Ditto-like technical shells */
/* Service cards more "Bequant technical" */
/* More consistent technical section cards */
/* Process section aligned with dark technical shell */
.process-section.reveal-light::before {
background:
radial-gradient(circle at 12% 22%, rgba(211,60,20,0.12), transparent 18%),
radial-gradient(circle at 82% 30%, rgba(44,99,255,0.12), transparent 22%),
linear-gradient(180deg, #0b1017 0%, #080c12 100%) !important;
}
.process-section .section-desc{
content: "";
display: inline-block;
width: 10px;
height: 10px;
margin-right: 10px;
background: linear-gradient(135deg, var(--accent), var(--tech-blue));
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
vertical-align: -1px;
}
/* Contact shell refinement */
.contact-form-panel {
background:
radial-gradient(circle at top right, rgba(44,99,255,0.14), transparent 24%),
radial-gradient(circle at bottom left, rgba(211,60,20,0.14), transparent 26%),
linear-gradient(180deg, #06080d, #080b11) !important;
}
.form-content-wrapper {
position: relative;
padding: 34px;
border: 1px solid rgba(255,255,255,0.08);
clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
-webkit-clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
background:
linear-gradient(var(--shell-line-strong), var(--shell-line-strong)) top left / 26px 1px no-repeat,
linear-gradient(var(--shell-line-strong), var(--shell-line-strong)) top left / 1px 26px no-repeat,
linear-gradient(var(--tech-blue), var(--tech-blue)) top right / 18px 1px no-repeat,
linear-gradient(var(--tech-blue), var(--tech-blue)) top right / 1px 18px no-repeat,
linear-gradient(var(--accent), var(--accent)) bottom left / 18px 1px no-repeat,
linear-gradient(var(--accent), var(--accent)) bottom left / 1px 18px no-repeat,
linear-gradient(var(--shell-line-strong), var(--shell-line-strong)) bottom right / 26px 1px no-repeat,
linear-gradient(var(--shell-line-strong), var(--shell-line-strong)) bottom right / 1px 26px no-repeat,
linear-gradient(180deg, rgba(12,16,24,0.9), rgba(7,10,14,0.95));
box-shadow: 0 26px 60px rgba(0,0,0,0.42);
}
/* Clients still neutral but sharper */
/* Mobile tuning */
@media (max-width: 991px) {
.form-content-wrapper {
--shell-corner: 14px;
}
.form-content-wrapper {
padding: 24px;
}
}
@media (max-width: 1199px) {
.expertise-shell { grid-template-columns: 1fr; gap: 24px; }
.expertise-visual-stage { order: 2; }
.expertise-nav { order: 3; padding-left: 0; padding-top: 20px; border-left: 0; border-top: 1px solid var(--border); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; }
.expertise-nav-item { align-items: center; }
.expertise-nav-line { min-height: 28px; }
.expertise-nav-label { height: auto; min-height: 1.35em; }
.expertise-nav-roll { transform: none !important; }
.expertise-nav-face { white-space: normal; }
.expertise-nav-face-hover { display: none; }
}
@media (max-width: 767px) {
.expertise-shell { padding: 22px; }
.expertise-name { font-size: 2rem; }
.expertise-desc { font-size: 1rem; }
.expertise-visual-stage { min-height: 300px; }
.expertise-visual-frame { min-height: 290px; }
.expertise-logo-card { width: min(88%, 310px); padding: 24px 20px; }
.expertise-nav { grid-template-columns: 1fr; gap: 4px; }
.expertise-nav-line { min-height: 22px; }
.expertise-nav-face { font-size: .98rem; }
}
/* ============================================================
FX SERVICES + INDUSTRIES (z FlexNet Redesign v2)
============================================================ */
/* v20260511-24: ujednolicone pionowe odstepy sekcji — 80px desktop / 64px mobile */
.fx-section { padding: 80px 0; position: relative; }
.fx-wrap { max-width: 92vw; margin: 0 auto; }
@media (max-width: 900px) {
.fx-section,
.fx-problems,
.fx-shop,
.fx-projects { padding-top: 64px !important; padding-bottom: 64px !important; }
.cl { padding-top: 64px !important; padding-bottom: 64px !important; }
}
/* v20260511-17: subtelne tlo sekcji USLUGI zeby sie nie zlewala z sasiednimi sekcjami.
Warm spot w lewym gornym (accent #d33c14 6% opacity) + delikatny gradient pionowy + linie separatory. */
.fx-section-services {
background:
radial-gradient(circle at 18% 22%, rgba(211, 60, 20, 0.07), transparent 45%),
linear-gradient(180deg, rgba(255, 255, 255, 0.012) 0%, rgba(255, 255, 255, 0) 100%);
}
[data-theme="light"] .fx-section-services {
background:
radial-gradient(circle at 18% 22%, rgba(211, 60, 20, 0.04), transparent 45%),
#f7f6f4;
}
.fx-section-services::before,
.fx-section-services::after {
content: "";
position: absolute;
left: 4vw;
right: 4vw;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(211, 60, 20, 0.22), transparent);
pointer-events: none;
}
.fx-section-services::before { top: 0; }
.fx-section-services::after { bottom: 0; }
@media (max-width: 900px) {
.fx-section { padding: 72px 0; }
.fx-wrap { max-width: 100%; padding: 0 20px; }
}
/* ---------- PILLARS (USLUGI) ---------- */
.fx-pillars {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.fx-pillar {
padding: 40px 28px 36px;
border-right: 1px solid var(--border);
display: flex; flex-direction: column;
min-height: 340px;
position: relative;
text-decoration: none;
color: inherit;
transition: background 0.25s ease;
}
.fx-pillar:last-child { border-right: 0; }
.fx-pillar:hover {
background: rgba(0, 0, 0, 0.05);
border-right-color: rgba(211, 60, 20, 0.35);
}
[data-theme="dark"] .fx-pillar:hover {
background: rgba(255, 255, 255, 0.06);
border-right-color: rgba(211, 60, 20, 0.35);
}
.fx-pillar-top {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: 40px;
}
.fx-pillar-idx {
font-family: "Fira Code", monospace;
font-size: 11px; letter-spacing: 0.12em;
color: var(--text-muted);
}
.fx-pillar-tag {
font-family: "Fira Code", monospace;
font-size: 10px; letter-spacing: 0.12em;
color: var(--accent);
background: rgba(211, 60, 20, 0.08);
padding: 4px 8px;
border-radius: 4px;
text-transform: uppercase;
}
.fx-pillar-title {
font-family: "Rajdhani", sans-serif;
font-weight: 600;
font-size: 28px; line-height: 1.08;
letter-spacing: 0.01em;
text-transform: uppercase;
margin: 0 0 14px;
color: var(--text-main);
}
.fx-pillar-title em { font-style: normal; font-weight: 700; color: var(--accent); }
.fx-pillar-desc {
font-size: 14.5px; line-height: 1.55;
color: var(--text-muted);
margin: 0 0 auto;
}
.fx-pillar-bottom {
display: flex; align-items: center; justify-content: space-between;
margin-top: 32px;
padding-top: 16px;
border-top: 1px solid var(--border);
}
.fx-pillar-meta {
font-size: 12px; color: var(--text-muted);
font-family: "Fira Code", monospace;
letter-spacing: 0.06em;
}
.fx-pillar-go {
width: 32px; height: 32px;
border-radius: 50%;
background: var(--text-main);
color: var(--bg-body);
display: grid; place-items: center;
font-family: "Fira Code", monospace;
font-size: 12px;
transition: background 0.2s, transform 0.2s;
}
.fx-pillar:hover .fx-pillar-go {
background: var(--accent);
color: #fff;
transform: translate(2px, -2px);
}
@media (max-width: 1100px) {
.fx-pillars { grid-template-columns: repeat(2, 1fr); }
.fx-pillar { border-bottom: 1px solid var(--border); }
.fx-pillar:nth-child(2) { border-right: 0; }
.fx-pillar:nth-child(3), .fx-pillar:nth-child(4) { border-bottom: 0; }
}
@media (max-width: 640px) {
.fx-pillars { grid-template-columns: 1fr; }
.fx-pillar { border-right: 0 !important; min-height: auto; padding: 32px 20px 28px; }
.fx-pillar:not(:last-child) { border-bottom: 1px solid var(--border); }
}
/* ---------- INDUSTRIES (BRANZE) ---------- */
.fx-industries {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
border-radius: 14px;
overflow: hidden;
}
.fx-industry {
background: var(--bg-body);
padding: 28px 24px 26px;
min-height: 200px;
display: flex; flex-direction: column;
transition: background 0.25s ease;
position: relative;
}
.fx-industry:hover { background: rgba(0, 0, 0, 0.05); }
[data-theme="dark"] .fx-industry:hover { background: rgba(255, 255, 255, 0.06); }
.fx-industry-n {
font-family: "Fira Code", monospace;
font-size: 11px; letter-spacing: 0.1em;
color: var(--text-muted);
margin-bottom: 20px;
}
.fx-industry-h {
font-family: "Rajdhani", sans-serif;
font-weight: 600;
font-size: 22px; line-height: 1.15;
letter-spacing: 0.02em;
text-transform: uppercase;
margin: 0 0 6px;
color: var(--text-main);
}
.fx-industry-d {
font-size: 13.5px;
color: var(--text-muted);
line-height: 1.5;
margin: 0 0 auto;
}
.fx-industry-c {
font-family: "Fira Code", monospace;
font-size: 11px;
color: var(--accent);
margin-top: 18px;
padding-top: 12px;
border-top: 1px dashed var(--border);
letter-spacing: 0.02em;
}
@media (max-width: 980px) { .fx-industries { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .fx-industries { grid-template-columns: 1fr; } }
/* dark mode tweak — pillar arrow */
[data-theme="dark"] .fx-pillar-go { background: #fff; color: #0e0f11; }
[data-theme="dark"] .fx-pillar:hover .fx-pillar-go { background: var(--accent); color: #fff; }
/* ============================================================
FX SECTION HEADER — wariant C (pionowa linia akcent)
============================================================ */
.fx-head {
display: flex;
gap: 24px;
margin-bottom: 56px;
align-items: stretch;
}
.fx-head-bar {
width: 3px;
background: var(--accent);
border-radius: 2px;
flex-shrink: 0;
}
.fx-head-body { flex: 1; min-width: 0; }
.fx-head-num {
font-family: "Fira Code", "Roboto Mono", monospace;
font-size: 11px;
letter-spacing: 0.2em;
color: var(--accent);
text-transform: uppercase;
margin-bottom: 14px;
font-weight: 500;
}
.fx-head-title {
font-family: "Rajdhani", sans-serif;
font-weight: 700;
font-size: clamp(2rem, 3.6vw, 2.8rem);
line-height: 1.05;
text-transform: uppercase;
color: var(--text-main);
margin: 0 0 14px;
letter-spacing: -0.01em;
}
.fx-head-title em {
font-style: normal;
font-weight: 700;
color: var(--accent);
}
.fx-head-desc {
font-size: 14.5px;
color: var(--text-muted);
max-width: 100%;
line-height: 1.55;
margin: 0;
}
/* === KLIENCI (.cl) — globalny override szerokości (klienci.js injectuje 1600px cap, my chcemy 92vw jak home) === */
.cl__inner { max-width: 92vw !important; padding: 0 !important; }
/* v20260511-18: ujednolicony mobile padding (20px) z .fx-wrap zeby sekcje sie nie roznily na komorce */
@media (max-width: 900px) { .cl__inner { max-width: 100% !important; padding: 0 20px !important; } }
@media (max-width: 640px) {
.fx-head { gap: 16px; margin-bottom: 36px; }
.fx-head-bar { width: 2px; }
}
/* ============================================================
FX ROMBY — model wspolpracy (z o-firmie.html, layout 1/3 + 2/3)
============================================================ */
.fx-romby-sect {
background: #1e2028;
color: #f3f5f7;
padding: 96px 0;
position: relative;
overflow: hidden;
}
.fx-romby-sect::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 90%, rgba(211, 60, 20, 0.07), transparent 55%);
pointer-events: none;
}
.fx-romby-grid {
max-width: 92vw;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
gap: 56px;
align-items: center;
position: relative;
z-index: 1;
}
.fx-romby-side .fx-head { margin-bottom: 24px; }
.fx-romby-side .fx-head-title { color: #fff; font-size: clamp(1.8rem, 2.6vw, 2.4rem); }
.fx-romby-side .fx-head-title .rn { color: var(--accent); margin-right: 12px; }
.fx-romby-side .fx-head-desc { color: #9ea6b3; max-width: 100%; }
.fx-romby-side .fx-head.fading,
.fx-romby-side #romby-hdr.fading,
.fx-head-body.fading { opacity: 0.4; transition: opacity 0.25s; }
.fx-romby-side .romby-nav-btns {
display: flex; gap: 10px; margin-left: 27px; margin-top: 8px;
align-items: center;
}
/* v20260511-40: counter "01 / 06" miedzy strzalkami w sekcji 06/Wspolpraca (proces) */
.r-counter {
font-family: 'Fira Code', monospace;
font-size: 0.78rem;
letter-spacing: 0.15em;
color: rgba(255, 255, 255, 0.55);
min-width: 60px;
text-align: center;
user-select: none;
}
[data-theme="light"] .r-counter { color: #555; }
.romby-mnav { align-items: center; }
.romby-nav-btn {
appearance: none;
border: 1px solid rgba(255, 255, 255, 0.2);
background: transparent;
color: #f3f5f7;
width: 42px; height: 42px;
border-radius: 50%;
display: grid; place-items: center;
cursor: pointer;
transition: 0.2s;
}
.romby-nav-btn:hover { border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.06); }
.romby-nav-btn svg { width: 17px; height: 17px; }
.fx-romby-main { min-width: 0; }
.romby-track {
display: flex;
align-items: center;
justify-content: center;
padding: 16px 0 36px;
gap: 28px;
--ri: 100px;
--ro: 132px;
--roff: 56px;
--gap: 28px;
}
.r-col { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; position: relative; }
.r-col.top { margin-bottom: var(--roff); }
.r-col.bot { margin-top: var(--roff); }
.r-unit { position: relative; width: var(--ro); height: var(--ro); cursor: pointer; }
.r-unit::before {
content: ''; position: absolute; top: 50%; left: 50%;
width: calc(var(--ro) + 50px); height: calc(var(--ro) + 50px);
transform: translate(-50%, -50%);
border-radius: 50%;
background: radial-gradient(circle, rgba(211, 60, 20, 0.08), transparent 70%);
opacity: 0; transition: opacity 0.5s;
pointer-events: none; z-index: 0;
}
.r-unit.active::before { opacity: 1; }
.r-outer {
position: absolute; inset: 0;
transform: rotate(45deg);
z-index: 1; transition: filter 0.4s;
}
.r-outer svg { width: 100%; height: 100%; display: block; }
.r-outer rect { transition: stroke 0.4s; }
.r-inner {
position: absolute; top: 50%; left: 50%;
width: var(--ri); height: var(--ri);
transform: translate(-50%, -50%) rotate(45deg);
background: linear-gradient(to bottom, #2a2d38 40%, #1e2029 100%);
border: 1.5px solid rgba(255, 255, 255, 0.1);
border-radius: 7px;
transition: border-color 0.4s, box-shadow 0.4s, background 0.4s;
z-index: 2;
}
.r-content {
position: absolute; inset: 0;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
text-align: center;
z-index: 3; pointer-events: none; padding: 14px;
}
.r-num { font-family: 'Rajdhani', sans-serif; font-size: clamp(20px, 2vw, 28px); font-weight: 800; line-height: 1; margin-bottom: 4px; color: #d33c14; }
.r-lbl { font-family: 'Rajdhani', sans-serif; font-size: clamp(10px, 0.8vw, 12px); font-weight: 600; line-height: 1.3; color: #cfd5de; max-width: 96px; text-transform: uppercase; letter-spacing: 0.05em; }
.r-unit.active .r-outer { filter: drop-shadow(0 0 12px rgba(211, 60, 20, 0.4)); }
.r-unit.active .r-outer rect { stroke: #d33c14; }
.r-unit.active .r-inner {
border-color: #d33c14;
background: linear-gradient(to bottom, rgba(211, 60, 20, 0.14), #2a2d38 50%, #1a1d26 100%);
box-shadow: 0 0 18px rgba(211, 60, 20, 0.55), 0 0 50px rgba(211, 60, 20, 0.1), inset 0 0 18px rgba(211, 60, 20, 0.06);
}
.r-unit:not(.active):hover .r-inner { border-color: rgba(255, 255, 255, 0.25); }
/* v20260514-7: formula ze wzorca szablon-boxy-romby-animowane.html, dostosowana proporcjonalnie.
Stala -6 zamiast -16 (wzór ma outer=182 strzałka=30, ratio 6.07; u nas outer=132 → strzałka 22).
Right z formuly: -1*gap + 4px (1px w lewo od center gap). */
.r-col:not(:last-child)::after {
content: '';
position: absolute; z-index: 5;
width: calc(var(--gap) - 6px);
height: calc(var(--gap) - 6px);
right: calc(-1 * var(--gap) + 4px);
}
.r-col.top:not(:last-child)::after {
bottom: calc(var(--roff) / 2 - (var(--gap) - 6px) / 2);
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none'%3E%3Cpath d='M3 3L22 22' stroke='%23d33c14' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M16 22h6V16' stroke='%23d33c14' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.r-col.bot:not(:last-child)::after {
top: calc(var(--roff) / 2 - (var(--gap) - 6px) / 2);
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none'%3E%3Cpath d='M3 27L22 8' stroke='%23d33c14' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M16 8h6v6' stroke='%23d33c14' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.romby-mnav { display: none; gap: 14px; justify-content: center; padding-top: 24px; }
@media (max-width: 1400px) {
.romby-track { --ri: 90px; --ro: 118px; --roff: 50px; --gap: 22px; gap: 22px; }
}
@media (max-width: 1100px) {
.fx-romby-grid { grid-template-columns: 1fr; gap: 32px; }
.romby-track { --ri: 110px; --ro: 145px; --roff: 64px; --gap: 32px; gap: 32px; }
.fx-romby-side .romby-nav-btns { margin-left: 27px; }
}
@media (max-width: 860px) {
.romby-track { --ri: 96px; --ro: 128px; --roff: 54px; --gap: 26px; gap: 26px; }
.r-lbl { font-size: 10px; max-width: 82px; }
.r-num { font-size: 24px; }
}
@media (max-width: 767px) {
.romby-track { --ri: 160px; --ro: 210px; gap: 20px; }
.r-col { display: none; margin: 0 !important; }
.r-col.mob-active { display: flex; }
.r-col::after { display: none !important; }
.r-num { font-size: 36px; }
.r-lbl { font-size: 14px; max-width: 140px; }
.fx-romby-side .romby-nav-btns { display: none; }
.romby-mnav { display: flex; }
}
@media (min-width: 768px) { .romby-mnav { display: none !important; } }
/* ============================================================
FX MOBILE — horizontal swipe scroll dla USŁUGI i BRANŻE
============================================================ */
@media (max-width: 640px) {
.fx-pillars {
display: flex !important;
grid-template-columns: none !important;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
margin-left: -16px;
margin-right: -16px;
padding: 0 16px;
}
.fx-pillars::-webkit-scrollbar { display: none; }
.fx-pillar {
flex: 0 0 80vw;
min-width: 80vw;
scroll-snap-align: start;
border-right: 1px solid var(--border) !important;
border-bottom: 0 !important;
padding: 32px 24px 28px;
min-height: 320px;
}
.fx-pillar:last-child { border-right: 0 !important; }
}
@media (max-width: 520px) {
.fx-industries {
display: flex !important;
grid-template-columns: none !important;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
gap: 0;
background: transparent;
border: 0;
border-radius: 0;
margin-left: -16px;
margin-right: -16px;
padding: 0 16px;
}
.fx-industries::-webkit-scrollbar { display: none; }
.fx-industry {
flex: 0 0 78vw;
min-width: 78vw;
scroll-snap-align: start;
margin-right: 1px;
border: 1px solid var(--border);
border-radius: 12px;
min-height: 200px;
}
.fx-industry:last-child { margin-right: 0; }
}
/* === v20260511-11 | fx-reveal: fade-slide-up + blur na naglowkach sekcji ===
Pattern zainspirowany novachain-crypto-trading-protocol (fadeSlideIn keyframes).
Trzy efekty na raz: opacity 0->1, translateY 30px->0, filter blur 8px->0.
Stagger 100ms miedzy num/title/desc daje "kaskada" wzdluz osi Y.
Initial state aplikujemy tylko gdy JS dodal html.fxr-on (no-JS: tekst widoczny od razu). */
html.fxr-on .fx-head .fx-head-num,
html.fxr-on .fx-head .fx-head-title,
html.fxr-on .fx-head .fx-head-desc {
opacity: 0;
transform: translateY(12px);
transition: opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
will-change: opacity, transform;
}
html.fxr-on .fx-head.fxr-in .fx-head-num { opacity: 1; transform: translateY(0); filter: blur(0); transition-delay: 0s; }
html.fxr-on .fx-head.fxr-in .fx-head-title { opacity: 1; transform: translateY(0); filter: blur(0); transition-delay: .10s; }
html.fxr-on .fx-head.fxr-in .fx-head-desc { opacity: 1; transform: translateY(0); filter: blur(0); transition-delay: .20s; }
/* Hero — osobno bo struktura inna (hero-headline + tagline + sub) */
html.fxr-on .hero-left .hero-headline,
html.fxr-on .hero-left .rot-wrap,
html.fxr-on .hero-left .hero-tagline,
html.fxr-on .hero-left .hero-sub,
html.fxr-on .hero-left .hero-ctas {
opacity: 0;
transform: translateY(12px);
transition: opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}
html.fxr-on .hero.fxr-in .hero-headline { opacity: 1; transform: translateY(0); filter: blur(0); transition-delay: 0s; }
html.fxr-on .hero.fxr-in .rot-wrap { opacity: 1; transform: translateY(0); filter: blur(0); transition-delay: .08s; }
html.fxr-on .hero.fxr-in .hero-tagline { opacity: 1; transform: translateY(0); filter: blur(0); transition-delay: .16s; }
html.fxr-on .hero.fxr-in .hero-sub { opacity: 1; transform: translateY(0); filter: blur(0); transition-delay: .24s; }
html.fxr-on .hero.fxr-in .hero-ctas { opacity: 1; transform: translateY(0); filter: blur(0); transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
html.fxr-on .fx-head .fx-head-num,
html.fxr-on .fx-head .fx-head-title,
html.fxr-on .fx-head .fx-head-desc,
html.fxr-on .hero-left .hero-headline,
html.fxr-on .hero-left .rot-wrap,
html.fxr-on .hero-left .hero-tagline,
html.fxr-on .hero-left .hero-sub,
html.fxr-on .hero-left .hero-ctas {
opacity: 1; transform: none; filter: none; transition: none;
}
}
/* === v20260511-32 | fx-tech: kompaktowy stack 4 karty na BIALYM tle (jak sekcja Klienci `.cl`) ===
Sekcja zawsze ma jasne tlo niezaleznie od theme — dla wizualnego oddzielenia od czarnych sekcji wokol. */
.fx-tech {
padding: 80px 0;
background: #ffffff;
color: #16140f;
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
max-width: 100vw;
overflow: hidden;
}
.fx-tech .container,
.fx-tech .fx-head,
.fx-tech .fx-head-body { color: #16140f; }
/* v20260511-33 (a): naglowek tej samej szerokosci co .fx-tech-grid (92vw) — full-bleed dotyczy tylko tla */
.fx-tech .fx-head {
max-width: 92vw;
margin-left: auto;
margin-right: auto;
margin-bottom: 32px;
}
@media (max-width: 900px) { .fx-tech .fx-head { max-width: 100%; padding: 0 20px; } }
.fx-tech .fx-head-title { color: #16140f; }
.fx-tech .fx-head-title em { color: #d33c14; }
.fx-tech .fx-head-desc { color: #555; }
.fx-tech .fx-head-num { color: #d33c14; }
.fx-tech-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-top: 40px;
/* Container wraping — bo .fx-tech jest full-bleed, trzymamy content 92vw */
max-width: 92vw;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 1100px) { .fx-tech-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .fx-tech-grid { max-width: 100%; padding: 0 20px; } }
/* v20260511-36: mobile — horizontal scroll slider (jak fx-problems/fx-projects/fx-shop) */
@media (max-width: 640px) {
.fx-tech-grid {
display: flex !important;
grid-template-columns: none !important;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-padding-left: 0;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
gap: 0;
margin: 0;
padding: 0 60px 0 0 !important;
}
.fx-tech-grid::-webkit-scrollbar { display: none; }
.fx-tech-card {
flex: 0 0 65vw;
min-width: 65vw;
scroll-snap-align: start;
margin-right: 14px;
}
.fx-tech-card:last-child { margin-right: 0; }
}
/* v20260511-34: mobile — usuwamy full-bleed (psul wyswietlanie na komorce, karty znikaly).
Wracamy do normalnego flow w obrebie container, biale tlo zachowane wewnatrz. */
@media (max-width: 900px) {
.fx-tech {
width: 100% !important;
left: 0 !important;
right: auto !important;
margin-left: 0 !important;
margin-right: 0 !important;
max-width: 100% !important;
overflow: visible !important;
/* container parent ma juz padding 20px na mobile — fx-tech jest pelnym child */
}
.fx-tech .fx-head { max-width: 100%; margin-left: 0; margin-right: 0; padding: 0; }
.fx-tech-grid { max-width: 100% !important; padding: 0 !important; }
/* v20260511-35: wymus widocznosc kart na komorce — fxr initial state byl stuck (opacity 0).
IntersectionObserver z full-bleed pozycjonowaniem nie odpalal dla tych kart na komorce. */
html.fxr-on .fx-tech-card {
opacity: 1 !important;
transform: none !important;
filter: none !important;
transition: none !important;
}
}
/* Karta jasna — biale tlo + jasne border + ciemny tekst */
.fx-tech-card {
border: 1px solid #e0ddd8;
border-radius: 4px;
padding: 18px 18px 20px;
background: #ffffff;
transition: border-color 0.2s, transform 0.2s, box-shadow 0.25s;
display: flex;
flex-direction: column;
gap: 12px;
}
.fx-tech-card:hover {
border-color: #d33c14;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
}
.fx-tech-card-head {
display: flex;
align-items: center;
gap: 12px;
}
.fx-tech-logo {
width: 44px;
height: 44px;
border-radius: 4px;
background: #f4f2ee;
border: 1px solid #e0ddd8;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.fx-tech-logo img {
width: 28px;
height: 28px;
object-fit: contain;
}
.fx-tech-meta { flex: 1; min-width: 0; }
.fx-tech-name {
font-family: 'Rajdhani', sans-serif;
font-weight: 500;
font-size: 1.05rem;
line-height: 1.2;
margin: 0 0 2px;
color: #16140f;
}
.fx-tech-role {
font-family: 'Fira Code', ui-monospace, monospace;
font-size: 10px;
letter-spacing: 1.3px;
text-transform: uppercase;
color: #d33c14;
}
.fx-tech-desc {
font-family: 'Fira Code', ui-monospace, monospace;
font-size: 12px;
line-height: 1.6;
color: #555;
margin: 0;
flex: 1;
}
.fx-tech-chips {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.fx-tech-chips li {
font-family: 'Fira Code', ui-monospace, monospace;
font-size: 10.5px;
padding: 3px 8px;
border: 1px solid #e0ddd8;
border-radius: 3px;
color: #666;
background: #faf9f7;
white-space: nowrap;
}
/* === v20260511-12 | fxr rozszerzony: karty + wls-head (wszystkie podstrony) ===
Wlaczone klasy: fx-problem-card, fx-pillar, fx-industry, fx-project-card,
fx-shop-card, fx-hosting-card, fx-portfolio-card, fx-techstrip-item, wls-plan,
about-* (manifest na home), terminal-wrapper.
Delay miedzy kartami w tym samym kontenerze: 70ms (JS aplikuje transition-delay inline). */
html.fxr-on .fx-problem-card,
html.fxr-on .fx-pillar,
html.fxr-on .fx-industry,
html.fxr-on .fx-project-card,
html.fxr-on .fx-shop-card,
html.fxr-on .fx-hosting-card,
html.fxr-on .fx-portfolio-card,
html.fxr-on .fx-tech-card,
html.fxr-on .wls-plan,
html.fxr-on .about-content-wrapper,
html.fxr-on .about-visual-wrapper,
html.fxr-on .terminal-wrapper {
opacity: 0;
transform: translateY(12px);
transition: opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
will-change: opacity, transform;
}
html.fxr-on .fxr-in.fx-problem-card,
html.fxr-on .fxr-in.fx-pillar,
html.fxr-on .fxr-in.fx-industry,
html.fxr-on .fxr-in.fx-project-card,
html.fxr-on .fxr-in.fx-shop-card,
html.fxr-on .fxr-in.fx-hosting-card,
html.fxr-on .fxr-in.fx-portfolio-card,
html.fxr-on .fxr-in.fx-tech-card,
html.fxr-on .fxr-in.wls-plan,
html.fxr-on .fxr-in.about-content-wrapper,
html.fxr-on .fxr-in.about-visual-wrapper,
html.fxr-on .fxr-in.terminal-wrapper {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
/* .wls-head (podstrony z wls-* templates: strony-www, hosting, oracle-weblogic, ibm-websphere, etc.)
Stagger num -> h2 -> wls-lead. */
html.fxr-on .wls-head .num,
html.fxr-on .wls-head h2,
html.fxr-on .wls-head .wls-lead {
opacity: 0;
transform: translateY(12px);
transition: opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}
html.fxr-on .wls-head.fxr-in .num { opacity: 1; transform: translateY(0); filter: blur(0); transition-delay: 0s; }
html.fxr-on .wls-head.fxr-in h2 { opacity: 1; transform: translateY(0); filter: blur(0); transition-delay: .10s; }
html.fxr-on .wls-head.fxr-in .wls-lead { opacity: 1; transform: translateY(0); filter: blur(0); transition-delay: .20s; }
@media (prefers-reduced-motion: reduce) {
html.fxr-on .fx-problem-card,
html.fxr-on .fx-pillar,
html.fxr-on .fx-industry,
html.fxr-on .fx-project-card,
html.fxr-on .fx-shop-card,
html.fxr-on .fx-hosting-card,
html.fxr-on .fx-portfolio-card,
html.fxr-on .wls-plan,
html.fxr-on .about-content-wrapper,
html.fxr-on .about-visual-wrapper,
html.fxr-on .terminal-wrapper,
html.fxr-on .wls-head .num,
html.fxr-on .wls-head h2,
html.fxr-on .wls-head .wls-lead {
opacity: 1; transform: none; filter: none; transition: none;
}
}
/* === v20260511-14 | sekcja #tech — usuniete "dziwne tlo" (gradient shell + bg image visual frame).
Cala sekcja zlewa sie teraz z reszta strony, tylko tabsy + content sa widoczne. */
.expertise-shell {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
[data-theme="dark"] .expertise-shell {
background: transparent !important;
}
.expertise-visual-frame {
background: transparent !important;
border: 0 !important;
}
[data-theme="dark"] .expertise-visual-frame {
background: transparent !important;
border: 0 !important;
}
.expertise-visual-frame::before,
.expertise-visual-frame::after {
display: none !important;
}
/* v20260511-16: COFNIETO 3D tilt na kartach (.fx-pillar / .fx-industry / .fx-problem-card / etc.) —
karty wychodzily poza sekcje i shadow byl za mocny. Zostawiamy oryginalny hover (translateY -2px + border accent).
Hero status-board tilt zachowany (to nie karta, tylko dashboard widget — inna sytuacja). */
@media (hover: hover) and (pointer: fine) {
.status-board {
transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.55s ease;
backface-visibility: hidden;
}
.hero-right:hover .status-board {
transform: perspective(1600px) rotateX(3deg) rotateY(-4deg) translateZ(12px);
box-shadow: 0 28px 70px rgba(211, 60, 20, 0.20),
0 12px 30px rgba(0, 0, 0, 0.35);
}
}
@media (prefers-reduced-motion: reduce) {
.hero-right:hover .status-board {
transform: none !important;
}
}
/* v20260513-5: hero visual flow naturally on mobile/tablet.
Inline `