/* ========================================================================== Pothapatha — project overrides on top of the Bookworm theme. Loaded last, after theme.css. Keep theme.css untouched so the template stays upgradeable. ========================================================================== */ /* -------------------------------------------------------------------------- Page loader — a brief logo pulse shown while the page loads, on every page (layouts/main.php). pothapatha.js adds .pp-loaded to once the page is ready, which fades this out; a hard timeout in the same script guarantees it never gets stuck showing if something upstream fails. -------------------------------------------------------------------------- */ .pp-preloader { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; background: #fff; opacity: 1; visibility: visible; transition: opacity 0.35s ease, visibility 0.35s ease; } .pp-preloader__logo { width: 130px; max-width: 45vw; animation: pp-preloader-pulse 1.1s ease-in-out infinite; } @keyframes pp-preloader-pulse { 0%, 100% { opacity: 0.5; transform: scale(0.92); } 50% { opacity: 1; transform: scale(1); } } body.pp-loaded .pp-preloader { opacity: 0; visibility: hidden; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .pp-preloader__logo { animation: none; } } /* -------------------------------------------------------------------------- Sinhala typography The Bookworm theme ships Inter + Cerebri Sans, neither of which has Sinhala glyphs. Until a proper Sinhala webfont is dropped into assets/fonts/, fall back to the fonts Windows/Android/iOS already ship so සිංහල text renders. -------------------------------------------------------------------------- */ :root { --pp-font-sans: 'Cerebri Sans', 'Inter', 'Noto Sans Sinhala', 'Iskoola Pota', 'Nirmala UI', 'Yaldevi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } body, .font-family-base, input, select, textarea, button { font-family: var(--pp-font-sans); } /* Sinhala needs a little more line height than Latin at the same size */ :lang(si), .si-text { line-height: 1.75; } /* ========================================================================== Brand palette — sampled from the pothapatha.com logo sheet. The Bookworm theme ships a lime-green accent (#88cf00) and Amazon-ish navy-greys (#232f3e header, #1c2633 nav/footer). Everything below re-points those to the logo's blues. Change the four variables and the whole site follows; the rules under them only exist to reach the theme's utility classes, which hard-code the colour values. ========================================================================== */ :root { --pp-navy-900: #04284a; /* logo sheet dark panel — header bar, footer */ --pp-navy-700: #123a5c; /* logo outline navy — nav bar, headings */ --pp-blue-500: #2e7bb0; /* book lines / cart — buttons, links */ --pp-blue-300: #7fb3d5; /* light accent */ --pp-blue-600: #256691; /* hover state for --pp-blue-500 */ --pp-blue-100: #e4eff8; /* soft tints */ /* kept for older rules in this file */ --pp-primary: var(--pp-blue-500); --pp-primary-dark: var(--pp-blue-600); --pp-dark: var(--pp-navy-900); } /* --- surfaces the template paints dark ---------------------------------- */ .bg-secondary-gray-800 { background-color: var(--pp-navy-900) !important; } .bg-secondary-black-200 { background-color: var(--pp-navy-700) !important; } .bg-gray-850 { background-color: var(--pp-navy-900) !important; } .site-footer_v2 .border-gray-750 { border-color: rgba(255, 255, 255, 0.12) !important; } /* --- accent: green -> brand blue ---------------------------------------- */ .btn-primary-green, .btn-primary-green.disabled, .btn-primary-green:disabled { color: #fff; background-color: var(--pp-blue-500); border-color: var(--pp-blue-500); } .btn-primary-green:hover, .btn-primary-green:focus, .btn-primary-green.focus, .btn-primary-green:not(:disabled):not(.disabled):active, .btn-primary-green.dropdown-toggle { color: #fff; background-color: var(--pp-blue-600); border-color: var(--pp-blue-600); } .btn-primary-green:focus, .btn-primary-green.focus { box-shadow: 0 0 0 0.2rem rgba(46, 123, 176, 0.35); } .btn-outline-primary-green { color: var(--pp-blue-500); border-color: var(--pp-blue-500); } .btn-outline-primary-green:hover, .btn-outline-primary-green:focus, .btn-outline-primary-green:not(:disabled):not(.disabled):active { color: #fff; background-color: var(--pp-blue-500); border-color: var(--pp-blue-500); } .text-primary-green { color: var(--pp-blue-500) !important; } .bg-primary-green { background-color: var(--pp-blue-500) !important; } .border-primary-green { border-color: var(--pp-blue-500) !important; } .bg-soft-primary-green { background-color: var(--pp-blue-100) !important; } .fill-primary-green { fill: var(--pp-blue-500) !important; } .badge-primary-green { color: #fff; background-color: var(--pp-blue-500); } a.text-primary-green:hover, a.text-primary-green:focus { color: var(--pp-blue-600) !important; } /* the theme's generic "primary" accent shows up in product meta and links */ .text-primary { color: var(--pp-blue-500) !important; } .h-primary:hover { color: var(--pp-blue-500) !important; } .h-p-bg:hover { background-color: var(--pp-blue-500) !important; color: #fff !important; } /* --- links -------------------------------------------------------------- */ a { color: var(--pp-navy-700); } a:hover { color: var(--pp-blue-500); } /* the dark bars carry light text, so links there must not inherit the above */ .bg-secondary-gray-800 a, .bg-secondary-black-200 a, .site-footer_v2 a { color: inherit; } /* --- header ------------------------------------------------------------- */ .site-branding img { height: 62px; max-height: 62px; width: auto; max-width: 120px; object-fit: contain; } /* the nav bar sits directly under the masthead; a hairline keeps them apart */ .bg-secondary-black-200 { border-top: 1px solid rgba(255, 255, 255, 0.08); } .site-navigation .nav-link.active, .site-navigation .nav-link:hover { color: var(--pp-blue-300) !important; } /* -------------------------------------------------------------------------- Header search: category picker A bare