:root{--bg:#101114;--panel:#202124;--panel2:#191a1d;--text:#f5f5f5;--muted:#b6b6bc;--accent:#ff5d2f;--gold:#ffca54;--line:#38393e}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif}a{color:inherit;text-decoration:none}.site-header{height:78px;border-bottom:1px solid #27282d;background:#111215;position:relative;z-index:10}.site-nav{height:100%;width:calc(100% - 70px);margin:auto;display:flex;align-items:center;gap:32px}.brand{font-weight:800;font-size:22px;letter-spacing:-.5px;display:flex;align-items:center;gap:9px}.brand-mark{display:inline-block;width:18px;height:21px;background:var(--accent);border-radius:12px 12px 12px 2px}.main-nav{margin-left:auto}.main-nav ul{display:flex;gap:30px;list-style:none;margin:0;padding:0}.main-nav a,.nav-actions a{font-size:15px;color:#e8e8eb}.nav-actions{display:flex;align-items:center;gap:22px;border-left:1px solid #33343a;padding-left:25px}.subscribe-nav{background:#f3f3f3!important;color:#202124!important;padding:12px 21px;border-radius:999px;font-weight:700;font-size:13px!important}.search-icon{font-size:28px!important;border-left:1px solid #33343a;padding-left:25px}.menu-toggle{display:none;background:none;border:0;color:#fff;font-size:24px}.cover-rail{padding:24px 0 0;overflow:hidden}.cover-rail-track{display:flex;gap:28px;padding:0 60px;width:max-content}.rail-cover{width:190px;height:190px;flex:0 0 190px;border-radius:3px;overflow:hidden;background:linear-gradient(135deg,#29475c,#ffbd4a);display:grid;place-items:end start}.rail-cover img{width:100%;height:100%;object-fit:cover}.rail-cover span{font-weight:900;font-size:22px;line-height:.95;padding:18px;text-transform:uppercase}.demo-cover:nth-child(2n){background:linear-gradient(135deg,#d1b47b,#25231d)}.demo-cover:nth-child(3n){background:linear-gradient(135deg,#1e4b6e,#161724)}.demo-cover:nth-child(4n){background:linear-gradient(135deg,#d86b83,#421127)}.why-plans{max-width:1460px;margin:115px auto 0;padding:0 60px 36px;display:grid;grid-template-columns:1fr 1.5fr;gap:80px;align-items:center}.why-copy h1{font-size:68px;line-height:.98;letter-spacing:-3px;margin:0 0 30px;max-width:650px}.why-copy h1 span{display:block;color:#e8e8eb}.why-copy h1:first-letter{}.why-copy h1{color:var(--accent)}.benefits{list-style:none;padding:0;margin:0;display:grid;gap:18px;color:#d7d7db}.benefits li{font-size:16px}.benefits li:before{content:"✓";color:#d7d7db;font-size:24px;margin-right:12px}.plans-panel{background:linear-gradient(145deg,#191a1d,#202124);border-radius:20px;padding:0 18px 18px;box-shadow:0 25px 70px #0005}.plans-kicker{display:table;margin:0 auto;background:var(--gold);color:#222;padding:8px 26px;border-radius:0 0 7px 7px;font-size:12px;font-weight:800}.plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding-top:22px}.plan-card{position:relative;border:1px solid #393a3f;border-radius:14px;padding:25px 20px;background:linear-gradient(145deg,#242529,#1f2023)}.plan-card.popular{border-color:var(--accent);box-shadow:inset 0 0 0 1px #ff5d2f55}.popular-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--accent);padding:7px 28px;border-radius:5px;font-size:11px;font-weight:900;white-space:nowrap}.plan-card h2{margin:0 0 8px;font-size:24px}.plan-subtitle{color:#d2d2d6;font-size:13px;margin:0}.price{margin:18px 0 6px;display:flex;align-items:baseline;gap:8px}.price strong{font-size:43px;color:var(--accent)}.price span,.renewal{font-size:13px;color:#d0d0d4}.renewal{margin:0 0 17px}.plan-button{display:block;background:var(--accent);color:white;text-align:center;padding:11px;border-radius:6px;font-size:13px;font-weight:900;text-transform:uppercase;margin-bottom:16px}.plan-card ul{padding:0;margin:0;list-style:none;display:grid;gap:10px;color:#d0d0d5;font-size:13px}.plan-card li:before{content:"✓";color:var(--accent);font-weight:900;margin-right:9px}.plan-assurances{margin-top:20px;border:1px solid #36373b;border-radius:14px;display:grid;grid-template-columns:repeat(3,1fr);padding:18px;gap:15px}.plan-assurances>div{display:flex;align-items:center;gap:13px}.plan-assurances span{color:var(--accent);font-size:27px}.plan-assurances p{margin:0;font-size:13px}.plan-assurances small{display:block;color:#a9a9b0;margin-top:3px}.discover-section{max-width:1340px;margin:0 auto;padding:80px 30px}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:30px}.section-label{color:var(--accent);font-size:11px;font-weight:900;letter-spacing:2px;margin:0 0 10px}.section-heading h2{font-size:42px;margin:0;letter-spacing:-1.5px}.section-heading>a{color:#d8d8dd}.book-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}.book-cover{display:block;aspect-ratio:2/3;background:#2b2c30;border-radius:8px;overflow:hidden}.book-cover img{width:100%;height:100%;object-fit:cover;transition:transform .25s}.book-card:hover img{transform:scale(1.04)}.placeholder-cover{height:100%;display:grid;place-items:center;padding:18px;background:linear-gradient(145deg,#ff5d2f,#533c91);font-size:20px;font-weight:900}.book-card h3{font-size:15px;margin:11px 0 3px}.book-card p{color:var(--muted);font-size:13px;margin:0}.catalogue-hero,.content-page,.single-book-page{max-width:1180px;margin:auto;padding:80px 30px}.catalogue-hero h1,.content-page h1,.single-book-page h1{font-size:58px;margin:0 0 25px}.book-search{display:flex;max-width:650px}.book-search input{flex:1;border:0;padding:16px;border-radius:8px 0 0 8px}.book-search button{border:0;background:var(--accent);color:#fff;padding:0 25px;border-radius:0 8px 8px 0;font-weight:800}.single-book-layout{display:grid;grid-template-columns:360px 1fr;gap:65px}.single-book-cover img,.single-book-cover .placeholder-cover{width:100%;border-radius:12px}.book-author{font-size:20px;color:var(--muted)}.book-meta{display:flex;gap:10px}.book-meta span{padding:8px 12px;border-radius:999px;background:#28292e}.book-description{max-width:720px;line-height:1.7;margin:24px 0}.primary-action{display:inline-block;background:var(--accent);padding:14px 24px;border-radius:8px;font-weight:800}.site-footer{background:#0b0c0e;border-top:1px solid #24252a;padding:55px 60px 20px}.footer-wrap{max-width:1340px;margin:auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}.footer-wrap p,.footer-wrap a{color:#a8a8ae}.footer-wrap h4{margin:0 0 12px}.footer-wrap a:not(.brand){display:block;margin:8px 0}.footer-bottom{max-width:1340px;margin:40px auto 0;padding-top:18px;border-top:1px solid #24252a;color:#888;font-size:13px}.pagination{margin-top:35px}.pagination .page-numbers{padding:8px;color:#ddd}@media(max-width:1050px){.why-plans{grid-template-columns:1fr;gap:45px;margin-top:70px}.book-grid{grid-template-columns:repeat(4,1fr)}.why-copy h1{font-size:58px}.site-nav{width:calc(100% - 36px)}.cover-rail-track{padding:0 30px}}@media(max-width:760px){.site-header{height:68px}.main-nav,.nav-actions{display:none}.main-nav.open{display:block;position:absolute;top:68px;left:0;right:0;background:#15161a;padding:20px;border-bottom:1px solid #333}.main-nav.open ul{display:grid;gap:18px}.menu-toggle{display:block;margin-left:auto}.cover-rail-track{gap:14px}.rail-cover{width:130px;height:150px;flex-basis:130px}.why-plans{padding:0 20px 30px;margin-top:55px}.why-copy h1{font-size:47px;letter-spacing:-2px}.plans-grid{grid-template-columns:1fr}.plan-assurances{grid-template-columns:1fr}.book-grid{grid-template-columns:repeat(2,1fr)}.section-heading h2{font-size:32px}.discover-section{padding:55px 20px}.single-book-layout{grid-template-columns:1fr}.single-book-cover{max-width:280px}.catalogue-hero,.content-page,.single-book-page{padding:55px 20px}.catalogue-hero h1,.content-page h1,.single-book-page h1{font-size:42px}.footer-wrap{grid-template-columns:1fr}.site-footer{padding-left:25px;padding-right:25px}}
/* v2.1 layout scale and motion improvements */
.site-header{height:94px}
.cover-rail{padding-top:28px;padding-bottom:12px}
.cover-rail-track{animation:albabooksRail 34s linear infinite;will-change:transform}
.cover-rail:hover{overflow-x:auto}
.cover-rail:hover .cover-rail-track{animation-play-state:paused}
@keyframes albabooksRail{from{transform:translateX(0)}to{transform:translateX(-620px)}}
.rail-cover{width:225px;height:265px;flex-basis:225px}
.rail-cover span{font-size:25px}
.why-plans{max-width:1660px;margin:90px auto 0;padding:0 42px 85px;grid-template-columns:1.05fr 1.35fr;gap:95px}
.why-copy h1{font-size:86px;line-height:.95;max-width:720px}
.benefits{gap:24px;margin-top:42px}
.benefits li{font-size:20px}
.plans-panel{border-radius:24px;padding:0 26px 26px}
.plans-kicker{font-size:15px;padding:12px 38px}
.plans-grid{gap:18px;padding-top:35px}
.plan-card{padding:34px 26px;border-radius:18px}
.plan-card h2{font-size:30px}
.plan-subtitle{font-size:15px}
.price strong{font-size:58px}
.price span,.renewal{font-size:15px}
.plan-button{font-size:15px;padding:15px}
.plan-card ul{font-size:15px;gap:13px}
.plan-assurances{padding:24px;gap:25px}
.plan-assurances p{font-size:15px}
.plan-assurances small{font-size:13px}
.categories-section{max-width:1660px;margin:0 auto;padding:70px 42px}
.category-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.category-card{position:relative;height:245px;border-radius:16px;overflow:hidden;background:#25262b;border:1px solid #383940}
.category-card:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.68),rgba(0,0,0,.03) 70%)}
.category-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.category-card:hover img{transform:scale(1.06)}
.category-card span{position:absolute;left:20px;bottom:18px;z-index:2;font-size:24px;font-weight:900}
.discover-section{max-width:1660px;padding:85px 42px}
.section-heading h2{font-size:54px}
.book-grid{gap:24px}
.book-card h3{font-size:18px}
.book-card p{font-size:15px}
.checkout-page{min-height:calc(100vh - 94px);padding:75px 30px;background:radial-gradient(circle at 10% 0%,#2a1717 0,transparent 35%),#101114}
.checkout-shell{max-width:1280px;margin:auto;display:grid;grid-template-columns:1.5fr .75fr;gap:30px}
.checkout-main,.checkout-summary{background:#1c1d21;border:1px solid #34353b;border-radius:22px;padding:42px}
.back-link{color:#d8d8dc;font-size:15px}
.checkout-main h1{font-size:58px;line-height:1;margin:10px 0 15px}
.checkout-intro{color:#b9bac1;font-size:18px;margin-bottom:32px}
.checkout-form{display:grid;gap:22px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.checkout-form label{display:grid;gap:8px;font-size:15px;font-weight:700}
.checkout-form input{width:100%;background:#121316;border:1px solid #3b3c42;color:#fff;border-radius:10px;padding:16px;font:inherit}
.checkout-form input:focus{outline:2px solid #ff5d2f;border-color:#ff5d2f}
.checkbox-line{display:flex!important;align-items:center;gap:10px;font-weight:400!important;color:#c9c9cf}
.checkbox-line input{width:18px!important;height:18px}
.checkout-button{border:0;background:#ff5d2f;color:#fff;padding:18px;border-radius:10px;font-weight:900;font-size:16px;cursor:pointer}
.checkout-summary{align-self:start}
.summary-title{color:#a9aab1;text-transform:uppercase;letter-spacing:1.5px;font-size:12px;font-weight:900}
.summary-plan{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #36373d;padding:15px 0 22px;font-size:22px;font-weight:800}
.summary-plan strong{color:#ff5d2f;font-size:34px}
.checkout-summary ul{list-style:none;padding:22px 0;margin:0;display:grid;gap:14px;color:#d4d4d9}
.checkout-summary li:before{content:"✓";color:#ff5d2f;margin-right:10px}
.secure-line{border-top:1px solid #36373d;padding-top:20px;font-weight:800}
.gateway-note{color:#9c9da5;font-size:13px;line-height:1.6}
.checkout-notice{background:#2a2220;border:1px solid #ff5d2f;border-radius:10px;padding:15px;margin:0 0 20px;color:#f3d4ca}
@media(max-width:1100px){.why-copy h1{font-size:70px}.why-plans{gap:50px}.category-grid{grid-template-columns:repeat(3,1fr)}.checkout-shell{grid-template-columns:1fr}.checkout-summary{order:-1}}
@media(max-width:760px){.site-header{height:68px}.cover-rail-track{animation-duration:28s}.rail-cover{width:165px;height:210px;flex-basis:165px}.why-plans{padding:0 22px 55px}.why-copy h1{font-size:52px}.benefits li{font-size:16px}.plans-panel{padding:0 14px 14px}.category-grid{grid-template-columns:repeat(2,1fr);gap:12px}.category-card{height:180px}.category-card span{font-size:19px;left:14px;bottom:14px}.categories-section,.discover-section{padding-left:20px;padding-right:20px}.section-heading h2{font-size:38px}.checkout-page{padding:30px 14px}.checkout-main,.checkout-summary{padding:25px}.checkout-main h1{font-size:42px}.form-row{grid-template-columns:1fr}}
/* AlbaBooks v3 — checkout and footer redesign */
.ab-checkout-page{background:#070d1d;min-height:740px;padding:34px 20px 40px}
.ab-checkout-container{width:min(100%,660px);margin:0 auto}
.ab-checkout-heading{margin-bottom:16px}
.ab-checkout-heading p{margin:0 0 10px;color:#dba8ff;font-size:11px;letter-spacing:4px;font-weight:900}
.ab-checkout-heading h1{margin:0;font-size:27px;letter-spacing:.1px}
.ab-checkout-card{border:1px solid #7848a9;background:#101827;border-radius:20px;padding:24px;box-shadow:0 12px 40px rgba(0,0,0,.25);display:grid;gap:14px}
.selected-plan-row{display:flex;justify-content:space-between;align-items:center;background:#151f31;border:1px solid #33476d;border-radius:13px;padding:16px;color:#dce2ee;font-size:14px}
.selected-plan-row strong{font-size:14px}
.ab-checkout-card>label{display:grid;gap:7px;color:#f0f2f7;font-size:13px;font-weight:800}
.ab-checkout-card label span{color:#f4b7d6}
.ab-checkout-card input,.ab-checkout-card select{height:39px;width:100%;border-radius:11px;border:1px solid #354a70;background:#1a2436;color:#eef2f8;padding:0 13px;font:inherit;font-size:13px}
.ab-checkout-card select{appearance:auto}
.ab-consent{display:flex!important;grid-template-columns:18px 1fr;align-items:start;gap:10px!important;border:1px solid #3a315c;border-radius:12px;padding:15px 16px;color:#d8dceb!important;line-height:1.55;font-weight:600!important}
.ab-consent input{width:15px!important;height:15px!important;margin-top:3px;padding:0}
.ab-consent a{color:#e0b5ff;text-decoration:underline}
.ab-payment-info{border:1px solid #4a5590;border-radius:13px;padding:17px;background:#17233a}
.ab-payment-info h2{font-size:16px;margin:0 0 10px}
.ab-payment-info p{margin:0 0 8px;color:#e4e8f2;font-size:12px;line-height:1.8}
.ab-payment-info small{color:#bdc6d8;font-size:11px}
.ab-payment-button{border:0;border-radius:11px;padding:15px 20px;color:white;font-weight:900;background:linear-gradient(100deg,#9837e7,#a956e7 48%,#2d9bc9);cursor:pointer}
.ab-checkout-note{margin:0;text-align:center;color:#c1c9d9;font-size:12px;line-height:1.6}
.ab-footer{background:#0d1424;border-top:5px solid #e7dfe4;padding:32px 30px 16px}
.ab-footer-grid{max-width:1060px;margin:auto;display:grid;grid-template-columns:1.6fr 1.1fr 1.3fr 1.4fr;gap:48px;padding-bottom:28px;border-bottom:1px solid #263246}
.ab-footer .brand{font-size:27px}
.ab-footer .brand-mark{background:#ff643d}
.ab-footer h4{color:#e2b0ff;font-size:12px;letter-spacing:2px;margin:4px 0 17px}
.ab-footer p,.ab-footer a{display:block;color:#c6cedc;font-size:13px;line-height:1.8;margin:0 0 7px}
.ab-footer-brand>p{max-width:300px;margin-top:10px}
.ab-socials{display:flex;gap:9px;margin-top:14px}
.ab-socials a{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:#283243;color:#e6e9ef;font-size:12px;margin:0}
.ab-payment-badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.ab-payment-badges span{border:1px solid #465478;background:#151e2e;border-radius:7px;padding:5px 10px;font-size:11px;font-weight:900;color:#e7e9ee}
.ab-payment-badges span:nth-child(3){border-color:#76559d;color:#e5c4ff}
.ab-footer-bottom{max-width:1060px;margin:15px auto 0;text-align:center;color:#c7cfdb;font-size:12px}
@media(max-width:900px){.ab-footer-grid{grid-template-columns:1fr 1fr;gap:30px}.ab-checkout-container{width:min(100%,660px)}}
@media(max-width:600px){.ab-checkout-page{padding:28px 12px}.ab-checkout-card{padding:17px}.selected-plan-row{align-items:flex-start;gap:8px;flex-direction:column}.ab-footer-grid{grid-template-columns:1fr}.ab-footer{padding-left:22px;padding-right:22px}}
/* ===== AlbaBooks v3.1 checkout and footer layout fix ===== */
.ab-checkout-page{
background:#090f1d!important;
min-height:760px!important;
padding:34px 20px 44px!important;
color:#f1f2f6!important;
}
.ab-checkout-container{width:min(100%,660px)!important;margin:0 auto!important}
.ab-checkout-heading{margin:0 0 16px!important}
.ab-checkout-heading p{margin:0 0 10px!important;color:#e2b0ff!important;font-size:11px!important;letter-spacing:4px!important;font-weight:900!important}
.ab-checkout-heading h1{margin:0!important;font-size:28px!important;line-height:1.2!important;color:#f5f4f6!important}
.ab-checkout-card{
display:grid!important;
grid-template-columns:1fr!important;
gap:14px!important;
border:1px solid #794ab0!important;
background:#101827!important;
border-radius:20px!important;
padding:24px!important;
box-sizing:border-box!important;
}
.ab-checkout-card *{box-sizing:border-box!important}
.selected-plan-row{
display:flex!important;
justify-content:space-between!important;
align-items:center!important;
width:100%!important;
background:#151f31!important;
border:1px solid #33476d!important;
border-radius:13px!important;
padding:16px!important;
color:#e8ebf2!important;
}
.ab-checkout-card>label{
display:grid!important;
grid-template-columns:1fr!important;
gap:7px!important;
width:100%!important;
color:#f1f2f6!important;
font-size:13px!important;
font-weight:800!important;
}
.ab-checkout-card input:not([type="checkbox"]),
.ab-checkout-card select{
display:block!important;
width:100%!important;
height:40px!important;
min-height:40px!important;
padding:0 13px!important;
background:#1b2537!important;
color:#eef2f8!important;
border:1px solid #354a70!important;
border-radius:11px!important;
font:inherit!important;
}
.ab-consent{
display:grid!important;
grid-template-columns:18px 1fr!important;
align-items:start!important;
gap:10px!important;
border:1px solid #40305f!important;
border-radius:12px!important;
padding:15px 16px!important;
line-height:1.55!important;
}
.ab-consent input[type="checkbox"]{width:15px!important;height:15px!important;margin:3px 0 0!important}
.ab-payment-info{
width:100%!important;
border:1px solid #4a5590!important;
border-radius:13px!important;
padding:17px!important;
background:#17233a!important;
}
.ab-payment-info h2{margin:0 0 10px!important;font-size:16px!important;color:#fff!important}
.ab-payment-info p{margin:0 0 8px!important;font-size:12px!important;line-height:1.8!important;color:#e4e8f2!important}
.ab-payment-info small{color:#bdc6d8!important}
.ab-payment-button{
width:100%!important;
display:block!important;
border:0!important;
border-radius:11px!important;
padding:15px 20px!important;
background:linear-gradient(100deg,#9837e7,#a956e7 48%,#2d9bc9)!important;
color:#fff!important;
font-weight:900!important;
cursor:pointer!important;
}
.ab-checkout-note{margin:0!important;text-align:center!important;color:#c1c9d9!important;font-size:12px!important}
/* Footer alignment */
.ab-footer{
display:block!important;
width:100%!important;
background:#0d1424!important;
border-top:5px solid #e7dfe4!important;
padding:32px 30px 16px!important;
box-sizing:border-box!important;
}
.ab-footer-grid{
width:min(100%,1060px)!important;
margin:0 auto!important;
display:grid!important;
grid-template-columns:1.6fr 1.05fr 1.15fr 1.35fr!important;
align-items:start!important;
gap:42px!important;
padding:0 0 28px!important;
border-bottom:1px solid #263246!important;
}
.ab-footer-grid section{min-width:0!important}
.ab-footer .brand{display:flex!important;align-items:center!important;gap:8px!important;margin:0 0 8px!important}
.ab-footer h4{margin:5px 0 17px!important;color:#e2b0ff!important;font-size:12px!important;letter-spacing:2px!important}
.ab-footer p,.ab-footer a{display:block!important;margin:0 0 8px!important;color:#c6cedc!important;font-size:13px!important;line-height:1.7!important}
.ab-footer-brand>p{max-width:290px!important}
.ab-socials{display:flex!important;gap:9px!important;margin-top:14px!important}
.ab-socials a{width:25px!important;height:25px!important;display:grid!important;place-items:center!important;border-radius:50%!important;background:#283243!important;margin:0!important}
.ab-payment-badges{display:flex!important;gap:8px!important;flex-wrap:wrap!important;margin:0 0 12px!important}
.ab-payment-badges span{display:inline-block!important;border:1px solid #465478!important;background:#151e2e!important;border-radius:7px!important;padding:5px 10px!important;font-size:11px!important;font-weight:900!important}
.ab-footer-bottom{width:min(100%,1060px)!important;margin:15px auto 0!important;text-align:center!important;color:#c7cfdb!important;font-size:12px!important}
.cover-rail{overflow:hidden!important}
.cover-rail-track{display:flex!important;gap:24px!important;width:max-content!important;animation:albabooksRail 32s linear infinite!important}
.rail-cover{position:relative!important;width:195px!important;height:260px!important;flex:0 0 195px!important;overflow:hidden!important;border-radius:4px!important;background:#222!important}
.rail-cover img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important}
.rail-cover span{display:none!important}
@media(max-width:900px){
.ab-footer-grid{grid-template-columns:1fr 1fr!important;gap:30px!important}
}
@media(max-width:600px){
.ab-checkout-page{padding:28px 12px!important}
.ab-checkout-card{padding:17px!important}
.selected-plan-row{flex-direction:column!important;align-items:flex-start!important;gap:7px!important}
.ab-footer{padding-left:22px!important;padding-right:22px!important}
.ab-footer-grid{grid-template-columns:1fr!important}
}
/* =========================================================
AlbaBooks v3.2 — unified main-page / checkout visual system
Main palette: #0f1012 + #1a1c20 + #f75122
========================================================= */
:root{
--ab-bg:#0f1012;
--ab-panel:#1a1c20;
--ab-panel-2:#22252a;
--ab-line:#373a40;
--ab-text:#f4f1ec;
--ab-muted:#b9b6b0;
--ab-accent:#f75122;
--ab-accent-2:#ff6a36;
}
.ab-checkout-page{
background:var(--ab-bg)!important;
min-height:760px!important;
padding:52px 20px 64px!important;
}
.ab-checkout-container{width:min(100%,720px)!important;margin:0 auto!important}
.ab-checkout-heading{margin-bottom:18px!important}
.ab-checkout-heading p{
color:var(--ab-accent)!important;
letter-spacing:3px!important;
font-size:11px!important;
}
.ab-checkout-heading h1{color:var(--ab-text)!important;font-size:30px!important}
.ab-checkout-card{
background:var(--ab-panel)!important;
border:1px solid var(--ab-line)!important;
border-radius:18px!important;
box-shadow:none!important;
padding:24px!important;
gap:14px!important;
}
.selected-plan-row{
background:var(--ab-panel-2)!important;
border-color:#40434a!important;
color:var(--ab-text)!important;
}
.ab-checkout-card>label{color:var(--ab-text)!important}
.ab-checkout-card input:not([type="checkbox"]),
.ab-checkout-card select{
background:#25282e!important;
border-color:#454951!important;
color:var(--ab-text)!important;
}
.ab-checkout-card input:focus,
.ab-checkout-card select:focus{
border-color:var(--ab-accent)!important;
outline:2px solid rgba(247,81,34,.14)!important;
outline-offset:0!important;
}
.ab-consent{
background:#202329!important;
border-color:#41444b!important;
color:#e5e2dc!important;
}
.ab-consent a{color:var(--ab-accent)!important}
.ab-payment-info{
background:#202329!important;
border-color:#454951!important;
}
.ab-payment-info h2{color:var(--ab-text)!important}
.ab-payment-info p{color:#dedbd5!important}
.ab-payment-info small{color:#aeadab!important}
.ab-payment-button{
background:var(--ab-accent)!important;
color:#fff!important;
border-radius:10px!important;
transition:transform .2s ease,background .2s ease,box-shadow .2s ease!important;
}
.ab-payment-button:hover{
background:var(--ab-accent-2)!important;
transform:translateY(-2px)!important;
box-shadow:0 10px 24px rgba(247,81,34,.2)!important;
}
.ab-checkout-note{color:var(--ab-muted)!important}
/* Storytelling-style motion: reveal, drift, cover focus and smooth interactions */
@keyframes abRevealUp{
from{opacity:0;transform:translateY(26px)}
to{opacity:1;transform:translateY(0)}
}
@keyframes abFloatShape{
0%,100%{transform:translate3d(0,0,0) rotate(0deg);border-radius:44% 56% 61% 39% / 47% 41% 59% 53%}
50%{transform:translate3d(18px,-14px,0) rotate(7deg);border-radius:61% 39% 46% 54% / 37% 59% 41% 63%}
}
@keyframes abCoverPulse{
0%,100%{transform:scale(1)}
50%{transform:scale(1.025)}
}
@keyframes abRailStory{
from{transform:translateX(0)}
to{transform:translateX(-50%)}
}
.ab-checkout-heading,
.ab-checkout-card{animation:abRevealUp .65s cubic-bezier(.2,.8,.2,1) both}
.ab-checkout-card{animation-delay:.08s}
.rail-cover{
transition:transform .35s cubic-bezier(.2,.8,.2,1), filter .35s ease!important;
transform-origin:center center!important;
}
.rail-cover:hover{
transform:translateY(-8px) scale(1.035)!important;
filter:brightness(1.08)!important;
}
.rail-cover:hover img{animation:abCoverPulse 2s ease-in-out infinite}
.cover-rail-track{
animation:abRailStory 38s linear infinite!important;
}
.cover-rail:hover .cover-rail-track{animation-play-state:paused!important}
/* Animated accent shapes, inspired by expressive story transitions */
.ab-main-hero,
.hero,
.ab-hero{
position:relative;
isolation:isolate;
}
.ab-main-hero:before,
.hero:before,
.ab-hero:before{
content:"";
position:absolute;
width:220px;
height:220px;
right:8%;
top:8%;
background:var(--ab-accent);
opacity:.08;
filter:blur(.2px);
animation:abFloatShape 10s ease-in-out infinite;
z-index:-1;
pointer-events:none;
}
.ab-main-hero>*,
.hero>*,
.ab-hero>*{animation:abRevealUp .7s cubic-bezier(.2,.8,.2,1) both}
.ab-main-hero>*:nth-child(2),
.hero>*:nth-child(2),
.ab-hero>*:nth-child(2){animation-delay:.08s}
.ab-main-hero>*:nth-child(3),
.hero>*:nth-child(3),
.ab-hero>*:nth-child(3){animation-delay:.16s}
/* Scroll reveal support */
.ab-reveal{
opacity:0;
transform:translateY(24px);
transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1);
}
.ab-reveal.is-visible{
opacity:1;
transform:translateY(0);
}
/* Footer uses exactly the same charcoal/orange system */
.ab-footer{
background:var(--ab-bg)!important;
border-top:1px solid #2b2e34!important;
}
.ab-footer h4{color:var(--ab-accent)!important}
.ab-footer-grid{border-bottom-color:#2d3036!important}
.ab-socials a{background:#24272d!important}
.ab-payment-badges span{border-color:#444850!important;background:#1c1f24!important}
.ab-payment-badges span:nth-child(3){border-color:var(--ab-accent)!important;color:#ff9b7a!important}
/* Respect accessibility preferences */
@media (prefers-reduced-motion:reduce){
*,
*:before,
*:after{
animation-duration:.01ms!important;
animation-iteration-count:1!important;
transition-duration:.01ms!important;
scroll-behavior:auto!important;
}
}
/* AlbaBooks v3.3 — header matched to footer */
.site-header,
header.site-header,
.ab-header,
header.ab-header{
background:#0f1012!important;
border-bottom:1px solid #2b2e34!important;
box-shadow:none!important;
}
.site-header .header-inner,
.ab-header .header-inner,
.site-header .container,
.ab-header .container{
background:transparent!important;
}
/* Keep all navigation elements on the same charcoal footer palette */
.site-header a,
.ab-header a{
color:#f4f1ec!important;
}
.site-header a:hover,
.ab-header a:hover{
color:#f75122!important;
}
/* Orange AlbaBooks brand accent */
.site-header .brand-mark,
.ab-header .brand-mark,
.site-header .logo-mark,
.ab-header .logo-mark{
background:#f75122!important;
}
/* Header separators and controls */
.site-header nav,
.ab-header nav{
border-color:#2b2e34!important;
}
.site-header .nav-divider,
.ab-header .nav-divider{
background:#35383e!important;
}
/* Subscribe button matches the AlbaBooks orange accent */
.site-header .subscribe-button,
.site-header .subscribe-btn,
.site-header .header-subscribe,
.ab-header .subscribe-button,
.ab-header .subscribe-btn,
.ab-header .header-subscribe{
background:#f4f1ec!important;
color:#0f1012!important;
border:1px solid #f4f1ec!important;
transition:background .2s ease,color .2s ease,transform .2s ease!important;
}
.site-header .subscribe-button:hover,
.site-header .subscribe-btn:hover,
.site-header .header-subscribe:hover,
.ab-header .subscribe-button:hover,
.ab-header .subscribe-btn:hover,
.ab-header .header-subscribe:hover{
background:#f75122!important;
color:#fff!important;
border-color:#f75122!important;
transform:translateY(-1px)!important;
}
/* Search/login icons stay clean on the dark header */
.site-header svg,
.ab-header svg,
.site-header .search-icon,
.ab-header .search-icon{
color:#f4f1ec!important;
stroke:#f4f1ec!important;
}
/* Mobile menu inherits the footer/header charcoal */
@media(max-width:768px){
.site-header,
.ab-header{
background:#0f1012!important;
}
.site-header nav,
.ab-header nav,
.mobile-menu,
.mobile-navigation{
background:#0f1012!important;
border-color:#2b2e34!important;
}
}
/* =========================================================
AlbaBooks v3.4 — global visual consistency
Apply the same charcoal + orange system to EVERY page,
card, section, navigation element and interactive control.
========================================================= */
body,
.site,
#page,
.site-content,
main,
.main-content,
.page-content{
background:#0f1012!important;
color:#f4f1ec!important;
}
/* Global headings and supporting text */
h1,h2,h3,h4,h5,h6{color:#f4f1ec!important}
p,li{color:#c9c5bd}
a{transition:color .2s ease,background .2s ease,border-color .2s ease,transform .2s ease!important}
a:hover{color:#f75122!important}
/* Header + footer use the exact same base */
.site-header,header.site-header,.ab-header,header.ab-header,
.ab-footer,footer.site-footer{
background:#0f1012!important;
border-color:#2b2e34!important;
}
/* All major dark panels */
.pricing-section,
.pricing-wrap,
.pricing-container,
.ab-pricing,
.category-section,
.categories-section,
.books-section,
.book-section,
.discovery-section,
.ab-checkout-page{
background:#0f1012!important;
}
/* Cards share one consistent panel style */
.pricing-card,
.plan-card,
.subscription-card,
.category-card,
.ab-category-card,
.book-card,
.ab-book-card,
.feature-card,
.benefit-card,
.selected-plan-row,
.ab-payment-info,
.ab-checkout-card{
background:#1a1c20!important;
border-color:#373a40!important;
}
/* Slightly raised interactive cards */
.pricing-card:hover,
.plan-card:hover,
.subscription-card:hover,
.category-card:hover,
.ab-category-card:hover,
.book-card:hover,
.ab-book-card:hover{
border-color:#f75122!important;
transform:translateY(-4px)!important;
}
/* Most popular plan and accent borders */
.pricing-card.popular,
.plan-card.popular,
.subscription-card.popular,
.pricing-card.is-popular{
border-color:#f75122!important;
box-shadow:0 0 0 1px rgba(247,81,34,.08)!important;
}
.popular-badge,
.most-popular,
.badge-popular{
background:#f75122!important;
color:#fff!important;
}
/* Orange accents across the homepage */
.section-kicker,
.eyebrow,
.highlight,
.accent-text,
.price,
.plan-price,
.pricing-card .price,
.plan-card .price,
.subscription-card .price{
color:#f75122!important;
}
/* Buttons */
button,
input[type="submit"],
.button,
.btn,
.cta-button,
.choose-plan,
.choose-plan-button,
.subscribe-button,
.subscribe-btn{
border-color:#f75122!important;
}
.button-primary,
.btn-primary,
.choose-plan,
.choose-plan-button,
.cta-primary,
.ab-payment-button{
background:#f75122!important;
color:#fff!important;
}
.button-primary:hover,
.btn-primary:hover,
.choose-plan:hover,
.choose-plan-button:hover,
.cta-primary:hover,
.ab-payment-button:hover{
background:#ff6a36!important;
color:#fff!important;
border-color:#ff6a36!important;
}
/* Secondary buttons stay consistent with the dark theme */
.button-secondary,
.btn-secondary,
.browse-button,
.secondary-cta{
background:transparent!important;
color:#f4f1ec!important;
border:1px solid #4a4d53!important;
}
.button-secondary:hover,
.btn-secondary:hover,
.browse-button:hover,
.secondary-cta:hover{
border-color:#f75122!important;
color:#f75122!important;
}
/* Form controls on every page */
input,select,textarea{
background:#202329!important;
color:#f4f1ec!important;
border-color:#3a3d43!important;
}
input:focus,select:focus,textarea:focus{
border-color:#f75122!important;
outline:2px solid rgba(247,81,34,.12)!important;
}
/* Category cards and overlays */
.category-card,
.ab-category-card{
overflow:hidden!important;
position:relative!important;
}
.category-card:after,
.ab-category-card:after{
background:linear-gradient(to top,rgba(15,16,18,.78),rgba(15,16,18,0))!important;
}
/* Book rail remains visually integrated */
.cover-rail,
.book-rail{
background:#0f1012!important;
}
.rail-cover{
background:#1a1c20!important;
border:1px solid #2f3238!important;
}
.rail-cover:hover{
border-color:#f75122!important;
}
/* Simple checkout benefits strip */
.checkout-benefits,
.plan-benefits,
.subscription-benefits,
.pricing-benefits{
background:#1a1c20!important;
border-color:#373a40!important;
}
.checkout-benefits svg,
.plan-benefits svg,
.subscription-benefits svg,
.pricing-benefits svg{
color:#f75122!important;
stroke:#f75122!important;
}
/* Footer links and badges */
.ab-footer a{color:#c9c5bd!important}
.ab-footer a:hover{color:#f75122!important}
.ab-footer h4{color:#f75122!important}
.ab-payment-badges span{
background:#1a1c20!important;
border-color:#373a40!important;
color:#f4f1ec!important;
}
.ab-payment-badges span:nth-child(3){
border-color:#f75122!important;
color:#ff9b7a!important;
}
/* Keep checkout card slightly separated but same palette */
.ab-checkout-card{background:#1a1c20!important}
.selected-plan-row,
.ab-payment-info,
.ab-consent{background:#202329!important}
.ab-checkout-card input:not([type="checkbox"]),
.ab-checkout-card select{
background:#202329!important;
border-color:#3a3d43!important;
}
/* Mobile navigation also matches */
.mobile-menu,
.mobile-navigation,
.menu-toggle-panel{
background:#0f1012!important;
border-color:#2b2e34!important;
}
/* Selection colour */
::selection{background:#f75122!important;color:#fff!important}
/* Do not force images themselves into a colour filter */
img{color:inherit}
/* v3.5 — real illustrated book-cover artwork */
.cover-rail{padding:18px 0!important}
.cover-rail-track{align-items:stretch!important}
.rail-cover{
background:#111!important;
position:relative!important;
isolation:isolate!important;
}
.rail-cover:before,
.rail-cover:after{display:none!important;content:none!important}
.rail-cover img{
display:block!important;
width:100%!important;
height:100%!important;
object-fit:cover!important;
object-position:center!important;
opacity:1!important;
visibility:visible!important;
filter:none!important;
position:relative!important;
z-index:2!important;
}
.rail-cover span{display:none!important}
/* =========================================================
AlbaBooks v3.6 — HEADER EXACTLY MATCHED TO FOOTER
Applies only to the top logo/navigation bar.
========================================================= */
.site-header,
header.site-header,
#masthead,
.ab-header,
header.ab-header,
.site-header .header-inner,
.ab-header .header-inner,
.site-header .container,
.ab-header .container {
background: #0f1012 !important; /* exact footer base colour */
}
/* Remove any inherited gradients or lighter header panels */
.site-header::before,
.site-header::after,
.ab-header::before,
.ab-header::after,
#masthead::before,
#masthead::after {
background: transparent !important;
background-image: none !important;
}
/* Same divider treatment as footer */
.site-header,
#masthead,
.ab-header {
border-top: 0 !important;
border-bottom: 1px solid #2b2e34 !important;
box-shadow: none !important;
}
/* Keep header contents transparent so the footer colour shows through */
.site-header nav,
.ab-header nav,
.site-header .main-navigation,
.ab-header .main-navigation,
.site-header .header-actions,
.ab-header .header-actions {
background: transparent !important;
}
/* Logo and links */
.site-header .site-title,
.ab-header .site-title,
.site-header .logo,
.ab-header .logo {
color: #f4f1ec !important;
}
.site-header .main-navigation a,
.ab-header .main-navigation a,
.site-header nav a,
.ab-header nav a {
color: #f4f1ec !important;
}
.site-header .main-navigation a:hover,
.ab-header .main-navigation a:hover,
.site-header nav a:hover,
.ab-header nav a:hover {
color: #f75122 !important;
}
/* Keep the AlbaBooks mark orange */
.site-header .brand-mark,
.ab-header .brand-mark,
.site-header .logo-mark,
.ab-header .logo-mark {
background: #f75122 !important;
}
/* Vertical separators in header */
.site-header .nav-divider,
.ab-header .nav-divider,
.site-header .header-divider,
.ab-header .header-divider {
background: #2b2e34 !important;
border-color: #2b2e34 !important;
}
/* Subscribe button */
.site-header .subscribe-button,
.site-header .subscribe-btn,
.site-header .header-subscribe,
.ab-header .subscribe-button,
.ab-header .subscribe-btn,
.ab-header .header-subscribe {
background: #f4f1ec !important;
color: #0f1012 !important;
border-color: #f4f1ec !important;
}
.site-header .subscribe-button:hover,
.site-header .subscribe-btn:hover,
.site-header .header-subscribe:hover,
.ab-header .subscribe-button:hover,
.ab-header .subscribe-btn:hover,
.ab-header .header-subscribe:hover {
background: #f75122 !important;
color: #ffffff !important;
border-color: #f75122 !important;
}
/* Mobile header/menu uses the same exact footer background */
@media (max-width: 768px) {
.site-header,
#masthead,
.ab-header,
.mobile-menu,
.mobile-navigation {
background: #0f1012 !important;
}
}
/* =========================================================
AlbaBooks v3.7 — header matches the LIGHTER footer tone
========================================================= */
:root{
--ab-footer-match:#17191d;
}
/* Top logo/navigation bar: same lighter tone as footer */
.site-header,
header.site-header,
#masthead,
.ab-header,
header.ab-header,
.site-header .header-inner,
.ab-header .header-inner,
.site-header .container,
.ab-header .container,
.site-header nav,
.ab-header nav{
background:var(--ab-footer-match)!important;
background-color:var(--ab-footer-match)!important;
background-image:none!important;
}
/* Remove darker inherited header layers */
.site-header:before,
.site-header:after,
#masthead:before,
#masthead:after,
.ab-header:before,
.ab-header:after{
background:transparent!important;
background-image:none!important;
}
/* Footer and header visual alignment */
.ab-footer,
footer.site-footer{
background:var(--ab-footer-match)!important;
}
/* Keep a subtle separation line */
.site-header,
#masthead,
.ab-header{
border-bottom:1px solid #2f3238!important;
box-shadow:none!important;
}
/* Mobile header */
@media(max-width:768px){
.site-header,
#masthead,
.ab-header,
.mobile-menu,
.mobile-navigation{
background:var(--ab-footer-match)!important;
}
}
/* =========================================================
v3.8 FINAL OVERRIDE — EXACT FOOTER HEADER MATCH
The footer's original visible background is #0d1424.
The entire top logo/navigation bar is now forced to #0d1424.
========================================================= */
:root{
--ab-exact-footer:#0d1424;
--ab-page:#101114;
--ab-panel:#1b1d22;
--ab-panel-raised:#22252b;
--ab-line:#353942;
--ab-orange:#ff643d;
}
html body .site-header,
html body header.site-header,
html body #masthead,
html body .ab-header,
html body .site-header .site-nav,
html body .site-header .main-nav,
html body .site-header .nav-actions,
html body .site-header nav,
html body .ab-footer,
html body footer.ab-footer,
html body footer.site-footer{
background:var(--ab-exact-footer)!important;
background-color:var(--ab-exact-footer)!important;
background-image:none!important;
}
/* Prevent old rules from putting a different colour behind the header */
html body .site-header *,
html body .site-header .site-nav,
html body .site-header nav,
html body .site-header .main-nav,
html body .site-header .nav-actions{
background-image:none!important;
}
html body .site-header{
border-bottom:1px solid #273044!important;
box-shadow:none!important;
}
html body .site-header:before,
html body .site-header:after{
display:none!important;
}
/* =========================================================
CHECKOUT REDESIGN — SAME DARK + ORANGE THEME AS HOMEPAGE
Removes the old purple/blue checkout appearance.
========================================================= */
html body .ab-checkout-page{
background:var(--ab-page)!important;
color:#f5f2ec!important;
min-height:760px!important;
padding:52px 20px 70px!important;
}
html body .ab-checkout-container{
max-width:720px!important;
margin:0 auto!important;
}
html body .ab-checkout-heading{
margin-bottom:18px!important;
}
html body .ab-checkout-heading p{
color:var(--ab-orange)!important;
font-weight:900!important;
letter-spacing:4px!important;
font-size:12px!important;
margin:0 0 8px!important;
}
html body .ab-checkout-heading h1{
color:#f5f2ec!important;
font-size:36px!important;
margin:0!important;
letter-spacing:-.7px!important;
}
html body .ab-checkout-card{
background:var(--ab-panel)!important;
border:1px solid var(--ab-line)!important;
border-top:3px solid var(--ab-orange)!important;
border-radius:18px!important;
padding:26px!important;
box-shadow:0 18px 55px rgba(0,0,0,.25)!important;
gap:16px!important;
}
html body .selected-plan-row{
background:var(--ab-panel-raised)!important;
border:1px solid var(--ab-line)!important;
border-radius:12px!important;
padding:16px!important;
color:#d6d4cf!important;
}
html body .selected-plan-row strong{
color:var(--ab-orange)!important;
}
html body .ab-checkout-card>label{
color:#f3f0ea!important;
font-weight:800!important;
}
html body .ab-checkout-card label span{
color:var(--ab-orange)!important;
}
html body .ab-checkout-card input:not([type="checkbox"]),
html body .ab-checkout-card select{
background:#15171b!important;
color:#f4f1eb!important;
border:1px solid #3a3e47!important;
border-radius:10px!important;
height:48px!important;
min-height:48px!important;
padding:0 15px!important;
}
html body .ab-checkout-card input:focus,
html body .ab-checkout-card select:focus{
border-color:var(--ab-orange)!important;
outline:2px solid rgba(255,100,61,.12)!important;
}
html body .ab-consent{
background:#15171b!important;
border:1px solid #3a3e47!important;
border-radius:12px!important;
padding:16px!important;
}
html body .ab-consent a{
color:#ff9b7a!important;
text-decoration:underline!important;
}
html body .ab-payment-info{
background:#202329!important;
border:1px solid #3a3e47!important;
border-left:3px solid var(--ab-orange)!important;
border-radius:12px!important;
padding:18px!important;
}
html body .ab-payment-info h2{
color:#f5f2ec!important;
margin:0 0 10px!important;
font-size:18px!important;
}
html body .ab-payment-info p,
html body .ab-payment-info small{
color:#c9c5bd!important;
}
html body .ab-payment-button{
width:100%!important;
min-height:52px!important;
border:0!important;
border-radius:10px!important;
background:var(--ab-orange)!important;
color:#fff!important;
font-weight:900!important;
font-size:15px!important;
box-shadow:none!important;
}
html body .ab-payment-button:hover{
background:#ff784f!important;
transform:translateY(-1px)!important;
}
html body .ab-checkout-note{
color:#aeadb0!important;
margin:0!important;
}
/* Footer remains its intended lighter blue-charcoal tone */
html body .ab-footer{
border-top:1px solid #273044!important;
}
/* Force cache-visible header colour on mobile too */
@media(max-width:768px){
html body .site-header,
html body .site-header .site-nav,
html body .mobile-menu,
html body .mobile-navigation{
background:var(--ab-exact-footer)!important;
}
}
/* =========================================================
ALBABOOKS v4.0 — CLEAN FINAL OVERRIDE
========================================================= */
:root{--ab-footer:#17191d;--ab-page:#101114;--ab-card:#1b1d22;--ab-card-2:#22252b;--ab-line:#373b43;--ab-text:#f5f2ec;--ab-orange:#ff643d}
html body .site-header,html body header.site-header,html body #masthead,html body .ab-header,
html body .site-header .header-inner,html body .site-header nav,html body .site-header .main-navigation,
html body .ab-footer,html body footer.site-footer{
background:var(--ab-footer)!important;background-color:var(--ab-footer)!important;background-image:none!important}
html body .site-header,html body #masthead,html body .ab-header{border-bottom:1px solid #2e3239!important;box-shadow:none!important}
html body .site-header:before,html body .site-header:after,html body .ab-header:before,html body .ab-header:after{display:none!important}
html body,html body #page,html body .site-content,html body main{background:var(--ab-page)!important;color:var(--ab-text)!important}
html body .ab-checkout-page{
background:
radial-gradient(760px 420px at 12% 0%, rgba(255,100,61,.07), transparent 60%),
radial-gradient(620px 380px at 100% 8%, rgba(255,100,61,.05), transparent 55%),
var(--ab-page)!important;
padding:52px 20px 90px!important;
}
html body .ab-checkout-container{width:min(100%,1100px)!important;max-width:1100px!important;margin:auto!important}
html body .ab-checkout-heading p{color:var(--ab-orange)!important}
html body .ab-checkout-heading h1{color:var(--ab-text)!important}
html body .ab-checkout-card{background:var(--ab-card)!important;border:1px solid var(--ab-line)!important;border-top:3px solid var(--ab-orange)!important;border-radius:18px!important}
html body .selected-plan-row,html body .ab-payment-info,html body .ab-consent{background:var(--ab-card-2)!important;border-color:var(--ab-line)!important}
html body .selected-plan-row strong{color:var(--ab-orange)!important}
html body .ab-checkout-card input:not([type="checkbox"]),html body .ab-checkout-card select{background:#14161a!important;color:var(--ab-text)!important;border-color:#3b4048!important}
html body .ab-payment-info{border-left:3px solid var(--ab-orange)!important}
html body .ab-payment-button{background:var(--ab-orange)!important;color:#fff!important}
html body .ab-payment-button:hover{background:#ff7957!important}
html body .rail-cover{background:#181a1e!important;border:1px solid #30343b!important;overflow:hidden!important}
html body .rail-cover img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;opacity:1!important;visibility:visible!important;position:relative!important;z-index:10!important}
html body .rail-cover span{display:none!important}
html body .pricing-card,html body .plan-card,html body .subscription-card,html body .category-card,html body .book-card{background:var(--ab-card)!important;border-color:var(--ab-line)!important}
html body .pricing-card.popular,html body .plan-card.popular{border-color:var(--ab-orange)!important}
html body .popular-badge,html body .most-popular{background:var(--ab-orange)!important;color:#fff!important}
@media(max-width:768px){html body .site-header,html body .mobile-menu,html body .mobile-navigation{background:var(--ab-footer)!important}}
/* =========================================================
AlbaBooks v4.1 — FINAL: header & footer match the pricing
table exactly, + checkout order summary panel.
This block is intentionally last so it wins every previous
header/footer colour patch above without deleting them.
========================================================= */
:root{
--ab-table-color:#1b1d22; /* exact colour used by the pricing cards (.plan-card) */
}
/* Pricing panel + cards unified to one flat colour */
html body .plans-panel{
background:var(--ab-table-color)!important;
background-image:none!important;
}
html body .plan-card,
html body .pricing-card,
html body .subscription-card{
background:var(--ab-table-color)!important;
background-image:none!important;
}
/* Header and footer forced to the exact same colour as the pricing table */
html body .site-header,
html body header.site-header,
html body #masthead,
html body .ab-header,
html body header.ab-header,
html body .site-header .header-inner,
html body .site-header .site-nav,
html body .site-header .main-nav,
html body .site-header .nav-actions,
html body .site-header nav,
html body .site-header .container,
html body .ab-footer,
html body footer.ab-footer,
html body footer.site-footer{
background:var(--ab-table-color)!important;
background-color:var(--ab-table-color)!important;
background-image:none!important;
}
html body .site-header,
html body #masthead,
html body .ab-header{
border-bottom:1px solid var(--ab-line)!important;
box-shadow:none!important;
}
html body .ab-footer,
html body footer.site-footer{
border-top:1px solid var(--ab-line)!important;
}
@media(max-width:768px){
html body .site-header,
html body .mobile-menu,
html body .mobile-navigation{
background:var(--ab-table-color)!important;
}
}
/* =========================================================
Checkout — two-column layout with order summary
========================================================= */
html body .ab-checkout-grid{
display:grid!important;
grid-template-columns:1fr 400px!important;
gap:32px!important;
align-items:start!important;
}
html body .ab-checkout-grid .ab-checkout-card{
margin:0!important;
padding:32px!important;
}
html body .ab-order-summary{
background:var(--ab-table-color)!important;
border:1px solid var(--ab-line)!important;
border-radius:18px!important;
padding:26px!important;
position:sticky!important;
top:24px!important;
}
html body .ab-order-summary h2{
margin:0 0 18px!important;
font-size:19px!important;
color:var(--ab-text)!important;
}
html body .ab-order-row{
display:flex!important;
justify-content:space-between!important;
align-items:center!important;
gap:10px!important;
font-size:14px!important;
color:var(--ab-text)!important;
padding:6px 0!important;
}
html body .ab-order-row.ab-order-item{
font-weight:700!important;
}
html body .ab-order-row.ab-order-muted{
color:#a9a6a0!important;
font-size:13px!important;
}
html body .ab-order-row.ab-order-total{
font-weight:800!important;
font-size:17px!important;
padding-top:4px!important;
}
html body .ab-order-row.ab-order-total span:last-child{
color:var(--ab-orange)!important;
font-size:20px!important;
}
html body .ab-order-divider{
height:1px!important;
background:var(--ab-line)!important;
margin:12px 0!important;
}
html body .ab-order-features{
list-style:none!important;
margin:16px 0 0!important;
padding:0!important;
display:grid!important;
gap:11px!important;
}
html body .ab-order-features li{
display:flex!important;
align-items:center!important;
gap:10px!important;
font-size:14px!important;
color:var(--ab-text)!important;
}
html body .ab-order-check{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
width:20px!important;
height:20px!important;
min-width:20px!important;
border-radius:50%!important;
border:1.5px solid var(--ab-orange)!important;
color:var(--ab-orange)!important;
font-size:11px!important;
font-weight:900!important;
}
html body .ab-order-secure{
display:flex!important;
align-items:flex-start!important;
gap:12px!important;
}
html body .ab-order-lock{
font-size:18px!important;
line-height:1!important;
margin-top:2px!important;
}
html body .ab-order-secure strong{
display:block!important;
color:var(--ab-text)!important;
font-size:14px!important;
margin-bottom:4px!important;
}
html body .ab-order-secure p{
margin:0!important;
color:#a9a6a0!important;
font-size:12px!important;
line-height:1.5!important;
}
@media(max-width:900px){
html body .ab-checkout-grid{
grid-template-columns:1fr!important;
}
html body .ab-order-summary{
position:static!important;
order:2!important;
}
}
/* =========================================================
AlbaBooks v4.2 — access control UI
Login page, lock badges, locked-book notice
========================================================= */
/* Branded login page (same shell as checkout) */
html body .ab-login-page{
background:var(--ab-page)!important;
min-height:640px!important;
padding:64px 20px 90px!important;
display:flex!important;
justify-content:center!important;
}
html body .ab-login-container{
width:min(100%,420px)!important;
}
html body .ab-login-container .ab-checkout-heading{text-align:center!important}
html body .ab-login-card{
display:grid!important;
gap:14px!important;
background:var(--ab-table-color)!important;
border:1px solid var(--ab-line)!important;
border-radius:18px!important;
padding:26px!important;
}
html body .ab-login-card label{
display:grid!important;
gap:7px!important;
color:var(--ab-text)!important;
font-size:13px!important;
font-weight:800!important;
}
html body .ab-login-card input{
height:46px!important;
padding:0 14px!important;
background:#14161a!important;
color:var(--ab-text)!important;
border:1px solid #3b4048!important;
border-radius:10px!important;
font:inherit!important;
}
html body .ab-login-card input:focus{
border-color:var(--ab-orange)!important;
outline:2px solid rgba(255,100,61,.14)!important;
}
html body .ab-login-error{
background:rgba(247,81,34,.1)!important;
border:1px solid var(--ab-orange)!important;
color:#ffb59e!important;
border-radius:10px!important;
padding:10px 14px!important;
font-size:13px!important;
}
html body .ab-login-lost{margin:0!important;text-align:center!important;font-size:12px!important}
html body .ab-login-lost a{color:var(--ab-muted)!important;text-decoration:underline!important}
html body .ab-login-alt{
text-align:center!important;
margin:20px 0 0!important;
color:var(--ab-muted)!important;
font-size:14px!important;
}
html body .ab-login-alt a{color:var(--ab-orange)!important;font-weight:700!important}
/* Lock badge on book grid / cover-rail thumbnails */
html body .ab-card-lock{
position:absolute!important;
top:10px!important;
right:10px!important;
width:28px!important;
height:28px!important;
display:grid!important;
place-items:center!important;
border-radius:50%!important;
background:rgba(15,16,18,.75)!important;
border:1px solid rgba(255,255,255,.18)!important;
font-size:13px!important;
backdrop-filter:blur(2px)!important;
}
html body .book-cover{position:relative!important}
/* Lock overlay on the single book cover */
html body .single-book-cover{position:relative!important}
html body .ab-cover-lock{
position:absolute!important;
top:14px!important;
right:14px!important;
width:38px!important;
height:38px!important;
display:grid!important;
place-items:center!important;
border-radius:50%!important;
background:rgba(15,16,18,.8)!important;
border:1px solid rgba(255,255,255,.2)!important;
font-size:17px!important;
}
/* Locked notice + unlocked actions on the book page */
html body .ab-book-actions{
display:flex!important;
gap:12px!important;
margin-top:8px!important;
}
html body .ab-download-action{
background:transparent!important;
border:1px solid var(--ab-line)!important;
color:var(--ab-text)!important;
}
html body .ab-download-action:hover{
border-color:var(--ab-orange)!important;
color:var(--ab-orange)!important;
}
html body .ab-locked-notice{
display:flex!important;
gap:14px!important;
align-items:flex-start!important;
background:var(--ab-table-color)!important;
border:1px solid var(--ab-line)!important;
border-left:3px solid var(--ab-orange)!important;
border-radius:14px!important;
padding:20px!important;
margin-top:8px!important;
}
html body .ab-locked-icon{font-size:20px!important;line-height:1!important;margin-top:2px!important}
html body .ab-locked-notice strong{display:block!important;color:var(--ab-text)!important;margin-bottom:6px!important;font-size:15px!important}
html body .ab-locked-notice p{margin:0 0 14px!important;color:var(--ab-muted)!important;font-size:13px!important}
html body .ab-locked-actions{display:flex!important;align-items:center!important;gap:16px!important;flex-wrap:wrap!important}
html body .ab-locked-login{color:var(--ab-muted)!important;text-decoration:underline!important;font-size:13px!important}
@media(max-width:600px){
html body .ab-book-actions{flex-direction:column!important}
}
/* =========================================================
AlbaBooks v4.5 — MODERN & BRIGHT REDESIGN
Inspired by Storytel's vibrant, contemporary aesthetic
========================================================= */
/* Color Palette Update */
:root{
/* Core brighter palette */
--ab-bg-primary: #0f0f12 !important; /* Slightly lighter than before */
--ab-surface-light: #1a1a22 !important; /* Elevated surfaces */
--ab-text-primary: #ffffff !important; /* Pure white for contrast */
--ab-text-muted: #b0aeb5 !important; /* Lighter gray */
--ab-accent-1: #ff6a42 !important; /* Warm orange (primary CTA) */
--ab-accent-2: #6ecf72 !important; /* Green (secondary/positive) */
--ab-accent-3: #4db8ff !important; /* Blue (tertiary/info) */
--ab-line: #2d2d3a !important; /* Borders - elevated */
--ab-glow: rgba(255, 106, 66, 0.2); /* Soft orange glow */
}
/* HERO BANNER */
html body .ab-hero-banner{
position: relative!important;
width: 100% !important;
min-height: 620px !important;
overflow: hidden !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
}
html body .ab-hero-video{
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
z-index: 0 !important;
}
html body .ab-hero-overlay{
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background: radial-gradient(ellipse at center, rgba(15,15,18,0.3) 0%, rgba(15,15,18,0.7) 100%) !important;
z-index: 1 !important;
}
html body .ab-hero-shapes{
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: 1 !important;
opacity: 0.5 !important;
}
html body .ab-shape{
position: absolute !important;
width: 300px !important;
height: 300px !important;
opacity: 0.4 !important;
}
html body .ab-shape-1{
top: -100px !important;
right: -150px !important;
animation: drift 20s ease-in-out infinite !important;
}
html body .ab-shape-2{
bottom: -50px !important;
left: -100px !important;
animation: drift 25s ease-in-out infinite reverse !important;
}
@keyframes drift{
0%, 100%{ transform: translate(0, 0) rotate(0deg) !important; }
50%{ transform: translate(30px, -30px) rotate(5deg) !important; }
}
html body .ab-hero-content{
position: relative !important;
z-index: 2 !important;
text-align: center !important;
max-width: 640px !important;
padding: 0 20px !important;
}
html body .ab-hero-title{
font-size: 56px !important;
font-weight: 800 !important;
letter-spacing: -1px !important;
color: var(--ab-text-primary) !important;
margin: 0 0 16px !important;
line-height: 1.1 !important;
}
html body .ab-hero-subtitle{
font-size: 18px !important;
font-weight: 400 !important;
color: var(--ab-text-muted) !important;
margin: 0 0 28px !important;
line-height: 1.6 !important;
}
html body .ab-hero-button{
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 14px 42px !important;
background: var(--ab-accent-1) !important;
color: white !important;
border: none !important;
border-radius: 12px !important;
font-weight: 700 !important;
font-size: 15px !important;
letter-spacing: 0.5px !important;
cursor: pointer !important;
text-decoration: none !important;
transition: all 0.3s ease !important;
box-shadow: 0 8px 24px rgba(255, 106, 66, 0.2) !important;
}
html body .ab-hero-button:hover{
background: #ff5a2f !important;
transform: translateY(-2px) !important;
box-shadow: 0 12px 32px rgba(255, 106, 66, 0.3) !important;
}
@media(max-width: 768px){
html body .ab-hero-banner{ min-height: 480px !important; }
html body .ab-hero-title{ font-size: 36px !important; }
html body .ab-hero-subtitle{ font-size: 16px !important; }
}
/* GLOBAL BRIGHTNESS IMPROVEMENTS */
html body .site-header{
background: linear-gradient(180deg, var(--ab-surface-light) 0%, rgba(26,26,34,0.95) 100%) !important;
border-bottom: 1px solid var(--ab-line) !important;
box-shadow: 0 2px 12px rgba(0,0,0,0.3) !important;
}
html body .ab-footer{
background: linear-gradient(180deg, var(--ab-surface-light) 0%, var(--ab-bg-primary) 100%) !important;
border-top: 1px solid var(--ab-line) !important;
}
/* Pricing Plans - Brighter Cards */
html body .plan-card{
background: var(--ab-surface-light) !important;
border: 1px solid var(--ab-line) !important;
border-radius: 18px !important;
transition: all 0.3s ease !important;
box-shadow: 0 4px 16px rgba(0,0,0,0.2) !important;
}
html body .plan-card:hover{
border-color: var(--ab-accent-1) !important;
box-shadow: 0 8px 32px rgba(255, 106, 66, 0.15) !important;
transform: translateY(-4px) !important;
}
html body .plan-card.popular{
border-color: var(--ab-accent-1) !important;
box-shadow: 0 8px 32px rgba(255, 106, 66, 0.15) !important;
background: linear-gradient(135deg, var(--ab-surface-light) 0%, rgba(255,106,66,0.05) 100%) !important;
}
html body .plan-card h2{
color: var(--ab-text-primary) !important;
font-weight: 800 !important;
font-size: 24px !important;
}
html body .plan-card .price{
color: var(--ab-accent-1) !important;
font-size: 32px !important;
font-weight: 800 !important;
}
html body .plan-button{
background: var(--ab-accent-1) !important;
color: white !important;
font-weight: 700 !important;
border: none !important;
border-radius: 10px !important;
padding: 14px 32px !important;
transition: all 0.3s ease !important;
box-shadow: 0 4px 12px rgba(255, 106, 66, 0.2) !important;
}
html body .plan-button:hover{
background: #ff5a2f !important;
box-shadow: 0 6px 20px rgba(255, 106, 66, 0.3) !important;
transform: translateY(-2px) !important;
}
/* Book Cards - Glowing on Hover */
html body .book-card{
background: var(--ab-surface-light) !important;
border: 1px solid var(--ab-line) !important;
border-radius: 14px !important;
overflow: hidden !important;
transition: all 0.3s ease !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
}
html body .book-card:hover{
border-color: var(--ab-accent-1) !important;
box-shadow: 0 8px 24px rgba(255, 106, 66, 0.2) !important;
transform: translateY(-3px) !important;
}
html body .book-card-info h3{
color: var(--ab-text-primary) !important;
font-weight: 700 !important;
}
html body .book-card-info p{
color: var(--ab-text-muted) !important;
font-size: 13px !important;
font-weight: 500 !important;
}
/* Buttons - Consistent Modern Style */
html body .primary-action{
background: var(--ab-accent-1) !important;
color: white !important;
padding: 13px 30px !important;
border-radius: 10px !important;
font-weight: 700 !important;
font-size: 14px !important;
border: none !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
box-shadow: 0 4px 12px rgba(255, 106, 66, 0.25) !important;
text-decoration: none !important;
display: inline-block !important;
}
html body .primary-action:hover{
background: #ff5a2f !important;
transform: translateY(-2px) !important;
box-shadow: 0 6px 20px rgba(255, 106, 66, 0.35) !important;
}
/* Locked Notice - Friendly, Non-Threatening */
html body .ab-locked-notice{
background: linear-gradient(135deg, var(--ab-surface-light) 0%, rgba(109,207,114,0.05) 100%) !important;
border: 1.5px solid rgba(109,207,114,0.3) !important;
border-left: 4px solid var(--ab-accent-2) !important;
border-radius: 14px !important;
padding: 24px !important;
}
html body .ab-locked-notice strong{
color: var(--ab-text-primary) !important;
font-size: 17px !important;
}
/* Forms - Brighter Inputs */
html body .ab-login-card input,
html body .ab-checkout-card input,
html body .ab-checkout-card select{
background: var(--ab-bg-primary) !important;
border: 1.5px solid var(--ab-line) !important;
color: var(--ab-text-primary) !important;
border-radius: 10px !important;
padding: 12px 14px !important;
font-size: 14px !important;
transition: all 0.3s ease !important;
}
html body .ab-login-card input:focus,
html body .ab-checkout-card input:focus,
html body .ab-checkout-card select:focus{
border-color: var(--ab-accent-1) !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(255,106,66,0.1) !important;
background: rgba(255,106,66,0.02) !important;
}
html body .ab-login-card input::placeholder,
html body .ab-checkout-card input::placeholder{
color: rgba(255,255,255,0.4) !important;
}
/* Labels - Brighter */
html body .ab-login-card label,
html body .ab-checkout-card label{
color: var(--ab-text-primary) !important;
font-weight: 700 !important;
font-size: 13px !important;
letter-spacing: 0.3px !important;
}
/* Order Summary - Elevated */
html body .ab-order-summary{
background: var(--ab-surface-light) !important;
border: 1px solid var(--ab-line) !important;
border-radius: 16px !important;
box-shadow: 0 4px 16px rgba(0,0,0,0.2) !important;
}
html body .ab-order-row.ab-order-total span:last-child{
color: var(--ab-accent-1) !important;
font-size: 22px !important;
font-weight: 900 !important;
}
html body .ab-order-check{
border-color: var(--ab-accent-1) !important;
color: var(--ab-accent-1) !important;
}
/* Typography - Sharper, More Contrast */
html body body{
background: var(--ab-bg-primary) !important;
color: var(--ab-text-primary) !important;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif !important;
font-weight: 400 !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
}
html body h1, html body h2, html body h3, html body h4{
font-weight: 800 !important;
letter-spacing: -0.5px !important;
color: var(--ab-text-primary) !important;
}
html body a{
color: var(--ab-accent-1) !important;
text-decoration: none !important;
transition: color 0.2s ease !important;
font-weight: 500 !important;
}
html body a:hover{
color: #ff5a2f !important;
text-decoration: underline !important;
}
/* Spacing - More breathing room */
html body .ab-checkout-page{ padding: 60px 20px 100px !important; }
html body .ab-login-page{ padding: 60px 20px 100px !important; }
/* Subtle background texture (optional) */
html body .ab-checkout-page::before{
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background: radial-gradient(ellipse 200% 100% at 50% 0%, rgba(109,207,114,0.03) 0%, transparent 50%) !important;
pointer-events: none !important;
z-index: 0 !important;
}
/* Smooth transitions everywhere */
* {
transition-property: background-color, border-color, box-shadow, color, transform !important;
transition-duration: 0.3s !important;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}
input, button, select, textarea{
transition-duration: 0.2s !important;
}
/* =========================================================
Legal Pages Styling (Privacy, Terms, Refund, Delivery)
========================================================= */
html body .ab-legal-page{
background: var(--ab-page, #070d1d) !important;
padding: 60px 20px 80px !important;
min-height: 60vh !important;
}
html body .ab-legal-container{
max-width: 800px !important;
margin: 0 auto !important;
color: var(--ab-text, #f5f2ec) !important;
}
html body .ab-legal-page h1{
font-size: 42px !important;
font-weight: 800 !important;
margin-bottom: 12px !important;
color: #ffffff !important;
letter-spacing: -0.5px !important;
}
html body .ab-legal-page h2{
font-size: 22px !important;
font-weight: 700 !important;
margin-top: 32px !important;
margin-bottom: 14px !important;
color: #ffffff !important;
border-bottom: 2px solid rgba(255, 100, 61, 0.2) !important;
padding-bottom: 8px !important;
}
html body .ab-legal-page h3{
font-size: 18px !important;
font-weight: 700 !important;
margin-top: 20px !important;
margin-bottom: 10px !important;
color: #ffffff !important;
}
html body .ab-legal-page p{
font-size: 15px !important;
line-height: 1.8 !important;
margin-bottom: 16px !important;
color: #b0aeb5 !important;
}
html body .ab-legal-page p strong{
color: #ffffff !important;
font-weight: 700 !important;
}
html body .ab-legal-page a{
color: #ff6a42 !important;
font-weight: 600 !important;
text-decoration: none !important;
border-bottom: 1px solid rgba(255, 100, 61, 0.3) !important;
transition: all 0.2s ease !important;
}
html body .ab-legal-page a:hover{
color: #ffffff !important;
border-bottom-color: #ff6a42 !important;
background: rgba(255, 100, 61, 0.1) !important;
padding: 0 2px !important;
}
html body .ab-legal-page ul{
margin: 16px 0 16px 24px !important;
padding: 0 !important;
}
html body .ab-legal-page ul li{
margin-bottom: 10px !important;
line-height: 1.7 !important;
color: #b0aeb5 !important;
font-size: 15px !important;
}
html body .ab-legal-page ul li::marker{
color: #ff6a42 !important;
font-weight: 700 !important;
}
html body .ab-legal-page > p:first-of-type{
font-size: 14px !important;
color: #a9a6a0 !important;
margin-bottom: 24px !important;
}
@media(max-width: 768px){
html body .ab-legal-page{ padding: 40px 16px 60px !important; }
html body .ab-legal-page h1{ font-size: 28px !important; }
html body .ab-legal-page h2{ font-size: 18px !important; margin-top: 24px !important; }
html body .ab-legal-page p{ font-size: 14px !important; line-height: 1.7 !important; }
}
/* =========================================================
Legal Pages - Highlighted Box Styling
========================================================= */
html body .ab-legal-highlight{
background: rgba(77, 110, 203, 0.1) !important;
border: 1px solid rgba(77, 110, 203, 0.3) !important;
border-radius: 12px !important;
padding: 20px !important;
margin: 20px 0 28px !important;
}
html body .ab-legal-highlight p{
margin: 0 0 12px !important;
}
html body .ab-legal-highlight p:last-child{
margin-bottom: 0 !important;
}
html body .ab-legal-highlight a{
border-bottom-color: rgba(77, 110, 203, 0.5) !important;
}
html body .ab-legal-brand{
font-size: 12px !important;
font-weight: 900 !important;
letter-spacing: 2px !important;
color: #a9a6a0 !important;
margin-bottom: 12px !important;
text-transform: uppercase !important;
}
/* ============================================================
v4.1 additions: hero section, animated marquee, format badges
============================================================ */
.abn-hero {
position: relative;
max-width: 1460px;
margin: 0 auto;
padding: 56px 60px 24px;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 40px;
overflow: hidden;
}
.abn-hero-copy > * {
opacity: 0;
transform: translateY(22px);
animation: abnHeroReveal 0.9s cubic-bezier(.2,.8,.2,1) forwards;
}
.abn-hero-eyebrow-row { animation-delay: 0.05s; display: flex; align-items: center; gap: 10px; margin-bottom: 18px; opacity: 0; transform: translateY(22px); animation: abnHeroReveal 0.9s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: 0.05s; }
.abn-hero h1 { animation-delay: 0.18s; }
.abn-hero-sub { animation-delay: 0.32s; }
.abn-hero-ctas { animation-delay: 0.46s; }
@keyframes abnHeroReveal { to { opacity: 1; transform: translateY(0); } }
.abn-hero-eyebrow {
display: inline-block;
color: var(--gold);
font-weight: 700;
font-size: 13px;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.abn-format-icons { display: inline-flex; gap: 6px; color: var(--gold); }
.abn-format-icons svg { width: 18px; height: 18px; }
.abn-hero h1 {
font-size: 3.4rem;
line-height: 1.04;
font-weight: 900;
letter-spacing: -0.03em;
margin: 0 0 20px;
color: var(--accent);
}
.abn-hero h1 span { color: var(--text); }
.abn-hero-sub {
color: var(--muted);
font-size: 1.1rem;
line-height: 1.6;
max-width: 440px;
margin: 0 0 32px;
}
.abn-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.abn-btn-pill {
display: inline-flex; align-items: center; justify-content: center;
padding: 15px 30px;
border-radius: 999px;
font-weight: 700;
font-size: 15px;
text-decoration: none;
transition: transform 150ms ease, background 150ms ease, box-shadow 150ms ease;
}
.abn-btn-pill.primary { background: var(--accent); color: #fff; box-shadow: 0 10px 26px rgba(255,93,47,0.32); }
.abn-btn-pill.primary:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(255,93,47,0.42); }
.abn-btn-pill.ghost { background: transparent; color: var(--text); border: 1.5px solid rgba(255,255,255,0.25); }
.abn-btn-pill.ghost:hover { border-color: var(--text); transform: translateY(-2px); }
.abn-hero-art { position: relative; height: 420px; width: 100%; overflow: hidden; }
.abn-hero-scene { position: absolute; inset: 0; opacity: 0; animation: abnSceneCycle 10s ease-in-out infinite; }
.abn-hero-scene.scene-collage { animation-delay: 0s; }
.abn-hero-scene.scene-reading { animation-delay: -5s; }
@keyframes abnSceneCycle {
0% { opacity: 1; }
42% { opacity: 1; }
50% { opacity: 0; }
92% { opacity: 0; }
100% { opacity: 1; }
}
.abn-reading-scene { width: 100%; height: 100%; }
.abn-reading-scene .abn-star { animation: abnTwinkle 2.6s ease-in-out infinite; transform-origin: center; }
.abn-reading-scene .abn-star:nth-child(2) { animation-delay: 0.6s; }
.abn-reading-scene .abn-star:nth-child(3) { animation-delay: 1.3s; }
@keyframes abnTwinkle { 0%, 100% { opacity: 0.25; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.15); } }
.abn-reading-scene .abn-page-left { animation: abnPageFlip 3.2s ease-in-out infinite; transform-origin: 50% 100%; }
.abn-reading-scene .abn-page-right { animation: abnPageFlip 3.2s ease-in-out infinite reverse; transform-origin: 50% 100%; }
@keyframes abnPageFlip { 0%, 100% { transform: rotateY(0deg) scaleX(1); } 50% { transform: rotateY(8deg) scaleX(0.97); } }
.abn-reading-scene .abn-kid-head { animation: abnNod 4s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes abnNod { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-3deg); } }
.abn-blob { position: absolute; border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; }
.abn-blob-teal { width: 260px; height: 260px; background: #2c7a6b; top: 10px; right: 40px; opacity: 0.9; }
.abn-blob-gold { width: 190px; height: 190px; background: var(--gold); bottom: 0; left: 10px; opacity: 0.95; }
.abn-cover-blob {
position: absolute;
overflow: hidden;
box-shadow: 0 30px 60px rgba(0,0,0,0.45);
border: 4px solid var(--bg);
opacity: 0;
transform: scale(0.85);
animation: abnPopIn 0.7s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes abnPopIn { to { opacity: 1; transform: scale(1); } }
.abn-cover-blob img { width: 100%; height: 100%; object-fit: cover; display: block; }
.abn-cover-blob.c1 { width: 230px; height: 300px; border-radius: 46% 54% 40% 60% / 55% 45% 55% 45%; top: 30px; left: 60px; animation-delay: 0.5s; }
.abn-cover-blob.c2 { width: 190px; height: 250px; border-radius: 60% 40% 55% 45% / 45% 55% 45% 55%; bottom: 10px; right: 20px; animation-delay: 0.68s; }
/* Bike-reading hero scene */
.abn-bike-scene .abn-bike-rider { animation: abnBikeCruise 5.5s ease-in-out infinite; transform-origin: center; }
.abn-bike-scene .abn-bike-frame circle { animation: abnWheelSpin 1.2s linear infinite; transform-origin: center; transform-box: fill-box; }
.abn-bike-scene .abn-kid-body { animation: abnRideBob .72s ease-in-out infinite alternate; transform-origin: 50% 100%; }
.abn-bike-scene .abn-bike-book { animation: abnBookBounce 1.6s ease-in-out infinite; transform-origin: center; }
.abn-bike-scene .abn-pedals { animation: abnPedalSpin .85s linear infinite; transform-origin: 245px 215px; }
.abn-bike-scene .abn-motion-lines { animation: abnMotionPulse 1.4s ease-in-out infinite; }
.abn-bike-scene .abn-clouds { animation: abnCloudDrift 11s linear infinite alternate; }
@keyframes abnBikeCruise { 0%,100% { transform: translate(55px,0); } 50% { transform: translate(-18px,-5px); } }
@keyframes abnWheelSpin { to { transform: rotate(360deg); } }
@keyframes abnRideBob { to { transform: translateY(-5px) rotate(-1deg); } }
@keyframes abnBookBounce { 0%,100% { transform: translate(200px,78px) rotate(-8deg); } 50% { transform: translate(200px,72px) rotate(-5deg); } }
@keyframes abnPedalSpin { to { transform: rotate(360deg); } }
@keyframes abnMotionPulse { 0%,100% { opacity:.15; transform: translateX(20px); } 50% { opacity:.75; transform: translateX(-12px); } }
@keyframes abnCloudDrift { to { transform: translateX(24px); } }
@media (max-width: 1050px) {
.abn-hero { grid-template-columns: 1fr; padding-top: 40px; }
.abn-hero-art { height: 320px; margin-top: 20px; }
.abn-hero h1 { font-size: 2.6rem; }
}
@media (max-width: 760px) {
.abn-hero { padding-left: 22px; padding-right: 22px; }
.abn-hero h1 { font-size: 2.1rem; }
}
/* Marquee: auto-scroll the (now-duplicated) cover-rail-track for a seamless loop */
.cover-rail-mask {
-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.cover-rail-track { animation: abnMarqueeScroll 38s linear infinite; }
.cover-rail:hover .cover-rail-track { animation-play-state: paused; }
@keyframes abnMarqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.rail-cover { position: relative; cursor: default; }
.rail-format-badge {
position: absolute;
top: 8px;
right: 8px;
width: 26px;
height: 26px;
border-radius: 50%;
background: rgba(16,17,20,0.72);
display: grid;
place-items: center;
color: var(--text);
z-index: 2;
}
.rail-format-badge svg { width: 13px; height: 13px; }
@media (prefers-reduced-motion: reduce) {
.abn-hero-copy > *, .abn-hero-eyebrow-row, .abn-cover-blob, .abn-hero-scene, .cover-rail-track,
.abn-star, .abn-page-left, .abn-page-right, .abn-kid-head {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
.abn-hero-scene.scene-reading { display: none; }
.abn-hero-scene.scene-collage { opacity: 1; }
}
/* =========================================================
AlbaBooks v4.3 — bright modern Storytel-inspired redesign
========================================================= */
:root{--ab-orange:#ff633d;--ab-ink:#17233b;--ab-cream:#fff9f3;--ab-peach:#fff0e8;--ab-lav:#eee8ff;--ab-sky:#eaf5ff;--ab-pink:#fdeaf0}
html,body{background:#f7f8fc!important;color:var(--ab-ink)!important}
.site-header{background:rgba(255,255,255,.94)!important;border-bottom:1px solid #edf0f5!important;box-shadow:0 8px 30px rgba(28,42,72,.06)!important;backdrop-filter:blur(18px)}
.site-nav{max-width:1400px!important;padding:14px 28px!important}
.brand{color:#17233b!important;font-weight:900!important;font-size:26px!important;letter-spacing:-.6px}.brand-mark{background:linear-gradient(135deg,#ff633d,#ff8d2e)!important;border-radius:7px!important}
.main-nav a,.nav-actions>a{color:#26324a!important}.main-nav a:hover{color:var(--ab-orange)!important}.subscribe-nav{background:var(--ab-orange)!important;color:#fff!important;border-radius:999px!important;padding:14px 25px!important;box-shadow:0 10px 24px rgba(255,99,61,.24)!important}
.abn-hero{max-width:1500px!important;margin:0 auto!important;min-height:445px!important;border-radius:0 0 30px 30px!important;background:radial-gradient(circle at 55% 42%,#fff3d5 0,#ffe8d6 27%,transparent 55%),linear-gradient(105deg,#ffe9ed 0%,#fff4df 52%,#e9dcff 100%)!important;box-shadow:0 20px 60px rgba(39,48,80,.10)!important;overflow:hidden!important;position:relative!important;padding:54px 7%!important}
.abn-hero:before{content:"";position:absolute;inset:auto 0 0;height:36%;background:linear-gradient(180deg,transparent,#e7f2d8 60%,#d6e9bf);z-index:0}.abn-hero-copy,.abn-hero-art{position:relative;z-index:1}.abn-hero-copy{max-width:570px!important}.abn-hero-eyebrow{background:rgba(255,255,255,.72)!important;color:#694d92!important;border:1px solid rgba(255,255,255,.9)!important;border-radius:999px!important;padding:8px 14px!important;box-shadow:0 8px 18px rgba(79,65,110,.08)!important}.abn-hero h1{color:#17233b!important;font-size:clamp(3rem,5vw,5.4rem)!important;line-height:.98!important;letter-spacing:-3px!important}.abn-hero h1 span{color:#17233b!important}.abn-hero-sub{color:#40506a!important;font-size:17px!important;max-width:520px!important;line-height:1.7!important}.abn-btn-pill{border-radius:999px!important;padding:16px 26px!important;font-weight:850!important}.abn-btn-pill.primary{background:linear-gradient(110deg,#ff6c3f,#ff4e35)!important;box-shadow:0 14px 28px rgba(255,93,56,.25)!important}.abn-btn-pill.ghost{background:rgba(255,255,255,.72)!important;color:#2a3850!important;border:1px solid rgba(255,255,255,.95)!important;box-shadow:0 8px 20px rgba(35,44,70,.08)!important}.abn-format-icons{color:#ff633d!important}
.abn-hero-art{height:420px!important}.abn-hero-scene.scene-collage{display:none!important}.abn-hero-scene.scene-reading{inset:0!important;background:transparent!important}.abn-bike-scene{width:100%!important;height:100%!important;filter:drop-shadow(0 18px 20px rgba(60,48,39,.12))!important}.abn-bike-scene .abn-bike-frame{stroke:#f05b31!important}.abn-bike-scene .abn-bike-frame circle{stroke:#39435b!important}.abn-bike-scene .abn-kid-body path:first-child{fill:#f4a63f!important}.abn-bike-scene .abn-motion-lines{stroke:#fff!important}.abn-bike-scene .abn-clouds path{fill:#fff!important;opacity:.52!important}
.cover-rail{background:#f7f8fc!important;padding:38px 0 22px!important}.rail-cover{width:175px!important;height:235px!important;flex-basis:175px!important;border-radius:14px!important;box-shadow:0 16px 32px rgba(29,42,72,.13)!important}.rail-cover img{border-radius:14px!important}
.why-plans,.categories-section,.discover-section{max-width:1400px!important;margin-left:auto!important;margin-right:auto!important}.why-plans{background:linear-gradient(115deg,#fff0e7,#fff8f1)!important;border-radius:28px!important;padding:48px!important;box-shadow:0 18px 44px rgba(35,44,70,.08)!important}.why-copy h1,.section-heading h2{color:#17233b!important}.why-copy h1 span{color:#ff633d!important}.benefits li{color:#42516b!important}.plans-panel{background:rgba(255,255,255,.86)!important;border-radius:24px!important;box-shadow:none!important}.plans-kicker{color:#ff633d!important}.plan-card{background:#fff!important;border:1px solid #edf0f5!important;color:#17233b!important;border-radius:20px!important;box-shadow:0 12px 26px rgba(34,44,70,.06)!important}.plan-card.popular{border:2px solid #ff633d!important;transform:translateY(-6px)!important}.popular-badge{background:#ff633d!important;color:#fff!important}.plan-card h2,.price strong{color:#17233b!important}.plan-subtitle,.renewal,.plan-card li{color:#65718a!important}.plan-button{background:#ff633d!important;border-radius:999px!important}.plan-assurances{color:#34415a!important}
.categories-section{padding-top:64px!important}.category-grid{gap:18px!important}.category-card{height:210px!important;border-radius:22px!important;box-shadow:0 14px 32px rgba(34,44,70,.09)!important;background:#fff!important}.category-card:nth-child(1){background:#fff4d9!important}.category-card:nth-child(2){background:#eee7ff!important}.category-card:nth-child(3){background:#e9f3ff!important}.category-card:nth-child(4){background:#fdeaf0!important}.category-card:nth-child(5){background:#e9f8ef!important}.category-card img{mix-blend-mode:multiply!important}.category-card span{color:#26324a!important;font-weight:850!important}.section-label{color:#ff633d!important}.section-heading a{color:#ff633d!important;font-weight:800!important}
.discover-section{background:#fff!important;border-radius:28px!important;padding:38px!important;margin-bottom:56px!important;box-shadow:0 14px 40px rgba(35,44,70,.06)!important}.book-card{border-radius:18px!important;overflow:hidden!important;box-shadow:0 12px 28px rgba(29,42,72,.09)!important}.book-card:hover{transform:translateY(-5px)!important}.book-card-title{color:#17233b!important}
.ab-footer{background:#fff!important;border-top:1px solid #edf0f5!important}.ab-footer-grid{border-bottom-color:#edf0f5!important}.ab-footer h4{color:#ff633d!important}.ab-footer p,.ab-footer a,.ab-footer-bottom{color:#68758b!important}.ab-socials a{background:#f1f3f8!important;color:#26324a!important}.ab-payment-badges span{background:#fff7f3!important;border-color:#ffd8cb!important;color:#6a493f!important}
@media(max-width:900px){.abn-hero{padding:44px 30px!important}.abn-hero-art{height:330px!important}.why-plans{padding:28px!important}.discover-section{border-radius:0!important}}
@media(max-width:600px){.site-nav{padding:12px 18px!important}.brand{font-size:22px!important}.abn-hero{border-radius:0!important;padding:36px 22px!important}.abn-hero h1{letter-spacing:-1.8px!important}.abn-hero-art{height:270px!important}.why-plans{border-radius:0!important;padding:28px 20px!important}.category-card{height:180px!important}.discover-section{padding:28px 20px!important}}
/* =========================================================
AlbaBooks v4.4 — visual fidelity pass based on approved concept
========================================================= */
html,body{background:#f4f6fb!important}
.site-header{height:82px!important;background:rgba(255,255,255,.96)!important;position:sticky!important;top:0!important}
.site-nav{width:min(100%,1460px)!important;max-width:none!important;padding:12px 36px!important;gap:36px!important}
.brand{font-size:28px!important}.brand-mark{width:26px!important;height:26px!important;border-radius:5px!important;clip-path:polygon(0 8%,48% 22%,50% 100%,52% 22%,100% 8%,100% 88%,52% 100%,50% 96%,48% 100%,0 88%)!important}
.main-nav ul{gap:34px!important}.main-nav a{font-size:14px!important}.nav-actions{gap:14px!important;border-left:0!important;padding-left:0!important}.nav-actions>a:first-child{padding:12px 18px!important;border:1px solid #edf0f5!important;border-radius:999px!important}.search-icon{order:-1;border-left:0!important;padding-left:0!important;font-size:26px!important}
.abn-hero{display:grid!important;grid-template-columns:minmax(0,1.02fr) minmax(520px,.98fr)!important;align-items:center!important;gap:20px!important;width:min(100% - 36px,1500px)!important;max-width:none!important;min-height:450px!important;margin:0 auto!important;border-radius:0 0 28px 28px!important;padding:40px 54px!important;background:radial-gradient(circle at 72% 25%,rgba(255,255,255,.75),transparent 23%),linear-gradient(105deg,#fff0f1 0%,#fff6e8 47%,#f3eaff 100%)!important}
.abn-hero:before{height:28%!important;background:linear-gradient(180deg,transparent,rgba(222,241,204,.72))!important}
.abn-hero-copy{max-width:590px!important;align-self:center!important}.abn-hero h1{font-size:clamp(3.2rem,5vw,5.8rem)!important;line-height:.95!important;letter-spacing:-3.8px!important;margin:12px 0 18px!important}.abn-hero-sub{font-size:17px!important;margin-bottom:20px!important}.abn-hero-benefits{display:flex!important;gap:28px!important;flex-wrap:wrap!important;margin-top:26px!important;color:#293850!important;font-size:13px!important;font-weight:700!important}.abn-hero-benefits span{display:flex!important;align-items:center!important;gap:7px!important}.abn-hero-benefits span::first-letter{color:#ff633d}
.abn-hero-art{height:450px!important;overflow:visible!important}.abn-hero-illustration{position:absolute!important;inset:-10px -56px -12px -70px!important;background:url('../images/hero-bike-kid.png') center center/cover no-repeat!important;animation:abnModernFloat 6s ease-in-out infinite!important;filter:drop-shadow(0 18px 24px rgba(44,35,53,.10))!important}.abn-hero-illustration:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,246,232,.42),transparent 30%);pointer-events:none}
@keyframes abnModernFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.cover-rail-secondary{display:none!important}.cover-rail-after{display:block!important;background:#f4f6fb!important;padding:12px 0 38px!important}.cover-rail-after .cover-rail-track{gap:16px!important;padding:0 24px!important}.cover-rail-after .rail-cover{width:145px!important;height:195px!important;flex-basis:145px!important;border-radius:15px!important}.cover-rail-after .rail-cover img{border-radius:15px!important}
.categories-section{width:min(100% - 72px,1400px)!important;max-width:none!important;padding:22px 0 34px!important}.categories-section .section-heading{justify-content:center!important;text-align:center!important;margin-bottom:24px!important}.categories-section .section-heading>div{display:block!important}.categories-section .section-heading>a{display:none!important}.categories-section .section-label{display:none!important}.section-heading h2{font-size:30px!important;letter-spacing:-1px!important}.section-heading h2:after{content:'Find the perfect story for every mood and moment.';display:block!important;margin-top:7px!important;font-size:14px!important;font-weight:500!important;letter-spacing:0!important;color:#69758a!important}
.category-grid{grid-template-columns:repeat(5,1fr)!important;gap:14px!important}.category-card{height:145px!important;display:grid!important;grid-template-columns:1fr 1fr!important;align-items:center!important;padding:14px!important;overflow:hidden!important;border-radius:20px!important}.category-card img{width:100%!important;height:100%!important;object-fit:contain!important;mix-blend-mode:multiply!important;order:0!important}.category-card span{position:static!important;align-self:center!important;font-size:16px!important;z-index:2!important}.category-card:after{display:none!important}
.discover-section{width:min(100% - 72px,1400px)!important;max-width:none!important;margin:0 auto 18px!important;padding:30px 34px!important;border-radius:24px!important;background:#fff!important}.discover-section .section-heading{margin-bottom:20px!important}.discover-section .section-label{display:none!important}.discover-section .section-heading h2:after{display:none!important}.book-grid{grid-template-columns:repeat(6,1fr)!important;gap:16px!important}.book-card h3{font-size:14px!important}.book-card p{font-size:12px!important}
.why-plans{width:min(100% - 72px,1400px)!important;max-width:none!important;margin:30px auto 64px!important;padding:44px!important;display:grid!important;grid-template-columns:.8fr 1.2fr!important;gap:42px!important}.why-copy h1{font-size:54px!important;line-height:1!important}.benefits{margin-top:24px!important;gap:14px!important}.benefits li{font-size:15px!important}.plans-grid{gap:14px!important}.plan-card{padding:24px 18px!important}.price strong{font-size:46px!important}
@media(max-width:1100px){.site-nav{padding:12px 22px!important}.abn-hero{grid-template-columns:1fr!important;padding:38px 30px!important}.abn-hero-art{height:360px!important}.abn-hero-illustration{inset:0 -30px -10px!important}.category-grid{grid-template-columns:repeat(3,1fr)!important}.book-grid{grid-template-columns:repeat(3,1fr)!important}.why-plans{grid-template-columns:1fr!important}}
@media(max-width:700px){.site-header{height:70px!important}.site-nav{width:100%!important;padding:10px 16px!important}.abn-hero{width:100%!important;border-radius:0!important;padding:32px 20px!important}.abn-hero h1{font-size:3.15rem!important}.abn-hero-art{height:290px!important}.abn-hero-benefits{gap:12px 18px!important;font-size:12px!important}.categories-section,.discover-section,.why-plans{width:100%!important}.categories-section{padding:28px 16px!important}.category-grid{grid-template-columns:1fr 1fr!important}.category-card{height:130px!important}.discover-section{padding:26px 16px!important;border-radius:0!important}.book-grid{grid-template-columns:1fr 1fr!important}.why-plans{border-radius:0!important;padding:28px 20px!important}.cover-rail-after .rail-cover{width:118px!important;height:158px!important;flex-basis:118px!important}}
/* v4.5 Exact bright modern homepage rebuild */
html,body{background:#f7f8fc!important;color:#17233b!important}
body.home main{padding:0!important;background:#f7f8fc!important}
.site-header{height:82px!important;background:#fff!important;border-bottom:1px solid #edf0f4!important;box-shadow:0 2px 14px rgba(30,40,70,.04)!important}
.site-nav{max-width:1460px!important;width:100%!important;padding:0 38px!important;margin:auto!important}
.brand{color:#24314a!important;font-size:27px!important;font-weight:900!important}
.main-nav a,.nav-actions>a{color:#26324a!important}.subscribe-nav{background:#ff633d!important;color:#fff!important!important;border-radius:999px!important;padding:13px 25px!important;border:0!important}
.nav-actions>a:first-child{border:1px solid #e7eaf0!important;border-radius:999px!important;padding:11px 20px!important}
.modern-home{max-width:1500px;margin:0 auto;padding:18px}
.modern-hero{min-height:445px;border-radius:24px;overflow:hidden;display:grid;grid-template-columns:1.05fr .95fr;background:linear-gradient(110deg,#fff0f1 0%,#fff6df 50%,#eee5ff 100%);box-shadow:0 20px 55px rgba(34,42,68,.09)}
.modern-hero-copy{padding:48px 30px 42px 72px;align-self:center;position:relative;z-index:2}
.modern-eyebrow{display:inline-flex;gap:10px;align-items:center;border:1px solid rgba(255,255,255,.9);background:rgba(255,255,255,.72);box-shadow:0 8px 20px rgba(42,45,70,.07);padding:8px 13px;border-radius:999px;font-size:12px;letter-spacing:1.1px;font-weight:900;color:#714f72}.modern-eyebrow span{color:#ff633d}
.modern-hero h1{font-size:clamp(3.3rem,5.2vw,5.6rem)!important;line-height:.96!important;letter-spacing:-3.8px!important;margin:16px 0!important;color:#17233b!important}
.modern-hero p{font-size:17px;line-height:1.65;color:#40506a;margin:0 0 24px}
.modern-actions{display:flex;gap:16px;flex-wrap:wrap}.modern-primary,.modern-secondary{display:inline-flex;align-items:center;justify-content:center;padding:16px 27px;border-radius:999px;font-weight:850;transition:.2s}
.modern-primary{background:linear-gradient(110deg,#ff6c3f,#ff4f35);color:#fff;box-shadow:0 12px 24px rgba(255,93,56,.22)}.modern-secondary{background:rgba(255,255,255,.8);color:#293850;border:1px solid #fff;box-shadow:0 8px 20px rgba(30,40,70,.08)}
.modern-primary:hover,.modern-secondary:hover{transform:translateY(-2px)}
.modern-benefits{display:flex;flex-wrap:wrap;gap:20px 28px;margin-top:28px;font-size:13px;font-weight:700;color:#34415b}
.modern-hero-art{min-height:445px;background:url('../images/hero-bike-kid.png') center/cover no-repeat;filter:saturate(1.05);transform:scale(1.01)}
.modern-categories{padding:24px 40px 34px;text-align:center}.modern-categories h2,.modern-popular h2,.modern-trial h2{margin:0;color:#1b2942;font-size:31px;letter-spacing:-1px}.modern-categories>p{margin:7px 0 20px;color:#69758a}
.modern-category-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;text-align:left}
.modern-category{min-height:142px;border-radius:20px;display:grid;grid-template-columns:108px 1fr 32px;align-items:center;gap:8px;padding:12px 14px;box-shadow:0 12px 28px rgba(34,44,70,.08);transition:.2s;overflow:hidden}
.modern-category:hover{transform:translateY(-4px)}.modern-category img{width:108px;height:112px;object-fit:contain;mix-blend-mode:multiply}
.modern-category div{display:grid;gap:7px}.modern-category strong{font-size:16px;color:#24314a}.modern-category small{font-size:12px;line-height:1.45;color:#536078}.modern-category b{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:19px}
.modern-category.orange{background:#fff3d9}.modern-category.orange b{background:#f39a16}.modern-category.purple{background:#eee8ff}.modern-category.purple b{background:#8d63d8}.modern-category.blue{background:#e5f2ff}.modern-category.blue b{background:#3c91d9}.modern-category.pink{background:#fde9ef}.modern-category.pink b{background:#e77b9c}.modern-category.green{background:#e6f6ee}.modern-category.green b{background:#53b986}
.modern-popular{margin:0 40px 20px;background:#fff;border-radius:24px;padding:24px 28px;box-shadow:0 14px 36px rgba(35,44,70,.06)}.modern-section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.modern-section-head a{color:#ff633d;font-weight:800;font-size:14px}.modern-books{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.modern-book{display:block;aspect-ratio:2/3;border-radius:13px;overflow:hidden;box-shadow:0 10px 22px rgba(29,42,72,.13)}.modern-book img{width:100%;height:100%;object-fit:cover;display:block}
.modern-trial{margin:0 40px 38px;border-radius:24px;background:linear-gradient(115deg,#fff0e9,#ffe7e8 56%,#f6e8ff);padding:32px 42px;display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:245px;overflow:hidden}.modern-trial ul{list-style:none;padding:0;margin:17px 0 20px;display:grid;gap:10px;color:#536078;font-size:14px}.modern-trial li:before{content:'✓';color:#ff633d;font-weight:900;margin-right:10px}.trial-art{position:relative;height:210px;display:grid;place-items:center}.headphones{font-size:128px;filter:drop-shadow(0 12px 18px rgba(80,50,80,.16));z-index:2}.trial-books{position:absolute;font-size:52px;line-height:.42;color:#6959a8;transform:rotate(-4deg) translateY(56px)}
.why-plans{background:#fff7f2!important;border-radius:28px!important;box-shadow:0 16px 40px rgba(35,44,70,.06)!important}
@media(max-width:1100px){.modern-hero{grid-template-columns:1fr}.modern-hero-copy{padding:46px}.modern-hero-art{min-height:370px}.modern-category-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.modern-home{padding:0}.modern-hero{border-radius:0}.modern-hero-copy{padding:36px 22px}.modern-hero h1{font-size:3.15rem!important}.modern-hero-art{min-height:270px}.modern-benefits{gap:12px}.modern-categories{padding:30px 16px}.modern-category-grid{grid-template-columns:1fr 1fr}.modern-category{grid-template-columns:1fr;min-height:175px}.modern-category img{width:100%;height:105px}.modern-category b{position:absolute;display:none}.modern-popular,.modern-trial{margin:0 16px 20px}.modern-books{grid-template-columns:repeat(2,1fr)}.modern-trial{grid-template-columns:1fr;padding:30px 24px}.trial-art{display:none}.site-nav{padding:0 16px!important}}
/* v4.6 readability + requested homepage order */
body,html{background:#f7f8fc!important;color:#17233b!important}
.concept-home{max-width:1500px;margin:0 auto;padding:18px;background:#f7f8fc}
.concept-banner{min-height:360px;border-radius:28px;overflow:hidden;display:grid;grid-template-columns:1.05fr .95fr;background:linear-gradient(110deg,#fff0ef 0%,#fff7df 50%,#eee9ff 100%);box-shadow:0 20px 55px rgba(34,42,68,.10)}
.concept-banner-copy{padding:42px 36px 38px 56px;align-self:center}.concept-eyebrow{display:inline-flex;padding:8px 14px;border-radius:999px;background:#fff;color:#8a5c7b;font-weight:900;font-size:12px;letter-spacing:1px;box-shadow:0 8px 20px rgba(30,40,70,.08)}.concept-eyebrow span{margin-left:9px;color:#ff633d}
.concept-banner h1{margin:16px 0 14px!important;color:#17233b!important;font-size:clamp(2.5rem,3.6vw,3.9rem)!important;line-height:1.02!important;letter-spacing:-2px!important}.concept-banner p{margin:0 0 22px;color:#40506a!important;font-size:16px;line-height:1.6}.concept-actions{display:flex;gap:16px;flex-wrap:wrap}.concept-primary,.concept-secondary,.concept-plan-button{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font-weight:850;padding:15px 26px}.concept-primary,.concept-plan-button{background:linear-gradient(110deg,#ff6c3f,#ff4f35);color:#fff!important;box-shadow:0 12px 24px rgba(255,93,56,.22)}.concept-secondary{background:#fff;color:#273650!important;border:1px solid #e9edf3}.concept-benefits{display:flex;gap:18px 26px;flex-wrap:wrap;margin-top:22px;color:#34415b!important;font-size:13px;font-weight:750}
.concept-banner-art{position:relative;min-height:360px;background:linear-gradient(135deg,rgba(255,197,88,.18),rgba(255,112,155,.12)),url('../images/hero-bike-kid.png') center/cover no-repeat}.concept-book{position:absolute;left:9%;bottom:9%;font-size:72px;filter:drop-shadow(0 12px 14px rgba(40,40,60,.2));animation:conceptFloat 4s ease-in-out infinite}.concept-star{position:absolute;color:#ff633d;font-size:30px;animation:twinkle 2.6s infinite}.s1{left:13%;top:20%}.s2{right:14%;top:18%;animation-delay:1s}@keyframes conceptFloat{50%{transform:translateY(-12px) rotate(-4deg)}}@keyframes twinkle{50%{transform:scale(1.35);opacity:.5}}
/* =========================================================
v4.7.8 -- animated hero: drifting balloons
Adds two hand-drawn CSS hot-air balloons that drift/bob over
the hero photo -- on top of hero-bike-kid.png, not edited into
the photo itself.
========================================================= */
.concept-balloon{position:absolute;width:26px;height:36px;z-index:2;animation:balloonDrift1 9s ease-in-out infinite}
.concept-balloon .cb-envelope{position:absolute;top:0;left:0;width:100%;height:76%;border-radius:50%/58% 58% 42% 42%;background:linear-gradient(160deg,#ffd166,#ff9d4d 55%,#ff7a5c);box-shadow:inset -4px -4px 7px rgba(0,0,0,.14),inset 3px 4px 7px rgba(255,255,255,.35)}
.concept-balloon .cb-envelope:before,.concept-balloon .cb-envelope:after{content:'';position:absolute;bottom:-9px;width:1px;height:10px;background:#8a5a34}
.concept-balloon .cb-envelope:before{left:23%}
.concept-balloon .cb-envelope:after{right:23%}
.concept-balloon .cb-basket{position:absolute;bottom:0;left:50%;width:9px;height:6px;margin-left:-4.5px;background:#8a5a34;border-radius:1px}
.concept-balloon.cb1{left:6%;top:9%}
.concept-balloon.cb2{right:10%;top:23%;width:20px;height:28px;animation-name:balloonDrift2;animation-duration:11s;animation-delay:1.4s}
.concept-balloon.cb2 .cb-envelope{background:linear-gradient(160deg,#d8b4ff,#9b6bf0 58%,#7a4fd1)}
@keyframes balloonDrift1{0%{transform:translate(0,0) rotate(-2deg)}25%{transform:translate(7px,-11px) rotate(2deg)}50%{transform:translate(2px,-19px) rotate(-1deg)}75%{transform:translate(8px,-8px) rotate(2deg)}100%{transform:translate(0,0) rotate(-2deg)}}
@keyframes balloonDrift2{0%{transform:translate(0,0) rotate(2deg)}30%{transform:translate(-8px,-9px) rotate(-2deg)}60%{transform:translate(-3px,-17px) rotate(1deg)}100%{transform:translate(0,0) rotate(2deg)}}
@media(max-width:700px){.concept-balloon{width:20px;height:28px}.concept-balloon.cb2{width:16px;height:22px}}
.concept-animation{margin-top:26px;min-height:430px;border-radius:28px;overflow:hidden;display:grid;grid-template-columns:.72fr 1.28fr;background:#fff;box-shadow:0 16px 40px rgba(34,44,70,.07)}.concept-animation-copy{padding:60px 52px;align-self:center}.concept-kicker{color:#ff633d!important;font-weight:900!important;letter-spacing:1.4px!important;font-size:12px!important;margin:0 0 12px!important}.concept-animation h2,.concept-pricing h2,.concept-categories h2,.concept-books-section h2{color:#17233b!important}.concept-animation h2{font-size:46px;line-height:1.05;margin:0 0 18px}.concept-animation-copy>p:not(.concept-kicker){color:#536078!important;line-height:1.65;margin:0 0 24px}.bike-scene{position:relative;overflow:hidden;min-height:430px;background:linear-gradient(180deg,#ffd8dc 0%,#ffe9b8 38%,#cfe9bb 39%,#f8c780 100%)}.bike-scene:before{content:'';position:absolute;inset:0;background:url('../images/hero-bike-kid.png') center/cover no-repeat;opacity:.28;transform:scale(1.05)}.bike-art{position:absolute;inset:0;background:url('../images/hero-bike-kid.png') center/cover no-repeat;animation:bikeRide 7s ease-in-out infinite alternate}.scene-road{position:absolute;left:-10%;right:-10%;bottom:-10px;height:115px;background:linear-gradient(10deg,#e9b875,#fff0c6);border-radius:50% 50% 0 0/35% 35% 0 0}.cloud{position:absolute;width:110px;height:34px;background:rgba(255,255,255,.72);border-radius:999px;filter:blur(.2px);animation:cloudMove 16s linear infinite}.cloud:before,.cloud:after{content:'';position:absolute;background:inherit;border-radius:50%}.cloud:before{width:48px;height:48px;left:18px;bottom:4px}.cloud:after{width:38px;height:38px;right:16px;bottom:3px}.c1{top:14%;left:-15%;animation-duration:18s}.c2{top:27%;left:30%;animation-duration:24s;transform:scale(.7)}.c3{top:8%;left:62%;animation-duration:20s;transform:scale(.85)}@keyframes cloudMove{to{transform:translateX(150%);opacity:.9}}@keyframes bikeRide{0%{transform:translateX(-2%) scale(1.02)}100%{transform:translateX(2%) scale(1.03)}}
.concept-pricing{margin-top:26px;background:linear-gradient(115deg,#fff2ea,#fff9f2);border-radius:28px;padding:52px;box-shadow:0 16px 40px rgba(34,44,70,.06)}.concept-pricing-heading{text-align:center;max-width:760px;margin:0 auto 30px}.concept-pricing-heading h2{font-size:48px;line-height:1.05;margin:0 0 12px}.concept-pricing-heading h2 span{color:#ff633d}.concept-pricing-heading>p:last-child{color:#59667c!important;margin:0}.concept-plans-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.concept-plan{position:relative;background:#fff;border:1px solid #edf0f5;border-radius:22px;padding:28px 22px;color:#17233b;box-shadow:0 10px 26px rgba(34,44,70,.06)}.concept-plan.popular{border:2px solid #ff633d;transform:translateY(-6px)}.concept-popular-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:#ff633d;color:#fff;padding:6px 15px;border-radius:999px;font-size:10px;font-weight:900;white-space:nowrap}.concept-plan h3{font-size:23px;margin:0 0 7px;color:#17233b!important}.concept-plan-subtitle{color:#3a4863!important;margin:0}.concept-price{display:flex;align-items:baseline;gap:6px;margin:18px 0}.concept-price strong{font-size:42px;color:#17233b}.concept-price span{font-size:12px;color:#3a4863}.concept-plan ul{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:10px;font-size:13px;font-weight:600}.concept-plan li{color:#2c3a54!important}.concept-plan li:before{content:'✓';color:#c8461e;font-weight:900;margin-right:8px}.concept-plan-button{width:100%;padding:13px}
.concept-plan.sunset .concept-plan-subtitle,.concept-plan.sunset .concept-price span,.concept-plan.sunset .concept-plan ul{color:#3a1c0e!important}
.concept-plan.sunset li:before{color:#7a2a0a}
.concept-plan.peach{background:linear-gradient(160deg,#ffe9d2,#ffd6ad);border-color:transparent}
.concept-plan.violet{background:linear-gradient(160deg,#ece3ff,#d9c8ff);border-color:transparent}
.concept-plan.sunset{background:linear-gradient(160deg,#ffd7c2,#ff9a6b);border-color:#ff633d}
.concept-plan.sky{background:linear-gradient(160deg,#dcefff,#b9ddff);border-color:transparent}
.concept-plan.peach .concept-plan-button{background:linear-gradient(110deg,#ff9f4d,#ff7a2e)}
.concept-plan.violet .concept-plan-button{background:linear-gradient(110deg,#9b6bf0,#7a4fd1)}
.concept-plan.sunset .concept-plan-button{background:linear-gradient(110deg,#ff6c3f,#ff4f35)}
.concept-plan.sky .concept-plan-button{background:linear-gradient(110deg,#4fa8f5,#2f86e0)}
.concept-categories{padding:52px 22px 34px;text-align:center}.concept-categories>p{color:#65718a!important;margin:8px 0 22px}.concept-category-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;text-align:left}.concept-category{min-height:152px;border-radius:20px;display:grid;grid-template-columns:104px 1fr 30px;align-items:center;gap:9px;padding:14px;box-shadow:0 10px 26px rgba(34,44,70,.07);overflow:hidden}.concept-category img{width:104px;height:112px;object-fit:contain;mix-blend-mode:multiply}.concept-category strong{display:block;color:#24314a;font-size:16px;margin-bottom:7px}.concept-category small{display:block;color:#536078;line-height:1.45}.concept-category b{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff}.concept-category.orange{background:#fff3d9}.concept-category.orange b{background:#f39a16}.concept-category.purple{background:#eee8ff}.concept-category.purple b{background:#8d63d8}.concept-category.blue{background:#e5f2ff}.concept-category.blue b{background:#3c91d9}.concept-category.pink{background:#fde9ef}.concept-category.pink b{background:#e77b9c}.concept-category.green{background:#e6f6ee}.concept-category.green b{background:#53b986}.concept-category.gold{background:#fdf3df}.concept-category.gold b{background:#c98a1f}
.concept-books-section{margin:0 22px 55px;background:#fff;border-radius:26px;padding:28px;box-shadow:0 14px 36px rgba(35,44,70,.06)}.concept-section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.concept-section-head h2{margin:0;font-size:31px}.concept-section-head p{margin:6px 0 0;color:#69758a!important}.concept-section-head>a{color:#ff633d!important;font-weight:850}.concept-books-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}.concept-book-card{display:block;color:#17233b}.concept-cover{aspect-ratio:2/3;border-radius:14px;overflow:hidden;box-shadow:0 10px 22px rgba(29,42,72,.14);background:#e9edf3}.concept-cover img{width:100%;height:100%;object-fit:cover;display:block}.concept-book-card h3{font-size:16px;margin:10px 0 0;color:#24314a!important}
@media(max-width:1100px){.concept-banner,.concept-animation{grid-template-columns:1fr}.concept-banner-art{min-height:360px}.concept-plans-grid{grid-template-columns:repeat(2,1fr)}.concept-category-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.concept-home{padding:0}.concept-banner,.concept-animation{border-radius:0}.concept-banner-copy,.concept-animation-copy{padding:32px 22px}.concept-banner h1{font-size:2.35rem!important}.concept-banner-art,.bike-scene{min-height:230px}.concept-pricing{border-radius:0;padding:38px 20px}.concept-pricing-heading h2{font-size:36px}.concept-plans-grid{grid-template-columns:1fr}.concept-plan.popular{transform:none}.concept-categories{padding:38px 16px}.concept-category-grid{grid-template-columns:1fr 1fr}.concept-category{grid-template-columns:1fr;min-height:170px}.concept-category img{width:100%;height:100px}.concept-category b{display:none}.concept-books-section{margin:0 16px 30px;padding:22px}.concept-books-grid{grid-template-columns:1fr 1fr}.concept-section-head{align-items:flex-start;gap:12px}.concept-section-head h2{font-size:26px}.concept-section-head>a{font-size:13px}.concept-benefits{gap:12px 18px}}
/* =========================================================
v4.17.4 -- homepage: trust strip, Learn/Read split cards,
full Courses path (Concept A + Concept B combined)
========================================================= */
.home-trust{margin-top:26px;display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid #edf0f5;border-radius:18px;box-shadow:0 14px 34px rgba(20,43,76,.06);overflow:hidden}
.home-trust-item{padding:22px 18px;text-align:center;border-right:1px solid #edf0f5}
.home-trust-item:last-child{border-right:none}
.home-trust-item strong{display:block;font-size:26px;color:#ff633d;margin-bottom:4px}
.home-trust-item span{font-size:12px;color:#65718a}
.home-split{margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.home-split-card{border-radius:20px;padding:26px 26px 24px;box-shadow:0 14px 34px rgba(20,43,76,.06)}
.home-split-card.learn{background:#17233b}
.home-split-card.read{background:#fff;border:1px solid #edf0f5}
.home-split-tag{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px;display:inline-block}
.home-split-card.learn .home-split-tag{color:#ffb499}
.home-split-card.read .home-split-tag{color:#ff633d}
.home-split-card h3{font-size:21px;margin:0 0 8px;color:#17233b!important}
.home-split-card.learn h3{color:#fff!important}
.home-split-card p{font-size:13px;line-height:1.55;margin:0 0 18px;color:#536078}
.home-split-card.learn p{color:#c7d2e6}
.home-split-steps{display:flex;gap:8px;margin-bottom:20px}
.home-split-step{flex:1;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:10px 8px;text-align:center}
.home-split-step strong{display:block;font-size:11px;color:#fff;margin-bottom:2px}
.home-split-step span{font-size:10px;color:#a8b6d1}
.home-split-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}
.home-chip{font-size:11px;font-weight:700;padding:5px 12px;border-radius:999px;background:#fffaf5;border:1px solid #f0e5dc;color:#1d2f4b}
.home-split-cta{display:inline-block;font-size:13px;font-weight:700;border-radius:999px;padding:10px 20px;text-decoration:none}
.home-split-card.learn .home-split-cta{background:#fff;color:#17233b!important}
.home-split-card.read .home-split-cta{background:linear-gradient(135deg,#ff7447,#ff5728);color:#fff!important}
.home-path{margin-top:40px;scroll-margin-top:110px}
.home-path-head{margin:0 0 8px}
.home-path-tag{font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#ff633d}
.home-path-head h2{font-size:26px;margin:4px 0 8px;color:#17233b!important}
.home-path-head p{font-size:14.5px;color:#65718a;margin:0 0 30px;max-width:640px}
.home-path-track{display:grid;grid-template-columns:repeat(3,1fr);gap:0;position:relative;margin-bottom:18px}
.home-path-track::before{content:"";position:absolute;top:27px;left:calc(100%/6);right:calc(100%/6);height:2px;background:repeating-linear-gradient(90deg,#edf0f5 0 8px,transparent 8px 16px);z-index:0}
.home-path-node{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 12px}
.home-path-badge{width:52px;height:52px;border-radius:50%;color:#fff;display:grid;place-items:center;font-weight:800;font-size:18px;box-shadow:0 10px 22px rgba(20,43,76,.14);margin-bottom:14px}
.home-path-node:nth-child(1) .home-path-badge{background:#ff633d}
.home-path-node:nth-child(2) .home-path-badge{background:#17233b}
.home-path-node:nth-child(3) .home-path-badge{background:#a9895a}
.home-path-card{background:#fff;border:1px solid #edf0f5;border-radius:18px;padding:20px 20px 22px;box-shadow:0 14px 34px rgba(20,43,76,.06);width:100%}
.home-path-level{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#8a94a8;margin-bottom:6px}
.home-path-card h3{font-size:16.5px;margin:0 0 8px;color:#17233b!important}
.home-path-card p{font-size:13px;line-height:1.55;color:#65718a;margin:0 0 14px}
.home-path-stats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.home-path-chip{font-size:11px;font-weight:600;color:#1d2f4b;background:#fffaf5;border:1px solid #f0e5dc;border-radius:999px;padding:4px 10px}
.home-path-cta{display:inline-block;font-size:13px;font-weight:700;color:#fff!important;background:linear-gradient(135deg,#ff7447,#ff5728);border-radius:999px;padding:9px 18px;text-decoration:none}
.home-path-more{text-align:center;font-size:13.5px;color:#65718a;margin:0}
.home-path-more a{color:#ff633d!important;font-weight:700;text-decoration:none}
@media(max-width:900px){
.home-trust{grid-template-columns:1fr 1fr}
.home-trust-item:nth-child(2){border-right:none}
.home-split{grid-template-columns:1fr}
.home-path-track{grid-template-columns:1fr;gap:22px}
.home-path-track::before{display:none}
}
@media(max-width:700px){
.home-trust{border-radius:0}
.home-path-head h2{font-size:22px}
}
/* ===== v4.19.1 -- homepage: authority/sources section, FAQ, pricing
per-month + savings ===== */
.home-authority{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;background:#fff;border:1px solid #edf0f5;border-radius:28px;padding:36px;box-shadow:0 20px 55px rgba(34,42,68,.10)}
.home-authority-kicker{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#ff633d;margin-bottom:10px}
.home-authority-copy h2{font-size:24px;line-height:1.2;margin-bottom:12px;color:#17233b!important}
.home-authority-copy p{font-size:14px;color:#65718a;line-height:1.6;margin:0}
.home-source-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.home-source-card{background:#fffaf5;border:1px solid #f0e5dc;border-radius:16px;padding:16px}
.home-source-card .ic{font-size:22px;margin-bottom:8px;display:block}
.home-source-card h4{font-size:13px;color:#17233b!important;margin:0 0 4px}
.home-source-card p{font-size:11.5px;color:#65718a;line-height:1.45;margin:0}
.home-faq{margin-top:40px;max-width:820px;margin-left:auto;margin-right:auto}
.home-faq-head{text-align:left;margin-bottom:20px}
.home-faq-head h2{font-size:26px;margin:4px 0 0;color:#17233b!important}
.home-faq-item{background:#fff;border:1px solid #edf0f5;border-radius:16px;margin-bottom:12px;overflow:hidden}
.home-faq-q{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:18px 22px;cursor:pointer;font-weight:700;font-size:14.5px;color:#17233b!important;background:none;border:0;font-family:inherit;text-align:left}
.home-faq-plus{flex:none;width:24px;height:24px;border-radius:50%;background:#fffaf5;border:1px solid #f0e5dc;display:grid;place-items:center;font-size:14px;color:#ff633d!important;font-weight:800;transition:transform .15s ease}
.home-faq-a{padding:0 22px 18px}
.home-faq-a p{font-size:13.5px;color:#65718a;line-height:1.6;max-width:640px;margin:0}
.home-faq-item:not(.open) .home-faq-a{display:none}
.home-faq-item.open .home-faq-plus{transform:rotate(45deg)}
.concept-plan-permo{font-size:12.5px;color:#3a4863!important;margin:10px 0 2px}
.concept-plan-permo b{color:#17233b!important}
.concept-save-chip{display:inline-block;font-size:10.5px;font-weight:800;color:#1a9c4b!important;background:#e9f8ee;border-radius:999px;padding:3px 9px;margin-bottom:12px}
.concept-plan.sunset .concept-plan-permo{color:#5a3216!important}
.concept-plan.sunset .concept-plan-permo b{color:#3a1c0e!important}
@media(max-width:900px){
.home-authority{grid-template-columns:1fr;padding:28px}
}
@media(max-width:700px){
.home-authority{border-radius:20px;padding:24px}
.home-authority-copy h2{font-size:21px}
.home-source-grid{grid-template-columns:1fr}
.home-faq-head h2{font-size:22px}
.home-faq-q{padding:15px 18px;font-size:13.5px}
.home-faq-a{padding:0 18px 16px}
}
/* =========================================================
AlbaBooks v4.6.2 — Bright modern theme across all pages
Matches the homepage pastel/cream/orange visual system.
========================================================= */
:root{
--ab-bg:#f7f3ee;
--ab-panel:#ffffff;
--ab-panel-2:#fff8f1;
--ab-line:#eadfd4;
--ab-text:#1d2d4a;
--ab-muted:#61708a;
--ab-accent:#ff643d;
--ab-accent-2:#ff7a4f;
--ab-soft:#fff0e6;
}
html,body{background:#f7f3ee!important;color:#1d2d4a!important}
body{background:linear-gradient(180deg,#fffdf9 0%,#f7f3ee 55%,#f4f6fb 100%)!important;color:#1d2d4a!important}
/* Header now matches the light homepage */
.site-header,header.site-header,.ab-header,header.ab-header{
background:rgba(255,255,255,.96)!important;
border-bottom:1px solid #eee4da!important;
box-shadow:0 8px 24px rgba(29,45,74,.06)!important;
}
.site-header a,.ab-header a{color:#1d2d4a!important}
.site-header a:hover,.ab-header a:hover{color:#ff643d!important}
.site-header .brand-mark,.ab-header .brand-mark,.site-header .logo-mark,.ab-header .logo-mark{background:#ff643d!important}
.site-header .nav-actions{border-left-color:#eadfd4!important}
.site-header .search-icon,.ab-header .search-icon{color:#1d2d4a!important;stroke:#1d2d4a!important}
.site-header .subscribe-nav,.site-header .subscribe-button,.site-header .subscribe-btn,.site-header .header-subscribe{
background:linear-gradient(135deg,#ff7a4f,#ff643d)!important;
color:#fff!important;border-color:#ff643d!important;
box-shadow:0 10px 22px rgba(255,100,61,.20)!important;
}
.site-header .subscribe-nav:hover,.site-header .subscribe-button:hover,.site-header .subscribe-btn:hover,.site-header .header-subscribe:hover{color:#fff!important;background:#ff643d!important}
@media(max-width:768px){.site-header,.ab-header,.site-header nav,.ab-header nav,.mobile-menu,.mobile-navigation{background:#fff!important;border-color:#eadfd4!important}.main-nav.open{background:#fff!important;border-color:#eadfd4!important}.menu-toggle{color:#1d2d4a!important}}
/* Generic pages and library pages */
.content-page,.catalogue-hero,.single-book-page{color:#1d2d4a!important}
.content-page{background:#fff!important;border:1px solid #eee4da;border-radius:24px;margin-top:34px!important;margin-bottom:34px!important;box-shadow:0 18px 50px rgba(29,45,74,.06)}
.content-page h1,.catalogue-hero h1,.single-book-page h1,.section-heading h2{color:#1d2d4a!important}
.content-page p,.content-page li,.catalogue-hero p,.single-book-page p{color:#52617a!important}
.catalogue-hero,.single-book-page{background:#fffaf5;border-radius:28px;margin-top:34px;margin-bottom:34px}
.book-card h3{color:#1d2d4a!important}.book-card p,.book-author,.renewal{color:#61708a!important}
.book-meta span{background:#fff0e6!important;color:#1d2d4a!important}
.primary-action,.plan-button,.book-search button{background:linear-gradient(135deg,#ff7a4f,#ff643d)!important;color:#fff!important;border-radius:999px!important;box-shadow:0 10px 24px rgba(255,100,61,.18)}
.book-search input{background:#fff!important;border:1px solid #eadfd4!important;color:#1d2d4a!important}
/* Checkout: same cream + white cards + orange accent as homepage */
.ab-checkout-page{
background:linear-gradient(135deg,#fff8f0 0%,#f6f3ff 52%,#eef8f6 100%)!important;
min-height:760px!important;padding:54px 20px 64px!important;color:#1d2d4a!important;
}
.ab-checkout-container{width:min(100%,980px)!important}
.ab-checkout-heading p{color:#e95d38!important}
.ab-checkout-heading h1{color:#1d2d4a!important;font-size:34px!important}
.ab-checkout-grid{align-items:start!important}
.ab-checkout-card,.ab-order-summary,.ab-checkout-success{
background:rgba(255,255,255,.96)!important;border:1px solid #eadfd4!important;color:#1d2d4a!important;
box-shadow:0 18px 50px rgba(29,45,74,.08)!important;border-radius:22px!important;
}
.selected-plan-row{background:#fff5ec!important;border:1px solid #f4d6c5!important;color:#1d2d4a!important}
.ab-checkout-card>label{color:#1d2d4a!important}
.ab-checkout-card input:not([type="checkbox"]),.ab-checkout-card select{
background:#fff!important;border-color:#eadfd4!important;color:#1d2d4a!important;
}
.ab-checkout-card input:focus,.ab-checkout-card select:focus{border-color:#ff643d!important;outline:2px solid rgba(255,100,61,.13)!important}
.ab-consent{background:#fffaf5!important;border-color:#eadfd4!important;color:#52617a!important}
.ab-consent a{color:#e95d38!important}
.ab-payment-info{background:#f8f5ff!important;border-color:#e2d8f3!important}
.ab-payment-info h2{color:#1d2d4a!important}.ab-payment-info p{color:#52617a!important}.ab-payment-info small{color:#61708a!important}
.ab-payment-button{background:linear-gradient(135deg,#ff7a4f,#ff643d)!important;color:#fff!important;border-radius:999px!important;box-shadow:0 10px 24px rgba(255,100,61,.18)!important}
.ab-checkout-note,.ab-checkout-success p{color:#61708a!important}
.ab-checkout-errors{background:#fff0eb!important;border-color:#ffb9a2!important}.ab-checkout-errors strong{color:#d94e2a!important}.ab-checkout-errors ul{color:#52617a!important}
.ab-order-summary{background:#fffaf5!important}
.ab-order-summary h2,.ab-order-row strong,.ab-order-total{color:#1d2d4a!important}
.ab-order-muted{color:#61708a!important}.ab-order-divider{background:#eadfd4!important}
.ab-order-check{color:#ff643d!important}.ab-order-features li{color:#52617a!important}
.ab-order-secure{background:#eef8f6!important;border-color:#cfe9df!important}.ab-order-secure strong{color:#1d2d4a!important}.ab-order-secure p{color:#61708a!important}
/* Login and legal/footer pages */
.ab-login-page{background:linear-gradient(135deg,#fff8f0,#f6f3ff,#eef8f6)!important;color:#1d2d4a!important;min-height:70vh;padding:64px 20px!important}
.ab-login-card{background:#fff!important;border:1px solid #eadfd4!important;box-shadow:0 18px 50px rgba(29,45,74,.08)!important;border-radius:22px!important}
.ab-login-card label{color:#1d2d4a!important}.ab-login-card input{background:#fff!important;border-color:#eadfd4!important;color:#1d2d4a!important}.ab-login-alt,.ab-login-lost{color:#61708a!important}.ab-login-alt a,.ab-login-lost a{color:#e95d38!important}
/* Footer uses a warm navy foundation with homepage orange and soft text */
.ab-footer,.site-footer{background:linear-gradient(135deg,#1d2d4a,#24395a)!important;border-top:0!important;color:#fff!important}
.ab-footer h4,.site-footer h4{color:#ffb08f!important}
.ab-footer p,.ab-footer a,.site-footer p,.site-footer a{color:#e8edf6!important}
.ab-footer a:hover,.site-footer a:hover{color:#ff9a78!important}
.ab-footer-grid,.footer-bottom{border-color:rgba(255,255,255,.14)!important}
.ab-socials a{background:rgba(255,255,255,.12)!important;color:#fff!important}
.ab-payment-badges span{background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.24)!important;color:#fff!important}
.ab-payment-badges span:nth-child(3){border-color:#ff8d68!important;color:#ffb08f!important}
.ab-footer-bottom{color:#cfd8e8!important}
/* =========================================================
v4.6.3 FINAL LIGHT PAGE SYSTEM
Forces checkout and all legal/footer pages to use the same
AlbaBooks cream, orange and navy visual language.
========================================================= */
html,body{background:#f7f4f0!important;color:#1d2d4a!important}
body:not(.home) main{background:#f7f4f0!important}
/* Checkout */
html body .ab-checkout-page{
position:relative!important;
isolation:isolate!important;
background:linear-gradient(135deg,#fff8f0 0%,#fffdf9 42%,#f6f2ff 100%)!important;
color:#1d2d4a!important;
padding:52px 20px 72px!important;
min-height:calc(100vh - 120px)!important;
}
html body .ab-checkout-container{max-width:1120px!important;margin:0 auto!important;width:100%!important}
html body .ab-checkout-heading{margin-bottom:24px!important}
html body .ab-checkout-heading p{color:#e95d38!important;font-weight:800!important;letter-spacing:.18em!important}
html body .ab-checkout-heading h1{color:#1d2d4a!important;font-size:clamp(34px,5vw,56px)!important;line-height:1.05!important}
html body .ab-checkout-grid{display:grid!important;grid-template-columns:minmax(0,1.35fr) minmax(320px,.85fr)!important;gap:28px!important}
html body .ab-checkout-card,
html body .ab-order-summary,
html body .ab-checkout-success{
background:#fff!important;
color:#1d2d4a!important;
border:1px solid #eadfd4!important;
border-radius:24px!important;
box-shadow:0 18px 50px rgba(29,45,74,.10)!important;
}
html body .ab-checkout-card{padding:30px!important}
html body .ab-order-summary{padding:30px!important}
html body .ab-checkout-card label,
html body .ab-checkout-card strong,
html body .ab-order-summary h2,
html body .ab-order-row,
html body .ab-order-summary strong{color:#1d2d4a!important}
html body .ab-checkout-card input:not([type="checkbox"]),
html body .ab-checkout-card select{
background:#fff!important;color:#1d2d4a!important;border:1px solid #d9d4cd!important;
border-radius:12px!important;min-height:50px!important;box-shadow:none!important;
}
html body .ab-checkout-card input::placeholder{color:#7b8798!important;opacity:1!important}
html body .selected-plan-row{background:#fff4ec!important;border:1px solid #ffd8c8!important;border-radius:14px!important;color:#1d2d4a!important}
html body .ab-consent{background:#fffaf6!important;border:1px solid #eadfd4!important;border-radius:14px!important;color:#52617a!important}
html body .ab-consent span{color:#52617a!important}
html body .ab-consent a{color:#d94e2a!important}
html body .ab-payment-info{background:#f7f3ff!important;border:1px solid #ded2f3!important;border-radius:16px!important;color:#1d2d4a!important}
html body .ab-payment-info h2{color:#1d2d4a!important}
html body .ab-payment-info p,html body .ab-payment-info small,html body .ab-checkout-note{color:#52617a!important}
html body .ab-payment-button{
display:block!important;width:100%!important;background:linear-gradient(135deg,#ff7a4f,#ff5d3a)!important;
color:#fff!important;border:0!important;border-radius:999px!important;padding:16px 22px!important;
font-weight:800!important;text-align:center!important;box-shadow:0 12px 26px rgba(255,100,61,.22)!important;
}
html body .ab-order-item{background:#fff7f1!important;border:1px solid #f4dfd2!important;border-radius:14px!important;padding:16px!important}
html body .ab-order-muted,html body .ab-order-features li{color:#52617a!important}
html body .ab-order-total{font-size:1.15rem!important;font-weight:800!important}
html body .ab-order-total span:last-child{color:#e95d38!important;font-size:1.4rem!important}
html body .ab-order-divider{background:#eadfd4!important}
html body .ab-order-check{color:#ff643d!important}
html body .ab-order-secure{background:#eef8f4!important;border:1px solid #cde7dc!important;border-radius:14px!important}
html body .ab-order-secure strong{color:#1d2d4a!important}
html body .ab-order-secure p{color:#52617a!important}
@media(max-width:800px){
html body .ab-checkout-grid{grid-template-columns:1fr!important}
html body .ab-checkout-page{padding:34px 14px 52px!important}
html body .ab-checkout-card,html body .ab-order-summary{padding:22px!important}
}
/* Legal and footer-linked pages */
html body .ab-legal-page,
html body .content-page{
background:linear-gradient(135deg,#fff8f0 0%,#fff 48%,#f6f2ff 100%)!important;
color:#1d2d4a!important;
padding:56px 20px 72px!important;
min-height:65vh!important;
}
html body .ab-legal-container,
html body .content-page{
max-width:980px!important;
margin:0 auto!important;
}
html body .ab-legal-container{
background:#fff!important;border:1px solid #eadfd4!important;border-radius:24px!important;
padding:clamp(28px,5vw,56px)!important;box-shadow:0 18px 50px rgba(29,45,74,.08)!important;
}
html body .ab-legal-page h1,
html body .content-page h1{
color:#1d2d4a!important;font-size:clamp(34px,5vw,52px)!important;line-height:1.1!important;
margin:0 0 22px!important;
}
html body .ab-legal-page h2,
html body .content-page h2{color:#1d2d4a!important;border-bottom:2px solid #ffe0d3!important;padding-bottom:10px!important}
html body .ab-legal-page h3,
html body .content-page h3{color:#1d2d4a!important}
html body .ab-legal-page p,
html body .ab-legal-page li,
html body .content-page p,
html body .content-page li{color:#52617a!important;line-height:1.75!important}
html body .ab-legal-page strong,
html body .content-page strong{color:#1d2d4a!important}
html body .ab-legal-page a,
html body .content-page a{color:#d94e2a!important}
html body .ab-legal-highlight{background:#fff4ec!important;border:1px solid #ffd8c8!important;border-radius:16px!important}
html body .ab-legal-brand{color:#e95d38!important}
/* Consistent footer */
html body .ab-footer{
background:linear-gradient(135deg,#16243d,#243a5c)!important;color:#fff!important;
}
/* v4.6.4: Ensure Delivery Policy and all legal highlight text uses the same readable contrast as Terms */
html body .ab-legal-page p strong,
html body .ab-legal-page .ab-legal-highlight strong,
html body .ab-legal-page .ab-legal-highlight p strong{
color:#1d2d4a!important;
font-weight:700!important;
}
html body .ab-legal-page .ab-legal-highlight p,
html body .ab-legal-page .ab-legal-highlight li{
color:#52617a!important;
}
/* =========================================================
AlbaBooks v4.6.5 — HEADER READABILITY FIX
Explicit styles for the actual header markup used by header.php.
========================================================= */
html body .site-header .site-nav {
background:#202227 !important;
color:#f7f7f5 !important;
}
html body .site-header .brand {
color:#f7f7f5 !important;
opacity:1 !important;
text-shadow:none !important;
}
html body .site-header .brand:visited,
html body .site-header .brand:hover {
color:#ffffff !important;
}
html body .site-header .brand-mark {
background:#ff643d !important;
box-shadow:0 0 16px rgba(255,100,61,.25);
}
/* Primary navigation */
html body .site-header .main-nav a,
html body .site-header .nav-actions > a:not(.subscribe-nav),
html body .site-header .search-icon {
color:#f2f3f5 !important;
opacity:1 !important;
}
html body .site-header .main-nav a:hover,
html body .site-header .nav-actions > a:not(.subscribe-nav):hover,
html body .site-header .search-icon:hover {
color:#ff8a68 !important;
}
/* Login stays visible against the dark header. Excludes .subscribe-nav --
wp_logout_url() routes through wp-login.php?action=logout, so without this
exclusion the Log Out button also matched "[href*=login]" here and lost its
orange background/text to this rule's higher specificity, rendering as an
invisible white-on-transparent pill. */
html body .site-header .nav-actions > a[href*="login"]:not(.subscribe-nav),
html body .site-header .nav-actions > a[href*="wp-login"]:not(.subscribe-nav) {
color:#ffffff !important;
border:1px solid #aeb4bf !important;
background:transparent !important;
border-radius:999px !important;
padding:10px 20px !important;
line-height:1.2 !important;
}
/* Search icon must not inherit the old dark-blue colour */
html body .site-header .search-icon {
color:#ffffff !important;
border-left:1px solid #41454d !important;
font-size:26px !important;
line-height:1 !important;
}
/* Keep the Subscribe button high contrast */
html body .site-header .subscribe-nav {
background:#ff643d !important;
color:#ffffff !important;
border:1px solid #ff643d !important;
box-shadow:0 8px 20px rgba(255,100,61,.22) !important;
}
html body .site-header .subscribe-nav:hover {
background:#ff7a58 !important;
color:#ffffff !important;
border-color:#ff7a58 !important;
}
/* ===== AlbaSolutions logo integration v4.6.6 ===== */
.site-header .brand, .ab-footer .brand {
display:flex!important; align-items:center!important; min-width:0!important;
}
.site-header .brand-logo-image {
display:block!important; height:46px!important; width:auto!important; max-width:300px!important; object-fit:contain!important;
}
.ab-footer .footer-logo-image {
display:block!important; height:52px!important; width:auto!important; max-width:330px!important; object-fit:contain!important;
}
.site-header .brand-mark, .ab-footer .brand-mark { display:none!important; }
@media (max-width:760px){
.site-header .brand-logo-image {height:36px!important; max-width:240px!important;}
.ab-footer .footer-logo-image {height:42px!important; max-width:260px!important;}
}
/* =========================================================
AlbaSolutions v4.7 — final light concept system
========================================================= */
:root{--as-navy:#142b4c;--as-orange:#ff6334;--as-orange-dark:#e95321;--as-ink:#1d2f4b;--as-bg:#f7f5f1;--as-card:#ffffff;--as-line:#e6e1da;--as-muted:#657085}
body{background:var(--as-bg)!important;color:var(--as-ink)!important}
.site-header.ab-light-header{height:88px;background:rgba(255,255,255,.96)!important;border-bottom:1px solid #eee8df!important;box-shadow:0 8px 26px rgba(20,43,76,.06);position:relative;z-index:100}
.ab-light-header .site-nav{width:min(100% - 72px,1440px);gap:34px}
.brand-logo-image{display:block;width:245px;height:64px;object-fit:contain;object-position:left center;mix-blend-mode:multiply}
.main-nav{margin-left:auto}.main-nav ul{gap:31px!important}.main-nav a{color:var(--as-ink)!important;font-weight:700;font-size:14px!important}.ab-caret{font-size:15px;margin-left:4px}
.nav-actions{gap:14px!important;border-left:0!important;padding-left:0!important}.nav-divider{width:1px;height:28px;background:#e1e5eb;display:block;margin:0 2px}
.search-icon{font-size:28px!important;color:var(--as-navy)!important;border:0!important;padding:0!important;line-height:1}
.login-nav{border:1px solid var(--as-navy);border-radius:12px;padding:12px 25px;color:var(--as-navy)!important;font-weight:800!important}
.subscribe-nav{background:linear-gradient(135deg,#ff7447,#ff5728)!important;color:#fff!important;padding:13px 26px!important;border-radius:12px!important;box-shadow:0 10px 22px rgba(255,99,52,.2);font-weight:800!important}
.menu-toggle{color:var(--as-navy)!important}
.ab-checkout-page{background:radial-gradient(circle at 12% 18%,rgba(255,190,111,.24),transparent 27%),radial-gradient(circle at 92% 30%,rgba(255,149,117,.16),transparent 28%),#f7f5f1!important;min-height:720px!important;padding:52px 28px 30px!important}
.ab-checkout-container{width:min(100%,1320px)!important;margin:0 auto!important}.ab-checkout-heading{margin:0 0 30px!important}.ab-checkout-heading h1{font-size:60px!important;line-height:1!important;color:var(--as-navy)!important;letter-spacing:-2px!important}.ab-checkout-heading p{display:none!important}.ab-breadcrumbs{display:flex;gap:13px;align-items:center;margin-top:17px;color:var(--as-muted);font-size:14px}.ab-breadcrumbs strong{color:var(--as-orange)}.ab-breadcrumbs a{color:var(--as-muted)}
.ab-checkout-grid{display:grid!important;grid-template-columns:1.6fr 1fr!important;gap:24px!important;align-items:start}.ab-checkout-card,.ab-order-summary{background:rgba(255,255,255,.96)!important;border:1px solid var(--as-line)!important;border-radius:22px!important;box-shadow:0 18px 40px rgba(20,43,76,.07)!important;padding:30px!important;color:var(--as-ink)!important}.ab-billing-card{display:grid;gap:17px!important}.ab-card-title{display:flex;align-items:center;gap:14px;margin-bottom:4px}.ab-card-title>span{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:linear-gradient(145deg,#fff1e9,#fff);color:var(--as-orange);font-size:24px;box-shadow:0 4px 16px rgba(255,99,52,.12)}.ab-card-title h2,.ab-order-summary h2{margin:0!important;color:var(--as-navy)!important;font-size:22px!important}.ab-checkout-card>label{color:var(--as-ink)!important;font-size:14px!important;font-weight:800!important}.ab-checkout-card input:not([type=checkbox]),.ab-checkout-card select{height:56px!important;background:#fff!important;border:1px solid #dbe0e7!important;color:var(--as-ink)!important;border-radius:12px!important;font-size:15px!important}.ab-checkout-card input::placeholder{color:#8b94a4}.selected-plan-row{background:#fff7f2!important;border:1px solid #ffe0d1!important;color:var(--as-ink)!important}.selected-plan-row strong{color:var(--as-orange)!important}.ab-consent{background:#fffaf6!important;border-color:#f0e5dc!important;color:var(--as-ink)!important}.ab-payment-info{background:#fffaf6!important;border-color:#f0e5dc!important}.ab-payment-info h2{color:var(--as-navy)!important}.ab-payment-info p,.ab-payment-info small{color:var(--as-muted)!important}.ab-payment-button{background:linear-gradient(135deg,#ff7447,#ff5728)!important;border-radius:12px!important;color:#fff!important;padding:16px 22px!important}.ab-checkout-note{color:var(--as-muted)!important}
.ab-order-summary{display:grid;gap:0}.ab-order-row{color:var(--as-ink)!important;padding:17px 0!important}.ab-order-item span:first-child{font-weight:700}.ab-order-muted{color:#4f5b6d!important}.ab-order-total{margin-top:14px!important;background:#fff7f2!important;border-radius:12px;padding:17px 14px!important;font-size:21px!important;font-weight:900!important}.ab-order-total span:last-child{color:var(--as-orange)!important;font-size:25px}.ab-order-features{color:#4f5b6d!important}.ab-order-check{color:var(--as-orange)!important}.ab-order-secure{background:#fffaf6!important;border-radius:12px;padding:14px!important}.ab-order-secure strong{color:var(--as-navy)!important}.ab-order-secure p{color:var(--as-muted)!important}
.ab-footer-concept{background:#fff!important;border-top:1px solid #ece7df!important;padding:36px 28px 22px!important}.ab-footer-benefits{width:min(100%,1420px);margin:auto;display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:28px;align-items:start;padding:28px 30px;border:1px solid #e8e2d9;border-radius:20px;background:linear-gradient(135deg,#fffdf9,#fff);box-shadow:0 14px 35px rgba(20,43,76,.06)}.ab-footer-brand .brand-logo-image{width:220px;height:62px}.ab-footer-brand>p,.ab-benefit p{color:#536176!important;line-height:1.7!important;font-size:14px!important}.ab-benefit{display:flex;gap:13px}.ab-benefit>span{color:var(--as-orange);font-size:34px;line-height:1}.ab-benefit h4{color:var(--as-navy)!important;font-size:16px!important;letter-spacing:0!important;margin:0 0 8px!important}.ab-footer-links{display:flex!important;justify-content:center;flex-wrap:wrap;gap:14px;margin:24px auto 0!important;color:#647083!important;font-size:14px!important}.ab-footer-links a{display:inline!important;color:#647083!important}.ab-footer-links span{color:#b6bdc8}
.content-page,.catalogue-hero,.single-book-page{background:#fff!important;color:var(--as-ink)!important}.content-page h1,.catalogue-hero h1,.single-book-page h1{color:var(--as-navy)!important}
@media(max-width:1180px){.ab-light-header .site-nav{width:calc(100% - 36px)}.main-nav ul{gap:18px!important}.ab-light-header .brand-logo-image{width:205px}.ab-checkout-grid{grid-template-columns:1fr!important}.ab-footer-benefits{grid-template-columns:1fr 1fr!important}}
@media(max-width:850px){.site-header.ab-light-header{height:74px}.ab-light-header .brand-logo-image{width:190px;height:54px}.main-nav,.nav-actions{display:none}.menu-toggle{display:block!important;margin-left:auto}.ab-checkout-page{padding:34px 16px!important}.ab-checkout-heading h1{font-size:46px!important}.ab-footer-benefits{grid-template-columns:1fr!important}.ab-footer-links{justify-content:flex-start}}
/* v4.7.2 — Header navigation readability fix.
Keep navigation readable even when an older dark header rule is active. */
html body .site-header,
html body .site-header .site-nav,
html body .site-header nav,
html body .site-header .main-nav,
html body .site-header .nav-actions{
background:#20242d!important;
}
html body .site-header .main-nav a,
html body .site-header nav a,
html body .site-header .main-navigation a{
color:#f7f8fb!important;
opacity:1!important;
text-shadow:none!important;
}
html body .site-header .main-nav a:hover,
html body .site-header nav a:hover,
html body .site-header .main-navigation a:hover{
color:#ff7447!important;
}
html body .site-header .main-nav .ab-caret{color:#f7f8fb!important}
html body .site-header .search-icon{
color:#f7f8fb!important;
border-color:#596170!important;
}
html body .site-header .login-nav{
color:#f7f8fb!important;
border:1px solid #b9c3d0!important;
background:transparent!important;
}
html body .site-header .subscribe-nav{
color:#ffffff!important;
background:linear-gradient(135deg,#ff7447,#ff5728)!important;
border:0!important;
}
/* Logged-in state: the light My Library control must retain dark readable text. */
html body .site-header .nav-actions a.login-nav[href*="book"]{
color:#142b4c!important;
background:#ffffff!important;
border-color:#e1e5eb!important;
}
@media(max-width:768px){
html body .site-header,
html body .site-header .site-nav,
html body .mobile-navigation{background:#20242d!important}
}
/* =========================================================
AlbaSolutions v4.7.3 — final light-header concept
These rules are intentionally last in the compiled stylesheet so the
original dark theme navigation cannot override the new concept.
========================================================= */
:root{--ab-header-navy:#172744;--ab-header-orange:#f15b2a;}
html body,
html body .site-header,
html body header.site-header,
html body .site-header.ab-light-header{background:#fff!important;}
html body .site-header,
html body header.site-header,
html body .site-header.ab-light-header{
height:92px!important;
border-bottom:1px solid #edf0f4!important;
box-shadow:0 8px 30px rgba(28,42,72,.06)!important;
color:var(--ab-header-navy)!important;
}
html body .site-header .site-nav,
html body .site-header.ab-light-header .site-nav{
width:min(100% - 72px,1440px)!important;
height:92px!important;
margin:0 auto!important;
padding:0!important;
display:flex!important;
align-items:center!important;
gap:28px!important;
background:transparent!important;
box-shadow:none!important;
border:0!important;
}
html body .site-header .main-nav,
html body .site-header .main-nav ul,
html body .site-header .nav-actions,
html body .site-header nav{
background:transparent!important;
background-color:transparent!important;
border-color:transparent!important;
box-shadow:none!important;
}
html body .site-header .main-nav{margin-left:auto!important;}
html body .site-header .main-nav ul{
display:flex!important;
align-items:center!important;
gap:32px!important;
list-style:none!important;
margin:0!important;
padding:0!important;
}
html body .site-header .main-nav li{margin:0!important;padding:0!important;background:transparent!important;}
html body .site-header .main-nav a,
html body .site-header.ab-light-header .main-nav a,
html body .site-header nav a{
display:inline-flex!important;
align-items:center!important;
gap:6px!important;
color:var(--ab-header-navy)!important;
-webkit-text-fill-color:var(--ab-header-navy)!important;
opacity:1!important;
background:transparent!important;
text-shadow:none!important;
font-size:15px!important;
font-weight:600!important;
line-height:1.2!important;
}
html body .site-header .main-nav a:hover,
html body .site-header .main-nav a:focus{color:var(--ab-header-orange)!important;-webkit-text-fill-color:var(--ab-header-orange)!important;}
html body .site-header .ab-caret{color:var(--ab-header-navy)!important;font-size:16px!important;line-height:1!important;}
html body .site-header .nav-actions{
display:flex!important;
align-items:center!important;
gap:14px!important;
padding:0!important;
margin:0!important;
border-left:0!important;
}
html body .site-header .search-icon{
width:46px!important;height:46px!important;
display:grid!important;place-items:center!important;
border:1px solid #e1e7ee!important;
border-radius:50%!important;
color:var(--ab-header-navy)!important;
-webkit-text-fill-color:var(--ab-header-navy)!important;
background:#fff!important;
padding:0!important;
font-size:25px!important;
}
html body .site-header .login-nav{
display:inline-flex!important;align-items:center!important;justify-content:center!important;
min-height:46px!important;
padding:0 23px!important;
color:var(--ab-header-navy)!important;
-webkit-text-fill-color:var(--ab-header-navy)!important;
background:#fff!important;
border:1px solid #9aa8ba!important;
border-radius:12px!important;
font-weight:700!important;
}
html body .site-header .subscribe-nav{
display:inline-flex!important;align-items:center!important;justify-content:center!important;
min-height:46px!important;
padding:0 25px!important;
color:#fff!important;
-webkit-text-fill-color:#fff!important;
background:linear-gradient(135deg,#ff7447,#f4511e)!important;
border:0!important;
border-radius:12px!important;
font-weight:700!important;
box-shadow:0 10px 24px rgba(255,99,61,.22)!important;
}
html body .site-header .nav-divider{display:none!important;}
html body .site-header .brand,
html body .site-header .brand-logo-image{background:transparent!important;}
@media(max-width:1000px){
html body .site-header .site-nav,
html body .site-header.ab-light-header .site-nav{width:calc(100% - 36px)!important;}
html body .site-header .main-nav ul{gap:18px!important;}
}
@media(max-width:760px){
html body .site-header,
html body .site-header .site-nav{height:74px!important;}
html body .site-header .main-nav.open{
background:#fff!important;border-bottom:1px solid #edf0f4!important;
box-shadow:0 12px 28px rgba(28,42,72,.10)!important;
}
html body .site-header .main-nav.open a{color:var(--ab-header-navy)!important;-webkit-text-fill-color:var(--ab-header-navy)!important;}
html body .site-header .menu-toggle{color:var(--ab-header-navy)!important;}
}
/* =========================================================
v4.7.7 — Mobile header: logo + hamburger only (Storytel-style)
Superseded v4.7.4's approach (shrinking search/Log In/Get Started
to squeeze them onto the mobile bar). Storytel's own mobile header
only ever shows the logo and the menu button -- everything else
(nav links, Log In, Get Started, search) lives inside the expanding
menu (see the v4.7.5 block below and assets/js/main.js), which
already clones these same elements into that overlay. So instead of
fighting to fit five controls on one small bar, we just hide the
ones that now live in the overlay. Nothing to overlap this way at
any width. ".nav-actions" also has an unconditional
"display:flex!important" rule above (from the "v4.7.3" block) with
equal selector specificity -- this rule needs to stay LAST in the
file so its !important wins the tie and actually hides it here.
========================================================= */
@media (max-width: 850px) {
html body .site-header .nav-actions,
html body .site-header.ab-light-header .nav-actions { display: none !important; }
html body .site-header .main-nav,
html body .site-header.ab-light-header .main-nav { display: none !important; }
}
/* =========================================================
v4.7.5 — Expand/close mobile menu (Storytel-style overlay)
Built entirely from new classes injected by main.js, so it doesn't
touch header.php or any existing selector -- the current theme's
markup and desktop styling are untouched.
========================================================= */
.ab-mobile-menu {
position: fixed;
inset: 0;
z-index: 9999;
background: #fff;
display: flex;
flex-direction: column;
padding: 24px 24px 32px;
overflow-y: auto;
opacity: 0;
transform: translateY(-12px);
pointer-events: none;
transition: opacity 220ms ease, transform 220ms ease;
}
.ab-mobile-menu.is-open {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
body.ab-mobile-menu-locked { overflow: hidden; }
.ab-mobile-menu-close {
align-self: flex-end;
background: none;
border: 1px solid #e1e7ee;
border-radius: 50%;
width: 40px;
height: 40px;
font-size: 24px;
line-height: 1;
color: var(--ab-header-navy, #172744);
cursor: pointer;
margin-bottom: 12px;
}
.ab-mobile-menu-links {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
margin: 12px 0 20px;
}
.ab-mobile-menu-links a {
display: block;
width: 100%;
text-align: center;
padding: 14px 8px;
font-size: 20px;
font-weight: 700;
color: var(--ab-header-navy, #172744);
border-radius: 12px;
}
.ab-mobile-menu-links a:active { background: #f4f6f9; }
.ab-mobile-menu-links .ab-caret { display: none; }
.ab-mobile-menu-divider { height: 1px; background: #edf0f4; margin: 8px 0; }
.ab-mobile-menu-account {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 8px 0 20px;
}
.ab-mobile-menu-account a { width: 100%; max-width: 320px; text-align: center; }
.ab-mobile-menu-account a.login-nav { justify-content: center; }
.ab-mobile-menu-account a.subscribe-nav { justify-content: center; }
.ab-mobile-menu-search { padding-top: 16px; }
.ab-mobile-menu-search-label {
margin: 0 0 10px;
font-weight: 700;
color: var(--ab-header-navy, #172744);
font-size: 15px;
}
.ab-mobile-menu-search-form {
position: relative;
display: flex;
align-items: center;
}
.ab-mobile-menu-search-form input[type="search"] {
width: 100%;
box-sizing: border-box;
border: 1.5px solid #e1e7ee;
border-radius: 999px;
padding: 14px 46px 14px 18px;
font-size: 15px;
font-family: inherit;
color: var(--ab-header-navy, #172744);
background: #fff;
}
.ab-mobile-menu-search-form input[type="search"]:focus {
outline: none;
border-color: var(--ab-header-orange, #f15b2a);
}
.ab-mobile-menu-search-form button {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
width: 34px;
height: 34px;
border: 0;
background: none;
color: var(--ab-header-navy, #172744);
font-size: 16px;
cursor: pointer;
}
@media (min-width: 851px) {
.ab-mobile-menu { display: none !important; }
}
/* =========================================================
v4.8.1 -- homepage book marquee (Storytel-style auto-scroll
cover rail), placed above the pricing section. New, uniquely
named classes (ab-book-marquee-*) so it doesn't inherit any
of the older/conflicting .cover-rail / .rail-cover rules
already in this file from earlier theme revisions.
========================================================= */
.ab-book-marquee-section{background:#fff;padding:20px 24px;overflow:hidden;border-radius:28px;box-shadow:0 20px 55px rgba(34,42,68,.10);margin-top:20px}
.ab-book-marquee-mask{overflow:hidden;width:100%}
.ab-book-marquee-track{display:flex;flex-direction:row;flex-wrap:nowrap;gap:14px;width:max-content;animation:abBookMarquee 42s linear infinite}
.ab-book-marquee-section:hover .ab-book-marquee-track{animation-play-state:paused}
@keyframes abBookMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ab-marquee-cover{display:block;flex:0 0 108px;width:108px;height:162px;border-radius:12px;overflow:hidden;box-shadow:0 12px 26px rgba(34,44,70,.13);transition:transform .2s ease}
.ab-marquee-cover:hover{transform:translateY(-5px)}
.ab-marquee-cover img{width:100%;height:100%;object-fit:cover;display:block}
.ab-marquee-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#edf0f5;color:#17233b;font-weight:700;font-size:14px;text-align:center;padding:10px;box-sizing:border-box}
@media(max-width:700px){.ab-book-marquee-section{padding:14px 16px;border-radius:0;margin-top:0}.ab-marquee-cover{flex:0 0 88px;width:88px;height:132px}}
/* =========================================================
v4.9.1 -- single book page, BookBub-style polish
========================================================= */
html body .single-book-cover img{width:100%!important;display:block!important;border-radius:16px!important;box-shadow:0 20px 45px rgba(20,30,60,.18)!important}
html body .book-genre-tags{display:flex!important;flex-wrap:wrap!important;gap:8px!important;margin:0 0 14px!important}
html body .book-genre-tag{display:inline-flex!important;background:#fff1ec!important;color:#ff633d!important;border:1px solid #ffd8c8!important;border-radius:999px!important;padding:5px 14px!important;font-size:12px!important;font-weight:800!important;letter-spacing:.3px!important;text-transform:uppercase!important}
html body .book-author{margin:6px 0 0!important}
html body .book-meta{margin:10px 0 0!important;color:#5c6a85!important;font-size:14px!important}
html body .book-meta span{display:inline-flex!important;align-items:center!important;gap:10px!important}
html body .book-meta span:not(:last-child):after{content:'•'!important;margin-left:10px!important;color:#c7cddb!important}
html body .book-description-heading{font-size:19px!important;margin:28px 0 10px!important;color:#17233b!important}
html body .ab-locked-notice{background:linear-gradient(135deg,#fff4ec 0%,#fff9f2 100%)!important;border:1.5px solid #ffd8c8!important;border-left:4px solid #ff633d!important}
html body .ab-locked-notice strong{color:#17233b!important}
html body .ab-locked-notice p{color:#5c6a85!important}
html body .ab-locked-login{color:#5c6a85!important}
html body .book-coming-soon{color:#5c6a85!important;font-style:italic!important}
/* =========================================================
v4.9.4 -- login page heading, on its own class
The login page used to share .ab-checkout-heading with the
checkout page. Checkout's heading style was later re-tuned for its
own hero layout (including a rule that hides the eyebrow text
entirely, since checkout replaced it with breadcrumbs) -- which
silently broke login's "WELCOME BACK" label since it never removed
its own
. Login now has its own class so future checkout-only
tweaks can't do this again.
========================================================= */
html body .ab-login-heading{margin:0 0 24px!important;text-align:center!important}
html body .ab-login-heading p{display:block!important;margin:0 0 10px!important;color:var(--as-orange,#ff6334)!important;font-weight:800!important;letter-spacing:.18em!important;font-size:12px!important}
html body .ab-login-heading h1{margin:0!important;font-size:clamp(28px,4vw,40px)!important;line-height:1.1!important;color:var(--as-navy,#142b4c)!important}
/* =========================================================
v4.9.4b -- login page was still rendering in the old dark theme
Root cause: "html body .ab-login-page" / "html body .ab-login-card"
(further up this file, from when this was a dark-themed shell)
have higher specificity than the plain ".ab-login-page" /
".ab-login-card" light-theme rules added later for the AlbaSolutions
redesign, so the dark version was winning regardless of where it
sits in the file. Overriding the exact same higher-specificity
selectors here, last, to actually win.
========================================================= */
html body .ab-login-page{background:linear-gradient(135deg,#fff8f0,#f6f3ff,#eef8f6)!important}
html body .ab-login-card{background:#fff!important;border:1px solid #eadfd4!important;box-shadow:0 18px 50px rgba(29,45,74,.08)!important}
html body .ab-login-card label{color:#1d2d4a!important}
html body .ab-login-card input{background:#fff!important;color:#1d2d4a!important;border:1px solid #eadfd4!important}
html body .ab-login-card input:focus{border-color:#ff633d!important;outline-color:rgba(255,99,61,.18)!important}
html body .ab-login-card input::placeholder{color:#9aa5b8!important}
/* =========================================================
v4.10.2 -- smaller page-title banners (checkout + book library)
These were sized like homepage hero sections for what's really
just a page title. Shrinking the container padding/min-height and
heading size for both; the card styling, gradient and breadcrumbs
are untouched.
========================================================= */
html body .ab-checkout-page{min-height:0!important;height:auto!important;padding:28px 28px 20px!important}
html body .ab-checkout-heading{margin:0 0 6px!important;min-height:0!important;height:auto!important}
html body .ab-checkout-heading h1{font-size:34px!important;letter-spacing:-1px!important;margin:0 0 6px!important}
html body .ab-checkout-hero{min-height:0!important;height:auto!important}
html body .ab-checkout-hero-copy{min-height:0!important;height:auto!important}
html body .ab-checkout-hero-art{display:none!important}
html body .ab-breadcrumbs{margin-top:8px!important;margin-bottom:0!important;font-size:13px!important}
html body .catalogue-hero{padding:34px 30px!important;min-height:0!important;height:auto!important;margin-top:20px!important;margin-bottom:20px!important}
html body .catalogue-hero h1{font-size:32px!important;margin:0 0 14px!important}
html body .catalogue-hero .section-label{margin:0 0 6px!important}
@media(max-width:850px){
html body .ab-checkout-page{padding:22px 16px 16px!important}
html body .ab-checkout-heading h1{font-size:26px!important}
html body .catalogue-hero{padding:24px 18px!important}
html body .catalogue-hero h1{font-size:26px!important}
}
/* ===== v4.17.5 -- Books archive hero: gradient card + descriptive lead,
matching the Homepage/Courses hero treatment ===== */
html body .catalogue-hero{background:linear-gradient(110deg,#fff0ef 0%,#fff7df 50%,#eee9ff 100%)!important;box-shadow:0 20px 55px rgba(34,42,68,.10)!important}
html body .catalogue-hero .section-label{display:inline-block!important;background:#fff!important;color:#ff5d2f!important;font-weight:800!important;letter-spacing:.08em!important;border-radius:999px!important;box-shadow:0 8px 20px rgba(30,40,70,.08)!important;padding:8px 16px!important;margin:0 0 16px!important}
html body .catalogue-hero .catalogue-lead{font-size:15.5px!important;line-height:1.6!important;color:#40506a!important;margin:0 0 24px!important;max-width:640px!important}
/* ===== v4.11.5 -- homepage "Take a Quiz" section ===== */
html body .ab-quiz-section{
max-width:1180px;margin:0 auto;padding:0 30px 70px;
}
html body .ab-quiz-card{
background:#fffaf5;border:1px solid #f0e5dc;border-radius:22px;
padding:clamp(24px,4vw,40px);box-shadow:0 14px 34px rgba(20,43,76,.05);
max-width:640px;margin:28px auto 0;
}
html body .ab-quiz-progress{background:#f0e5dc;border-radius:999px;height:8px;overflow:hidden;margin-bottom:16px}
html body .ab-quiz-progress-bar{background:linear-gradient(135deg,#ff7447,#ff5728);height:100%;width:10%;border-radius:999px;transition:width .3s ease}
html body .ab-quiz-meta{display:flex;justify-content:space-between;font-size:12.5px;font-weight:700;color:#a9895a;text-transform:uppercase;letter-spacing:.04em;margin-bottom:18px}
html body .ab-quiz-question{color:#142b4c!important;font-size:20px;margin:0 0 20px;line-height:1.35}
html body .ab-quiz-options{display:grid;gap:10px;margin-bottom:8px}
html body .ab-quiz-option{
text-align:left;background:#fff;border:1px solid #e8e2d9;border-radius:12px;
padding:13px 16px;font-size:14.5px;color:#1d2f4b;cursor:pointer;font-family:inherit;
transition:border-color .15s ease,background .15s ease;
}
html body .ab-quiz-option:hover:not(:disabled){border-color:#ff8a5c}
html body .ab-quiz-option:disabled{cursor:default}
html body .ab-quiz-option.is-correct{background:#e9f8ee;border-color:#1a9c4b;color:#0f7a37;font-weight:700}
html body .ab-quiz-option.is-wrong{background:#fff1ee;border-color:#e2492a;color:#c23c22;font-weight:700}
html body .ab-quiz-next{
margin-top:10px;background:linear-gradient(135deg,#ff7447,#ff5728);color:#fff;border:0;
border-radius:999px;padding:12px 26px;font-weight:700;font-size:14px;cursor:pointer;font-family:inherit;
}
html body .ab-quiz-result{text-align:center}
html body .ab-quiz-result .ab-quiz-score{font-family:inherit;font-size:44px;font-weight:800;color:#ff5d2f;margin:6px 0}
html body .ab-quiz-result p{color:#52617a;font-size:14.5px;margin:0 0 20px}
html body .ab-quiz-retry{
background:#fff;border:1px solid #ff5d2f;color:#ff5d2f;border-radius:999px;
padding:12px 26px;font-weight:700;font-size:14px;cursor:pointer;font-family:inherit;
}
@media(max-width:600px){
html body .ab-quiz-card{padding:22px 18px}
html body .ab-quiz-question{font-size:17px}
}
html body #ab-quiz{scroll-margin-top:110px}
html body .ab-quiz-section .concept-section-head h2{color:#142b4c!important}
html body .ab-quiz-best{font-size:13px!important;color:#a9895a!important;margin:0 0 14px!important}
html body .ab-quiz-best.is-new{color:#1a9c4b!important;font-weight:700!important}
html body .ab-quiz-best a{color:#ff5d2f!important;font-weight:700!important}
html body .ab-course-callout{max-width:1180px;margin:0 22px 8px;padding:22px 26px;background:linear-gradient(120deg,#fff4ec,#fff9f2)!important;border:1px solid #ffd8c8!important;border-radius:20px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:20px;flex-wrap:wrap}
html body .ab-course-callout div strong{display:block!important;font-family:'Manrope',sans-serif!important;font-size:18px!important;color:#142b4c!important;margin-bottom:4px!important}
html body .ab-course-callout div span{color:#52617a!important;font-size:13.5px!important}
html body .ab-course-callout a{background:linear-gradient(135deg,#ff7447,#ff5728)!important;color:#fff!important;text-decoration:none!important;font-weight:700!important;font-size:13.5px!important;padding:12px 22px!important;border-radius:999px!important;white-space:nowrap}
@media(max-width:700px){html body .ab-course-callout{margin:0 16px 8px;padding:18px 20px}}
html body .ab-mascot-row{display:flex;align-items:center;gap:14px}
html body .ab-mascot{flex-shrink:0}
html body .concept-books-empty{grid-column:1/-1;padding:18px 4px}
html body .concept-books-empty p{margin:0!important;color:#5c6a85!important}
html body .concept-books-empty p a{color:#ff633d!important;font-weight:700!important}
/* v4.16 -- empty book_genre archive state ("more books coming soon") */
html body .ab-genre-empty{
max-width:520px;margin:40px auto 70px;padding:44px 34px;text-align:center;
background:#fffaf5;border:1px solid #f0e5dc;border-radius:24px;
box-shadow:0 14px 34px rgba(20,43,76,.05);
}
html body .ab-genre-empty-icon{display:inline-flex;margin-bottom:18px;animation:ab-genre-bob 2.6s ease-in-out infinite}
html body .ab-genre-empty h2{margin:0 0 10px;font-size:22px;color:#17233b}
html body .ab-genre-empty p{margin:0 0 24px;color:#5c6a85;font-size:15px;line-height:1.5}
html body .ab-genre-empty .primary-action{display:inline-block;text-decoration:none}
@keyframes ab-genre-bob{
0%,100%{transform:translateY(0) rotate(0deg)}
50%{transform:translateY(-8px) rotate(-3deg)}
}
@media(prefers-reduced-motion:reduce){
html body .ab-genre-empty-icon{animation:none}
}
html body .ab-quiz-result .ab-mascot{display:block;margin:0 auto 12px}