/* FC Motors Blog — shared stylesheet
* Brand tokens mirror the live SPA (Tailwind config): primary #1C4AA1, accent #6584BF.
* Hand-written vanilla CSS — no framework, no build step.
*/
:root {
--brand-primary: #1C4AA1;
--brand-primary-600: #163B80;
--brand-primary-700: #102C60;
--brand-accent: #6584BF;
--brand-tint: #DBE2F0;
--brand-wash: #F4F7FC;
--ink: #0F172A;
--ink-muted: #475569;
--ink-soft: #64748B;
--line: #E2E8F0;
--line-soft: #EEF2F7;
--white: #FFFFFF;
--success: #15803D;
--amber: #B45309;
--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
--shadow-md: 0 10px 25px -12px rgba(15, 23, 42, 0.18);
--shadow-lg: 0 24px 60px -24px rgba(15, 23, 42, 0.25);
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 20px;
--maxw: 1120px;
--maxw-prose: 720px;
}
*,
*::before,
*::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
margin: 0;
/* Offset for fixed header — matches live SPA's 64px header. */
padding-top: 64px;
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
font-size: 17px;
line-height: 1.65;
color: var(--ink);
background: var(--white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
/* Do NOT set a global anchor color/underline — the live SPA's Tailwind CSS
relies on `color: inherit; text-decoration: inherit` for utility-classed
links in the header/footer. Instead, scope underlines to article content. */
/* Scrollbar restore — the live Tailwind bundle styles the scrollbar at 8px
with a 30%-opacity primary-blue thumb, which vanishes against a white page.
Put a clearly-visible, classic gray scrollbar back on the blog pages. */
::-webkit-scrollbar { width: 14px; height: 14px; margin: 0; }
::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 0; }
::-webkit-scrollbar-thumb {
background: #bbb;
border-radius: 7px;
border: 2px solid #f1f1f1;
}
::-webkit-scrollbar-thumb:hover { background: #888; }
/* Firefox */
html { scrollbar-width: auto; scrollbar-color: #bbb #f1f1f1; }
.skip-link {
position: absolute;
left: -9999px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
.skip-link:focus {
position: fixed;
left: 12px;
top: 12px;
width: auto;
height: auto;
padding: 10px 16px;
background: var(--brand-primary);
color: var(--white);
z-index: 1000;
text-decoration: none;
border-radius: var(--radius-sm);
}
/* --- Header / footer / nav are rendered with the exact Tailwind classes used by
the live SPA, and the live site's compiled CSS bundle is loaded on every blog
page (see in the page ). That guarantees pixel-identical nav
and footer to the rest of fcmotorsllc.com without re-implementing the styles.
The only custom bits below for nav are:
- .nav-dropdown[data-dropdown] JS plumbing (Radix-parity toggle)
- .mobile-drawer panel (the live SPA uses a Radix DropdownMenu we can't
replicate structurally in vanilla HTML, so we render a styled drop-down
that visually matches) --- */
/* Keep list bullets on article content — Tailwind preflight removes them from
ul/ol globally. More specific selector wins. */
.article ul { list-style: disc; }
.article ol { list-style: decimal; }
/* Preserve article link underlines — preflight resets text-decoration on . */
.article a { text-decoration: underline; text-underline-offset: 3px; }
.article a:hover { color: var(--brand-primary-700); }
/* Resources dropdown — hidden by default, revealed by blog.js. */
.nav-dropdown { position: relative; }
.nav-dropdown__menu { display: none; }
.nav-dropdown__menu.is-open { display: block; }
.nav-dropdown__chev { transition: transform 200ms ease; }
[aria-expanded='true'] .nav-dropdown__chev { transform: rotate(180deg); }
/* Mobile drawer — vanilla replacement for the Radix DropdownMenu used on the
live SPA's mobile nav. Styled to match its visual panel. */
.mobile-drawer {
position: fixed;
top: 4rem;
left: auto;
right: clamp(25px, 4.2vw, 84px);
min-width: 16rem;
background: #fff;
border: 1px solid rgb(226 232 240);
border-radius: 0.5rem;
box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
padding: 0.25rem;
z-index: 49;
display: none;
max-height: calc(100vh - 5rem);
overflow-y: auto;
}
.mobile-drawer.is-open { display: block; }
.mobile-drawer a {
display: block;
padding: 0.75rem 1rem;
color: rgb(51 65 85);
text-decoration: none;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.25rem;
border-radius: 0.375rem;
}
.mobile-drawer a:hover { background: rgb(241 245 249 / 0.7); color: rgb(51 65 85); }
.mobile-drawer a[aria-current='page'] { background: rgb(237 241 247); color: rgb(28 74 161); font-weight: 600; }
.mobile-drawer__heading {
padding: 0.75rem 1rem 0.25rem;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgb(100 116 139);
}
.mobile-drawer__cta {
margin: 0.5rem 0.25rem 0.25rem;
background: rgb(28 74 161) !important;
color: #fff !important;
text-align: center;
font-weight: 600 !important;
}
.mobile-drawer__cta:hover { background: rgb(19 50 109) !important; color: #fff !important; }
/* --- Hero --- */
.hero {
background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-700) 100%);
color: var(--white);
padding: 72px 24px 96px;
position: relative;
overflow: hidden;
}
.hero::after {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.08), transparent 45%),
radial-gradient(circle at 80% 80%, rgba(255,255,255,0.06), transparent 40%);
pointer-events: none;
}
/* Hero variant with a photographic backdrop + subtle vertical parallax.
The image + overlay live on a ::before pseudo-element so we can translate it
on a GPU-composited layer (no repaints). The parallax offset is supplied via
the --fc-parallax custom property, which blog.js writes on scroll. */
.hero--image {
background-color: var(--brand-primary-700); /* solid fallback */
}
/* Disable the base ::after starry overlay when an image backdrop is in use. */
.hero--image::after { display: none; }
.hero--image::before {
content: '';
position: absolute;
/* Overshoot the hero box so there's slack for the transform to translate into. */
inset: -40% 0;
background-image:
/* Darker overlay — higher alpha on the left where the headline sits, still
letting the right edge of the photo breathe. */
linear-gradient(110deg,
rgba(7, 18, 42, 0.92) 0%,
rgba(14, 38, 88, 0.84) 40%,
rgba(22, 59, 128, 0.6) 75%,
rgba(28, 74, 161, 0.38) 100%),
url('/blog/assets/images/hero-blog.jpg?v=3');
background-size: cover, cover;
background-position: center center, center right;
background-repeat: no-repeat, no-repeat;
transform: translate3d(0, var(--fc-parallax, 0px), 0);
will-change: transform;
z-index: 0;
pointer-events: none;
}
/* .hero__inner has z-index:1 already — sits above the parallax layer. */
@media (max-width: 720px) {
.hero--image::before {
/* Deeper, more uniform overlay on phones — text wraps more and busy photo
fragments behind narrow lines are harder to read. */
background-image:
linear-gradient(180deg,
rgba(7, 18, 42, 0.9) 0%,
rgba(14, 38, 88, 0.82) 55%,
rgba(22, 59, 128, 0.72) 100%),
url('/blog/assets/images/hero-blog.jpg?v=3');
background-position: center center, center center;
}
}
/* Respect user motion preferences — no transform for reduced-motion users. */
@media (prefers-reduced-motion: reduce) {
.hero--image::before { transform: none !important; will-change: auto; }
}
.hero__inner {
max-width: var(--maxw);
margin: 0 auto;
position: relative;
z-index: 1;
}
.hero__eyebrow {
display: inline-block;
padding: 6px 14px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.15);
color: var(--white);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 20px;
}
.hero__title {
font-size: clamp(32px, 5vw, 52px);
line-height: 1.1;
font-weight: 700;
letter-spacing: -0.02em;
margin: 0 0 16px;
max-width: 820px;
}
.hero__lede {
font-size: clamp(17px, 2vw, 20px);
line-height: 1.55;
margin: 0 0 28px;
max-width: 680px;
color: rgba(255, 255, 255, 0.88);
}
.hero__meta {
display: flex;
flex-wrap: wrap;
gap: 20px;
align-items: center;
color: rgba(255, 255, 255, 0.78);
font-size: 14px;
}
.hero__meta span + span::before {
content: '•';
margin-right: 20px;
color: rgba(255, 255, 255, 0.4);
}
/* --- Breadcrumb --- */
.breadcrumb {
max-width: var(--maxw);
margin: 0 auto;
padding: 18px 24px;
font-size: 14px;
color: var(--ink-soft);
}
.breadcrumb ol {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.breadcrumb li + li::before {
content: '›';
margin-right: 8px;
color: var(--ink-soft);
}
.breadcrumb a { color: var(--ink-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand-primary); }
.breadcrumb [aria-current='page'] { color: var(--ink); font-weight: 500; }
/* --- Index page cards --- */
.section {
max-width: var(--maxw);
margin: 0 auto;
padding: 56px 24px;
}
.section-title {
font-size: 28px;
line-height: 1.2;
letter-spacing: -0.015em;
font-weight: 700;
margin: 0 0 8px;
}
.section-sub {
color: var(--ink-muted);
max-width: 640px;
margin: 0 0 32px;
}
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 28px;
}
.card {
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
border-color: var(--brand-accent);
}
.card__media {
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--brand-tint);
}
.card__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.card__body {
padding: 24px 24px 28px;
display: flex;
flex-direction: column;
gap: 14px;
flex: 1;
}
.card__tag {
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 700;
color: var(--brand-primary);
}
.card__title {
font-size: 22px;
line-height: 1.25;
letter-spacing: -0.015em;
font-weight: 700;
margin: 0;
color: var(--ink);
}
.card__title a { color: inherit; text-decoration: none; }
.card__title a:hover { color: var(--brand-primary); }
.card__excerpt {
color: var(--ink-muted);
margin: 0;
font-size: 15.5px;
line-height: 1.6;
}
.card__footer {
display: flex;
align-items: center;
justify-content: space-between;
color: var(--ink-soft);
font-size: 13.5px;
margin-top: auto;
padding-top: 14px;
border-top: 1px solid var(--line-soft);
}
.card__link {
color: var(--brand-primary);
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 4px;
}
.card__link:hover { gap: 8px; transition: gap 150ms ease; }
/* --- Article layout --- */
.article {
max-width: var(--maxw-prose);
margin: 0 auto;
padding: 48px 24px 80px;
}
.article h2 {
font-size: 28px;
line-height: 1.25;
letter-spacing: -0.015em;
font-weight: 700;
margin: 48px 0 16px;
color: var(--ink);
}
.article h3 {
font-size: 20px;
line-height: 1.3;
font-weight: 700;
margin: 32px 0 12px;
color: var(--ink);
}
.article p { margin: 0 0 18px; }
.article p:last-child { margin-bottom: 0; }
.article ul,
.article ol {
margin: 0 0 22px;
padding-left: 24px;
}
.article li { margin-bottom: 8px; }
.article li::marker { color: var(--brand-primary); }
.article strong { color: var(--ink); font-weight: 600; }
.article blockquote {
border-left: 4px solid var(--brand-primary);
background: var(--brand-wash);
margin: 32px 0;
padding: 20px 24px;
border-radius: 0 var(--radius-md) var(--radius-md) 0;
font-size: 17px;
color: var(--ink);
}
.article blockquote p:last-child { margin: 0; }
.callout {
background: linear-gradient(180deg, var(--brand-wash) 0%, var(--white) 100%);
border: 1px solid var(--brand-tint);
border-radius: var(--radius-md);
padding: 24px 28px;
margin: 32px 0;
}
.callout__title {
font-weight: 700;
color: var(--brand-primary);
margin: 0 0 8px;
font-size: 16px;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.callout p { margin: 0; }
.figure {
margin: 32px 0;
}
.figure img {
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
}
.figure figcaption {
margin-top: 10px;
font-size: 13px;
color: var(--ink-soft);
text-align: center;
line-height: 1.5;
}
.figure figcaption a { color: inherit; }
/* Comparison tables */
.article table {
width: 100%;
border-collapse: collapse;
margin: 28px 0;
font-size: 15px;
}
.article th,
.article td {
padding: 12px 14px;
text-align: left;
border-bottom: 1px solid var(--line);
}
.article th {
background: var(--brand-wash);
font-weight: 600;
color: var(--ink);
font-size: 14px;
}
.article tbody tr:hover { background: var(--line-soft); }
/* --- FAQ accordion (styled but also works as plain list) --- */
.faq {
border-top: 1px solid var(--line);
margin-top: 48px;
}
.faq__item {
border-bottom: 1px solid var(--line);
}
.faq__item summary {
padding: 20px 0;
font-weight: 600;
color: var(--ink);
cursor: pointer;
list-style: none;
position: relative;
padding-right: 40px;
font-size: 17px;
line-height: 1.4;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
content: '+';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 28px;
height: 28px;
display: grid;
place-items: center;
border-radius: 999px;
background: var(--brand-tint);
color: var(--brand-primary);
font-weight: 700;
font-size: 18px;
transition: transform 200ms ease;
}
.faq__item[open] summary::after {
content: '−';
transform: translateY(-50%) rotate(180deg);
}
.faq__item[open] summary { color: var(--brand-primary); }
.faq__answer {
padding: 0 0 22px;
color: var(--ink-muted);
}
.faq__answer p:last-child { margin: 0; }
/* --- CTA band --- */
.cta-band {
background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-700) 100%);
color: var(--white);
padding: 56px 24px;
margin: 64px 0 0;
border-radius: var(--radius-lg);
text-align: center;
}
.cta-band,
.cta-band * { color: #fff; }
.cta-band__title {
color: #fff !important; /* lock against the live Tailwind body-color cascade */
font-size: clamp(24px, 3vw, 30px);
font-weight: 700;
letter-spacing: -0.015em;
margin: 0 0 12px;
}
.cta-band__lede { color: rgba(255, 255, 255, 0.85) !important; }
.cta-band__lede {
color: rgba(255, 255, 255, 0.85);
max-width: 520px;
margin: 0 auto 24px;
}
.cta-band__buttons {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
}
.btn-primary,
.btn-secondary {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 26px;
border-radius: 999px;
font-weight: 600;
font-size: 15px;
text-decoration: none;
transition: transform 150ms ease, background 150ms ease;
}
.btn-primary {
background: var(--white);
color: var(--brand-primary);
}
.btn-primary:hover { background: var(--brand-tint); color: var(--brand-primary-700); }
.btn-secondary {
background: rgba(255, 255, 255, 0.12);
color: var(--white);
border: 1px solid rgba(255, 255, 255, 0.28);
}
.btn-secondary:hover { background: rgba(255, 255, 255, 0.2); color: var(--white); }
/* --- Related posts --- */
.related {
margin-top: 64px;
padding-top: 40px;
border-top: 1px solid var(--line);
}
.related h2 {
margin: 0 0 24px !important;
font-size: 22px !important;
}
.related__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
}
.related__item {
padding: 20px;
border: 1px solid var(--line);
border-radius: var(--radius-md);
text-decoration: none;
color: var(--ink);
transition: border-color 150ms ease, transform 150ms ease;
display: block;
}
.related__item:hover {
border-color: var(--brand-accent);
transform: translateY(-2px);
color: var(--ink);
}
.related__tag {
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--brand-primary);
font-weight: 700;
margin-bottom: 8px;
}
.related__title {
font-size: 17px;
font-weight: 600;
line-height: 1.35;
letter-spacing: -0.01em;
}
/* Footer styling comes entirely from the live CSS bundle (Tailwind utilities).
We only keep responsive layout tweaks for blog-specific content below. */
@media (max-width: 720px) {
.section { padding: 40px 20px; }
.hero { padding: 56px 20px 72px; }
.article { padding: 32px 20px 56px; }
.cta-band { padding: 40px 20px; border-radius: var(--radius-md); }
}
/* Focus styles for keyboard users */
:focus-visible {
outline: 3px solid var(--brand-accent);
outline-offset: 3px;
border-radius: 4px;
}
/* Print */
@media print {
.site-header, .site-footer, .cta-band, .related { display: none; }
.article { max-width: none; }
a { color: var(--ink); text-decoration: underline; }
}