/* ========================================================================== LuminaForge — Premium Redesign built on Bootstrap 5 Inspired by Grayscale + Agency themes, preserving original content & SPA logic ========================================================================== */ /* ===== Design Tokens ===== */ :root { /* Palette — motyw domyślny: nocny fiolet */ --lf-accent: #8B5CF6; --lf-accent-deep: #6D28D9; --lf-accent-deeper: #5b21b6; --lf-accent-light: #a78bfa; --lf-accent-soft: #c4b5fd; --lf-accent-rgb: 139, 92, 246; --lf-accent-deep-rgb: 109, 40, 217; --lf-accent-soft-rgb: 196, 181, 253; --lf-accent-glow: rgba(var(--lf-accent-rgb), 0.35); --lf-on-accent: #ffffff; /* tekst na akcentowym tle */ --lf-dark: #0f0f14; --lf-dark-rgb: 15, 15, 20; --lf-overlay-rgb: 5, 5, 10; /* pełnoekranowe przyciemnienia */ --lf-dark-card: #18181f; --lf-dark-lighter: #1e1e28; --lf-dark-lighter-rgb: 30, 30, 42; --lf-surface: #232330; --lf-surface-rgb: 35, 35, 48; --lf-dim: #3a3a4a; --lf-white: #ffffff; --lf-offwhite: #f4f4f8; --lf-offwhite-rgb: 232, 230, 240; --lf-text: #e4e4ed; --lf-text-muted: #9ca3af; --lf-text-muted-rgb: 156, 163, 175; --lf-text-faint: #5a5a6a; --lf-line: rgba(255, 255, 255, 0.08); /* Typography */ --lf-font-heading: 'Playfair Display', Georgia, serif; --lf-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* Layout */ --lf-nav-height: 76px; --lf-radius: 12px; --lf-radius-sm: 8px; --lf-transition: cubic-bezier(0.22, 1, 0.36, 1); --lf-ease-out: cubic-bezier(0.23, 1, 0.32, 1); --lf-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); } /* ===== Motyw: Las (ciemna zieleń + złoto) ===== Przełączany atrybutem data-theme="forest" na . Paleta: dark forest #132B23 · deep bluish #0D3A35 · moderate green #276152 sage #5E775E · laurel #B1B7AB · gold #BA9B5F · alabaster #E9E0CF · cream #FBF6F0 */ :root[data-theme="forest"] { --lf-accent: #BA9B5F; --lf-accent-deep: #9A7C45; --lf-accent-deeper: #7C6234; --lf-accent-light: #CDB37E; --lf-accent-soft: #D9C69C; --lf-accent-rgb: 186, 155, 95; --lf-accent-deep-rgb: 154, 124, 69; --lf-accent-soft-rgb: 217, 198, 156; --lf-accent-glow: rgba(var(--lf-accent-rgb), 0.30); --lf-on-accent: #132B23; /* złote tła → ciemnozielony tekst */ --lf-dark: #132B23; --lf-dark-rgb: 19, 43, 35; --lf-overlay-rgb: 13, 58, 53; /* deep bluish */ --lf-dark-card: #18342A; --lf-dark-lighter: #1D3E32; --lf-dark-lighter-rgb: 29, 62, 50; --lf-surface: #276152; /* moderate green */ --lf-surface-rgb: 39, 97, 82; --lf-dim: #46584A; --lf-white: #FBF6F0; /* light cream */ --lf-offwhite: #E9E0CF; /* warm alabaster */ --lf-offwhite-rgb: 233, 224, 207; --lf-text: #E7DFCF; --lf-text-muted: #B1B7AB; /* laurel green */ --lf-text-muted-rgb: 177, 183, 171; --lf-text-faint: #5E775E; /* sage */ --lf-line: rgba(233, 224, 207, 0.10); } /* Płynne przejście kolorów przy zmianie motywu (klasa nakładana na chwilę przez JS) */ html.theme-anim body, html.theme-anim body *, html.theme-anim body *::before, html.theme-anim body *::after { transition: background-color 0.45s var(--lf-ease-out), color 0.45s var(--lf-ease-out), border-color 0.45s var(--lf-ease-out), box-shadow 0.45s var(--lf-ease-out), fill 0.45s var(--lf-ease-out), stroke 0.45s var(--lf-ease-out) !important; transition-delay: 0s !important; } /* ===== Global Reset & Base ===== */ *, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html { scroll-behavior: smooth; scroll-padding-top: var(--lf-nav-height); } body { font-family: var(--lf-font-body); font-weight: 400; line-height: 1.7; color: var(--lf-text); background-color: var(--lf-dark); overflow-x: clip; width: 100%; position: relative; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Fix dla bootstrap rows wykraczających poza ekran */ .row { max-width: 100%; margin-left: 0 !important; margin-right: 0 !important; } /* Custom Scrollbar (Desktop Only) */ @media (hover: hover) and (pointer: fine) { ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--lf-dark); } ::-webkit-scrollbar-thumb { background: var(--lf-accent); border-radius: 10px; } } /* Hide common back-to-top buttons that might overlap with Luna */ .scroll-to-top, .back-to-top, #back-to-top, #scroll-top, .btn-scroll-top, .scrolltop { display: none !important; visibility: hidden !important; pointer-events: none !important; } h1, h2, h3, h4, h5, h6 { font-family: var(--lf-font-heading); font-weight: 400; line-height: 1.15; color: var(--lf-white); } a { color: var(--lf-accent); text-decoration: none; transition: color 0.3s var(--lf-transition); } a:hover { color: var(--lf-accent-deep); } img { max-width: 100%; height: auto; } ::selection { background: var(--lf-accent); color: var(--lf-on-accent); } /* =================================================================== NAVIGATION =================================================================== */ #mainNav { padding: 1.25rem 0; background: transparent; transition: background-color 0.4s var(--lf-transition), padding 0.4s var(--lf-transition), box-shadow 0.4s var(--lf-transition); border-bottom: 1px solid transparent; } #mainNav.navbar-shrink { padding: 0.75rem 0; background-color: rgba(var(--lf-dark-rgb), 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--lf-line); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3); } .navbar-brand { font-family: var(--lf-font-heading); font-size: 1.8rem; font-weight: 600; letter-spacing: 1px; color: var(--lf-white) !important; padding: 0; transition: transform 0.3s var(--lf-transition); } .navbar-brand:hover { transform: translateY(-2px); } .brand-dot { color: var(--lf-accent); display: inline-block; animation: dotPulse 3.5s ease-in-out infinite; } @keyframes dotPulse { 0%, 100% { opacity: 1; text-shadow: none; } 50% { opacity: 0.75; text-shadow: 0 0 16px var(--lf-accent-glow); } } /* Burger toggler — liquid glass pill */ .navbar-toggler { display: inline-flex !important; align-items: center; gap: 0.5rem; padding: 0.5rem 1.1rem !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 50px; background: rgba(var(--lf-accent-rgb), 0.08) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: background 0.35s var(--lf-transition), border-color 0.35s var(--lf-transition), box-shadow 0.35s var(--lf-transition); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.06); } /* Force hide toggler on desktop (solves !important conflict) */ @media (min-width: 992px) { .navbar-toggler { display: none !important; } } .navbar-toggler:hover, .navbar-toggler:focus { background: rgba(var(--lf-accent-rgb), 0.18) !important; border-color: rgba(var(--lf-accent-rgb), 0.3) !important; box-shadow: 0 4px 20px rgba(var(--lf-accent-rgb), 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08); } .navbar-toggler:focus { outline: none !important; box-shadow: 0 0 0 3px rgba(var(--lf-accent-rgb), 0.2) !important; } .navbar-toggler .fas { font-size: 0.9rem; color: rgba(255, 255, 255, 0.8); transition: transform 0.3s var(--lf-transition); } .navbar-toggler[aria-expanded="true"] .fas { transform: rotate(90deg); } /* Hamburger → X morph (linie płynnie składają się w krzyżyk) */ .nav-burger { position: relative; display: inline-block; width: 16px; height: 12px; flex: none; } .nav-burger span { position: absolute; left: 0; width: 100%; height: 1.6px; border-radius: 2px; background: rgba(255, 255, 255, 0.82); transition: transform 0.38s var(--lf-ease-out), opacity 0.22s ease; } .nav-burger span:nth-child(1) { top: 0; } .nav-burger span:nth-child(2) { top: 5.2px; } .nav-burger span:nth-child(3) { top: 10.4px; } .navbar-toggler[aria-expanded="true"] .nav-burger span:nth-child(1) { transform: translateY(5.2px) rotate(45deg); } .navbar-toggler[aria-expanded="true"] .nav-burger span:nth-child(2) { opacity: 0; transform: scaleX(0.3); } .navbar-toggler[aria-expanded="true"] .nav-burger span:nth-child(3) { transform: translateY(-5.2px) rotate(-45deg); } .navbar-label { font-family: var(--lf-font-body); font-size: 0.7rem; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; line-height: 1; position: relative; top: 0; } #mainNav .navbar-nav .nav-link { font-family: var(--lf-font-body); font-size: 0.82rem; font-weight: 500; text-transform: uppercase; letter-spacing: 2px; color: rgba(255, 255, 255, 0.7); padding: 0.5rem 1rem; position: relative; transition: color 0.3s var(--lf-transition); } #mainNav .navbar-nav .nav-link::after { content: ''; position: absolute; bottom: 0; left: 1rem; right: 1rem; height: 2px; background: var(--lf-accent); transform: scaleX(0); transform-origin: center; transition: transform 0.4s var(--lf-transition); } #mainNav .navbar-nav .nav-link:hover, #mainNav .navbar-nav .nav-link.active { color: var(--lf-white); } #mainNav .navbar-nav .nav-link:hover::after, #mainNav .navbar-nav .nav-link.active::after { transform: scaleX(1); } /* Cart button in nav */ .cart-btn-nav { background: transparent !important; border: none !important; color: rgba(255, 255, 255, 0.7) !important; display: flex !important; align-items: center; gap: 0.5rem; cursor: pointer; transition: color 0.3s ease; padding: 0.5rem 1rem !important; } .cart-btn-nav:hover { color: var(--lf-white) !important; } .cart-btn-nav:hover svg { transform: translateY(-2px); } .cart-btn-nav svg { transition: transform 0.3s ease; } .cart-count { background: var(--lf-accent); color: var(--lf-on-accent); font-size: 0.65rem; font-weight: 700; padding: 2px 7px; border-radius: 20px; line-height: 1.3; } /* Przełącznik motywu w nav — kropka pokazuje motyw DOCELOWY */ .theme-toggle { background: transparent !important; border: none !important; display: flex !important; align-items: center; gap: 0.6rem; cursor: pointer; padding: 0.5rem 1rem !important; color: rgba(255, 255, 255, 0.7) !important; } .theme-toggle::after { display: none !important; } .theme-dot { width: 17px; height: 17px; border-radius: 50%; background: linear-gradient(135deg, #132B23 0%, #276152 49%, #BA9B5F 51%, #D9C69C 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); transition: transform 0.35s var(--lf-ease-out); flex-shrink: 0; } :root[data-theme="forest"] .theme-dot { background: linear-gradient(135deg, #0f0f14 0%, #232330 49%, #8B5CF6 51%, #c4b5fd 100%); box-shadow: inset 0 0 0 1px rgba(251, 246, 240, 0.18); } @media (hover: hover) and (pointer: fine) { .theme-toggle:hover .theme-dot { transform: scale(1.18) rotate(-12deg); } } .theme-toggle:active .theme-dot { transform: scale(0.9); transition-duration: 0.12s; } .theme-toggle .theme-label { display: none; font-size: 0.8rem; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; } @media (max-width: 991.98px) { .theme-toggle .theme-label { display: inline; } } /* =================================================================== SCROLL PROGRESS BAR =================================================================== */ #scroll-progress { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--lf-accent), var(--lf-accent-deep)); z-index: 9999; transition: width 0.1s linear; box-shadow: 0 0 10px var(--lf-accent-glow); } @media (max-width: 768px) { #scroll-progress { height: 4px; } } /* =================================================================== VIEW MANAGEMENT & SPA TRANSITIONS =================================================================== */ #app-content { min-height: 100vh; position: relative; width: 100%; } .view-section { display: none; opacity: 0; content-visibility: hidden; } .view-section.active { display: block; content-visibility: visible; animation: viewFadeIn 0.6s var(--lf-transition) forwards; } @keyframes viewFadeIn { from { opacity: 0; } to { opacity: 1; } } /* Page Transition Overlay */ #page-transition-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(var(--lf-dark-rgb), 0.85); z-index: 8000; pointer-events: none; opacity: 0; backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); } #page-transition-overlay.enter { animation: transEnter 0.35s var(--lf-ease-out) forwards; } #page-transition-overlay.exit { animation: transExit 0.35s var(--lf-ease-out) forwards; } @keyframes transEnter { from { opacity: 0; backdrop-filter: blur(0); } to { opacity: 1; backdrop-filter: blur(8px); } } @keyframes transExit { from { opacity: 1; backdrop-filter: blur(8px); } to { opacity: 0; backdrop-filter: blur(0); } } /* =================================================================== HERO — Full-screen (inspired by Grayscale masthead) =================================================================== */ .masthead { position: relative; width: 100%; min-height: 100vh; min-height: 100svh; /* svh = stable (smallest viewport), won't jump on mobile scroll */ display: flex; align-items: center; justify-content: center; overflow: hidden; } .masthead-bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 0; transform: scale(1.05); transition: transform 12s ease; filter: brightness(0.5) saturate(0.8); } .masthead:hover .masthead-bg, .masthead .masthead-bg.loaded { transform: scale(1); } .masthead-overlay { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(var(--lf-dark-rgb), 0.4) 0%, rgba(var(--lf-dark-rgb), 0.6) 50%, rgba(var(--lf-dark-rgb), 0.95) 100% ); z-index: 1; } .masthead-content { position: relative; z-index: 2; text-align: center; padding: 2rem; } .masthead-title { font-family: var(--lf-font-heading); font-size: clamp(3rem, 8vw, 7rem); font-weight: 700; letter-spacing: -2px; color: var(--lf-white); margin-bottom: 0.5rem; line-height: 1; } .masthead-title .brand-dot-hero { color: var(--lf-accent); text-shadow: 0 0 40px var(--lf-accent-glow); } .masthead-subtitle { font-family: var(--lf-font-body); font-size: clamp(0.9rem, 2vw, 1.15rem); font-weight: 300; color: rgba(255, 255, 255, 0.6); max-width: 500px; margin: 1.5rem auto 2.5rem; letter-spacing: 3px; text-transform: uppercase; } .btn-hero { display: inline-block; padding: 1rem 2.5rem; font-family: var(--lf-font-body); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 3px; color: var(--lf-white); background: transparent; border: 2px solid var(--lf-accent); border-radius: 50px; cursor: pointer; transition: background 0.4s var(--lf-transition), color 0.4s var(--lf-transition), box-shadow 0.4s var(--lf-transition), transform 0.4s var(--lf-transition); text-decoration: none; } .btn-hero:hover { background: var(--lf-accent); color: var(--lf-on-accent); box-shadow: 0 8px 30px var(--lf-accent-glow); transform: translateY(-3px); } /* =================================================================== SERVICES SECTION (inspired by Agency) =================================================================== */ .services-section { padding: 7rem 0; background: var(--lf-dark); border-bottom: 1px solid var(--lf-line); } @media (max-width: 768px) { .services-section { padding: 4rem 0; } /* Prevent service icon circles from overlapping on mobile */ .service-card { margin-bottom: 2rem; padding-bottom: 1rem; } .service-card:last-child { margin-bottom: 0; padding-bottom: 0; } .service-icon-wrap { width: 70px; height: 70px; font-size: 1.6rem; margin-bottom: 1.2rem; } /* Larger tap target for hero CTA on mobile */ .btn-hero { padding: 1.15rem 2.8rem; font-size: 0.85rem; } } .section-heading { font-family: var(--lf-font-heading); font-size: clamp(2rem, 4vw, 3rem); text-transform: uppercase; letter-spacing: 2px; color: var(--lf-white); margin-bottom: 0.5rem; } .section-subheading { font-family: var(--lf-font-body); font-size: 1rem; font-weight: 300; color: var(--lf-text-muted); margin-bottom: 4rem; } .service-icon-wrap { display: inline-flex; align-items: center; justify-content: center; width: 90px; height: 90px; border-radius: 50%; background: linear-gradient(135deg, var(--lf-accent), var(--lf-accent-deep)); margin-bottom: 1.5rem; font-size: 2rem; color: var(--lf-on-accent); transition: transform 0.4s var(--lf-transition), box-shadow 0.4s ease; } .service-card:hover .service-icon-wrap { transform: translateY(-6px) scale(1.05); box-shadow: 0 12px 40px var(--lf-accent-glow); } .service-card h4 { font-family: var(--lf-font-heading); font-size: 1.4rem; margin-bottom: 0.75rem; color: var(--lf-white); } .service-card p { color: var(--lf-text-muted); font-size: 0.95rem; line-height: 1.7; } /* =================================================================== TYPOGRAPHY UTILITIES (editorial style from old site) =================================================================== */ .editorial-title { font-family: var(--lf-font-heading); font-size: clamp(2.5rem, 6vw, 5rem); letter-spacing: -2px; margin-bottom: 1.5rem; color: var(--lf-white); } .editorial-subtitle { font-family: var(--lf-font-body); font-size: 1.05rem; color: var(--lf-text-muted); font-weight: 300; max-width: 550px; line-height: 1.85; } .title-dot { color: var(--lf-accent); text-shadow: 0 0 20px var(--lf-accent-glow); } /* =================================================================== EDITORIAL CONTAINER & GRID (photo/print views) =================================================================== */ .editorial-container { max-width: 1400px; margin: 0 auto; padding: 6rem 5%; padding-top: calc(var(--lf-nav-height) + 4rem); } @media (max-width: 900px) { .editorial-container { padding: 3rem 5%; padding-top: calc(var(--lf-nav-height) + 2rem); } } .editorial-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 2rem; } @media (min-width: 768px) { .editorial-grid { grid-template-columns: repeat(2, 1fr); gap: 3rem; margin-top: 4rem; } } /* =================================================================== PORTFOLIO / EDITORIAL ITEMS (inspired by Agency hover + existing design) =================================================================== */ .editorial-item { cursor: pointer; position: relative; border-radius: var(--lf-radius); overflow: hidden; background: var(--lf-dark-card); transition: transform 0.5s var(--lf-transition), box-shadow 0.5s ease; } @media (min-width: 900px) { .editorial-item:hover { transform: translateY(-8px); box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4); } } .editorial-img-container { overflow: hidden; position: relative; aspect-ratio: 4 / 3; } .editorial-img-container img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.05); transition: transform 1s var(--lf-transition), filter 0.6s ease; filter: brightness(0.85) saturate(0.9); } .editorial-item:hover .editorial-img-container img { transform: scale(1); filter: brightness(1) saturate(1); } /* Portfolio hover overlay (inspired by Agency) */ .editorial-img-container::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(var(--lf-dark-rgb), 0.85) 100%); opacity: 0.6; transition: opacity 0.4s ease; } .editorial-item:hover .editorial-img-container::after { opacity: 0.3; } .editorial-item-info { padding: 1.5rem 1.75rem 2rem; } .editorial-item-title { font-family: var(--lf-font-heading); font-size: 1.6rem; margin-bottom: 0.4rem; color: var(--lf-white); transition: color 0.3s ease; } .editorial-item:hover .editorial-item-title { color: var(--lf-accent); } .editorial-item-category { font-family: var(--lf-font-body); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 2px; color: var(--lf-text-muted); } .editorial-item-price { margin-top: 0.75rem; font-size: 1rem; font-weight: 300; color: var(--lf-text-muted); } .price-inline-counter { color: var(--lf-accent); font-weight: 500; } /* Lottie click overlay */ .lottie-click-overlay { position: absolute; bottom: 1rem; right: 1rem; width: 50px; height: 50px; z-index: 10; pointer-events: none; opacity: 0.8; transition: opacity 0.5s ease; } .lottie-click-overlay.hidden { opacity: 0; pointer-events: none; } /* =================================================================== PRINT QUALITY HIGHLIGHT =================================================================== */ .print-quality-highlight { background: var(--lf-dark-card); border: 1px solid var(--lf-line); border-radius: var(--lf-radius); padding: 1.25rem 1.5rem; display: flex; flex-direction: row; align-items: flex-start; text-align: left; gap: 1.25rem; margin: 1.5rem 0 2rem; position: relative; overflow: hidden; transition: transform 0.4s var(--lf-transition), border-color 0.4s ease; } @media (min-width: 600px) { .print-quality-highlight { align-items: center; padding: 1.5rem 2rem; gap: 1.75rem; } } .print-quality-highlight:hover { border-color: rgba(var(--lf-accent-rgb), 0.4); transform: translateY(-4px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3); } .print-quality-icon { width: 45px; height: 45px; border-radius: 50%; background: linear-gradient(135deg, var(--lf-accent), var(--lf-accent-deep)); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: var(--lf-on-accent); flex-shrink: 0; margin-top: 0.1rem; } @media (min-width: 600px) { .print-quality-icon { width: 55px; height: 55px; font-size: 1.2rem; margin-top: 0; } } .print-quality-text h3 { font-family: var(--lf-font-heading); font-size: 1.15rem; color: var(--lf-white); margin-bottom: 0.4rem; } .print-quality-text p { font-size: 0.85rem; color: var(--lf-text-muted); font-weight: 300; line-height: 1.6; margin: 0; } /* =================================================================== ITEM DETAILS / SPREAD VIEW (preserved from original) =================================================================== */ .item-spread { display: flex; flex-direction: column; min-height: calc(100vh - var(--lf-nav-height)); } @media (min-width: 900px) { .item-spread { flex-direction: row; } } @media (max-width: 899px) { .item-spread { min-height: 0 !important; } } .item-spread-image { flex: 1; position: relative; min-height: 50vh; background: var(--lf-dark-card); } @media (min-width: 900px) { .item-spread-image { position: sticky; top: var(--lf-nav-height); height: calc(100vh - var(--lf-nav-height)); min-width: 50%; max-width: 50%; } } @media (max-width: 899px) { .item-spread-image { flex: none !important; min-height: 0 !important; height: auto !important; max-height: 75vh !important; } .item-spread-image img { width: 100% !important; height: auto !important; max-height: 75vh !important; object-fit: contain !important; } } .item-spread-image img { width: 100%; height: 100%; object-fit: contain; object-position: center; } .item-spread-content { flex: 1; padding: 3rem 5%; display: flex; flex-direction: column; justify-content: center; background: var(--lf-dark-lighter); } @media (min-width: 900px) { .item-spread-content { padding: 5rem 8%; min-width: 50%; max-width: 50%; } } .item-spread-title { font-family: var(--lf-font-heading); font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.1; margin-bottom: 2rem; color: var(--lf-white); } .item-spread-desc { font-size: 1.05rem; color: var(--lf-text-muted); font-weight: 300; max-width: 600px; margin-bottom: 3rem; line-height: 1.8; } .item-spread-actions { margin-top: auto; border-top: 1px solid var(--lf-line); padding-top: 3rem; display: flex; flex-direction: column; gap: 2rem; } @media (min-width: 500px) { .item-spread-actions { flex-direction: row; justify-content: space-between; align-items: flex-end; } } .item-spread-price { font-family: var(--lf-font-body); font-size: 2.2rem; font-weight: 300; color: var(--lf-white); } /* =================================================================== BUTTONS (editorial style, preserved) =================================================================== */ .btn-editorial { display: inline-block; padding: 1rem 0; font-family: var(--lf-font-body); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 2.5px; color: var(--lf-white); background: transparent; border: none; border-bottom: 2px solid var(--lf-accent); cursor: pointer; transition: padding-left 0.4s var(--lf-transition), color 0.4s var(--lf-transition), border-color 0.4s var(--lf-transition); position: relative; } .btn-editorial:hover { padding-left: 1.5rem; color: var(--lf-accent); border-color: var(--lf-white); } .btn-editorial::before { content: '→'; position: absolute; left: 0; opacity: 0; transition: opacity 0.3s ease; } .btn-editorial:hover::before { opacity: 1; } /* Qty stepper */ .qty-stepper { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--lf-line); border-radius: 8px; overflow: hidden; } .qty-btn { background: var(--lf-surface); border: none; color: var(--lf-white); width: 40px; height: 40px; font-size: 1.1rem; cursor: pointer; transition: background 0.2s var(--lf-transition); } .qty-btn:hover { background: var(--lf-accent-deep); } .qty-value { display: inline-block; min-width: 2.5rem; text-align: center; font-size: 1rem; font-weight: 500; color: var(--lf-white); background: var(--lf-dark-card); height: 40px; line-height: 40px; } /* =================================================================== CONTACT SECTION =================================================================== */ .contact-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 3rem; } @media (min-width: 600px) { .contact-grid { grid-template-columns: repeat(2, 1fr); } } .contact-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 3rem 2rem; background: var(--lf-dark-card); border: 1px solid var(--lf-line); border-radius: var(--lf-radius); transition: border-color 0.4s var(--lf-transition), transform 0.4s var(--lf-transition), box-shadow 0.4s var(--lf-transition), color 0.4s var(--lf-transition); text-decoration: none; color: var(--lf-text); } .contact-card:hover { border-color: var(--lf-accent); transform: translateY(-6px); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); color: var(--lf-white); } .contact-card-icon { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, var(--lf-accent), var(--lf-accent-deep)); display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; color: var(--lf-on-accent); transition: transform 0.4s var(--lf-transition); } .contact-card:hover .contact-card-icon { transform: scale(1.1); } .contact-card-title { font-family: var(--lf-font-heading); font-size: 1.3rem; margin-bottom: 0.5rem; color: var(--lf-white); } .contact-card-value { font-size: 0.9rem; color: var(--lf-text-muted); word-break: break-all; } .contact-card-hint { display: block; font-size: 0.72rem; color: var(--lf-accent); margin-top: 0.5rem; text-transform: uppercase; letter-spacing: 1px; } /* =================================================================== FORM CONTAINER (preserved from original) =================================================================== */ .editorial-form-container { max-width: 800px; margin: 6rem auto 0; padding: 4rem 0 0; border-top: 1px solid var(--lf-line); } @media (max-width: 900px) { .editorial-form-container { margin: 2rem auto 0; padding: 2rem 0 0; } } .editorial-form { display: flex; flex-direction: column; gap: 2rem; margin-top: 2rem; } .editorial-form input, .editorial-form textarea, .editorial-form select { width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--lf-line); color: var(--lf-white); padding: 1rem 0; font-family: var(--lf-font-body); font-size: 1rem; transition: border-color 0.3s ease; } .editorial-form input:focus, .editorial-form textarea:focus, .editorial-form select:focus { outline: none; border-bottom-color: var(--lf-accent); } .editorial-form select option { background: var(--lf-dark); color: var(--lf-white); } /* =================================================================== CAROUSEL / GALLERY SLIDER (preserved from original) =================================================================== */ .carousel-container { position: relative; width: 100%; overflow: hidden; background: var(--lf-dark-card); height: 100%; min-height: 50vh; } .carousel-track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: auto; touch-action: pan-y; scrollbar-width: none; } .carousel-track::-webkit-scrollbar { display: none; width: 0; height: 0; } .carousel-slide { flex: 0 0 100%; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 1rem; scroll-snap-align: center; overflow: hidden; } .carousel-slide img { width: 100%; height: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; } .carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(var(--lf-dark-rgb), 0.8); color: var(--lf-white); border: 1px solid var(--lf-line); width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; transition: background 0.3s var(--lf-transition), border-color 0.3s var(--lf-transition); border-radius: 50%; backdrop-filter: blur(10px); font-size: 1.1rem; } .carousel-btn:hover { background: var(--lf-accent); border-color: var(--lf-accent); color: var(--lf-on-accent); } .carousel-prev { left: 1rem; } .carousel-next { right: 1rem; } @media (min-width: 900px) { .carousel-container { position: sticky; top: var(--lf-nav-height); height: calc(100vh - var(--lf-nav-height)); } .carousel-slide { padding: 4rem; } .carousel-prev { left: 2rem; } .carousel-next { right: 2rem; } } /* Carousel counter */ .carousel-counter { position: absolute; bottom: 1.5rem; right: 1.5rem; background: rgba(var(--lf-dark-rgb), 0.75); backdrop-filter: blur(10px); padding: 0.5rem 1rem; border-radius: 50px; font-family: var(--lf-font-body); font-size: 0.8rem; font-weight: 500; color: rgba(255, 255, 255, 0.7); z-index: 20; border: 1px solid var(--lf-line); } .cc-sep { color: var(--lf-text-muted); margin: 0 0.15rem; } .cc-flip { animation: ccFlip 0.3s ease; } @keyframes ccFlip { 0% { transform: translateY(-5px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } /* Carousel swipe hint (mobile only) */ .carousel-swipe-hint { position: absolute; bottom: 3.5rem; left: 50%; transform: translateX(-50%); z-index: 15; pointer-events: none; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: rgba(var(--lf-dark-rgb), 0.7); backdrop-filter: blur(10px); border: 1px solid var(--lf-line); border-radius: 50px; font-family: var(--lf-font-body); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 2px; color: rgba(255, 255, 255, 0.6); animation: swipeHintAnim 3s ease forwards; } .carousel-swipe-hint svg { animation: swipeArrow 1.5s ease-in-out infinite; } @keyframes swipeHintAnim { 0% { opacity: 0; } 15% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; pointer-events: none; } } @keyframes swipeArrow { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } } @media (min-width: 900px) { .carousel-swipe-hint { display: none; } } /* =================================================================== LIGHTBOX (preserved & enhanced) =================================================================== */ .modal-overlay { position: fixed; inset: 0; background: rgba(var(--lf-overlay-rgb), 0.95); backdrop-filter: blur(15px); z-index: 3000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.4s var(--lf-transition), visibility 0.4s var(--lf-transition); } .modal-overlay.active { opacity: 1; visibility: visible; } .modal-backdrop { position: fixed; inset: 0; background: rgba(var(--lf-overlay-rgb), 0.95); backdrop-filter: blur(15px); z-index: 4000; display: flex; align-items: center; justify-content: center; animation: fadeInBg 0.4s ease forwards; } #cart-backdrop { z-index: 1900; } @keyframes fadeInBg { from { opacity: 0; } to { opacity: 1; } } .lightbox-content { position: relative; max-width: 95vw; max-height: 85vh; display: flex; flex-direction: column; align-items: center; justify-content: center; animation: scaleUpLightbox 0.5s var(--lf-transition) forwards; } @keyframes scaleUpLightbox { from { opacity: 0; transform: scale(0.92) translateY(15px); } to { opacity: 1; transform: scale(1) translateY(0); } } .lightbox-img { max-width: 100%; max-height: 85vh; object-fit: contain; border-radius: var(--lf-radius-sm); box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6); transition: opacity 0.2s ease; } .lightbox-caption { margin-top: 1rem; color: rgba(255, 255, 255, 0.6); font-family: var(--lf-font-body); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 2px; } .lightbox-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: rgba(255, 255, 255, 0.6); font-size: 3rem; cursor: pointer; z-index: 5000; padding: 1rem; transition: color 0.3s ease; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); } .lightbox-nav-btn:hover { color: var(--lf-white); } .lightbox-nav-btn.prev { left: 10px; } .lightbox-nav-btn.next { right: 10px; } .carousel-slide img, .item-spread-image img { cursor: zoom-in; } /* =================================================================== FULLSCREEN HINT OVERLAY (preserved) =================================================================== */ .fullscreen-hint { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 100; pointer-events: none; animation: hintAppearDisappear 3.5s ease forwards; } .fullscreen-hint-inner { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.5rem; background: rgba(var(--lf-dark-rgb), 0.7); backdrop-filter: blur(12px); border: 1px solid var(--lf-line); border-radius: 50px; color: var(--lf-white); font-family: var(--lf-font-body); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 2px; font-weight: 500; white-space: nowrap; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5); } .fullscreen-hint-inner svg { flex-shrink: 0; } @keyframes hintAppearDisappear { 0% { opacity: 0; transform: translateX(-50%) translateY(10px); } 15% { opacity: 1; transform: translateX(-50%) translateY(0); } 70% { opacity: 1; transform: translateX(-50%) translateY(0); } 100% { opacity: 0; transform: translateX(-50%) translateY(-8px); } } /* =================================================================== CART SIDEBAR (preserved & restyled) =================================================================== */ .cart-sidebar { position: fixed; top: 0; right: -450px; width: 100%; max-width: 400px; height: 100vh; background: var(--lf-dark-lighter); border-left: 1px solid var(--lf-line); z-index: 2000; transition: right 0.6s var(--lf-transition); display: flex; flex-direction: column; } .cart-sidebar.open { right: 0; } .cart-header { padding: 2rem; border-bottom: 1px solid var(--lf-line); display: flex; justify-content: space-between; align-items: center; } .cart-header h2, .cart-header h3 { margin: 0; font-family: var(--lf-font-heading); font-size: 1.8rem; color: var(--lf-white); } .close-btn { background: transparent; border: none; color: var(--lf-text-muted); font-size: 1.8rem; cursor: pointer; transition: color 0.3s ease; line-height: 1; } .close-btn:hover { color: var(--lf-accent); } .cart-items { flex: 1; overflow-y: auto; padding: 2rem; } .cart-item { display: flex; justify-content: space-between; align-items: center; padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--lf-line); } .cart-item h4 { color: var(--lf-white); font-size: 1rem; margin: 0 0 0.25rem; } .cart-item-price { color: var(--lf-text-muted); font-size: 0.85rem; } .cart-qty-ctrl { display: flex; align-items: center; gap: 0; border: 1px solid var(--lf-line); border-radius: 6px; overflow: hidden; } .cart-qty-ctrl .qty-btn { width: 30px; height: 30px; font-size: 0.9rem; } .remove-item { background: transparent; border: none; color: var(--lf-text-muted); cursor: pointer; padding: 0.25rem; transition: color 0.3s ease; } .remove-item:hover { color: #ef4444; } .cart-footer { padding: 2rem; border-top: 1px solid var(--lf-line); background: var(--lf-dark-card); } @media (max-width: 768px) { .cart-footer { padding-bottom: 3.5rem; } } /* =================================================================== CHECKOUT MODAL (preserved & restyled) =================================================================== */ .editorial-modal { background: var(--lf-dark-lighter); border: 1px solid var(--lf-line); border-radius: var(--lf-radius); padding: 4rem; max-width: 600px; width: 90%; max-height: 90vh; overflow-y: auto; position: relative; transform: translateY(20px); transition: transform 0.5s var(--lf-transition); } .modal-overlay.active .editorial-modal { transform: translateY(0); } .editorial-modal .close-btn { position: absolute; top: 1.5rem; right: 1.5rem; } @media (max-width: 768px) { .editorial-modal { padding: 1.5rem; border-radius: var(--lf-radius-sm); } } .checkout-title { margin-bottom: 1rem; font-family: var(--lf-font-heading); font-size: 2.2rem; color: var(--lf-white); } .checkout-total { margin-bottom: 2rem; color: var(--lf-text-muted); } .checkout-total strong { color: var(--lf-white); font-size: 1.5rem; } .checkout-summary-box { margin-bottom: 2rem; text-align: left; background: var(--lf-dark-card); padding: 1.5rem; border: 1px solid var(--lf-line); border-radius: var(--lf-radius-sm); } /* =================================================================== FOOTER =================================================================== */ .site-footer { padding: 4rem 0 2rem; background: var(--lf-dark-card); border-top: 1px solid var(--lf-line); color: var(--lf-text-muted); } .footer-brand { font-family: var(--lf-font-heading); font-size: 2rem; color: var(--lf-white); margin-bottom: 0.5rem; } .footer-brand span { color: var(--lf-accent); } .footer-tagline { font-size: 0.9rem; color: var(--lf-text-muted); font-weight: 300; max-width: 280px; } .btn-social { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--lf-surface); color: var(--lf-text-muted); border: 1px solid var(--lf-line); font-size: 0.95rem; transition: background 0.3s var(--lf-transition), color 0.3s var(--lf-transition), border-color 0.3s var(--lf-transition), transform 0.3s var(--lf-transition); text-decoration: none; } .btn-social:hover { background: var(--lf-accent); color: var(--lf-white); border-color: var(--lf-accent); transform: translateY(-3px); } .footer-copyright { font-size: 0.8rem; margin-bottom: 0.25rem; } .footer-location { font-size: 0.75rem; color: rgba(255, 255, 255, 0.3); } .footer-privacy { margin: 0.5rem 0 0; font-size: 0.72rem; letter-spacing: 0.5px; } .footer-privacy a { color: rgba(255, 255, 255, 0.4); text-decoration: none; transition: color 0.25s ease; border-bottom: 1px solid transparent; padding-bottom: 1px; } .footer-privacy a:hover { color: var(--lf-accent); border-bottom-color: rgba(var(--lf-accent-rgb), 0.4); } @media (max-width: 768px) { .site-footer { padding: 3rem 0 2.5rem; text-align: center; } .site-footer .col-lg-4 { text-align: center !important; margin-bottom: 1.5rem; } .site-footer .col-lg-4:last-child { margin-bottom: 0; } .footer-tagline { margin-left: auto; margin-right: auto; } .footer-brand { font-size: 1.8rem; } } /* =================================================================== CITY COMMENT HIGHLIGHT (preserved) =================================================================== */ .city-comment-highlight { border-radius: var(--lf-radius-sm); overflow: hidden; border: 1px solid var(--lf-line); } .city-comment-highlight img { width: 100%; height: auto; display: block; } /* =================================================================== STRONY INTERNETOWE (Websites) — Subpage Styles =================================================================== */ /* Hero image block */ .websites-hero-img { position: relative; border-radius: var(--lf-radius); overflow: hidden; margin-bottom: 3rem; box-shadow: 0 12px 50px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04); } .websites-hero-img img { width: 100%; height: auto; display: block; transition: transform 0.6s var(--lf-transition); } .websites-hero-img:hover img { transform: scale(1.03); } .websites-hero-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.5rem; background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); display: flex; justify-content: flex-start; align-items: flex-end; } .websites-hero-badge { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--lf-font-body); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 2.5px; color: var(--lf-white); background: rgba(var(--lf-accent-rgb), 0.25); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(var(--lf-accent-rgb), 0.35); padding: 0.6rem 1.2rem; border-radius: 50px; } .websites-hero-badge i { color: var(--lf-accent); } /* Quote / motivation block */ .websites-quote-block { position: relative; padding: 2.5rem 2rem 2.5rem 2.5rem; margin-bottom: 3.5rem; background: rgba(var(--lf-accent-rgb), 0.06); border-left: 3px solid var(--lf-accent); border-radius: 0 var(--lf-radius) var(--lf-radius) 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); } .websites-quote-icon { position: absolute; top: -16px; left: 20px; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--lf-accent), var(--lf-accent-deep)); display: flex; align-items: center; justify-content: center; font-size: 0.85rem; color: var(--lf-white); box-shadow: 0 4px 16px rgba(var(--lf-accent-rgb), 0.3); } .websites-quote-text { font-family: var(--lf-font-heading); font-size: 1.15rem; font-weight: 400; font-style: italic; color: rgba(255, 255, 255, 0.85); line-height: 1.8; margin: 0; } /* Offer cards */ .websites-offers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 3.5rem; } .websites-offer-card { padding: 2rem 1.5rem; background: rgba(var(--lf-dark-lighter-rgb), 0.92); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: var(--lf-radius); text-align: center; transition: transform 0.4s var(--lf-transition), border-color 0.4s var(--lf-transition), box-shadow 0.4s var(--lf-transition); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.03); } .websites-offer-card:hover { transform: translateY(-5px); border-color: rgba(var(--lf-accent-rgb), 0.3); box-shadow: 0 12px 40px rgba(var(--lf-accent-rgb), 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.05); } .websites-offer-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--lf-accent), var(--lf-accent-deep)); margin-bottom: 1.25rem; font-size: 1.2rem; color: var(--lf-on-accent); box-shadow: 0 6px 24px rgba(var(--lf-accent-rgb), 0.3); transition: transform 0.4s var(--lf-transition); } .websites-offer-card:hover .websites-offer-icon { transform: scale(1.12) translateY(-2px); } .websites-offer-card h3 { font-family: var(--lf-font-heading); font-size: 1.15rem; font-weight: 600; color: var(--lf-white); margin-bottom: 0.75rem; } .websites-offer-card p { font-family: var(--lf-font-body); font-size: 0.88rem; color: var(--lf-text-muted); line-height: 1.6; margin: 0; } /* Capabilities section */ .websites-capabilities { padding: 3rem 0; margin-bottom: 2rem; border-top: 1px solid var(--lf-line); } .websites-features-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .websites-feature { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; background: rgba(var(--lf-surface-rgb), 0.35); border: 1px solid rgba(255, 255, 255, 0.04); border-radius: var(--lf-radius-sm); font-family: var(--lf-font-body); font-size: 0.88rem; color: rgba(255, 255, 255, 0.82); transition: background 0.35s var(--lf-transition), border-color 0.35s var(--lf-transition), transform 0.35s var(--lf-transition); } .websites-feature:hover { background: rgba(var(--lf-accent-rgb), 0.08); border-color: rgba(var(--lf-accent-rgb), 0.2); transform: translateX(4px); } .websites-feature-dot { width: 8px; height: 8px; min-width: 8px; border-radius: 50%; background: var(--lf-accent); box-shadow: 0 0 8px rgba(var(--lf-accent-rgb), 0.5); } /* === WEBSITES RESPONSIVE === */ @media (max-width: 900px) { .websites-offers { grid-template-columns: 1fr; gap: 1rem; } .websites-features-grid { grid-template-columns: 1fr; } .websites-quote-block { padding: 2rem 1.5rem 2rem 1.75rem; } .websites-quote-text { font-size: 1.05rem; } } @media (max-width: 600px) { .websites-quote-text { font-size: 0.95rem; line-height: 1.7; } .websites-offer-card { padding: 1.5rem 1.25rem; } .websites-feature { padding: 0.9rem 1rem; font-size: 0.82rem; } } /* Touch — disable hover transforms */ @media (hover: none) and (pointer: coarse) { .websites-offer-card:hover { transform: none; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.03); } .websites-feature:hover { transform: none; } .websites-hero-img:hover img { transform: none; } } /* =================================================================== WYNIKI / NOWA JAKOŚĆ — Social Proof Section =================================================================== */ /* Container */ .wyniki-container { max-width: 1000px; margin: 0 auto; padding: 4rem 5% 3rem; padding-top: calc(var(--lf-nav-height) + 3rem); } /* When embedded in home page – no navbar offset needed */ #wyniki-home .wyniki-container { padding-top: 4rem; } .wyniki-home-section { border-top: 1px solid var(--lf-line-color, rgba(255,255,255,0.08)); } /* Hero header */ .wyniki-hero { text-align: center; margin-bottom: 3rem; } .wyniki-hero .editorial-subtitle { margin-left: auto; margin-right: auto; text-align: center; } /* Badge */ .wyniki-badge { display: inline-block; font-family: var(--lf-font-body); font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 3px; color: var(--lf-accent); background: rgba(var(--lf-accent-rgb), 0.1); border: 1px solid rgba(var(--lf-accent-rgb), 0.25); padding: 0.4rem 1.2rem; border-radius: 50px; margin-bottom: 1.5rem; } /* Pills */ .wyniki-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 2rem; } .wyniki-pill { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--lf-font-body); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; color: var(--lf-white); padding: 0.65rem 1.4rem; border-radius: 50px; background: rgba(var(--lf-accent-rgb), 0.12); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(var(--lf-accent-rgb), 0.3); box-shadow: 0 4px 20px rgba(var(--lf-accent-rgb), 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05); transition: background 0.35s var(--lf-transition), border-color 0.35s var(--lf-transition), transform 0.35s var(--lf-transition), box-shadow 0.35s var(--lf-transition); } .wyniki-pill:hover { background: rgba(var(--lf-accent-rgb), 0.22); border-color: rgba(var(--lf-accent-rgb), 0.5); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(var(--lf-accent-rgb), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08); } .wyniki-pill i { font-size: 0.7rem; color: var(--lf-accent); } /* Counters card */ .wyniki-counters-card { background: rgba(var(--lf-dark-lighter-rgb), 0.92); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; padding: 2.5rem 1.5rem; margin-bottom: 2.5rem; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.04); } .wyniki-counters { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; } .wyniki-counter-item { display: flex; flex-direction: column; align-items: center; text-align: center; flex: 0 0 calc(50% - 1.5rem); min-width: 0; max-width: calc(50% - 1rem); } .wyniki-counter-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--lf-accent), var(--lf-accent-deep)); margin-bottom: 1rem; font-size: 1.15rem; color: var(--lf-on-accent); box-shadow: 0 6px 24px rgba(var(--lf-accent-rgb), 0.3); transition: transform 0.4s var(--lf-transition); } .wyniki-counter-item:hover .wyniki-counter-icon { transform: scale(1.15) translateY(-3px); } .wyniki-counter-num { display: block; font-family: var(--lf-font-heading); font-size: 2.8rem; font-weight: 400; color: var(--lf-white); line-height: 1; margin-bottom: 0.5rem; font-variant-numeric: tabular-nums; min-height: 1em; white-space: nowrap; } /* Nowa Jakość Banner (in Portfolio view) */ .nj-banner { display: flex; align-items: center; gap: 1rem; margin-top: 2.5rem; padding: 1.2rem 1.5rem; background: rgba(var(--lf-accent-rgb), 0.08); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(var(--lf-accent-rgb), 0.25); border-radius: var(--lf-radius); cursor: pointer; transition: background 0.4s var(--lf-transition), border-color 0.4s var(--lf-transition), transform 0.4s var(--lf-transition), box-shadow 0.4s var(--lf-transition); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.04); } .nj-banner:hover { background: rgba(var(--lf-accent-rgb), 0.16); border-color: rgba(var(--lf-accent-rgb), 0.45); transform: translateY(-3px); box-shadow: 0 12px 40px rgba(var(--lf-accent-rgb), 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.06); } .nj-banner-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-width: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--lf-accent), var(--lf-accent-deep)); color: var(--lf-on-accent); font-size: 1rem; box-shadow: 0 4px 16px rgba(var(--lf-accent-rgb), 0.3); transition: transform 0.4s var(--lf-transition); } .nj-banner:hover .nj-banner-icon { transform: scale(1.1); } .nj-banner-text { flex: 1; min-width: 0; } .nj-banner-title { display: block; font-family: var(--lf-font-heading); font-size: 1.1rem; color: var(--lf-white); line-height: 1.2; margin-bottom: 0.15rem; } .nj-banner-sub { display: block; font-family: var(--lf-font-body); font-size: 0.72rem; color: var(--lf-text-muted); text-transform: uppercase; letter-spacing: 1.5px; } .nj-banner-arrow { color: var(--lf-accent); font-size: 0.9rem; transition: transform 0.3s ease; flex-shrink: 0; } .nj-banner:hover .nj-banner-arrow { transform: translateX(4px); } /* Phone Reveal Section */ .phone-reveal-section { text-align: center; margin-bottom: 3rem; } .phone-reveal-hint { font-family: var(--lf-font-body); font-size: 0.72rem; font-weight: 500; text-transform: uppercase; letter-spacing: 2px; color: var(--lf-text-muted); margin-bottom: 2rem; animation: hintBounce 2.5s ease-in-out infinite; } .phone-reveal-hint i { display: block; margin-bottom: 0.5rem; font-size: 1rem; color: var(--lf-accent); } @keyframes hintBounce { 0%, 100% { transform: translateY(0); opacity: 0.7; } 50% { transform: translateY(6px); opacity: 1; } } .phone-reveal-container { position: relative; min-height: 80vh; display: flex; align-items: center; justify-content: center; overflow: visible; } /* Purple glow behind phone */ .phone-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; height: 500px; background: radial-gradient(ellipse, rgba(var(--lf-accent-rgb), 0.35) 0%, transparent 70%); border-radius: 50%; filter: blur(60px); pointer-events: none; opacity: 0; transition: opacity 0.3s ease; } /* Phone image */ .phone-reveal-img { position: relative; z-index: 2; transform: translateY(120%) scale(0.3) rotate(8deg); opacity: 0; will-change: transform, opacity; max-width: 320px; width: 75%; margin: 0 auto; } .phone-reveal-img img { width: 100%; height: auto; display: block; filter: drop-shadow(0 20px 60px rgba(0, 0, 0, 0.5)) drop-shadow(0 8px 20px rgba(var(--lf-accent-rgb), 0.15)); } /* CTA */ .wyniki-cta { text-align: center; padding: 2rem 0 1rem; border-top: 1px solid var(--lf-line); } .wyniki-cta-text { font-family: var(--lf-font-body); font-size: 0.95rem; color: var(--lf-text-muted); margin-bottom: 1.5rem; font-weight: 300; } /* === WYNIKI RESPONSIVE === */ /* Tablet */ @media (min-width: 768px) { .wyniki-container { padding-top: calc(var(--lf-nav-height) + 5rem); } .wyniki-counters-card { padding: 3rem 2.5rem; } .wyniki-counters { gap: 3rem; } .wyniki-counter-icon { width: 60px; height: 60px; font-size: 1.3rem; margin-bottom: 1.2rem; } .wyniki-counter-num { font-size: 3.2rem; } .wyniki-counter-item { flex: 0 0 auto; max-width: none; min-width: 120px; } .phone-reveal-img { max-width: 360px; width: 65%; } } /* Desktop */ @media (min-width: 1024px) { .wyniki-container { padding-top: calc(var(--lf-nav-height) + 6rem); } .wyniki-counters { gap: 2.5rem; } .wyniki-counter-item { flex: 0 0 auto; max-width: none; min-width: 130px; } .wyniki-counter-icon { width: 68px; height: 68px; font-size: 1.4rem; } .wyniki-counter-num { font-size: 3rem; } .phone-reveal-container { min-height: 70vh; } .phone-reveal-img { max-width: 380px; width: 55%; } .phone-glow { width: 400px; height: 600px; } } /* Small mobile */ @media (max-width: 400px) { .wyniki-counters { gap: 1rem; } .wyniki-counter-icon { width: 44px; height: 44px; font-size: 1rem; margin-bottom: 0.75rem; } .wyniki-counter-num { font-size: 1.7rem; } .wyniki-pill { font-size: 0.62rem; padding: 0.5rem 1rem; letter-spacing: 1.5px; } .wyniki-multiplier-num { font-size: 3.5rem; } .phone-reveal-img { max-width: 260px; width: 80%; } } /* =================================================================== ANIMATIONS ENGINE =================================================================== */ /* Scroll-Reveal */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--lf-transition), transform 0.7s var(--lf-transition); will-change: opacity, transform; } .reveal.revealed { opacity: 1; transform: translateY(0); } .reveal-stagger > .reveal:nth-child(1) { transition-delay: 0ms; } .reveal-stagger > .reveal:nth-child(2) { transition-delay: 80ms; } .reveal-stagger > .reveal:nth-child(3) { transition-delay: 160ms; } .reveal-stagger > .reveal:nth-child(4) { transition-delay: 240ms; } .reveal-stagger > .reveal:nth-child(5) { transition-delay: 320ms; } .reveal-stagger > .reveal:nth-child(6) { transition-delay: 400ms; } /* Alternating card directions */ .reveal.from-left { transform: translateX(-30px) translateY(0); opacity: 0; } .reveal.from-right { transform: translateX(30px) translateY(0); opacity: 0; } .reveal.from-left.revealed, .reveal.from-right.revealed { transform: translateX(0) translateY(0); opacity: 1; } /* Split char reveal */ .split-char { display: inline-block; opacity: 0; transform: translateY(30px); transition: opacity 0.5s var(--lf-transition), transform 0.5s var(--lf-transition); } .split-char.char-revealed { opacity: 1; transform: translateY(0); } /* Logo animation */ .logo-letters-wrap { display: inline; } .logo-letter { display: inline-block; transition: transform 0.3s var(--lf-transition); } @keyframes logoShimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } .logo-shimmer-active { background: linear-gradient(90deg, var(--lf-white) 0%, var(--lf-accent) 50%, var(--lf-white) 100%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: logoShimmer 1.2s ease forwards; } /* Back to top button */ #back-to-top { position: fixed; bottom: 2rem; right: 2rem; width: 44px; height: 44px; border-radius: 50%; background: var(--lf-accent); color: var(--lf-on-accent); border: none; cursor: pointer; z-index: 1000; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.3s var(--lf-transition), visibility 0.3s var(--lf-transition), transform 0.3s var(--lf-transition), background 0.3s var(--lf-transition); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px var(--lf-accent-glow); } #back-to-top svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } #back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); } #back-to-top:hover { background: var(--lf-accent-deep); transform: translateY(-3px); } /* Cart bounce */ @keyframes cartBounce { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-6px); } 60% { transform: translateY(2px); } } .cart-bounce { animation: cartBounce 0.5s ease; } /* Ripple */ .btn-editorial { overflow: hidden; } .ripple-wave { position: absolute; border-radius: 50%; background: rgba(var(--lf-accent-rgb), 0.25); transform: scale(0); animation: rippleSpread 0.6s ease-out; pointer-events: none; } @keyframes rippleSpread { to { transform: scale(4); opacity: 0; } } /* Custom cursor */ #custom-cursor { position: fixed; width: 20px; height: 20px; border: 2px solid var(--lf-accent); border-radius: 50%; pointer-events: none; z-index: 99999; opacity: 0; transition: width 0.3s ease, height 0.3s ease, opacity 0.3s ease, border-color 0.3s ease; transform: translate(-50%, -50%); mix-blend-mode: difference; } #custom-cursor.visible { opacity: 1; } #custom-cursor.hovered { width: 45px; height: 45px; border-color: var(--lf-white); } #custom-cursor.clicking { width: 15px; height: 15px; border-color: var(--lf-accent-deep); } /* Live dot */ .live-dot { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--lf-font-body); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 2px; color: #4ade80; margin-bottom: 1rem; } .live-dot::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #4ade80; animation: livePulse 2s ease infinite; } @keyframes livePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.5); } 50% { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); } } /* Counter blocks */ .counter-block { display: flex; justify-content: center; gap: 4rem; margin-top: 5rem; padding: 3rem 0; border-top: 1px solid var(--lf-line); border-bottom: 1px solid var(--lf-line); flex-wrap: wrap; } .counter-item { text-align: center; min-width: 120px; } .anim-counter { display: block; font-family: var(--lf-font-heading); font-size: 3rem; font-weight: 400; color: var(--lf-white); line-height: 1; margin-bottom: 0.5rem; font-variant-numeric: tabular-nums; min-height: 1em; white-space: nowrap; } .counter-label { display: block; font-family: var(--lf-font-body); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 2px; color: var(--lf-text-muted); } .price-counter-wrap { display: flex; align-items: baseline; justify-content: center; gap: 0.25rem; } .price-counter-prefix { font-family: var(--lf-font-body); font-size: 1rem; color: var(--lf-text-muted); } /* Image skeleton loader */ .img-skeleton { position: absolute; inset: 0; background: linear-gradient(90deg, var(--lf-dark-card) 25%, var(--lf-surface) 50%, var(--lf-dark-card) 75%); background-size: 200% 100%; animation: skelShimmer 1.5s ease infinite; z-index: 5; border-radius: var(--lf-radius-sm); } @keyframes skelShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .skel-fade-out { animation: skelFadeOut 0.4s ease forwards; } @keyframes skelFadeOut { to { opacity: 0; } } /* Footer reveal */ .site-footer { opacity: 0; transform: translateY(20px); transition: opacity 0.8s var(--lf-transition), transform 0.8s var(--lf-transition); } .site-footer.footer-revealed { opacity: 1; transform: translateY(0); } /* =================================================================== FADE-IN-UP (used in contact view) =================================================================== */ .fade-in-up { opacity: 0; transform: translateY(20px); animation: fadeInUpAnim 0.7s var(--lf-transition) forwards; } @keyframes fadeInUpAnim { to { opacity: 1; transform: translateY(0); } } /* =================================================================== MOBILE-SPECIFIC RESPONSIVE RULES =================================================================== */ @media (max-width: 991px) { /* Mobile menu — liquid glass dropdown */ .navbar-collapse { background: rgba(var(--lf-dark-rgb), 0.85); backdrop-filter: blur(24px) saturate(1.2); -webkit-backdrop-filter: blur(24px) saturate(1.2); padding: 1.5rem 1.5rem 2rem; margin-top: 0.75rem; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05); /* Smooth collapse transition — prevents border lingering */ transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease; } /* Override Bootstrap collapse transitions to prevent border flash */ .navbar-collapse.collapsing { opacity: 0.5; transition: height 0.25s ease, opacity 0.25s ease; } .navbar-collapse:not(.show):not(.collapsing) { /* When fully hidden, make border invisible instantly */ border-color: transparent !important; box-shadow: none !important; background: transparent !important; } #mainNav .navbar-nav { gap: 0; } #mainNav .navbar-nav .nav-link { font-size: 0.9rem; padding: 0.9rem 0.5rem; letter-spacing: 2.5px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); display: flex; align-items: center; gap: 0.75rem; transition: color 0.3s ease, padding-left 0.3s ease, background 0.3s ease; border-radius: 8px; margin: 2px 0; } #mainNav .navbar-nav .nav-link:last-child { border-bottom: none; } /* Active state — purple accent */ #mainNav .navbar-nav .nav-link.active { color: var(--lf-white); background: rgba(var(--lf-accent-rgb), 0.1); padding-left: 1rem; } #mainNav .navbar-nav .nav-link.active::before { content: ''; width: 3px; height: 18px; background: var(--lf-accent); border-radius: 4px; flex-shrink: 0; box-shadow: 0 0 8px var(--lf-accent-glow); } /* Remove the underline ::after on mobile (replaced by left accent) */ #mainNav .navbar-nav .nav-link::after { display: none; } /* Hover — subtle highlight */ #mainNav .navbar-nav .nav-link:hover { background: rgba(255, 255, 255, 0.04); padding-left: 0.8rem; } /* Cart button fix in mobile menu */ .cart-btn-nav { justify-content: flex-start; padding: 0.9rem 0.5rem !important; } /* Staggered link reveal on mobile menu open */ .navbar-collapse.show .nav-item { animation: navLinkReveal 0.3s var(--lf-ease-out) both; } .navbar-collapse.show .nav-item:nth-child(1) { animation-delay: 40ms; } .navbar-collapse.show .nav-item:nth-child(2) { animation-delay: 80ms; } .navbar-collapse.show .nav-item:nth-child(3) { animation-delay: 120ms; } .navbar-collapse.show .nav-item:nth-child(4) { animation-delay: 160ms; } .navbar-collapse.show .nav-item:nth-child(5) { animation-delay: 200ms; } .navbar-collapse.show .nav-item:nth-child(6) { animation-delay: 240ms; } .navbar-collapse.show .nav-item:nth-child(7) { animation-delay: 280ms; } @keyframes navLinkReveal { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } } } @media (max-width: 900px) { /* Hero split stacks vertically */ .hero-split { flex-direction: column; } .hero-split-half { min-height: 50vh; border-right: none; border-bottom: 1px solid var(--lf-line); } .hero-split-half:last-child { border-bottom: none; } .hero-split-bg { opacity: 0.3 !important; transform: scale(1) !important; filter: grayscale(0%) !important; } .hero-split-title { transform: translateY(-5px) !important; } .hero-split-cta { opacity: 1 !important; transform: translateY(0) !important; } /* Editorial grid → single column stays */ .editorial-img-container img { transform: scale(1) !important; filter: brightness(1) saturate(1) !important; } .editorial-item-title { color: var(--lf-accent) !important; } /* Buttons full-width */ .btn-editorial { width: 100%; text-align: center; padding: 1.25rem; display: block; padding-left: 1.5rem !important; color: var(--lf-accent) !important; } .btn-editorial::before { opacity: 1 !important; } /* Item spread fixes */ .item-spread { display: flex !important; flex-direction: column !important; } .item-spread-image, .gallery-spread-image { flex: 0 0 auto !important; height: auto !important; min-height: 260px !important; max-height: 75vh !important; width: 100% !important; overflow: hidden !important; position: relative !important; } .gallery-spread-image { height: 60vh !important; min-height: 420px !important; } .carousel-container { position: absolute !important; inset: 0 !important; } .carousel-track { height: 100% !important; align-items: center !important; } .carousel-slide { height: 100% !important; padding: 1rem !important; display: flex !important; align-items: center !important; justify-content: center !important; } .carousel-slide img, .item-spread-image img { max-width: 100% !important; max-height: 70vh !important; width: auto !important; height: auto !important; object-fit: contain !important; } .item-spread-content, .gallery-spread-content { width: 100%; padding: 3rem 5%; } .item-spread-actions { align-items: stretch; text-align: center; flex-direction: column; gap: 1.5rem; } .price-container { margin-bottom: 0.5rem; } .carousel-btn { display: none !important; } .page-content { padding-top: 1rem !important; } /* Fix: item detail/gallery pages — prevent images from going under fixed navbar */ .item-spread-container { padding-top: var(--lf-nav-height) !important; } .item-spread-container .item-spread-image, .item-spread-container .gallery-spread-image { border-radius: var(--lf-radius-sm); overflow: hidden; } /* Fullscreen hint mobile */ .fullscreen-hint { bottom: 1.2rem; z-index: 150; } .fullscreen-hint-inner { font-size: 0.68rem; padding: 0.6rem 1rem; gap: 0.5rem; } .fullscreen-hint-inner svg { width: 18px; height: 18px; } /* Counter smaller on mobile */ .counter-block { gap: 2rem; } .anim-counter { font-size: 2.2rem; } } @media (min-width: 900px) { .gallery-spread-image { background: var(--lf-dark-card); display: flex; align-items: center; justify-content: center; } } @media (max-width: 600px) { .lightbox-nav-btn { font-size: 2rem; padding: 0.5rem; } .counter-block { gap: 1.5rem; padding: 2rem 0; } .anim-counter { font-size: 1.8rem; } .counter-label { font-size: 0.65rem; } } /* Prefers reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .reveal { opacity: 1 !important; transform: none !important; } .split-char { opacity: 1 !important; transform: none !important; } } /* =================================================================== TOUCH ACTIVE FEEDBACK — Haptic-like press states =================================================================== */ /* Primary CTA buttons */ .btn-hero:active, .btn-editorial:active { transform: scale(0.97) !important; transition: transform 0.1s cubic-bezier(0.23, 1, 0.32, 1) !important; } /* Portfolio / editorial cards */ .editorial-item:active { transform: scale(0.98) !important; transition: transform 0.15s cubic-bezier(0.23, 1, 0.32, 1) !important; } /* Contact cards */ .contact-card:active { transform: scale(0.98) !important; transition: transform 0.15s cubic-bezier(0.23, 1, 0.32, 1) !important; } /* Service card icon circles */ .service-card:active .service-icon-wrap { transform: scale(0.93) !important; transition: transform 0.1s cubic-bezier(0.23, 1, 0.32, 1) !important; } /* Nav links in mobile menu */ #mainNav .navbar-nav .nav-link:active { transform: scale(0.97); background: rgba(var(--lf-accent-rgb), 0.15) !important; transition: transform 0.1s cubic-bezier(0.23, 1, 0.32, 1), background 0.1s ease !important; } /* Wyniki pills */ .wyniki-pill:active { transform: scale(0.95) !important; transition: transform 0.1s cubic-bezier(0.23, 1, 0.32, 1) !important; } /* NJ banner */ .nj-banner:active { transform: scale(0.98) !important; transition: transform 0.15s cubic-bezier(0.23, 1, 0.32, 1) !important; } /* Websites offer cards */ .websites-offer-card:active { transform: scale(0.97) !important; transition: transform 0.15s cubic-bezier(0.23, 1, 0.32, 1) !important; } /* Websites feature items */ .websites-feature:active { transform: scale(0.97) !important; background: rgba(var(--lf-accent-rgb), 0.12) !important; } /* Print quality highlight */ .print-quality-highlight:active { transform: scale(0.98) !important; transition: transform 0.15s cubic-bezier(0.23, 1, 0.32, 1) !important; } /* Social buttons in footer */ .btn-social:active { transform: scale(0.9) !important; transition: transform 0.1s cubic-bezier(0.23, 1, 0.32, 1) !important; } /* Cart, close, qty buttons */ .cart-btn-nav:active, .close-btn:active, .qty-btn:active { transform: scale(0.92) !important; transition: transform 0.08s cubic-bezier(0.23, 1, 0.32, 1) !important; } /* Back to top */ #back-to-top:active { transform: scale(0.9) !important; transition: transform 0.1s cubic-bezier(0.23, 1, 0.32, 1) !important; } /* Navbar toggler */ .navbar-toggler:active { transform: scale(0.95) !important; transition: transform 0.1s cubic-bezier(0.23, 1, 0.32, 1) !important; } /* Carousel & lightbox nav buttons */ .carousel-btn:active { transform: translateY(-50%) scale(0.9) !important; } .lightbox-nav-btn:active { transform: translateY(-50%) scale(0.9) !important; } /* =================================================================== TOUCH DEVICE — Neutralize sticky hover states =================================================================== */ @media (hover: none) and (pointer: coarse) { .navbar-toggler:hover { background: rgba(var(--lf-accent-rgb), 0.08) !important; border-color: rgba(255, 255, 255, 0.12) !important; } .editorial-item:hover { transform: none; box-shadow: none; } .contact-card:hover { transform: none; border-color: var(--lf-line); box-shadow: none; } .btn-hero:hover { transform: none; background: transparent; box-shadow: none; } .btn-social:hover { transform: none; } #back-to-top:hover { transform: none; } .service-card:hover .service-icon-wrap { transform: none; box-shadow: none; } /* Masthead: disable parallax transform on touch */ .masthead-bg { transform: none !important; transition: none !important; } .nj-banner:hover { transform: none; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.04); } .wyniki-pill:hover { transform: none; } } /* =================================================================== CONTACT FORM MODAL =================================================================== */ /* --- Keyframes --- */ @keyframes cfModalIn { 0% { opacity: 0; transform: scale(0.88) translateY(38px); filter: blur(10px); } 55% { filter: blur(0); } 100% { opacity: 1; transform: scale(1) translateY(0); } } @keyframes cfModalOut { from { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); } to { opacity: 0; transform: scale(0.94) translateY(14px); filter: blur(5px); } } @keyframes cfFieldIn { from { opacity: 0; transform: translateY(18px); filter: blur(3px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } } @keyframes cfLineDraw { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } } @keyframes cfGlowBreath { 0%, 100% { box-shadow: 0 32px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(var(--lf-accent-rgb),0.1); } 50% { box-shadow: 0 32px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(var(--lf-accent-rgb),0.45), 0 0 55px rgba(var(--lf-accent-rgb),0.14); } } @keyframes cfOrbDrift { 0%, 100% { transform: translate(0, 0) scale(1); } 35% { transform: translate(-14px, 20px) scale(1.08); } 68% { transform: translate(18px, -10px) scale(0.93); } } @keyframes cfStatusIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* --- Overlay --- */ .cf-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 1rem; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .cf-overlay.active { opacity: 1; visibility: visible; } /* --- Modal card --- */ .cf-modal { background: var(--lf-dark-card); border: 1px solid rgba(var(--lf-accent-rgb), 0.18); border-radius: 16px; padding: 2.5rem 2rem; width: 100%; max-width: 540px; max-height: 90vh; overflow-y: auto; overflow-x: hidden; position: relative; isolation: isolate; /* animation is applied on .active */ } .cf-overlay.active .cf-modal { animation: cfModalIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both, cfGlowBreath 5s 0.65s ease-in-out infinite; } .cf-overlay.closing .cf-modal { animation: cfModalOut 0.22s ease both; } /* Ambient purple orb */ .cf-modal::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 200px 200px at 90% -10%, rgba(var(--lf-accent-rgb),0.13) 0%, transparent 70%), radial-gradient(ellipse 160px 160px at 10% 110%, rgba(var(--lf-accent-deep-rgb),0.10) 0%, transparent 70%); animation: cfOrbDrift 12s ease-in-out infinite; } /* --- Header --- */ .cf-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 2rem; gap: 1rem; position: relative; z-index: 1; animation: cfFieldIn 0.5s 0.06s both cubic-bezier(0.22, 1, 0.36, 1); } .cf-title { font-family: var(--lf-font-heading); font-size: 1.65rem; color: var(--lf-white); margin: 0; line-height: 1.2; } /* Animated underline accent */ .cf-title::after { content: ''; display: block; height: 2px; width: 44px; background: linear-gradient(90deg, var(--lf-accent), transparent); margin-top: 0.5rem; transform-origin: left center; animation: cfLineDraw 0.55s 0.32s both cubic-bezier(0.22, 1, 0.36, 1); } .cf-subtitle { font-size: 0.85rem; color: var(--lf-text-muted); margin: 0.35rem 0 0; line-height: 1.6; } .cf-subtitle-link { color: var(--lf-accent); text-decoration: none; border-bottom: 1px solid rgba(var(--lf-accent-rgb), 0.35); transition: color 0.2s, border-color 0.2s; font-weight: 500; } .cf-subtitle-link:hover { color: var(--lf-accent-light); border-color: var(--lf-accent-light); } .cf-close { background: none; border: none; color: var(--lf-text-muted); cursor: pointer; padding: 0.2rem 0.4rem; font-size: 1.5rem; line-height: 1; transition: color 0.2s, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); flex-shrink: 0; } .cf-close:hover { color: var(--lf-white); transform: rotate(90deg) scale(1.15); } /* --- Form --- */ #cf-form { position: relative; z-index: 1; } .cf-group { margin-bottom: 1.25rem; } /* Staggered field wave */ .cf-group:nth-child(1) { animation: cfFieldIn 0.45s 0.13s both cubic-bezier(0.22, 1, 0.36, 1); } .cf-group:nth-child(2) { animation: cfFieldIn 0.45s 0.20s both cubic-bezier(0.22, 1, 0.36, 1); } .cf-group:nth-child(3) { animation: cfFieldIn 0.45s 0.27s both cubic-bezier(0.22, 1, 0.36, 1); } .cf-group:nth-child(4) { animation: cfFieldIn 0.45s 0.34s both cubic-bezier(0.22, 1, 0.36, 1); } .cf-label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--lf-text-muted); margin-bottom: 0.45rem; font-weight: 500; } .cf-input, .cf-textarea { width: 100%; background: var(--lf-dark-lighter); border: 1px solid var(--lf-line); border-radius: var(--lf-radius-sm); color: var(--lf-text); font-family: var(--lf-font-body); font-size: 0.95rem; padding: 0.8rem 1rem; transition: border-color 0.25s, box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1); outline: none; -webkit-appearance: none; box-sizing: border-box; } .cf-input:focus, .cf-textarea:focus { border-color: var(--lf-accent); box-shadow: 0 0 0 3px rgba(var(--lf-accent-rgb),0.18), 0 0 22px rgba(var(--lf-accent-rgb),0.09); } .cf-input::placeholder, .cf-textarea::placeholder { color: rgba(var(--lf-text-muted-rgb), 0.4); } .cf-textarea { resize: vertical; min-height: 130px; } /* Submit button */ .cf-submit { width: 100%; margin-top: 0.5rem; padding: 1rem; background: linear-gradient(135deg, var(--lf-accent) 0%, var(--lf-accent-deep) 50%, var(--lf-accent-deeper) 100%); background-size: 200% 100%; background-position: 0% 0%; border: none; border-radius: var(--lf-radius-sm); color: var(--lf-on-accent); font-family: var(--lf-font-body); font-size: 0.78rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; transition: background-position 0.5s ease, transform 0.25s cubic-bezier(0.22,1,0.36,1), box-shadow 0.25s; animation: cfFieldIn 0.45s 0.41s both cubic-bezier(0.22, 1, 0.36, 1); } .cf-submit:hover { background-position: 100% 0%; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(var(--lf-accent-rgb),0.38); } .cf-submit:active { transform: translateY(0); box-shadow: none; } .cf-submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; } /* Status messages */ .cf-status { display: none; padding: 0.9rem 1rem; border-radius: var(--lf-radius-sm); font-size: 0.88rem; margin-top: 0.75rem; text-align: center; line-height: 1.5; } .cf-status.success { display: block; background: rgba(34, 197, 94, 0.08); border: 1px solid rgba(34, 197, 94, 0.25); color: #86efac; animation: cfStatusIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; } .cf-status.error { display: block; background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.25); color: #fca5a5; animation: cfStatusIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; } /* Contact card used as button */ button.contact-card { width: 100%; font-family: var(--lf-font-body); text-align: center; } /* Mobile */ @media (max-width: 500px) { .cf-modal { padding: 1.75rem 1.25rem; border-radius: 12px; max-height: 96vh; } .cf-title { font-size: 1.3rem; } .cf-textarea { min-height: 100px; } } /* =================================================================== DRONE LEGAL HIGHLIGHT =================================================================== */ .drone-legal-highlight { background: linear-gradient(145deg, rgba(var(--lf-accent-rgb), 0.12) 0%, var(--lf-dark-card) 60%); border: 1px solid rgba(var(--lf-accent-rgb), 0.3); border-radius: var(--lf-radius); padding: 1.25rem 1.5rem; display: flex; flex-direction: row; align-items: flex-start; text-align: left; gap: 1.25rem; margin: 3.5rem 0 3rem; position: relative; overflow: visible; transition: transform 0.4s var(--lf-transition), border-color 0.4s ease, box-shadow 0.4s ease; box-shadow: 0 8px 32px rgba(var(--lf-accent-rgb), 0.12); } @media (min-width: 600px) { .drone-legal-highlight { align-items: center; padding: 1.5rem 2rem; gap: 1.75rem; margin: 5rem auto 4rem; max-width: 800px; } } /* Portfolio variant — tighter mobile spacing */ .drone-legal-highlight.drone-legal-portfolio { margin: 1.5rem auto 1.5rem; max-width: 800px; } @media (min-width: 600px) { .drone-legal-highlight.drone-legal-portfolio { margin: 3rem auto 4rem; } } /* Mobile: compact card layout */ @media (max-width: 599px) { .drone-legal-highlight { flex-direction: column; gap: 0.85rem; padding: 1rem 1.2rem; align-items: stretch; } .drone-legal-highlight .drone-legal-header-row { display: flex; align-items: center; gap: 0.85rem; } .drone-legal-highlight .drone-legal-icon { width: 38px; height: 38px; font-size: 0.95rem; flex-shrink: 0; margin-top: 0; } .drone-legal-highlight .drone-legal-text { flex: 1; } .drone-legal-highlight .drone-legal-text p { display: none; /* hidden on mobile — shown via cta button */ } .drone-legal-highlight .drone-legal-text h3 { font-size: 1rem; margin-bottom: 0; } .drone-legal-highlight .cert-verify-cta { margin-left: 0; width: 100%; justify-content: center; background: rgba(var(--lf-accent-rgb),0.12); border: 1px solid rgba(var(--lf-accent-rgb),0.35); border-radius: 8px; padding: 0.6rem 1rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; opacity: 1; } } .drone-legal-highlight:hover { border-color: rgba(var(--lf-accent-rgb), 0.6); transform: translateY(-4px); box-shadow: 0 15px 50px rgba(var(--lf-accent-rgb), 0.25); } .drone-legal-icon { width: 45px; height: 45px; border-radius: 50%; background: linear-gradient(135deg, var(--lf-accent), var(--lf-accent-deep)); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: var(--lf-on-accent); flex-shrink: 0; margin-top: 0.1rem; box-shadow: 0 0 0 0 rgba(var(--lf-accent-rgb), 0.6); animation: droneIconPulse 2.5s infinite; } @keyframes droneIconPulse { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(var(--lf-accent-rgb), 0.6); } 70% { transform: scale(1); box-shadow: 0 0 0 12px rgba(var(--lf-accent-rgb), 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(var(--lf-accent-rgb), 0); } } @media (min-width: 600px) { .drone-legal-icon { width: 55px; height: 55px; font-size: 1.2rem; margin-top: 0; } } .drone-legal-text h3 { font-family: var(--lf-font-heading); font-size: 1.15rem; color: var(--lf-white); margin-bottom: 0.4rem; } .drone-legal-text p { font-size: 0.85rem; color: var(--lf-text-muted); font-weight: 300; line-height: 1.6; margin: 0; } /* ========================================================================== ONE-PAGE HOMEPAGE — op-* components ========================================================================== */ /* ===== Masthead enhancements ===== */ .masthead-eyebrow { font-family: var(--lf-font-body); font-size: 0.7rem; font-weight: 500; letter-spacing: 4px; text-transform: uppercase; color: var(--lf-accent); margin-bottom: 1rem; } .masthead-cta-row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .btn-hero-ghost { display: inline-block; padding: 1rem 2.5rem; font-family: var(--lf-font-body); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 3px; color: rgba(255,255,255,0.6); background: transparent; border: 2px solid rgba(255,255,255,0.18); border-radius: 50px; cursor: pointer; transition: background 0.4s var(--lf-transition), color 0.4s, border-color 0.4s; text-decoration: none; } .btn-hero-ghost:hover { background: rgba(255,255,255,0.08); color: var(--lf-white); border-color: rgba(255,255,255,0.35); } /* Scroll cue */ .masthead-scroll-cue { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 2; width: 1px; height: 60px; overflow: hidden; } .scroll-cue-line { width: 1px; height: 100%; background: linear-gradient(180deg, var(--lf-accent) 0%, transparent 100%); transform-origin: top; animation: scrollCueDrop 2.4s ease-in-out infinite; } @keyframes scrollCueDrop { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } } /* Quick-nav chips */ .masthead-chips { position: absolute; bottom: 5rem; left: 0; right: 0; z-index: 2; display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center; padding: 0 1.5rem; } .masthead-chip { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 1rem; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 50px; color: rgba(255,255,255,0.7); font-family: var(--lf-font-body); font-size: 0.72rem; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .masthead-chip:hover { background: rgba(var(--lf-accent-rgb),0.25); border-color: rgba(var(--lf-accent-rgb),0.5); color: var(--lf-white); } @media (max-width: 600px) { .masthead-chips { bottom: 6.5rem; gap: 0.4rem; } .masthead-chip { font-size: 0.65rem; padding: 0.4rem 0.8rem; } .masthead-scroll-cue { bottom: 5rem; } } /* ===== Base op-section ===== */ .op-section { padding: 7rem 0; background: var(--lf-dark); position: relative; } .op-section-dark { background: var(--lf-dark-card); border-top: 1px solid var(--lf-line); border-bottom: 1px solid var(--lf-line); } .op-section-inner { max-width: 1300px; margin: 0 auto; padding: 0 5%; } @media (max-width: 768px) { .op-section { padding: 4.5rem 0; } } /* Section header typography */ .op-section-header { margin-bottom: 3rem; } .op-label { font-family: var(--lf-font-body); font-size: 0.7rem; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: var(--lf-accent); margin-bottom: 1rem; } .op-title { font-family: var(--lf-font-heading); font-size: clamp(2rem, 4.5vw, 3.8rem); letter-spacing: -1px; color: var(--lf-white); margin-bottom: 1.25rem; line-height: 1.1; } .op-desc { font-family: var(--lf-font-body); font-size: 1.05rem; color: var(--lf-text-muted); font-weight: 300; max-width: 540px; line-height: 1.8; margin: 0; } .op-cta { margin-top: 3rem; } /* ===== Photo masonry grid ===== */ .op-grid { display: grid; grid-template-columns: 1fr; gap: 0.85rem; } @media (min-width: 768px) { .op-grid { grid-template-columns: 1.6fr 1fr 1fr; gap: 0.85rem; min-height: 540px; } } .op-card-col { display: grid; grid-template-rows: 1fr 1fr; gap: 0.85rem; } .op-card { position: relative; overflow: hidden; border-radius: var(--lf-radius); cursor: pointer; background: var(--lf-dark-card); aspect-ratio: 4/3; } .op-card-tall { aspect-ratio: auto; min-height: 180px; } /* Mobile photo grid — side-by-side small cards instead of huge tall columns */ @media (max-width: 767px) { .op-card-col { display: flex; flex-direction: row; gap: 0.7rem; } .op-card-col .op-card { flex: 1; aspect-ratio: 1; min-height: 130px; } .op-card-tall { aspect-ratio: 16/9; min-height: 0; } } @media (min-width: 768px) { .op-card-tall { min-height: 0; aspect-ratio: auto; } .op-card-col .op-card { aspect-ratio: auto; } } .op-card-img { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; } .op-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.85s var(--lf-transition), filter 0.5s ease; filter: brightness(0.65) saturate(0.8); } .op-card:hover .op-card-img img { transform: scale(1.07); filter: brightness(0.85) saturate(1); } .op-card-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(var(--lf-dark-rgb),0.92) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 1.25rem 1.5rem; } .op-card-overlay h3 { font-family: var(--lf-font-heading); font-size: 1.1rem; color: var(--lf-white); margin: 0 0 0.2rem; transition: color 0.3s ease; } .op-card:hover .op-card-overlay h3 { color: var(--lf-accent); } .op-card-overlay span { font-family: var(--lf-font-body); font-size: 0.67rem; text-transform: uppercase; letter-spacing: 2px; color: rgba(255,255,255,0.5); } /* ===== Print grid ===== */ .op-print-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 768px) { .op-print-grid { grid-template-columns: 1.3fr 1fr; gap: 1.25rem; } } .op-print-side { display: grid; grid-template-rows: 1fr 1fr; gap: 1.25rem; } .op-print-card { position: relative; border-radius: var(--lf-radius); overflow: hidden; cursor: pointer; background: var(--lf-dark-lighter); border: 1px solid var(--lf-line); display: flex; flex-direction: column; transition: transform 0.45s var(--lf-transition), box-shadow 0.45s ease, border-color 0.3s ease; } .op-print-card:hover { transform: translateY(-5px); box-shadow: 0 20px 50px rgba(0,0,0,0.4); border-color: rgba(var(--lf-accent-rgb),0.3); } .op-print-card-img { overflow: hidden; flex-shrink: 0; } .op-print-card-img img { width: 100%; height: 200px; object-fit: cover; display: block; transition: transform 0.7s var(--lf-transition); } .op-print-hero .op-print-card-img img { height: 280px; } .op-print-card:hover .op-print-card-img img { transform: scale(1.04); } .op-print-card-body { padding: 1.25rem 1.5rem 1.5rem; flex: 1; display: flex; flex-direction: column; gap: 0.45rem; } .op-print-card-body h3 { font-family: var(--lf-font-heading); font-size: 1.25rem; color: var(--lf-white); margin: 0; } .op-print-card-body p { font-size: 0.87rem; color: var(--lf-text-muted); line-height: 1.6; margin: 0; } .op-print-badge { font-family: var(--lf-font-body); font-size: 0.7rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--lf-accent); margin-top: auto; padding-top: 0.5rem; transition: letter-spacing 0.3s ease; } .op-print-card:hover .op-print-badge { letter-spacing: 2.5px; } .op-print-tag { display: inline-block; font-family: var(--lf-font-body); font-size: 0.65rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--lf-on-accent); background: var(--lf-accent); padding: 0.25rem 0.75rem; border-radius: 20px; width: fit-content; } /* ===== Websites layout ===== */ .op-web-layout { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; } @media (min-width: 900px) { .op-web-layout { grid-template-columns: 1fr 1fr; gap: 5rem; } } .op-web-features { display: flex; flex-direction: column; gap: 0.85rem; margin: 1.75rem 0 2.25rem; } .op-feature { display: flex; align-items: center; gap: 0.75rem; font-size: 0.92rem; color: var(--lf-text); } .op-feature i { color: var(--lf-accent); font-size: 0.9rem; flex-shrink: 0; } .op-web-quote { font-family: var(--lf-font-heading); font-style: italic; font-size: 1.02rem; color: rgba(255,255,255,0.5); border-left: 2px solid var(--lf-accent); padding: 0.75rem 1.25rem; margin-bottom: 2rem; line-height: 1.65; } .op-web-quote-mark { font-size: 1.8rem; color: var(--lf-accent); line-height: 1; margin-right: 0.25rem; vertical-align: -0.2em; } .op-web-img-wrap { position: relative; border-radius: var(--lf-radius); overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,0.5); } .op-web-img-wrap img { width: 100%; display: block; aspect-ratio: 4/3; object-fit: cover; filter: brightness(0.8) saturate(0.9); transition: filter 0.6s ease; } .op-web-img-wrap:hover img { filter: brightness(0.95) saturate(1); } .op-web-img-badge { position: absolute; top: 1.25rem; left: 1.25rem; background: rgba(var(--lf-dark-rgb),0.75); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--lf-line); border-radius: 50px; padding: 0.4rem 1rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.8); } .op-web-img-badge i { color: var(--lf-accent); margin-right: 0.4rem; } .op-web-stat-row { display: flex; gap: 1rem; margin-top: 1.25rem; } .op-web-stat { flex: 1; background: var(--lf-dark-card); border: 1px solid var(--lf-line); border-radius: var(--lf-radius-sm); padding: 1rem; text-align: center; display: flex; flex-direction: column; gap: 0.35rem; } .op-web-stat-num { font-family: var(--lf-font-heading); font-size: 1.4rem; color: var(--lf-white); line-height: 1; } .op-web-stat span:not(.op-web-stat-num) { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--lf-text-muted); } /* ===== Contact section ===== */ .op-contact-header { text-align: center; margin-bottom: 3rem; } .op-contact-header .op-desc { margin: 0 auto; } .op-contact-cards { display: grid; grid-template-columns: 1fr; gap: 1rem; max-width: 800px; margin: 0 auto; } @media (min-width: 600px) { .op-contact-cards { grid-template-columns: repeat(2, 1fr); } } .op-contact-card { display: flex; flex-direction: column; align-items: center; gap: 0.85rem; padding: 2rem 1.25rem; background: var(--lf-dark-card); border: 1px solid var(--lf-line); border-radius: var(--lf-radius); color: var(--lf-text); text-decoration: none; cursor: pointer; transition: transform 0.4s var(--lf-transition), border-color 0.4s ease, box-shadow 0.4s ease; text-align: center; } .op-contact-card:hover { transform: translateY(-6px); border-color: rgba(var(--lf-accent-rgb),0.45); box-shadow: 0 20px 50px rgba(0,0,0,0.35); color: var(--lf-white); } .op-contact-icon-wrap { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--lf-accent), var(--lf-accent-deep)); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: var(--lf-on-accent); transition: transform 0.4s var(--lf-transition); } .op-contact-card:hover .op-contact-icon-wrap { transform: scale(1.1); } .op-contact-info h3 { font-family: var(--lf-font-heading); font-size: 1rem; color: var(--lf-white); margin: 0 0 0.2rem; } .op-contact-info span { font-size: 0.82rem; color: var(--lf-text-muted); } .op-contact-arrow { display: none; } @media (max-width: 599px) { .op-contact-card { flex-direction: row; text-align: left; padding: 1.25rem 1.5rem; gap: 1rem; } .op-contact-arrow { display: block; margin-left: auto; color: var(--lf-text-muted); font-size: 0.75rem; } } /* ========================================================================== MOBILE FIXES — comprehensive responsive polish ========================================================================== */ @media (max-width: 600px) { /* Hero — stack buttons vertically, smaller padding */ .masthead-cta-row { flex-direction: column; align-items: center; gap: 0.75rem; } .btn-hero, .btn-hero-ghost { width: 100%; max-width: 300px; text-align: center; padding: 0.9rem 1.5rem; } /* Print cards — shorter images so cards don't tower */ .op-print-card-img img { height: 160px; } .op-print-hero .op-print-card-img img { height: 200px; } /* Websites — stat row: 3 boxes too squished, wrap to row of 3 smaller */ .op-web-stat-row { flex-wrap: wrap; gap: 0.6rem; } .op-web-stat { flex: 1 1 calc(33% - 0.4rem); min-width: 80px; padding: 0.75rem 0.5rem; } .op-web-stat-num { font-size: 1.1rem; } /* Section inner — tighter padding on small screens */ .op-section-inner { padding: 0 4%; } /* Section headings — prevent overflow */ .op-title { font-size: clamp(1.7rem, 8vw, 2.8rem); letter-spacing: -0.5px; } .op-desc { font-size: 0.95rem; } /* Wyniki section — shrink a bit */ .wyniki-home-section .editorial-title { font-size: clamp(1.5rem, 7vw, 2.2rem) !important; } /* Contact header */ .op-contact-header { margin-bottom: 2rem; } } /* Slightly wider phones (iPhone Plus etc.) */ @media (min-width: 390px) and (max-width: 600px) { .op-card-col .op-card { min-height: 150px; } } /* ===== OLD MOBILE SERVICES RESTORED ===== */ .services-section { padding: 7rem 0; background: var(--lf-dark); border-bottom: 1px solid var(--lf-line); } @media (max-width: 768px) { .services-section { padding: 4rem 0; } /* Prevent service icon circles from overlapping on mobile */ .service-card { margin-bottom: 3rem; padding-bottom: 1rem; } .service-card:last-child { margin-bottom: 0; padding-bottom: 0; } .service-icon-wrap { margin-bottom: 1.2rem; } } .section-heading { font-family: var(--lf-font-heading); font-size: clamp(2rem, 4vw, 3rem); text-transform: uppercase; letter-spacing: 2px; color: var(--lf-white); margin-bottom: 0.5rem; } .section-subheading { font-family: var(--lf-font-body); font-size: 1rem; font-weight: 300; color: var(--lf-text-muted); margin-bottom: 4rem; } .service-icon-wrap { display: inline-flex; align-items: center; justify-content: center; width: 90px; height: 90px; border-radius: 50%; background: linear-gradient(135deg, var(--lf-accent), var(--lf-accent-deep)); margin-bottom: 1.5rem; font-size: 2rem; color: var(--lf-on-accent); transition: transform 0.4s var(--lf-transition), box-shadow 0.4s ease; } .service-card:hover .service-icon-wrap { transform: translateY(-6px) scale(1.05); box-shadow: 0 12px 40px var(--lf-accent-glow); } .service-card h4 { font-family: var(--lf-font-heading); font-size: 1.4rem; margin-bottom: 0.75rem; color: var(--lf-white); } .service-card p { color: var(--lf-text-muted); font-size: 0.95rem; line-height: 1.7; } @media (max-width: 768px) { .services-section .btn-editorial { font-size: 0.75rem; padding: 0.8rem 1.5rem; } } /* ====================================================================== CERTIFICATES / VERIFY PAGE (#verify/c3rt5) ====================================================================== */ .drone-legal-highlight.cert-clickable { cursor: pointer; } .cert-verify-cta { margin-left: auto; font-size: 0.75rem; font-weight: 500; color: var(--lf-accent); white-space: nowrap; display: flex; align-items: center; gap: 4px; flex-shrink: 0; opacity: 0.85; transition: opacity 0.2s, transform 0.2s; } .drone-legal-highlight.cert-clickable:hover .cert-verify-cta { opacity: 1; transform: translateX(3px); } .cert-page { min-height: calc(100vh - var(--lf-nav-height)); display: flex; align-items: center; justify-content: center; padding: calc(var(--lf-nav-height) + 2rem) 1.25rem 2rem; } @keyframes certFadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } /* ---- PIN screen ---- */ .cert-pin-wrap { width: 100%; max-width: 420px; margin: 0 auto; text-align: center; animation: certFadeUp 0.5s ease-out; } .cert-lock-icon { width: 60px; height: 60px; margin: 0 auto 20px; background: rgba(var(--lf-accent-rgb), 0.12); border: 1px solid rgba(var(--lf-accent-rgb), 0.25); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .cert-pin-title { font-family: var(--lf-font-heading); font-size: 1.45rem; color: var(--lf-white); margin-bottom: 8px; letter-spacing: -0.02em; } .cert-pin-subtitle { color: var(--lf-text-muted); font-size: 0.875rem; line-height: 1.55; margin-bottom: 30px; max-width: 320px; margin-left: auto; margin-right: auto; } /* ---- Face inspector wrapper (face floats above numpad) ---- */ .cert-numpad-inspector { position: relative; max-width: 260px; margin: 6px auto 0; display: flex; flex-direction: column; align-items: center; gap: 0; padding-top: 152px; /* więcej miejsca dla buźek — numpad jest niżej */ } /* Decorative connector: soft glow line between face and numpad */ .cert-numpad-inspector::before { content: ''; display: block; position: absolute; top: 130px; /* środek między buzią (108px) a numpadem (152px) */ left: 50%; transform: translateX(-50%); width: 60px; height: 2px; background: linear-gradient(90deg, transparent, rgba(var(--lf-accent-rgb),0.4), transparent); border-radius: 2px; pointer-events: none; } /* Idle bob — delikatne kołysanie W DÓŁ (nie w górę — zapobiega nachodzeń na tekst) */ @keyframes certFaceIdleBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } /* bob w dół, bezpiecznie */ } .cert-face:not(.cert-forming):not(.cert-thinking):not(.cert-happy):not(.cert-care):not(.cert-sad):not(.cert-sus):not(.cert-angry):not(.cert-rage) { animation: certFaceIdleBob 3.2s ease-in-out infinite; } /* ---- Face ---- */ .cert-face { position: absolute; top: 18px; /* głębiej w padding — 18px buforu na ruch w górę bez wylatywania */ left: 50%; margin-left: -70px; /* half of 140px width — avoids transform conflict with animations */ width: 140px; height: 90px; z-index: 10; pointer-events: none; } .cert-dot { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--lf-dim); transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } .cert-face.cert-forming .cert-dot:nth-child(1) { transition-delay: 0.00s; } .cert-face.cert-forming .cert-dot:nth-child(2) { transition-delay: 0.06s; } .cert-face.cert-forming .cert-dot:nth-child(3) { transition-delay: 0.12s; } .cert-face.cert-forming .cert-dot:nth-child(4) { transition-delay: 0.18s; } .cert-face.cert-forming .cert-dot:nth-child(5) { transition-delay: 0.10s; } .cert-face.cert-forming .cert-dot:nth-child(6) { transition-delay: 0.04s; } .cert-dot:nth-child(1) { left: 7px; top: 38px; } .cert-dot:nth-child(2) { left: 31px; top: 38px; } .cert-dot:nth-child(3) { left: 55px; top: 38px; } .cert-dot:nth-child(4) { left: 79px; top: 38px; } .cert-dot:nth-child(5) { left: 103px; top: 38px; } .cert-dot:nth-child(6) { left: 127px; top: 38px; } .cert-dot.cert-filled { background: var(--lf-white); box-shadow: 0 0 10px rgba(var(--lf-offwhite-rgb), 0.3); transform: scale(1.15); } .cert-face.cert-face-formed .cert-dot:nth-child(1) { left: 32px; top: 10px; width: 20px; height: 20px; border-radius: 50%; } .cert-face.cert-face-formed .cert-dot:nth-child(2) { left: 82px; top: 10px; width: 20px; height: 20px; border-radius: 50%; } .cert-face.cert-face-formed .cert-dot:nth-child(3) { left: 32px; top: 52px; width: 70px; height: 4px; border-radius: 2px; box-shadow: none; } .cert-face.cert-face-formed .cert-dot:nth-child(4), .cert-face.cert-face-formed .cert-dot:nth-child(5), .cert-face.cert-face-formed .cert-dot:nth-child(6) { opacity: 0; width: 0; height: 0; left: 70px; top: 35px; } /* ---- Magnifying glass lupa (inspector tool) ---- CSS-only, w stylu buźki: kółko z rączką z zaokrąglonych kresek. Pojawia się TYLKO podczas cert-care (pierwsze złe podejście). ---- */ .cert-inspector-lupa { position: absolute; /* schowana w kieszeni po prawej stronie buźki */ right: -4px; top: 2px; width: 26px; height: 26px; pointer-events: none; /* ukryta i zwinięta do zera na start */ opacity: 0; transform: scale(0) rotate(-45deg); /* żadnej własnej animacji dopóki nie jesteśmy w cert-care */ transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.34,1.56,0.64,1); } /* === Kółko szkiełka === */ .cert-inspector-lupa::before { content: ''; position: absolute; top: 0; left: 0; width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--lf-accent-soft); /* fioletowy jak cert-care */ box-shadow: 0 0 8px rgba(var(--lf-accent-soft-rgb),0.5); background: rgba(var(--lf-accent-soft-rgb),0.08); } /* === Rączka === */ .cert-inspector-lupa::after { content: ''; position: absolute; bottom: 0; right: 0; width: 10px; height: 3px; border-radius: 3px; background: var(--lf-accent-soft); box-shadow: 0 0 6px rgba(var(--lf-accent-soft-rgb),0.4); transform-origin: left center; transform: rotate(45deg); } /* Lupa NIE pokazuje się przy thinking/formed — czyste zero */ .cert-face.cert-face-formed .cert-inspector-lupa, .cert-face.cert-thinking .cert-inspector-lupa { opacity: 0; transform: scale(0) rotate(-45deg); } /* ---- Lupa animacja podczas cert-care ---- (4.2s, sync z certCareCheck) 0\u201321% : schowana (lot na klawisz 7) 21\u201326% : POP! wyskakuje przy klawiszu 7 26\u201339% : skanuje klawisz 7 \u2014 ruch + zbli\u017cenie 39\u201346% : chowa si\u0119 (lot mi\u0119dzy klawiszami) 46\u201352% : POP! wyskakuje przy klawiszu 3 52\u201361% : skanuje klawisz 3 \u2014 max zoom 61\u201367% : chowa si\u0119 (odskok AH HA!) 67\u2013100% : schowana (powr\u00f3t na g\u00f3r\u0119) ---- */ .cert-face.cert-care .cert-inspector-lupa { animation: certLupaScan 4.2s ease-in-out 0.1s 1 both; } @keyframes certLupaScan { /* LOT NA KLAWISZ 7 */ 0% { opacity: 0; transform: scale(0) rotate(-45deg); } 21% { opacity: 0; transform: scale(0) rotate(-45deg); } /* POP przy klawiszu 7 */ 26% { opacity: 1; transform: scale(1.25) rotate(-20deg); } 28% { opacity: 1; transform: scale(1) rotate(-5deg); } /* skan klawisza 7 \u2014 zbli\u017cenie */ 32% { opacity: 1; transform: scale(1.1) rotate(8deg) translateX(-6px); } 36% { opacity: 1; transform: scale(1.2) rotate(-3deg); } /* MAX ZOOM */ 38% { opacity: 1; transform: scale(1.15) rotate(0deg); } /* trzyma */ /* CHOWA SI\u0118 \u2014 lot do klawisza 3 */ 41% { opacity: 0; transform: scale(0) rotate(30deg); } 46% { opacity: 0; transform: scale(0) rotate(30deg); } /* POP przy klawiszu 3 */ 51% { opacity: 1; transform: scale(1.3) rotate(15deg); } 53% { opacity: 1; transform: scale(1) rotate(5deg); } /* skan klawisza 3 \u2014 max zoom */ 57% { opacity: 1; transform: scale(1.15) rotate(10deg) translateX(4px); } 60% { opacity: 1; transform: scale(1.3) rotate(6deg); } /* MAX ZOOM */ /* CHOWA SI\u0118 \u2014 odskok */ 63% { opacity: 0; transform: scale(0) rotate(-20deg); } 100% { opacity: 0; transform: scale(0) rotate(-45deg); } } /* thinking */ .cert-face.cert-thinking .cert-dot { background: #60a5fa; box-shadow: 0 0 12px rgba(96,165,250,0.35); } .cert-face.cert-thinking { animation: certLookAround 3s cubic-bezier(0.4,0,0.2,1) infinite; } @keyframes certLookAround { 0% { transform: translate(0,0) rotate(0deg); } 8% { transform: translate(-14px,-6px) rotate(-2deg); } 16% { transform: translate(-14px,-6px) rotate(-2deg); } 24% { transform: translate(2px,0) rotate(0.5deg); } 30% { transform: translate(16px,-5px) rotate(2deg); } 40% { transform: translate(16px,-5px) rotate(2deg); } 48% { transform: translate(0,2px) rotate(0deg); } 56% { transform: translate(-8px,4px) rotate(-1deg); } 62% { transform: translate(-8px,4px) rotate(-1deg); } 70% { transform: translate(10px,3px) rotate(1.5deg); } 78% { transform: translate(10px,3px) rotate(1.5deg); } 88% { transform: translate(0,-2px) rotate(0deg); } 100% { transform: translate(0,0) rotate(0deg); } } .cert-face.cert-thinking .cert-dot:nth-child(1) { animation: certEyeL 3s ease-in-out infinite; } @keyframes certEyeL { 0%,100% { transform: scale(1); } 8% { transform: scale(1.2); } 30% { transform: scale(0.9); } 56% { transform: scale(1.1); } 78% { transform: scale(1); } } .cert-face.cert-thinking .cert-dot:nth-child(2) { animation: certEyeR 3s ease-in-out infinite; } @keyframes certEyeR { 0%,100% { transform: scale(1); } 8% { transform: scale(0.9); } 30% { transform: scale(1.2); } 56% { transform: scale(1); } 78% { transform: scale(1.1); } } /* happy */ .cert-face.cert-happy .cert-dot { background: #4ade80; box-shadow: 0 0 16px rgba(74,222,128,0.5); } .cert-face.cert-happy .cert-dot:nth-child(2) { width: 26px; height: 6px; border-radius: 3px; top: 18px; left: 80px; } .cert-face.cert-happy .cert-dot:nth-child(3) { left: 30px; top: 46px; width: 72px; height: 28px; background: transparent; border: 5px solid #4ade80; border-top: none; border-radius: 0 0 36px 36px; box-shadow: none; } .cert-face.cert-happy { animation: certHappyNod 1.8s cubic-bezier(0.34,1.56,0.64,1) 0.1s 1; } @keyframes certHappyNod { 0% { transform: translateY(0) rotate(0deg) scale(1); } 8% { transform: translateY(-12px) rotate(2deg) scale(1.05); } 16% { transform: translateY(3px) rotate(-1deg) scale(0.98); } 26% { transform: translateY(-10px) rotate(-2deg) scale(1.04); } 36% { transform: translateY(2px) rotate(1deg) scale(0.99); } 48% { transform: translateY(-7px) rotate(1.5deg) scale(1.02); } 58% { transform: translateY(1px) rotate(-0.5deg) scale(1); } 70% { transform: translateY(-4px) rotate(-1deg) scale(1.01); } 82% { transform: translateY(0) rotate(0.3deg) scale(1); } 100% { transform: translateY(0) rotate(0deg) scale(1); } } .cert-face.cert-happy.cert-widen .cert-dot:nth-child(3) { left: 24px; width: 84px; height: 32px; border-radius: 0 0 42px 42px; border-width: 6px; } /* sad */ .cert-face.cert-sad .cert-dot { background: #f87171; box-shadow: 0 0 16px rgba(248,113,113,0.5); } .cert-face.cert-sad .cert-dot:nth-child(3) { left: 30px; top: 52px; width: 72px; height: 24px; background: transparent; border: 5px solid #f87171; border-bottom: none; border-radius: 36px 36px 0 0; box-shadow: none; } .cert-face.cert-sad { animation: certSadShake 1.6s cubic-bezier(0.34,1.56,0.64,1) 0.1s 1; } @keyframes certSadShake { 0% { transform: translateX(0) rotate(0deg) translateY(0); } 7% { transform: translateX(-16px) rotate(-5deg) translateY(-2px); } 18% { transform: translateX(14px) rotate(4deg) translateY(0); } 28% { transform: translateX(-12px) rotate(-4deg) translateY(1px); } 40% { transform: translateX(10px) rotate(3deg) translateY(2px); } 52% { transform: translateX(-7px) rotate(-2deg) translateY(3px); } 64% { transform: translateX(5px) rotate(1.5deg) translateY(3px); } 76% { transform: translateX(-3px) rotate(-1deg) translateY(4px); } 88% { transform: translateX(1px) rotate(0.3deg) translateY(4px); } 100% { transform: translateX(0) rotate(0deg) translateY(3px); } } .cert-face.cert-sad.cert-widen .cert-dot:nth-child(3) { left: 24px; width: 84px; height: 28px; border-radius: 42px 42px 0 0; border-width: 6px; } /* CERT-CARE — inspekcja klawiszy 7 i 3: Trajektoria bu\u017aki: 0\u20137% : ma\u0142e zamachni\u0119cie w g\u00f3r\u0119 (zamach przed skokiem) 7\u201318% : nurek po przek\u0105tnej na klawisz 7 (lewy d\u00f3\u0142) 18\u201320% : leka bounce settle 20\u201340% : INSPEKCJA KLAWISZA 7 — nerwowe dr\u017cenie + zbli\u017cenie 40\u201347% : b\u0142yskawiczny dash na klawisz 3 (prawy g\u00f3rny) 47\u201349% : settle 49\u201362% : INSPEKCJA KLAWISZA 3 — zbli\u017cenie, lupa max zoom 62\u201366% : AH HA! — odskok w g\u00f3r\u0119 66\u201378% : unosi si\u0119 do po\u0142owy 78\u201392% : p\u0142ynnie wraca do g\u00f3ry 92\u2013100%: delikatne osadzenie Lupa: chowana podczas lotu, pojawia si\u0119 na ka\u017cdym klawiszu osobno */ /* Wyraz niespokojna — asymetryczne oczy (lewe mniejsze = zdezorientowana) */ .cert-face.cert-care .cert-dot { background: var(--lf-accent-soft); box-shadow: 0 0 22px rgba(var(--lf-accent-soft-rgb),0.75); } .cert-face.cert-care .cert-dot:nth-child(1) { width: 20px; height: 20px; top: 10px; left: 30px; } /* lewe oko \u2014 mniejsze, niepok\u00f3j */ .cert-face.cert-care .cert-dot:nth-child(2) { width: 26px; height: 26px; top: 7px; left: 80px; } /* prawe oko \u2014 wi\u0119ksze, szeroko otwarte */ /* usta \u2014 krzywa linia, zgryz ni\u017cszy z lewej */ .cert-face.cert-care .cert-dot:nth-child(3) { left: 40px; top: 58px; width: 52px; height: 4px; background: transparent; border: 3px solid var(--lf-accent-soft); border-top: none; border-left: none; border-radius: 0 0 4px 0; transform: rotate(-4deg); box-shadow: none; } .cert-face.cert-care { animation: certCareCheck 4.2s ease-in-out 0.1s 1; } @keyframes certCareCheck { /* zamach: scale-bounce zamiast translateY(-) — nie wylatuje w górę */ 0% { transform: translateY(0) rotate(0deg) scale(1); } 7% { transform: translateY(0) rotate(-2deg) scale(1.06); } /* scale bounce, bez góry */ /* NUREK NA KLAWISZ 7 (lewy d\u00f3\u0142) */ 17% { transform: translateX(-82px) translateY(220px) rotate(-8deg) scale(0.86); } 19% { transform: translateX(-78px) translateY(210px) rotate(4deg) scale(0.90); } /* bounce */ 21% { transform: translateX(-82px) translateY(218px) rotate(-2deg) scale(0.87); } /* settle */ /* INSPEKCJA 7 \u2014 nerwowe drgania, jakby co\u015b podejrzanego */ 26% { transform: translateX(-85px) translateY(184px) rotate(-5deg) scale(0.87); } 29% { transform: translateX(-78px) translateY(186px) rotate(2deg) scale(0.87); } /* drga\u0142o! */ 32% { transform: translateX(-84px) translateY(217px) rotate(-4deg) scale(0.86); } /* zbli\u017cenie */ 36% { transform: translateX(-83px) translateY(217px) rotate(-3deg) scale(0.85); } /* HOLD max zoom */ 39% { transform: translateX(-82px) translateY(219px) rotate(-2deg) scale(0.86); } /* trzyma */ /* DASH NA KLAWISZ 3 (prawy g\u00f3rny) — szybki */ 46% { transform: translateX(82px) translateY(122px) rotate(10deg) scale(0.88); } 48% { transform: translateX(78px) translateY(114px) rotate(-3deg) scale(0.91); } /* bounce */ 50% { transform: translateX(82px) translateY(120px) rotate(5deg) scale(0.88); } /* settle */ /* INSPEKCJA 3 \u2014 zbli\u017cenie, lupa si\u0119 trze w klawisz */ 54% { transform: translateX(85px) translateY(88px) rotate(7deg) scale(0.87); } 58% { transform: translateX(82px) translateY(126px) rotate(4deg) scale(0.84); } /* max zoom */ 61% { transform: translateX(82px) translateY(128px) rotate(4deg) scale(0.83); } /* HOLD */ /* AH HA! \u2014 odskok gwa\u0142towny */ 65% { transform: translateX(20px) translateY(84px) rotate(-6deg) scale(0.95); } 68% { transform: translateX(10px) translateY(92px) rotate(2deg) scale(0.93); } /* mini bounce */ /* WYNURZANIE */ 76% { transform: translateX(4px) translateY(48px) rotate(-1deg) scale(0.96); } 85% { transform: translateX(0) translateY(16px) rotate(1deg) scale(0.99); } 93% { transform: translateX(0) translateY(3px) rotate(-0.2deg) scale(1.00); } 100% { transform: translateY(0) rotate(0deg) scale(1); } } /* uśmiech gdy prawie wraca (≈ 3100ms = 74% z 4.2s = faza wynurzania) */ .cert-face.cert-care.cert-widen .cert-dot:nth-child(3) { left: 34px; top: 55px; width: 64px; height: 16px; border: 4px solid var(--lf-accent-soft); border-top: none; border-left: unset; border-radius: 0 0 28px 28px; transform: rotate(0deg); } /* ==================================================================== PODSWIETLENIE KLAWISZY podczas inspekcji cert-care Klawisz 7 = nth-child(7), klawisz 3 = nth-child(3) Selector sibling dziala bo cert-face i cert-numpad są rodzeństwem wewnątrz cert-numpad-inspector ==================================================================== */ /* Klawisz 7 — bużka ląduje na nim 17–39% z 4.2s */ .cert-face.cert-care ~ .cert-numpad .cert-numpad-btn:nth-child(7) { animation: certKeyGlow7 4.2s ease-in-out 0.1s 1; } @keyframes certKeyGlow7 { 0% { background: var(--lf-dark-card); border-color: rgba(255,255,255,0.06); box-shadow: none; } 15% { background: var(--lf-dark-card); border-color: rgba(255,255,255,0.06); box-shadow: none; } 21% { background: rgba(var(--lf-accent-soft-rgb),0.10); border-color: rgba(var(--lf-accent-soft-rgb),0.35); box-shadow: 0 0 14px rgba(var(--lf-accent-soft-rgb),0.22); } 28% { background: rgba(var(--lf-accent-soft-rgb),0.18); border-color: rgba(var(--lf-accent-soft-rgb),0.55); box-shadow: 0 0 20px rgba(var(--lf-accent-soft-rgb),0.38); } 36% { background: rgba(var(--lf-accent-soft-rgb),0.28); border-color: rgba(var(--lf-accent-soft-rgb),0.82); box-shadow: 0 0 28px rgba(var(--lf-accent-soft-rgb),0.58); } /* MAX — bużka się zbliża */ 39% { background: rgba(var(--lf-accent-soft-rgb),0.28); border-color: rgba(var(--lf-accent-soft-rgb),0.82); box-shadow: 0 0 28px rgba(var(--lf-accent-soft-rgb),0.58); } /* HOLD */ 44% { background: var(--lf-dark-card); border-color: rgba(255,255,255,0.06); box-shadow: none; } /* odlatuje */ 100% { background: var(--lf-dark-card); border-color: rgba(255,255,255,0.06); box-shadow: none; } } /* Klawisz 3 — bużka ląduje na nim 46–62% z 4.2s */ .cert-face.cert-care ~ .cert-numpad .cert-numpad-btn:nth-child(3) { animation: certKeyGlow3 4.2s ease-in-out 0.1s 1; } @keyframes certKeyGlow3 { 0% { background: var(--lf-dark-card); border-color: rgba(255,255,255,0.06); box-shadow: none; } 45% { background: var(--lf-dark-card); border-color: rgba(255,255,255,0.06); box-shadow: none; } 50% { background: rgba(var(--lf-accent-soft-rgb),0.10); border-color: rgba(var(--lf-accent-soft-rgb),0.35); box-shadow: 0 0 14px rgba(var(--lf-accent-soft-rgb),0.22); } 57% { background: rgba(var(--lf-accent-soft-rgb),0.22); border-color: rgba(var(--lf-accent-soft-rgb),0.62); box-shadow: 0 0 22px rgba(var(--lf-accent-soft-rgb),0.42); } 60% { background: rgba(var(--lf-accent-soft-rgb),0.30); border-color: rgba(var(--lf-accent-soft-rgb),0.88); box-shadow: 0 0 32px rgba(var(--lf-accent-soft-rgb),0.62); } /* MAX ZOOM */ 62% { background: rgba(var(--lf-accent-soft-rgb),0.30); border-color: rgba(var(--lf-accent-soft-rgb),0.88); box-shadow: 0 0 32px rgba(var(--lf-accent-soft-rgb),0.62); } /* HOLD */ 67% { background: var(--lf-dark-card); border-color: rgba(255,255,255,0.06); box-shadow: none; } /* odskok */ 100% { background: var(--lf-dark-card); border-color: rgba(255,255,255,0.06); box-shadow: none; } } /* sus — attempt 2: suspicious + contemptuous */ .cert-face.cert-sus .cert-dot { background: #fbbf24; box-shadow: 0 0 14px rgba(251,191,36,0.45); } .cert-face.cert-sus .cert-dot:nth-child(1) { width: 22px; height: 7px; top: 16px; border-radius: 4px; } .cert-face.cert-sus .cert-dot:nth-child(3) { left: 54px; top: 57px; width: 42px; height: 4px; background: #fbbf24; border: none; border-radius: 2px; transform: rotate(-7deg); box-shadow: none; } .cert-face.cert-sus .cert-dot:nth-child(4) { opacity: 1; width: 20px; height: 3px; left: 24px; top: 2px; border-radius: 2px; transform: rotate(-12deg); } .cert-face.cert-sus .cert-dot:nth-child(5) { opacity: 1; width: 18px; height: 3px; left: 80px; top: 7px; border-radius: 2px; transform: rotate(3deg); } .cert-face.cert-sus { animation: certSusTilt 2s cubic-bezier(0.34,1.56,0.64,1) 0.1s 1; } @keyframes certSusTilt { 0% { transform: rotate(0deg) translateX(0) translateY(0); } 10% { transform: rotate(7deg) translateX(5px) translateY(-3px); } 28% { transform: rotate(7deg) translateX(5px) translateY(-3px); } 48% { transform: rotate(-3deg) translateX(-2px) translateY(0); } 68% { transform: rotate(4deg) translateX(3px) translateY(-2px); } 84% { transform: rotate(4deg) translateX(3px) translateY(-2px); } 100% { transform: rotate(0deg) translateX(0) translateY(0); } } .cert-face.cert-sus.cert-widen .cert-dot:nth-child(3) { left: 50px; width: 50px; } /* angry — attempt 3: disappointed + furious */ .cert-face.cert-angry .cert-dot { background: #f97316; box-shadow: 0 0 16px rgba(249,115,22,0.5); } .cert-face.cert-angry .cert-dot:nth-child(1) { width: 22px; height: 6px; top: 17px; border-radius: 3px; } .cert-face.cert-angry .cert-dot:nth-child(2) { width: 22px; height: 6px; top: 17px; border-radius: 3px; } .cert-face.cert-angry .cert-dot:nth-child(3) { left: 22px; top: 50px; width: 88px; height: 26px; background: transparent; border: 5px solid #f97316; border-bottom: none; border-radius: 50px 50px 0 0; box-shadow: none; } .cert-face.cert-angry .cert-dot:nth-child(4) { opacity: 1; width: 22px; height: 4px; left: 22px; top: 3px; border-radius: 2px; transform: rotate(20deg); } .cert-face.cert-angry .cert-dot:nth-child(5) { opacity: 1; width: 22px; height: 4px; left: 90px; top: 3px; border-radius: 2px; transform: rotate(-20deg); } .cert-face.cert-angry { animation: certAngrySlam 1.6s cubic-bezier(0.36,0.07,0.19,0.97) 0.1s 1; } @keyframes certAngrySlam { 0% { transform: translateY(0) scale(1) rotate(0deg); } 6% { transform: translateY(-15px) scale(1.07) rotate(-3deg); } 14% { transform: translateY(9px) scale(0.95) rotate(2.5deg); } 24% { transform: translateY(-10px) scale(1.05) rotate(-2deg); } 36% { transform: translateY(7px) scale(0.97) rotate(1.5deg); } 50% { transform: translateY(-6px) scale(1.02) rotate(-1deg); } 65% { transform: translateY(4px) scale(0.99) rotate(0.5deg); } 80% { transform: translateY(-2px) scale(1.01) rotate(0deg); } 100% { transform: translateY(0) scale(1) rotate(0deg); } } .cert-face.cert-angry.cert-widen .cert-dot:nth-child(3) { left: 14px; width: 104px; height: 32px; border-radius: 62px 62px 0 0; border-width: 6px; } /* rage — attempt 4+: absolute meltdown */ .cert-face.cert-rage .cert-dot { background: #dc2626; box-shadow: 0 0 20px rgba(220,38,38,0.65); } .cert-face.cert-rage .cert-dot:nth-child(1) { width: 22px; height: 4px; top: 18px; border-radius: 2px; } .cert-face.cert-rage .cert-dot:nth-child(2) { width: 22px; height: 4px; top: 18px; border-radius: 2px; } .cert-face.cert-rage .cert-dot:nth-child(3) { left: 14px; top: 47px; width: 100px; height: 30px; background: transparent; border: 6px solid #dc2626; border-bottom: none; border-radius: 60px 60px 0 0; box-shadow: none; } .cert-face.cert-rage .cert-dot:nth-child(4) { opacity: 1; width: 24px; height: 5px; left: 20px; top: 1px; border-radius: 3px; transform: rotate(24deg); } .cert-face.cert-rage .cert-dot:nth-child(5) { opacity: 1; width: 24px; height: 5px; left: 90px; top: 1px; border-radius: 3px; transform: rotate(-24deg); } .cert-face.cert-rage .cert-dot:nth-child(6) { opacity: 1; width: 7px; height: 10px; left: 118px; top: 14px; border-radius: 50% 50% 60% 60%; } .cert-face.cert-rage { animation: certRageVibrate 1.8s ease-in-out 0.1s 1; } @keyframes certRageVibrate { 0% { transform: translateX(0) scale(1) rotate(0deg); } 4% { transform: translateX(-18px) scale(1.09) rotate(-5deg); } 8% { transform: translateX(18px) scale(1.09) rotate(5deg); } 13% { transform: translateX(-16px) rotate(-4deg); } 18% { transform: translateX(16px) rotate(4deg); } 24% { transform: translateX(-12px) rotate(-3deg) scale(1.05); } 30% { transform: translateX(12px) rotate(3deg); } 38% { transform: translateX(-8px) rotate(-2deg); } 46% { transform: translateX(8px) rotate(2deg); } 56% { transform: translateX(-4px) rotate(-1deg); } 67% { transform: translateX(4px) rotate(1deg); } 78% { transform: translateX(-2px); } 90% { transform: translateX(2px); } 100% { transform: translateX(0) scale(1) rotate(0deg); } } .cert-face.cert-rage.cert-widen .cert-dot:nth-child(3) { left: 6px; width: 116px; height: 36px; border-radius: 70px 70px 0 0; } /* status */ .cert-pin-status { font-size: 0.82rem; font-weight: 500; margin-top: -12px; margin-bottom: 22px; min-height: 22px; line-height: 1.5; text-align: center; transition: all 0.3s; opacity: 0; transform: translateY(-4px); } .cert-pin-status.cert-visible { opacity: 1; transform: translateY(0); } .cert-pin-status.cert-thinking-text { color: #60a5fa; } .cert-pin-status.cert-success-text { color: #4ade80; } .cert-pin-status.cert-error-text { color: #f87171; } .cert-pin-status.cert-care-text { color: var(--lf-accent-light); } .cert-pin-status.cert-sus-text { color: #fbbf24; } .cert-pin-status.cert-angry-text { color: #f97316; } .cert-pin-status.cert-rage-text { color: #dc2626; } /* numpad */ .cert-numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 260px; margin: 0 auto; } .cert-numpad-btn { aspect-ratio: 1.4; border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; background: var(--lf-dark-card); color: var(--lf-text); font-family: var(--lf-font-body); font-size: 1.35rem; font-weight: 500; cursor: pointer; transition: background 0.1s, border-color 0.1s, transform 0.1s; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; user-select: none; outline: none; } @keyframes certBtnPop { 0% { background: var(--lf-dark-card); border-color: rgba(255,255,255,0.06); box-shadow: 0 0 0 0 rgba(var(--lf-accent-rgb),0); } 20% { background: rgba(var(--lf-accent-rgb),0.30); border-color: rgba(var(--lf-accent-rgb),0.65); box-shadow: 0 0 16px rgba(var(--lf-accent-rgb),0.30); } 65% { background: rgba(var(--lf-accent-rgb),0.10); border-color: rgba(var(--lf-accent-rgb),0.25); box-shadow: 0 0 10px rgba(var(--lf-accent-rgb),0.12); } 100% { background: var(--lf-dark-card); border-color: rgba(255,255,255,0.06); box-shadow: 0 0 0 0 rgba(var(--lf-accent-rgb),0); } } .cert-numpad-btn.cert-pressed { animation: certBtnPop 0.35s ease-out both; } @media (hover: hover) { .cert-numpad-btn:hover { background: var(--lf-dark-lighter); border-color: rgba(255,255,255,0.1); } } .cert-numpad-btn.cert-empty { visibility: hidden; } .cert-numpad-btn.cert-backspace { color: var(--lf-text-muted); } /* numpad disabled/locked state */ .cert-numpad { transition: opacity 0.25s ease, filter 0.25s ease; } .cert-numpad--locked { pointer-events: none; opacity: 0.3; filter: grayscale(0.7); } /* desktop input */ .cert-desktop-wrap { display: none; max-width: 260px; margin: 12px auto 24px; } .cert-desktop-input { width: 100%; padding: 13px 18px; background: var(--lf-dark-card); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; color: var(--lf-text); font-family: 'JetBrains Mono', monospace; font-size: 1.25rem; letter-spacing: 0.5em; text-align: center; outline: none; transition: border-color 0.2s; -moz-appearance: textfield; } .cert-desktop-input::-webkit-outer-spin-button, .cert-desktop-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .cert-desktop-input:focus { border-color: rgba(var(--lf-accent-rgb),0.35); box-shadow: 0 0 0 3px rgba(var(--lf-accent-rgb),0.12); } .cert-desktop-input::placeholder { letter-spacing: 0.2em; color: var(--lf-text-faint); font-size: 0.85rem; } @media (hover: hover) and (min-width: 600px) { .cert-desktop-wrap { display: block; } .cert-numpad { display: none; } } .cert-pin-hint { margin-top: 22px; font-size: 0.76rem; color: var(--lf-text-faint); } /* ---- Certs screen ---- */ .cert-certs-wrap { width: 100%; max-width: 520px; margin: 0 auto; animation: certFadeUp 0.5s ease-out; } .cert-certs-header { text-align: center; margin-bottom: 26px; } .cert-verified-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(74,222,128,0.12); border: 1px solid rgba(74,222,128,0.2); color: #4ade80; font-size: 0.72rem; font-weight: 500; padding: 5px 12px; border-radius: 100px; margin-bottom: 14px; letter-spacing: 0.04em; text-transform: uppercase; } .cert-certs-header h1 { font-family: var(--lf-font-heading); font-size: 1.4rem; margin-bottom: 5px; } .cert-certs-header p { color: var(--lf-text-muted); font-size: 0.85rem; } .cert-card { background: var(--lf-dark-card); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--lf-radius); padding: 18px; margin-bottom: 12px; transition: border-color 0.2s; } .cert-card:hover { border-color: rgba(var(--lf-accent-rgb),0.3); } .cert-card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; } .cert-card-icon { width: 42px; height: 42px; background: rgba(var(--lf-accent-rgb),0.12); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .cert-card-icon svg { width: 21px; height: 21px; } .cert-card-status { font-size: 0.68rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: #4ade80; background: rgba(74,222,128,0.12); padding: 4px 9px; border-radius: 100px; } .cert-card-name { font-size: 1rem; font-weight: 600; margin-bottom: 4px; } .cert-card-desc { font-size: 0.81rem; color: var(--lf-text-muted); line-height: 1.5; margin-bottom: 14px; } .cert-card-meta { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; } .cert-meta-label { font-size: 0.73rem; color: var(--lf-text-faint); margin-bottom: 2px; } .cert-meta-value { font-size: 0.78rem; color: var(--lf-text); font-weight: 500; font-family: 'JetBrains Mono', monospace; } .cert-card-actions { display: flex; gap: 9px; } .cert-btn { flex: 1; padding: 9px 14px; border-radius: 9px; font-family: var(--lf-font-body); font-size: 0.81rem; font-weight: 500; cursor: pointer; transition: all 0.15s; text-align: center; border: none; display: flex; align-items: center; justify-content: center; gap: 5px; outline: none; } .cert-btn svg { width: 15px; height: 15px; } .cert-btn-view { background: var(--lf-accent); color: var(--lf-on-accent); border: none; } .cert-btn-view:hover { background: var(--lf-accent-deep); } .cert-btn-dl { background: rgba(var(--lf-accent-rgb),0.10); color: var(--lf-accent); border: 1px solid rgba(var(--lf-accent-rgb),0.25); } .cert-btn-dl:hover { background: rgba(var(--lf-accent-rgb),0.20); } .cert-footer-note { text-align: center; margin-top: 22px; font-size: 0.73rem; color: var(--lf-text-faint); line-height: 1.6; } .cert-footer-note a { color: var(--lf-accent); text-decoration: none; } /* ---- PDF overlay ---- */ .cert-pdf-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.85); backdrop-filter: blur(8px); z-index: 1100; align-items: center; justify-content: center; padding: 20px; } .cert-pdf-overlay.cert-pdf-active { display: flex; animation: certFadeUp 0.3s ease-out; } .cert-pdf-viewer { background: var(--lf-dark-card); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--lf-radius); width: 100%; max-width: 700px; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; } .cert-pdf-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,0.06); } .cert-pdf-title { font-size: 0.88rem; font-weight: 500; } .cert-pdf-close { width: 34px; height: 34px; border: none; background: rgba(255,255,255,0.06); border-radius: 9px; color: var(--lf-text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; outline: none; } .cert-pdf-close:hover { background: rgba(255,255,255,0.1); color: var(--lf-text); } .cert-pdf-body { flex: 1; min-height: 60vh; } .cert-pdf-body iframe { width: 100%; height: 100%; min-height: 60vh; border: none; } .cert-pdf-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 60vh; color: var(--lf-text-muted); font-size: 0.88rem; text-align: center; padding: 40px 20px; flex-direction: column; gap: 8px; } /* =================================================================== PRIVACY POLICY MODAL — chat-style popup panel =================================================================== */ .pp-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 90000; opacity: 0; pointer-events: none; transition: opacity 0.35s var(--lf-transition); } .pp-overlay.is-open { opacity: 1; pointer-events: auto; } .pp-modal { position: fixed; right: 28px; bottom: 28px; width: 440px; height: 85vh; max-height: calc(100vh - 56px); background: var(--lf-dark, #0a0a0f); border: 1px solid var(--lf-line); border-radius: var(--lf-radius); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04); display: flex; flex-direction: column; overflow: hidden; z-index: 90001; opacity: 0; transform: translateY(30px) scale(0.96); transform-origin: bottom right; pointer-events: none; transition: opacity 0.35s var(--lf-transition), transform 0.5s var(--lf-transition); font-family: var(--lf-font-body); color: var(--lf-text); } .pp-modal.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .pp-modal-header { display: flex; align-items: center; gap: 14px; padding: 18px 22px; background: var(--lf-dark-card); border-bottom: 1px solid var(--lf-line); flex-shrink: 0; position: relative; } .pp-modal-header::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--lf-accent) 50%, transparent); opacity: 0.4; } .pp-modal-logo { font-family: var(--lf-font-heading); font-size: 1.35rem; font-weight: 600; color: var(--lf-white); letter-spacing: 0.5px; } .pp-modal-logo .pp-brand-dot { color: var(--lf-accent); display: inline-block; animation: dotPulse 3.5s ease-in-out infinite; } .pp-modal-header-text { flex: 1; } .pp-modal-header-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 2.5px; color: var(--lf-text-muted); font-weight: 500; } .pp-modal-close { background: transparent; border: 1px solid var(--lf-line); color: var(--lf-text-muted); width: 34px; height: 34px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: color 0.3s ease, border-color 0.3s ease, transform 0.4s ease; } .pp-modal-close:hover { color: var(--lf-white); border-color: var(--lf-accent); transform: rotate(90deg); } .pp-modal-close svg { width: 14px; height: 14px; stroke-width: 2; } .pp-modal-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 28px 24px 36px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.08) transparent; position: relative; } .pp-ambient-glow { position: absolute; top: -50px; right: -50px; width: 350px; height: 350px; background: radial-gradient(circle, rgba(var(--lf-accent-rgb), 0.08) 0%, transparent 70%); pointer-events: none; z-index: -1; } .pp-modal-body::-webkit-scrollbar { width: 4px; } .pp-modal-body::-webkit-scrollbar-track { background: transparent; } .pp-modal-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 2px; } /* Hero animations */ @keyframes ppUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } @keyframes ppShimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } @keyframes ppLineGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes ppCardIn { from { opacity: 0; transform: translateY(16px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .pp-modal-title { font-family: var(--lf-font-heading); font-size: 3.2rem; color: var(--lf-white); line-height: 1.1; margin-bottom: 2rem; font-weight: 600; min-height: 7.5rem; padding-top: 0.5rem; letter-spacing: -0.02em; } /* "Twoje dane" — slow, deliberate fade */ .pp-title-main { display: inline-block; opacity: 0; animation: ppUp 0.9s 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; } /* "są tylko Twoje." — letter-by-letter, restrained */ .pp-title-accent { display: block; font-style: italic; min-height: 1.4em; margin-top: 0.2em; } .pp-accent-letter { display: inline-block; opacity: 0; transform: translateY(5px); filter: blur(3px); color: var(--lf-accent); -webkit-text-fill-color: var(--lf-accent); transition: opacity 550ms cubic-bezier(0.16, 1, 0.3, 1), transform 600ms cubic-bezier(0.16, 1, 0.3, 1), filter 500ms cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform, filter; } .pp-accent-letter.pp-letter-vis { opacity: 1; transform: translateY(0); filter: blur(0); } /* Period/dot at the end */ .pp-accent-dot { font-style: normal; color: var(--lf-white); -webkit-text-fill-color: var(--lf-white); opacity: 0; transform: scale(0.6); transition: opacity 400ms ease, transform 500ms cubic-bezier(0.16, 1, 0.3, 1); } .pp-accent-dot.pp-letter-vis { opacity: 1; transform: scale(1); } /* Staging — elements hidden until JS reveals */ .pp-stage-hidden { opacity: 0 !important; transform: translateY(14px); animation: none !important; transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .pp-stage-hidden.pp-stage-show { opacity: 1 !important; transform: translateY(0); } .pp-modal-lead { font-size: 0.88rem; line-height: 1.7; color: rgba(255, 255, 255, 0.55); margin-bottom: 1.75rem; font-weight: 300; } .pp-modal-hero-line { width: 50px; height: 1px; background: rgba(var(--lf-accent-rgb), 0.4); margin-bottom: 2.25rem; } /* Sections */ .pp-modal-section { margin-bottom: 2rem; opacity: 0; transform: translateY(14px); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .pp-modal-section.pp-vis { opacity: 1; transform: translateY(0); } .pp-modal-section h2 { font-family: var(--lf-font-heading); font-size: 1.05rem; color: var(--lf-white); margin-bottom: 0.75rem; font-weight: 600; display: flex; align-items: baseline; gap: 10px; } .pp-modal-section h2 .pp-num { font-family: var(--lf-font-body); font-size: 0.75rem; color: var(--lf-accent); opacity: 0.6; font-weight: 400; letter-spacing: 1.5px; } .pp-modal-section p, .pp-modal-section li { font-size: 0.85rem; line-height: 1.6; color: rgba(255, 255, 255, 0.65); margin-bottom: 0.4rem; font-weight: 300; } .pp-modal-section ul { list-style: none; padding-left: 0; margin: 0.4rem 0 0.8rem; } .pp-modal-section ul li { padding-left: 1.15rem; position: relative; } .pp-modal-section ul li::before { content: "·"; position: absolute; left: 0.3rem; color: var(--lf-accent); font-size: 1.3rem; line-height: 1; top: 0; } .pp-modal-contact { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--lf-line); font-size: 0.8rem; color: var(--lf-text-muted); } .pp-modal-contact a { color: var(--lf-accent); text-decoration: none; transition: color 0.2s ease; } .pp-modal-contact a:hover { color: var(--lf-white); } .pp-modal-meta { margin-top: 0.75rem; font-size: 0.65rem; color: rgba(255, 255, 255, 0.25); letter-spacing: 1.5px; text-transform: uppercase; } @media (max-width: 520px) { .pp-modal { right: 0; bottom: 0; left: 0; width: 100%; height: 92vh; max-height: 100vh; border-radius: var(--lf-radius) var(--lf-radius) 0 0; transform-origin: bottom center; } .pp-modal-body { padding: 22px 18px 28px; } .pp-modal-title { font-size: 2.6rem; min-height: 6rem; } } /* =================================================================== CINEMATIC HOME — „Cinematic Atelier" Hero kinowy · marquee · sticky stack · liczby · kontakt. Wyłącznie tokeny motywów; animacje na transform/opacity/clip-path. =================================================================== */ /* ── Ziarno filmowe (tylko motyw leśny — fiolet zostaje jak był) ── */ :root[data-theme="forest"] body::after { content: ""; position: fixed; inset: 0; z-index: 99996; pointer-events: none; opacity: 0.032; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 160px 160px; } /* ── HERO ── */ .cine-hero { text-align: left; } .cine-hero .masthead-bg { animation: cineBgIn 1.6s var(--lf-ease-out) both; } @keyframes cineBgIn { from { opacity: 0; filter: brightness(0.5) saturate(0.8) blur(16px); } to { opacity: 1; filter: brightness(0.5) saturate(0.8) blur(0); } } /* Ken Burns tam, gdzie parallax jest wyłączony (dotyk / wąskie ekrany) */ @media (pointer: coarse), (max-width: 900px) { .cine-hero .masthead-bg { animation: cineBgIn 1.6s var(--lf-ease-out) both, cineKen 22s ease-in-out 1.6s infinite alternate; } } @keyframes cineKen { from { transform: scale(1.03); } to { transform: scale(1.11) translateY(-1.2%); } } .cine-aurora { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; } .cine-aurora span { position: absolute; width: 46vw; height: 46vw; min-width: 420px; min-height: 420px; border-radius: 50%; filter: blur(72px); opacity: 0.16; mix-blend-mode: screen; will-change: transform; } .cine-aurora span:nth-child(1) { left: -8%; top: -14%; background: radial-gradient(circle at 35% 35%, var(--lf-accent), transparent 62%); animation: cineAurora1 26s ease-in-out infinite alternate; } .cine-aurora span:nth-child(2) { right: -12%; bottom: -20%; background: radial-gradient(circle at 60% 60%, var(--lf-accent-soft), transparent 60%); animation: cineAurora2 32s ease-in-out infinite alternate; } @keyframes cineAurora1 { to { transform: translate3d(14vw, 10vh, 0) scale(1.25); } } @keyframes cineAurora2 { to { transform: translate3d(-12vw, -9vh, 0) scale(1.35); } } .cine-hero-inner { position: relative; z-index: 2; width: 100%; max-width: 1280px; margin: 0 auto; padding: clamp(6rem, 14vh, 9rem) clamp(1.5rem, 6vw, 4rem); } .cine-eyebrow { display: flex; align-items: center; gap: 1rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.34em; text-transform: uppercase; color: var(--lf-text-muted); opacity: 0; animation: cineFade 1s var(--lf-ease-out) 0.35s forwards; } .cine-eyebrow::before { content: ""; width: 44px; height: 1px; background: var(--lf-accent); } .cine-title { font-family: var(--lf-font-heading); font-size: clamp(4.2rem, 13vw, 11rem); font-weight: 700; letter-spacing: -0.03em; line-height: 0.95; color: var(--lf-white); margin: 1.2rem 0 1.4rem; } .cine-title .brand-dot-hero { color: var(--lf-accent); text-shadow: 0 0 40px var(--lf-accent-glow); } .cine-statement { font-family: var(--lf-font-heading); font-style: italic; font-weight: 400; font-size: clamp(1.35rem, 2.6vw, 2.1rem); line-height: 1.35; color: var(--lf-offwhite); max-width: 24ch; margin: 0 0 2.6rem; } .cine-statement em { color: var(--lf-accent-soft); } .cine-line { display: block; overflow: hidden; } .cine-line-inner { display: inline-block; transform: translateY(115%); animation: cineRise 1s var(--lf-ease-out) var(--d, 0s) forwards; } @keyframes cineRise { to { transform: translateY(0); } } @keyframes cineFade { to { opacity: 1; } } .cine-hero-cta { opacity: 0; animation: cineFade 0.9s var(--lf-ease-out) 0.85s forwards; } /* ── Przycisk „orbitalny" (button-in-button) ── */ .btn-cine { display: inline-flex; align-items: center; gap: 0.9rem; padding: 0.55rem 0.55rem 0.55rem 1.7rem; font-family: var(--lf-font-body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--lf-white); background: rgba(var(--lf-offwhite-rgb), 0.04); border: 1px solid var(--lf-line); border-radius: 999px; cursor: pointer; text-decoration: none; transition: transform 0.16s var(--lf-ease-out), background 0.35s var(--lf-transition), border-color 0.35s var(--lf-transition), color 0.35s var(--lf-transition), box-shadow 0.35s var(--lf-transition); } a.btn-cine, a.btn-cine:hover { text-decoration: none; } .btn-cine-orb { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(var(--lf-accent-rgb), 0.16); color: var(--lf-accent); transition: transform 0.35s var(--lf-ease-out), background 0.35s var(--lf-transition), color 0.35s var(--lf-transition); } .btn-cine:hover { background: var(--lf-accent); border-color: var(--lf-accent); color: var(--lf-on-accent); box-shadow: 0 14px 40px -12px var(--lf-accent-glow); } .btn-cine:hover .btn-cine-orb { background: rgba(var(--lf-dark-rgb), 0.18); color: var(--lf-on-accent); transform: translate(2px, -2px); } .btn-cine:active { transform: scale(0.97); } /* ── Sticky stack usług ── */ .cine-stack { padding: clamp(3rem, 7vw, 6rem) 0 clamp(2.5rem, 5vw, 4rem); } .cine-card { position: sticky; top: calc(var(--lf-nav-height) + 0.9rem + var(--i, 0) * 20px); z-index: calc(var(--i, 0) + 1); /* kolejna karta ZAWSZE kryje poprzednią */ min-height: min(84vh, 800px); display: flex; align-items: center; margin: 0 clamp(0.75rem, 2.5vw, 2.5rem) clamp(3.5rem, 7vw, 6rem); border: 1px solid var(--lf-line); border-radius: clamp(1.25rem, 2.5vw, 2rem); /* solidna baza POD gradientem — karta ma być w 100% kryjąca */ background-color: var(--lf-dark-card); background-image: linear-gradient(165deg, var(--lf-dark-card) 0%, var(--lf-dark) 90%); box-shadow: 0 -26px 70px -48px rgba(0, 0, 0, 0.75), 0 34px 90px -46px rgba(0, 0, 0, 0.65); overflow: hidden; transform: translateZ(0); /* własna warstwa kompozycji */ transition: opacity 0.7s var(--lf-ease-out), transform 0.85s var(--lf-ease-out); } /* morph wejścia karty — tylko po uzbrojeniu przez JS (fail-open) */ .cine-armed .cine-card:not(.is-in) { opacity: 0.4; transform: translateY(36px) scale(0.965) translateZ(0); } .cine-card-2 { background-color: var(--lf-dark-lighter); background-image: linear-gradient(165deg, var(--lf-dark-lighter) 0%, var(--lf-dark-card) 90%); } .cine-card-3 { background-color: var(--lf-dark-card); background-image: linear-gradient(155deg, rgba(var(--lf-accent-deep-rgb), 0.28) 0%, var(--lf-dark-card) 58%); border-color: rgba(var(--lf-accent-rgb), 0.22); } .cine-card-no { position: absolute; top: -0.12em; right: -0.04em; font-family: var(--lf-font-heading); font-weight: 700; font-size: clamp(11rem, 26vw, 24rem); line-height: 1; color: rgba(var(--lf-offwhite-rgb), 0.045); pointer-events: none; user-select: none; } .cine-card-2 .cine-card-no { right: auto; left: -0.04em; } /* przyciemnienie karty przykrywanej przez następną (opacity steruje scroll) */ .cine-card::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: rgba(var(--lf-dark-rgb), 0.92); opacity: var(--cover, 0); } /* spotlight pod kursorem */ .cine-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(640px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(var(--lf-accent-rgb), 0.10), transparent 45%); transition: opacity 0.5s var(--lf-transition); } @media (hover: hover) and (pointer: fine) { .cine-card:hover::after { opacity: 1; } } .cine-card-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 5rem); width: 100%; max-width: 1240px; margin: 0 auto; padding: clamp(2.5rem, 6vh, 4.5rem) clamp(1.5rem, 4.5vw, 4rem); align-items: center; } .cine-card-2 .cine-card-copy { order: 2; } .cine-card-2 .cine-card-visual { order: 1; } .cine-card-label { display: flex; align-items: center; gap: 0.9rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.34em; text-transform: uppercase; color: var(--lf-accent); } .cine-card-label::after { content: ""; flex: 0 0 40px; height: 1px; background: rgba(var(--lf-accent-rgb), 0.5); } .cine-card-title { font-size: clamp(2.3rem, 4.6vw, 4rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; margin: 1.1rem 0 1.2rem; color: var(--lf-white); } .cine-card-desc { font-size: clamp(1rem, 1.35vw, 1.15rem); line-height: 1.75; color: var(--lf-text-muted); max-width: 44ch; margin-bottom: 2.2rem; } /* ── Oprawione kadry ── */ .cine-frame { position: relative; padding: 0.45rem; border-radius: 1.15rem; background: rgba(var(--lf-offwhite-rgb), 0.05); border: 1px solid var(--lf-line); box-shadow: inset 0 1px 0 rgba(var(--lf-offwhite-rgb), 0.07), 0 24px 60px -30px rgba(0, 0, 0, 0.6); cursor: pointer; transition: transform 0.3s var(--lf-ease-out); /* bujnięcie od prędkości scrolla (--tilt ustawia silnik na #home-view) */ rotate: calc(var(--tilt, 0) * 0.7deg); } .cine-collage .cine-frame:nth-child(2) { rotate: calc(var(--tilt, 0) * -0.55deg); } /* dotyk: fizyka naciśnięcia zamiast hoverów */ @media (hover: none) { .cine-frame:active { transform: scale(0.985); } .cine-frame:active img { scale: 1.22; } .cine-contact-row:active::before { transform: translateX(0); } } .cine-frame-inner { position: relative; overflow: hidden; border-radius: 0.75rem; height: 100%; } .cine-frame img { display: block; width: 100%; height: 100%; object-fit: cover; /* transform = parallax wnętrza (sterowany scrollem, BEZ transition), scale = płynny zoom na hover/tap (osobna właściwość) */ transform: translateY(var(--fp-px, 0px)); scale: 1.16; transition: scale 0.8s var(--lf-ease-out); } @media (hover: hover) and (pointer: fine) { .cine-frame:hover img { scale: 1.24; } } .cine-frame-cap { position: absolute; left: 0.95rem; bottom: 0.95rem; z-index: 1; padding: 0.32rem 0.85rem; border-radius: 999px; font-size: 0.64rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lf-white); background: rgba(var(--lf-dark-rgb), 0.72); border: 1px solid rgba(var(--lf-offwhite-rgb), 0.14); pointer-events: none; white-space: nowrap; } .cine-collage { display: grid; grid-template-columns: 3fr 2fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: clamp(0.8rem, 1.6vw, 1.3rem); height: min(58vh, 560px); } .cine-collage .cine-frame { display: flex; flex-direction: column; } .cine-collage .cine-frame-inner { flex: 1; } .cine-collage .cine-frame:first-child { grid-row: span 2; } .cine-visual-single .cine-frame-inner { aspect-ratio: 16 / 11; } .cine-stat-row { display: flex; margin-top: 1.4rem; border-top: 1px solid var(--lf-line); } .cine-stat { flex: 1; padding: 1.1rem 0.5rem 0; text-align: center; } .cine-stat + .cine-stat { border-left: 1px solid var(--lf-line); } .cine-stat-num { display: block; font-family: var(--lf-font-heading); font-size: clamp(1.5rem, 2.4vw, 2.1rem); color: var(--lf-accent); } .cine-stat-lbl { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lf-text-muted); } /* ── Reveals: domyślnie WIDOCZNE (fail-open). Stany ukryte nakłada dopiero JS klasą .cine-armed na #home-view, a odsłania IO LUB silnik scrollowy — podwójna asekuracja, zdjęcia nigdy nie zostają zakryte na stałe ── */ .cine-reveal { transition: opacity 0.9s var(--lf-ease-out) var(--rd, 0s), transform 0.9s var(--lf-ease-out) var(--rd, 0s), filter 0.9s var(--lf-ease-out) var(--rd, 0s); } .cine-armed .cine-reveal:not(.is-in) { opacity: 0; transform: translateY(26px); filter: blur(5px); } .cine-armed .cine-clip { clip-path: inset(0 0 0 0 round 0.75rem); transition: clip-path 1.1s var(--lf-ease-in-out) var(--rd, 0s); } .cine-armed .cine-clip:not(.is-in) { clip-path: inset(0 0 100% 0 round 0.75rem); } /* ── Kropki postępu stacka (morph w złotą pigułkę) ── */ .cine-dots { position: fixed; right: clamp(0.6rem, 2vw, 1.4rem); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; z-index: 50; opacity: 0; pointer-events: none; transition: opacity 0.4s var(--lf-ease-out); } .cine-dots.cine-dots-on { opacity: 1; pointer-events: auto; } .cine-dot { width: 8px; height: 8px; border-radius: 999px; border: 0; padding: 0; background: rgba(var(--lf-offwhite-rgb), 0.25); cursor: pointer; transition: height 0.35s var(--lf-ease-out), background 0.3s var(--lf-transition), box-shadow 0.3s var(--lf-transition); } .cine-dot.active { height: 26px; background: var(--lf-accent); box-shadow: 0 0 12px var(--lf-accent-glow); } /* ── Liczby ── */ .cine-numbers { position: relative; padding: clamp(6rem, 11vw, 9.5rem) clamp(1.5rem, 5vw, 3rem) clamp(5rem, 9vw, 8rem); text-align: center; } .cine-numbers-kicker { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--lf-text-faint); margin-bottom: clamp(2.5rem, 5vw, 4rem); } .cine-numbers-row { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(2rem, 5vw, 4.5rem); max-width: 1150px; margin: 0 auto clamp(4rem, 8vw, 6rem); } .cine-num { min-width: 150px; } .cine-num .anim-counter { display: block; font-family: var(--lf-font-heading); font-weight: 600; font-size: clamp(2.6rem, 5.5vw, 4.4rem); line-height: 1.05; color: var(--lf-white); font-variant-numeric: tabular-nums; } .cine-num-label { display: block; margin-top: 0.5rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--lf-text-muted); } .cine-numbers-cta { margin-top: clamp(3rem, 6vw, 4.5rem); } /* ── Kontakt ── */ .cine-contact { padding: clamp(5rem, 10vw, 8.5rem) clamp(1.5rem, 5vw, 3rem) clamp(6rem, 10vw, 9rem); } .cine-contact-inner { max-width: 980px; margin: 0 auto; } .cine-contact-title { font-family: var(--lf-font-heading); font-size: clamp(3rem, 8vw, 6.5rem); letter-spacing: -0.02em; line-height: 1; color: var(--lf-white); margin: 1rem 0 1.2rem; } /* „Porozmawiajmy." — kaskada liter zamiast zwykłego fade (fail-open jak wyżej) */ .cine-contact-title.cine-reveal, .cine-armed .cine-contact-title.cine-reveal:not(.is-in) { opacity: 1; transform: none; filter: none; transition: none; } .cine-ltr { display: inline-block; transform-origin: bottom left; transition: transform 0.7s var(--lf-ease-out) calc(var(--li, 0) * 0.045s), opacity 0.45s ease calc(var(--li, 0) * 0.045s); } .cine-armed .cine-contact-title:not(.is-in) .cine-ltr { opacity: 0; transform: translateY(0.9em) rotate(8deg); } .cine-contact-title .brand-dot-hero { display: inline-block; transition: transform 0.5s var(--lf-ease-out) 0.85s, opacity 0.3s ease 0.85s; } .cine-armed .cine-contact-title:not(.is-in) .brand-dot-hero { opacity: 0; transform: scale(0.3); } .cine-contact-lead { color: var(--lf-text-muted); max-width: 52ch; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); font-size: 1.05rem; line-height: 1.8; } .cine-contact-rows { border-bottom: 1px solid var(--lf-line); margin-bottom: clamp(2.5rem, 5vw, 3.5rem); } .cine-contact-row { position: relative; overflow: hidden; display: flex; align-items: center; gap: 1.4rem; width: 100%; padding: 1.5rem 0.9rem; border: 0; border-top: 1px solid var(--lf-line); background: transparent; text-align: left; cursor: pointer; color: var(--lf-text); text-decoration: none; } .cine-contact-row::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(var(--lf-accent-rgb), 0.10), transparent 62%); transform: translateX(var(--dir, -101%)); transition: transform 0.55s var(--lf-ease-out); } @media (hover: hover) and (pointer: fine) { .cine-contact-row:hover::before { transform: translateX(0); } } .cine-contact-ico { position: relative; z-index: 1; flex: 0 0 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--lf-line); background: rgba(var(--lf-accent-rgb), 0.07); color: var(--lf-accent); font-size: 1rem; } .cine-contact-row-luna .cine-contact-ico { background: var(--lf-accent); color: var(--lf-on-accent); border-color: transparent; box-shadow: 0 8px 26px -10px var(--lf-accent-glow); } .cine-contact-info { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 0.15rem; } .cine-contact-name { font-family: var(--lf-font-body); font-size: 1.02rem; font-weight: 600; color: var(--lf-white); } .cine-contact-sub { font-size: 0.82rem; color: var(--lf-text-muted); letter-spacing: 0.06em; } .cine-contact-arrow { position: relative; z-index: 1; margin-left: auto; color: var(--lf-text-faint); transition: transform 0.35s var(--lf-ease-out), color 0.35s var(--lf-transition); } .cine-contact-row:hover .cine-contact-arrow { transform: translateX(6px); color: var(--lf-accent); } .cine-magnet-wrap { display: flex; justify-content: center; } #cine-magnet { will-change: transform; } /* ── Responsywność ── */ @media (max-width: 900px) { .cine-hero-inner { padding-top: 16vh; } .cine-statement { max-width: none; } .cine-card { min-height: 0; top: calc(var(--lf-nav-height) + 0.6rem + var(--i, 0) * 12px); margin: 0 0.6rem 2.4rem; } .cine-card-grid { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.9rem 1.3rem 2.2rem; } /* kompakt: karta MUSI mieścić się na ekranie telefonu (sticky ucina dół) */ .cine-card-title { font-size: clamp(1.8rem, 7.5vw, 2.4rem); } .cine-card-desc { font-size: 0.95rem; line-height: 1.6; margin-bottom: 1.4rem; } .cine-visual-single .cine-frame-inner { aspect-ratio: 16 / 10; } .btn-cine { font-size: 0.72rem; padding-left: 1.3rem; gap: 0.7rem; } .btn-cine-orb { width: 36px; height: 36px; } .cine-card-2 .cine-card-copy { order: 1; } .cine-card-2 .cine-card-visual { order: 2; } .cine-card-no { font-size: clamp(8rem, 42vw, 13rem); } .cine-collage { height: auto; } .cine-collage .cine-frame-inner { min-height: 130px; } .cine-collage .cine-frame:first-child .cine-frame-inner { min-height: 280px; } .cine-card-desc { margin-bottom: 1.6rem; } .cine-numbers-row { gap: 2rem 2.6rem; } .cine-num { min-width: 120px; } .cine-contact-row { padding: 1.25rem 0.4rem; } } /* ── Dostępność: ograniczony ruch ── */ @media (prefers-reduced-motion: reduce) { .cine-hero .masthead-bg { animation: cineBgIn 0.6s ease both; } .cine-aurora span { animation: none; } .cine-line-inner { animation: none; transform: none; } .cine-eyebrow, .cine-hero-cta { animation: none; opacity: 1; } /* przy reduced-motion JS nie uzbraja .cine-armed — wszystko od razu widoczne */ .cine-frame img { transform: none; scale: 1; } .cine-frame { rotate: none; } .cine-collage .cine-frame:nth-child(2) { rotate: none; } .cine-dots { display: none; } .cine-ltr, .cine-contact-title .brand-dot-hero { opacity: 1; transform: none; transition: none; } } /* =================================================================== VEIL — pełnoekranowa plansza zmiany motywu Kolista kurtyna od kropki przełącznika; kolory DOCELOWEGO motywu (celowo zahardkodowane — root ma jeszcze stary motyw pod spodem). =================================================================== */ .lf-veil { position: fixed; inset: 0; z-index: 100001; display: flex; align-items: center; justify-content: center; visibility: hidden; pointer-events: none; overflow: hidden; background-color: var(--veil-bg, #0f0f14); clip-path: circle(0% at var(--vx, 50%) var(--vy, 10%)); } .lf-veil.to-forest { --veil-bg: #132B23; --veil-deep: #0D3A35; --veil-accent: #BA9B5F; --veil-text: #FBF6F0; --veil-muted: #B1B7AB; } .lf-veil.to-violet { --veil-bg: #0f0f14; --veil-deep: #2a2440; --veil-accent: #8B5CF6; --veil-text: #ffffff; --veil-muted: #9ca3af; } .lf-veil.veil-in { visibility: visible; pointer-events: auto; clip-path: circle(150% at var(--vx, 50%) var(--vy, 10%)); transition: clip-path 0.62s cubic-bezier(0.77, 0, 0.175, 1); } .lf-veil.veil-out { visibility: visible; clip-path: circle(150% at var(--vx, 50%) var(--vy, 10%)); opacity: 0; transition: opacity 0.5s ease, visibility 0s 0.55s; } .lf-veil-aurora { position: absolute; inset: 0; pointer-events: none; } .lf-veil-aurora span { position: absolute; width: 70vw; height: 70vw; min-width: 480px; min-height: 480px; border-radius: 50%; filter: blur(70px); opacity: 0.22; } .lf-veil-aurora span:nth-child(1) { left: -18%; top: -22%; background: radial-gradient(circle, var(--veil-accent), transparent 62%); } .lf-veil-aurora span:nth-child(2) { right: -22%; bottom: -26%; background: radial-gradient(circle, var(--veil-deep), transparent 62%); } .veil-in .lf-veil-aurora span:nth-child(1) { animation: veilDrift1 2.4s var(--lf-ease-out) both; } .veil-in .lf-veil-aurora span:nth-child(2) { animation: veilDrift2 2.4s var(--lf-ease-out) both; } @keyframes veilDrift1 { from { transform: translate3d(-8vw, -6vh, 0) scale(0.85); } to { transform: translate3d(4vw, 3vh, 0) scale(1.1); } } @keyframes veilDrift2 { from { transform: translate3d(8vw, 6vh, 0) scale(0.85); } to { transform: translate3d(-4vw, -3vh, 0) scale(1.15); } } .lf-veil-center { position: relative; text-align: center; padding: 0 1.5rem; } .lf-veil-logo { overflow: hidden; } .lf-veil-logo-line { display: inline-block; font-family: var(--lf-font-heading); font-weight: 700; font-size: clamp(3.2rem, 14vw, 6.5rem); letter-spacing: -0.03em; line-height: 1.05; color: var(--veil-text); transform: translateY(115%); } .veil-in .lf-veil-logo-line { animation: cineRise 0.8s var(--lf-ease-out) 0.3s forwards; } .veil-out .lf-veil-logo-line { transform: none; } .lf-veil-dot { color: var(--veil-accent); } .veil-in .lf-veil-dot { animation: veilPulse 1.2s ease-in-out 0.8s infinite alternate; } @keyframes veilPulse { from { text-shadow: 0 0 0 transparent; } to { text-shadow: 0 0 36px var(--veil-accent); } } .lf-veil-label { margin-top: 1.1rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.4em; text-transform: uppercase; color: var(--veil-muted); opacity: 0; } .veil-in .lf-veil-label { animation: cineFade 0.7s var(--lf-ease-out) 0.55s forwards; } .veil-out .lf-veil-label { opacity: 1; } .lf-veil-bar { width: min(220px, 56vw); height: 1px; margin: 1.6rem auto 0; background: rgba(255, 255, 255, 0.14); overflow: hidden; } .lf-veil-bar span { display: block; height: 100%; background: var(--veil-accent); transform: scaleX(0); transform-origin: left; } .veil-in .lf-veil-bar span { animation: veilBar 1.15s cubic-bezier(0.77, 0, 0.175, 1) 0.5s forwards; } .veil-out .lf-veil-bar span { transform: scaleX(1); } @keyframes veilBar { to { transform: scaleX(1); } } @media (prefers-reduced-motion: reduce) { .lf-veil.veil-in { transition: none; } .lf-veil.veil-out { transition: opacity 0.25s ease, visibility 0s 0.3s; } .veil-in .lf-veil-logo-line, .veil-in .lf-veil-label, .veil-in .lf-veil-bar span { animation-duration: 0.01s; animation-delay: 0s; } .veil-in .lf-veil-dot, .veil-in .lf-veil-aurora span { animation: none; } } /* =================================================================== MORPHY + LIFT PODSTRON (17.07.2026) — shared-element morph kafel→szczegóły, modal z punktu kliknięcia, rytm editorial na photo, tilt 3D na print, ledger na websites, polish kontaktu. Wszystko transform/opacity + IO, mobile-first. =================================================================== */ /* ---- Shared-element morph (kafel → widok szczegółów) ---- */ .morph-ghost { position: fixed; z-index: 9600; overflow: hidden; pointer-events: none; contain: layout style; background: var(--lf-dark-card); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); } .morph-ghost img { width: 100%; height: 100%; object-fit: cover; display: block; } .morph-target-wait { visibility: hidden !important; } /* ---- Modal kontaktowy wyrasta z punktu kliknięcia ---- */ .cf-overlay.cf-from-tap.active .cf-modal { animation: cfModalInTap 0.6s cubic-bezier(0.22, 1, 0.36, 1) both, cfGlowBreath 5s 0.65s ease-in-out infinite; } @keyframes cfModalInTap { 0% { opacity: 0; transform: translate(calc(var(--tap-dx, 0px) * 0.62), calc(var(--tap-dy, 0px) * 0.62)) scale(0.52); filter: blur(12px); } 55% { filter: blur(0); } 100% { opacity: 1; transform: translate(0, 0) scale(1); filter: blur(0); } } /* ---- Editorial kicker (mini-etykieta nad tytułem podstrony) ---- */ .editorial-kicker { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--lf-font-body); font-size: 0.68rem; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--lf-accent); margin-bottom: 1.1rem; } .editorial-kicker::before { content: ''; width: 26px; height: 1px; background: var(--lf-accent); opacity: 0.7; } /* ---- PHOTO: rytm editorial — pierwszy kadr w formacie kinowym ---- */ @media (min-width: 768px) { #photo-view .editorial-grid .editorial-item:first-child { grid-column: 1 / -1; } #photo-view .editorial-grid .editorial-item:first-child .editorial-img-container { aspect-ratio: 21 / 9; } } /* Obrazy portfolio otwierają się (clip reveal) przy wejściu w kadr */ #photo-view .editorial-item.reveal .editorial-img-container { clip-path: inset(8% 5% 8% 5% round var(--lf-radius)); transition: clip-path 1.05s var(--lf-ease-out) 0.12s; } #photo-view .editorial-item.reveal.revealed .editorial-img-container { clip-path: inset(0 0 0 0 round 0px); } /* ---- Plakietka „↗" na kaflach (dotykowy odpowiednik hovera) ---- */ .tile-cta { position: absolute; right: 0.9rem; bottom: 0.9rem; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(var(--lf-dark-rgb), 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.18); color: var(--lf-white); z-index: 3; pointer-events: none; transition: transform 0.45s var(--lf-ease-out), background 0.3s ease, color 0.3s ease, opacity 0.3s ease, border-color 0.3s ease; } @media (hover: hover) and (pointer: fine) { .tile-cta { opacity: 0; transform: translate(8px, 8px); } .editorial-item:hover .tile-cta { opacity: 1; transform: translate(0, 0); background: var(--lf-accent); color: var(--lf-on-accent); border-color: transparent; } } /* Plakietka przejmuje rolę wskaźnika — stary lottie overlay znika z kafli */ #photo-view .editorial-item .lottie-click-overlay, #print-view .editorial-item .lottie-click-overlay { display: none; } /* ---- PRINT: tilt 3D + spotlight pod kursorem ---- */ .tilt-card { transform: perspective(950px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: box-shadow 0.5s ease; will-change: transform; } .tilt-card:hover { transform: perspective(950px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4); } .tilt-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient( 340px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(var(--lf-accent-rgb), 0.13), transparent 65% ); opacity: 0; transition: opacity 0.35s ease; pointer-events: none; z-index: 2; } .tilt-card:hover::before { opacity: 1; } /* ---- WEBSITES: 3 generyczne karty → numerowany ledger ---- */ .websites-offers { display: block; margin: 3.2rem 0 3.5rem; border-top: 1px solid var(--lf-line); counter-reset: wsoffer; } .websites-offer-card { counter-increment: wsoffer; display: grid; grid-template-columns: 3.2rem 1fr; column-gap: 1.2rem; align-items: start; text-align: left; padding: 1.9rem 0.4rem; background: transparent; border: 0; border-bottom: 1px solid var(--lf-line); border-radius: 0; box-shadow: none; position: relative; transition: background 0.4s ease; } .websites-offer-card::before { content: '0' counter(wsoffer); font-family: var(--lf-font-heading); font-size: 1.1rem; line-height: 1.5; color: var(--lf-accent); opacity: 0.9; } .websites-offer-card .websites-offer-icon { display: none; } .websites-offer-card h3 { grid-column: 2; font-size: 1.4rem; margin-bottom: 0.45rem; transition: color 0.3s ease; } .websites-offer-card p { grid-column: 2; max-width: 62ch; font-size: 0.92rem; } .websites-offer-card::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; background: var(--lf-accent); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--lf-ease-out); } @media (hover: hover) and (pointer: fine) { .websites-offer-card:hover { background: rgba(var(--lf-accent-rgb), 0.045); transform: none; box-shadow: none; border-color: var(--lf-line); } .websites-offer-card:hover h3 { color: var(--lf-accent); } .websites-offer-card:hover::after { transform: scaleX(1); } } /* Features: kaskada wejścia + żywy dot */ #websites-view .websites-feature:nth-child(1) { transition-delay: 0ms; } #websites-view .websites-feature:nth-child(2) { transition-delay: 60ms; } #websites-view .websites-feature:nth-child(3) { transition-delay: 120ms; } #websites-view .websites-feature:nth-child(4) { transition-delay: 180ms; } #websites-view .websites-feature:nth-child(5) { transition-delay: 240ms; } #websites-view .websites-feature:nth-child(6) { transition-delay: 300ms; } .websites-feature-dot { animation: wsDotBreath 3.2s ease-in-out infinite; } @keyframes wsDotBreath { 0%, 100% { box-shadow: 0 0 8px rgba(var(--lf-accent-rgb), 0.5); } 50% { box-shadow: 0 0 2px rgba(var(--lf-accent-rgb), 0.25); } } /* Quote: linia akcentu rysuje się przy wejściu */ .websites-quote-block { border-left-color: transparent; } .websites-quote-block::after { content: ''; position: absolute; left: -3px; top: 0; bottom: 0; width: 3px; background: var(--lf-accent); transform: scaleY(0); transform-origin: top; transition: transform 0.9s var(--lf-ease-out) 0.25s; } .websites-quote-block.revealed::after { transform: scaleY(1); } /* ---- CONTACT: karty z życiem ---- */ .contact-card .contact-card-icon { transition: transform 0.5s var(--lf-ease-out), box-shadow 0.5s ease; } @media (hover: hover) and (pointer: fine) { .contact-card:hover .contact-card-icon { transform: translateY(-4px) scale(1.07); box-shadow: 0 10px 30px rgba(var(--lf-accent-rgb), 0.35); } } .contact-card:active { transform: scale(0.97) !important; } /* Karta Luny — pulsująca aura na ikonie (subtelny sygnał „żywej" asystentki) */ #contact-view .contact-card:first-child .contact-card-icon { animation: lunaAuraPulse 2.9s ease-in-out infinite; } @keyframes lunaAuraPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--lf-accent-rgb), 0.28); } 55% { box-shadow: 0 0 0 14px rgba(var(--lf-accent-rgb), 0); } } /* ---- Reduced motion: nowe efekty gasną ---- */ @media (prefers-reduced-motion: reduce) { #photo-view .editorial-item.reveal .editorial-img-container { clip-path: none; transition: none; } .websites-feature-dot { animation: none; } #contact-view .contact-card:first-child .contact-card-icon { animation: none; } #websites-view .websites-feature { transition-delay: 0ms !important; } .websites-quote-block { border-left-color: var(--lf-accent); } .websites-quote-block::after { display: none; } .morph-ghost { display: none; } }