/* ====================== RESET & BASE STYLES ====================== */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { /* Light mode (default) */ --background-primary: #ffffff; --surface: #fffbf9; --text-primary:#252525; --text-secondary:#6c757d; --surface-1:#fff; --surface-2:#fffbf9; --text-dark-1:#252525; --text-dark-2:#6c757d; --text-light-1:#fff; --text-light-2:#d3d3d3; --link-dark-1:#1d1d1d; --link-dark-2:#666666; --pwendier-color:#0061B0; --accent: #4f46e5; --accent-hover: #4338ca; --border: #e0e0e0; /* Fluid spacing scale (based on viewport width) */ --spacing-xxs: max(0.3rem, calc(40 / 1440 * 100vw)); --spacing-xs: max(1rem, calc(70 / 1440 * 100vw)); --spacing-sm: max(2rem, calc(96 / 1440 * 100vw)); --spacing-md: max(2.5rem, calc(120 / 1440 * 100vw)); --spacing-lg: max(4rem, calc(160 / 1440 * 100vw)); --spacing-xl: max(7.5rem, calc(200 / 1440 * 100vw)); --margin-mobile:1.25rem; } html {overflow-x: hidden;scroll-behavior: smooth;height:100%} body {font-family: 'Satoshi-Variable';color: var(--text-primary);font-size:16px;font-weight:400;background-color:var(--background-primary);line-height:1.6;overflow-x: hidden;-webkit-font-smoothing: antialiased;} body, html {cursor:default;width:100%;height:100%;} body.menu-active {overflow:hidden;position:fixed;width:100%;} div, p, span {cursor:default;} a, button {cursor:pointer;} .filterWhite{filter: invert(100%) sepia(64%) saturate(0%) hue-rotate(109deg) brightness(104%) contrast(106%);} /*h1 {font-size:clamp(2.5rem, calc(0rem + var(--scale-h1)), 6rem);line-height: 1;letter-spacing: -0.03em;font-weight: 900;margin: 0.5em 0;} @media (min-width:1440px){h1{font-size:clamp(6rem, 6.67vw, 10.71rem)}} h2 {font-size:clamp(2rem, calc(0.0625rem + var(--scale-h2)), 4rem);line-height:1.1;font-weight:800;margin:0.5em 0;} @media (min-width:1440px){h2{font-size: clamp(4rem, 3.46vw, 7.14rem);}} h3 {font-size:clamp(1.7rem, calc(0.1249rem + var(--scale-h3)), 3rem);line-height:1.15;font-weight:700;} @media (min-width:1440px){h3{font-size: clamp(3rem, 2.92vw, 5.36rem);}} h4 {font-size:clamp(1.4rem, calc(0rem + var(--scale-h4)), 2.25rem);line-height:1.2;font-weight:600;} @media (min-width:1440px){h4{font-size: clamp(2.25rem, 1.75vw, 4rem);}} h5 {font-size: clamp(1.2rem, calc(0rem + var(--scale-h5)), 1.75rem);line-height:1.3;font-weight:500;} @media (min-width:1440px){h5{font-size: clamp(1.75rem, 1.25vw, 3.125rem);}} h6 {font-size: clamp(0.8rem, 1vw, 1.375rem);line-height:1.4;font-weight:500;text-transform:uppercase;letter-spacing:0.05em;}*/ /*@media (min-width:1440px){h6{font-size: clamp(1.375rem, 0.1vw, 1.5125rem);}}*/ h1 {font-size:2.75rem;line-height:1.3;letter-spacing:0.8px;font-weight:900;margin:0 0 20px 0;} h2 {font-size:2.187rem;line-height:1.25;font-weight:850;margin:0 0 18px;letter-spacing:0.7px;} h3 {font-size:1.75rem;line-height:1.2;font-weight:800;margin:0 0 16px;letter-spacing:0.6px;} h4 {font-size:1.375rem;line-height:1.15;font-weight:750;margin:0 0 14px;letter-spacing:0.5px;} h5 {font-size:1.125rem;line-height:1.1;font-weight:700;margin:0 0 12px;letter-spacing:0.4px;} h6 {font-size:0.875rem;line-height:1;font-weight:600;text-transform:uppercase;letter-spacing:0.3px;margin:0 0 10px;} h2.panel-heading{font-family:'Sentient-VariableItalic';font-size:2rem;font-weight:520;letter-spacing:0.5px;line-height:1.6;padding:0;margin:0 0 16px 0;font-style:italic} h1.page-heading{font-family:'CrimsonPro-VariableItalic';font-size:4rem;font-weight:500;letter-spacing:0.5px;line-height:1.1;padding:0;margin:0;color:#fff;font-style:italic} h6.title-tag{text-transform:uppercase;font-family:'Satoshi-Variable';font-weight:650;letter-spacing:1.5px;line-height:1;padding:0;margin:0;color:#fff;text-align:left} h6.panel-title-tag{font-size:1rem;font-weight:500;text-transform:uppercase;font-family:'Satoshi-Variable';letter-spacing:1.5px;line-height:1;padding:0;margin:0} /* Paragraphs (main body text) */ p {font-size:1.125rem;line-height:1.6;margin:0 0 1.875rem 0;} .text-smaller{font-size:70%;} .text-larger{font-size:130px;} .tag{font-size:0.8rem;text-transform:uppercase;} a:link, a:active, a:visited{color:var(--pwendier-color);text-decoration:none;transition:color 0.2s;} a:hover{color:var(--pwendier-color);text-decoration:underline;transition:color 0.2s;} button, a, a:hover{cursor:pointer !important} /* ====================== LAYOUT CONTAINERS ====================== */ .scroll-container {scroll-snap-type:y mandatory;height:100vh;overflow-y:scroll;-webkit-overflow-scrolling:touch;width:100vw;overflow-x:hidden;scroll-behavior: smooth;} .wrapper-container {scroll-snap-type:none;height:auto;overflow-y:scroll;-webkit-overflow-scrolling:touch;width:100vw;overflow-x:hidden;} .base-wrapper{position:relative;display:block;max-width:1100px;margin:200px auto 50px;padding:0 50px;font-weight:400;color:var(--text-primary);}/*eliminate*/ @media (max-width:1090px){.base-wrapper{margin:var(--spacing-xl) auto var(--spacing-lg);padding:0}}/*eliminate*/ .base-800{max-width:800px;margin:0 auto} .base-900{max-width:900px;margin:0 auto} .base-1100{max-width:1100px;margin:0 auto} .fullwidth-wrapper{position:relative;display:block;margin:0;padding:0;width:100%} .content{position:relative;display:block;width:100%;padding:0;margin:0}/*eliminate*/ .wrapper-outer{position:relative;display:block;width:100%;height:auto;overflow:auto;} .inner-col {position:relative;display:flex;flex-direction:column;gap:30px;width:100%} .inner-row {position:relative;display:flex;flex-direction:row;gap:30px;width:100%} .container{position:relative;display:block;width:100%;height:auto;padding:65px 8% 65px;margin:0 auto} @media(max-width:884px){.container{padding:50px 4.6% 50px}} @media(max-width:768px){.container{padding:50px 4.2% 50px}} @media(max-width:700px){.container{padding:50px 4% 50px}}/*added last*/ .container-full{position:relative;display:block;width:100%;height:100%;padding:65px 8% 65px;margin:0 auto} @media(max-width:884px){.container-full{padding:50px 4.6% 50px}} @media(max-width:768px){.container-full{padding:50px 4.2% 50px}} @media(max-width:600px){.container-full{padding:50px 4% 50px}} .section{position:relative;width:100%} img.filterBlue{filter: invert(20%) sepia(67%) saturate(4054%) hue-rotate(240deg) brightness(83%) contrast(95%);} img.filterWhite{filter: invert(100%) sepia(64%) saturate(0%) hue-rotate(109deg) brightness(104%) contrast(106%);} .is-active {background-color: #f0f0f0;} #working-table { scroll-margin-top:163px; /* Adjust this to match your header height */ } /* ====================== PRELOADER ====================== */ .preloader {position:fixed;top:0;left:0;width:100%;height:100%;background-color:#fffbf9;display:flex;justify-content:center;align-items:center;z-index:9999;opacity:1;visibility:visible;transition:opacity 0.8s cubic-bezier(0.65, 0, 0.35, 1), visibility 0.8s linear;} .preloader-content {display:flex;flex-direction:column;align-items:center;transform:translateY(-20px);} .preloader-logo {width:clamp(80px, 13vw, 120px);margin-bottom:30px;will-change:transform;} .preloader-logo-img {width:100%;height:auto;filter:invert(100%) sepia(64%) saturate(0%) hue-rotate(109deg) brightness(104%) contrast(106%);opacity:0.9;transform:translateZ(0);} .preloader-logo-img-dark {width:100%;height:auto;opacity:0.9;transform:translateZ(0);margin-left:12%} .preloader-progress {width:clamp(220px, 30vw, 260px);height:2px;position:relative;} .progress-line {position:absolute;width:100%;height:100%;background-color:rgba(255, 255, 255, 0.15);border-radius:2px;} .progress-line-dark {position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.15);border-radius:2px;} @keyframes progressAnimation {0% {width: 0;} 100% {width:100%;}} .progress-active {position:absolute;width:0;height:100%;background-color:white;border-radius:2px;animation:progressAnimation 2.4s cubic-bezier(0.65, 0, 0.35, 1) forwards;transform-origin:left center;} .progress-active-dark {position:absolute;width:0;height:100%;background-color:#000;opacity:0.6;border-radius:2px;animation:progressAnimation 2.4s cubic-bezier(0.65, 0, 0.35, 1) forwards;transform-origin:left center;} .preloader.hidden {opacity:0;visibility:hidden;} .preloader.hidden {pointer-events:none;} /* ====================== STICKY HEADER ====================== */ .sticky-header{position:fixed;top:0;left:0;width:100%;padding:30px 60px 10px;z-index:108;display:flex;justify-content:flex-end;} @media (max-width:768px){.sticky-header{padding:10px 50px 10px 55px;}} @media (max-width:600px){.sticky-header{padding:10px 50px 10px 30px;}} .pageEpisode .sticky-header{padding:40px 30px;gap:20px;width:100px;top:0;right:70px;left:unset;z-index:99;} .logo-container{z-index:100;position:fixed;top:36px;left:30px;opacity:1;transition:opacity 0.3s;transition-delay:0.5s;width:calc(100% - 50px)} @media (max-width:768px){.logo-container{top:20px;left:20px}} @media (max-width:600px){.logo-container{top:23px;left:20px}} @media (max-width:450px){.logo-container{top:25px;left:20px}} @media (max-width:400px){.logo-container{top:28px;left:20px}} .logo-container a{display:block;line-height:1;} .logo-container img{height:50px;width:auto;position:relative;filter: invert(20%) sepia(67%) saturate(4054%) hue-rotate(240deg) brightness(83%) contrast(95%);} @media (max-width:768px){.logo-container img{height:40px;}} @media (max-width:600px){.logo-container img{height:34px;}} @media (max-width:450px){.logo-container img{height:30px;}} @media (max-width:400px){.logo-container img{height:24px;}} .logo-container img.logo-light{filter:invert(100%) sepia(64%) saturate(0%) hue-rotate(109deg) brightness(104%) contrast(106%);} .logo-container img.logo-dark{filter:none;} .logo-container .logo-light{color:#fff;} .logo-container .logo-dark{color:#000;} .logo-container img.logo-color.filterWhite{filter:invert(100%) sepia(64%) saturate(0%) hue-rotate(109deg) brightness(104%) contrast(106%);} .logo-text{color:#fff;font-family:'Author-Variable';font-weight:400;font-size:1.2rem;width:100px;letter-spacing:1px;text-transform:uppercase;line-height:1.2} @media(max-width:768px){.logo-text{display:none;}} .header-inner{width:100%;display:flex;align-items:center;} .header-left{width:40%;float:left;display:flex;align-items:center;} .header-right{width:60%;float:right} @media (max-width:768px){.header-right{display:none;}} .header-logo{width:70px;height:auto;display:flex;align-items:center;} @media (max-width:768px){.header-logo{width:46px;}} .header-logo img{width:100%;height:auto} .header-links{display:flex;justify-content:flex-end;margin-right:80px;font-size:1.2rem;font-weight:400;font-family:"Sentient-Variable";align-items:center} .header-links a{padding:0 18px;text-transform:capitalize;} .header-links a:link, .header-links a:active, .header-links a:visited{color:#fff;text-decoration:none;transition:color 0.2s;} .header-links a:hover{color:#fff;text-decoration:underline;transition:color 0.2s;} .header-links.element-cBlack a:link, .header-links.element-cBlack a:active, .header-links.element-cBlack a:visited{color:#000;text-decoration:none;transition:color 0.2s;} .header-links.element-cBlack a:hover{color:#000;text-decoration:underline;transition:color 0.2s;} .header-links.element-cWhite a:link, .header-links.element-cWhite a:active, .header-links.element-cWhite a:visited{color:#fff;text-decoration:none;transition:color 0.2s;} .header-links.element-cWhite a:hover{color:#fff;text-decoration:underline;transition:color 0.2s;} .header-links a:hover{text-decoration:underline;transition:color 0.2s;} .logo-box{position:relative;top:0;left:0;width:100%;height:auto;z-index:90;} .logo-wrapper {display:flex;align-items:center;} .animated-logo.animated-img {width:100%;height:auto;display:block;} .logo-light .animated-logo {filter:invert(100%) sepia(64%) saturate(0%) hue-rotate(109deg) brightness(104%) contrast(106%);} .logo-dark .animated-logo{filter:none} .logo-light a.animated-logo.animated-link{color:#fff;filter:none;} .logo-dark a.animated-logo.animated-link{color:#000;filter:none;} .home.menu-active .logo-light a.animated-logo.animated-link{pointer-events:none;} .home.menu-active .logo-dark a.animated-logo.animated-link{pointer-events:none;} .home .logo-light .menu-line, .logo-light .menu-line{background:#fff;filter:none;} .home .logo-dark .menu-line, .logo-dark .menu-line{background:#000;filter:none;} .scrolled .logo-wrapper {position:fixed;top:20px;left:30px;right:auto;width:auto;height:54px;transform:none !important;animation:none !important;margin:0;padding:0;} @media (max-width:600px){ .logo-wrapper {top:50px;} } /* ====================== MENU SYSTEM ====================== */ /* --- Menu button --- */ .menu-btn{position:relative;display:inline-block;margin-left:20px} .menu-btn.button-fixed{position:fixed;top:72px;right:60px;z-index:120;} @media (max-width:768px){.menu-btn.button-fixed{top:20px;right:50px}} @media (max-width:600px){.menu-btn.button-fixed{top:20px;right:20px}} .menu-toggle {background:transparent;border:none;cursor:pointer;width:40px;height:40px;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:111;padding:0;overflow:hidden;top:40px;right:30px;gap:12px} @media (max-width:768px){.menu-toggle{gap:8px;top:20px;right:20px}} .menu-line {height:2px;width:32px;transition: all 0.3s ease;background: var(--text-primary)} @media (max-width:768px){.menu-line{width:28px}} .menu-toggle.menuBC .menu-line{background:var(--text-primary)} .menu-toggle.menuWC .menu-line{background:#fff} .menu-toggle.active .menu-line{background:#212529;} .menu-toggle.active .menu-line:first-child {transform: translateY(7px) rotate(45deg);} @media (max-width:768px){.menu-toggle.active .menu-line:first-child{transform: translateY(5px) rotate(45deg);}} .menu-toggle.active .menu-line:last-child {transform: translateY(-7px) rotate(-45deg);} @media (max-width:768px){.menu-toggle.active .menu-line:last-child{transform: translateY(-5px) rotate(-45deg);}} .home .menu-line {background: #fff} .menu-toggle.s-peas .menu-line, .menu-toggle.s-gree .menu-line, .menu-toggle.s-fort .menu-line {background:#fff;} .menu-toggle.s-peas.active .menu-line, .menu-toggle.s-gree.active .menu-line, .menu-toggle.s-fort.active .menu-line {background:var(--text-primary);} /* --- Overlay menu --- */ .overlay-menu {position:fixed;top:-100vh;left:0;right:0;bottom:0;width:100%;height:51vh;background:#fff;z-index:109;will-change:top;overflow-y:unset;opacity:0;transition:top 0.9s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.4s ease;box-shadow:0 6px 10px rgba(0, 0, 0, 0.4);min-height:612px} @media (max-width:768px){.overlay-menu {height:100vh;}} @media (max-height:650px){.overlay-menu {height:100vh;}} .overlay-menu.active {top:0;opacity: 1;} .landing .overlay-menu{backdrop-filter:blur(10px)} .landing .overlay-menu.active ~ .scroll-indicator {opacity:0;pointer-events:none;} .menu-container {padding:130px 0 30px;height:100%;display:block;position:relative;} @media (max-width:768px){.menu-container{padding:100px 0 40px}} .menu-container-inner{position: relative;display:block;width:100%;margin:0;height:100%;padding:20px} @media (max-width:768px){.menu-container-inner{padding:10px 1px}} .menu-wrapper{width:100%;display:flex;align-items:flex-start;height:100%;overflow-y:auto;padding:0 40px} .menu-wrapper::after {content: '';position:absolute;bottom:0;left:0;right:0;height:50px;/* Shadow fade */background:linear-gradient(to bottom,transparent,white 90%);pointer-events: none;} .menu-lists{width:calc(100% - 470px);display:flex;gap:30px;flex-wrap:nowrap;justify-content:flex-start;align-content:flex-start;padding-right:80px;margin-bottom:50px} @media (max-width:1230px){.menu-lists{width:calc(100% - 224px);}} @media (max-width:1023px){.menu-lists{gap:30px;width:calc(100% - 180px);padding-right:40px}} @media (max-width:900px){.menu-lists{padding:0 0 40px 0;width:100%}} @media (max-width:650px){.menu-lists{flex-direction:column;gap:0}} .menu-list{width:260px;} @media (max-width:768px){.menu-list{width:400px}} @media (max-width:600px){.menu-list{width:100%}} .menu-list ul{list-style:none;} .menu-list ul li{padding:2px 20px 0 0;text-transform:capitalize;line-height:1.7;font-size:1rem;font-weight:520} .menu-list ul li.menu-heading{padding:2px 0 0;/*border-bottom:1px solid #bbb;*/} /*.menu-list ul li.menu-heading:hover{border-bottom:1px solid #000;}*/ .menu-list ul li.menu-heading.menu-lone-heading{margin-bottom:25px} .menu-list ul li.menu-heading.menu-lone-heading.home-link{display:none;} @media (max-width:768px){.menu-list ul li.menu-heading.menu-lone-heading.home-link{display:inline;}} .menu-list ul li.mlink-bottom{margin-bottom:16px} .menu-list ul li.mlink-top{margin-top:0} /*@media (max-width:768px){.menu-list ul li.menu-list-heading{padding:6px 0 6px;}} .menu-list ul li:nth-of-type(2){padding-top:10px} @media (max-width:768px){.menu-list ul li:nth-of-type(2){padding-top:6px}}*/ .menu-list li.menu-heading a{font-size:1rem;text-transform:capitalize;} @media (max-width:768px){.menu-list li.menu-list-heading a{font-style:normal}} .menu-list li.menu-heading a:link, .menu-list li.menu-heading a:active, .menu-list li.menu-heading a:visited{color:var(--link-dark-1);font-weight:700} .menu-list li.mlink a:link, .menu-list li.mlink a:active, .menu-list li.mlink a:visited{color:var(--link-dark-2);font-weight:520;} .menu-list li.menu-heading a:hover, .menu-list li.mlink a:hover{color:#000;} .menu-list li.mlink a{font-size:1rem;} @media (max-width:768px){.menu-list li.mlink a{font-size:1.16rem;} } .menu-features{width:450px;display:flex;gap:30px;justify-content:flex-end;} @media (max-width:1230px){.menu-features{width:210px;gap:0}} @media (max-width:1023px){.menu-features{width:180px}} @media (max-width:900px){.menu-features{display:none;}} @media (max-width:1230px){.menu-feature.earlier-feature{display:none;}} .menu-feature{width:calc((100% - 30px)/2)} @media (max-width:1230px){.menu-feature{width:100%}} .menu-feature img{width:100%} .menu-feature-title{text-transform:capitalize;font-size:1.1rem;text-align:center;padding:0 10px;font-style:italic;line-height:1.3;} .menu-feature-author{text-transform:capitalize;font-size:1rem;text-align:center;padding:4px 10px 0;font-weight:500;} /* ====================== BOOK MENU ELEMENTS ====================== */ /* --- Element Buttons --- */ a.book-button, button.book-button{position:fixed;right:30px;width:50px;height:50px;border-radius:50%;background:#fff;color:#454545;border:1px solid #ececec;cursor:pointer;box-shadow:0 2px 10px rgba(0, 0, 0, 0.1);display:flex;align-items:center;justify-content:center;transition:all 0.3s ease;z-index:70;text-decoration:none;line-height:1;} #settingsButton{bottom:80px;-webkit-tap-highlight-color: transparent;} #settingsButton:focus {outline:none;} #settingsButton:focus, #settingsButton:active {outline:none;box-shadow:none;} #settingsButton:before:focus, #settingsButton:before:active {outline:none;box-shadow:none;} #sharingButton{bottom:20px;-webkit-tap-highlight-color: transparent;} #sharingButton:focus {outline:none;} #sharingButton:focus, #sharingButton:active {outline:none;box-shadow:none;} #sharingButton:before:focus, #sharingButton:before:active {outline:none;box-shadow:none;} #contentButton{bottom:140px;-webkit-tap-highlight-color: transparent;} #contentButton:focus {outline:none;} #contentButton:focus, #contentButton:active {outline:none;box-shadow:none;} #contentButton:before:focus, #contentButton:before:active {outline:none;box-shadow:none;} .book-button:hover{transform:scale(1.1) rotate(90deg);} .book-button.is-active{transform:rotate(45deg);background: linear-gradient(135deg, #0061b0, #66a0cf);box-shadow: 0 5px 20px rgba(74, 108, 247, 0.3);border:1px solid transparent;-webkit-tap-highlight-color: transparent;} a.book-button img{width:16px;height:auto;filter:invert(41%) sepia(13%) saturate(0%) hue-rotate(279deg) brightness(95%) contrast(99%);} a.book-button.is-active img{filter:invert(100%) sepia(64%) saturate(0%) hue-rotate(109deg) brightness(104%) contrast(106%);} .content-panel{position:fixed;right:96px;bottom:20px;top:unset;left:unset;width:280px;background:rgba(255, 255, 255, 0.98);border-radius:14px;box-shadow:0 10px 30px rgba(0, 0, 0, 0.1);padding:20px;z-index:71;border:1px solid rgba(0, 0, 0, 0.05);transform-origin:bottom right;display:none;max-height:50vh;overflow-y:auto} .content-panel li {margin-bottom: 0.1rem;transition:all 0.2s ease;} .content-panel li a {display:flex;padding:0.55rem 0.9rem;color:#444;text-decoration:none;border-radius:6px;transition:all 0.2s ease;font-size:0.95rem;position:relative;line-height:1.2;gap:8px;} .content-panel li a.epprologue {font-size:0.85rem;} .content-panel li a.disable{cursor:default;transform:none;box-shadow:none;pointer-events:none;} .content-panel li a span {color:#888;font-weight:500;margin-right:0.5rem;line-height:1.2;min-width:1rem;} .content-panel li a:hover {background-color:#f8f8f8;color:#000;transform:translateX(2px);} .content-panel li a:hover span {color:#666;} .content-panel li a.active {background-color:#f0f0f0;color:#000;font-weight:500;} .content-panel li a.active span {color:#333;} .panel-section{margin-bottom:22px} .panel-section:last-child{margin-bottom:0} .panel-header{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:#666;margin-bottom:12px;display:flex;align-items:center;} .panel-header.panel-header-2{margin-top:20px} .panel-header::before {content:"";display:inline-block;width:4px;height:14px;background:linear-gradient(to bottom, #0061b0, #66a0cf);border-radius:2px;margin-right:8px;} #sharingPanel .panel-header::before{display:none;} #sharingPanel .inner-row, #contentPanel .inner-row{gap:12px} #settingsPanel, #sharingPanel, #contentPanel {display:none;transition:opacity 0.3s ease, transform 0.3s ease;opacity:0;transform:translateY(10px);} #settingsPanel.active, #sharingPanel.active, #contentPanel.active {opacity:1;transform:translateY(0);} @media (max-width: 480px) { .content-panel{width:calc(100% - 80px);padding:15px;} .content-panel li a{padding: 0.6rem 0.8rem;}} /* setting :: font setting buttons */ .settings-btn {display:flex;align-items:center;justify-content:space-between;width:100%;padding:12px 16px;background:rgba(0, 0, 0, 0.02);border:1px solid rgba(0, 0, 0, 0.08);border-radius:8px;font-size:14px;color:#333;cursor:pointer;transition:all 0.2s ease;margin-bottom:8px;} .settings-btn:hover {background:rgba(0, 0, 0, 0.04);transform:translateY(-1px);} .settings-btn:active {transform:translateY(0);} /* setting :: color swatches buttons */ .color-swatches {display:flex;gap:10px;margin-top:8px;} .colorButton {width:32px;height:32px;border-radius:8px;border:2px solid transparent;cursor:pointer;transition:all 0.2s ease;position:relative;} .colorButton.bgwhite{background-color:#fff;border-color:#e0e0e0} .colorButton.bgsepia{background-color:#f3eade;border-color:#e0e0e0} .colorButton.bggrey{background-color:#4e4e57;border-color:#e0e0e0} .colorButton.bgblack{background-color:#000;border-color:#e0e0e0} .colorButton:hover {transform:scale(1.1);} .colorButton.color-active {border-color:#0061b0;box-shadow:0 3px 10px rgba(74, 108, 247, 0.3);} .colorButton.color-active::after {content:"✓";position:absolute;top:-6px;right:-6px;background:#0061b0;color:white;width:16px;height:16px;border-radius:50%;font-size:10px;display:flex;align-items:center;justify-content:center;border:2px solid white;} /* setting :: character toggle */ .toggle-switch {position:relative;display:inline-block;width:42px;height:24px;-webkit-tap-highlight-color:transparent;background-color:transparent;border-color:transparent;} button#charSwitch{background-color:transparent;border-color:transparent;border:none} .toggle-slider {position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#e0e0e0;transition:.4s;border-radius:24px;} .toggle-slider:before {position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background-color:white;transition:.4s;border-radius:50%;} .toggle-slider {background-color: #4a6cf7;} .toggle-slider:before {transform: translateX(18px);} .off .toggle-slider {background-color: #e0e0e0;} .off .toggle-slider:before {transform: translateX(0);} .toggle-switch:focus {outline:none;} .toggle-slider:focus, .toggle-slider:active {outline:none;box-shadow:none;} .toggle-slider:before:focus, .toggle-slider:before:active {outline:none;box-shadow:none;} /* setting :: commentary toggle */ .commentary-icon {display:inline-block;width:20px;height:20px;background-color:#4a6cf7;color:white;border-radius:50%;text-align:center;line-height:21px;font-size:12px;margin-right:8px;cursor:pointer;transition: all 0.2s ease;} .commentary-icon:hover {transform:scale(1.1);background-color:#3a5bd9;} .commentary-trigger {display:none;align-items:center;cursor:pointer;opacity: 0;transform:scale(0.8);transition:all 0.3s ease;will-change:transform, opacity;} .commentary-overlay {position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(255,255,255,0.85);z-index:2000;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity 0.3s ease, transform 0.3s ease;-webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease;will-change: transform, opacity;transform: translateY(20px);-webkit-transform: translateY(20px);color:#191919;pointer-events:none;} .commentary-overlay.active {opacity:1;visibility:visible;transform:translateY(0);-webkit-transform: translateY(0);pointer-events:auto;} .commentary-content {background-color:white;max-width:600px;width:90%;max-height:80vh;overflow-y:auto;padding:30px;border-radius:10px;position:relative;box-shadow:0 10px 30px rgba(0,0,0,0.2);transform:translateY(0);transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);} .commentary-content h6{padding-bottom:0.6rem} .commentary-content h3{padding-bottom:1rem} .close-commentary {position:absolute;top:15px;right:15px;font-size:24px;cursor:pointer;color:#666;transition: all 0.2s ease;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;} .close-commentary:hover {color:#333;background-color:#f0f0f0;} .commentary-toggle {position:relative;display:inline-block;width:42px;height:24px;transition: all 0.3s ease;-webkit-tap-highlight-color: transparent;} .commentary-toggle .toggle-handle {position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#e0e0e0;transition:.4s;border-radius:24px;} .commentary-toggle .toggle-handle:before {position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background-color:white;transition:.4s;border-radius:50%;} .commentary-toggle .toggle-handle:before{transform: translateX(18px);} .commentary-toggle .toggle-handle {background-color: #4a6cf7;} .commentary-toggle.off .toggle-handle {background-color: #e0e0e0;} .commentary-toggle.off .toggle-handle:before {transform: translateX(0);} .commentary-content img{width:100%;height:auto} .commentary-toggle:focus {outline:none;} .commentary-toggle:focus, .commentary-toggle:active {outline:none;box-shadow:none;} .commentary-toggle:before:focus, .commentary-toggle:before:active {outline:none;box-shadow:none;} /* Body state when commentary is open */ body.commentary-open { overflow: hidden; } /* sharing :: buttons */ .ep-share-button{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background-color:#fff;color:var(--pwendier-color);text-decoration:none;border:1px solid #ececec;line-height:1;} .ep-donate-button {background:white;color:#333;border:1px solid #ececec;padding:0.65rem 1.5rem;font-weight:600;border-radius:6px;cursor:pointer;transition:all 0.3s ease;text-transform:uppercase;letter-spacing:1px;} .ep-share-button:hover, .ep-donate-button:hover{transform:translateY(-3px);box-shadow:0 10px 20px rgba(0,0,0,0.2);} /* episodes :: list */ #contentPanel ul{list-style:none;font-size:0.9rem;padding:0;margin:0;} /*#contentPanel ul li{text-indent:-35px;margin-left:35px}*/ #contentPanel li.current-episode a {color:#0061B0;font-weight: bold;cursor:default !important;} /* responsive */ @media (max-width:768px) { a.book-button, button.book-button{right:25px;width:40px;height:40px;} #settingsButton{bottom:70px;} #sharingButton{bottom:20px;} #contentButton{bottom:120px;} .content-panel{bottom:20px;right:80px;max-height:80vh}} @media (max-width:600px) { a.book-button, button.book-button{right:20px;width:30px;height:30px;} #settingsButton{bottom:60px;} #sharingButton{bottom:20px;} #contentButton{bottom:100px;} a.book-button img{width:12px;} .content-panel{bottom:20px;right:60px;max-height:80vh}} /* --- Tooltips --- */ .tooltip-container {position:relative;display:inline-block;cursor:pointer;} .tooltip-icon {display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;background-color:#ccc;color:white;border-radius:50%;font-size:12px;font-weight:bold;font-family:Arial, sans-serif;margin:0 4px;line-height:1;} .tooltip-text {position:absolute;bottom:100%;right:0;left:0;background-color:#fff;color:var(--text-primary);padding:8px 12px;border-radius:4px;font-size:14px;min-width:150px;max-width:250px;opacity:0;visibility:hidden;transition:opacity 0.3s, visibility 0.3s;z-index:100;margin-bottom:4px;pointer-events:none;box-shadow:0 2px 10px rgba(0, 0, 0, 0.1);transform: translateX(0);width: max-content;display:none;} .tooltip-text[data-show] { display: block; } .tooltip-container:hover .tooltip-text {opacity:1;visibility:visible;} @media (hover: none) { .tooltip-container:hover .tooltip-text {opacity:0;visibility:hidden;} .tooltip-container.active .tooltip-text {opacity:1;visibility:visible;}} @media (max-width: 768px) { .tooltip-text { /* On mobile, prefer left-aligned tooltips */ right: auto; left: 50%; transform: translateX(-50%); /* Optional: make tooltips full width on very small screens */ width: calc(100vw - 32px); max-width: calc(100vw - 32px); box-sizing: border-box; } /* For tooltips near the right edge */ .tooltip-container:nth-last-child(-n+2) .tooltip-text { right: 0; left: auto; transform: none; } } /* ====================== LANDING PAGE INDEX CARDS ====================== */ .scroll-indicator {position: fixed;right: 30px;top: 50%;transform: translateY(-50%);z-index: 100;display: flex;flex-direction: column;gap: 15px;transition: opacity 0.3s ease;} @media (max-width:600px){.scroll-indicator{right:20px;}} .dot {width:4px;height:4px;border-radius: 50%;background: rgba(255, 255, 255, 0.4);cursor: pointer;transition: all 0.3s ease;} .dot:hover {background: rgba(255, 255, 255, 0.7);} .dot.active {background: white; transform: scale(1.2);} .scroll-hint {position: absolute;bottom:0;left: 50%;transform: translateX(-50%);opacity: 0.7;transition: opacity 0.3s ease;color: #fff;z-index:9;} @media (max-width:768px){.scroll-hint {display:none;}} /*.scroll-hint.left-align {left: 2rem;right: auto;transform: none;}*/ .card-content {max-width:1300px;padding:8%;opacity: 0;transform: translateY(20px);animation: fadeInUp 0.8s ease-out forwards;animation-delay: 0.4s;z-index:10;margin-bottom:0} @media(max-width:767px){.card-content {padding:4%;}} @media(max-width:767px){.coming-titles .card-content {padding:10px;}} @keyframes fadeInUp { from {opacity: 0;transform: translateY(20px);} to {opacity: 1;transform: translateY(0);}} .snap-card {height:100vh;width:100vw;scroll-snap-align:start;position:relative;display:flex;justify-content:center;align-items:center;text-align:center;padding:2rem;} .snap-card h1{font-size:4rem;margin-bottom:1rem;font-weight:900;text-shadow: 2px 2px 10px rgba(0,0,0,0.3);color:#fff;} .snap-card .subtitle {font-size:1.5rem;margin-bottom:2rem;font-weight:500;} .snap-card h2 {margin-bottom:20px;font-weight:700;color:#fff} .book-genre{color:#252525;text-transform:uppercase;font-size:0.9rem;background-color:#fffbf9;border-radius:0 0 6px 6px;line-height:2.4;position:absolute;z-index:20;font-weight:600;transform:rotate(-90deg);} .snap-card p {margin-bottom:56px;color:#fff;} .cta-button, .card-button {background:white;color:#333;border:none;padding:1rem 2rem;font-weight:600;border-radius:2px;cursor:pointer;transition:all 0.3s ease;text-transform:uppercase;letter-spacing:1px;} .cta-button {background:#f72585;color:white;} .card-button:hover, .cta-button:hover {transform:translateY(-3px);box-shadow:0 10px 20px rgba(0,0,0,0.2);} .card-image{background-size:cover;z-index:4;position:absolute;top:0;right:0;bottom:0;left:0} .card-image.card-dsktop{background-size:cover;z-index:4;position:absolute;top:0;right:0;bottom:0;left:0} .card-image.card-mobile{background-size:cover;z-index:3;position:absolute;top:0;right:0;bottom:0;left:0} .snap-card.snap-footer{padding:0;align-items:flex-end} h1.display-heading{font-size:5rem;font-family:'Gambetta-Variable', sans-serif;font-weight:600;text-shadow:0px 0px 40px #00192A, 2px 2px 2px #00192A;} @media(max-width:1280px){h1.display-heading{font-size:4.1rem}} @media(max-width:767px){h1.display-heading{font-size:3.3rem}} p.display-text{text-shadow:0px 0px 40px #00192A, 2px 2px 2px #00192A;margin-top:20px;font-family:'Gambetta-Variable', serif;font-weight:600;font-size:1.5rem} @media(max-width:767px){p.display-text{font-size:1.4rem}} @media(max-width:600px){p.display-text{font-size:1.3rem}} @media(max-width:500px){p.display-text{font-size:1.2rem}} img.book-title-image{width:90%;height:auto;margin:0 auto} /* --- Variables --- */ .snap-card .card-content-inner{width:100%;margin:0 auto 30px} .snap-card.hero-card .book-title-image{width:72%} .snap-card.b-fran-mybr .book-title-image{width:76%;} .snap-card.b-conr-secr .book-title-image{width:62%;} @media(max-width:767px){.snap-card.hero-card .book-title-image{width:80%} .snap-card.b-fran-mybr .book-title-image{width:84%;} .snap-card.b-conr-secr .book-title-image{width:70%;}} .snap-card.hero-card .book-genre, .snap-card.b-fran-mybr .book-genre{top:calc((100% - 80px)/2);} .snap-card.b-lett-book .book-genre, .snap-card.b-conr-secr .book-genre{top:calc((100% - 70px)/2);} .b-lett-book img.book-title-image{width:50%;} .b-lett-book p.display-text{text-shadow:2px 2px 30px #00192a,3px 3px 3px #00192a;} .snap-card.b-conr-secr p{color:#f2e3b9;} .snap-card.hero-card .landing-overlay{position: absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.4);z-index:4;} .snap-card.b-lett-book .landing-overlay{position: absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.3);z-index:4;} .snap-card.coming-titles .landing-overlay{position: absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.45);z-index:4;} .snap-card.b-fran-mybr .landing-overlay{position: absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.25);z-index:4;} .snap-card.b-conr-secr .landing-overlay{position: absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.4);z-index:4;} @media (max-width:560px){.snap-card.hero-card .display-text br.desktop-break{display:none;}} @media (max-width:1000px){ .snap-card {padding:2rem 2rem 3.125rem 2rem;} .book-genre{display:none} .snap-card p {margin-bottom:var(--spacing-md);} .cta-button, .card-button {margin-bottom:1rem} .snap-card-end{padding-bottom:80px} } @media (max-width:600px){ .snap-card {padding:2rem 1rem 10px 1rem;} .snap-card.hero-card .card-content-inner, .snap-card.b-lett-book .card-content-inner, .snap-card.b-fran-mybr .card-content-inner, .snap-card.b-conr-secr .card-content-inner{width:96%;margin:0 auto 0} .snap-card.coming-titles .card-content-inner{width:100%;margin:0 auto 0} .snap-card-end{padding-bottom:50px} } @media (max-width:991px){.card-image.card-dsktop{display:none;}} /* ====================== LISTS PAGES ======================*/ .fullSP-container{width:100vw;height:auto;position:relative;/*padding:50px 20px 90px*/flex-direction:column;} .header-image{height:500px;width:100%} @media (max-width:768px){.header-image{height:350px}} .list-container{max-width:1100px;margin:70px auto;padding:0 50px;} @media (max-width:1190px){.list-container{width:100%;}} @media (max-width:884px){.list-container{padding:0 5%;margin-top:60px}} @media (max-width:884px){.list-container{padding:0 4.6%;margin-top:50px}} @media (max-width:768px){.list-container{padding:0 4.2%;margin-top:40px}} @media (max-width:700px){.list-container{padding:0 4%;margin-top:30px}} .title-container{max-width:1100px;margin:0 auto;padding:50px;height:100%;display:flex;align-items:flex-end;} @media (max-width:1099px){.title-container{padding:40px 5%;}} @media (max-width:884px){.title-container{padding:40px 4.6%;}} @media (max-width:768px){.title-container{padding:30px 4.2%;}} @media (max-width:700px){.title-container{padding:30px 4%;}} .title-wrapper{display:flex;flex-direction:column} .title-wrapper span {display:block;} @media (max-width:768px){.page-lists h1{font-size:3rem;text-align:left;}} .page-lists h6.title-tag{color:#fff;} .page-lists h1.page-heading{color:#fff;font-size:3.3rem;line-height:1.1;} @media (max-width:767px){.page-lists h1.page-heading{font-size:3rem;}} @media (max-width:600px){.page-lists h1.page-heading{font-size:2.7rem;}} @media (max-width:500px){.page-lists h1.page-heading{font-size:2.4rem;}} .list-content{display:flex;flex-direction:column;} .book-list{display:flex;flex-wrap:wrap;justify-content: space-between;} .book-container{max-width:150px} .book-container img{width:100%;height:auto} .list-title {margin:0 0 20px 0;border-bottom:2px solid #bbb} .list-title h3{font-size:1.3rem;text-transform:uppercase;padding:0 0 10px 0;font-weight:550;letter-spacing:0.5px;} .book-grid {display:grid;grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));gap:30px;} @media (max-width: 768px){.book-grid {grid-template-columns:repeat(auto-fill, minmax(170px, 1fr));gap:20px;}} @media (max-width: 480px){.book-grid {grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));gap:15px;}} .book-card {background:#fff;overflow:hidden;transition:transform 0.2s ease, box-shadow 0.2s ease;cursor:pointer;text-decoration:none;color:inherit;} .book-card.disable{pointer-events:none;} .book-card.disable:hover{cursor:default;transform:none;box-shadow:none;text-decoration:none;} .book-card:hover {transform:translateY(-5px);box-shadow:0 4px 20px rgba(0, 0, 0, 0.15);} .book-cover {width:100%;aspect-ratio:2/3;object-fit:cover;background:#e8e0d8;display:block;} .book-info {padding:15px;text-align:center;} @media (max-width: 480px){.book-info {padding:10px;}} .book-title {font-size:1rem;font-weight:700;color:#2c1810;margin-bottom:5px;line-height:1.3;} @media (max-width: 480px) {.book-title {font-size: 0.9rem;}} .book-author {font-size:0.9rem;color:#666;font-style:italic;} @media (max-width: 480px) {.book-author {font-size: 0.8rem;}} .panel-container{width:100vw;height:auto;position:relative;margin-bottom:40px;padding:90px 0 50px} .sq-button{border:none;color:#1a2845;padding:15px 32px;text-align:center;text-decoration:none;display:flex;font-size:16px;margin:30px 2px;cursor:pointer;background-color:#eac769;width:300px;align-self:center;text-transform:uppercase;justify-content:center;border-radius:2px;font-weight:550;transition:transform 0.2s ease, box-shadow 0.2s ease;} .sq-button:hover{transform:translateY(-5px);box-shadow:0 4px 20px rgba(234, 199, 105, 0.15);} /* --- section: special entry --- */ .container.special-entry{background-color:#1a2845;margin:0} @media(max-width:1023px){.container.special-entry{padding:65px 8% 50px}} .section-inner{display:flex;gap:80px;max-width:1100px;justify-content:center;margin:0 auto;height:auto} @media (max-width:1200px){.section-inner{gap:60px;}} @media (max-width:1023px){.section-inner{flex-direction:column;height:auto;min-height:auto}} .panel.panel-image{flex:1;height:auto} @media(max-width:1023px){.panel.panel-image{width:100%;flex:none}} .panel.panel-text{flex:1;height:auto} @media(max-width:1023px){.panel.panel-text{width:100%;flex:none}} .page-lists .panel.panel-image img{width:100%;height:auto;display:block} @media(max-width:1023px){.page-lists .panel.panel-image img{width:100%;height:auto;object-fit:contain}} .page-lists .panel .title-wrapper{margin-top:0} .page-lists .container.special-entry .panel .title-wrapper{margin-top:50px} @media(max-width:1023px){.page-lists .container.special-entry .panel .title-wrapper{margin-top:0;text-align:left}} .page-lists .container.special-entry .section-inner{padding:90px 50px;} @media(max-width:1200px){.page-lists .container.special-entry .section-inner{padding:90px 0;}} @media(max-width:1023px){.page-lists .container.special-entry .section-inner{padding:50px 0;}} @media(max-width:768px){.page-lists .container.special-entry .section-inner{padding:20px 0;}} .page-lists .container.special-entry h6.panel-title-tag{color:#eac769;letter-spacing:1.3px;font-size:0.9rem;} .page-lists .container.special-entry h2.panel-heading{color:#eac769;font-style:italic;} .page-lists .container.special-entry p{color:#eac769;font-size:1.1rem;font-weight:400;font-style:normal} @media(max-width:1023px){.page-lists .container.special-entry .sq-button{align-self:unset;}} .page-lists .special-entry img.sp-entry-image.landscape-image{display:none;} .page-lists .special-entry img.sp-entry-image.portrait-image{display:block;} @media (max-width:1023px){.page-lists .special-entry img.sp-entry-image.landscape-image{display:block;} .page-lists .special-entry img.sp-entry-image.portrait-image{display:none;}} /* --- Coming soon --- */ .page-lists.coming-soon .book-grid{grid-template-columns:repeat(auto-fill, minmax(500px, 1fr));} @media(max-width:768px){.page-lists.coming-soon .book-grid{grid-template-columns:repeat(auto-fill, minmax(350px, 1fr));}} .page-lists.coming-soon .book-cover.coming-books{aspect-ratio:2/0.9;} .page-lists.coming-soon .inner-col{margin-bottom:30px} .page-lists.coming-soon .book-info{text-align:left;padding:0 15px 15px} .page-lists.coming-soon .book-title{font-size:1.8rem;font-weight:550;color:#2c1810;margin-bottom:0;line-height:2.0;font-family:'Sentient-Variable', serif;} .page-lists.coming-soon .book-author{font-style:normal;text-transform:uppercase;} /* --- On the working table --- */ .page-lists .fullSP-container.working-table{background-color:#e8e8e8;padding:0 0 65px 0} .page-lists .fullSP-container.working-table .container{padding:65px 8% 35px} @media(max-width:768px){.page-lists .fullSP-container.working-table .container{padding:65px 0 35px}} .page-lists .fullSP-container.working-table .title-container{padding:50px 50px 0 50px} @media(max-width:768px){.page-lists .fullSP-container.working-table .title-container{padding:10px 20px 0 20px}} .page-lists .fullSP-container.working-table .title-wrapper{margin-top:0;} .page-lists .fullSP-container.working-table .title-wrapper h1, .page-lists .fullSP-container.working-table .title-wrapper h6{color:#252525;} .page-lists .fullSP-container.working-table .title-wrapper h1{font-size:2.8rem;letter-spacing:0.5px} @media(max-width:768px){.page-lists .fullSP-container.working-table .title-wrapper h1{font-size:2.5rem}} .carousel {position:relative;width:100%;height:500px;max-height:800px;overflow:hidden;background:#111;max-width:1000px;margin:0 auto 50px;} .slides {position:relative;width:100%;height:100%;} .slide {position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;transition:opacity 1s ease-in-out;display:flex;align-items:center;justify-content:flex-start;padding:0 10%;color:#fff;background-size:cover;background-position:top center;} @media (max-width: 768px){.slide {padding:0 10%;align-items:flex-end;padding-bottom:120px;}} .slide.active {opacity:1;z-index:2;} .slide::after {content: '';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to right,rgba(0, 0, 0, 0.75) 0%,rgba(0, 0, 0, 0.4) 50%,rgba(0, 0, 0, 0.1) 100%);z-index: 1;} @media (max-width: 768px){.slide::after {background: linear-gradient(to top,rgba(0, 0, 0, 0.85) 0%,rgba(0, 0, 0, 0.3) 70%,rgba(0, 0, 0, 0) 100%);}} .slide-content {position:relative;z-index:3;max-width:600px;animation:fadeUp 0.8s ease-out;} .slide-content .label {font-size:0.85rem;letter-spacing:3px;text-transform:uppercase;color:#c8a86e;margin-bottom:0.75rem;font-family:'Arial', sans-serif;} .slide-content h2 {font-size:2.3rem;font-weight:700;line-height:1.1;margin-bottom:1rem;letter-spacing:-0.5px;} @media (max-width: 768px){.slide-content h2 {font-size:2.4rem;}} @media (max-width: 480px){.slide-content h2 {font-size: 1.8rem;}} .slide-content p {font-size:1.2rem;line-height:1.6;opacity:0.9;margin-bottom:2rem;font-family:'Arial', sans-serif;font-weight:300;max-width:500px;} @media (max-width: 768px){.slide-content p {font-size:1rem;}} .slide-content .btn {display:inline-block;padding:14px 40px;background:#c8a86e;color:#1a1a1a;text-decoration:none;font-family:'Arial', sans-serif;font-weight:600;font-size:0.9rem;letter-spacing:1px;text-transform:uppercase;transition:background 0.3s ease, transform 0.2s ease;border:none;cursor:pointer;} @media (max-width: 480px){.slide-content .btn {padding:12px 28px;font-size:0.75rem;}} .slide-content .btn:hover {background:#dbb97e;transform:scale(1.02);} /* --- FADE-UP ANIMATION --- */ @keyframes fadeUp {0% {opacity: 0;transform: translateY(30px);}100% {opacity: 1;transform: translateY(0);}} /* --- ARROWS --- */ .arrow {position:absolute;top:50%;transform:translateY(-50%);z-index:10;background:rgba(255, 255, 255, 0.08);backdrop-filter:blur(4px);color:#fff;border:1px solid rgba(255, 255, 255, 0.15);width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.4rem;transition:background 0.3s ease, transform 0.2s ease;user-select:none;} @media (max-width: 768px){.arrow {width:44px;height:44px;font-size:1rem;}} .arrow:hover {background:rgba(255, 255, 255, 0.2);transform:translateY(-50%) scale(1.05);} .arrow-left {left:30px;} @media (max-width: 768px){.arrow-left {left:12px;}} .arrow-right {right:30px;} @media (max-width: 768px){.arrow-right{right:12px;}} /* --- DOTS / PAGINATION --- */ .dots {position:absolute;bottom:40px;left:50%;transform:translateX(-50%);z-index:10;display:flex;gap:14px;} @media (max-width: 768px){.dots {bottom:30px;gap:10px;}} .dot {width:4px;height:4px;border-radius:50%;background:rgba(255, 255, 255, 0.3);border:2px solid transparent;cursor:pointer;transition:background 0.3s ease, border-color 0.3s ease, transform 0.2s ease;} @media (max-width: 768px){.dot {width:2px;height:2px;}} .dot.active {background:#c8a86e;border-color:#c8a86e;transform:scale(1.2);} .dot:hover {background:rgba(255, 255, 255, 0.6);} .fullSP-container .sp-content{width:100%;height:auto;padding:0 var(--spacing-md);transition: all 0.3s cubic-bezier(0.3, 0, 0.3, 1);-moz-transition: all 0.3s cubic-bezier(0.3, 0, 0.3, 1);-webkit-transition: all 0.3s cubic-bezier(0.3, 0, 0.3, 1);-o-transition: all 0.3s cubic-bezier(0.3, 0, 0.3, 1);} @media (max-width:1000px){.fullSP-container .sp-content{padding:0 var(--margin-mobile);}} .sp-content-inner{position:relative;text-align:justify;display:block;margin:40% auto var(--spacing-md);width:100%;max-width:1000px;} @media (max-width:768px){.sp-content-inner{margin:88% auto var(--spacing-lg);}} .sp-details{position:relative;display:block;width:100%} .sp-details-item{display:block;font-weight:500;text-transform:uppercase;font-size:1.3rem;letter-spacing:1px;margin:5px 0;text-align:center;} .sp-details h6{letter-spacing:1px;margin:5px 0;text-align:center;font-weight:500;text-transform:uppercase;} .sp-details h6 span{font-weight:700;margin-left:8px;text-transform:uppercase;} .sp-text{display:block;width:100%;height:100%;} .sp-text p{margin:20px 0;font-weight:450} .sp-buttons{position:relative;display:block;width:100%;text-align:center;margin-top:50px;text-transform:uppercase;} a.sp-btn{display:inline-block;border:1px solid #fff;border-radius:20px;text-decoration:none;line-height:1;font-size:clamp(0.8rem, 1vw, 1.375rem);font-weight:500;letter-spacing:1px;padding:11px 21px;margin:0 8px;height:auto;transition: all 0.3s cubic-bezier(0.3, 0, 0.3, 1);-moz-transition: all 0.3s cubic-bezier(0.3, 0, 0.3, 1);-webkit-transition: all 0.3s cubic-bezier(0.3, 0, 0.3, 1);-o-transition: all 0.3s cubic-bezier(0.3, 0, 0.3, 1);background-color:transparent;} a.sp-btn:first-child{margin-left:0;} a.sp-btn:last-child{margin-right:0;} a.sp-btn:link,a.sp-btn:visited,a.sp-btn:hover,a.sp-btn:active{color:#fff;} /* Drawings and Verses */ .s-draw .sp-content-inner{position:relative;text-align:justify;display:block;margin:20% auto var(--spacing-md);width:100%;max-width:1000px;} .s-draw .sp-details h6, .s-draw .sp-details h6 span{color:#444;} .s-draw .sp-details-item{margin:5px 0;background-color:transparent;} .s-draw .sp-title{width:100%;height:auto;margin:40px 0 40px 0;padding:0 20px;position:relative;background-color:transparent;color:#444;text-transform:lowercase;font-family:'Literata-VariableItalic';font-weight:700;font-size:clamp(3rem, calc(0rem + var(--scale-h1)), 6rem);letter-spacing:0;text-align:center;line-height:1} hr.s-draw-content{height:1px;background-color:#191919;border-width:0;opacity:0.45} .s-draw a.sp-btn:hover, .s-draw a.sp-btn.sp-btn2:hover{background-color:var(--s-gree-primary);} .s-draw a.sp-btn{border:1px solid transparent;background-color:var(--s-gree-secondary);} .s-draw a.sp-btn.sp-btn2{border:1px solid #008a9d;background-color:transparent;} .s-draw .sp-text p{color:#444;background-color: transparent;} /* --- liwen's revelations --- */ .gree-vp-wrapper{margin-bottom:100px;overflow:auto;} .gree-vp-page-title{margin:80px 0 40px 0;padding:0 20px} .gree-vp-page-title h1{position:relative;display:block;text-align:left;font-size:750%;line-height:1;text-transform:lowercase;font-family:'Literata-VariableItalic';font-weight:700;} @media (min-width:1950px){.gree-vp-page-title h1{font-size:175.6px}} @media (max-width:768px){.gree-vp-page-title h1{font-size:600%}} @media (max-width:600px){.gree-vp-page-title h1{font-size:400%}} .gree-vp-page-title hr{height:1px;background-color:#191919;border-width:0} .gree-vp-post-list{overflow:auto;padding:0 20px} .gree-vp-list-item{margin:40px 0;width:100%;height:auto;overflow:auto;display:flex} .gree-vp-litem-date{position:relative;display:inline;float:left;width:10%;height:auto;padding:0 5px 0 5px;background: linear-gradient(#cbcaca, #cbcaca) no-repeat center/1px 100%;} @media (max-width:768px){.gree-vp-litem-date{padding:0 0 0 0}} .gree-vp-litem-date p{text-transform:uppercase;font-weight:650;background-color:var(--background-primary);padding:4px 0 0 0;text-align:center;line-height:1;font-size:70%} @media (min-width:1500px){.gree-vp-litem-date p{font-size:12.6px}} .gree-vp-litem-date span{font-size:96%;font-weight:350;margin-top:0.3rem;display:block;text-align:center;padding-bottom:5px} .gree-vp-litem-text{position:relative;display:inline;float:left;width:calc(100% - 10%);height:auto;padding:0 0 0 20px} @media (min-width:1800px){.gree-vp-litem-text p{font-size:19.8px}} .gree-vp-litem-text h3{margin-top:0;margin-bottom:10px;text-transform:none;line-height:1;} @media (min-width:1500px){.gree-vp-litem-text h3{font-size:48px;}} .gree-vp-litem-text a.gree-vp-title:link, .gree-vp-litem-text a.gree-vp-title:visited, .gree-vp-litem-text a.gree-vp-title:active{color:#191919;} .gree-vp-litem-text a.gree-vp-title:hover{color:#191919;text-decoration:underline;} .gree-vp-litem-text p span{text-align:right !important;font-size:86%;font-weight:500;} .gree-vp-article{padding:0 var(--margin-mobile)} .gree-vp-article-title{margin:100px 0 40px 0;padding:0 20px} .gree-vp-article-title h2{position:relative;display:block;text-align:center;line-height:1;text-transform:none;font-family:'Literata-VariableItalic';font-weight:700;} .gree-vp-article-title h2:first-of-type{font-size:200%;} .gree-vp-article-title h2:last-of-type{font-size:300%;margin-bottom:40px} .gree-vp-article-spacer{height:100px;background: linear-gradient(#cbcaca, #cbcaca) no-repeat center/1px 100%;margin-bottom:40px;padding-top:20px} img.aj-img{width:700px;height:auto;} @media (max-width:660px){img.aj-img{width:100%;height:auto;}} @media (max-width:600px){br.mobile-hidden{display:none;}} /* ====================== IN THE WORKSHOP ====================== */ /* ====================== SINGLE PAGES ====================== */ /*.contacts-container{position:relative;display:block;width:100%;height:auto;overflow:auto;}*/ .wrapper-outer{position:relative;display:block;width:100%;height:auto;overflow:auto;} .single-page .inner-col{max-width:800px;margin:0 auto;padding:0 0 85px 0;} .single-page .container-full.title .inner-col{flex-direction:column-reverse;height:100%;padding:0} @media (max-width:768px){.single-page .inner-col{padding:0 0 50px 0}} .single-page .container-full.title{padding:100px 8% 50px;} .single-page .base-wrapper{margin:60px auto 150px;max-width:800px;} .single-page .header-image{height:350px} .single-page.our-mission .header-image{height:460px} @media (max-width:768px){.single-page.our-mission .header-image{height:360px}} .single-page h1.page-heading{font-size:4rem;font-family:'CrimsonPro-VariableItalic';font-style:italic;font-weight:500} @media(max-width:600px){.single-page h1.page-heading{font-size:3rem;}} .single-page h4{font-family:'CrimsonPro-Variable',serif;font-size:1.6rem;line-height:2.6;font-weight:600;} .single-page .contact-wrapper, .single-page .mission-wrapper, .single-page .support-wrapper{color:#252525;} .single-page .header-image{background-color:#f6f6f6;} .single-page .page-heading{color:#252525;} .single-page.our-mission .page-heading{color:#fff;} .single-page .section-text h5{font-size:1.32rem;line-height:1.5;font-family:'CrimsonPro-Variable';font-weight:600} .single-page .section-text p{font-size:1.32rem;line-height:1.5;margin-bottom:2rem;font-family:'CrimsonPro-Variable';font-weight:330} .single-page .section-text p span{font-weight:570;} .single-page.contact .section-text a{display:block;} .single-page.support-us .section-text a{display:inline;} .single-page .donate-button{order:6;text-align:center;padding:60px 0} .donate-btn{border:1px solid #c8c8c8;color:#4a4a4a;padding:1rem 5rem;text-align:center;text-decoration:none;display:flex;font-size:16px;margin:50px auto;cursor:pointer;background-color:#dadada;width:300px;align-self:center;text-transform:capitalize;justify-content:center;border-radius:2px;font-weight:500;transition:transform 0.2s ease, box-shadow 0.2s ease;} .donate-btn:hover{transform:translateY(-5px);box-shadow:0 4px 20px rgba(200, 200, 200, 0.3);} a.donate-btn:link, a.donate-btn:active, a.donate-btn:visited{color:#4a4a4a;transition:color 0.3s;} a.donate-btn:hover{color:#4a4a4a;} .section-text ul{list-style:none;font-family:'CrimsonPro-Variable';margin-bottom:30px;font-size:1.32rem;} .section-text ul li{padding:0.6rem 0;line-height:1.5;font-weight:330;} .section-text ul li span{font-weight:570;} .content-title{text-align:center;} .content-title h1{text-transform:uppercase;font-weight:900;margin-bottom:10px;} @media(max-width:768px){.content-title h1{font-size:2.375rem}} .content-title p.last-updated{line-height:1;font-size:0.8rem} .content-text{margin:50px 0 0;line-height:1.33;} .content-text h5{font-weight:650} .content-text p{margin:0 0 1.875rem 0} .content-text ul{padding-left:2em;margin:0 0 30px 0;font-size:1.13rem;} .content-text li{margin:12px 0} .content-text a{font-weight:600} .gen-page .wrapper-outer{margin-bottom:80px} @media (max-width:1040px){ .content-title, .content-text{padding:0 40px}} @media (max-width:600px){ .content-title, .content-text{padding:0 var(--margin-mobile)}} .page-contacts{background-color:var(--surface);color:var(--text-primary);position:relative;display:block;margin:0;padding:0;width:100%;height:100%} .contacts-outer{position:relative;display:flex;width:100%;margin:0;overflow:auto;height:auto;gap:30px;flex-direction:column} .contacts-titles{order: 1;padding:var(--spacing-xl) var(--spacing-md) var(--spacing-sm)} .contacts-details{order:2;width:100%;align-self:flex-end;padding:0 var(--spacing-md) var(--spacing-sm)} .contacts-details-inner{padding-left:0} .cont-det{display:flex;flex-direction:row;justify-content:space-evenly;} .contacts-details-image img{padding:50px 80px 50px 0;width:90%;height:auto;transform:rotate(-8deg);filter:invert(100%) sepia(1%) saturate(2124%) hue-rotate(347deg) brightness(119%) contrast(73%);} .contacts-footnotes{order:3;padding:0 var(--spacing-md) var(--spacing-lg)} p.contacts-footnote{text-transform:uppercase;} p.contacts-footnote span{text-transform:none;font-style: italic;} .contacts-titles h1{text-transform: uppercase;margin:0 0 10px 0;line-height:1;} .contacts-titles h6{text-transform: uppercase;margin:0 0 1.25rem 0;line-height:1;} .contacts-item h6{text-transform:uppercase;line-height:1;margin-bottom:10px;font-weight:800;} .contacts-item{margin-bottom:30px} .contacts-item p{margin: 0;line-height:1;} .contacts-item p.email{color:var(--s-fort-primary);margin-top:0;font-size:2.5rem;line-height:1.2;} @media (max-width:1000px){ .contacts-titles{padding:var(--spacing-xl) var(--margin-mobile) var(--spacing-sm)} .cont-det{flex-direction:column;justify-content:center;align-items:center;} .contacts-details{padding:0 var(--margin-mobile) var(--spacing-sm)} .contacts-details-image img{padding:0 20px var(--spacing-xl) 40px;width:80%;} .contacts-footnotes{padding:0 var(--margin-mobile) var(--spacing-xl)}} @media (max-width:600px){ .contacts-item p.email{font-size:1.8rem;} .contacts-details-image img{padding:0 30px var(--spacing-lg) 30px;width:90%} .contacts-titles h1{font-size:3rem}} @media (max-width:500px){ .contacts-item p.email{font-size:1.7rem;} .contacts-details-image img{padding:0 30px var(--spacing-lg) 30px;width:100%;} .contacts-titles h1{font-size:2.3rem}} @media (max-width:400px){ .contacts-item p.email{font-size:1.7rem;} .contacts-details-image img{padding:0 30px var(--spacing-lg) 30px;width:100%;} .contacts-titles h1{font-size:1.9rem}} /* ====================== CONTRIBUTE PAGE ====================== */ .page-contribute{background-color:var(--surface);color:var(--text-primary);position:relative;display:block;margin:0;padding:0;width:100%;height:100%} .page-contribute .inner-col{margin:0;overflow:auto;height:auto;} .page-contribute .titles{order: 1;padding:var(--spacing-xl) var(--spacing-md) var(--spacing-sm)} .page-contribute .titles h1{text-transform: uppercase;margin:0 0 10px 0;line-height:1;} .page-contribute .titles h6{margin:0 0 1.25rem 0;line-height:1;} .page-contribute .headings{align-self:flex-start;padding:0 var(--spacing-md) 0;width:60%} .page-contribute .headings.segment-11{order:2} .page-contribute .headings h3{text-transform:uppercase;line-height:1;} .page-contribute .description{align-self:flex-end;padding:0 var(--spacing-md) var(--spacing-sm);width:55%;} .page-contribute .description.segment-12{order:3} .page-contribute .description ul {padding-left:2rem;list-style:none} .page-contribute .description li{font-size: clamp(1.2rem, calc(0rem + var(--scale-h5)), 1.75rem);line-height:1.3;margin:0.7rem 0} .page-contribute .description li:first-child{margin:0 0 0.7rem} .page-contribute .description.segment-12 li{text-indent:-26px;} .page-contribute .description.segment-12 li::before{content: "→";color: #D94229;left: -2rem;margin-right:0.5rem} .page-contribute .headings.segment-21{order:4} .page-contribute .description.segment-22{order:5} .page-contribute .description.segment-22 li::before{content: "■";color: #D94229;left:-2rem;font-size:0.8rem;margin-right:0.5rem} .page-contribute .description.segment-22 li{text-indent:-20px;} .page-contribute .contribute-button{order:6;text-align:center;padding:var(--spacing-sm) var(--spacing-md) var(--spacing-sm)} .paypal-btn {display:inline-block;background:transparent;font-size:clamp(1rem, 1.1vw, 2.5rem);font-weight:500;text-decoration: none;padding: 1rem 0;border-radius:8px;border: 1px solid var(--pwendier-color);transition: all 0.2s;width:50%} .paypal-btn:hover{background-color:var(--pwendier-color);transition:color 0.3s;} a.paypal-btn:link, a.paypal-btn:active, a.paypal-btn:visited{color:var(--pwendier-color);transition:color 0.3s;} a.paypal-btn:hover {color:#ffffff;transition:color 0.3s;} .page-contribute .footnotes{order:7;padding:0 var(--spacing-md) var(--spacing-lg);text-align:center} @media (max-width:1200px){ .page-contribute .headings{width:65%} .page-contribute .description{width:60%}} @media (max-width:1000px){ .page-contribute .titles{padding:var(--spacing-xl) var(--margin-mobile) var(--spacing-sm)} .page-contribute .headings{padding:0 var(--margin-mobile) 0;} .page-contribute .description{padding:0 var(--margin-mobile) var(--spacing-sm);} .page-contribute .contribute-button{order:6;text-align:center;padding:var(--spacing-sm) var(--margin-mobile) var(--spacing-sm)} .contribute-footnotes{padding:0 var(--margin-mobile) var(--spacing-xl)}} @media (max-width:800px){ .page-contribute .headings{width:70%} .page-contribute .description{width:65%}} @media (max-width:700px){ .page-contribute .headings{width:75%} .page-contribute .description{width:70%}} @media (max-width:600px){ .page-contribute .titles{padding:var(--spacing-xl) var(--margin-mobile) 0} .page-contribute .titles h1{font-size:3rem} .page-contribute .headings{width:80%} .page-contribute .description{width:75%} .paypal-btn {width:70%}} @media (max-width:500px){ .page-contribute .headings{width:85%} .page-contribute .description{width:80%} .page-contribute .titles h1{font-size:2.3rem}} @media (max-width:400px){ .page-contribute .headings{width:100%} .page-contribute .description{width:100%} .page-contribute .titles h1{font-size:1.9rem}} /* ====================== OUR MISSION ====================== */ .page-mission{background-color:var(--surface);color:var(--text-primary);position:relative;display:block;margin:0;padding:0;width:100%;height:100%} .mission-container{position:relative;display:block;width:100%;height:auto;overflow:auto;} .mission-outer{position:relative;display:flex;width:100%;margin:0;overflow:auto;height:auto;gap:30px;flex-direction:column} .mission-titles{order: 1;padding:var(--spacing-xl) var(--spacing-md) var(--spacing-sm)} .mission-titles h1{text-transform: uppercase;margin:0 0 2rem 0;line-height:1;} .mission-titles h6{text-transform: uppercase;margin:0 0 1.25rem 0;line-height:1;} p.mission-text{line-height:1.33;font-weight:500;margin:1.25rem 0 1rem 0} p.mission-text:last-child{margin:2.25rem 0 0 0} /* ====================== MANUSCRIPT PAGES ====================== */ .manuscript-wrapper{position:relative;display:block;width:100%;height:auto;padding:65px 8% 65px;margin:0 auto} @media(max-width:884px){.manuscript-wrapper{padding:50px 4.6% 50px}} @media(max-width:768px){.manuscript-wrapper{padding:50px 4.2% 50px}} @media(max-width:700px){.manuscript-wrapper{padding:50px 4% 50px}} .book-page .base-wrapper.manuscript-container{max-width:800px} .manuscript-header{padding:30px 0} .manuscript-heder.element-cBlack{color:#000;} .manuscript-heder.element-cWhite{color:#fff;} .manuscript-header p.m-header-element{font-style:italic;font-size:1rem;text-align:center;margin:150px auto;width:300px} .manuscript-header p.m-header-element span{font-weight:550} .ot-footnote{text-align:center;} h1.m-title{font-size:2.6rem;font-weight:550;letter-spacing:0.5px;line-height:1.6;padding:0;margin:0;} h6.m-author{font-size:1.1rem;text-transform:uppercase;font-weight:550;letter-spacing:1.5px;line-height:1;padding:0;margin:0;} h1.m-title, h6.m-author, h3.volume-title, h4.chapter-title{text-align:center;margin-bottom:50px} .manuscript-text{margin-bottom:200px;width:100%;} .manuscript-text p{font-size:1.3rem;line-height:1.5;margin:0 auto;text-indent:30px;/* width:800px */} .manuscript-text p.segment{margin-top:60px;text-indent:0;} .manuscript-text p.segment:first-of-type{margin-top:0} .manuscript-text p.no-indent{text-indent:0} .manuscript-text p.spacer{margin-top:40px} .manuscript-text p.spacer-small{margin-top:16px} .manuscript-text p.intext-title{text-align:center;margin-top:65px;margin-bottom:30px;text-indent:0;} .manuscript-text p.narrow-par{padding-left:70px;padding-right:70px} .manuscript-text p.intext-letter{padding-left:40px;padding-right:40px;font-size:18px} .manuscript-text p.align-right{text-align:right;} .manuscript-text p.align-centre{text-align:center;} /* Footnote */ .footnote-marker {display:inline-block;cursor:pointer;color:#0066cc;font-size:12px;font-weight:bold;margin-left:2px;margin-right:3px;padding:0 4px;border-radius:8px;background-color:#e8f0fe;transition:all 0.2s ease;text-decoration:none;user-select:none;line-height:1.4;position:relative;top:-8px;font-family:Arial, sans-serif;text-indent:0;} @media (max-width: 600px) {.footnote-marker{font-size:0.75rem;padding:0 3px;}} .footnote-marker:hover {background-color:#0066cc;color:#fff;transform:scale(1.1);} .footnote-wrapper {display:inline;position: elative;}/* the marker relative for positioning */ .footnote-popup {display:none;position:fixed;min-width:280px;max-width:400px;padding:16px 20px;background:white;border-radius:8px;box-shadow:0 10px 40px rgba(0, 0, 0, 0.15), 0 2px 10px rgba(0, 0, 0, 0.05);border:1px solid #e0e0e0;font-size:0.95rem;line-height:1.6;color:#333;z-index:1000;text-align:left;font-weight:normal;pointer-events:auto;} @media (max-width: 600px) {.footnote-popup {min-width:200px;max-width:280px;font-size:0.9rem;padding:14px 16px;left:10px !important;right:10px !important;width:auto !important;}} .footnote-popup::after {content:'';position:absolute;bottom:-16px;left:50%;transform:translateX(-50%);border:8px solid transparent;border-top-color:#fff;}/* Arrow/triangle at bottom of popup */ .footnote-popup::before {content:'';position:absolute;bottom:-17px;left:50%;transform:translateX(-50%);border:9px solid transparent;} .footnote-popup.below::after {bottom:auto;top:-16px;border-top-color:transparent;border-bottom-color:#fff;}/* When popup appears below the marker */ .footnote-popup.below::before {bottom:auto;top:-17px;border-top-color:transparent;border-bottom-color:#e0e0e0;} .footnote-popup.visible {display:block;animation:fadeIn 0.25s ease forwards;}/* Popup visible state with fade animation */ @keyframes fadeIn {from {opacity:0;transform:translateY(8px);}to {opacity:1;transform:translateY(0);}} .popup-close {position:absolute;top:6px;right:10px;background:none;border:none;font-size:1.2rem;cursor:pointer;color:#999;padding:0 4px;transition:color 0.2s;line-height:1;} .popup-close:hover {color:#333;} .footnote-popup.long-note {min-width:320px;max-width:450px;} /* End Buttons */ .page-navigation{padding:0 var(--spacing-md);margin:var(--spacing-sm) 0 var(--spacing-sm)} .page-nav-buttons.inner-row{justify-content:flex-end;gap:4px} .page-nav-button{width:50px;height:50px;background-color:#fff;border:1px solid #ececec;border-radius:4px;color:#454545;transition:all 0.3s ease;line-height:1;} .page-nav-button.inner-row{align-items:center;justify-content:center;} .button-next.page-nav-button.inner-row a:link{cursor:pointer !important} .page-nav-btn img{width:14px;height:auto;filter:invert(41%) sepia(13%) saturate(0%) hue-rotate(279deg) brightness(95%) contrast(99%);pointer-events:none;} .page-nav-button:hover{transform:translateY(-3px);box-shadow:0 10px 20px rgba(0, 0, 0, 0.1);} .page-nav-button.disable{border:1px solid #f7f7f7;pointer-events:none;} .page-nav-button.disable:hover{cursor:default;transform:none;box-shadow:none} .page-nav-button.disable .page-nav-btn img{filter: invert(90%) sepia(0%) saturate(621%) hue-rotate(132deg) brightness(90%) contrast(105%);} .page-nav-btn{cursor:pointer;} /* --- Divine comedy - inferno --- */ .t-alig-divi h1.m-title{font-size:2.9rem;text-transform:uppercase;} .t-alig-divi h3.volume-title{font-size:2.6rem;text-align:center;margin-top:50px;line-height:1.6;font-weight:550;letter-spacing:1px;text-transform:uppercase;} .t-alig-divi h4.chapter-title{line-height:1.4;margin-bottom:50px;font-weight:550;font-family:'Satoshi-VariableItalic', sans-serif;font-style:italic;font-size:1.6rem;text-transform:uppercase;} .t-alig-divi .manuscript-header p.m-header-element{font-size:1rem;text-align:center;margin:50px auto;width:100%} .t-alig-divi .manuscript-text{margin:100px auto 200px;width:600px} @media (max-width:680px){.t-alig-divi .manuscript-text{width:100%;padding-right:30px;}} .t-alig-divi .manuscript-text .verse-col{width:100%;padding-left:30px} @media (max-width:550px){.t-alig-divi .manuscript-text .verse-col{padding-left:12px}} .t-alig-divi .manuscript-text p.prose-line{text-indent:0;margin:0;text-align:left;position:relative;display:block;padding:0 30px 0 0;width:100%} @media (max-width:550px){.t-alig-divi .manuscript-text p.prose-line{padding:0;}} .t-alig-divi .manuscript-text p.prose-line.no-indent{text-indent:-30px;width:100%;margin-left:0;margin-right:0;} @media (max-width:550px){.t-alig-divi .manuscript-text p.prose-line.no-indent{text-indent:-12px;}} .t-alig-divi .manuscript-text p.prose-line.line-last{margin-bottom:20px} .t-alig-divi .manuscript-text p span{position:absolute;top:11px;font-size:11px;line-height:1;right:0;text-align:right} @media (max-width:680px){.t-alig-divi .manuscript-text p span{right:-30px}} /* --- My brilliant career --- */ p.space-top{margin-top:30px} .book-page.t-fran-mybr .manuscript-wrapper{font-family:'Sentient-Variable', serif;} .book-page.t-fran-mybr .m-header-element{font-family:'Sentient-Variable-VariableItalic', serif;} .book-page.t-fran-mybr .manuscript-text p{width:100%;} .book-page.t-fran-mybr .manuscript-header{margin:30px 0 200px} .book-page.t-fran-mybr .chapter-title{text-transform:uppercase;margin-bottom:50px;font-size:1.2rem;font-weight:450;font-family:'Sentient-Variable', serif;font-style:normal} .book-page.t-fran-mybr .chapter-title.first-pages{margin-bottom:80px;} .book-page.t-fran-mybr .chapter-subtitle{margin-top:50px;text-align:center;font-family:'Sentient-VariableItalic', serif;font-size:1.6rem;font-style:italic;font-weight:450;margin-bottom:65px} .book-page.t-fran-mybr p.intext-title{text-transform:uppercase;} .book-page.t-fran-mybr p.italic{font-family:'Sentient-VariableItalic', serif;font-style:italic;} .book-page.t-fran-mybr p.prose-line{padding-left:50px;padding-right:50px;font-family:'Sentient-VariableItalic', serif;font-style:italic;} .book-page.t-fran-mybr p.narrow-par.qna, .book-page.t-fran-mybr p.narrow-par.par-list{padding-left:90px;text-indent:-30px} .book-page.t-fran-mybr p.intext-title2{text-transform:none;text-align:center;margin-top:65px;margin-bottom:30px} /* --- The lady with the little dog --- */ .book-page.t-chek-thel .manuscript-wrapper{font-family:'Sentient-Variable', serif;} .book-page.t-chek-thel .m-header-element{font-family:'Sentient-Variable-VariableItalic', serif;} .book-page.t-chek-thel .manuscript-text p{width:100%;font-family:'Sentient-Variable', serif;} .book-page.t-chek-thel .chapter-title{text-transform:uppercase;margin-bottom:50px;font-size:1.2rem;font-weight:450;font-family:'Sentient-Variable', serif;font-style:normal} /* --- Notes from Underground --- */ .book-page.t-dost-note .manuscript-wrapper{font-family:'BespokeSerif-Variable', serif;} .book-page.t-dost-note .m-header-element, .book-page.t-dost-note .chapter-title{font-family:'BespokeSerif-VariableItalic', serif;} .book-page.t-dost-note .part-title{text-align:center;text-transform:uppercase;margin-bottom:16px;font-size:1.2rem;font-weight:450;font-style:normal} .book-page.t-dost-note .chapter-title{text-align:center;margin-bottom:100px;font-size:1.8rem;font-weight:500;font-style:italic} .book-page.t-dost-note .chapter-title.part-2{margin-bottom:70px;text-transform:capitalize;} .book-page.t-dost-note .chapter-number{text-transform:uppercase;text-align:center;margin-bottom:50px;font-size:1.4rem;font-weight:450;font-style:normal} .book-page.t-dost-note h6{font-size:1rem;text-align:left;padding-left:5%;padding-right:5%;text-transform:unset;font-weight:400;width:450px;margin:0 auto;line-height:1.6;} .book-page.t-dost-note h6{text-indent:30px} .book-page.t-dost-note h6.no-indent{text-indent:0;} .book-page.t-dost-note h6.align-right.verse-author{text-align:right;font-weight:500;margin-right:calc(((100% - 450px)/2) + 24px);margin-top:12px;margin-bottom:100px} .book-page.t-dost-note h6.m-author{font-size:1.1rem;text-transform:uppercase;font-weight:550;letter-spacing:1.5px;line-height:1;padding:0;margin:0 auto;text-align:center;margin-bottom:50px} .book-page.t-dost-note .manuscript-text p.prose-line{text-indent:30px;margin:0;text-align:left;position:relative;display:block;padding:0 0 0 60px;width:100%} .book-page.t-dost-note .manuscript-text p.prose-line.spacer{margin-top:40px} .book-page.t-dost-note .manuscript-text p.prose-line.no-indent{text-indent:0;width:100%;margin-left:0;margin-right:0;} /* --- White Nights --- */ .book-page.t-dost-whit .manuscript-wrapper{font-family:'BespokeSerif-Variable', serif;} .book-page.t-dost-whit .m-header-element, .book-page.t-dost-whit .chapter-title, .book-page.t-dost-whit h5.sub-h-title{font-family:'BespokeSerif-VariableItalic', serif;} .book-page.t-dost-whit .chapter-title{text-align:center;text-transform:uppercase;margin-bottom:30px;font-size:1.2rem;font-weight:450;font-style:normal} .book-page.t-dost-whit h5.sub-h-title{text-align:center;margin-bottom:100px;font-size:1.3rem;font-weight:500;font-style:italic} /* --- The Book of Liwen --- */ .book-page.t-lette-theb .base-wrapper.manuscript-container{max-width:1500px} @media (max-width:1200px){.book-page.t-lette-theb .base-wrapper.manuscript-container{padding:0}} .book-page.t-lette-theb .manuscript-text{margin-bottom:50px;} .book-page.t-lette-theb .manuscript-header{padding:30px 0 100px} @media (max-width:768px){.book-page.t-lette-theb .manuscript-header{padding:30px 0 60px}} .book-page.t-lette-theb .manuscript-wrapper{font-family:'Sentient-Variable', serif;font-style:normal} .book-page.t-lette-theb .manuscript-text .inner-row{gap:30px} @media(max-width:1200px){.book-page.t-lette-theb .manuscript-text .inner-row{gap:20px}} @media(max-width:1050px){.book-page.t-lette-theb .manuscript-text .inner-row{flex-direction:column;gap:20px}} .book-page.t-lette-theb .manuscript-text .inner-col.entry-header{gap:0;align-self:center;width:50%} @media(max-width:1050px){.book-page.t-lette-theb .manuscript-text .inner-col.entry-header{width:100%}} .book-page.t-lette-theb .m-header-element{font-family:'Sentient-VariableItalic', serif;font-style:italic;font-size:1.8rem;font-weight:600} .book-page.t-lette-theb h6.m-author{font-weight:450} .book-page.t-lette-theb .manuscript-text .illustration{width:50%;align-self:center;} @media (max-width:1050px){.book-page.t-lette-theb .manuscript-text .illustration{width:500px;margin:0 auto 70px}} @media (max-width:570px){.book-page.t-lette-theb .manuscript-text .illustration{width:100%;}} .book-page.t-lette-theb .manuscript-text .entry-image{width:100%;height:auto;} .book-page.t-lette-theb .entry-header h6.entry-number{font-family:'Erode-Variable', serif;font-style:normal;font-size:1rem;font-weight:480;text-align:center;letter-spacing:9px;text-transform:uppercase;text-indent:0;margin-bottom:50px;} .book-page.t-lette-theb .entry-header h6.date-line{font-family:'Erode-VariableItalic', serif;font-style:italic;font-size:1rem;font-weight:480;text-align:center;text-transform:capitalize;margin-bottom:28px;} .book-page.t-lette-theb .entry-header h4.entry-title{font-family:'Erode-Variable', serif;font-style:normal;font-size:1.3rem;font-weight:500;text-align:center;text-transform:uppercase;margin-bottom:36px;letter-spacing:9px;} .book-page.t-lette-theb .entry-header .verse-text{margin:0 auto} .book-page.t-lette-theb .manuscript-text p.prose-line{text-indent:0;padding-left:0;margin:0} .book-page.t-lette-theb .manuscript-text p.prose-line.more-left{padding-left:180px} @media (max-width:600px){.book-page.t-lette-theb .manuscript-text p.prose-line.more-left{padding-left:30%}} .book-page.t-lette-theb .manuscript-text p.prose-line.mmore-left{padding-left:240px} @media (max-width:600px){.book-page.t-lette-theb .manuscript-text p.prose-line.mmore-left{padding-left:40%}} .book-page.t-lette-theb .manuscript-text p.prose-line.ex-padding-left{padding-left:320px} @media (max-width:600px){.book-page.t-lette-theb .manuscript-text p.prose-line.ex-padding-left{padding-left:50%}} .book-page.t-lette-theb .manuscript-text p.prose-line.spacer{margin-top:30px} /*.book-page.t-lette-theb .base-wrapper.manuscript-container{max-width:550px}*/ .book-page.t-lette-theb p.verse-date{text-align:right;font-size:0.9rem;margin-bottom:150px} /* ====================== BOOK INFO PAGES ====================== */ .books .wrapper{margin:200px 0 50px;} @media(max-width:768px){.books .wrapper{margin:60px 0 50px;}} .books .inner-col{gap:0} .info-image{width:100%;height:500px;} .title-wrapper{margin-top:80px;text-align:center;} @media(max-width:768px){.title-wrapper{margin-top:60px;}} h1.book-title{font-family:'Sentient-Variable';font-size:2.6rem;font-weight:550;letter-spacing:0.5px;line-height:1.3;padding:0;margin:0;color:#fff;} @media(max-width:768px){h1.book-title{font-size:2.4rem;}} h6.author-name{font-size:1.1rem;text-transform:uppercase;font-family:'Satoshi-Variable';font-weight:650;letter-spacing:1.5px;line-height:1.6;padding:0;margin:0;color:#fff;} .books .info-text h4.subheading{font-size: 1.375rem;font-weight:700;margin-top:20px;margin-bottom:20px} .info-text{margin-top:1.5rem} /* ----- toc button (trigger) ----- */ .toc-trigger {border:none;padding:15px 40px;font-size:1rem;font-weight:550;border-radius:2px;cursor:pointer;transition:transform 0.2s ease, box-shadow 0.2s ease;display: inline-flex;align-items: center;gap: 0.5rem;letter-spacing: 0.3px;margin:2rem 0;text-transform:uppercase;} .toc-trigger:hover {transform:translateY(-5px);} /* ====================== SPECIAL ENTRY ====================== */ /* --- The Versed Visions --- */ body.special-entry.se-lett-thev{background-color:#1a2845;} .se-lett-thev .base-900{color:#ecd178;} .se-lett-thev h6.author-name, .se-lett-thev h1.book-title{color:#ecd178} .se-lett-thev .table-contents{margin-top:70px} .se-lett-thev .table-contents ul{list-style:none;width:100%} .se-lett-thev .table-contents ul li{padding:0;margin:0;border-bottom:1px solid rgba(197, 175, 136, 0.4)} .se-lett-thev .table-contents ul li:hover{background-color:#17243e;} .se-lett-thev .table-contents ul li.appendix.first-line.s-liwe, .se-lett-thev .table-contents li.appendix.mid-line.s-liwe{border-bottom:none} .se-lett-thev .table-contents ul li.appendix.last-line.s-liwe{border-bottom:1px solid rgba(197, 175, 136, 0.4)} .se-lett-thev .table-contents .list-line{display:flex;width:100%;font-size:1.5rem;font-weight:300;color:#c5af88;} @media(max-width:600px){.se-lett-thev .table-contents .list-line{font-size:16px;font-weight:370}} .se-lett-thev .table-contents ul li.appendix.mid-line.s-liwe .list-line , .se-lett-thev .table-contents ul li.appendix.last-line.s-liwe .list-line {font-size:18px;} @media(max-width:600px){ .se-lett-thev .table-contents ul li.appendix.mid-line.s-liwe .list-line , .se-lett-thev .table-contents ul li.appendix.last-line.s-liwe .list-line {font-size:14px;}} .se-lett-thev .table-contents .list-line .list-item.number{width:16%;display:inline;float:left;padding:10px 20px;text-align:right;font-size:1.5rem;line-height:1;font-weight:300} @media(max-width:600px){.se-lett-thev .table-contents .list-line .list-item.number{font-size:26px;padding:10px 10px}} .se-lett-thev .table-contents .list-line .list-item.title{width:84%;display:inline;float:left;padding:10px 20px;line-height:1;text-transform:capitalize;} @media(max-width:600px){.se-lett-thev .table-contents .list-line .list-item.title{padding:10px 10px;}} .se-lett-thev .table-contents .list-line .list-item.title span{display:block;font-size:12px;text-transform:uppercase;margin-top:5px} @media(max-width:600px){.se-lett-thev .table-contents .list-line .list-item.title span{font-size:9px;}} .se-lett-thev .table-contents .list-line .list-item.title span.title-heading{font-size:24px;text-transform:capitalize;} @media(max-width:600px){.se-lett-thev .table-contents .list-line .list-item.title span.title-heading{font-size:16px;text-transform:capitalize;}} .se-lett-thev .table-contents .list-line .list-item a:link{cursor:pointer;color:#c5af88} .se-lett-thev .table-contents .list-line .list-item a.s-liwe.list-link:active, .se-lett-thev .table-contents .list-line .list-item a.s-liwe.list-link:visited{color:#c5af88;} .se-lett-thev .table-contents .list-line .list-item a.s-liwe.list-link:hover{color:#e2d7c3;} .se-lett-thev .table-contents .list-line .list-item.image{width:32%;display:inline;float:left;padding:0 10px 10px} .se-lett-thev .table-contents .list-line .list-item.image img.last-image{margin-top:-2px} .se-lett-thev .table-contents .list-line .list-item img.landscape{width:150px;height:auto} @media (max-width:600px){.se-lett-thev .table-contents .list-line .list-item img.landscape{width:90%;}} .se-lett-thev .table-contents .list-line .list-item img.portrait{width:100px;height:auto;margin-left:25px} @media (max-width:600px){.se-lett-thev .table-contents .list-line .list-item img.portrait{width:60%;margin-left:20%}} .se-lett-thev .toc-trigger {background:#eac769;color:#1a2845;} .se-lett-thev .toc-trigger:hover {box-shadow:0 4px 20px rgba(244, 229, 196, 0.15);} .se-lett-thev .table-container {background:#1a2845;border-radius:0;padding:0 1rem;margin:0.5rem 0 1.8rem 0;overflow:hidden;max-height:0;opacity: 0;visibility:hidden;transition:max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1),opacity 0.35s ease,visibility 0s 0.4s,margin 0.3s ease,padding 0.3s ease;border-top:6px solid rgba(197, 175, 136, 0.4);border-bottom:6px solid rgba(197, 175, 136, 0.4);} .se-lett-thev .table-container.open {max-height:560px;opacity:1;visibility:visible;margin:1rem 0 2rem 0;padding:0.5rem 0.2rem 0.2rem 0.2rem;transition:max-height 0.6s cubic-bezier(0.22, 1, 0.36, 1),opacity 0.4s ease,visibility 0s 0s,margin 0.3s ease,padding 0.3s ease;} .se-lett-thev .table-scroll {max-height:480px;overflow-y:auto;overflow-x:auto;border-radius:0;/* hide scrollbar for Firefox */scrollbar-width:none;/* hide scrollbar for IE/Edge */-ms-overflow-style:none;padding-right: 2px;} .se-lett-thev .table-scroll::-webkit-scrollbar {display:none;width:0;height:0;} .se-lett-thev .meta-note {color:#64748b;font-size:0.85rem;margin-top:0.6rem;background:#f1f5f9;padding:0.3rem 0.9rem;border-radius:30px;display:inline-block;} .se-lett-thev .table-scroll {position:relative;} .se-lett-thev .table-footer {display:flex;justify-content:flex-end;padding:0.3rem 0.6rem 0.2rem 0;font-size:0.75rem;color:#94a3b8;gap:0.5rem;border-top:1px solid rgba(197, 175, 136, 0.4);margin-top:4px;} .se-lett-thev p.italic{font-style:italic;font-family:'Satoshi-VariableItalic', sans-serif;} .books .wrapper .base-900 p{font-size:1.125rem;} /* ====================== BOOKS ====================== */ /* --- OMEGA --- */ body.books.b-flam-omeg{background-color:#0e192d;} .b-flam-omeg .base-900{color:#f4e5c4;} .b-flam-omeg h6.author-name, .b-flam-omeg h1.book-title{color:#f4e5c4} .b-flam-omeg .toc-trigger {background:#f4e5c4;color:#0e192d;} /* --- WHITE NIGHTS --- */ body.books.b-dost-whit{background-color:#5a235c;} .b-dost-whit .base-900{color:#f9eeda;} .b-dost-whit h6.author-name, .b-dost-whit h1.book-title{color:#f9eeda} .b-dost-whit .toc-trigger {background:#f9eeda;color:#5a235c;} /* --- THE MAN FROM SNOWY RIVER --- */ body.books.b-pate-them{background-color:#401802;} .b-pate-them .base-900{color:#f9eeda;} .b-pate-them h6.author-name, .b-pate-them h1.book-title{color:#f9eeda} .b-pate-them .toc-trigger {background:#f9eeda;color:#401802;} /* --- THE COUNT OF MONTE CRISTO --- */ body.books.b-duma-thec{background-color:#2c4f6c} .b-duma-thec .base-900{color:#f5edd6} .b-duma-thec h6.author-name, .b-duma-thec h1.book-title{color:#f5edd6} .b-duma-thec .toc-trigger {background:#f5edd6;color:#2c4f6c} /* --- ODYSSEY --- */ body.books.b-home-theo{background-color:#1d202a} .b-home-theo .base-900{color:#fdf4de} .b-home-theo h6.author-name, .b-home-theo h1.book-title{color:#fdf4de} .b-home-theo .toc-trigger {background:#fdf4de;color:#1d202a} /* --- CAESAR'S COLUMN --- */ body.books.b-donn-caes{background-color:#171813} .b-donn-caes .base-900{color:#fde9d9} .b-donn-caes h6.author-name, .b-donn-caes h1.book-title{color:#fde9d9} .b-donn-caes .toc-trigger {background:#fde9d9;color:#171813} /* --- THE MOST DANGEROUS GAME --- */ body.books.b-conn-them{background-color:#0b1822} .b-conn-them .base-900{color:#fff} .b-conn-them h6.author-name, .b-conn-them h1.book-title{color:#fff} .b-conn-them .toc-trigger {background:#fff;color:#0b1822} /* --- THE LADY WITH THE LITTLE DOG --- */ body.books.b-chek-thel{background-color:#111} .b-chek-thel .base-900{color:#fff} .b-chek-thel h6.author-name, .b-chek-thel h1.book-title{color:#fff} .b-chek-thel .toc-trigger {background:#fff;color:#111} /* --- DIVINE COMEDY - INFERNO --- */ body.books.b-alig-infe{background-color:#2d0a07} .b-alig-infe .base-900{color:#fff} .b-alig-infe h6.author-name, .b-alig-infe h1.book-title{color:#fff} .b-alig-infe .toc-trigger {background:#fff;color:#2d0a07} .b-alig-infe .info-image{height:550px;} /* --- NOTES FROM UNDERGROUND --- */ body.books.b-dost-note{background-color:#211f24} .b-dost-note .base-900{color:#f2d9d7} .b-dost-note h6.author-name, .b-dost-note h1.book-title{color:#f2d9d7} .b-dost-note .toc-trigger {background:#f2d9d7;color:#211f24} /* --- MY BRILLIANT CAREER --- */ body.books.b-fran-mybr{background-color:#402c17} .b-fran-mybr .base-900{color:#fbeed3} .b-fran-mybr h6.author-name, .b-fran-mybr h1.book-title{color:#fbeed3} .b-fran-mybr .toc-trigger {background:#fbeed3;color:#402c17} /* --- PRIDE AND PREJUDICE --- */ body.books.b-aust-prid{background-color:#434d3c} .b-aust-prid .base-900{color:#fbeed3} .b-aust-prid h6.author-name, .b-aust-prid h1.book-title{color:#fbeed3} .b-aust-prid .toc-trigger {background:#fbeed3;color:#434d3c} .b-aust-prid .info-image{height:400px;} /* --- THE ART OF WAR --- */ body.books.b-sunt-thea{background-color:#151921} .b-sunt-thea .base-900{color:#d4be97} .b-sunt-thea h6.author-name, .b-sunt-thea h1.book-title{color:#d4be97} .b-sunt-thea .toc-trigger {background:#d4be97;color:#151921} .b-sunt-thea .info-image{height:550px;} /* --- METAMORPHOSIS --- */ body.books.b-kafk-them{background-color:#31384a} .b-kafk-them .base-900{color:#eaebec} .b-kafk-them h6.author-name, .b-kafk-them h1.book-title{color:#eaebec} .b-kafk-them .toc-trigger {background:#eaebec;color:#31384a} .b-kafk-them .info-image{height:558px;} /* --- WONDER TALES FROM TIBET --- */ body.books.b-jewe-wond{background-color:#77120f} .b-jewe-wond .base-900{color:#f4d77b} .b-jewe-wond h6.author-name, .b-jewe-wond h1.book-title{color:#f4d77b} .b-jewe-wond .toc-trigger {background:#f4d77b;color:#77120f} .b-jewe-wond .info-image{height:556px;} /* --- THE GREAT GATSBY --- */ body.books.b-fitz-theg{background-color:#171d31} .b-fitz-theg .base-900{color:#c96962} .b-fitz-theg h6.author-name, .b-fitz-theg h1.book-title{color:#c96962} .b-fitz-theg .toc-trigger {background:#c96962;color:#171d31} .b-fitz-theg .info-image{height:550px;} /* --- THE HOUSE OF MIRTH --- */ body.books.b-whar-theh{background-color:#091314} .b-whar-theh .base-900{color:#eab76f} .b-whar-theh h6.author-name, .b-whar-theh h1.book-title{color:#eab76f} .b-whar-theh .toc-trigger {background:#eab76f;color:#091314} /* serial page */ .serial-page.s-liwe .base-wrapper.s-liwe{margin-bottom:100px;overflow:auto;} .serial-page.s-liwe .page-title.s-liwe{margin:80px 0 40px 0;padding:0 20px} @media(max-width:600px){.serial-page.s-liwe .page-title.s-liwe{margin:30px 0 40px 0;}} .serial-page.s-liwe .page-title.s-liwe h1{position:relative;display:block;text-align:left;font-size:90px;line-height:1;text-transform:uppercase;font-family:'Literata-Variable';font-weight:700;color:#c5af88;} @media (max-width:768px){.serial-page.s-liwe .page-title.s-liwe h1{font-size:70px}} @media (max-width:600px){.serial-page.s-liwe .page-title.s-liwe h1{font-size:40px}} .serial-page.s-liwe .page-title.s-liwe hr{height:1px;background-color:#191919;border-width:0} .serial-page.s-liwe .list ul{list-style:none;width:100%} .serial-page.s-liwe .list ul li{padding:0;margin:0;border-bottom:1px solid rgba(197, 175, 136, 0.4)} .serial-page.s-liwe .list ul li:first-child{padding:0;margin:0;border-top:6px solid rgba(197, 175, 136, 0.4)} .serial-page.s-liwe .list ul li:hover{background-color:#302c24;} .serial-page.s-liwe .list ul li.appendix.first-line.s-liwe, .serial-page.s-liwe .list ul li.appendix.mid-line.s-liwe{border-bottom:none} .serial-page.s-liwe .list ul li.appendix.last-line.s-liwe{border-bottom:1px solid rgba(197, 175, 136, 0.4)} .serial-page.s-liwe .list .list-line{display:flex;width:100%;font-size:24px;font-weight:300;color:#c5af88;} @media(max-width:600px){.serial-page.s-liwe .list .list-line{font-size:16px;font-weight:370}} .serial-page.s-liwe .list ul li.appendix.mid-line.s-liwe .list-line , .serial-page.s-liwe .list ul li.appendix.last-line.s-liwe .list-line {font-size:18px;} @media(max-width:600px){ .serial-page.s-liwe .list ul li.appendix.mid-line.s-liwe .list-line , .serial-page.s-liwe .list ul li.appendix.last-line.s-liwe .list-line {font-size:14px;}} .serial-page.s-liwe .list .list-line .list-item.number{width:16%;display:inline;float:left;border-right:1px solid rgba(197, 175, 136, 0.4);padding:10px 20px;text-align:right;font-size:32px;line-height:1;font-weight:300} @media(max-width:600px){.serial-page.s-liwe .list .list-line .list-item.number{font-size:26px;padding:10px 10px}} .serial-page.s-liwe .list .list-line .list-item.title{width:52%;display:inline;float:left;padding:10px 20px;line-height:1;} @media(max-width:600px){.serial-page.s-liwe .list .list-line .list-item.title{padding:10px 10px;}} .serial-page.s-liwe .list .list-line.image-none .list-item.title{width:84%;} .serial-page.s-liwe .list .list-line .list-item.title span{display:block;font-size:12px;text-transform:uppercase;margin-top:5px} @media(max-width:600px){.serial-page.s-liwe .list .list-line .list-item.title span{font-size:9px;}} .serial-page.s-liwe .list .list-line .list-item.title span.title-heading{font-size:24px;text-transform:capitalize;} @media(max-width:600px){.serial-page.s-liwe .list .list-line .list-item.title span.title-heading{font-size:16px;text-transform:capitalize;}} .serial-page.s-liwe .list .list-line .list-item a:link{cursor:pointer;color:#c5af88} .serial-page.s-liwe .list .list-line .list-item a.s-liwe.list-link:active, .serial-page.s-liwe .list .list-line .list-item a.s-liwe.list-link:visited{color:#c5af88;} .serial-page.s-liwe .list .list-line .list-item a.s-liwe.list-link:hover{color:#e2d7c3;} .serial-page.s-liwe .list .list-line .list-item.image{width:32%;display:inline;float:left;padding:0 10px 10px} .serial-page.s-liwe .list .list-line .list-item.image img.last-image{margin-top:-2px} .serial-page.s-liwe .list .list-line .list-item img.landscape{width:150px;height:auto} @media (max-width:600px){.serial-page.s-liwe .list .list-line .list-item img.landscape{width:90%;}} .serial-page.s-liwe .list .list-line .list-item img.portrait{width:100px;height:auto;margin-left:25px} @media (max-width:600px){.serial-page.s-liwe .list .list-line .list-item img.portrait{width:60%;margin-left:20%}} /* instalment page */ body.instalment-page.s-liwe{background-color:#1A150C;} .instalment-page.s-liwe .base-wrapper.s-liwe{position:relative;display:block;max-width:1700px;margin:140px auto 0;padding:20px;font-family:'Satoshi-variable';font-weight:400;color:var(--text-primary);} @media (max-width:600px){.instalment-page.s-liwe .base-wrapper.s-liwe{padding:0;}} .instalment-page.s-liwe .content.s-liwe{position:relative;display:flex;padding:90px 0 200px 0} @media (max-width:1000px){.instalment-page.s-liwe .content.s-liwe{flex-direction:column;padding:40px 0 100px 0}} .instalment-page.s-liwe .content .text-outer{width:50%;padding:0 40px 0 10px;align-self:flex-start} @media (max-width:1000px){.instalment-page.s-liwe .content .text-outer{width:100%;align-self:unset;order:1;flex-direction:column;padding:0 20px 0 20px;}} .instalment-page.s-liwe .content .text-outer.full-width{width:100%;padding-right:10px} .instalment-page.s-liwe .content .text-outer .text-inner {width:100%;display:flex;justify-content:flex-start;} @media (max-width:1000px){.instalment-page.s-liwe .content .text-outer .text-inner {justify-content:unset;flex-direction:column;}} .instalment-page.s-liwe .content .text-outer .text-inner .title{width:100%;margin:0 0 100px 0} @media (max-width:1000px){.instalment-page.s-liwe .content .text-outer .text-inner .title{margin:0 0 80px 0}} .instalment-page.s-liwe .content .text-outer .text-inner .title h1 {font-size:24px;font-family:'Recia-VariableItalic';color:#c5af88;margin-top:0} .instalment-page.s-liwe .content .text-outer .text-inner .title p{color:#c5af88;font-size:20px;} .instalment-page.s-liwe .content .text-outer .text-inner .info.desktop {width:30%;padding:121px 40px 0 0;font-family:"Zen Maru Gothic", serif;} .instalment-page.s-liwe .content .text-outer .text-inner .info.mobile{display:none;} @media (max-width:1000px){ .instalment-page.s-liwe .content .text-outer .text-inner .info.desktop{display:none} .instalment-page.s-liwe .content .text-outer .text-inner .info.mobile{display:block;order:2;width:100%;padding:0 15px}} @media (max-width:600px){ .instalment-page.s-liwe .content .text-outer .text-inner .info.mobile{padding:0}} .instalment-page.s-liwe .content .text-outer .text-inner .info .number {border-bottom:1px solid #c5af88} .instalment-page.s-liwe .content .text-outer .text-inner .info p {font-size:17px;font-weight:400;color:#c5af88;margin:6px 0 6px 0} .instalment-page.s-liwe .content .text-outer .text-inner .text {width:70%;padding:0 15px} @media (max-width:1000px){.instalment-page.s-liwe .content .text-outer .text-inner .text {width:100%;padding:0 15px 50px;order:1}} @media (max-width:600px){.instalment-page.s-liwe .content .text-outer .text-inner .text {padding:0 0 50px;}} .instalment-page.s-liwe .content .text-outer .text-inner .text p.rev-text{font-family:'CrimsonPro-Variable';font-size:24px;font-weight:400;color:#c5af88} .instalment-page.s-liwe .content .text-outer .text-inner .text p.rev-text::first-letter{font-size:330%;padding:0;margin-right:3px;float:left;line-height:0.7;} .instalment-page.s-liwe .content .text-outer .text-inner .text .quote{text-align:left;width:250px;margin:50px 0 0 20%} .instalment-page.s-liwe .content .text-outer .text-inner .text .quote p.quote-text{font-size:16px;font-weight:400;color:#c5af88;line-height:1.33;margin-bottom:16px;} .instalment-page.s-liwe .content .text-outer .text-inner .text .quote p.quote-author{font-size:14px;font-style:italic;font-weight:470;color:#c5af88;line-height:1.2;text-align:right} .instalment-page.s-liwe .content .image-outer {width:50%;padding:0 40px 0 40px;overflow-y:auto;max-height:100vh;min-height:550px} @media (max-width:1000px){.instalment-page.s-liwe .content .image-outer {width:100%;padding:0 35px 0 35px;overflow-y:unset;max-height:unset;min-height:unset;order:2}} @media (max-width:600px){.instalment-page.s-liwe .content .image-outer {padding:0 20px 0 20px;}} @media (max-width:1000px){ .instalment-page.s-liwe .content .image-outer .info.mobile {width:100%;padding:50px 0 0 0;font-family:"Zen Maru Gothic", serif;max-width:542px} .instalment-page.s-liwe .content .image-outer .info.mobile.landscape {max-width:750px} .instalment-page.s-liwe .content .image-outer .info .number {border-bottom:1px solid #c5af88} .instalment-page.s-liwe .content .image-outer .info p {font-size:17px;font-weight:400;color:#c5af88;margin:6px 0 6px 0}} .instalment-page.s-liwe .content .image-outer img.landscape{width:100%;height:auto} @media (max-width:1000px){.instalment-page.s-liwe .content .image-outer img.landscape{width:100%;height:auto;max-width:750px}} .instalment-page.s-liwe .content .image-outer img.portrait{width:100%;height:auto;max-width:542px} /* instalment page - navigation */ .instalment-page.s-liwe .container.navigation{padding:0 var(--spacing-md);margin:0 0 var(--spacing-sm)} .instalment-page.s-liwe .nav-buttons.inner-row{justify-content:flex-start;gap:4px} .instalment-page.s-liwe .nav-buttons .nav-button{width:50px;height:50px;background-color:#1A150C;border:1px solid #4e4636;border-radius:4px;color:#c5af88;transition:all 0.3s ease;line-height:1;} .instalment-page.s-liwe .nav-buttons .nav-button.inner-row{align-items:center;justify-content:center;} .instalment-page.s-liwe .nav-buttons .button-next.nav-button.inner-row a:link{cursor:pointer !important} .instalment-page.s-liwe .nav-buttons .button-next.nav-button.inner-row a.nav-btn.disable:link{cursor:default;pointer-events:none;} .instalment-page.s-liwe .nav-buttons .nav-button .nav-btn img{width:14px;height:auto;filter:invert(76%) sepia(22%) saturate(415%) hue-rotate(360deg) brightness(89%) contrast(93%);pointer-events:none;} .instalment-page.s-liwe .nav-buttons .nav-button:hover{transform:translateY(-3px);box-shadow:0 10px 20px rgba(197, 175, 18, 0.1);} .instalment-page.s-liwe .nav-buttons .nav-button.disable{border:1px solid #302c24;} .instalment-page.s-liwe .nav-buttons .nav-button.disable:hover{cursor:default;transform:none;box-shadow:none} .instalment-page.s-liwe .nav-buttons .nav-button.disable .nav-btn img.end-btn{filter:invert(16%) sepia(27%) saturate(210%) hue-rotate(333deg) brightness(70%) contrast(90%);} /* ====================== FOOTER ====================== */ .footer {color:#fff;padding: 3.4rem 1.5rem 1.5rem;font-size: 0.85rem;line-height: 1.5;align-self:flex-end;background-color:#01010b;font-family:'Satoshi-Variable',sans-serif;} @media (max-width:767px){.footer {padding:2rem 1.5rem 1.5rem;}} .footer-inner {max-width: 1024px;margin: 0 auto;} /* ---- footer columns (desktop) ---- */ .footer-links {display: flex;flex-wrap: wrap;justify-content: space-between;padding-bottom: 1.5rem;border-bottom: 1px solid rgba(255,255,255,0.25);margin-bottom: 1rem;gap: 1rem;} @media (max-width: 768px){.footer-links {flex-direction: column;border-bottom: none;padding-bottom: 0;gap: 0;margin-bottom:0;}} .footer-col {flex: 1 1 150px;min-width: 120px} @media (max-width: 768px){.footer-col {flex: none;width: 100%;border-bottom: 1px solid rgba(255,255,255,0.3);padding: 0;}} .footer-col h4, .single-page .footer-col h4 {color: #fff;font-weight: 600;font-size: 0.9rem;letter-spacing: 0.02em;margin-bottom: 0.9rem;padding-bottom: 0.2rem;cursor: default;font-family:'Satoshi-Variable', sans-serif;text-align:center;line-height: 1.15;} @media (max-width: 768px){.footer-col h4 {display: flex;justify-content: space-between;align-items: center;cursor: pointer;margin-bottom: 0;padding: 0.75rem 0;font-size: 0.95rem;user-select: none;}} @media (max-width: 480px){.footer-col h4 {font-size: 0.9rem;padding: 0.7rem 0;}} .footer-col ul {list-style: none;} @media (max-width: 768px){.footer-col ul {max-height: 0;overflow: hidden;transition: max-height 0.3s ease, padding 0.3s ease;padding: 0;margin: 0;}} @media (max-width: 768px){.footer-col.open ul {max-height: 500px;padding: 0 0 0.8rem 0.2rem;}} .footer-col li {margin-bottom: 0.5rem;text-align:center;text-transform:capitalize;} @media (max-width: 768px){.footer-col li {text-align:left;}} @media (max-width: 480px){.footer-col ul li {font-size: 0.85rem;}} .footer-col a {color: #cccccc;text-decoration: none;transition: color 0.1s;} .footer-col a:hover {color: #fff;text-decoration: underline;} @media (max-width: 768px){.footer-col:last-child {border-bottom: none;}} .chevron {display: none; /* Hidden on desktop */font-size: 0.8rem;transition: transform 0.3s ease;} @media (max-width: 768px){.chevron {display: inline-block;}} @media (max-width: 768px){.footer-col.open .chevron {transform: rotate(180deg);}} .footer-logo-text{font-family:'Author-Variable';font-weight:400;font-size:1.2rem;width:100px;letter-spacing:1px;text-transform:uppercase;line-height:1.2;display:inline;color:#fff;} /* ----- footer legal ----- */ .footer-legal, .single-page .footer-legal {display: flex;flex-wrap: wrap;justify-content:center;align-items: center;color: #6e6e73;font-size: 0.75rem;padding-top: 0.5rem;text-align:center;} @media (max-width: 768px){.footer-legal {padding-top: 1.16rem;border-top: 1px solid rgba(255,255,255,0.3);margin-top: 0.2rem;flex-direction: column;text-align: center;gap: 0.5rem;}} @media (max-width: 768px){.legal-links {display: flex;flex-wrap: wrap;justify-content: center;gap: 0.5rem 1rem;}} .legal-links a {color: #6e6e73;text-decoration: none;margin-left: 0.8rem;} @media (max-width: 480px){.legal-links a {margin-left: 0.5rem;}} .legal-links a:hover {text-decoration: underline;color: #1d1d1f;} /* ====================== RESPONSIVE ADJUSTMENTS ====================== */ @media (max-width: 768px) { .logo-wrapper {left: 40px;right: 40px;} .scrolled .logo-wrapper {left: 40px !important;right: auto !important; /* Remove right positioning */transform: none !important;} .hero h1 {font-size: 2.5rem;} .hero p {font-size: 1rem;} .contact-cards {flex-direction: column;} .contact-card {min-width: 100%;}} @media (max-width: 480px) { .logo-wrapper {left: 20px;right: 20px;} .scrolled .logo-wrapper {left: 20px !important;height: 40px;} .subscribe-form {flex-direction: column;} .subscribe-form input, .subscribe-form button {border-radius: 50px;width: 100%;} .subscribe-form input {margin-bottom: 1rem;}} /* Cursor Fix - Add this LAST in your CSS */ a, a:hover, a:active, a:visited, [href], [onclick], [role="button"], button, button:hover { cursor: pointer !important; } /* Force pointer on interactive elements */ .clickable, [data-click], [data-menu], .menu-toggle, .offc-menu-toggle, .close-btn, .offcanvasmenu-close-btn { cursor: pointer !important; } /* Images inside links shouldn't block pointer */ a img, [href] img { pointer-events: none !important; } .newspaper-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; grid-auto-flow: dense; } .clipping-item { cursor: pointer; transition: transform 0.3s ease; } .clipping-item:hover { transform: scale(1.02); } .newspaper-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); display: none; align-items: center; justify-content: center; z-index: 1000; opacity: 0; transition: opacity 0.3s ease; } .newspaper-overlay.active { opacity: 1; } .newspaper-content { background: white; max-width: 800px; max-height: 90vh; padding: 30px; overflow-y: auto; position: relative; border-radius: 4px; } .close-newspaper { position: absolute; top: 20px; right: 20px; background: none; border: none; font-size: 30px; cursor: pointer; color: white; }