/* ========================================================= weddingApp — GLOBAL STYLES (c) 2025 — drop-in replacement for assets/css/style.css ========================================================= */ /* --------------------------------------------- 0) DESIGN TOKENS (łatwo się skaluje) --------------------------------------------- */ :root { /* typografia */ --font-base: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; /* kolorystyka (bazowa) */ --color-primary: #c0697f; /* rose */ --color-primary2: #EAC8A0; /* gold */ --color-secondary: #8b6a82; /* mauve */ --color-accent: #eac8a0; /* champagne */ --color-text: #1e1e1e; --color-muted: #666; --color-bg: #fffaf8; --color-bg-soft: #fff3ef; /* brand dla overlay (login/admin) */ --brand: #f4813f; --brand-600: #ea732d; --brand-700: #d6631e; --brand-100: #fff1e8; /* stany */ --color-success: #1b7e3c; --color-success-bg: #f6fff8; --color-error: #b00020; --color-error-bg: #fff5f5; /* layout */ --shadow-1: 0 8px 24px rgba(0,0,0,.08); --shadow-2: 0 14px 48px rgba(0,0,0,.14); --radius-sm: 8px; --radius-lg: 15px; --radius-pill: 999px; --space-1: 5px; --space-2: 10px; --space-3: 15px; --space-4: 20px; --space-5: 25px; --space-6: 30px; --space-7: 40px; --space-8: 60px; /* tła i gradienty */ --gradient: linear-gradient(135deg,#f7d7e3 0%,#fdebd6 40%,#e4f1e7 100%); } /* --------------------------------------------- 1) BASE / RESET (skrócone) (UWAGA: fonty ładujemy w , więc bez @import) --------------------------------------------- */ * { box-sizing: border-box; } html, body { font-family: var(--font-base); font-weight: 400; font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: var(--color-text); background: var(--color-bg); } img { max-width: 100%; height: auto; } ul, ol { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4, h5, h6 { margin: 0; } p { font-size: 15px; line-height: 25px; color: var(--color-muted); margin: 0; } a { text-decoration: none; color: inherit; } ::selection { background: var(--color-secondary); color: #fff; } /* Accessibility helpers */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,1px,1px); white-space: nowrap; border: 0; } a:focus-visible, button:focus-visible, .btn:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; border-radius: 8px; } /* Headings — lekki „wedding vibe” (Playfair z ) */ h1, h2, h3, .section .center-heading h2, .modal-title { font-family: "Playfair Display", serif; letter-spacing: .2px; } .welcome-area .header-text h1 em, .footer-content .right-content h2 em{ color: var(--color-primary); } /* --------------------------------------------- 2) BUTTONS — ujednolicenie --------------------------------------------- */ .btn, a.main-button, button.main-button, a.main-button-slider, .main-button-secondary { display: inline-block; font-size: 14px; line-height: 1; padding: 14px 22px; border-radius: var(--radius-pill); text-transform: uppercase; font-weight: 600; letter-spacing: .8px; transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease; white-space: nowrap; border: 0; box-shadow: var(--shadow-1); } a.main-button, button.main-button, a.main-button-slider { background: var(--color-primary) !important; color: #fff !important; } .main-button-secondary { background: transparent !important; color: var(--color-primary2) !important; border: 1.5px solid var(--color-primary2) !important; box-shadow: none; } a.main-button:hover, button.main-button:hover, a.main-button-slider:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); } .main-button-secondary:hover { background: var(--color-primary2) !important; color: #fff !important; } /* utility */ .btn-pill{ border-radius: var(--radius-pill); } /* --------------------------------------------- 3) LAYOUT HELPERS --------------------------------------------- */ .center-heading { margin-bottom: 70px; } .center-heading h2 { text-align: center; font-size: clamp(28px, 4vw, 42px); font-weight: 700; color: var(--color-text); margin-bottom: 25px; } .center-heading h2 em { font-style: normal; color: var(--color-primary); } .center-heading p { font-size: 15px; color: var(--color-muted); text-align: center; } .button-group { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } @media (max-width: 767px) { .left-text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); } } /* --------------------------------------------- 4) HEADER (demo bez nawigacji) --------------------------------------------- */ .header-area { position: absolute; inset-inline: 0; top: 0; z-index: 100; height: 100px; transition: all .5s ease; } .background-header { background: #fff; height: 80px !important; position: fixed !important; inset-inline: 0; top: 0; box-shadow: 0 0 10px rgba(0,0,0,.15) !important; } /* --------------------------------------------- 5) LOGIN FAB (prawy górny róg) --------------------------------------------- */ .login-top { position: fixed; top: 16px; right: 16px; z-index: 1055; border-radius: var(--radius-pill); padding: 8px 14px; } @media (max-width: 576px) { .login-top { top: 10px; right: 10px; padding: 8px 12px; } } /* --------------------------------------------- 6) HERO / WELCOME --------------------------------------------- */ .welcome-area { width: 100%; min-height: 793px; background: url(../images/banner-wedding.png) no-repeat right top; } .welcome-area .header-text .left-text { position: relative; align-self: center; margin-top: 35%; transform: translateY(-30%); } .welcome-area .header-text h1 { font-weight: 900; font-size: clamp(34px, 6vw, 52px); line-height: 1.2; letter-spacing: 1px; margin-bottom: 30px; color: #191a20; } .welcome-area .header-text h1 em { font-style: normal; color: var(--color-accent); } .welcome-area .header-text p { font-weight: 300; font-size: 17px; color: #7a7a7a; line-height: 30px; letter-spacing: .25px; margin-bottom: 20px; } @media (max-width: 1420px) { .welcome-area .header-text { width: 70%; margin-left: 5%; } } @media (max-width: 1320px) { .welcome-area .header-text { width: 50%; margin-left: 5%; } .welcome-area .header-text .left-text { margin-top: 50%; } } @media (max-width: 1140px) { .welcome-area { height: auto; } .welcome-area .header-text { width: 92%; padding-top: 793px; } .welcome-area .header-text .left-text { margin-top: 5%; transform: none; } } @media (max-width: 810px) { .welcome-area { background-size: contain; } .welcome-area .header-text { padding-top: 100%; margin-left: 0; } } /* HERO: więcej „powietrza” nad tekstem na małych ekranach */ @media (max-width: 810px){ .welcome-area { background-position: right top; background-size: contain; } .welcome-area .header-text { padding-top: 88vw; } /* było 100% – bywało za mało/za dużo */ } @media (max-width: 480px){ .welcome-area .header-text { padding-top: 95vw; } /* bardzo małe telefony */ } /* --------------------------------------------- 7) FEATURES GRID (kafelki) — FIX: przyciski „Zobacz więcej” zawsze na dole --------------------------------------------- */ #features { padding-top: 80px; } .features-item { display: flex; flex-direction: column; justify-content: stretch; height: 100%; padding: 38px 26px; background: rgba(255,255,255,.82); border-radius: var(--radius-sm); text-align: center; box-shadow: var(--shadow-1); border: 1px solid rgba(255,255,255,.85); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .features-icon { display: flex; flex-direction: column; align-items: center; gap: 12px; /* spójne odstępy między img/h4/p */ flex: 1 1 auto; /* rośnie do całej wysokości kafla */ min-height: 0; /* zapobiega overflow w flexbox */ } .features-item img { margin-bottom: 4px; } .features-item h4 { font-size: 20px; color: var(--color-text); margin: 8px 0 0; } .features-item h4::after{ content:""; display:block; width:36px; height:3px; margin:8px auto 0; background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); border-radius:3px; } .features-item p { color: var(--color-muted); line-height: 1.6; margin: 0; } .features-item .main-button { margin-top: auto; /* <<< KLUCZ: dociśnij przycisk do dołu */ align-self: center; } @media (max-width: 992px){ .features-item { margin-bottom: 24px; } } /* stare dekoracyjne H2 w kafelkach — zachowane kompatybilnie */ .features-item h2 { position: absolute; top: 15px; left: 45px; font-size: 100px; font-weight: 600; color: #fdefe9; } /* --------------------------------------------- 8) PROMOTION / HOW IT WORKS --------------------------------------------- */ .left-image-decor { background: url(../images/left-bg-decor.png) no-repeat; position: absolute; pointer-events: none; width: 100%; height: 110%; filter: hue-rotate(-8deg) saturate(.9) opacity(.95); } .right-image-decor { background: url(../images/right-bg-decor.png) no-repeat right center; position: absolute; width: 100%; height: 110%; margin-top: -200px; filter: hue-rotate(-8deg) saturate(.9) opacity(.95); } #promotion { padding: 100px 0; } #promotion .left-image { align-self: center; } #promotion .right-text ul { padding: 0; margin: 0; } #promotion .right-text ul li { display: inline-block; margin-bottom: 60px; } #promotion .right-text ul li:last-child { margin-bottom: 0; } #promotion .right-text img { float: left; margin-right: 30px; } #promotion .right-text h4 { font-size: 22px; color: var(--color-text); margin: 3px 0 15px; } /* --------------------------------------------- 9) TESTIMONIALS (Owl) --------------------------------------------- */ #testimonials { padding-top: 100px; position: relative; z-index: 9; } #testimonials .item { position: relative; } #testimonials .testimonial-content { background: linear-gradient(145deg, rgba(192,105,127,.96), rgba(234,200,160,.96)); margin: 0 10px; padding: 36px 28px; text-align: left; border-radius: var(--radius-lg); box-shadow: var(--shadow-1); position: relative; overflow: hidden; color: #fff; } #testimonials .testimonial-content::before { content: "“"; position: absolute; right: 18px; top: -8px; font-size: 80px; font-weight: 800; color: rgba(255,255,255,.2); line-height: 1; } #testimonials .stars { margin: 0 0 10px; } #testimonials .stars li { display: inline-block; margin: 0 1px; } #testimonials .stars i { color: #fff; font-size: 14px; opacity: .95; } #testimonials .testimonial-content h4 { font-size: 18px; margin: 6px 0 8px; font-weight: 700; } #testimonials .testimonial-content p { color: #fff; font-weight: 300; margin: 10px 0 0; } #testimonials .testimonial-content span { display: inline-block; margin-top: 8px; color: rgba(255,255,255,.9); font-weight: 500; font-size: 13px; } /* Empty state */ .testimonial-empty { border: 1px solid rgba(0,0,0,.06); border-radius: var(--radius-lg); padding: var(--space-6); background: var(--color-bg-soft); text-align: center; box-shadow: var(--shadow-1); } .testimonial-empty h3 { margin: 10px 0 6px; color: var(--color-text); } .testimonial-empty p { margin: 0 0 14px; } /* Wyśrodkowania */ #testimonials #testimonials-empty { display: flex; justify-content: center; } #testimonials .testimonial-empty { width: 100%; max-width: 720px; margin: 0 auto; } #testimonials-wrap { display: flex; justify-content: center; } #testimonials-carousel { width: 100%; max-width: 1100px; margin: 0 auto; min-height: 80px; } #testimonials-carousel.owl-static { display: block !important; } /* Single item responsywnie */ #testimonials-carousel.single-testimonial { display: flex !important; justify-content: center; padding-inline: 12px; } #testimonials-carousel.single-testimonial .item { max-width: 720px; width: 100%; } @media (max-width: 992px) { #testimonials-carousel.single-testimonial .item { max-width: 600px; } } @media (max-width: 768px) { #testimonials-carousel.single-testimonial .item { max-width: 520px; } } @media (max-width: 576px) { #testimonials-carousel.single-testimonial .item { max-width: 100%; } } /* Owl nav */ .owl-carousel .owl-nav button.owl-next span, .owl-carousel .owl-nav button.owl-prev span { position: absolute; border-radius: 10px; font-size: 46px; color: #fff; width: 80px; height: 80px; line-height: 80px; text-align: center; display: inline-block; background: var(--gradient); } .owl-carousel .owl-nav button.owl-next span { top: 45%; right: -210px; z-index: 10; } .owl-carousel .owl-nav button.owl-prev span { top: 30%; right: -150px; z-index: 9; } @media (max-width: 1060px) { .owl-carousel .owl-nav { display: none !important; } } /* --------------------------------------------- 10) FAQ --------------------------------------------- */ .faq { position: relative; padding: 100px 0; margin-top: 80px; } .faq:before { content: ""; position: absolute; inset: 0 auto 0 0; z-index: -1; width: 84%; height: 100%; background-color: #feefef; border-top-right-radius: 500px; border-bottom-right-radius: 500px; } .faq .section-heading { margin: 0 20px 0 40px; } .accordion { background: var(--gradient); border-radius: 40px; padding: 60px 50px 50px; } .accordion-item { background: #fff; border-radius: 40px !important; margin-bottom: 30px; border: none; } .accordion-item .accordion-button { outline: none; box-shadow: none; border-radius: 40px !important; padding: 15px 25px; font-size: 16px; font-weight: 600; } .accordion-button:not(.collapsed) { color: var(--color-secondary) !important; background: #fff; } .accordion-button::after { content: "+"; width: 30px; height: 30px; text-align: center; line-height: 30px; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: 18px; font-weight: 500; background-image: none !important; } .accordion-button:not(.collapsed)::after { content: "-"; } @media (max-width: 991px) { .faq .section-heading { margin: 0; text-align: center; } .faq:before { border-radius: 0; width: 100%; } .accordion { padding: 40px 25px; } } /* ===== FOOTER ===== */ footer{ /* sterowanie stopką */ --footer-gap-top: 160px; /* ile miejsca NAD stopką (oddala od sekcji wyżej) */ --footer-pad-top: 110px; /* wewnętrzny padding od góry */ --footer-pad-bottom: 32px; /* wewnętrzny padding od dołu */ --footer-bg-y: 80%; /* pionowa pozycja tła: 0%=góra, 50%=środek, 100%=dół */ --footer-grad-alpha: 0.2; /* siła zaciemnienia przy dole tła */ margin-top: var(--footer-gap-top); padding: var(--footer-pad-top) 0 var(--footer-pad-bottom); background: url(../images/footer-bg-wedding2.png) no-repeat center/cover; background-position: center var(--footer-bg-y); /* <<< przesuwanie tła */ position: relative; width: 100%; } /* mocniejszy gradient na dole – czytelny sub-footer */ footer::before{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,var(--footer-grad-alpha)) 100%); z-index:0; } /* warstwa treści ponad tłem */ footer .footer-content, footer .contact-form, footer .right-content, footer .sub-footer{ position: relative; z-index: 1; } /* mniejsze „pusto” nad sub-footerem */ footer .footer-content{ padding-bottom: 24px; } footer .sub-footer{ padding: 24px 0 60px; border-top: 1px solid rgba(250,250,250,.3); text-align: center; } footer .sub-footer p{ color:#fff; font-size:15px; font-weight:300; letter-spacing:.5px; } /* karta formularza (inline na ≥lg) */ .contact-form{ padding: 45px; border-radius: 12px; background:#fff; box-shadow: var(--shadow-1); text-align:center; } .contact-form input, .contact-form textarea{ color:#777; font-size:13px; border:1px solid #eee; background: var(--color-bg-soft); border-radius: 10px; width:100%; height:50px; padding:0 20px; margin-bottom: 16px; outline:none; } .contact-form textarea{ height:150px; padding:20px; resize:none; } .contact-form ::placeholder{ color:#7a7a7a; } /* prawa kolumna (copy) */ footer .right-content{ align-self:center; color:#fff; } .footer-content .right-content h2{ margin:0 0 14px; font-size: clamp(28px, 4vw, 42px); font-weight:700; letter-spacing:1px; } .footer-content .right-content h2 em{ color: var(--color-accent); } .footer-content .right-content p, .footer-content .right-content a{ color:#fff; } .footer-content .right-content a:hover{ color:#ffcc33; } /* Social (opcjonalnie) */ footer .social{ overflow:hidden; margin-top:30px; } footer .social li{ margin:0 7.5px; display:inline-block; } footer .social li a{ color:#fff; background:transparent; border:1px solid #fff; width:44px; height:44px; line-height:44px; border-radius:50%; display:inline-block; font-size:16px; transition: all .3s ease; } footer .social li a:hover{ background: var(--color-accent); border-color: var(--color-accent); color:#fff; } /* RWD – mniejsze paddingi i inna domyślna pozycja tła */ @media (max-width: 992px){ footer{ --footer-gap-top: 40px; --footer-pad-top: 28px; --footer-pad-bottom:20px; --footer-bg-y: 60%; } .contact-form{ margin-bottom: 28px; } .footer-content{ text-align: center; } } /* ===== Modale vs overlay logowania – porządek warstw ===== */ .modal{ z-index: 2000; } .modal-backdrop{ z-index: 1990; } /* Formularz w modalu – kompakt */ #contactModal .modal-content{ border-radius:16px; } #contactModal .modal-body form{ background:transparent; box-shadow:none; padding:0; } #contactModal input, #contactModal textarea{ background: var(--color-bg-soft); border:1px solid #eee; border-radius:10px; width:100%; height:50px; padding:0 20px; margin-bottom:16px; } #contactModal textarea{ height:150px; padding:20px; } /* ========== CTA w stopce – dyskretne upiększenie ========== */ .contact-cta{ /* delikatna „szklista” karta, żeby tekst ładnie siedział na tle */ padding: 22px 22px; border-radius: 14px; border: 1px solid rgba(255,255,255,.16); background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); backdrop-filter: blur(4px); box-shadow: 0 10px 30px rgba(0,0,0,.10); } .contact-cta .cta-title{ display: inline-block; font-weight: 800; letter-spacing: .2px; margin: 0; margin-bottom: clamp(16px, 2.8vw, 28px); } /* CTA: wyróżnij samo „weddingApp” w tytule */ .contact-cta .cta-title em{ font-style: normal; font-weight: 800; letter-spacing: .3px; position: relative; color: var(--color-accent); /* czytelny fallback */ } /* jeśli przeglądarka wspiera gradient-tekst */ @supports ((-webkit-background-clip: text) or (background-clip: text)) { .contact-cta .cta-title em{ background: linear-gradient(90deg, var(--color-accent), var(--color-primary)); -webkit-background-clip: text; background-clip: text; color: transparent; /* tekst „malowany” gradientem */ } } /* na bardzo małych ekranach – odrobina skromniej */ @media (max-width: 576px){ .contact-cta .cta-title em::after{ bottom: -5px; height: 5px; opacity:.45; } } /* --------------------------------------------- 12) PRELOADER --------------------------------------------- */ #preloader { position: fixed; inset: 0; z-index: 9999; color: #fff; overflow: hidden; background-image: var(--gradient); } #preloader .jumper { position: absolute; inset: 0; margin: auto; width: 50px; height: 50px; } #preloader .jumper > div { width: 50px; height: 50px; border-radius: 50%; background: #fff; position: absolute; opacity: 0; animation: jumper 1s linear infinite; } #preloader .jumper > div:nth-child(2) { animation-delay: .333s; } #preloader .jumper > div:nth-child(3) { animation-delay: .666s; } @keyframes jumper { 0% { opacity: 0; transform: scale(0); } 5% { opacity: 1; } 100% { transform: scale(1); opacity: 0; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* --------------------------------------------- 13) OVERLAY: LOGIN / PANEL / ADMIN --------------------------------------------- */ #app-auth{ position:relative; width:100%; min-height:100vh; z-index:1050; background: radial-gradient(1400px 700px at 75% -5%, rgba(244,129,63,.07), transparent 55%), radial-gradient(1000px 600px at -5% 105%, rgba(244,129,63,.05), transparent 60%), linear-gradient(175deg, #fefefe 0%, #faf8f5 40%, #f5f0eb 100%); overflow-y:auto; display:none; /* sterowane JS */ } #app-auth .card{ border:0; border-radius:1rem; box-shadow:0 8px 32px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04); background:rgba(255,255,255,.92); backdrop-filter: blur(6px); } @media (min-width: 992px){ #app-auth .col-lg-8, #app-auth .col-lg-10{ max-width:1100px; margin-inline:auto; } } /* brandowe przyciski/akcenty tylko wewnątrz overlay */ #app-auth .btn-brand{ color:#fff; border:0; background:linear-gradient(180deg, var(--brand) 0%, var(--brand-600) 100%); } #app-auth .btn-brand:hover{ filter:brightness(.98); } #app-auth .btn-outline-brand{ color:var(--brand-700); border:1.5px solid var(--brand-600); background:#fff; } #app-auth .btn-outline-brand:hover{ background:var(--brand-100); border-color:var(--brand-700); color:var(--brand-700); } #app-auth .form-control:focus{ border-color:var(--brand-600); box-shadow:0 0 0 .2rem color-mix(in srgb, var(--brand) 25%, transparent); } /* nagłówki sekcji w overlay */ .admin-panel .section-title, .admin-form .section-title{ font-size:.9rem; letter-spacing:.06em; text-transform:uppercase; color:#6c757d; margin:.5rem 0 .75rem; font-weight:600; } /* lista userów (admin) */ #userList .list-group-item{ border:1px solid #eee; border-radius:.5rem; margin-bottom:.5rem; } /* małe ikonowe (np. kopiuj) */ .btn-icon{ padding:.25rem .45rem; line-height:1; border-radius:.5rem; border:1px solid #dee2e6; background:#f8f9fa; color:#444; } .btn-icon:hover{ background:#f1f3f5; } /* QR w modalu — wyśrodkowane, jeden pod drugim */ .qr-modal-wrap{ display:flex; flex-direction:column; gap:1.25rem; align-items:center; } .qr-canvas{ display:block; margin:0 auto; background:#fff; border-radius:.5rem; padding:.5rem; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); } .qr-modal-box .qr-canvas{ width:200px; height:200px; } #app-auth .modal-content{ border-radius:16px; } #resetModal{ z-index:10600 !important; } #resetModal .modal-content{ border-radius:16px; } #resetModal + .modal-backdrop, body > .modal-backdrop{ z-index:10500 !important; } #app-auth .login-hints { flex-wrap: wrap; gap: 6px; } @media (max-width: 420px){ #app-auth .login-hints{ flex-direction: column; align-items: flex-start; } #app-auth .login-hints small{ margin-bottom: 2px; } } #app-auth .admin-header{ flex-wrap: wrap; gap: 8px; } #app-auth .admin-header > h1{ margin-right: auto; } /* tytuł „odpycha” w prawo */ #app-auth .admin-header .d-flex{ flex-wrap: wrap; gap: 8px; } @media (max-width: 480px){ #app-auth .admin-header > h1{ width: 100%; margin-bottom: 4px; } } /* ==== MOBILE FIXES ==== */ html, body { overflow-x: hidden; } /* brak poziomego scrolla */ @supports (overflow: clip) { body { overflow-x: clip; } } .login-top{ max-width: calc(100vw - 24px); /* guzik nie wyjdzie poza viewport */ white-space: nowrap; } /* dekoracje tła nie wpływają na layout i nie łapią klików */ .left-image-decor, .right-image-decor{ left: 0; right: 0; pointer-events: none; max-width: 100vw; overflow: clip; } /* kafelki „Funkcje”: przyciski nie powodują skoku wysokości na wrapie */ .features-item .main-button{ min-width: 0; } /* formularz kontaktowy: bez poziomego przewijania na bardzo wąsko */ .contact-form { overflow-wrap: anywhere; } /* overlay (login/admin) — scroll */ #app-auth { -webkit-overflow-scrolling: touch; } /* --- Login card --- */ #app-auth #loginForm .form-control{ border-radius: 10px; padding: .65rem .85rem; font-size: .95rem; } #app-auth #loginForm .btn-brand{ padding: .6rem 2rem; font-size: .95rem; font-weight: 600; } /* --- Panel: key-value lista --- */ #app-auth .kv{ display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; font-size: .92rem; } #app-auth .kv dt{ font-weight: 600; color: #6c757d; white-space: nowrap; } #app-auth .kv dd{ margin: 0; color: #1f2937; font-weight: 500; } #app-auth .kv-tip{ font-size: .72rem; color: #b0b0b0; cursor: help; margin-left: 3px; vertical-align: middle; transition: color .15s; } #app-auth .kv-tip:hover{ color: #f4813f; } /* --- Panel: akcje grid --- */ #app-auth .d-grid .btn{ border-radius: 12px; padding: .65rem 1rem; font-weight: 600; font-size: .92rem; letter-spacing: .01em; } /* --- Admin: lista userów --- */ #app-auth #userList .list-group-item{ border: 1px solid #f0f0f0; border-radius: 12px; margin-bottom: 8px; padding: .75rem 1rem; transition: background .15s ease, box-shadow .15s ease; } #app-auth #userList .list-group-item:hover{ background: #faf8f5; box-shadow: 0 2px 8px rgba(0,0,0,.06); } /* --- Admin: formularz --- */ #app-auth .admin-form .form-label{ font-size: .82rem; font-weight: 600; color: #4b5563; margin-bottom: .25rem; } #app-auth .admin-form .form-control{ border-radius: 10px; font-size: .9rem; } #app-auth .admin-form .btn{ border-radius: 12px; padding: .55rem 1.25rem; font-weight: 600; } /* --- Badge tryb formularza --- */ #app-auth #formMode{ font-size: .7rem; padding: .3rem .65rem; border-radius: 999px; letter-spacing: .05em; } /* HERO: więcej miejsca nad tekstem + lepszy kontrast na mobile */ @media (max-width: 810px){ .welcome-area{ background-position: right top; background-size: contain; } .welcome-area .header-text{ padding-top: 115vw; } /* było 88–95vw */ } @media (max-width: 480px){ .welcome-area .header-text{ padding-top: 130vw; } } /* miękki „card” za tekstem tylko na telefonach */ @media (max-width: 576px){ .welcome-area .header-text .left-text{ background: rgba(255,250,248,.82); backdrop-filter: blur(2px); border-radius: 14px; padding: 14px; } } /* --------------------------------------------- KONIEC --------------------------------------------- */ /* --- Modal: bez skoku i bez prawego "paska" --- */ /* 1) Nowoczesny sposób – rezerwuje miejsce na scrollbar zawsze */ html { scrollbar-gutter: stable; } /* Chrome/Edge/Firefox, itp. */ /* 2) Wyłącz automatyczną kompensację Bootstrapa */ body.modal-open { padding-right: 0 !important; } /* Jeśli masz fixed/sticky elementy, też wyzeruj */ .modal-open .fixed-top, .modal-open .sticky-top, .modal-open .login-top { padding-right: 0 !important; } /* Fallback dla Safari/iOS (brak scrollbar-gutter): po prostu zawsze pokazuj przestrzeń na scrollbar, dzięki temu nie ma skoku layoutu */ @supports not (scrollbar-gutter: stable) { html { overflow-y: scroll; } } /* ====================================================== RSVP — sekcja w panelu użytkownika ====================================================== */ /* Górna linia: tytuł + przyciski */ .rsvp-toprow{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.75rem; flex-wrap:wrap; } .rsvp-title{ font-size:1.1rem; font-weight:700; color:#2d2318; letter-spacing:.02em; } /* Pill „Zgłoszenia" — toggle collapse */ .rsvp-pill{ display:inline-flex; align-items:center; gap:.45rem; padding:.45rem 1rem; border:1.5px solid #e0d6c8; border-radius:999px; background:#fdfaf6; color:#5c4a35; font-weight:600; font-size:.88rem; cursor:pointer; transition:background .15s, border-color .15s, box-shadow .15s; user-select:none; margin-bottom:.6rem; } .rsvp-pill:hover{ background:#f6efe5; border-color:#c9a96e; box-shadow:0 1px 6px rgba(180,140,60,.10); } .rsvp-pill:not(.collapsed){ background:#f6efe5; border-color:#b8860b; } /* Chevron (strzałka) — wspólny */ .chev{ display:inline-block; width:.55em; height:.55em; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); transition:transform .22s ease; flex-shrink:0; } .rsvp-pill:not(.collapsed) .chev, .rsvp-card.open .chev{ transform:rotate(-135deg); } /* ── Zakładki RSVP: Przyjdą / Nie przyjdą ── */ .rsvp-tabs-wrap{ margin-top:.85rem; margin-bottom:.75rem; display:flex; justify-content:center; } .rsvp-tabs{ display:inline-flex; gap:.4rem; padding:.3rem; background:#f2ede7; border-radius:14px; } .rsvp-tab{ display:inline-flex; align-items:center; gap:.4rem; padding:.42rem 1.1rem; font-size:.84rem; font-weight:600; color:#6b5c4e; border:none; border-radius:10px; background:transparent; cursor:pointer; transition:background .18s, color .18s, box-shadow .18s; white-space:nowrap; position:relative; } .rsvp-tab-icon{ font-size:.78rem; line-height:1; opacity:.7; transition:opacity .15s; } .rsvp-tab:hover{ background:rgba(255,255,255,.7); color:#3d2e1e; } .rsvp-tab:hover .rsvp-tab-icon{ opacity:1; } /* Aktywna: Przyjdą — ciepły ciemny */ .rsvp-tab.active{ background:#fff; color:#2d2318; box-shadow:0 1px 4px rgba(0,0,0,.10), 0 0 0 1px rgba(0,0,0,.04); } .rsvp-tab.active .rsvp-tab-icon{ opacity:1; } .rsvp-tab.active:hover{ background:#fff; } /* Aktywna: Nie przyjdą — czerwona */ .rsvp-tab.not.active{ background:#fff; color:#9b1c1c; box-shadow:0 1px 4px rgba(155,28,28,.12), 0 0 0 1px rgba(155,28,28,.08); } .rsvp-tab.not.active .rsvp-tab-icon{ opacity:1; } /* Badge z liczbą */ .rsvp-tab .count{ display:inline-flex; align-items:center; justify-content:center; min-width:1.35em; height:1.35em; padding:0 .35em; border-radius:999px; font-size:.71rem; font-weight:700; background:rgba(0,0,0,.07); transition:background .15s; } .rsvp-tab.active .count{ background:rgba(45,35,24,.10); color:#2d2318; } .rsvp-tab.not.active .count{ background:rgba(155,28,28,.10); color:#9b1c1c; } /* Lista zgłoszeń */ .rsvp-lists{ display:flex; flex-direction:column; } .rsvp-list{ display:flex; flex-direction:column; gap:.55rem; } /* Karta zgłoszenia */ .rsvp-card{ border:1px solid rgba(184,134,11,.15); border-radius:14px; background:#fff; overflow:hidden; transition:all .22s cubic-bezier(.16,1,.3,1); box-shadow: 0 2px 7px rgba(184,134,11,0.04); } .rsvp-card:hover{ border-color:rgba(184,134,11,.35); box-shadow:0 6px 18px rgba(184,134,11,0.09); transform: translateY(-2px); } .rsvp-card--simple .rsvp-head{ cursor:default; } /* Nagłówek karty */ .rsvp-head{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:.85rem 1.15rem; border:none; background:transparent; text-align:left; cursor:pointer; transition:background .15s ease; } .rsvp-head:hover{ background:#fdfcf9; } .rsvp-head-main{ display:flex; flex-direction:column; gap:.15rem; min-width:0; flex:1; } .rsvp-head-right{ display:flex; align-items:center; gap:.6rem; flex-shrink:0; } .rsvp-card-name{ font-weight:750; font-size:.96rem; color:#1e140a; line-height:1.25; } .rsvp-card-msg{ font-size:.85rem; color:#5c4a35; background:#fef9e8; border-left:3.5px solid #d9a04e; border-radius:0 8px 8px 0; padding:.55rem .8rem; margin-top:.5rem; line-height:1.45; } /* Szczegóły karty (zwinięte domyślnie) */ .rsvp-details{ max-height:0; overflow:hidden; transition:max-height .35s cubic-bezier(.4,0,.2,1), padding .25s ease; padding:0 1.15rem; background:#faf7f2; } .rsvp-card.open .rsvp-details{ max-height:1500px; padding:.85rem 1.15rem 1.15rem; border-top:1px solid rgba(184,134,11,0.08); } /* Meta: data */ .rsvp-meta{ font-size:.76rem; color:#9b8878; margin-top:.15rem; } /* Count pill (np. +2) */ .rsvp-count-pill{ display:inline-flex; align-items:center; justify-content:center; padding:2px 10px; font-size:.75rem; font-weight:700; color:#7c5f0a; background:#fef3c7; border:1px solid #fcd34d; border-radius:999px; box-shadow: 0 1px 3px rgba(184,134,11,0.08); } /* Podtytuły w szczegółach */ .rsvp-subtitle{ font-size:.78rem; font-weight:700; color:#6c757d; text-transform:uppercase; letter-spacing:.05em; margin-bottom:.3rem; } /* Chipy (osoby towarzyszące) */ .rsvp-chips{ display:flex; flex-wrap:wrap; gap:.3rem; margin-bottom:.4rem; } .rsvp-chip{ display:inline-block; padding:.2rem .6rem; font-size:.8rem; font-weight:500; color:#5c4a35; background:#f6efe5; border:1px solid #e8e0d5; border-radius:999px; } /* Osoby z preferencjami */ .rsvp-people{ display:flex; flex-direction:column; gap:.35rem; } .rsvp-person{ display:flex; align-items:flex-start; justify-content:space-between; gap:.5rem; padding:.5rem .7rem; border-radius:10px; background:#faf8f5; border:1px solid #ede8e2; flex-wrap:wrap; } .rsvp-person--main{ background:#fefbf5; border-color:#e8dcc8; } .rsvp-person-label{ display:block; font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:#9b8878; margin-bottom:.1rem; } .rsvp-person-name{ font-weight:600; font-size:.88rem; color:#2d2318; } .rsvp-person-name .fa{ font-size:.78rem; margin-right:.2rem; color:#b8a48a; } .rsvp-person-badges{ display:flex; flex-wrap:wrap; gap:.25rem; align-items:center; } /* Badżyki preferencji */ .rsvp-badge{ display:inline-flex; align-items:center; gap:.3rem; padding:.18rem .55rem; font-size:.72rem; font-weight:600; border-radius:999px; white-space:nowrap; } .rsvp-badge .fa{ font-size:.68rem; } .rsvp-badge--menu{ background:#e8f5e9; color:#2e7d32; } .rsvp-badge--acc{ background:#e3f2fd; color:#1565c0; } .rsvp-badge--transport{ background:#fff3e0; color:#e65100; } /* ====================================================== RSVP settings drawer — wewnętrzne sekcje ====================================================== */ .rsvp-opts-drawer-header{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:1.1rem 1.3rem; background:linear-gradient(135deg,#fdfbf8,#f6efe5); border-bottom:1px solid #ede5d8; flex-shrink:0; } .rsvp-opts-drawer-title{ font-weight:700; font-size:1rem; color:#2d2318; line-height:1.3; } .rsvp-opts-drawer-sub{ font-size:.78rem; color:#9b8878; line-height:1.3; } .rsvp-opts-close-btn{ width:34px; height:34px; display:flex; align-items:center; justify-content:center; border:1.5px solid #e0d6c8; border-radius:10px; background:#fff; color:#5c4a35; font-size:1rem; cursor:pointer; flex-shrink:0; transition:background .12s, border-color .12s; } .rsvp-opts-close-btn:hover{ background:#f6efe5; border-color:#c9a96e; } .rsvp-opts-drawer-body{ flex:1; overflow-y:auto; padding:1.1rem 1.2rem .6rem; -webkit-overflow-scrolling:touch; } .rsvp-opts-drawer-footer{ padding:.85rem 1.3rem; border-top:1px solid #ede5d8; display:flex; justify-content:flex-end; flex-shrink:0; } /* ====================================================== RSVP settings modal — nowy design (lista wierszy) ====================================================== */ .rsvp-opts-modal-content{ border:none; border-radius:18px; overflow:hidden; box-shadow:0 16px 48px rgba(0,0,0,.14); } .rsvp-opts-modal-header{ background:linear-gradient(135deg,#fdfbf8,#f6efe5); border-bottom:1px solid #ede5d8; padding:1.1rem 1.4rem; display:flex; align-items:center; justify-content:space-between; } .rsvp-opts-modal-icon{ width:38px; height:38px; border-radius:12px; background:#f0e6d2; color:#b8860b; display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; } .rsvp-opts-modal-body{ background:#fdfaf6; padding:1.1rem 1.2rem .6rem; } .rsvp-opts-modal-footer{ background:#fdfaf6; border-top:1px solid #ede5d8; padding:.85rem 1.4rem; justify-content:flex-end; } /* Lista wierszy opcji */ .rsvp-opts-list{ display:flex; flex-direction:column; gap:.45rem; } .rsvp-opts-row{ display:flex; align-items:center; gap:.9rem; padding:.75rem 1rem; background:#fff; border:1.5px solid #ede8e2; border-radius:12px; cursor:pointer; transition: border-color .15s, background .15s, box-shadow .15s; user-select:none; } .rsvp-opts-row:hover{ border-color:#c9a96e; background:#faf6ef; box-shadow:0 2px 8px rgba(180,140,80,.09); } .rsvp-opts-row.is-active{ border-color:#b8860b; background:linear-gradient(135deg,#fef9ec,#fdf0d5); box-shadow:0 2px 10px rgba(180,140,60,.12); } .rsvp-opts-row-icon{ flex-shrink:0; width:38px; height:38px; background:#f4ede0; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#9b7630; font-size:1rem; transition:background .15s, color .15s; } .rsvp-opts-row.is-active .rsvp-opts-row-icon{ background:#f5dfa0; color:#7a5a00; } .rsvp-opts-row-text{ flex:1; min-width:0; } .rsvp-opts-row-label{ font-weight:600; font-size:.93rem; color:#2d2318; line-height:1.2; } .rsvp-opts-row-desc{ font-size:.78rem; color:#9b8878; margin-top:.12rem; line-height:1.3; } /* rsvpOptsModal musi być ponad #app-auth (z-index:1050) i standardowym backdropem Bootstrap (1040) */ #rsvpOptsModal{ z-index:1090 !important; } /* Backdrop tworzony przez Bootstrap dla tego modala — wyższy niż app-auth, niższy niż modal */ body > .modal-backdrop:last-of-type{ z-index:1085 !important; } /* ====================================================== RSVP settings — własny drawer (zastępuje Bootstrap Modal) Poprawki UX: drawer/overlay domyślnie ukryte + brak klikalności, a po .is-open płynne i przewidywalne zachowanie. ====================================================== */ /* Ciemny overlay za drawerem — fixed względem viewport */ .rsvp-opts-overlay{ position:fixed; inset:0; background:rgba(30,20,10,.38); z-index:1200; backdrop-filter:blur(1px); -webkit-backdrop-filter:blur(1px); /* domyślnie NIE blokuj strony */ opacity:0; pointer-events:none; transition: opacity .18s ease; } .rsvp-opts-overlay.is-open{ opacity:1; pointer-events:auto; } /* Drawer — wysuwa się z prawej */ .rsvp-opts-drawer{ position:fixed; top:0; right:0; bottom:0; width:min(420px, 96vw); background:#fdfaf6; z-index:1201; display:flex; flex-direction:column; box-shadow:-10px 0 44px rgba(0,0,0,.18); /* domyślnie poza ekranem + brak interakcji */ transform:translateX(110%); pointer-events:none; transition:transform .26s cubic-bezier(.4,0,.2,1); border-radius:18px 0 0 18px; overflow:hidden; } .rsvp-opts-drawer.is-open{ transform:translateX(0); pointer-events:auto; } /* Mobile UX: drawer jako pełny ekran (bardziej naturalne) */ @media (max-width: 640px){ .rsvp-opts-drawer{ width:100vw; border-radius:0; } } /* Usuń stare display:none, bo psuło animację i powodowało "dziwne" stany */ /* (intencjonalnie nadpisujemy wcześniejsze definicje w pliku) */ /* ====================================================== RSVP settings modal — stare style (legacy / zachowane) ====================================================== */ .rsvp-opts-modal-content{ border:none; border-radius:18px; overflow:hidden; box-shadow:0 16px 48px rgba(0,0,0,.14); } .rsvp-opts-modal-header{ background:linear-gradient(135deg,#fdfbf8,#f6efe5); border-bottom:1px solid #ede5d8; padding:1.1rem 1.4rem; display:flex; align-items:center; justify-content:space-between; } .rsvp-opts-modal-icon{ width:38px; height:38px; border-radius:12px; background:#f0e6d2; color:#b8860b; display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; } .rsvp-opts-modal-body{ background:#fdfaf6; padding:1.1rem 1.2rem .6rem; } .rsvp-opts-modal-footer{ background:#fdfaf6; border-top:1px solid #ede5d8; padding:.85rem 1.4rem; justify-content:flex-end; } .rsvp-opts-toggle{ flex-shrink:0; cursor:pointer; display:flex; align-items:center; } .rsvp-opt-cb, .panel-vis-cb{ display:none; } .rsvp-opts-toggle-track{ width:44px; height:26px; border-radius:13px; background:#d9d0c5; position:relative; transition:background .2s; display:block; } .rsvp-opts-toggle-thumb{ position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 5px rgba(0,0,0,.22); transition:transform .2s; display:block; } /* Aktywny stan — sterowany przez JS przez klasę .is-active na .rsvp-opts-row */ .rsvp-opts-row.is-active .rsvp-opts-toggle-track{ background:#b8860b; } .rsvp-opts-row.is-active .rsvp-opts-toggle-thumb{ transform:translateX(18px); } /* rsvpOptsModal musi być ponad #app-auth (z-index:1050) i standardowym backdropem Bootstrap (1040) */ #rsvpOptsModal{ z-index:1090 !important; } /* Backdrop tworzony przez Bootstrap dla tego modala — wyższy niż app-auth, niższy niż modal */ body > .modal-backdrop:last-of-type{ z-index:1085 !important; } /* Stare style kart (legacy — zostaw dla ewentualnych innych miejsc) */ .rsvp-options-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap:.75rem; } @media(max-width:500px){ .rsvp-options-grid{ grid-template-columns: 1fr 1fr; } } .rsvp-option-card{ display:block; cursor:pointer; border:2px solid #e8e0d5; border-radius:14px; padding:.85rem 1rem; background:#fdfcfa; transition: border-color .18s, background .18s, box-shadow .18s; user-select:none; } .rsvp-option-card:hover{ border-color:#c9a96e; background:#faf6ef; box-shadow:0 2px 8px rgba(180,140,80,.12); } .rsvp-option-card.is-active{ border-color:#b8860b; background:linear-gradient(135deg,#fef9ec,#fdf0d5); box-shadow:0 2px 10px rgba(180,140,60,.15); } .rsvp-option-inner{ display:flex; align-items:center; gap:.75rem; } .rsvp-option-icon{ flex-shrink:0; width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:#f4ede0; border-radius:10px; color:#9b7630; font-size:1rem; transition: background .18s, color .18s; } .rsvp-option-card.is-active .rsvp-option-icon{ background:#f5dfa0; color:#7a5a00; } .rsvp-option-text{ flex:1; min-width:0; } .rsvp-option-text .fw-semibold{ font-size:.92rem; color:#3d3228; } .rsvp-opt-cb{ display:none; } .rsvp-option-checkmark{ flex-shrink:0; width:22px; height:22px; border:2px solid #d4c4a8; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:.72rem; color:transparent; transition: border-color .18s, background .18s, color .18s; } .rsvp-option-card.is-active .rsvp-option-checkmark{ background:#b8860b; border-color:#b8860b; color:#fff; } /* Admin: siatka toggles RSVP */ .rsvp-option-toggle{ padding:.65rem .85rem; background:#faf8f5; border:1px solid #ede5d8; border-radius:10px; display:flex; flex-direction:column; gap:.15rem; } .rsvp-option-toggle .form-check-label{ font-size:.9rem; } .rsvp-msg{ background:linear-gradient(135deg, #fdfbf8, #f8f4ee); border-left:3px solid #c9a96e; padding:.7rem .9rem; border-radius:10px; margin-top:.6rem; word-break:break-word; font-size:.9rem; color:#3d3228; line-height:1.5; } /* ===== App Showcase (3 okna) — kompakt + auto-skalowanie + mobile swipe ===== */ .app-showcase { padding-top: 40px; } .app-showcase .center-heading { margin-bottom: 26px; } /* NAV */ .showcase-nav{ display:flex; justify-content:center; gap:8px; margin-bottom:14px; flex-wrap:wrap; } .nav-pill{ border:1px solid #e7e9ee; background:#fff; color:#111827; font-weight:700; padding:9px 14px; border-radius:999px; font-size:13px; letter-spacing:.02em; transition: box-shadow .15s ease, background-color .15s ease, transform .12s ease; } .nav-pill:hover{ transform: translateY(-1px); } .nav-pill.is-active{ background:#f7f8fb; box-shadow:0 2px 8px rgba(0,0,0,.06); } /* === MOBILE: poziome przewijanie palcem (wszystkie karty w DOM) === */ .showcase-grid{ display:flex; gap:16px; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding-bottom: 6px; /* pozwól na oba kierunki gestów — horyzont (slider) + pion (scroll strony) */ touch-action: pan-x pan-y; /* ukryj paski przewijania */ scrollbar-width: none; -ms-overflow-style: none; } .showcase-grid::-webkit-scrollbar{ display:none; } /* pojedynczy „slajd” */ .screen-card{ scroll-snap-align: center; scroll-snap-stop: always; flex: 0 0 86vw; /* szerokość karty na mobile */ max-width: 520px; background: rgba(255,255,255,.86); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.9); border-radius: 12px; box-shadow: var(--shadow-1); padding: 12px 12px 10px; /* ważne: NIE blokuj gestów horyzontalnych na dzieciach */ touch-action: auto; } /* podpisy */ .screen-caption{ margin-top: 10px; text-align:center; } .screen-caption h3{ font-size: 17px; font-weight: 700; color: var(--color-text); margin: 4px 0 2px; } .screen-caption p{ margin: 0; font-size: 14px; line-height: 22px; color: var(--color-muted); } .screen-badge{ display:inline-block; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; color:#6b7280; background:#fff; border:1px solid #eef0f3; border-radius:999px; padding:5px 9px; margin-bottom: 4px; } /* „telefon” – ramka + fit obrazka */ .device{ position: relative; border-radius: 18px; padding: 6px; /* grubość czarnej ramki */ background:#0f1115; box-shadow: 0 12px 28px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.06); aspect-ratio: 10 / 19.5; overflow: hidden; width: clamp(220px, 60vw, 280px); margin: 0 auto; transition: transform .12s ease, box-shadow .2s ease; /* nie blokuj horyzontalnych gestów */ touch-action: auto; } .device:hover{ transform: translateY(-1px); box-shadow: 0 14px 34px rgba(0,0,0,.2), inset 0 0 0 1px rgba(255,255,255,.06); } .device.has-notch::before{ content:""; position:absolute; top:6px; left:50%; transform:translateX(-50%); width: 42%; height: 12px; background:#0b0d11; border-radius:0 0 10px 10px; box-shadow: inset 0 -1px 0 rgba(255,255,255,.06); } /* ekran: uwzględnia ramkę (padding) — „na styk” */ .device-screen{ position:absolute; inset:8px; /* = padding(6) + 2px marginesu optycznego */ width: calc(100% - 16px); height: calc(100% - 16px); border-radius:14px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); background:#fff; object-fit: cover; object-position: center top; display:block; cursor: pointer; /* nie blokuj horyzontalnych gestów */ touch-action: auto; } /* również gdy w środku */ .device-screen > img, .device-screen > picture > img{ width:100%; height:100%; object-fit: cover; object-position: center top; display:block; border-radius: inherit; } /* opcjonalnie: .device.contain → bez przycięć */ .device.contain .device-screen, .device.contain .device-screen > img, .device.contain .device-screen > picture > img{ object-fit: contain; background:#fff; } /* === DESKTOP: 3 kolumny, brak poziomego scrolla; pigułki chowamy === */ @media (min-width: 992px){ .showcase-nav{ display:none; } .showcase-grid{ display:grid; gap:18px; overflow:visible; scroll-snap-type:none; grid-template-columns: repeat(3, minmax(0, 1fr)); touch-action: auto; /* natywne zachowanie */ } .screen-card{ flex: 0 0 auto; max-width:none; } .device{ width: clamp(240px, 18vw, 300px); } } /* Lightbox (jeśli używasz #screenModal) */ #screenModal .modal-dialog { max-width: 1200px; } #screenModal .screenlightbox { background: #000; border: 0; border-radius: 12px; } #screenModal .modal-body { min-height: min(88vh, 1200px); } #screenModalImg{ max-width: 100%; max-height: calc(100vh - 140px); width: auto; height: auto; object-fit: contain; display:block; } /* ====================================================== CONTENT EDITOR — Toasty / Zadania (panel użytkownika) ====================================================== */ /* Przycisk zwijania sekcji (content editor) */ .btn-content-collapse{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:8px; border:1.5px solid #e0d6c8; background:#fdfaf6; color:#7a6b5a; cursor:pointer; transition:background .12s, border-color .12s, transform .2s; padding:0; flex-shrink:0; } .btn-content-collapse:hover{ background:#f6efe5; border-color:#c9a96e; } /* Obrót chevron gdy zwinięte */ .btn-content-collapse .chev{ transform:rotate(45deg); transition:transform .22s ease; } .btn-content-collapse.is-collapsed .chev{ transform:rotate(-135deg); } .content-editor-add-row{ display:flex; justify-content:center; padding:.5rem 0 .2rem; } .content-editor-empty{ display:flex; align-items:center; justify-content:center; gap:.5rem; padding:1.2rem; border:1.5px dashed #e0d6c8; border-radius:10px; background:#fdfaf6; } .btn-content-add-inline{ display:inline-flex; align-items:center; gap:.3rem; padding:.3rem .85rem; border-radius:999px; border:1.5px solid #c9a96e; background:#fdfaf6; color:#7a5a00; font-size:.82rem; font-weight:600; cursor:pointer; transition:background .12s, border-color .12s; } .btn-content-add-inline:hover{ background:#f6efe5; border-color:#b8860b; } .content-editor-list{ display:flex; flex-direction:column; gap:.45rem; } .content-editor-row{ display:grid; grid-template-columns: 1.6rem 1fr auto; gap:.6rem; align-items:start; padding:.7rem .85rem; background:#fff; border:1.5px solid #ede8e2; border-radius:12px; transition:border-color .15s, box-shadow .15s; } .content-editor-row:hover{ border-color:#c9a96e; box-shadow:0 2px 8px rgba(180,140,60,.07); } .content-editor-row-num{ font-size:.75rem; font-weight:700; color:#b8a48a; padding-top:.45rem; text-align:center; } .content-editor-row-fields{ min-width:0; } .content-editor-title{ font-weight:600; font-size:.88rem; } .content-editor-desc{ font-size:.82rem; color:#5c4a35; resize:vertical; } .content-editor-row-actions{ display:flex; flex-direction:column; gap:.25rem; padding-top:.2rem; flex-shrink:0; } .btn-content-action{ display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:8px; border:1.5px solid #e0d6c8; background:#fdfaf6; color:#5c4a35; font-size:.82rem; cursor:pointer; transition:background .12s, border-color .12s, color .12s; padding:0; line-height:1; } .btn-content-action:hover:not(:disabled){ background:#f6efe5; border-color:#c9a96e; } .btn-content-action:disabled{ opacity:.35; cursor:default; } .btn-content-action.btn-del{ color:#c0392b; border-color:#f5c6cb; background:#fff5f5; } .btn-content-action.btn-del:hover{ background:#fde8e8; border-color:#e57373; } @media (max-width:560px){ .content-editor-row{ grid-template-columns: 1.2rem 1fr auto; padding:.55rem .65rem; gap:.4rem; } } /* ====================================================== PANEL TABS — główne zakładki panelu (RSVP / Toasty / Zadania) ====================================================== */ .panel-tabs-wrap{ margin-bottom:1.25rem; } .panel-tabs-nav{ display:flex; gap:.35rem; padding:.35rem; background:linear-gradient(135deg,#fdfbf8,#f5ede0); border:1.5px solid #ede5d8; border-radius:16px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; } .panel-tabs-nav::-webkit-scrollbar{ display:none; } .panel-tab-btn{ display:inline-flex; align-items:center; gap:.45rem; padding:.52rem 1.15rem; font-size:.86rem; font-weight:600; color:#7a6b5a; border:none; border-radius:11px; background:transparent; cursor:pointer; white-space:nowrap; transition:background .18s, color .18s, box-shadow .18s; flex-shrink:0; letter-spacing:.01em; } .panel-tab-btn .panel-tab-icon{ font-size:.95rem; line-height:1; opacity:.8; } .panel-tab-btn:hover{ background:rgba(255,255,255,.75); color:#3d2e1e; } .panel-tab-btn.is-active{ background:#fff; color:#2d2318; box-shadow:0 2px 8px rgba(0,0,0,.09), 0 0 0 1.5px rgba(184,134,11,.18); } .panel-tab-btn.is-active .panel-tab-icon{ opacity:1; } .panel-tab-settings-btn{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border:none; border-radius:10px; background:transparent; color:#9a8b7a; cursor:pointer; transition:background .18s, color .18s; flex-shrink:0; font-size:.92rem; } .panel-tab-settings-btn:hover{ background:rgba(255,255,255,.75); color:#3d2e1e; } .panel-tab-pane{ display:none; } .panel-tab-pane.is-active{ display:block; } /* ====================================================== PANEL TOAST — ładniejsze komunikaty statusu ====================================================== */ .panel-toast{ display:flex; align-items:flex-start; gap:.75rem; padding:.8rem 1rem; border-radius:12px; font-size:.88rem; line-height:1.45; margin:.4rem 0; border-width:1px; border-style:solid; animation: panelToastIn .25s ease; } @keyframes panelToastIn{ from{ opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } } .panel-toast-icon{ flex-shrink:0; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.9rem; } .panel-toast-body{ flex:1; min-width:0; } .panel-toast-title{ font-weight:700; font-size:.88rem; margin-bottom:.1rem; } .panel-toast-msg{ color:inherit; opacity:.85; } /* Warianty kolorów */ .panel-toast--success{ background:linear-gradient(135deg,#f0fdf4,#ecfdf5); border-color:#a7f3d0; color:#065f46; } .panel-toast--success .panel-toast-icon{ background:#d1fae5; color:#059669; } .panel-toast--success::after{ background: #10b981; } .panel-toast--error{ background:linear-gradient(135deg,#fef2f2,#fff1f2); border-color:#fca5a5; color:#7f1d1d; } .panel-toast--error .panel-toast-icon{ background:#fee2e2; color:#dc2626; } .panel-toast--error::after{ background: #ef4444; } .panel-toast--warning{ background:linear-gradient(135deg,#fffbeb,#fef3c7); border-color:#fcd34d; color:#78350f; } .panel-toast--warning .panel-toast-icon{ background:#fef3c7; color:#d97706; } .panel-toast--warning::after{ background: #f59e0b; } .panel-toast--info{ background:linear-gradient(135deg,#fefbf0,#fdf6e3); border-color:#f5dfa0; color:#6b4c00; } .panel-toast--info .panel-toast-icon{ background:#fef3c7; color:#b8860b; } .panel-toast--info::after{ background: #d97706; } /* Loader inline */ .panel-toast--loading{ background:#f8f7f5; border-color:#e8e0d5; color:#5c4a35; } .panel-toast--loading .panel-toast-icon{ background:#f2ede7; color:#9b8878; } /* ====================================================== RSVP person icon fix ====================================================== */ .rsvp-person--companion .rsvp-person-icon-wrap{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#f0e9de; border:1px solid #e0d5c5; font-size:.75rem; color:#9b7a50; flex-shrink:0; margin-right:.3rem; } /* ====================================================== E-MAILE GOŚCI — panel użytkownika (po weselu) ====================================================== */ /* Lekki pasek podtytułu/akcji */ .emails-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .55rem; margin: .15rem 0 .85rem; } .emails-toolbar .emails-note { font-size: .82rem; color: #8b7a64; } /* Mały chip z liczbą maili */ .emails-summary-chip{ display:inline-flex; align-items:center; gap:.45rem; padding:.38rem .78rem; border-radius:999px; border:1.5px solid #eadfcf; background:linear-gradient(135deg,#fefbf3,#f8efdd); color:#6f520a; font-size:.8rem; font-weight:700; letter-spacing:.01em; margin: .2rem 0 .7rem; } .emails-summary-chip .fa{ font-size:.82rem; color:#b8860b; } /* Siatka listy */ .emails-grid{ display:flex; flex-direction:column; gap:.45rem; } /* Wiersz e-maila */ .email-row{ display:grid; grid-template-columns: 2rem minmax(0,1fr) auto auto; align-items:center; gap:.55rem; padding:.62rem .75rem; border:1.5px solid #ede5d8; border-radius:12px; background:#fff; transition:border-color .15s, box-shadow .15s, background .15s, transform .12s; } .email-row:hover{ border-color:#d4c3a1; background:#fffdf9; box-shadow:0 3px 10px rgba(169,130,52,.08); transform: translateY(-1px); } /* Numer porządkowy */ .email-row-num{ width:1.5rem; height:1.5rem; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; background:#f6efe3; color:#8a6d3b; font-size:.74rem; font-weight:700; border:1px solid #eadfcf; } /* Adres */ .email-row-addr{ min-width:0; display:inline-flex; align-items:center; gap:.4rem; color:#2f261a; font-weight:600; font-size:.88rem; line-height:1.3; word-break:break-word; } .email-row-addr .fa{ color:#b8860b; opacity:.9; font-size:.78rem; flex-shrink:0; } /* Data */ .email-row-date{ font-size:.75rem; color:#8f816f !important; white-space:nowrap; } /* Przycisk kopiuj pojedynczy */ .btn-email-copy{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:9px; border:1.5px solid #e3d8c8; background:#fdfaf6; color:#6d5842; cursor:pointer; transition:background .14s, border-color .14s, color .14s, transform .12s, box-shadow .12s; padding:0; line-height:1; } .btn-email-copy:hover{ background:#f6efe5; border-color:#c9a96e; color:#3f2f1e; transform:translateY(-1px); box-shadow:0 2px 7px rgba(180,140,60,.12); } .btn-email-copy:active{ transform:translateY(0); } /* Kontener akcji nad listą (te 3 btn z JS) */ #emailsCopyBtn, #emailsCsvBtn, #emailsRefreshBtn{ border-width:1.5px; } /* Lepszy wygląd pustego stanu i statusów */ #emailsStatus .panel-toast{ margin-top:.1rem; } #emailsList .panel-toast{ margin-top:.4rem; } /* Mobile */ @media (max-width: 760px){ .email-row{ grid-template-columns: 1.7rem minmax(0,1fr) auto; grid-template-areas: "num addr copy" ". date date"; gap:.35rem .5rem; padding:.58rem .62rem; } .email-row-num{ grid-area:num; } .email-row-addr{ grid-area:addr; font-size:.85rem; } .btn-email-copy{ grid-area:copy; width:28px; height:28px; } .email-row-date{ grid-area:date; font-size:.72rem; white-space:normal; padding-left:.05rem; } } /* ====================================================== COLLAPSIBLE CARD HEADER — zwijana karta zakładek ====================================================== */ .card-header-collapsible{ border-radius: inherit; } .card-header-collapsible:hover{ background: linear-gradient(135deg, #faf8f2, #f0e8d8) !important; } .card-header-collapsible:focus-visible{ outline: 2px solid #b8860b; outline-offset: -2px; border-radius: inherit; } /* Chevron animowany */ .panel-collapse-chev{ display: inline-block; width: 14px; height: 14px; border-right: 2px solid #b8860b; border-bottom: 2px solid #b8860b; transform: rotate(45deg) translateY(-2px); transition: transform .25s ease; flex-shrink: 0; } /* Gdy nagłówek ma aria-expanded=false — chevron wskazuje w dół */ [aria-expanded="false"] .panel-collapse-chev{ transform: rotate(-45deg) translateY(1px); } /* Płynna animacja body karty */ #panelTabsCardBody{ transition: max-height .3s ease, opacity .25s ease, padding .25s ease; overflow: hidden; } /* ====================================================== USER GUIDE MODAL — instrukcja dla nowego użytkownika ====================================================== */ /* Kroki w modalu */ .guide-step{ display: flex; gap: 14px; padding: 11px 0; border-bottom: 1px solid rgba(184,134,11,.1); } .guide-step:last-child{ border-bottom: none; } .guide-step-num{ flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: #b8860b; color: #fff; font-size: .78rem; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-top: 1px; } .guide-step-content{ flex: 1; min-width: 0; } .guide-step-title{ font-size: .92rem; font-weight: 700; color: #3d2b00; margin-bottom: 3px; } .guide-step-desc{ font-size: .83rem; color: #6b5535; line-height: 1.55; } .guide-step-desc strong{ color: #3d2b00; } .guide-step-desc em{ color: #9b7a0a; font-style: normal; font-weight: 600; } /* Mobile */ @media (max-width: 600px){ .guide-step-num{ width:24px; height:24px; font-size:.72rem; } .guide-step-title{ font-size:.86rem; } } /* ====================================================== FLOATING NOTIFICATIONS (showNotification) ====================================================== */ #notif-container { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 99999; display: flex; flex-direction: column-reverse; gap: .6rem; pointer-events: none; max-width: min(380px, calc(100vw - 2rem)); } .notif { display: flex; align-items: flex-start; gap: .75rem; padding: .85rem 1.1rem; border-radius: 14px; font-size: .875rem; line-height: 1.5; pointer-events: all; box-shadow: 0 8px 32px rgba(0,0,0,.13), 0 2px 8px rgba(0,0,0,.07); border: 1px solid transparent; cursor: pointer; position: relative; overflow: hidden; animation: notifIn .35s cubic-bezier(.34,1.56,.64,1) both; transition: transform .2s, box-shadow .2s; } .notif:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(0,0,0,.17); } .notif.is-hiding { animation: notifOut .3s ease forwards; } @keyframes notifIn { from { opacity:0; transform: translateX(60px) scale(.9); } to { opacity:1; transform: translateX(0) scale(1); } } @keyframes notifOut { from { opacity:1; transform: translateX(0) scale(1); max-height: 120px; margin-bottom: 0; } to { opacity:0; transform: translateX(60px) scale(.9); max-height: 0; margin-bottom: -.6rem; padding: 0; } } /* Progress bar */ .notif::after { content: ''; position: absolute; bottom: 0; left: 0; height: 3px; width: 100%; border-radius: 0 0 14px 14px; transform-origin: left; animation: notifProgress var(--notif-duration, 4s) linear forwards; } @keyframes notifProgress { from { transform: scaleX(1); } to { transform: scaleX(0); } } .notif-icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; } .notif-body { flex: 1; min-width: 0; } .notif-title { font-weight: 700; font-size: .88rem; margin-bottom: .15rem; } .notif-msg { opacity: .85; font-size: .845rem; } .notif-close { flex-shrink: 0; background: none; border: none; padding: 0; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: .5; cursor: pointer; font-size: .75rem; color: inherit; transition: opacity .15s, background .15s; align-self: flex-start; margin-top: 1px; } .notif-close:hover { opacity: 1; background: rgba(0,0,0,.08); } /* Kolory */ .notif--success { background: linear-gradient(135deg, #f0fdf4, #ecfdf5); border-color: #6ee7b7; color: #065f46; } .notif--success .notif-icon { background: #d1fae5; color: #059669; } .notif--success::after { background: #10b981; } .notif--error { background: linear-gradient(135deg, #fef2f2, #fff1f2); border-color: #fca5a5; color: #7f1d1d; } .notif--error .notif-icon { background: #fee2e2; color: #dc2626; } .notif--error::after { background: #ef4444; } .notif--warning { background: linear-gradient(135deg, #fffbeb, #fef3c7); border-color: #fcd34d; color: #78350f; } .notif--warning .notif-icon { background: #fef3c7; color: #d97706; } .notif--warning::after { background: #f59e0b; } .notif--info { background: linear-gradient(135deg, #fefbf0, #fdf6e3); border-color: #f5dfa0; color: #6b4c00; } .notif--info .notif-icon { background: #fef3c7; color: #b8860b; } .notif--info::after { background: #d97706; } .notif--loading { background: linear-gradient(135deg, #f8f7f5, #f2ede7); border-color: #e8e0d5; color: #5c4a35; } .notif--loading .notif-icon { background: #f2ede7; color: #9b8878; } .notif--loading::after { display: none; } @media (max-width: 600px) { #notif-container { bottom: 1rem; right: .75rem; left: .75rem; max-width: none; } } /* ---- Animacje dla showConfirm ---- */ @keyframes notifFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes notifFadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes notifSlideIn { from { opacity: 0; transform: scale(.92) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }