{"id":11,"date":"2026-03-11T17:49:09","date_gmt":"2026-03-11T17:49:09","guid":{"rendered":"https:\/\/docs.fasterthemes.com\/legal-wordpress-theme\/2026\/03\/11\/custom-css\/"},"modified":"2026-03-11T17:49:09","modified_gmt":"2026-03-11T17:49:09","slug":"custom-css","status":"publish","type":"post","link":"https:\/\/docs.fasterthemes.com\/legal-wordpress-theme\/2026\/03\/11\/custom-css\/","title":{"rendered":"Adding Custom CSS"},"content":{"rendered":"

The Customizer covers most things, but eventually you’ll want a small visual change it doesn’t expose: a different shade of oxblood, more space between practice tiles, a tighter line-height in the body. This is where Custom CSS comes in.<\/p>\n

Legal is built on CSS custom properties (variables). Most overrides take one or two lines because you’re targeting a variable, not chasing component classes. Knowing the variables is the unlock.<\/p>\n

Where to put your custom CSS<\/h2>\n

Two places, in order of preference:<\/p>\n

    \n
  1. Customizer \u2192 Additional CSS<\/strong> \u2014 for site-specific tweaks. Updates instantly. Survives theme updates. Recommended for most users.<\/li>\n
  2. A child theme<\/strong> \u2014 for larger overrides or template changes. See Child Themes<\/a>.<\/li>\n<\/ol>\n

    Avoid editing style.css<\/code> directly. Theme updates will overwrite your changes.<\/p>\n

    The CSS variables you’ll override most often<\/h2>\n

    Legal defines its design tokens in :root<\/code> at the top of style.css<\/code>. The most common overrides:<\/p>\n

    :root {\n    \/* Canvas *\/\n    --lg-bg:             #fafaf7;   \/* page background \u2014 bone *\/\n    --lg-bg-card:        #ffffff;   \/* card backgrounds *\/\n    --lg-bg-soft:        #f3efe7;   \/* soft band backgrounds *\/\n    --lg-bg-dark:        #1a1a1a;   \/* footer ink *\/\n\n    \/* Text *\/\n    --lg-text:           #1a1a1a;\n    --lg-text-muted:     #555555;\n    --lg-text-soft:      #737373;\n    --lg-text-faint:     #a0a0a0;\n\n    \/* Accent \u2014 oxblood *\/\n    --lg-accent:         #5C1A1B;\n    --lg-accent-dark:    #3f1011;\n\n    \/* Gold leaf \u2014 secondary accent *\/\n    --lg-gold:           #B8923D;\n\n    \/* Borders *\/\n    --lg-border:         #e8e2d5;\n    --lg-border-strong:  #d6cfc0;\n\n    \/* Type *\/\n    --lg-serif:          'Fraunces', Georgia, serif;\n    --lg-sans:           'Inter', sans-serif;\n    --lg-mono:           'JetBrains Mono', monospace;\n}<\/code><\/pre>\n
    Common overrides<\/h2>\n
    Change the accent color from oxblood to navy<\/h3>\n
    :root {\n    --lg-accent:      #1e3a5f;\n    --lg-accent-dark: #142a48;\n}<\/code><\/pre>\n
    That’s the whole change. Every italic accent, every CTA, every focus ring updates. You don’t need to chase individual selectors.<\/p>\n
    Soften the gold leaf to copper<\/h3>\n
    :root {\n    --lg-gold: #a7763a;\n}<\/code><\/pre>\n
    Switch to a different serif<\/h3>\n
    If you have Cormorant Garamond loaded (or any other serif you’ve added via a font plugin):<\/p>\n
    :root {\n    --lg-serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;\n}<\/code><\/pre>\n
    Tighten or loosen body line-height<\/h3>\n
    body {\n    line-height: 1.65; \/* default is 1.7 *\/\n}<\/code><\/pre>\n
    Add more space between sections<\/h3>\n
    .lg-section {\n    padding: clamp(80px, 10vw, 160px) 0; \/* default is 64-128 *\/\n}<\/code><\/pre>\n
    Hide the folio strip without disabling it<\/h3>\n
    .lg-folio {\n    display: none;\n}<\/code><\/pre>\n
    Change practice tiles from 3-up to 2-up on desktop<\/h3>\n
    .lg-practice-grid {\n    grid-template-columns: repeat(2, 1fr); \/* default is repeat(3, 1fr) *\/\n}<\/code><\/pre>\n
    Round the retainer card more aggressively<\/h3>\n
    .lg-retainer {\n    border-radius: 16px; \/* default is 8px *\/\n}<\/code><\/pre>\n
    Targeting specific elements<\/h2>\n
    If you need to style something specific, use these top-level component classes as your hooks:<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Class<\/th>\nWhat it targets<\/th>\n<\/tr>\n<\/thead>\n
    .lg-hero<\/code><\/td>\nHero section<\/td>\n<\/tr>\n
    .lg-folio<\/code><\/td>\nFolio strip under hero<\/td>\n<\/tr>\n
    .lg-marquee<\/code><\/td>\nCredentials marquee<\/td>\n<\/tr>\n
    .lg-practice-tile<\/code><\/td>\nEach practice tile<\/td>\n<\/tr>\n
    .lg-counsel-card<\/code><\/td>\nEach counsel card<\/td>\n<\/tr>\n
    .lg-ledger<\/code><\/td>\nLedger section<\/td>\n<\/tr>\n
    .lg-testimony<\/code><\/td>\nTestimony pull-quote<\/td>\n<\/tr>\n
    .lg-engage<\/code><\/td>\nEngagement section<\/td>\n<\/tr>\n
    .lg-retainer<\/code><\/td>\nRetainer card<\/td>\n<\/tr>\n
    .lg-footer<\/code><\/td>\nFooter<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    Targeting Legal Pro features<\/h2>\n
    Pro features use the lgpro-<\/code> class prefix. For example:<\/p>\n