/* ========================================================================== Custom overrides — Premier Commercial Lending Limited -------------------------------------------------------------------------- Loaded after style.css and style2.css, so rules here win. Kept in a separate file because style2.css is generated from sass/style.scss and would lose hand edits on the next Sass build. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Page scrolling on desktop -------------------------------------------------------------------------- style.css locked the page at >=992px with `body:not(.scroll){overflow:hidden}` and `max-height:100vh`, so anything past the first viewport — including the footer caveats — was unreachable unless the window was made very small. Let the page scroll normally and let the footer size to its own content. -------------------------------------------------------------------------- */ @media (min-width: 992px) { /* overflow-x goes on , not : setting it on body would force body's overflow-y to compute to `auto` and turn body into its own scroll container. The off-screen `#side-contact-form` (position:fixed, right:-400px) is what needs clipping, and is the viewport scroller anyway. */ html { height: auto; overflow-x: hidden; } body, body:not(.scroll) { overflow: visible !important; max-height: none !important; height: auto !important; } /* Header = 100px logo + 1rem padding top and bottom = 132px. Main fills the remainder of the first viewport; the footer now flows underneath it and is reached by scrolling. */ body:not(.scroll) main { height: calc(100vh - 132px) !important; min-height: 460px; } body footer { display: block !important; height: auto !important; max-height: none !important; padding: 2.5rem 0 !important; } } /* -------------------------------------------------------------------------- 2. Wider content areas -------------------------------------------------------------------------- The text column was capped at 400px by `.content-wrapper`, then lost another 1rem of padding and 40px of `.content-copy` indent — leaving roughly 328px of readable width. Widen the left column and its inner caps. Between 992px and 1199.98px style.css already sets .left/.right to 50/50 via a higher-specificity rule, so only the caps below take effect there. -------------------------------------------------------------------------- */ @media (min-width: 992px) { main section.section-2-column .wrapper .left { width: 46%; } main section.section-2-column .wrapper .right { width: 54%; } main section.section-2-column .wrapper .left .content-wrapper { max-width: 760px; padding: 0 1.5rem; } /* `.mw-600` is only used on the `.content` scroll box of the four two-column pages (about, what-we-offer, privacy, cookie-policy). */ .mw-600 { max-width: 680px !important; } main section.section-2-column .wrapper .left .content-wrapper .content-noscroll .content-copy, main section.section-2-column .wrapper .left .content-wrapper .content .content-copy { padding-left: 24px; padding-right: 10px; } /* Main is taller now that the footer no longer eats 200px of the viewport, so the inner scroll area can use more of it. Replaces the flat 50vh set in style2.css. */ main section.section-2-column .wrapper .left .content-wrapper .content { height: calc(100vh - 330px) !important; min-height: 320px; } } /* Roomier still on large desktops. */ @media (min-width: 1600px) { main section.section-2-column .wrapper .left { width: 48%; } main section.section-2-column .wrapper .right { width: 52%; } } /* -------------------------------------------------------------------------- 3. Footer — regulatory wording -------------------------------------------------------------------------- The footer now carries the full FCA, fee, commission and complaints disclosures, so it needs a readable measure and left-aligned body text. -------------------------------------------------------------------------- */ footer .container { max-width: 1100px; } footer .footer-legal { text-align: left; margin-bottom: 1.25rem; } footer .footer-legal p { font-family: "Source Sans Pro", sans-serif; font-size: 0.75rem; line-height: 1.45; color: #ffffff; margin-bottom: 0.75rem; } footer .footer-legal p:last-child { margin-bottom: 0; } footer .footer-legal .footer-warning { font-weight: 700; text-transform: uppercase; } footer .footer-legal h2 { font-family: "Source Sans Pro", sans-serif; font-size: 0.8rem; font-weight: 700; line-height: 1.45; color: #95803A; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.35rem; } footer .footer-legal a { color: #95803A; text-decoration: underline; } footer .footer-legal a:hover { color: #ffffff; } /* Placeholder values still to be confirmed by the client — see PLACEHOLDERS.md. Highlighted so they are impossible to miss on the page. */ .tbc { background-color: #95803A; color: #000000; font-weight: 700; padding: 0 0.25em; white-space: nowrap; } footer .footer-links { margin-top: 1.25rem; } footer .footer-links a { color: #95803A !important; text-decoration: underline; font-weight: 700; } footer .footer-links a:hover { color: #ffffff !important; } /* -------------------------------------------------------------------------- 4. In-page regulatory notices (debt consolidation, second charges) -------------------------------------------------------------------------- */ .notice-box { border-left: 3px solid #95803A; padding: 0.75rem 0 0.75rem 1rem; margin: 1.25rem 0; } .notice-box p { font-size: 0.875rem !important; line-height: 1.5 !important; margin-bottom: 0; } /* -------------------------------------------------------------------------- 5. Privacy / Cookie policy headings -------------------------------------------------------------------------- Section headings on the policy pages, previously inline-styled and easy to miss against the body copy. -------------------------------------------------------------------------- */ .policy h2 { font-family: "Playfair Display", sans-serif; font-size: 1.125rem !important; font-weight: 700; line-height: 1.4; color: #95803A !important; text-transform: uppercase; letter-spacing: 0.03em; margin-top: 2rem; margin-bottom: 0.5rem; padding-bottom: 0.4rem; border-bottom: 1px solid rgba(149, 128, 58, 0.45); } .policy h3 { font-family: "Playfair Display", sans-serif; font-size: 1rem !important; font-weight: 700; line-height: 1.4; color: #95803A !important; margin-top: 1.25rem; margin-bottom: 0.35rem; } .policy h1 + p { margin-top: 1rem; } .policy .policy-meta { font-size: 0.8rem; opacity: 0.8; margin-bottom: 1.5rem; } /* On tablet and mobile the two-column layout reverses the copy to light text on the dark video panel, so the gold headings need to stay legible. */ @media (max-width: 991.98px) { body main section.section-2-column .wrapper .left .content-wrapper .content .policy h2, body main section.section-2-column .wrapper .left .content-wrapper .content .policy h3 { color: #95803A !important; } }