/******* Do not edit this file ******* Simple Custom CSS and JS - by Silkypress.com Saved: Aug 08 2026 | 02:23:26 */ /* ========================================================== CUSTOM GUITAR ATELIER — SECURE ACCOUNT ACCESS Premium responsive pre-footer section. Custom CSS & JS plugin settings: - Linking type: External - Where on page: In the element - Where in site: In Frontend only ========================================================== */ /* The Flatsome Footer HTML field is global. Keep this section on the homepage only. Remove this rule to show it sitewide. */ body:not(.home) .cga-secure-access { display: none !important; } .cga-secure-access { --cga-secure-brown: #3a281f; --cga-secure-dark: #1b120e; --cga-secure-gold: #c49a45; --cga-secure-gold-light: #dfbd74; --cga-secure-ivory: #f5f1ea; position: relative; isolation: isolate; box-sizing: border-box; width: 100%; margin: 0; padding: clamp(30px, 3.7vw, 48px) 22px; overflow: hidden; color: var(--cga-secure-brown); background: radial-gradient( circle at 94% 10%, rgba(196, 154, 69, 0.14), transparent 30% ), linear-gradient(135deg, #fffdf9 0%, #f7f0e7 100%); border-top: 1px solid rgba(196, 154, 69, 0.34); border-bottom: 1px solid rgba(196, 154, 69, 0.72); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 10px 28px rgba(58, 40, 31, 0.08); } .cga-secure-access::before { content: ""; position: absolute; z-index: -1; top: -86px; left: -78px; width: 220px; height: 220px; background: radial-gradient( circle, rgba(196, 154, 69, 0.10), transparent 68% ); pointer-events: none; } .cga-secure-access, .cga-secure-access * { box-sizing: border-box; } .cga-secure-access__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: clamp(20px, 2.5vw, 34px); width: 100%; max-width: 1240px; margin: 0 auto; align-items: center; } .cga-secure-access__icon { display: inline-flex; width: 68px; height: 68px; align-items: center; justify-content: center; color: var(--cga-secure-brown); background: linear-gradient( 145deg, var(--cga-secure-gold-light), var(--cga-secure-gold) ); border: 1px solid rgba(134, 90, 34, 0.46); border-radius: 50%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48), 0 10px 22px rgba(58, 40, 31, 0.16); } .cga-secure-access__icon svg { display: block; width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .cga-secure-access__copy { min-width: 0; } .cga-secure-access__eyebrow { margin: 0 0 6px !important; color: #96651f !important; font-size: 11.5px; font-weight: 800; letter-spacing: 0.13em; line-height: 1.35; text-transform: uppercase; } .cga-secure-access__copy h2 { margin: 0 0 10px !important; color: #302119 !important; font-size: clamp(24px, 2.1vw, 32px) !important; font-weight: 800; letter-spacing: 0.015em; line-height: 1.18; text-transform: none; } .cga-secure-access__copy h2::after { content: ""; display: block; width: 42px; height: 2px; margin-top: 11px; background: linear-gradient( 90deg, var(--cga-secure-gold), rgba(196, 154, 69, 0.08) ); } .cga-secure-access__text { max-width: 820px; margin: 0 0 7px !important; color: #66574e !important; font-size: clamp(13.5px, 1.05vw, 15.5px); font-weight: 450; line-height: 1.68; } .cga-secure-access__text:last-child { margin-bottom: 0 !important; } .cga-secure-access__copy strong { color: #49342a; font-weight: 750; } .cga-secure-access__button { display: inline-flex !important; min-width: 172px; min-height: 48px; align-items: center; justify-content: center; gap: 9px; margin: 0 !important; padding: 0 22px !important; color: #1b1209 !important; -webkit-text-fill-color: #1b1209 !important; background: linear-gradient( 135deg, var(--cga-secure-gold-light), var(--cga-secure-gold) ) !important; border: 1px solid rgba(134, 90, 34, 0.50) !important; border-radius: 999px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.46), 0 9px 22px rgba(58, 40, 31, 0.18); font-size: 12.5px; font-weight: 800; letter-spacing: 0.065em; line-height: 1.2; text-align: center; text-decoration: none !important; text-shadow: none; text-transform: uppercase; white-space: nowrap; transition: filter 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .cga-secure-access__button svg { display: block; width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .cga-secure-access__button:focus-visible { outline: 2px solid var(--cga-secure-brown); outline-offset: 3px; } .cga-secure-access__button:active { filter: brightness(0.96); transform: translateY(1px); } @media (hover: hover) and (pointer: fine) { .cga-secure-access__button:hover { color: #120d08 !important; filter: brightness(1.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.50), 0 12px 27px rgba(58, 40, 31, 0.24); transform: translateY(-2px); } } @media screen and (max-width: 849px) { .cga-secure-access { padding: 32px 18px 34px; } .cga-secure-access__inner { grid-template-columns: 62px minmax(0, 1fr); gap: 18px 20px; max-width: 720px; align-items: start; } .cga-secure-access__icon { width: 60px; height: 60px; } .cga-secure-access__icon svg { width: 30px; height: 30px; } .cga-secure-access__button { grid-column: 2; justify-self: start; } } @media screen and (max-width: 549px) { .cga-secure-access { padding: 28px 16px 30px; } .cga-secure-access__inner { display: block; max-width: 520px; text-align: center; } .cga-secure-access__icon { margin: 0 auto 17px; } .cga-secure-access__copy h2 { margin-bottom: 12px !important; font-size: 25px !important; } .cga-secure-access__copy h2::after { margin-right: auto; margin-left: auto; } .cga-secure-access__text { font-size: 13.5px; line-height: 1.62; } .cga-secure-access__button { width: 100%; max-width: 280px; margin: 20px auto 0 !important; } } @media (prefers-reduced-motion: reduce) { .cga-secure-access__button { transition: none !important; } }