@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Karla:wght@400;500;600;700;800&family=Noto+Sans+Sinhala:wght@400;500;600;700;800&display=swap'); /* WARNA -- a decorative Sinhala display font used for headings/titles only (self-hosted; not on Google Fonts). woff2 first for size, ttf as a fallback for older browsers that don't support woff2. SVG-font source isn't included: every current browser dropped SVG-font support years ago, so it wouldn't be loaded even if present. */ @font-face { font-family: 'WARNA'; src: url('../fonts/WARNA.woff2') format('woff2'), url('../fonts/WARNA.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } :root{ --bg:#FBF7EF; --bg-alt:#F3EAD9; --surface:#FFFFFF; --ink:#2B241D; --ink-soft:#6E6153; --ink-faint:#A79883; --gold:#D79A3B; --gold-dark:#B97E20; --gold-pale:#F4DDB0; --maroon:#8B3226; --line:#E8DCC6; --shadow: 0 20px 45px -20px rgba(43,36,29,0.28); --footer-bg:#211C16; --footer-ink:#EFE6D6; --footer-soft:#B9AC97; color-scheme: light; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} /* ---------- Language switch (EN / SIN) ---------- Every translated piece of text is written twice in the markup: an English span (.lang-en) and a Sinhala span (.lang-si) right after it. Which one shows is controlled by data-lang on , set by a small inline script in (reads the saved cookie before first paint, so there's no flash of the wrong language) and updated live by site.js when someone clicks EN/SIN. Untranslated pages/sections simply have no .lang-si span yet, so they always show their (English) text either way. */ .lang-si{font-family:'Noto Sans Sinhala','Karla',ui-sans-serif,system-ui,sans-serif;} /* Titles/headings get the decorative WARNA font; body copy stays on Noto Sans Sinhala, which reads better at paragraph size. */ h1 .lang-si, h2 .lang-si, h3 .lang-si, h4 .lang-si{ font-family:'WARNA','Noto Sans Sinhala','Karla',ui-sans-serif,system-ui,sans-serif; } html[data-lang="si"] .lang-en{display:none;} html:not([data-lang="si"]) .lang-si{display:none;} body{ margin:0; background:var(--bg); color:var(--ink); font-family:'Karla', ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%;} a{color:inherit;text-decoration:none;} button{font-family:inherit;cursor:pointer;} ul{list-style:none;margin:0;padding:0;} h1,h2,h3{font-family:'Fraunces', Georgia, serif; margin:0; text-wrap:balance;} p{margin:0;} :focus-visible{outline:2px solid var(--gold-dark); outline-offset:3px;} @media (prefers-reduced-motion: reduce){ *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;} } .wrap{max-width:1240px; margin:0 auto; padding:0 32px;} .eyebrow{ font-family:'Karla',sans-serif; font-weight:800; font-size:12.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold-dark); } /* ---------- Add-to-cart feedback (shared across all pages) ---------- */ @keyframes cartBounce{ 0%{transform:scale(1); color:inherit;} 35%{transform:scale(1.6); color:var(--gold-dark);} 60%{transform:scale(1.15); color:var(--gold-dark);} 80%{transform:scale(1.32); color:var(--gold-dark);} 100%{transform:scale(1); color:inherit;} } #cartToggle.cart-bounce{animation:cartBounce .6s ease; transform-origin:center;} .cart-toast{ position:fixed; left:50%; bottom:32px; transform:translate(-50%, 20px); background:var(--ink); color:var(--bg); font-size:13.5px; font-weight:700; padding:12px 22px; border-radius:999px; box-shadow:var(--shadow); z-index:120; opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease; } .cart-toast.show{opacity:1; transform:translate(-50%, 0);} /* ---------- Shared header / nav / footer / book-card / page-banner / side-card ---------- Consolidated out of home.css, books.css, cart.css, about.css and shipping.css, which each previously carried an identical copy of these rules (that drift is exactly how the pay-badges double-border bug happened -- one copy got the fix, the others didn't). Edit these here once; page-specific stylesheets now only hold what's unique to that page. */ header.site{ position:sticky; top:0; z-index:50; background:linear-gradient(180deg, rgba(255,255,255,0.62) 0%, rgba(255,255,255,0.28) 55%, rgba(255,255,255,0) 100%); backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%); box-shadow:inset 0 1px 0 rgba(255,255,255,0.6); } .nav-row{ display:flex; align-items:center; justify-content:space-between; padding:18px 32px; max-width:1240px; margin:0 auto; gap:24px; } .brand{display:flex; align-items:center; gap:10px; font-family:"Fraunces",serif; font-weight:600; font-size:22px; color:var(--ink);} .brand svg{flex:none;} .brand-stack{display:flex; flex-direction:column; line-height:1.15;} .brand-name{font-family:"Fraunces",serif; font-weight:600; font-size:22px;} .brand-tagline{ font-family:"Karla",sans-serif; font-weight:600; font-size:9.5px; letter-spacing:0.03em; color:var(--ink-faint); margin-top:2px; white-space:nowrap; } .foot-brand .brand-tagline{color:var(--footer-soft);} .main-nav{display:flex; align-items:center; gap:34px;} .main-nav a{ font-size:14.5px; font-weight:600; color:var(--ink-soft); padding:6px 2px; position:relative; transition:color .18s ease; } .main-nav a:hover{color:var(--ink);} .main-nav a.active{color:var(--ink);} .main-nav a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--gold-dark); border-radius:2px; } .nav-actions{display:flex; align-items:center; gap:14px;} .icon-btn{ width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,0.55); background:rgba(255,255,255,0.32); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); display:flex; align-items:center; justify-content:center; color:var(--ink); position:relative; transition:border-color .18s ease, transform .18s ease, background .18s ease; } .icon-btn:hover{border-color:var(--gold); transform:translateY(-1px); background:rgba(255,255,255,0.5);} .cart-badge{ position:absolute; top:-5px; right:-5px; background:var(--maroon); color:#fff; font-size:10.5px; font-weight:800; min-width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:2px solid var(--bg); } .btn-gold{ background:linear-gradient(180deg, var(--gold) 0%, var(--gold-dark) 100%); color:#fff; font-weight:700; font-size:14.5px; padding:12px 24px; border-radius:999px; border:none; box-shadow:0 10px 20px -8px rgba(185,126,32,0.55); display:inline-flex; align-items:center; gap:8px; transition:transform .18s ease, box-shadow .18s ease; white-space:nowrap; } .btn-gold:hover{transform:translateY(-2px); box-shadow:0 14px 24px -8px rgba(185,126,32,0.65);} .menu-toggle{display:none; width:42px; height:42px; border-radius:12px; border:1px solid var(--line); background:var(--surface); align-items:center; justify-content:center;} /* Duplicate language-switch + search shown only inside the open mobile menu (see @media below) -- the top bar doesn't have room for these alongside the cart icon and hamburger button once main-nav collapses. */ .mobile-nav-extra{display:none;} .book-card{display:flex; flex-direction:column;} .cover{ position:relative; border-radius:14px; overflow:hidden; aspect-ratio:3/4.3; box-shadow:var(--shadow); margin-bottom:16px; transition:transform .28s ease; } .book-card:hover .cover{transform:translateY(-6px) rotate(-0.6deg);} .cover > svg{position:absolute; inset:0; width:100%; height:100%;} .cover-shine{ position:absolute; inset:-60% -20%; z-index:3; pointer-events:none; background:linear-gradient(115deg, transparent 42%, rgba(255,255,255,0.5) 50%, transparent 58%); transform:translateX(-140%) rotate(0deg); transition:transform .85s cubic-bezier(.22,1,.36,1); } .book-card:hover .cover-shine{transform:translateX(60%) rotate(0deg);} .cover-overlay{ position:absolute; inset:0; z-index:4; background:linear-gradient(180deg, rgba(185,126,32,0) 32%, rgba(139,89,25,0.82) 100%); display:flex; align-items:center; justify-content:center; padding-bottom:8px; opacity:0; transition:opacity .32s ease; } .book-card:hover .cover-overlay{opacity:1;} .read-wrap{position:relative; display:flex; align-items:center; justify-content:center;} .read-pulse{ position:absolute; top:50%; left:50%; width:50px; height:50px; margin:-25px 0 0 -25px; border-radius:50%; border:2px solid rgba(255,255,255,0.7); opacity:0; z-index:5; pointer-events:none; } .book-card:hover .read-pulse{animation:pulseRing 1.8s ease-out infinite;} .book-card:hover .read-pulse2{animation-delay:.7s;} .read-btn{ position:relative; z-index:6; display:inline-flex; align-items:center; gap:8px; white-space:nowrap; background:linear-gradient(180deg, var(--gold) 0%, var(--gold-dark) 100%); color:#fff; font-family:inherit; font-weight:700; font-size:13px; padding:12px 22px 12px 16px; border-radius:999px; border:none; cursor:pointer; transform:scale(0.5) translateY(8px); opacity:0; transition:transform .45s cubic-bezier(.34,1.56,.64,1), opacity .3s ease, box-shadow .18s ease; box-shadow:0 10px 20px -8px rgba(0,0,0,0.55); } .book-card:hover .read-btn{transform:scale(1) translateY(0); opacity:1;} .read-btn:hover{box-shadow:0 12px 26px -6px rgba(0,0,0,0.6);} .read-label{white-space:nowrap;} .ribbon{ position:absolute; top:22px; right:-35px; transform:rotate(40deg); background:var(--gold-dark); color:#fff; font-size:10px; font-weight:800; letter-spacing:0.05em; padding:4px 38px; z-index:3; } .book-title{font-family:"Fraunces",serif; font-size:16px; font-weight:600; line-height:1.3;} .book-author{font-size:13px; color:var(--ink-soft); margin-top:3px;} .book-meta{font-size:11.5px; color:var(--ink-faint); margin-top:5px; display:flex; align-items:center; gap:6px; white-space:nowrap;} .book-meta .dot{color:var(--line);} .rating{display:flex; align-items:center; gap:5px; margin-top:9px; font-size:12.5px; color:var(--ink-soft); font-weight:600;} .rating svg{color:var(--gold);} .price-row{display:flex; align-items:center; justify-content:space-between; margin-top:11px;} .price{font-weight:800; font-size:15px; color:var(--ink); font-variant-numeric:tabular-nums;} .add-cart{ width:40px; height:35px; border-radius:50%; border:1px solid var(--line); background:var(--surface); display:flex; align-items:center; justify-content:center; color:var(--ink-soft); transition:all .18s ease; } .add-cart:hover{background:var(--gold-dark); border-color:var(--gold-dark); color:#fff;} footer.site{background:var(--footer-bg); color:var(--footer-soft); padding-top:72px;} .footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr; gap:32px; padding-bottom:52px; border-bottom:1px solid rgba(239,230,214,0.1); position:relative;} .footer-grid::before{ content:""; position:absolute; inset:-40px 0 0 0; z-index:0; pointer-events:none; background-image:url("../img/footer-lotus.webp"); background-repeat:no-repeat; background-position:center bottom; background-size:100% auto; opacity:0.12; } .footer-grid > *{position:relative; z-index:1;} .foot-brand{display:flex; align-items:center; gap:10px; font-family:"Fraunces",serif; font-size:21px; font-weight:600; color:var(--footer-ink);} .footer-grid p.desc{font-size:13.5px; line-height:1.7; margin-top:14px; max-width:30ch;} .social-row{display:flex; gap:10px; margin-top:20px;} .social-row a{ width:36px; height:36px; border-radius:50%; border:1px solid rgba(239,230,214,0.22); display:flex; align-items:center; justify-content:center; transition:all .18s ease; } .social-row a:hover{background:var(--gold-dark); border-color:var(--gold-dark); color:#fff;} .foot-col h4{color:var(--footer-ink); font-family:"Karla",sans-serif; font-size:14.5px; font-weight:800; margin-bottom:18px; letter-spacing:0.02em;} .foot-col li{margin-bottom:12px; font-size:13.5px;} .foot-col a{transition:color .18s ease;} .foot-col a:hover{color:var(--gold);} .contact-item{display:flex; align-items:flex-start; gap:10px; margin-bottom:14px; font-size:13.5px; line-height:1.5;} .contact-item svg{flex:none; margin-top:2px; color:var(--gold);} .footer-bottom{display:flex; align-items:center; justify-content:space-between; padding:24px 32px; font-size:13px;} .footer-credit a{text-decoration:underline; text-decoration-color:rgba(239,230,214,0.3); text-underline-offset:2px; transition:color .18s ease;} .footer-credit a:hover{color:var(--gold);} .pay-badges{display:flex; gap:8px;} .pay-badges > span{ border:1px solid rgba(239,230,214,0.22); border-radius:6px; padding:5px 10px; font-size:11px; font-weight:800; letter-spacing:0.03em; color:var(--footer-ink); } .back-top{ position:fixed; bottom:28px; right:28px; width:48px; height:48px; border-radius:50%; border:none; background:var(--gold-dark); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 12px 24px -8px rgba(185,126,32,0.6); opacity:0; pointer-events:none; transform:translateY(10px); transition:opacity .25s ease, transform .25s ease; z-index:60; } .back-top.show{opacity:1; pointer-events:auto; transform:translateY(0);} .lang-switch{ display:flex; align-items:center; border:1px solid rgba(255,255,255,0.55); border-radius:999px; background:rgba(255,255,255,0.32); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); padding:3px; gap:2px; } .lang-btn{ border:none; background:transparent; font-family:"Karla","Noto Sans Sinhala",sans-serif; font-weight:700; font-size:12.5px; letter-spacing:0.02em; color:var(--ink-soft); padding:7px 13px; border-radius:999px; transition:background .18s ease, color .18s ease; } .lang-btn.active{background:linear-gradient(180deg, var(--gold) 0%, var(--gold-dark) 100%); color:#fff;} .lang-btn:not(.active):hover{color:var(--ink);} .page-banner{ position:relative; margin-top:-79px; background-image:url("../img/page-banner.webp"); background-size:cover; background-position:right; isolation:isolate; min-height:215px; display:flex; align-items:flex-end; } .page-banner::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 55%, rgba(251,247,239,1) 100%); pointer-events:none; } .banner-inner{position:relative; z-index:1; padding-top:100px; padding-bottom:0px; width:100%; color:var(--ink);} .banner-inner h1{font-size:clamp(32px,4vw,46px); font-weight:600; color:var(--ink); text-shadow:0 2px 18px rgba(251,247,239,0.9), 0 1px 3px rgba(251,247,239,0.9);} .crumb{ margin-top:14px; display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--ink-soft); } .crumb a{color:var(--ink-soft); transition:color .18s ease;} .crumb a:hover{color:var(--ink);} .crumb span.sep{color:var(--ink-faint);} .crumb span.cur{color:var(--gold-dark);} .side-card{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:26px 24px; box-shadow:var(--shadow); margin-bottom:22px; } .side-card h4{ font-family:"Karla",sans-serif; font-size:14.5px; font-weight:800; letter-spacing:0.02em; margin-bottom:18px; display:flex; align-items:center; justify-content:space-between; } @media (max-width: 980px){ /* A 2-column split here paired up unrelated columns by grid auto-placement (Quick Links landed next to the brand blurb, My Account next to Customer Service), which made those two sections look like they'd gone missing from the normal top-to-bottom flow. Stack everything in one column instead, same as the phone-width breakpoint below -- this is also where the header switches to the hamburger menu, so it's already "mobile" in every other respect. */ .footer-grid{grid-template-columns:1fr; row-gap:36px; text-align:center;} .foot-brand{justify-content:center;} .footer-grid p.desc{margin-left:auto; margin-right:auto;} .social-row{justify-content:center;} .contact-item{justify-content:center;} .book-row{grid-template-columns:repeat(3,minmax(0,1fr));} .main-nav{display:none;} .menu-toggle{display:flex;} /* The lang switch + search icon move into the mobile menu itself (see .mobile-nav-extra) -- keeping them in the top bar too made it wider than the screen, which pushed the hamburger button off-screen and made the menu look like it wasn't there at all. */ .nav-actions .lang-switch{display:none;} .nav-actions .icon-btn[aria-label="Search"]{display:none;} .nav-actions{gap:10px;} .mobile-nav-extra{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--line); } } @media (max-width: 620px){ .book-row{grid-template-columns:repeat(2,minmax(0,1fr));} .footer-grid{grid-template-columns:1fr;} .wrap{padding:0 20px;} .nav-row{padding:16px 20px; gap:12px;} /* Scoped to the header's brand block only -- this used to be a bare .brand-tagline rule, which also hid the tagline in the footer's brand block (same class, different context) since the two share markup. */ .nav-row .brand-tagline{display:none;} /* The bottom bar (copyright + payment badges) was forced into one row by the flex default, so on a narrow screen it got cramped, wrapped badly, and the fixed back-to-top button ended up sitting on top of the last badge, hiding it. Stack the two pieces (centered, matching the rest of the footer on mobile) and give the button clearance. */ .footer-bottom{ flex-direction:column; align-items:center; text-align:center; gap:14px; padding:24px 20px 96px; } .pay-badges{flex-wrap:wrap; justify-content:center;} .back-top{width:42px; height:42px; bottom:20px; right:20px;} }