/******* Do not edit this file ******* Simple Custom CSS and JS - by Silkypress.com Saved: Aug 04 2026 | 07:41:00 */ /* ========================================================== CUSTOM GUITAR ATELIER — PREMIUM FLATSOME FOOTER WooCommerce / Flatsome / Contact Form 7 Custom CSS & JS plugin settings: - Linking type: External - Where on page: In the element - Where in site: Frontend only Paste directly into the CSS editor without wrapper tags. This stylesheet targets the existing Flatsome footer: #footer .footer-widgets ========================================================== */ /* Footer design tokens */ #footer.footer-wrapper { --cga-footer-bg: #0e0e0f; --cga-footer-bg-warm: #17110e; --cga-footer-text: #f3eee8; --cga-footer-muted: #c9c0b7; --cga-footer-gold: #c49a52; --cga-footer-gold-light: #e0bd78; --cga-footer-line: rgba(196, 154, 82, 0.24); } /* ========================================================== MAIN FOOTER WIDGET AREA ========================================================== */ #footer .footer-widgets { padding: 54px 0 38px; color: var(--cga-footer-text); background: radial-gradient( circle at 88% 10%, rgba(196, 154, 82, 0.11), transparent 34% ), linear-gradient( 135deg, var(--cga-footer-bg) 0%, var(--cga-footer-bg-warm) 60%, #0d0d0e 100% ); border-top: 1px solid rgba(224, 189, 120, 0.55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 -10px 30px rgba(0, 0, 0, 0.08); } #footer .footer-widgets > .row { row-gap: 34px; } /* ========================================================== COLUMN HEADINGS AND DIVIDERS Flatsome already supplies one .is-divider per widget title. ========================================================== */ #footer .footer-widgets .widget-title { display: block; margin: 0; color: #ffffff; font-size: 0.94rem; font-weight: 700; letter-spacing: 0.09em; line-height: 1.35; text-transform: uppercase; } #footer .footer-widgets .is-divider { width: 38px; height: 2px; margin-top: 13px; margin-bottom: 20px; opacity: 1; background: linear-gradient( 90deg, var(--cga-footer-gold), rgba(196, 154, 82, 0.10) ); } /* Secondary headings inside the contact-information column */ #footer .footer-widgets h3, #footer .footer-widgets h4 { margin-top: 1.25em; margin-bottom: 0.45em; color: #ffffff; font-size: 0.84rem; font-weight: 700; letter-spacing: 0.055em; line-height: 1.4; text-transform: uppercase; } #footer .footer-widgets h3:first-child, #footer .footer-widgets h4:first-child { margin-top: 0; } /* ========================================================== TEXT AND LINKS ========================================================== */ #footer .footer-widgets p, #footer .footer-widgets li, #footer .footer-widgets address { color: var(--cga-footer-muted); line-height: 1.72; } #footer .footer-widgets address { font-style: normal; } #footer .footer-widgets strong { color: #ffffff; } #footer .footer-widgets a { color: var(--cga-footer-text); text-decoration: none; transition: color 0.2s ease, padding-left 0.2s ease, border-color 0.2s ease; } /* ========================================================== COMPACT "GET IN TOUCH" CONTACT BLOCK Markup: .cga-footer-contact Designed for Flatsome's narrow first footer column. ========================================================== */ #footer .footer-widgets .cga-footer-contact { width: 100%; max-width: 310px; min-width: 0; margin: 0; } #footer .footer-widgets .cga-footer-contact__locations { display: grid; gap: 8px; } #footer .footer-widgets .cga-footer-contact__location { position: relative; min-width: 0; margin: 0; padding: 9px 11px 9px 14px; overflow: hidden; color: var(--cga-footer-muted); background: linear-gradient( 135deg, rgba(255, 255, 255, 0.055), rgba(196, 154, 82, 0.025) ); border: 1px solid rgba(224, 189, 120, 0.18); border-left: 2px solid var(--cga-footer-gold); border-radius: 0 10px 10px 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025); font-size: 12px; font-style: normal; letter-spacing: 0.005em; line-height: 1.42; } #footer .footer-widgets .cga-footer-contact__location > span { display: block; min-width: 0; } #footer .footer-widgets .cga-footer-contact__country { display: flex !important; align-items: center; gap: 7px; margin-bottom: 3px; color: var(--cga-footer-gold-light); font-size: 10px; font-weight: 700; letter-spacing: 0.095em; line-height: 1.2; text-transform: uppercase; } #footer .footer-widgets .cga-footer-contact__country::before { content: ""; flex: 0 0 5px; width: 5px; height: 5px; background: var(--cga-footer-gold); border-radius: 50%; box-shadow: 0 0 0 3px rgba(196, 154, 82, 0.10); } /* Combined "Ask Our Team" support panel */ #footer .footer-widgets .cga-footer-contact__support { position: relative; display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 9px 12px; width: 100%; min-width: 0; margin-top: 10px; padding: 12px; overflow: hidden; background: radial-gradient( circle at 13% 18%, rgba(224, 189, 120, 0.12), transparent 32% ), linear-gradient( 135deg, rgba(255, 255, 255, 0.055), rgba(196, 154, 82, 0.035) ); border: 1px solid rgba(224, 189, 120, 0.28); border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 8px 20px rgba(0, 0, 0, 0.10); } #footer .footer-widgets .cga-footer-contact__support::before { content: ""; position: absolute; top: 0; right: 12px; left: 12px; height: 1px; background: linear-gradient( 90deg, transparent, var(--cga-footer-gold), transparent ); opacity: 0.68; } #footer .footer-widgets .cga-footer-contact__support-photo { display: block; width: 62px; height: 62px; margin: 0; padding: 0; object-fit: cover; object-position: center top; background: #f4eee5; border: 2px solid var(--cga-footer-gold); border-radius: 50%; box-shadow: 0 0 0 3px rgba(196, 154, 82, 0.10), 0 6px 14px rgba(0, 0, 0, 0.18); } #footer .footer-widgets .cga-footer-contact__support-intro { min-width: 0; align-self: center; } #footer .footer-widgets h3.cga-footer-contact__support-title { margin: 0 0 3px; color: #ffffff; font-size: 13.5px; font-weight: 800; letter-spacing: 0.075em; line-height: 1.2; text-transform: uppercase; } #footer .footer-widgets p.cga-footer-contact__support-text { margin: 0; color: var(--cga-footer-muted); font-size: 11.25px; font-weight: 400; letter-spacing: 0; line-height: 1.4; } #footer .footer-widgets .cga-footer-contact__support-actions { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; min-width: 0; padding-top: 9px; border-top: 1px solid rgba(224, 189, 120, 0.16); } #footer .footer-widgets a.cga-footer-contact__support-link { position: relative; z-index: 2; display: inline-flex; min-width: 0; min-height: 42px; align-items: center; justify-content: center; gap: 7px; margin: 0; padding: 0 9px; overflow: hidden; color: var(--cga-footer-gold-light); background: rgba(196, 154, 82, 0.065); border: 1px solid rgba(224, 189, 120, 0.32); border-radius: 9px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025); font-size: 11.25px; font-weight: 700; letter-spacing: 0.01em; line-height: 1.2; text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; pointer-events: auto; touch-action: manipulation; transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, transform 0.2s ease; } #footer .footer-widgets .cga-footer-contact__support-link > * { pointer-events: none; } #footer .footer-widgets .cga-footer-contact__support-link span { min-width: 0; } #footer .footer-widgets .cga-footer-contact__support-icon { flex: 0 0 16px; width: 16px; height: 16px; } #footer .footer-widgets a.cga-footer-contact__support-link--email { min-width: 79px; color: #1a120a; background: linear-gradient(135deg, #e3c27d, #b88438); border-color: #d5ad63; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 6px 14px rgba(0, 0, 0, 0.16); } /* Menu separators and spacing */ #footer .footer-widgets .menu > li, #footer .footer-widgets .ux-menu-link { border-color: var(--cga-footer-line); } #footer .footer-widgets .menu > li > a, #footer .footer-widgets .ux-menu-link__link { padding-top: 0.56em; padding-bottom: 0.56em; } /* ========================================================== CONTACT FORM 7 NEWSLETTER ========================================================== */ #footer .footer-widgets .wpcf7-form-control-wrap { display: block; } #footer .footer-widgets input[type="email"] { width: 100%; min-height: 48px; padding: 0 20px; color: #ffffff; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(224, 189, 120, 0.38); border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } #footer .footer-widgets input[type="email"]::placeholder { color: rgba(243, 238, 232, 0.62); opacity: 1; } #footer .footer-widgets input[type="email"]:focus { color: #ffffff; background: rgba(255, 255, 255, 0.11); border-color: var(--cga-footer-gold-light); box-shadow: 0 0 0 3px rgba(196, 154, 82, 0.15); } /* Newsletter submit button */ #footer .footer-widgets input[type="submit"], #footer .footer-widgets button[type="submit"] { min-height: 46px; padding: 0 27px; color: #1a120a; background: linear-gradient(135deg, #e3c27d, #b88438); border: 1px solid #d5ad63; border-radius: 999px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25); font-weight: 700; letter-spacing: 0.06em; text-shadow: none; transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; } #footer .footer-widgets input[type="submit"]:disabled, #footer .footer-widgets button[type="submit"]:disabled { cursor: not-allowed; filter: grayscale(0.35); opacity: 0.65; transform: none; } /* ========================================================== SOCIAL-MEDIA ICONS ========================================================== */ #footer .footer-widgets .social-icons a, #footer .footer-widgets .social-icons .button.icon { color: var(--cga-footer-gold-light); background: rgba(196, 154, 82, 0.05); border-color: rgba(224, 189, 120, 0.55); transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, border-color 0.2s ease; } /* Hover effects only on devices with a precise pointer */ @media (hover: hover) and (pointer: fine) { #footer .footer-widgets a:hover { color: var(--cga-footer-gold-light); } #footer .footer-widgets .menu > li > a:hover, #footer .footer-widgets .ux-menu-link__link:hover { padding-left: 4px; } #footer .footer-widgets a.cga-footer-contact__support-link:hover { border-color: rgba(224, 189, 120, 0.62); transform: translateY(-2px); } #footer .footer-widgets a.cga-footer-contact__support-link--phone:hover { color: #ffffff; background: rgba(196, 154, 82, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 7px 16px rgba(0, 0, 0, 0.15); } #footer .footer-widgets a.cga-footer-contact__support-link--email:hover { color: #120d08; filter: brightness(1.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48), 0 9px 18px rgba(0, 0, 0, 0.21); } #footer .footer-widgets input[type="submit"]:not(:disabled):hover, #footer .footer-widgets button[type="submit"]:not(:disabled):hover { color: #120d08; filter: brightness(1.07); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32); } #footer .footer-widgets .social-icons a:hover, #footer .footer-widgets .social-icons .button.icon:hover { color: #15100b; background: var(--cga-footer-gold); border-color: var(--cga-footer-gold-light); transform: translateY(-2px); } } /* ========================================================== BOTTOM COPYRIGHT / PAYMENT AREA ========================================================== */ #footer .absolute-footer { padding-top: 18px; padding-bottom: 18px; color: var(--cga-footer-muted); background: #09090a; border-top: 1px solid var(--cga-footer-line); } #footer .absolute-footer, #footer .absolute-footer p, #footer .absolute-footer .copyright-footer { color: var(--cga-footer-muted); } #footer .absolute-footer a { color: var(--cga-footer-text); text-decoration: none; transition: color 0.2s ease; } @media (hover: hover) and (pointer: fine) { #footer .absolute-footer a:hover { color: var(--cga-footer-gold-light); } } /* ========================================================== TABLET AND MOBILE ========================================================== */ @media screen and (max-width: 849px) { #footer .footer-widgets { padding: 42px 0 26px; } #footer .footer-widgets > .row { row-gap: 30px; } #footer .footer-widgets .widget-title { font-size: 0.9rem; } #footer .absolute-footer { padding-top: 16px; padding-bottom: 16px; } } @media screen and (max-width: 549px) { #footer .footer-widgets { padding: 36px 0 22px; } #footer .footer-widgets > .row { row-gap: 26px; } #footer .footer-widgets .cga-footer-contact { max-width: 420px; } #footer .footer-widgets input[type="submit"], #footer .footer-widgets button[type="submit"] { width: 100%; margin-top: 6px; } #footer .absolute-footer { padding-top: 14px; padding-bottom: 14px; } } @media screen and (max-width: 359px) { #footer .footer-widgets .cga-footer-contact__support { grid-template-columns: 54px minmax(0, 1fr); gap: 8px 10px; padding: 10px; } #footer .footer-widgets .cga-footer-contact__support-photo { width: 54px; height: 54px; } #footer .footer-widgets h3.cga-footer-contact__support-title { font-size: 12.5px; } #footer .footer-widgets p.cga-footer-contact__support-text { font-size: 10.75px; } #footer .footer-widgets .cga-footer-contact__support-actions { grid-template-columns: 1fr; } #footer .footer-widgets a.cga-footer-contact__support-link--email { min-width: 0; } } /* ========================================================== KEYBOARD ACCESSIBILITY ========================================================== */ #footer .footer-widgets a:focus-visible, #footer .footer-widgets input:focus-visible, #footer .footer-widgets button:focus-visible, #footer .absolute-footer a:focus-visible, #footer #top-link:focus-visible { outline: 2px solid var(--cga-footer-gold-light); outline-offset: 3px; } /* Respect reduced-motion preferences */ @media (prefers-reduced-motion: reduce) { #footer *, #footer *::before, #footer *::after { scroll-behavior: auto !important; transition: none !important; } #footer .footer-widgets input[type="submit"], #footer .footer-widgets button[type="submit"], #footer .footer-widgets .social-icons a, #footer .footer-widgets .social-icons .button.icon, #footer #top-link { transform: none !important; } }