/* ============================================================================= DigiBooks — Custom Stylesheet File: assets/css/digibooks-custom.css Load this AFTER assets/css/main.css in every page ============================================================================= TABLE OF CONTENTS ----------------- 1. Color Variables (edit here to retheme the whole site) 2. Page Title Bar (the breadcrumb bar below the top nav) 3. Footer – Top Section (logo, links, contact columns) 4. Footer – Copyright Bar (bottom strip) 5. Footer – Social Icons 6. Footer – Link Hover States 7. Responsive Adjustments ============================================================================= */ /* ============================================================================= 1. COLOR VARIABLES ----------------- All key colours live here as CSS custom properties. Change a value once and it updates everywhere on the site. ============================================================================= */ :root { /* ── Page Title Bar ── */ --ptb-bg: #f1f4f8; /* background of the breadcrumb bar */ --ptb-border: #dce3ec; /* bottom border line of the breadcrumb bar */ --ptb-title-color: #1a2e4a; /* page title text (e.g. "About") */ --ptb-breadcrumb-link: #3b6fce; /* "Home" link colour in breadcrumb */ --ptb-breadcrumb-active: #555e6e; /* current page label colour in breadcrumb */ --ptb-separator-color: #aab4c0; /* the "/" separator between breadcrumb items */ /* ── Footer – Main Body ── */ --footer-bg: #1a2e4a; /* background of the main footer area */ --footer-text: #c8d3e0; /* default body text inside footer */ --footer-heading: #e8edf4; /* column heading colour (h4) */ --footer-link: #9aaec8; /* link colour in footer columns */ --footer-link-hover: #fd920d; /* link colour on hover */ --footer-border: rgba(255, 255, 255, 0.08); /* top border of copyright strip */ --footer-sitename: #ffffff; /* DigiBooks brand name in footer */ --cta-color: #fd920d; /* ── Footer – Copyright Strip ── Kept close in tone to --footer-bg but slightly darker/richer so there is a visible but harmonious separation. */ --copyright-bg: #111f33; /* background of the copyright bottom bar */ --copyright-text: #6b7f96; /* © text and "All Rights Reserved" */ --copyright-link: #4e9af1; /* links inside the credits line */ --copyright-link-hover: #7db8ff; /* credits link hover colour */ /* ── Social Icons (inside footer) ── */ --social-icon-color: #9aaec8; /* icon glyph colour */ --social-icon-bg: rgba(255, 255, 255, 0.06); /* icon button background */ --social-icon-border: rgba(255, 255, 255, 0.12); /* icon button border */ --social-icon-hover-bg: #3b6fce; /* icon background on hover */ --social-icon-hover-color: #ffffff; /* icon glyph colour on hover */ } /* ============================================================================= 2. PAGE TITLE BAR ----------------- The slim bar that appears directly below the fixed top navigation. Contains the page title on the left and breadcrumb trail on the right. ============================================================================= */ .page-title-bar { background-color: var(--ptb-bg); border-bottom: 1px solid var(--ptb-border); padding: 40px 0; margin-top: 110px; /* pushes content below the fixed top nav — adjust if nav height changes */ } /* Inner flex row: title left, breadcrumb right */ .page-title-bar .inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; } /* Page title text — e.g. "About", "Features" */ .page-title-bar h1 { font-size: 1.5rem; font-weight: 700; color: var(--ptb-title-color); margin: 0; letter-spacing: 0.01em; white-space: nowrap; } /* Bootstrap breadcrumb reset — remove default padding & background */ .page-title-bar .breadcrumb { margin: 0; padding: 0; background: transparent; font-size: 0.875rem; flex-wrap: nowrap; } /* "Home" link and any intermediate crumbs */ .page-title-bar .breadcrumb-item a { color: var(--ptb-breadcrumb-link); text-decoration: none; font-weight: 400; transition: color 0.2s; } .page-title-bar .breadcrumb-item a:hover { text-decoration: none; color: var(--ptb-title-color); } /* Current page label (non-linked) */ .page-title-bar .breadcrumb-item.active { color: var(--ptb-breadcrumb-active); font-weight: 400; } /* "/" separator — overrides Bootstrap's default ">" */ .page-title-bar .breadcrumb-item+.breadcrumb-item::before { content: "/"; color: var(--ptb-separator-color); padding: 0 5px; } /* ====================================================== RK Edits ====================================================== */ .call-to-action .container { background: var(--cta-color); color: var(--contrast-color); position: relative; overflow: hidden; border-radius: 0rem; padding: 4rem 2rem; } .about .about-description { text-align: justify; } /* Extra space between client logos and pagination dots */ .clients .swiper-wrapper { padding-bottom: 80px; } /* ============================================================================= 3. FOOTER – TOP SECTION ----------------------- The main body of the footer: logo column, link columns, contact info. ============================================================================= */ .footer { background-color: var(--footer-bg); color: var(--footer-text); } /* Slight top padding for the footer content block */ .footer .footer-top { padding-top: 48px; padding-bottom: 32px; } /* Brand / sitename in the footer logo */ .footer .sitename { color: var(--footer-sitename); } /* Short contact details block under the logo */ .footer .footer-contact p { color: var(--footer-text); font-size: 0.9rem; line-height: 1.7; margin-bottom: 0; } .footer .footer-contact strong { color: var(--footer-heading); } /* Column headings (h4) — e.g. "Useful Links", "Our Services" */ .footer .footer-links h4 { color: var(--footer-heading); font-size: 0.95rem; font-weight: 600; margin-bottom: 14px; letter-spacing: 0.03em; } /* Footer link items */ .footer .footer-links ul { list-style: none; padding: 0; margin: 0; } .footer .footer-links ul li { padding: 7px 0; } /* ============================================================================= 4. FOOTER – COPYRIGHT BAR ------------------------- The bottom strip with © notice and template credits. Uses a slightly darker shade than --footer-bg for a clear but harmonious visual separation without jarring contrast. ============================================================================= */ .footer .copyright { padding: 18px 0; margin-top: 0 !important; /* override Bootstrap mt-4 so we control spacing */ border-top: 2px solid var(--footer-border); } /* Copyright text */ .footer .copyright p { color: var(--copyright-text); font-size: 0.85rem; margin-bottom: 4px; } /* "DigiBooks" brand name inside copyright line */ .footer .copyright .sitename { color: var(--footer-sitename); } /* Credits line ("Designed with iLanding...") */ .footer .credits { color: var(--copyright-text); font-size: 0.8rem; margin-top: 4px; } /* Links inside credits */ .footer .credits a { color: var(--copyright-link); text-decoration: none; transition: color 0.2s; } .footer .credits a:hover { color: var(--copyright-link-hover); text-decoration: underline; } /* ============================================================================= 5. FOOTER – SOCIAL ICONS ------------------------ The row of social icon buttons (Twitter/X, Facebook, Instagram, LinkedIn). ============================================================================= */ .footer .social-links { gap: 10px; } .footer .social-links a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 6px; background-color: var(--social-icon-bg); border: 1px solid var(--social-icon-border); color: var(--social-icon-color); font-size: 1rem; text-decoration: none; transition: background-color 0.25s, color 0.25s, border-color 0.25s; } .footer .social-links a:hover { background-color: var(--social-icon-hover-bg); color: var(--social-icon-hover-color); border-color: var(--social-icon-hover-bg); } /* ============================================================================= 6. FOOTER – LINK HOVER STATES ------------------------------ Applied to all anchor tags inside footer columns and contact block. ============================================================================= */ .footer .footer-links ul li a, .footer .footer-contact a { color: var(--footer-link); text-decoration: none; font-size: 0.88rem; transition: color 0.2s, padding-left 0.2s; } .footer .footer-links ul li a:hover, .footer .footer-contact a:hover { color: var(--footer-link-hover); padding-left: 4px; /* subtle slide-right micro-interaction */ } /* ============================================================================= 7. RESPONSIVE ADJUSTMENTS -------------------------- Keeps the page-title-bar readable on small screens. ============================================================================= */ @media (max-width: 576px) { /* Stack title above breadcrumb on very small screens */ .page-title-bar .inner { flex-direction: column; align-items: flex-start; gap: 6px; } .page-title-bar h1 { font-size: 0.95rem; } .page-title-bar .breadcrumb { font-size: 0.8rem; } } /* ============================================================================= 8. HEADER LOGO -------------- When you supply your own logo image, place it at assets/img/logo.png and uncomment the line in includes/header.php. These rules ensure it scales correctly in both desktop and mobile nav. ============================================================================= */ /* Logo image — constrains height, lets width scale naturally */ .header .logo img { max-height: 36px; /* adjust to match your logo's natural proportions */ width: auto; display: block; } /* Fallback text sitename shown when no image logo is provided */ .header .logo .sitename { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; } /* Footer logo — slightly smaller than header */ .footer .logo img { max-height: 30px; width: auto; display: block; margin-bottom: 4px; } /* ============================================================================= 9. HOMEPAGE — CLIENTS STRIP ---------------------------- Partner university logos section embedded on the homepage. ============================================================================= */ .home-clients-strip .section-label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #8a97a8; text-align: center; margin-bottom: 28px; } /* ============================================================================= 10. HOMEPAGE — TESTIMONIALS HIGHLIGHT STRIP ------------------------------------------- Three social-proof testimonial cards on the homepage. ============================================================================= */ .home-testi-strip .view-all { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; font-weight: 600; color: var(--ptb-breadcrumb-link); text-decoration: none; transition: gap 0.2s, color 0.2s; } .home-testi-strip .view-all:hover { gap: 10px; color: #1a2e4a; } /* ============================================================================= 11. BROWSE PAGE — SUBJECT CATEGORY GRID ----------------------------------------- 8-card subject grid on browse.php. Hover reveals accent colour + lift. ============================================================================= */ .subject-card { display: block; text-decoration: none; border: 1.5px solid #dce3ec; border-radius: 14px; padding: 32px 24px; text-align: center; background: #ffffff; color: #1a2e4a; transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; } .subject-card:hover { transform: translateY(-5px); box-shadow: 0 12px 32px rgba(26, 46, 74, 0.10); background-color: #f4f8ff; border-color: #3b6fce; color: #1a2e4a; } /* Icon circle */ .subject-card .subject-icon { width: 60px; height: 60px; border-radius: 50%; background-color: #eef2fa; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; font-size: 1.5rem; color: #3b6fce; transition: background-color 0.2s, color 0.2s; } .subject-card:hover .subject-icon { background-color: #3b6fce; color: #ffffff; } .subject-card .subject-name { font-size: 0.975rem; font-weight: 700; margin-bottom: 6px; } .subject-card .subject-count { font-size: 0.8rem; color: #8a97a8; } /* Arrow revealed on hover */ .subject-card .subject-arrow { display: inline-block; font-size: 0.85rem; margin-top: 14px; color: #3b6fce; opacity: 0; transform: translateX(-4px); transition: opacity 0.2s, transform 0.2s; } .subject-card:hover .subject-arrow { opacity: 1; transform: translateX(0); } /* ============================================================================= 8. BROWSE SUBJECTS — Subject Category Cards (browse.php) --------------------------------------------------------- Each card links to a subject category. Icon colour is set per-card via the --subject-color CSS custom property on the element itself. ============================================================================= */ .subject-card { display: flex; align-items: flex-start; gap: 18px; padding: 24px 22px; background: #ffffff; border: 1px solid #e4eaf3; border-radius: 12px; text-decoration: none; color: inherit; height: 100%; transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s; position: relative; } .subject-card:hover { box-shadow: 0 8px 28px rgba(26, 46, 74, 0.1); transform: translateY(-3px); border-color: var(--subject-color, #3b6fce); color: inherit; } /* Coloured icon badge */ .subject-icon { flex-shrink: 0; width: 52px; height: 52px; border-radius: 12px; background-color: color-mix(in srgb, var(--subject-color, #3b6fce) 12%, white); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: var(--subject-color, #3b6fce); transition: background-color 0.25s; } .subject-card:hover .subject-icon { background-color: var(--subject-color, #3b6fce); color: #ffffff; } /* Text block */ .subject-body { flex: 1; min-width: 0; } .subject-body h3 { font-size: 1rem; font-weight: 700; color: #1a2e4a; margin: 0 0 6px; } .subject-body p { font-size: 0.85rem; color: #6b7f96; margin: 0 0 10px; line-height: 1.55; } /* Book count badge */ .subject-count { display: inline-block; font-size: 0.78rem; font-weight: 600; color: var(--subject-color, #3b6fce); background-color: color-mix(in srgb, var(--subject-color, #3b6fce) 10%, white); padding: 2px 10px; border-radius: 20px; } /* Arrow icon — aligned right */ .subject-arrow { font-size: 1.1rem; color: #c8d3e0; align-self: center; transition: color 0.2s, transform 0.2s; } .subject-card:hover .subject-arrow { color: var(--subject-color, #3b6fce); transform: translateX(4px); } /* Search prompt box at the bottom of browse page */ .browse-search-prompt { background: #f1f4f8; border: 1px dashed #c4d0e0; border-radius: 14px; padding: 40px 32px; } .browse-search-prompt .bi-search { font-size: 2.2rem; color: #3b6fce; display: block; margin-bottom: 14px; } .browse-search-prompt h3 { font-size: 1.2rem; font-weight: 700; color: #1a2e4a; margin-bottom: 8px; } .browse-search-prompt p { color: #6b7f96; font-size: 0.9rem; margin-bottom: 20px; } /* Hide the floating badge entirely */ .grecaptcha-badge { visibility: hidden !important; opacity: 0 !important; }