:root { /* Bootstrap's Reboot styles from these, so overriding them here is enough. */ --bs-body-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --bs-body-font-size: 17px; --bs-body-line-height: 1.75; --bs-body-color: #333; --bs-body-color-rgb: 51, 51, 51; /* Brand palette — the main site's blues, from public/css/flow/default/index.css. */ --ukc-blue: #00bbea; --ukc-blue-rgb: 0, 187, 234; --ukc-blue-light: #00ccff; --ukc-blue-dark: #1fa6c8; --ukc-blue-dark-rgb: 31, 166, 200; --ukc-blue-gradient: linear-gradient(135deg, var(--ukc-blue-light) 0%, var(--ukc-blue) 100%); /* * Point Bootstrap at the brand. The link vars do the real work: Reboot's rule is * `a { color: rgba(var(--bs-link-color-rgb), ...) }`, so links take the brand colour * without us restyling them. --bs-primary only reaches .text-primary / .bg-primary / .border-primary * — .btn-primary is compiled from Sass to literal hex and ignores it, which is fine as * nothing on the blog uses Bootstrap buttons. */ --bs-primary: var(--ukc-blue); --bs-primary-rgb: var(--ukc-blue-rgb); --bs-link-color: var(--ukc-blue); --bs-link-color-rgb: var(--ukc-blue-rgb); --bs-link-hover-color: var(--ukc-blue-dark); --bs-link-hover-color-rgb: var(--ukc-blue-dark-rgb); /* Text */ --ukc-heading: #1a1a1a; --ukc-heading-alt: #3a3a3a; --ukc-text-muted: #555; --ukc-text-meta: #777; /* Surfaces */ --ukc-border: #e9ecef; --ukc-hero-bg: #f8f9fa; --ukc-outcome-bg: #f0fcff; --ukc-compliance-bg: #eef6f9; --ukc-compliance-border: #c0d9df; --ukc-card-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); } .site-header { border-bottom: 1px solid var(--ukc-border); padding: 14px 0; } .btn-header-cta { background: var(--ukc-blue-gradient); color: #fff; border: none; padding: 8px 20px; border-radius: 50px; font-size: 14px; font-weight: 600; text-decoration: none; transition: opacity 0.2s ease; } .btn-header-cta:hover { opacity: 0.9; color: #fff; } .breadcrumb { font-size: 13px; margin-bottom: 0; } .breadcrumb-item a { text-decoration: none; } .breadcrumb-item a:hover { text-decoration: underline; } .article-hero { background-color: var(--ukc-hero-bg); padding: 48px 0 40px; border-bottom: 1px solid var(--ukc-border); } .article-hero h1 { font-size: 2.1rem; font-weight: 800; color: var(--ukc-heading); line-height: 1.25; margin-bottom: 20px; } .article-body { padding: 48px 0 64px; } .article-body h2 { font-size: 1.5rem; font-weight: 700; color: var(--ukc-heading-alt); margin-top: 48px; margin-bottom: 16px; padding-top: 8px; } .article-body h2.step-heading { color: var(--ukc-blue); border-left: 4px solid var(--ukc-blue-light); padding-left: 16px; } .article-body h3 { font-size: 1.15rem; font-weight: 700; color: var(--ukc-heading-alt); margin-top: 32px; margin-bottom: 10px; } .article-body p { margin-bottom: 18px; } .article-body ul, .article-body ol { margin-bottom: 18px; padding-left: 24px; } .article-body li { margin-bottom: 6px; } .article-body strong { font-weight: 600; } .article-img { width: 100%; height: auto; border-radius: 10px; margin: 24px 0; } .step-badge { display: inline-block; background: var(--ukc-blue-gradient); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 12px; border-radius: 50px; margin-bottom: 10px; } .outcome-block { border-left: 3px solid var(--ukc-blue-light); padding: 12px 20px; margin: 18px 0; background: var(--ukc-outcome-bg); border-radius: 0 8px 8px 0; } .outcome-block p { margin-bottom: 0; } .outcome-block strong { display: block; margin-bottom: 4px; } .cta-box { background: var(--ukc-blue-gradient); color: #fff; border-radius: 14px; padding: 36px 40px; margin: 48px 0 40px; } .cta-box p { margin-bottom: 16px; } .cta-box .btn-cta { background: #fff; color: var(--ukc-blue); border: none; padding: 12px 32px; border-radius: 50px; font-size: 16px; font-weight: 700; text-decoration: none; display: inline-block; transition: opacity 0.2s ease; } .cta-box .btn-cta:hover { opacity: 0.92; color: var(--ukc-blue-dark); } /* * The trial disclosure carries the four significant conditions and must be no less prominent * than the offer it qualifies — same block, same background, same font size (UKC-2961 handoff * §9.1, per the ASA April 2023 enforcement notice). Do not shrink this below body copy. */ .cta-box .cta-disclosure { margin-top: 16px; margin-bottom: 0; } .faq-section h2 { margin-top: 0; } .fca-compliance { background: var(--ukc-compliance-bg); border-top: 1px solid var(--ukc-compliance-border); padding: 24px 0; font-size: 13px; color: var(--ukc-text-muted); } .fca-compliance p { margin-bottom: 0; font-style: italic; } /* ---- Listing page (/blog) ---- */ .blog-hero { background-color: var(--ukc-hero-bg); padding: 48px 0 40px; border-bottom: 1px solid var(--ukc-border); } .blog-hero h1 { font-size: 2.1rem; font-weight: 800; color: var(--ukc-heading); line-height: 1.25; margin-bottom: 12px; } .blog-hero p { margin-bottom: 0; color: var(--ukc-text-muted); } .blog-list { padding: 48px 0 64px; } .post-card { position: relative; display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--ukc-border); border-radius: 10px; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } .post-card:hover { transform: translateY(-5px); box-shadow: var(--ukc-card-shadow); } .post-card img { width: 100%; height: 190px; object-fit: cover; } .post-card-body { display: flex; flex-direction: column; flex-grow: 1; padding: 24px; } .post-meta { font-size: 13px; color: var(--ukc-text-meta); margin-bottom: 10px; } .post-meta .post-category { color: var(--ukc-blue); font-weight: 600; } .post-card h2 { font-size: 1.2rem; font-weight: 700; color: var(--ukc-heading); line-height: 1.35; margin-bottom: 12px; } .post-card h2 a { color: inherit; text-decoration: none; } .post-card:hover h2 a { color: var(--ukc-blue); } .post-excerpt { font-size: 15px; line-height: 1.65; color: var(--ukc-text-muted); margin-bottom: 16px; } .post-more { margin-top: auto; font-size: 15px; font-weight: 600; color: var(--ukc-blue); } /* ---- Mobile ---- */ @media (max-width: 767px) { .article-hero, .blog-hero { padding: 24px 0 20px; } .article-hero h1, .blog-hero h1 { font-size: 1.6rem; } .article-body, .blog-list { padding: 28px 0 40px; } .article-body h2 { margin-top: 32px; } .cta-box { padding: 28px 24px; } }