/* ============================================================
THE CERAMIC GUY — Global Visual Polish
Paste into: Elementor → Site Settings (gear icon, bottom left)
→ Custom CSS (Elementor Pro)
OR: WP Admin → Appearance → Customize → Additional CSS
(works even without Elementor Pro)
This styles things that already exist on your site (buttons,
headings, images, the stats counters, your contact form).
If a rule doesn't visibly change anything, your theme is
likely using a different class name — right-click the element
in your browser → Inspect, and swap the class in that rule.
============================================================ */
/* 1. Fonts — swap for a in your theme's for best
performance, but @import works fine for getting started. */
:root{
--tcg-bg:#0B0C0E;
--tcg-surface:#15171B;
--tcg-border:#262931;
--tcg-text:#F2F3F5;
--tcg-muted:#9BA1AC;
--tcg-accent:#2EC4F1; /* change this one variable to match your logo if it differs */
--tcg-gold:#C9A227;
--tcg-radius:10px;
}
/* 1b. Sitewide black background + white text
This targets the page canvas plus the most common Elementor and
theme wrapper classes, so essentially every section on the site
goes black. The hero section is excluded from this via a separate,
more specific rule below (1c) — that's the only exception. */
html, body{
background-color:var(--tcg-bg) !important;
color:var(--tcg-text) !important;
}
.elementor, .elementor-section, .elementor-container,
.elementor-widget-wrap, .e-con, .e-con-inner,
#page, #content, .site, .site-content,
.ast-separate-container, .ast-container{
background-color:var(--tcg-bg) !important;
}
h1, h2, h3, h4, h5, h6, p, li, span, label,
.elementor-heading-title, .elementor-widget-text-editor,
.elementor-icon-list-text{
color:var(--tcg-text) !important;
}
/* 1c. Hero section exception — removes the black box sitting on top
of the hero photo, WITHOUT affecting any other section.
Setup required (one-time, in Elementor):
1. Click the hero SECTION itself (the outer area with the photo,
not just the text/button) to select it.
2. Go to the Advanced tab → CSS ID → type: tcg-hero
3. Click Update/Publish.
Once that ID is set, this rule takes over and makes that section's
own containers fully transparent again, letting the photo show
through with no black panel. An ID selector is more specific than
the class rules above, so it wins even though both use !important. */
#tcg-hero,
#tcg-hero .elementor-container,
#tcg-hero .elementor-widget-wrap,
#tcg-hero .elementor-column,
#tcg-hero .e-con,
#tcg-hero .e-con-inner{
background-color:transparent !important;
}
/* Header & footer, if your theme uses these common class names */
.elementor-location-header, header, #masthead, .site-header,
.elementor-location-footer, footer, #colophon, .site-footer{
background-color:var(--tcg-bg) !important;
}
/* 2. Typography */
body, p, .elementor-widget-text-editor, .elementor-widget-theme-post-content{
font-family:'Inter', sans-serif;
}
h1, h2, h3, h4, .elementor-heading-title{
font-family:'Big Shoulders Display', sans-serif;
font-weight:800;
letter-spacing:.01em;
line-height:1.08;
}
/* use an H6 heading widget for small "eyebrow" labels above section titles */
h6.elementor-heading-title{
font-family:'IBM Plex Mono', monospace;
font-weight:500;
text-transform:uppercase;
letter-spacing:.14em;
font-size:13px;
color:var(--tcg-accent);
}
a{ color:var(--tcg-accent); }
a:hover{ color:var(--tcg-gold); }
/* 3. Buttons — gloss-sweep hover, evokes light moving across a coated panel */
.elementor-button, .elementor-button-link{
position:relative;
overflow:hidden;
border-radius:6px !important;
background:var(--tcg-accent) !important;
border:1px solid var(--tcg-accent) !important;
color:#06121A !important;
font-family:'IBM Plex Mono', monospace;
font-weight:500;
letter-spacing:.05em;
text-transform:uppercase;
font-size:13px;
transition:transform .25s ease, box-shadow .25s ease;
}
.elementor-button:hover, .elementor-button-link:hover{
transform:translateY(-2px);
box-shadow:0 10px 28px rgba(46,196,241,.28);
color:#06121A !important;
}
.elementor-button::after, .elementor-button-link::after{
content:'';
position:absolute; top:0; left:-60%;
width:40%; height:100%;
background:linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
transform:skewX(-20deg);
transition:left .6s ease;
}
.elementor-button:hover::after, .elementor-button-link:hover::after{ left:130%; }
@media (prefers-reduced-motion: reduce){
.elementor-button::after{ transition:none; }
.elementor-button:hover{ transform:none; }
}
/* 4. Images — soft lift, no harsh corners */
.elementor-widget-image img, .elementor-widget-theme-post-featured-image img{
border-radius:var(--tcg-radius);
box-shadow:0 24px 48px -24px rgba(0,0,0,.6);
}
/* 5. The "best ceramic coating near me" quote line */
blockquote, .elementor-widget-text-editor blockquote{
border-left:3px solid var(--tcg-accent);
padding-left:20px;
font-style:italic;
color:var(--tcg-muted);
}
/* 6. Your existing stats counters (Coatings Completed / Happy Customers
/ Awards / Star Rated) */
.elementor-counter-number-wrapper{
font-family:'Big Shoulders Display', sans-serif;
font-weight:800;
color:var(--tcg-accent);
}
.elementor-counter-title{
font-family:'IBM Plex Mono', monospace;
text-transform:uppercase;
letter-spacing:.1em;
font-size:12px;
color:var(--tcg-muted);
}
/* 7. Quote / Contact forms (Contact Form 7 or Elementor Forms) */
.elementor-field-group input,
.elementor-field-group textarea,
.wpcf7-form input,
.wpcf7-form textarea{
background:var(--tcg-surface) !important;
border:1px solid var(--tcg-border) !important;
color:var(--tcg-text) !important;
border-radius:6px !important;
padding:12px 14px !important;
}
.elementor-field-group input:focus,
.wpcf7-form input:focus{
border-color:var(--tcg-accent) !important;
outline:none;
}
/* ============================================================
THE CERAMIC GUY — Sitewide Font Unification
Paste BELOW the code already in your Additional CSS box
(Appearance → Customize → Additional CSS). This relies on the
fonts already imported and the --tcg- variables already
defined in 1-tcg-global-polish.css, so that file needs to stay
in place above this one.
============================================================ */
/* 1. Headings — every heading sitewide, not just the new sections */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.entry-title, .page-title, .widget-title,
.comment-reply-title{
font-family:'Big Shoulders Display', sans-serif !important;
font-weight:800 !important;
letter-spacing:.01em;
}
/* 2. Body copy — paragraphs, lists, links, table cells, everywhere */
body, p, li, span, a, td, th, label, blockquote,
.entry-content, .widget, .textwidget,
.elementor-widget-text-editor, .elementor-widget-theme-post-content,
.elementor-icon-list-text{
font-family:'Inter', sans-serif !important;
}
/* 3. Navigation menu (header + footer menus) */
.elementor-nav-menu, .elementor-nav-menu a,
nav a, .main-navigation a, .menu-item a,
#menu li a{
font-family:'Inter', sans-serif !important;
font-weight:500;
}
/* 4. Buttons & form controls sitewide — match the glossy CTA buttons */
button, .button, input[type="submit"], input[type="button"]{
font-family:'IBM Plex Mono', monospace !important;
letter-spacing:.04em;
}
input, textarea, select{
font-family:'Inter', sans-serif !important;
}
/* 5. Blog post meta (date / author / category line under post titles) */
.entry-meta, .posted-on, .byline, .cat-links, .post-meta{
font-family:'IBM Plex Mono', monospace !important;
font-size:12px;
letter-spacing:.06em;
text-transform:uppercase;
}
/* 6. Footer + widgets */
footer, .site-footer, #colophon,
.widget-area, .footer-widgets{
font-family:'Inter', sans-serif !important;
}
/* 7. Comment form (Name / Email / Website / Submit) */
#commentform input, #commentform textarea{
font-family:'Inter', sans-serif !important;
}
#commentform label{
font-family:'IBM Plex Mono', monospace !important;
font-size:12px; text-transform:uppercase; letter-spacing:.06em;
}
/* ============================================================
8. THE HERO TEXT — needs a manual step, same as the black box.
Your hero ("The Ceramic Guy" title + subtitle + Get A Quote
button) is rendered by Slider Revolution, not Elementor — so
none of the rules above can reach it; SR builds its own layer
markup with its own inline styles.
Fix (one-time, in the Slider Revolution editor):
1. Open Slider Revolution → edit the slide → click the
TITLE layer ("The Ceramic Guy").
2. Find the layer's settings panel → look for a "CSS Class"
or "Attributes" field (separate from the text content).
3. Type: tcg-sr-title
4. Do the same for the subtitle layer → class: tcg-sr-text
5. Do the same for the "Get A Quote" button layer →
class: tcg-sr-text (it can share the same class as the
subtitle since both should be Inter, not the display font)
6. Save/Update the slide.
Once those classes exist, this CSS picks them up: */
.tcg-sr-title{
font-family:'Big Shoulders Display', sans-serif !important;
font-weight:800 !important;
}
.tcg-sr-text{
font-family:'Inter', sans-serif !important;
}
/* ============================================================
THE CERAMIC GUY — Body Text Font Match
Paste into: Appearance → Customize → Additional CSS
This sets the body/paragraph text in your ORIGINAL sections
(the Magnum Borophene, Kraken Graphene, Crystal Serum
descriptions, "Other Services" text, blog excerpts, etc.) to
Inter — the same body font used in the new sections.
It deliberately does NOT touch headings, buttons, or the small
mono labels (those already have their own fonts set elsewhere,
and a blanket "every span/div" rule would also break any icon
fonts on the site, which render through specific glyph
characters rather than real letters).
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
body,
p,
li,
blockquote,
td, th,
.elementor-widget-text-editor,
.elementor-widget-text-editor *,
.elementor-widget-theme-post-content,
.elementor-widget-theme-post-content p,
.entry-content,
.entry-content p,
.elementor-icon-list-text,
.elementor-tab-content,
.elementor-accordion-item .elementor-tab-content{
font-family:'Inter', sans-serif !important;
font-weight:400;
line-height:1.65;
}
/* Slightly heavier weight for any bold/strong text inside body copy,
so emphasis still reads clearly in the new font */
.elementor-widget-text-editor strong,
.elementor-widget-theme-post-content strong,
.entry-content strong{
font-weight:600 !important;
}
/* ============================================================
THE CERAMIC GUY — Coherence Fixes
Paste into: Appearance → Customize → Additional CSS
(below everything already there)
============================================================ */
/* 1. Kill the leftover orange/red underline accent under your
original headings — replace with the site's cyan accent so
there's only ONE accent color across the whole page. This
guesses at a few common ways Elementor/themes render an
underline; if none of these match what you're seeing, select
that underline element directly in Elementor (Navigator panel
helps) and tell me what it's called in the panel that opens. */
.elementor-widget-divider .elementor-divider-separator,
.elementor-divider-separator,
hr{
border-color:var(--tcg-accent) !important;
background-color:var(--tcg-accent) !important;
}
.elementor-heading-title:after,
.entry-title:after{
background-color:var(--tcg-accent) !important;
}
/* 2. Force the CF7 submit button to match the gloss cyan style
everywhere else, using CF7's own dedicated class (more reliable
than targeting input[type="submit"] alone, which a theme may
be overriding with its own more specific rule). */
.wpcf7-form input.wpcf7-submit,
input.wpcf7-submit,
.wpcf7-submit{
background:var(--tcg-accent) !important;
border:1px solid var(--tcg-accent) !important;
color:#06121A !important;
font-family:'IBM Plex Mono', monospace !important;
letter-spacing:.05em;
text-transform:uppercase;
}
.wpcf7-form input.wpcf7-submit:hover{
box-shadow:0 10px 28px rgba(46,196,241,.28);
}
/* 3. Fix the conflict where the body-text font rule (file 9) was
overriding real headings that happen to sit inside a Text
Editor widget. Headings now win regardless of what widget
they're inside. */
.elementor-widget-text-editor h1,
.elementor-widget-text-editor h2,
.elementor-widget-text-editor h3,
.elementor-widget-text-editor h4,
.elementor-widget-text-editor h5,
.elementor-widget-text-editor h6{
font-family:'Big Shoulders Display', sans-serif !important;
font-weight:800 !important;
}
/* ============================================================
THE CERAMIC GUY — Cyan Titles
Paste into: Appearance → Customize → Additional CSS
Makes every heading on the site cyan instead of white, so
titles pop against the black background. Body text/paragraphs
stay white/grey for readability — only titles change.
============================================================ */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.entry-title, .page-title, .widget-title,
.elementor-widget-text-editor h1,
.elementor-widget-text-editor h2,
.elementor-widget-text-editor h3,
.elementor-widget-text-editor h4,
.elementor-widget-text-editor h5,
.elementor-widget-text-editor h6{
color:var(--tcg-accent) !important;
}
/* The underline/divider beneath titles — same cyan, kept here
alongside the title color so both update together. */
.elementor-widget-divider .elementor-divider-separator,
.elementor-divider-separator,
hr{
border-color:var(--tcg-accent) !important;
background-color:var(--tcg-accent) !important;
}
.elementor-heading-title:after,
.entry-title:after{
background-color:var(--tcg-accent) !important;
}
/* Keep the small uppercase mono "eyebrow" labels (the tiny tags
above section titles, like "ADVANCED PROTECTION SYSTEMS") at
their original lighter weight, OR leave them cyan too — they
already were cyan from file 1, so no change needed there. */
/* ============================================================
THE CERAMIC GUY — Contact Form 7 Styling
Paste into: Appearance → Customize → Additional CSS
(or Elementor → Site Settings → Custom CSS)
Add this BELOW the 1-tcg-global-polish.css code — it uses the
same --tcg- color variables, so paste that file in first.
============================================================ */
.wpcf7-form{
max-width:640px;
margin:0 auto;
background:var(--tcg-surface);
border:1px solid var(--tcg-border);
border-radius:0 0 14px 14px; /* flush join under the get-in-touch panel above it */
padding:32px 36px 36px;
font-family:'Inter', sans-serif;
}
.wpcf7-form p{ margin:0 0 20px; }
/* If you're NOT pairing this with the 7-tcg-get-in-touch.html panel,
delete the line below to restore full rounded corners + top border
so the form reads as its own standalone card. */
.wpcf7-form{ border-top:none; }
/* Labels — small mono caps, matches the stat labels elsewhere on the site */
.wpcf7-form label{
display:block;
font-family:'IBM Plex Mono', monospace;
font-size:11px;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--tcg-muted);
margin-bottom:8px;
}
/* Inputs & textarea */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form textarea{
width:100%;
background:var(--tcg-bg);
border:1px solid var(--tcg-border);
border-radius:8px;
padding:13px 16px;
color:var(--tcg-text);
font-family:'Inter', sans-serif;
font-size:15px;
transition:border-color .2s ease, box-shadow .2s ease;
}
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder{ color:#5B6168; }
.wpcf7-form input:focus,
.wpcf7-form textarea:focus{
outline:none;
border-color:var(--tcg-accent);
box-shadow:0 0 0 3px rgba(46,196,241,.18);
}
.wpcf7-form textarea{ min-height:140px; resize:vertical; }
/* Submit button — same gloss-sweep signature as the rest of the site */
.wpcf7-form input[type="submit"]{
position:relative;
overflow:hidden;
width:auto;
margin-top:6px;
padding:14px 36px;
border:1px solid var(--tcg-accent);
border-radius:6px;
background:var(--tcg-accent);
color:#06121A;
font-family:'IBM Plex Mono', monospace;
font-weight:500;
letter-spacing:.05em;
text-transform:uppercase;
font-size:13px;
cursor:pointer;
transition:transform .25s ease, box-shadow .25s ease;
}
.wpcf7-form input[type="submit"]:hover{
transform:translateY(-2px);
box-shadow:0 10px 28px rgba(46,196,241,.28);
}
.wpcf7-form input[type="submit"]:disabled{ opacity:.6; cursor:default; transform:none; }
/* Validation + response messages */
.wpcf7-not-valid-tip{
color:#FF6B6B;
font-family:'IBM Plex Mono', monospace;
font-size:12px;
margin-top:6px;
}
.wpcf7-form input.wpcf7-not-valid,
.wpcf7-form textarea.wpcf7-not-valid{ border-color:#FF6B6B !important; }
.wpcf7-response-output{
margin:20px auto 0 !important;
max-width:640px;
border-radius:8px;
padding:14px 18px;
font-family:'IBM Plex Mono', monospace;
font-size:13px;
border:1px solid var(--tcg-border) !important;
background:var(--tcg-bg);
color:var(--tcg-text);
}
.wpcf7-mail-sent-ok{ border-color:var(--tcg-accent) !important; color:var(--tcg-accent); }
.wpcf7-validation-errors,
.wpcf7-mail-sent-ng,
.wpcf7-spam-blocked{ border-color:#FF6B6B !important; color:#FF6B6B; }
@media (max-width:600px){
.wpcf7-form{ padding:24px; border-radius:10px; }
}
/* ============================================================
THE CERAMIC GUY — Quote CTA Banner
Paste into: Appearance → Customize → Additional CSS
Setup needed first:
1. Click directly on the "Grab Your Free Quote Below"
heading widget in Elementor (the heading itself, not its
parent section/column — use Navigator, Ctrl/Cmd+I, and
look for the item with that text shown as a preview).
2. Advanced tab → CSS Classes (NOT CSS ID, since that field is
already in use for your menu anchor) → type: tcg-cta-banner
3. Update/Publish.
============================================================ */
.tcg-cta-banner.tcg-cta-banner{
background:var(--tcg-accent) !important;
border:none !important;
border-radius:10px !important;
max-width:760px;
margin:0 auto 28px !important;
padding:28px 32px !important;
text-align:center;
animation:tcg-cta-pulse 2.6s ease-in-out infinite;
}
/* The doubled .tcg-cta-banner.tcg-cta-banner selector below is not
a typo — repeating the same class raises this rule's specificity
above any single-class rule elsewhere (like the cyan heading
color rule from an earlier file), so it reliably wins the color
regardless of which order the two files were pasted in. The
-webkit-text-fill-color line is a safety net in case the heading
widget uses a gradient/stroke text style, which ignores plain
"color" entirely. */
.tcg-cta-banner.tcg-cta-banner,
.tcg-cta-banner.tcg-cta-banner *{
color:#06121A !important;
-webkit-text-fill-color:#06121A !important;
}
.tcg-cta-banner.tcg-cta-banner h1,
.tcg-cta-banner.tcg-cta-banner h2,
.tcg-cta-banner.tcg-cta-banner h3,
.tcg-cta-banner.tcg-cta-banner p{
font-family:'Big Shoulders Display', sans-serif !important;
font-weight:800 !important;
font-size:clamp(24px, 4vw, 34px) !important;
letter-spacing:.01em;
margin:0 !important;
}
@keyframes tcg-cta-pulse{
0%, 100%{ box-shadow:0 0 0 0 rgba(46,196,241,.5); }
50%{ box-shadow:0 0 45px 8px rgba(46,196,241,.45); }
}
@media (prefers-reduced-motion: reduce){
.tcg-cta-banner.tcg-cta-banner{ animation:none; }
}
}
/* ============================================================
THE CERAMIC GUY — Contact Form 7 Styling
Paste into: Appearance → Customize → Additional CSS
(or Elementor → Site Settings → Custom CSS)
Add this BELOW the 1-tcg-global-polish.css code — it uses the
same --tcg- color variables, so paste that file in first.
============================================================ */
.wpcf7-form{
max-width:640px;
margin:0 auto;
background:transparent;
border:none !important;
border-radius:0 0 14px 14px; /* flush join under the get-in-touch panel above it */
padding:0;
font-family:'Inter', sans-serif;
overflow:visible !important;
box-shadow:none !important;
}
.wpcf7-form p{ margin:0 0 20px; }
/* If you're NOT pairing this with the 7-tcg-get-in-touch.html panel,
delete the line below to restore full rounded corners + top border
so the form reads as its own standalone card. */
.wpcf7-form{ border-top:none; }
/* The Bridge theme wraps your CF7 form in its own div
(bt_bb_cf7_form) which is what actually renders the visible
card/border on screen — border and box-shadow don't inherit
down from the real