:root{ --bg:#244056;--bg-dark:#0b1a2a;--bg-dark-2:#132b46; --accent:#62A4B4;--accent2:#F38C7A;--white:#fff;--cream:#FFF8DC; --story-header-height:112px;--story-bottom-nav-height:36px; --content-width:850px;--classic-width:900px; } @font-face{font-family:"Roboto";src:url("../Roboto-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap} *{box-sizing:border-box;margin:0;padding:0} html,body{width:100%;min-height:100%;overflow-x:hidden} body{padding-bottom:var(--story-bottom-nav-height);font-family:"Roboto",Arial,sans-serif;color:var(--white);background:radial-gradient(circle at 10% 10%,rgba(255,255,255,.03),transparent 10%),radial-gradient(circle at 90% 80%,rgba(255,255,255,.02),transparent 10%),var(--bg)} .stars{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.6;mix-blend-mode:screen;filter:blur(.3px);background-image:radial-gradient(2px 2px at 4% 10%,rgba(255,255,255,.9),transparent),radial-gradient(1.5px 1.5px at 20% 30%,rgba(255,255,255,.8),transparent),radial-gradient(1.2px 1.2px at 60% 18%,rgba(255,255,255,.7),transparent),radial-gradient(1.8px 1.8px at 85% 40%,rgba(255,255,255,.85),transparent),radial-gradient(1.3px 1.3px at 70% 70%,rgba(255,255,255,.6),transparent)} /* HEADER */ header.story-top-header{position:relative;z-index:20;width:100%;min-height:var(--story-header-height);padding:12px 20px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:16px;background:linear-gradient(180deg,rgba(9,17,31,.97),rgba(12,24,41,.93));border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 8px 24px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(12px)} header.story-top-header::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,rgba(255,255,255,.06),transparent 45%)} .story-mode-switch{position:relative;z-index:2;display:flex;align-items:center;justify-content:flex-start;gap:6px;min-width:0} .story-mode-btn{appearance:none;padding:8px 13px;border:1px solid rgba(255,255,255,.13);border-radius:12px;color:rgba(255,255,255,.9);background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025));font:inherit;font-size:12.5px;font-weight:600;white-space:nowrap;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.1);transition:.2s ease} .story-mode-btn:hover{transform:translateY(-1px);background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.04))} #tabPreIntro.active{color:#fff;border-color:rgba(98,164,180,.7);background:linear-gradient(135deg,rgba(98,164,180,.78),rgba(98,164,180,.34))} #tabInteractive.active{color:#fff;border-color:rgba(243,140,122,.7);background:linear-gradient(135deg,rgba(243,140,122,.8),rgba(243,140,122,.36))} .story-header-logo{position:relative;z-index:2;justify-self:center;width:fit-content;max-width:100%;padding:14px 20px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.16);border-radius:18px;box-shadow:0 6px 18px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.12);backdrop-filter:blur(5px);transition:.25s ease} .story-header-logo:hover{transform:scale(1.025)} .story-header-logo img{display:block;width:auto;height:72px;max-width:240px;object-fit:contain;border-radius:10px} .story-header-music{position:relative;z-index:2;display:flex;align-items:center;justify-content:flex-end;min-width:0} .backgroundMusicBtn{appearance:none;padding:9px 15px;border:1px solid rgba(255,255,255,.14);border-radius:12px;color:rgba(255,255,255,.9);background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.03));font:inherit;font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer;transition:.2s ease} .backgroundMusicBtn:hover{transform:translateY(-1px);background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.05))} .backgroundMusicBtn.active{color:#fff;border-color:rgba(255,255,255,.24);background:linear-gradient(135deg,rgba(98,164,180,.75),rgba(243,140,122,.52))} /* TRYB KLASYCZNY */ #preIntro{position:relative;z-index:1;width:100%;min-height:calc(100dvh - var(--story-header-height));padding:20px;display:flex;justify-content:center;align-items:flex-start;background:linear-gradient(180deg,var(--bg-dark),var(--bg-dark-2))} .preintro-container{width:min(var(--classic-width),100%);margin:20px auto;padding:30px 20px;text-align:center;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:18px;box-shadow:0 0 25px rgba(98,164,180,.15)} .preintro-container h1{margin:10px 0 16px;color:var(--accent2);font-size:1.6rem;font-weight:600} .preintro-container h2{margin:22px 0 10px;color:var(--accent2);font-size:1.35rem} .preintro-container p{margin:10px 0;color:#f2e6d0;font-size:1.05rem;line-height:1.65;overflow-wrap:anywhere} .story-introduction{margin-bottom:18px} #preIntroText{position:relative;z-index:2;max-width:700px;margin:20px auto 0;text-align:center} #preIntroText p:not(:last-child)::after{content:"---";display:block;margin:8px 0;opacity:.3;text-align:center} .preintro-img{width:100%;margin:18px 0;display:flex;justify-content:center} .preintro-img img{width:100%;max-width:420px;object-fit:cover;border-radius:16px;box-shadow:0 8px 25px rgba(0,0,0,.35);transition:.3s ease} .preintro-img img:hover{transform:scale(1.02)} /* POLA IMION */ .name-field{width:100%;max-width:380px;margin:8px auto;display:flex;flex-direction:column;align-items:stretch} .name-field label{display:block;margin:0 0 5px 4px;color:rgba(255,255,255,.86);font-size:13px;font-weight:600;line-height:1.2;text-align:left} #childName,#friendName,#childNamePre,#friendNamePre{width:100%;max-width:380px;min-height:44px;padding:11px 14px;margin:0;color:#2f3542;background:rgba(255,255,255,.96);border:1.5px solid rgba(255,255,255,.3);border-radius:13px;outline:none;font:inherit;font-size:16px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.08);transition:.2s ease} #childName:focus,#friendName:focus,#childNamePre:focus,#friendNamePre:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(98,164,180,.18)} /* INTRO */ #intro{position:relative;z-index:1;width:100%;height:calc(100dvh - var(--story-header-height) - var(--story-bottom-nav-height));min-height:500px;padding:20px;display:flex;align-items:center;justify-content:center;overflow:hidden;background-repeat:no-repeat;background-position:center;background-size:cover} #intro::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(to bottom,rgba(5,12,22,.08),rgba(5,12,22,.14),rgba(5,12,22,.22))} #intro .intro-screen{position:relative;z-index:2;width:min(92%,500px);margin:0 auto;padding:26px 28px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;background:rgba(8,18,32,.76);border:1px solid rgba(255,255,255,.14);border-radius:22px;box-shadow:0 12px 36px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.09);backdrop-filter:blur(10px)} #intro .intro-title{margin:0 0 8px;font-size:clamp(21px,2.4vw,28px);line-height:1.25} #intro .name-field{max-width:330px;margin:0 auto} #intro .name-field label{margin-left:0;text-align:center} #intro #startBtn{margin-top:8px} /* START */ #startBtn,#goToIntroBtn{appearance:none;min-height:44px;padding:11px 22px;border:0;border-radius:14px;color:#fff;background:var(--accent2);font:inherit;font-size:15px;font-weight:600;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.16);transition:.2s ease} #startBtn:hover,#goToIntroBtn:hover{transform:translateY(-1px)} /* STORY */ #story{position:relative;z-index:1;width:100%;min-height:calc(100dvh - var(--story-header-height) - var(--story-bottom-nav-height));padding:18px 4vw 28px;display:none;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center} .story-title{margin-bottom:12px;font-size:clamp(20px,3vw,28px);font-weight:800;text-shadow:0 4px 14px rgba(0,0,0,.6)} .image-wrapper{position:relative;width:min(92%,760px);margin:0 auto;display:flex;justify-content:center;cursor:zoom-in} .story-image{display:block;width:100%;height:clamp(210px,32vh,320px);max-width:760px;object-fit:contain;border:2px solid rgba(255,255,255,.05);border-radius:12px;box-shadow:0 8px 22px rgba(0,0,0,.6);opacity:1;transition:opacity .35s ease,transform .45s ease} .story-image.fade-out{opacity:0;transform:scale(.97)} .story-image.fade-in{opacity:1;transform:scale(1)} .zoom-icon{position:absolute;left:8px;bottom:8px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(255,255,255,.2);border-radius:50%;backdrop-filter:blur(4px);box-shadow:0 2px 8px rgba(0,0,0,.3);pointer-events:none} #fragment{width:min(100%,var(--content-width));min-height:120px;max-height:220px;margin:8px auto 0;padding:16px 12px;overflow-y:auto;overflow-x:hidden;color:var(--cream);background:transparent;border-radius:12px;font-size:clamp(16px,2.2vw,19px);font-weight:600;line-height:1.6;text-align:center;perspective:1000px;transform-origin:left} #fragment::-webkit-scrollbar{width:6px} #fragment::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3);border-radius:6px} [data-sound]{display:inline;cursor:pointer;color:var(--accent2);background:rgba(243,140,122,.08);padding:2px 5px;border-radius:7px;font-weight:700;white-space:nowrap;transition:.2s ease} [data-sound]:hover{background:rgba(243,140,122,.18)} .progress-container{position:relative;width:min(92%,var(--content-width));height:18px;margin:10px auto 0;overflow:visible;cursor:pointer;touch-action:pan-x;background:rgba(255,255,255,.15);border-radius:12px} .progress-bar{position:relative;width:0;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:12px;transition:width .25s ease} .progress-thumb{position:absolute;top:50%;right:0;width:22px;height:22px;background:#fff;border-radius:50%;box-shadow:0 4px 14px rgba(0,0,0,.5);transform:translate(50%,-50%);pointer-events:none} .info-row{width:min(92%,var(--content-width));min-height:40px;margin:4px auto 0;padding:6px 6px 0;display:flex;align-items:center;justify-content:space-between;gap:12px} #status{flex:1;overflow:hidden;color:rgba(255,255,255,.9);font-size:14px;text-align:left;text-overflow:ellipsis;white-space:nowrap} #remaining{min-width:150px;color:rgba(255,255,255,.75);font-size:13px;text-align:right;white-space:nowrap} .volume-container{width:min(92%,var(--content-width));margin:8px auto 0} #volumeSlider{width:100%;height:10px;-webkit-appearance:none;appearance:none;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:10px} #volumeSlider::-webkit-slider-thumb{width:20px;height:20px;-webkit-appearance:none;appearance:none;background:#fff;border-radius:50%} .controls{width:min(92%,var(--content-width));margin:14px auto 0;display:flex;justify-content:center;gap:8px;flex-wrap:nowrap} .controls button{appearance:none;flex:1;min-width:100px;min-height:44px;padding:10px 14px;border:1px solid rgba(255,255,255,.14);border-radius:14px;color:#fff;background:rgba(0,0,0,.34);font:inherit;font-size:14px;font-weight:600;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.15);transition:.2s ease} .controls button:hover:not(:disabled){transform:translateY(-1px)} #nextBtn{background:var(--accent2);border-color:var(--accent2)} #prevBtn{color:#555d68;background:#fff;border-color:#dfe3e8} .controls button:disabled{opacity:.35;cursor:default;transform:none;box-shadow:none} #ending{display:none;margin-top:12px} /* MODAL */ body.modal-open{overflow:hidden} .image-modal{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;background:#000;opacity:0;pointer-events:none;transition:opacity .3s ease} .image-modal.active{opacity:1;pointer-events:auto} .modal-content{width:min(90vw,700px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px} .image-modal img{width:100%;max-height:52vh;object-fit:contain;border-radius:14px;box-shadow:0 15px 60px rgba(0,0,0,.8);animation:zoomIn .35s ease} .modal-text{width:100%;max-height:30vh;overflow-y:auto;padding:12px 14px;color:#fff;background:rgba(0,0,0,.45);border-radius:16px;backdrop-filter:blur(8px);box-shadow:0 8px 30px rgba(0,0,0,.5);font-size:clamp(15px,2.2vw,18px);font-weight:600;line-height:1.7;text-align:center} .modal-top-bar{position:absolute;top:16px;right:20px;z-index:100000;display:flex;align-items:center;gap:10px} .modal-control,.image-close{width:44px;height:44px;padding:0;display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;color:#fff;background:rgba(255,255,255,.15);font-size:22px;line-height:1;cursor:pointer;backdrop-filter:blur(6px);transition:.25s ease} .modal-control:hover,.image-close:hover{background:rgba(255,255,255,.3);transform:scale(1.08)} #autoSoundBtn{background:rgba(255,255,255,.25);text-shadow:0 0 6px rgba(255,255,255,.8)} #autoSoundBtn.active{animation:musicPulse 1s infinite} .modal-control.autoplay-active{animation:autoplayPulse 1s infinite} .img-nav{position:absolute;top:50%;z-index:100000;padding:10px 14px;border:0;border-radius:50%;color:#fff;background:rgba(255,255,255,.15);font-size:28px;cursor:pointer;backdrop-filter:blur(6px);transform:translateY(-50%)} .img-nav.prev{left:20px}.img-nav.next{right:20px} #restartModalBtn{width:60px;height:60px;margin:10px auto 0;padding:0;display:none;align-items:center;justify-content:center;border:0;border-radius:50%;color:#fff;background:rgba(255,255,255,.15);font-size:1.4rem;cursor:pointer} #restartModalBtn::before{content:"🔄"} #slideTimer,.slide-timer{min-width:52px;padding:7px 10px;color:#fff;background:rgba(0,0,0,.45);border-radius:10px;font-size:16px;font-weight:700;text-align:center} /* INFOBOX */ .chrome-mic-info{position:fixed;left:50%;bottom:60px;z-index:999999;width:min(92%,480px);padding:12px 42px 12px 14px;display:flex;align-items:center;gap:12px;color:#fff;background:rgba(17,31,46,.96);border:1px solid rgba(255,255,255,.18);border-radius:16px;box-shadow:0 8px 30px rgba(0,0,0,.45);backdrop-filter:blur(10px);transform:translateX(-50%);animation:chromeInfoIn .35s ease} .chrome-mic-info-icon{flex:0 0 auto;font-size:26px} .chrome-mic-info-text{display:flex;flex-direction:column;gap:3px;font-size:13px;line-height:1.4} .chrome-mic-info-text strong{color:var(--accent2);font-size:14px} .chrome-mic-info-close{position:absolute;top:6px;right:8px;width:30px;height:30px;padding:0;display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;color:#fff;background:rgba(255,255,255,.1);font-size:19px;cursor:pointer} /* DOLNA NAWIGACJA */ .library-floating-nav{position:fixed;left:0;right:0;bottom:0;z-index:99998;width:100%;height:var(--story-bottom-nav-height);padding:2px 8px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:4px;background:rgba(30,46,61,.96);border-top:1px solid rgba(255,255,255,.12);box-shadow:0 -2px 8px rgba(0,0,0,.15)} .library-floating-btn{height:30px;min-height:0;padding:2px 8px;display:flex;align-items:center;justify-content:center;gap:4px;border:0;border-radius:7px;color:#fff;background:transparent;font:inherit;font-size:10px;font-weight:500;line-height:1;text-decoration:none;cursor:pointer} .library-floating-btn:hover{background:rgba(255,255,255,.1)} .library-floating-btn:disabled{opacity:.3;cursor:default} .library-floating-home{padding-inline:12px;background:var(--accent)} .library-floating-home:hover{background:#5595a5} .library-home-content{display:flex;align-items:center;gap:5px;white-space:nowrap} .nav-arrow{font-size:14px}.nav-icon{font-size:13px} #libraryNavigationMode{display:inline-flex;align-items:center;margin:0;padding:2px 6px;color:rgba(255,255,255,.92);background:rgba(255,255,255,.16);border-radius:5px;font-size:8px;line-height:1.2;white-space:nowrap} /* ANIMACJE */ .word-pulse{animation:softPulse .35s ease}.page-turn{animation:pageTurn .6s ease} @keyframes softPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}} @keyframes pageTurn{0%,100%{transform:rotateY(0);opacity:1}50%{transform:rotateY(-90deg);opacity:.3}} @keyframes zoomIn{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}} @keyframes musicPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}} @keyframes autoplayPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12);box-shadow:0 0 12px rgba(255,255,255,.6)}} @keyframes chromeInfoIn{from{opacity:0;transform:translateX(-50%) translateY(15px)}to{opacity:1;transform:translateX(-50%) translateY(0)}} /* MOBILE */ @media(max-width:700px){ :root{--story-header-height:132px;--story-bottom-nav-height:34px} header.story-top-header{min-height:var(--story-header-height);padding:10px 10px 14px;grid-template-columns:minmax(0,1fr) auto;gap:14px 8px} .story-header-logo{grid-column:1/-1;grid-row:1;padding:8px 13px;margin:0 auto 6px;border-radius:14px} .story-header-logo img{height:46px;max-width:175px} .story-mode-switch{grid-column:1;grid-row:2;gap:4px} .story-header-music{grid-column:2;grid-row:2} .story-mode-btn,.backgroundMusicBtn{padding:7px 9px;border-radius:10px;font-size:10.5px} #preIntro{padding:16px 10px} .preintro-container{margin:8px auto;padding:20px 13px} .preintro-container h1{font-size:1.35rem}.preintro-container p{font-size:15px} #intro{min-height:430px;padding:16px 12px} #intro .intro-screen{width:min(94%,430px);padding:22px 18px;gap:11px;border-radius:19px} #intro .intro-title{font-size:22px} .name-field{max-width:100%}.name-field label{font-size:12px} #story{padding:16px 10px 22px} .story-title{font-size:20px} .image-wrapper{width:96%}.story-image{height:auto;max-height:280px} #fragment,.progress-container,.info-row,.volume-container,.controls{width:96%} #fragment{min-height:115px;max-height:160px;padding:12px 8px;font-size:16px} .progress-thumb{width:26px;height:26px} .info-row{min-height:55px;flex-direction:column;justify-content:center;gap:3px} #status,#remaining{width:100%;min-width:0;text-align:center;font-size:12px} .controls{gap:5px}.controls button{min-width:0;padding:8px 5px;font-size:12px} .modal-top-bar{top:8px;right:8px}.modal-control,.image-close{width:36px;height:36px;font-size:18px} .img-nav{padding:7px 9px;font-size:18px}.img-nav.prev{left:5px}.img-nav.next{right:5px} .modal-text{font-size:16px;line-height:1.55} .chrome-mic-info{bottom:52px;width:calc(100% - 20px);padding:10px 38px 10px 12px;border-radius:14px} .library-floating-nav{padding:2px 4px;gap:2px} .library-floating-btn{height:28px;padding:2px 5px;font-size:9px} .library-floating-home{padding-inline:8px} #libraryNavigationMode{padding:1px 5px;font-size:7px} } @media(max-width:430px){ :root{--story-header-height:124px} header.story-top-header{min-height:var(--story-header-height);padding:8px 6px 12px;gap:12px 6px} .story-header-logo{padding:7px 11px;margin-bottom:5px;border-radius:13px} .story-header-logo img{height:40px;max-width:155px} .story-mode-btn{padding:6px;font-size:9.5px}.backgroundMusicBtn{padding:6px 7px;font-size:9.5px} #intro{min-height:400px;padding:12px 8px} #intro .intro-screen{width:94%;padding:18px 14px;gap:9px;border-radius:17px} #intro .intro-title{font-size:20px} #story{padding-inline:6px} .image-wrapper,#fragment,.progress-container,.info-row,.volume-container,.controls{width:98%} .story-image{max-height:250px}#fragment{font-size:15px} } @media(orientation:landscape) and (max-height:500px){ .modal-content{flex-direction:row;gap:20px} .image-modal img,.modal-text{width:50%;max-height:70vh} .modal-text{overflow-y:auto;font-size:15px;line-height:1.6} } /* ========================================================= DWA DOLNE PANELE — ZAWSZE RAZEM ========================================================= */ /* dolna nawigacja bajek */ .library-floating-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 99998; } /* przyciski aktualnej bajki */ .controls { position: fixed; left: 50%; bottom: var(--story-bottom-nav-height); transform: translateX(-50%); z-index: 99997; width: min(92%, 850px); margin: 0; padding: 8px 10px; background: rgba(20, 38, 55, 0.96); border: 1px solid rgba(255,255,255,0.10); border-bottom: none; border-radius: 14px 14px 0 0; box-shadow: 0 -5px 18px rgba(0,0,0,0.18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* zostawiamy miejsce, żeby treść nie chowaÅ‚a siÄ™ pod panelami */ #story { padding-bottom: calc( var(--story-bottom-nav-height) + 85px ); } @media (max-width: 700px) { .controls { bottom: var(--story-bottom-nav-height); width: 100%; padding: 6px 7px; gap: 5px; border-left: none; border-right: none; border-radius: 12px 12px 0 0; } .controls button { min-width: 0; padding: 8px 5px; font-size: 11px; } #story { padding-bottom: calc( var(--story-bottom-nav-height) + 78px ); } } .volume-slider-label { display: block; width: 100%; margin: 0 0 6px; color: rgba(255, 255, 255, 0.85); font-size: 12px; font-weight: 600; text-align: center; letter-spacing: 0.2px; } /* ========================================================= OBRAZEK W TRYBIE INTERAKTYWNYM ========================================================= */ .image-wrapper { position: relative; width: min(92%, 760px); margin: 0 auto; display: flex; justify-content: center; align-items: center; overflow: hidden; border-radius: 16px; background: rgba(0,0,0,.22); box-shadow: 0 10px 28px rgba(0,0,0,.35); cursor: pointer; } /* obraz zawsze dopasowany do okna */ .story-image { display: block; width: 100%; height: auto; max-width: 100%; object-fit: contain; border: 0; border-radius: 16px; box-shadow: none; opacity: 1; transition: opacity .35s ease, transform .35s ease; } .image-wrapper:hover .story-image { transform: scale(1.015); } /* ========================================================= ZNACZEK PLAY ========================================================= */ .zoom-icon { position: absolute; left: 14px; bottom: 14px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(10, 24, 40, .72); border: 1px solid rgba(255,255,255,.18); border-radius: 50%; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 4px 14px rgba(0,0,0,.35); font-size: 0; pointer-events: none; transition: transform .2s ease, background .2s ease; } /* play */ .zoom-icon::before { content: "▶"; margin-left: 2px; font-size: 18px; line-height: 1; } .image-wrapper:hover .zoom-icon { transform: scale(1.08); background: rgba(243,140,122,.82); } @media (max-width: 700px) { .image-wrapper { width: 96%; border-radius: 14px; } .story-image { width: 100%; height: auto; max-height: none; border-radius: 14px; } .zoom-icon { left: 10px; bottom: 10px; width: 38px; height: 38px; } .zoom-icon::before { font-size: 16px; } } .story-header-music { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; } .background-music-volume { display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%; } .background-music-volume span { color: rgba(255,255,255,.65); font-size: 9px; font-weight: 500; white-space: nowrap; } #backgroundMusicVolumeSlider { width: 65px; height: 3px; margin: 0; cursor: pointer; accent-color: rgba(255,255,255,.75); } @media (max-width: 700px) { .background-music-volume span { font-size: 8px; } #backgroundMusicVolumeSlider { width: 50px; } } /* ========================================================= MUZYKA W HEADERZE ========================================================= */ .story-header-music { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; } /* ========================================================= PANEL GŁOŚNOŚCI — DOMYŚLNIE SCHOWANY ========================================================= */ .background-music-volume { position: absolute; right: 0; bottom: calc(100% + 8px); width: 190px; padding: 28px 12px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; background: rgba(17, 31, 46, 0.97); border: 1px solid rgba(255,255,255,.14); border-radius: 13px; box-shadow: 0 8px 24px rgba(0,0,0,.30); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transform: translateY(5px); pointer-events: none; transition: opacity .2s ease, transform .2s ease, visibility .2s ease; } .background-music-volume.visible { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .background-music-volume-close { position: absolute; top: 5px; right: 6px; width: 24px; height: 24px; padding: 0; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; color: rgba(255,255,255,.85); background: rgba(255,255,255,.10); font-size: 17px; line-height: 1; cursor: pointer; } .background-music-volume-close:hover { background: rgba(255,255,255,.20); } /* ========================================================= PANEL WIDOCZNY ========================================================= */ .background-music-volume.visible { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } /* napis */ .background-music-volume span { color: rgba(255,255,255,.78); font-size: 10px; font-weight: 600; white-space: nowrap; } /* ========================================================= SLIDER ========================================================= */ #backgroundMusicVolumeSlider { width: 100%; height: 24px; margin: 0; cursor: pointer; accent-color: #62A4B4; } /* ========================================================= TELEFON ========================================================= */ @media (max-width: 700px) { .background-music-volume { right: 0; bottom: calc(100% + 7px); width: 170px; padding: 27px 11px 10px; border-radius: 12px; } .background-music-volume span { font-size: 9px; } #backgroundMusicVolumeSlider { width: 100%; /* większy obszar dotyku */ height: 32px; } } #backgroundMusicVolumeSlider::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #ffffff; cursor: pointer; box-shadow: 0 2px 7px rgba(0,0,0,.30); } #backgroundMusicVolumeSlider { -webkit-appearance: none; appearance: none; height: 5px; border-radius: 10px; background: linear-gradient( 90deg, #62A4B4, #F38C7A ); } @media (max-width: 700px) { #backgroundMusicVolumeSlider::-webkit-slider-thumb { width: 24px; height: 24px; } } /* ===================================================== HEADER — WYGODNIEJSZA WERSJA MOBILNA ===================================================== */ @media (max-width: 700px) { .story-top-header { min-height: 125px; padding: 12px 12px 14px; gap: 14px 10px; } /* ================================================= LOGO ================================================= */ .story-header-logo { padding: 7px 12px; margin-bottom: 5px; border-radius: 15px; } .story-header-logo img { height: 45px; max-height: 45px; max-width: 175px; } /* ================================================= LEWA STRONA — TRYBY ================================================= */ .story-mode-switch { gap: 6px; } .story-mode-btn { min-height: 42px; padding: 10px 12px; font-size: 12px; font-weight: 600; line-height: 1.15; border-radius: 12px; } /* ================================================= PRZYCISK MUZYKI ================================================= */ .backgroundMusicBtn { min-height: 42px; padding: 10px 13px; font-size: 12px; font-weight: 600; line-height: 1.15; border-radius: 12px; } /* ================================================= PANEL GŁOŚNOŚCI ================================================= */ .background-music-volume { min-width: 230px; padding: 16px 18px 17px; border-radius: 18px; gap: 10px; } #backgroundMusicVolumeLabel { font-size: 13px; font-weight: 600; padding-right: 30px; } /* ================================================= SUWAK — WIĘKSZY OBSZAR DOTYKU ================================================= */ #backgroundMusicVolumeSlider { width: 100%; height: 28px; cursor: pointer; } #backgroundMusicVolumeSlider::-webkit-slider-runnable-track { height: 7px; border-radius: 999px; } #backgroundMusicVolumeSlider::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -7.5px; border-radius: 50%; cursor: pointer; } #backgroundMusicVolumeSlider::-moz-range-track { height: 7px; border-radius: 999px; } #backgroundMusicVolumeSlider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; cursor: pointer; } /* ================================================= X — ZAMKNIĘCIE PANELU ================================================= */ .background-music-volume-close { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; top: 7px; right: 7px; padding: 0; font-size: 23px; font-weight: 400; line-height: 1; border-radius: 50%; cursor: pointer; } } /* ===================================================== BARDZO MAŁA KOMÓRKA ===================================================== */ @media (max-width: 430px) { .story-top-header { min-height: 120px; padding: 10px 8px 12px; gap: 12px 6px; } /* LOGO */ .story-header-logo { padding: 6px 10px; margin-bottom: 4px; } .story-header-logo img { height: 42px; max-height: 42px; max-width: 165px; } /* TRYBY */ .story-mode-switch { gap: 4px; } .story-mode-btn { min-height: 40px; padding: 9px 8px; font-size: 11px; border-radius: 11px; } /* MUZYKA */ .backgroundMusicBtn { min-height: 40px; padding: 9px 9px; font-size: 11px; border-radius: 11px; } /* PANEL GŁOŚNOŚCI */ .background-music-volume { min-width: 215px; padding: 15px 16px 16px; border-radius: 17px; } #backgroundMusicVolumeLabel { font-size: 12px; padding-right: 32px; } /* SUWAK */ #backgroundMusicVolumeSlider { height: 30px; } #backgroundMusicVolumeSlider::-webkit-slider-runnable-track { height: 7px; } #backgroundMusicVolumeSlider::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -8.5px; } #backgroundMusicVolumeSlider::-moz-range-track { height: 7px; } #backgroundMusicVolumeSlider::-moz-range-thumb { width: 24px; height: 24px; } /* X */ .background-music-volume-close { width: 36px; height: 36px; top: 6px; right: 6px; font-size: 24px; } } /* ===================================================== FLOATING — MUZYKA W TLE ===================================================== */ .story-floating-music { position: fixed; right: 18px; top: 145px; z-index: 99990; display: flex; flex-direction: column; align-items: flex-end; } /* przycisk floating */ .story-floating-music .backgroundMusicBtn { min-height: 44px; padding: 10px 15px; border-radius: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .story-floating-music .background-music-volume { position: absolute; right: 0; bottom: calc(100% + 10px); width: 220px; padding: 16px 16px 14px; display: flex; flex-direction: column; align-items: center; gap: 10px; background: rgba(17,31,46,.97); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; box-shadow: 0 8px 28px rgba(0,0,0,.32); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); opacity: 0; visibility: hidden; transform: translateY(6px); pointer-events: none; transition: opacity .2s ease, transform .2s ease, visibility .2s ease; } .story-floating-music .background-music-volume.visible { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } @media (max-width: 700px) { .story-floating-music { right: 8px; /* pod headerem */ top: 145px; } .story-floating-music .backgroundMusicBtn { min-height: 42px; padding: 9px 11px; font-size: 11px; border-radius: 13px; } .story-floating-music .background-music-volume { right: 0; bottom: calc(100% + 8px); width: 220px; padding: 16px 16px 14px; border-radius: 16px; } .background-music-volume-close { width: 36px; height: 36px; top: 6px; right: 6px; font-size: 24px; } #backgroundMusicVolumeSlider { width: 100%; } } @media (max-width: 700px) { .story-floating-music .background-music-volume { top: calc(100% + 8px); bottom: auto; } } /* ===================================================== PRAWA STRONA — DRUKOWANIE ===================================================== */ .story-header-print { display: flex; align-items: center; justify-content: flex-end; min-width: 0; position: relative; z-index: 2; } .story-print-btn { appearance: none; -webkit-appearance: none; min-height: 44px; padding: 9px 15px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: linear-gradient( 145deg, rgba(255,255,255,.09), rgba(255,255,255,.03) ); color: rgba(255,255,255,.92); font-family: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.10); transition: transform .2s ease, background .2s ease, box-shadow .2s ease; } .story-print-btn:hover { transform: translateY(-1px); background: linear-gradient( 145deg, rgba(255,255,255,.15), rgba(255,255,255,.05) ); box-shadow: 0 5px 14px rgba(0,0,0,.18); } @media (max-width: 700px) { .story-header-print { grid-column: 2; grid-row: 2; } .story-print-btn { min-height: 42px; padding: 10px 12px; font-size: 11.5px; border-radius: 12px; } } .story-print-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } @media (max-width: 430px) { .story-print-btn { min-height: 40px; padding: 9px 8px; font-size: 10.5px; } } /* ===================================================== PUBLICZNA STRONA BAJKI / WERSJA DO ZAKUPU ===================================================== */ .public-story-page { min-height: 100vh; background: linear-gradient( 135deg, #1e2e3d, #244056 ); color: #f6f4fb; } /* ===================================================== HERO ===================================================== */ .public-story-hero { position: relative; overflow: hidden; padding: 48px 24px 55px; } .public-story-inner { position: relative; z-index: 2; width: min(1120px, 100%); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); align-items: center; gap: 48px; } /* ===================================================== TYTUŁ ===================================================== */ .public-story-content h1 { max-width: 720px; margin: 16px 0 18px; font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1.08; letter-spacing: -.035em; color: #fff; } /* ===================================================== ETYKIETA ===================================================== */ .public-story-badge { display: inline-flex; align-items: center; padding: 8px 14px; border: 1px solid rgba(190, 150, 255, .30); border-radius: 999px; background: linear-gradient( 135deg, rgba(151, 105, 220, .22), rgba(91, 148, 205, .13) ); color: #f2eaff; font-size: .86rem; font-weight: 700; box-shadow: 0 5px 18px rgba(102, 72, 160, .12); backdrop-filter: blur(12px); } /* ===================================================== OPIS POD TYTUŁEM ===================================================== */ .public-story-lead { max-width: 680px; margin: 0 0 22px; color: rgba(255,255,255,.76); font-size: 1.07rem; line-height: 1.7; } /* ===================================================== CZTERY CECHY BAJKI ===================================================== */ .public-story-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 24px; } .public-story-feature { display: flex; align-items: center; gap: 12px; padding: 13px; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; background: linear-gradient( 145deg, rgba(255,255,255,.065), rgba(255,255,255,.025) ); backdrop-filter: blur(12px); } .public-story-feature-icon { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border-radius: 13px; font-size: 1.25rem; } /* KOLORY IKON */ .public-story-feature:nth-child(1) .public-story-feature-icon { background: rgba(84,166,220,.18); } .public-story-feature:nth-child(2) .public-story-feature-icon { background: rgba(245,190,92,.16); } .public-story-feature:nth-child(3) .public-story-feature-icon { background: rgba(170,112,220,.18); } .public-story-feature:nth-child(4) .public-story-feature-icon { background: rgba(230,120,160,.16); } /* TEKST CECH */ .public-story-feature strong { display: block; margin-bottom: 3px; color: #fff; font-size: .93rem; } .public-story-feature div > span { display: block; color: rgba(255,255,255,.60); font-size: .78rem; line-height: 1.4; } /* ===================================================== CTA / PRZYCISK ZAKUPU ===================================================== */ .public-story-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; } .public-story-buy { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 14px 22px; border: 1px solid rgba(193,157,255,.38); border-radius: 14px; background: linear-gradient( 135deg, rgba(123,88,190,.90), rgba(76,132,184,.90) ); color: #fff; text-decoration: none; font-size: 14px; font-weight: 800; box-shadow: 0 10px 28px rgba(74,71,150,.30), inset 0 1px 0 rgba(255,255,255,.20); transition: transform .2s ease, background .2s ease, box-shadow .2s ease; } .public-story-buy:hover { transform: translateY(-2px); color: #fff; background: linear-gradient( 135deg, rgba(143,101,214,.96), rgba(84,151,207,.96) ); box-shadow: 0 14px 32px rgba(74,71,150,.38); } .public-story-access-note { color: rgba(255,255,255,.48); font-size: .77rem; } /* ===================================================== OBRAZ BAJKI ===================================================== */ .public-story-image-card { position: relative; overflow: hidden; padding: 9px; border: 1px solid rgba(255,255,255,.10); border-radius: 24px; background: rgba(255,255,255,.05); box-shadow: 0 22px 70px rgba(0,0,0,.32); backdrop-filter: blur(18px); } .public-story-image-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; } .public-story-image-label { position: absolute; left: 24px; bottom: 24px; padding: 9px 13px; border: 1px solid rgba(255,255,255,.17); border-radius: 999px; background: rgba(10,24,38,.75); color: #fff; font-size: 12px; font-weight: 600; backdrop-filter: blur(12px); } /* ===================================================== SEKCJE ===================================================== */ .public-story-about, .public-story-modes { padding: 45px 24px; } .public-story-about { background: rgba(255,255,255,.025); border-top: 1px solid rgba(255,255,255,.05); border-bottom: 1px solid rgba(255,255,255,.05); } .public-story-section-inner { width: min(950px, 100%); margin: 0 auto; } /* ===================================================== ETYKIETY SEKCJI ===================================================== */ .public-story-section-label { display: block; margin-bottom: 8px; color: #bfa5ef; font-size: .75rem; font-weight: 800; letter-spacing: .13em; } /* ===================================================== NAGŁÓWKI SEKCJI ===================================================== */ .public-story-section-inner h2 { max-width: 780px; margin: 0 0 16px; color: #fff; font-size: clamp(1.6rem, 3vw, 2.35rem); line-height: 1.12; } .public-story-section-inner > p { max-width: 800px; margin: 0; color: rgba(255,255,255,.68); font-size: 16px; line-height: 1.75; } /* ===================================================== DWA TRYBY CZYTANIA ===================================================== */ .public-story-mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; margin-top: 24px; } .public-story-mode-card { padding: 22px; border: 1px solid rgba(255,255,255,.08); border-radius: 18px; box-shadow: 0 12px 30px rgba(0,0,0,.15); } /* TRYB KLASYCZNY */ .public-story-mode-card:first-child { border-color: rgba(241,191,102,.17); background: linear-gradient( 145deg, rgba(222,169,82,.10), rgba(255,255,255,.025) ); } /* TRYB INTERAKTYWNY */ .public-story-mode-card:last-child { border-color: rgba(174,125,226,.20); background: linear-gradient( 145deg, rgba(139,93,195,.13), rgba(73,125,177,.05) ); } /* IKONY TRYBÓW */ .public-story-mode-icon { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 14px; border-radius: 14px; font-size: 1.4rem; } .public-story-mode-card:first-child .public-story-mode-icon { background: rgba(236,180,83,.17); } .public-story-mode-card:last-child .public-story-mode-icon { background: rgba(166,111,218,.18); } /* TEKST TRYBÓW */ .public-story-mode-card h3 { margin: 0 0 8px; color: #fff; font-size: 20px; } .public-story-mode-card p { margin: 0; color: rgba(255,255,255,.62); font-size: 14px; line-height: 1.6; } /* ===================================================== DOLNY CTA ===================================================== */ .public-story-bottom-cta { padding: 5px 24px 55px; } .public-story-bottom-box { width: min(900px, 100%); margin: 0 auto; padding: 38px 35px; border: 1px solid rgba(164,132,214,.18); border-radius: 24px; text-align: center; background: radial-gradient( circle at 50% 0%, rgba(130,91,190,.14), transparent 55% ), linear-gradient( 145deg, rgba(255,255,255,.07), rgba(255,255,255,.025) ); box-shadow: 0 24px 70px rgba(0,0,0,.20); } .public-story-bottom-box h2 { margin: 0 0 14px; color: #fff; font-size: clamp(28px, 4vw, 40px); } .public-story-bottom-box p { max-width: 650px; margin: 0 auto 22px; color: rgba(255,255,255,.65); font-size: 15px; line-height: 1.65; } /* ===================================================== TABLET ===================================================== */ @media (max-width: 800px) { .public-story-hero { padding: 28px 18px 38px; } .public-story-inner { grid-template-columns: 1fr; gap: 28px; } .public-story-content h1 { font-size: clamp(34px, 9vw, 48px); } .public-story-lead { font-size: 16px; } .public-story-image-column { order: -1; } .public-story-image-card { width: min(520px, 100%); margin: 0 auto; } .public-story-about, .public-story-modes { padding: 36px 18px; } .public-story-mode-grid { margin-top: 18px; } .public-story-bottom-cta { padding: 0 18px 40px; } } /* ===================================================== TELEFON ===================================================== */ @media (max-width: 560px) { .public-story-features, .public-story-mode-grid { grid-template-columns: 1fr; } .public-story-features { gap: 8px; } .public-story-feature { padding: 11px 12px; } .public-story-mode-card { padding: 18px; } .public-story-bottom-box { padding: 30px 18px; } .public-story-buy { width: 100%; padding-left: 15px; padding-right: 15px; text-align: center; } } /* ========================================================= MOBILE – WYDRUKUJ + JĘZYK W OSOBNYM WIERSZU ========================================================= */ @media (max-width: 700px) { :root { --story-header-height: 175px; } header.story-top-header { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; height: auto; min-height: 0; } /* LOGO */ .story-header-logo { grid-column: 1 / -1; grid-row: 1; } /* TRYBY */ .story-mode-switch { grid-column: 1 / -1; grid-row: 2; width: 100%; display: flex; justify-content: center; gap: 6px; } /* WYDRUKUJ + JĘZYK */ .story-header-print { grid-column: 1 / -1; grid-row: 3; width: 100%; display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 2px; } .story-header-print .story-print-btn { flex: 1; max-width: 180px; display: flex; align-items: center; justify-content: center; min-height: 36px; padding: 7px 8px; font-size: 10.5px; line-height: 1.15; text-align: center; white-space: nowrap; } } /* ========================================================= FLOATING MUZYKA – POŁOWA EKRANU ========================================================= */ .story-floating-music { position: fixed; right: 12px; top: 50%; transform: translateY(-50%); z-index: 99996; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; } .story-floating-music .backgroundMusicBtn { min-height: 38px; padding: 8px 14px; border: 1px solid rgba(255,255,255,.18); border-radius: 20px; color: #fff; background: rgba(20, 38, 55, .94); font-size: 11px; font-weight: 600; box-shadow: 0 5px 18px rgba(0,0,0,.30); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); white-space: nowrap; } /* DELIKATNIE MNIEJSZY OBRAZEK BAJKI */ .image-wrapper { width: min(88%, 650px); } .story-image { max-width: 650px; } @media (max-width: 700px) { .image-wrapper { width: 90%; max-width: 520px; } .story-image { width: 100%; max-width: 520px; } } /* ===================================================== PUBLICZNA STRONA BAJKI DOPASOWANIE DO KOLORÓW STRONY GŁÓWNEJ WKLEJ NA SAMYM DOLE story-style-clean.css ===================================================== */ /* ===================================================== TŁO PUBLICZNEJ STRONY ===================================================== */ .public-story-page { min-height: 100vh; background: linear-gradient( 135deg, #1e2e3d, #244056 ); color: #f6f4fb; } /* ===================================================== BADGE NAD TYTUŁEM ===================================================== */ .public-story-badge { display: inline-flex; align-items: center; padding: 8px 14px; border: 1px solid rgba(98, 164, 180, .38); border-radius: 999px; background: rgba(98, 164, 180, .16); color: #dff5f8; font-size: .86rem; font-weight: 700; box-shadow: 0 5px 18px rgba(98, 164, 180, .10); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* ===================================================== GŁÓWNY PRZYCISK ZAKUPU ===================================================== */ .public-story-buy { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 14px 22px; border: none; border-radius: 14px; background: #F38C7A; color: #ffffff; text-decoration: none; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 5px 14px rgba(243, 140, 122, .28); transition: transform .2s ease, background .2s ease, box-shadow .2s ease; } .public-story-buy:hover { transform: translateY(-2px); background: #e77f6d; color: #ffffff; box-shadow: 0 8px 20px rgba(243, 140, 122, .38); } .public-story-buy:active { transform: translateY(0); box-shadow: 0 3px 10px rgba(243, 140, 122, .28); } /* ===================================================== ETYKIETY SEKCJI ===================================================== */ .public-story-section-label { color: #62A4B4; font-weight: 800; letter-spacing: .13em; } /* ===================================================== KARTY CECH ===================================================== */ .public-story-feature { border: 1px solid rgba(255,255,255,.09); background: linear-gradient( 145deg, rgba(255,255,255,.07), rgba(255,255,255,.025) ); box-shadow: 0 5px 18px rgba(0,0,0,.08); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* ===================================================== IKONY CECH KOLORY ZE STRONY GŁÓWNEJ ===================================================== */ .public-story-feature:nth-child(1) .public-story-feature-icon { background: rgba(98, 164, 180, .20); } .public-story-feature:nth-child(2) .public-story-feature-icon { background: rgba(253, 202, 101, .18); } .public-story-feature:nth-child(3) .public-story-feature-icon { background: rgba(164, 210, 218, .18); } .public-story-feature:nth-child(4) .public-story-feature-icon { background: rgba(243, 140, 122, .18); } /* ===================================================== KARTA Z OBRAZKIEM ===================================================== */ .public-story-image-card { border: 1px solid rgba(98, 164, 180, .16); background: rgba(255,255,255,.045); box-shadow: 0 22px 60px rgba(0,0,0,.25); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } /* ===================================================== ETYKIETA NA OBRAZKU ===================================================== */ .public-story-image-label { border: 1px solid rgba(98,164,180,.30); background: rgba(30,46,61,.84); color: #ffffff; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* ===================================================== SEKCJA "O BAJCE" ===================================================== */ .public-story-about { background: rgba(255,255,255,.025); border-top: 1px solid rgba(98,164,180,.10); border-bottom: 1px solid rgba(98,164,180,.10); } /* ===================================================== LINKI NA PUBLICZNEJ STRONIE ===================================================== */ .public-story-page a:not(.public-story-buy) { color: #62A4B4; } .public-story-page a:not(.public-story-buy):hover { color: #A4D2DA; } /* ===================================================== TELEFON ===================================================== */ @media (max-width: 700px) { .public-story-buy { width: 100%; min-height: 50px; padding: 13px 18px; font-size: 14px; border-radius: 13px; } } /* ===================================================== ZŁOTE AKCENTY — PUBLICZNA STRONA BAJKI ===================================================== */ /* Małe nagłówki nad sekcjami */ .public-story-section-label { color: #FDCA65; font-weight: 800; letter-spacing: .13em; text-shadow: 0 2px 10px rgba(253, 202, 101, .15); } /* Badge nad głównym tytułem */ .public-story-badge { color: #FFE3A3; border: 1px solid rgba(253, 202, 101, .35); background: rgba(253, 202, 101, .10); box-shadow: 0 5px 18px rgba(253, 202, 101, .08); } /* Delikatny złoty akcent przy informacji pod zakupem */ .public-story-access-note { color: rgba(255, 227, 163, .72); } /* ===================================================== CTA PUBLICZNEJ STRONY BAJKI ===================================================== */ .public-story-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 26px; } .public-story-buttons { display: flex; flex-wrap: wrap; gap: 12px; } /* DARMOWE BAJKI */ .public-story-free { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 14px 22px; border: 1px solid rgba(98, 164, 180, .55); border-radius: 14px; background: rgba(98, 164, 180, .14); color: #ffffff !important; text-decoration: none; font-size: 14px; font-weight: 700; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; } .public-story-free:hover { transform: translateY(-2px); background: #62A4B4; color: #ffffff !important; box-shadow: 0 8px 20px rgba(98, 164, 180, .25); } /* CENA DOSTĘPU */ .public-story-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; color: rgba(255,255,255,.75); font-size: 14px; } .story-access-price::before { content: "24,99 zł"; color: #FDCA65; font-size: 21px; font-weight: 800; } /* MOBILE */ @media (max-width: 700px) { .public-story-buttons { width: 100%; flex-direction: column; } .public-story-free, .public-story-buy { width: 100%; box-sizing: border-box; } } /* ===================================================== CENA I CZAS DOSTĘPU ZMIENIASZ TYLKO TUTAJ ===================================================== */ .story-access-price::before { content: "24,99 zł"; color: #FDCA65; font-size: 21px; font-weight: 800; } /* POLSKI */ .story-access-duration[data-lang="pl"]::before { content: "• dostęp na 3 miesiące"; } /* ANGIELSKI */ .story-access-duration[data-lang="en"]::before { content: "• access for 3 months"; }