/* ============================================================ IRONCLAD FIRE PROTECTION — UPDATED STYLESHEET Changes: Contemporary fonts · Logo colours · UK English · No carousel arrows · Consistent font sizing ============================================================ */ /* ── GOOGLE FONTS IMPORT (handled in via link tag) ── */ /* ── ROOT COLOUR TOKENS (from logo palette) ───────────────── Logo colours: Amber-gold : #C8741A (flame / shield accent) Dark charcoal: #1C1C1C (shield body) Mid grey : #6B6B6B Light grey : #F4F4F4 White : #FFFFFF ─────────────────────────────────────────────────────────── */ :root { --ic-gold: #C8741A; --ic-gold-light: #D98B35; --ic-gold-dark: #A05B10; --ic-charcoal: #1C1C1C; --ic-charcoal-2: #2A2A2A; --ic-mid-grey: #6B6B6B; --ic-light-grey: #F4F4F4; --ic-border-grey: #E0E0E0; --ic-white: #FFFFFF; --ic-text: #2D2D2D; --ic-text-light: #5A5A5A; } /* ── RESET / BASE ─────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } body { font-family: 'DM Sans', 'Inter', sans-serif; font-size: 1rem; line-height: 1.7; color: var(--ic-text); background-color: var(--ic-white); -webkit-font-smoothing: antialiased; } /* ── TYPOGRAPHY — consistent scale ───────────────────────── */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: 'DM Serif Display', 'Georgia', serif; font-weight: 700; color: var(--ic-charcoal); line-height: 1.2; letter-spacing: -0.01em; } /* Override Bootstrap display utilities for consistent sizing */ .display-1 { font-size: clamp(2rem, 4.5vw, 3rem) !important; } .display-2 { font-size: clamp(1.8rem, 4vw, 2.6rem) !important; } .display-3 { font-size: clamp(1.6rem, 3.5vw, 2.2rem) !important; } .display-4 { font-size: clamp(1.4rem, 3vw, 1.9rem) !important; } .display-5 { font-size: clamp(1.2rem, 2.5vw, 1.6rem) !important; } .display-6 { font-size: clamp(1.1rem, 2vw, 1.35rem)!important; } .fs-5 { font-size: 1rem !important; line-height: 1.75; } .fs-4 { font-size: 1.05rem!important; } p { font-size: 0.975rem; line-height: 1.78; color: var(--ic-text-light); } a { transition: color 0.2s ease, opacity 0.2s ease; } /* ── TOPBAR ───────────────────────────────────────────────── */ .topbar { background: var(--ic-charcoal); border-bottom: 2px solid var(--ic-gold); } .topbar a, .topbar .text-muted { color: #CACACA !important; font-size: 0.82rem; font-family: 'DM Sans', sans-serif; font-weight: 400; text-decoration: none; transition: color 0.2s; } .topbar a:hover { color: var(--ic-gold) !important; } .topbar .text-secondary, .topbar i.text-secondary { color: var(--ic-gold) !important; } /* ── NAVBAR ───────────────────────────────────────────────── */ .navbar { background: var(--ic-white) !important; box-shadow: 0 2px 12px rgba(0,0,0,0.09); padding-top: 0.6rem !important; padding-bottom: 0.6rem !important; } /* Logo — plain, no oval border, blends with white header */ .navbar-brand img { width: 100px !important; height: auto !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; margin-right: 8px; transition: opacity 0.25s ease; } .navbar-brand img:hover { opacity: 0.85; } /* Brand text beside logo */ .navbar-brand-text { display: flex; flex-direction: column; line-height: 1.15; } .navbar-brand-text .brand-title { font-family: 'DM Serif Display', serif; font-size: 1.05rem; font-weight: 700; color: var(--ic-charcoal); letter-spacing: 0.06em; text-transform: uppercase; } .navbar-brand-text .brand-sub { font-family: 'DM Sans', sans-serif; font-size: 0.68rem; font-weight: 500; color: var(--ic-gold); letter-spacing: 0.12em; text-transform: uppercase; } .nav-link, .navbar-nav .nav-link { font-family: 'DM Sans', sans-serif !important; font-size: 0.875rem !important; font-weight: 600 !important; color: var(--ic-text) !important; letter-spacing: 0.03em; padding: 0.55rem 1rem !important; position: relative; transition: color 0.2s; } .nav-link::after { content: ''; position: absolute; bottom: 2px; left: 1rem; right: 1rem; height: 2px; background: var(--ic-gold); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease; } .nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); } .nav-link:hover, .nav-link.active { color: var(--ic-gold) !important; } /* Dropdown */ .dropdown-menu { border: none; border-top: 2px solid var(--ic-gold); border-radius: 0 0 6px 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.1); padding: 0.4rem 0; } .dropdown-item { font-family: 'DM Sans', sans-serif; font-size: 0.85rem; font-weight: 500; color: var(--ic-text); padding: 0.55rem 1.2rem; transition: background 0.15s, color 0.15s; } .dropdown-item:hover { background: var(--ic-light-grey); color: var(--ic-gold); } /* Hamburger toggler */ .navbar-toggler { border: 1px solid var(--ic-border-grey); border-radius: 4px; padding: 0.35rem 0.6rem; } .navbar-toggler .fa-bars { color: var(--ic-charcoal); } /* ── CAROUSEL — hide arrows & indicators ─────────────────── */ .carousel-control-prev, .carousel-control-next { display: none !important; } .carousel-indicators { display: none !important; } /* Carousel caption typography */ .carousel-caption { padding-bottom: 2.5rem; } .carousel-caption p.text-uppercase { font-family: 'DM Sans', sans-serif; font-size: 0.78rem !important; font-weight: 700; letter-spacing: 0.18em; color: var(--ic-gold) !important; text-shadow: none; } .carousel-caption h1 { font-family: 'DM Serif Display', serif; font-size: clamp(1.8rem, 4vw, 3rem) !important; font-weight: 700; line-height: 1.18; text-shadow: 0 2px 8px rgba(0,0,0,0.55); } .carousel-caption p.fs-5 { font-family: 'DM Sans', sans-serif; font-size: 0.97rem !important; font-weight: 400; max-width: 680px; margin: 0 auto 1.5rem; text-shadow: 0 1px 4px rgba(0,0,0,0.4); } /* ── BUTTONS ─────────────────────────────────────────────── */ .btn { font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 0.875rem; letter-spacing: 0.04em; border-radius: 4px; transition: all 0.22s ease; } /* Primary — gold */ .btn-primary, .btn-secondary { background: var(--ic-gold) !important; border-color: var(--ic-gold) !important; color: var(--ic-white) !important; } .btn-primary:hover, .btn-secondary:hover { background: var(--ic-gold-dark) !important; border-color: var(--ic-gold-dark) !important; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(200,116,26,0.35); } /* Back-to-top */ .back-to-top { background: var(--ic-gold) !important; border-color: var(--ic-gold) !important; color: var(--ic-white) !important; width: 40px; height: 40px; border-radius: 4px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,0.2); } .back-to-top:hover { background: var(--ic-gold-dark) !important; } /* ── BREADCRUMB / PAGE HEADER ────────────────────────────── */ .bg-breadcrumb { background: linear-gradient(135deg, var(--ic-charcoal) 0%, var(--ic-charcoal-2) 60%, #333 100%); border-bottom: 3px solid var(--ic-gold); padding: 3.5rem 0 2.5rem; } .bg-breadcrumb h4 { font-family: 'DM Serif Display', serif; font-size: clamp(1.5rem, 3.5vw, 2.1rem) !important; font-weight: 700; color: var(--ic-white) !important; letter-spacing: -0.01em; } .breadcrumb-item a { color: var(--ic-gold); text-decoration: none; font-size: 0.83rem; font-weight: 500; } .breadcrumb-item.active { color: #BDBDBD; font-size: 0.83rem; } .breadcrumb-item + .breadcrumb-item::before { color: #888; } /* ── ABOUT SECTION ───────────────────────────────────────── */ .about { background: var(--ic-white); } .about-item-content p.text-uppercase { font-family: 'DM Sans', sans-serif; font-size: 0.75rem !important; font-weight: 700; letter-spacing: 0.2em; color: var(--ic-gold) !important; } .about-item-image { position: relative; gap: 1rem; } .about-item-image img { border-radius: 4px; object-fit: cover; } .about-item-image-content { position: absolute; bottom: -1.5rem; left: 50%; transform: translateX(-50%); width: 50%; border: 4px solid var(--ic-white); border-radius: 4px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); } .about-item-content .fa-check { color: var(--ic-gold) !important; } .about-item-content p.text-dark { color: var(--ic-text) !important; font-size: 0.9rem; } /* Worker thumbnail in about */ .about-item-content-img img { border-radius: 4px; object-fit: cover; } .about-item-content .text-secondary { color: var(--ic-gold) !important; } /* ── FEATURES / WHY CHOOSE US ────────────────────────────── */ .feature { background: var(--ic-light-grey); } .feature-item { background: var(--ic-white); border: 1px solid var(--ic-border-grey) !important; border-radius: 6px; padding: 2.5rem 2rem !important; transition: box-shadow 0.25s ease, transform 0.25s ease; height: 100%; } .feature-item:hover { box-shadow: 0 12px 32px rgba(0,0,0,0.1); transform: translateY(-4px); border-color: var(--ic-gold) !important; } .feature-img { background: var(--ic-charcoal) !important; border-radius: 50%; width: 80px !important; height: 80px !important; display: inline-flex !important; align-items: center; justify-content: center; padding: 0 !important; margin-bottom: 1rem; } .feature-img i { color: var(--ic-gold) !important; font-size: 1.8rem !important; } .feature-item a, .feature-item .h4 { font-family: 'DM Serif Display', serif; font-size: 1.05rem !important; font-weight: 700; color: var(--ic-charcoal) !important; text-decoration: none; display: block; margin: 1rem 0 0.6rem; } .feature-item a:hover { color: var(--ic-gold) !important; } .feature-item p { font-size: 0.88rem; color: var(--ic-text-light); margin: 0; } /* ── SERVICE SECTOR CARDS ────────────────────────────────── */ .service { background: var(--ic-charcoal); } .service-item { position: relative; overflow: hidden; border-radius: 6px; background: var(--ic-charcoal-2); } .service-img { overflow: hidden; } .service-img img { transition: transform 0.45s ease; object-fit: cover; width: 100%; height: 320px !important; } .service-item:hover .service-img img { transform: scale(1.05); } .service-content { background: rgba(28,28,28,0.94); padding: 1.5rem 1.25rem !important; } .service-content a, .service-content .fs-4 { font-family: 'DM Serif Display', serif; font-size: 1.05rem !important; font-weight: 700; color: var(--ic-white) !important; text-decoration: none; } .service-content p { font-size: 0.85rem; color: rgba(255,255,255,0.72); line-height: 1.65; } .service-content .btn-xl-square { display: none; } /* hide icon squares in content */ /* Service icon squares */ .btn-xl-square { display: none !important; } /* hide all icon squares; clean card look */ /* Service title bar at bottom */ .service-title { display: flex; align-items: center; justify-content: space-between; background: var(--ic-gold); padding: 0.85rem 1.25rem; } .service-title h4 { font-family: 'DM Sans', sans-serif; font-size: 0.9rem !important; font-weight: 700; color: var(--ic-white) !important; margin: 0; letter-spacing: 0.03em; text-transform: uppercase; } /* ── FIRE-STOPPING SERVICE PAGE ──────────────────────────── */ /* Icon rows */ .service.bg-light { background: var(--ic-light-grey) !important; } .service.bg-light .text-primary, .feature .text-primary, .col-lg-4 .text-primary { color: var(--ic-gold) !important; } .col-lg-4 h5 { font-family: 'DM Serif Display', serif; font-size: 1rem; font-weight: 700; color: var(--ic-charcoal); margin: 0.6rem 0 0.3rem; } .col-lg-4 p { font-size: 0.87rem; color: var(--ic-text-light); } /* ── CONTACT PAGE ────────────────────────────────────────── */ .contact { background: var(--ic-light-grey); } .contact .text-uppercase.text-secondary { font-family: 'DM Sans', sans-serif; font-size: 0.75rem !important; font-weight: 700; letter-spacing: 0.2em; color: var(--ic-gold) !important; } .contact h2 { font-family: 'DM Serif Display', serif; font-size: clamp(1.4rem, 3vw, 1.9rem) !important; } .contact h4 { font-family: 'DM Sans', sans-serif; font-size: 0.95rem !important; font-weight: 400; color: var(--ic-text-light); line-height: 1.65; } /* Form */ .form-floating label { font-size: 0.85rem; color: var(--ic-mid-grey); } .form-control { border-radius: 4px !important; font-size: 0.9rem; font-family: 'DM Sans', sans-serif; color: var(--ic-text); } .form-control:focus { border-color: var(--ic-gold) !important; box-shadow: 0 0 0 3px rgba(200,116,26,0.15) !important; } .border.border-secondary { border-color: var(--ic-border-grey) !important; } /* Map iframe */ .contact-map iframe { border-radius: 6px; border: 1px solid var(--ic-border-grey); } /* ── FOOTER ──────────────────────────────────────────────── */ .footer { background: var(--ic-charcoal) !important; border-top: 3px solid var(--ic-gold); } .footer h4 { font-family: 'DM Serif Display', serif; font-size: 1rem !important; font-weight: 700; color: var(--ic-white) !important; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 1.25rem !important; } .footer-item a { font-family: 'DM Sans', sans-serif; font-size: 0.85rem; color: #ACACAC !important; text-decoration: none; padding: 0.2rem 0; transition: color 0.2s; } .footer-item a:hover { color: var(--ic-gold) !important; } .footer-item i.fa-angle-right { color: var(--ic-gold); font-size: 0.75rem; } .footer-item i.text-secondary, .footer-item .fas { color: var(--ic-gold) !important; } /* ── COPYRIGHT BAR ───────────────────────────────────────── */ .copyright { background: #111111 !important; border-top: 1px solid rgba(200,116,26,0.2); } .copyright .text-body, .copyright span { font-size: 0.8rem; color: #888 !important; } .copyright a { color: var(--ic-gold) !important; text-decoration: none; } .copyright a:hover { color: var(--ic-gold-light) !important; } .copyright .text-white { color: var(--ic-gold) !important; } /* ── SPINNER ─────────────────────────────────────────────── */ #spinner .spinner-border { color: var(--ic-gold) !important; border-color: var(--ic-gold); border-right-color: transparent; } /* ── ANIMATIONS ──────────────────────────────────────────── */ .wow { visibility: hidden; } /* ── SECTION HEADING ACCENT ──────────────────────────────── */ .section-label { display: inline-block; font-family: 'DM Sans', sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ic-gold); margin-bottom: 0.5rem; } /* ── VIDEO (about page) ──────────────────────────────────── */ video { border-radius: 6px; display: block; } /* ── RESPONSIVE TWEAKS ───────────────────────────────────── */ @media (max-width: 991.98px) { .navbar-nav { padding: 0.75rem 0; gap: 0; } .nav-link::after { display: none; } .nav-link { padding: 0.5rem 0 !important; border-bottom: 1px solid var(--ic-border-grey); } .dropdown-menu { border-top: none; border-radius: 0; box-shadow: none; border-left: 2px solid var(--ic-gold); margin-left: 0.75rem; } } @media (max-width: 767.98px) { .about-item-image-content { display: none; } .service-img img { height: 220px !important; } .feature-item { padding: 1.75rem 1.25rem !important; } } @media (max-width: 575.98px) { .bg-breadcrumb { padding: 2.5rem 0 1.75rem; } .carousel-caption { padding: 0 1rem 1.5rem; } }