/*
* ============================================================
* bookvoiceover.com — Design Improvements
* FILE: public/assets/css/improvements.css
*
* HOW TO USE:
* 1. Upload this file to: public/assets/css/improvements.css
* 2. In your main layout (layouts/app.blade.php), add this
* line AFTER your existing CSS links:
*
*
* SAFE: This file only adds/overrides visual styles.
* It does NOT touch any PHP, routes, forms, payments,
* logins, emails, or database logic.
* ============================================================
*/
/* ============================================================
1. GOOGLE FONT — Poppins (more professional than Nunito)
Add this in your BEFORE this CSS file:
============================================================ */
body {
font-family: 'Poppins', 'Nunito', sans-serif;
}
/* ============================================================
2. COLOUR VARIABLES — single place to change brand colours
============================================================ */
:root {
--bvo-primary: #0a2342; /* deep navy — trust/authority */
--bvo-accent: #e8593c; /* warm orange-red — energy/CTA */
--bvo-accent-hover: #c94530;
--bvo-gold: #f5a623; /* star / highlight */
--bvo-light-bg: #f8f9fb;
--bvo-card-bg: #ffffff;
--bvo-text: #1a1a2e;
--bvo-muted: #6b7280;
--bvo-border: #e5e7eb;
}
/* ============================================================
3. HERO SECTION — stronger CTA button
============================================================ */
/* Make "Post Your Project" button in the hero bold and branded */
section.pt-3.pt-md-5 .btn-primary-soft,
section.pt-3.pt-md-5 a[href*="create"] {
background: var(--bvo-accent) !important;
color: #fff !important;
border: none !important;
padding: 13px 28px !important;
font-size: 15px !important;
font-weight: 600 !important;
border-radius: 10px !important;
box-shadow: 0 6px 20px rgba(232, 89, 60, 0.35) !important;
transition: all 0.2s ease !important;
text-decoration: none !important;
display: inline-block !important;
}
section.pt-3.pt-md-5 .btn-primary-soft:hover,
section.pt-3.pt-md-5 a[href*="create"]:hover {
background: var(--bvo-accent-hover) !important;
transform: translateY(-2px) !important;
box-shadow: 0 10px 28px rgba(232, 89, 60, 0.45) !important;
}
/* Hero headline polish */
h1.display-2-3 {
font-weight: 700 !important;
line-height: 1.2 !important;
color: var(--bvo-primary) !important;
}
h1.display-2-3 .position-relative.z-index-9 {
color: var(--bvo-accent);
}
/* ============================================================
4. SOCIAL PROOF BAR — add under the hero buttons
Copy the HTML snippet from index.blade.php comment below
and paste it after the hstack div with the CTA button.
============================================================
HTML TO ADD after your CTA button div:
★★★★★
Trusted by 500+ clients · NHS · Pearson · Coca-Cola
============================================================ */
.bvo-social-proof {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--bvo-muted);
margin-top: 12px;
flex-wrap: wrap;
}
.bvo-stars {
color: var(--bvo-gold);
font-size: 15px;
letter-spacing: 2px;
}
/* ============================================================
5. TRUSTED CLIENTS STRIP
HTML TO ADD after your hero section (before .container.mt-4):
Trusted by teams at
NHS
Pearson
Coca-Cola
Fly Jinnah
Air Arabia
Air India
============================================================ */
.bvo-trust-strip {
display: block !important;
width: 100% !important;
background: var(--bvo-light-bg) !important;
border-top: 1px solid var(--bvo-border) !important;
border-bottom: 1px solid var(--bvo-border) !important;
padding: 18px 20px !important;
text-align: center !important;
margin: 0 !important;
float: none !important;
clear: both !important;
box-sizing: border-box !important;
}
.bvo-trust-label {
display: block !important;
font-size: 11px !important;
text-transform: uppercase !important;
letter-spacing: 2px !important;
color: #aaa !important;
margin-bottom: 10px !important;
font-weight: 500 !important;
width: 100% !important;
text-align: center !important;
}
.bvo-logo-row {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
align-items: center !important;
gap: 16px 32px !important;
width: 100% !important;
max-width: 800px !important;
margin: 0 auto !important;
}
.bvo-logo-row span {
font-size: 15px !important;
font-weight: 700 !important;
color: #c5c5c5 !important;
letter-spacing: 0.5px !important;
transition: color 0.2s !important;
cursor: default !important;
display: inline-block !important;
}
.bvo-logo-row span:hover {
color: #888 !important;
}
/* ============================================================
6. SECTION HEADINGS — consistent and stronger
============================================================ */
.font-30 {
font-size: 1.75rem !important;
font-weight: 700 !important;
color: var(--bvo-primary) !important;
line-height: 1.25 !important;
}
.font-30 + p {
color: var(--bvo-muted);
font-size: 15px;
}
/* ============================================================
7. ARTIST / DEMO CARDS — improved visuals
============================================================ */
.player {
background: var(--bvo-card-bg);
border: 1px solid var(--bvo-border);
border-radius: 14px !important;
padding: 16px;
margin-bottom: 20px;
transition: box-shadow 0.2s, transform 0.2s;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.player:hover {
box-shadow: 0 8px 28px rgba(0,0,0,0.10);
transform: translateY(-3px);
}
/* Artist name link */
.tss-1wtqlj6-talentName {
font-weight: 600 !important;
font-size: 14px !important;
color: var(--bvo-primary) !important;
text-decoration: none !important;
}
.tss-1wtqlj6-talentName:hover {
color: var(--bvo-accent) !important;
}
/* Language/gender tag */
.tss-1pawqxa-root-primary-tagStatus-turnAroundColor {
font-size: 12px !important;
color: var(--bvo-muted) !important;
line-height: 1.4 !important;
}
/* Rating star */
.tss-tvam2d-talentRating {
font-size: 12px !important;
font-weight: 600 !important;
color: var(--bvo-gold) !important;
}
/* Profile image */
.tss-1qe1dwp-talentImage {
width: 52px !important;
height: 52px !important;
border: 2px solid var(--bvo-border) !important;
object-fit: cover !important;
}
/* "Book Now" button on artist cards */
.player .btn-primary {
background: var(--bvo-primary) !important;
border-color: var(--bvo-primary) !important;
font-size: 12px !important;
padding: 7px 14px !important;
border-radius: 8px !important;
font-weight: 500 !important;
transition: all 0.15s !important;
white-space: nowrap !important;
}
.player .btn-primary:hover {
background: var(--bvo-accent) !important;
border-color: var(--bvo-accent) !important;
}
/* Audio player */
.player audio {
width: 100%;
height: 36px;
border-radius: 8px;
margin-top: 8px;
accent-color: var(--bvo-accent);
}
/* Fix fixed-width audio card on mobile — overrides the 385px hardcoded width */
@media (max-width: 576px) {
.player-controls {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.song-panel {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.player {
overflow: hidden !important;
}
}
/* ============================================================
8. BLOG CARDS — equal height + cleaner look
============================================================ */
/* Make all blog card columns equal height */
.row.g-4 > .col-md-6.col-lg-4 {
display: flex !important;
flex-direction: column !important;
}
.row.g-4 > .col-md-6.col-lg-4 .card.bg-light.p-3 {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
}
.row.g-4 > .col-md-6.col-lg-4 .card.bg-light.p-3 .card-body {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
}
/* Badge wrapper — must stay inline-flex so pills sit side by side */
.row.g-4 > .col-md-6.col-lg-4 .card-body > a.badge,
.row.g-4 > .col-md-6.col-lg-4 .card-body > .badge {
display: inline-block !important;
width: auto !important;
flex: none !important;
}
/* Push description text to fill space so titles align */
.row.g-4 > .col-md-6.col-lg-4 .card-body .truncate.truncate-5 {
flex: 1 !important;
}
.card.bg-light.p-3 {
background: var(--bvo-card-bg) !important;
border: 1px solid var(--bvo-border) !important;
border-radius: 12px !important;
transition: box-shadow 0.2s, transform 0.2s !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}
.card.bg-light.p-3:hover {
box-shadow: 0 8px 24px rgba(0,0,0,0.09) !important;
transform: translateY(-3px) !important;
}
.card.bg-light.p-3 .card-title a {
color: var(--bvo-primary) !important;
font-weight: 600 !important;
text-decoration: none !important;
}
.card.bg-light.p-3 .card-title a:hover {
color: var(--bvo-accent) !important;
}
.card.bg-light.p-3 p {
color: var(--bvo-muted) !important;
font-size: 14px !important;
line-height: 1.65 !important;
}
/* ============================================================
WHATSAPP BUTTON — replaces phone number display
============================================================ */
.bvo-whatsapp-btn {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
background: #25D366 !important;
color: #fff !important;
font-weight: 600 !important;
font-size: 14px !important;
padding: 10px 18px !important;
border-radius: 8px !important;
text-decoration: none !important;
transition: background 0.15s, transform 0.15s !important;
border: none !important;
cursor: pointer !important;
margin-top: 8px !important;
max-width: 220px !important;
}
.bvo-whatsapp-btn:hover {
background: #1ebe5d !important;
color: #fff !important;
transform: translateY(-1px) !important;
text-decoration: none !important;
}
.bvo-whatsapp-btn svg {
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
min-height: 18px !important;
max-width: 18px !important;
max-height: 18px !important;
fill: #fff !important;
flex-shrink: 0 !important;
display: inline-block !important;
}
/* ============================================================
9. NAV "POST YOUR PROJECT" BUTTON — stands out from nav links
============================================================ */
header a[href*="project/create"],
nav a[href*="project/create"] {
background: var(--bvo-accent) !important;
color: #fff !important;
border-radius: 8px !important;
padding: 8px 18px !important;
font-weight: 600 !important;
font-size: 14px !important;
border: none !important;
transition: background 0.15s, transform 0.1s !important;
}
header a[href*="project/create"]:hover,
nav a[href*="project/create"]:hover {
background: var(--bvo-accent-hover) !important;
transform: translateY(-1px) !important;
}
/* ============================================================
10. "READ MORE" & "POST YOUR PROJECT" BUTTONS — branded
============================================================ */
.d-flex.justify-content-center .btn-primary,
section .d-flex.justify-content-center a.btn-primary {
background: var(--bvo-accent) !important;
border-color: var(--bvo-accent) !important;
padding: 12px 28px !important;
font-weight: 600 !important;
border-radius: 10px !important;
font-size: 15px !important;
transition: all 0.2s !important;
}
.d-flex.justify-content-center .btn-primary:hover {
background: var(--bvo-accent-hover) !important;
border-color: var(--bvo-accent-hover) !important;
transform: translateY(-1px) !important;
}
/* ============================================================
11. FEATURES SECTION (3-column cards with images)
============================================================ */
.card.card-img-scale {
border-radius: 14px !important;
overflow: hidden !important;
border: 1px solid var(--bvo-border) !important;
box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
transition: box-shadow 0.2s, transform 0.2s !important;
}
.card.card-img-scale:hover {
box-shadow: 0 10px 32px rgba(0,0,0,0.10) !important;
transform: translateY(-4px) !important;
}
.card.card-img-scale .card-title {
font-weight: 600 !important;
color: var(--bvo-primary) !important;
font-size: 15px !important;
}
.card.card-img-scale p {
font-size: 13.5px !important;
color: var(--bvo-muted) !important;
line-height: 1.7 !important;
}
/* ============================================================
12. FAQ ACCORDION — cleaner style
============================================================ */
.accordion-button {
font-size: 15px !important;
font-weight: 600 !important;
color: var(--bvo-primary) !important;
background: #fff !important;
border-radius: 10px !important;
}
.accordion-button:not(.collapsed) {
color: var(--bvo-accent) !important;
box-shadow: none !important;
}
.accordion-item {
border: 1px solid var(--bvo-border) !important;
border-radius: 10px !important;
overflow: hidden !important;
margin-bottom: 10px !important;
}
/* ============================================================
13. BOTTOM LANGUAGE LINKS SECTION
============================================================ */
.bg-light .bg-body {
background: #fff !important;
border-radius: 16px !important;
border: 1px solid var(--bvo-border) !important;
}
.filtered-languages {
font-size: 13.5px !important;
color: var(--bvo-primary) !important;
font-weight: 500 !important;
padding: 4px 0 !important;
transition: color 0.15s !important;
}
.filtered-languages:hover {
color: var(--bvo-accent) !important;
text-decoration: none !important;
}
/* ============================================================
14. STICKY MOBILE CTA BAR
============================================================ */
.bvo-sticky-cta {
display: none !important;
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
padding: 10px 16px !important;
background: #fff !important;
border-top: 1px solid var(--bvo-border) !important;
z-index: 9998 !important;
box-shadow: 0 -4px 16px rgba(0,0,0,0.08) !important;
box-sizing: border-box !important;
text-align: center !important;
}
.bvo-sticky-cta a {
display: block !important;
width: 100% !important;
text-align: center !important;
background: var(--bvo-accent) !important;
color: #fff !important;
font-weight: 600 !important;
font-size: 15px !important;
padding: 13px !important;
border-radius: 10px !important;
text-decoration: none !important;
transition: background 0.15s !important;
box-sizing: border-box !important;
}
.bvo-sticky-cta a:hover {
background: var(--bvo-accent-hover) !important;
color: #fff !important;
text-decoration: none !important;
}
@media (max-width: 768px) {
.bvo-sticky-cta {
display: block !important;
}
body {
padding-bottom: 74px !important;
}
}
/* ============================================================
15. GENERAL SPACING & POLISH
============================================================ */
section {
padding-top: 3rem;
padding-bottom: 3rem;
}
@media (min-width: 992px) {
section {
padding-top: 4rem;
padding-bottom: 4rem;
}
}
/* Badge pills — hide on homepage blog cards, they clutter the layout */
.row.g-4 > .col-md-6.col-lg-4 .card-body > a.badge,
.row.g-4 > .col-md-6.col-lg-4 .card-body > a.bg-primary,
.row.g-4 > .col-md-6.col-lg-4 .card-body a.badge.bg-primary {
display: none !important;
}
/* Keep badges visible on the actual blog listing page and individual blog pages */
.badge.bg-success {
font-size: 11px !important;
padding: 4px 9px !important;
border-radius: 20px !important;
display: inline-block !important;
width: auto !important;
white-space: nowrap !important;
margin-right: 4px !important;
margin-bottom: 4px !important;
}
/* Page headings on inner pages */
h1.h1-35 {
font-size: clamp(1.6rem, 3.5vw, 2.2rem) !important;
font-weight: 700 !important;
color: var(--bvo-primary) !important;
line-height: 1.25 !important;
margin-bottom: 1.25rem !important;
}
h2.h2-20 {
font-size: clamp(1.15rem, 2.5vw, 1.35rem) !important;
font-weight: 600 !important;
color: var(--bvo-primary) !important;
margin-top: 2rem !important;
margin-bottom: 0.75rem !important;
}
h3.h3-15 {
font-size: 1rem !important;
font-weight: 600 !important;
color: var(--bvo-text) !important;
margin-top: 1.5rem !important;
margin-bottom: 0.5rem !important;
}
/* Contact page cards */
.card.card-body.shadow {
border-radius: 14px !important;
border: 1px solid var(--bvo-border) !important;
box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important;
transition: box-shadow 0.2s !important;
}
.card.card-body.shadow:hover {
box-shadow: 0 8px 28px rgba(0,0,0,0.10) !important;
}
/* Search page selects */
.form-control-border .form-select {
border: none !important;
font-size: 14px !important;
}
/* Pagination */
.page-link {
border-radius: 8px !important;
font-weight: 500 !important;
color: var(--bvo-primary) !important;
border: 1px solid var(--bvo-border) !important;
}
.page-item.active .page-link {
background: var(--bvo-primary) !important;
border-color: var(--bvo-primary) !important;
color: #fff !important;
}
.page-link:hover {
background: var(--bvo-accent) !important;
border-color: var(--bvo-accent) !important;
color: #fff !important;
}