:root {
    /* =====================================================
       ELECTRIC YELLOW / LIGHTNING GOLD THEME
       ===================================================== */

    --jgl-navy: #0b0a06;
    --jgl-navy-2: #111006;
    --jgl-navy-3: #18160a;

    --jgl-panel: #141207;
    --jgl-panel-2: #19170b;

    /* Primary Electric Yellow */
    --jgl-cyan: #fff000;
    --jgl-cyan-2: #ffc400;

    /* Gold */
    --jgl-gold: #ffd000;
    --jgl-gold-2: #ff9d00;

    --jgl-white: #ffffff;
    --jgl-muted: #a9a69a;

    /* Lines */
    --jgl-line: rgba(255, 230, 0, 0.28);

    /* Soft Glow */
    --jgl-soft-cyan: rgba(255, 230, 0, 0.11);

    /* RGB */
    --jgl-accent-rgb: 255, 230, 0;
    --jgl-secondary-rgb: 255, 174, 0;

    /* Middle Colors */
    --jgl-mid: #211b06;
    --jgl-mid-2: #17130a;
}

/* ========================================================= BASE / EXISTING PAGE OVERRIDES ========================================================= */ /* Header store logo — keep native ratio, transparent asset */ .logo { max-width: 220px !important; } .logo img { width: auto !important; max-width: 180px !important; height: auto !important; max-height: 56px !important; object-fit: contain !important; object-position: left center; } .panel { background-color: var(--jgl-navy) !important; } #maincontent { background: radial-gradient(circle at 80% 10%, rgba(var(--jgl-accent-rgb), .08), transparent 34%), linear-gradient(180deg, #191c20 0%, #13151a 100%); color: #ffffff; } .product-item-link { color: #ffffff !important; font-size: 15px !important; } .product-info { color: #ffffff; padding: 20px; } .page-title { color: #ffffff !important; font-size: 40px !important; } .price { color: var(--jgl-gold) !important; } /* ========================================================= PRODUCT INFO MAIN + SEO MODULES ========================================================= */ .catalog-product-view .product-info-wrapper { gap: 24px; align-items: start; } .product-info-main { position: relative; padding: 22px 20px 20px; border-radius: 22px; border: 1px solid rgba(var(--jgl-accent-rgb), .28); background: radial-gradient(circle at 0% 0%, rgba(var(--jgl-secondary-rgb), .10), transparent 38%), linear-gradient(180deg, rgba(var(--jgl-accent-rgb), .06), rgba(0, 0, 0, .28)), linear-gradient(180deg, var(--jgl-panel-2), var(--jgl-navy)); box-shadow: 0 18px 42px rgba(0, 0, 0, .42), 0 0 24px rgba(var(--jgl-accent-rgb), .10); overflow: hidden; } .product-info-main::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient( 135deg, rgba(var(--jgl-accent-rgb), .46), rgba(var(--jgl-secondary-rgb), .28), rgba(var(--jgl-accent-rgb), .14) ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .product-info-main > * { position: relative; z-index: 1; } .page-title-wrapper.product { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid rgba(var(--jgl-accent-rgb), .18); } .page-title-wrapper.product .page-title, .page-title-wrapper.product .page-title .base { color: #fff !important; font-size: clamp(24px, 3.6vw, 38px) !important; line-height: 1.15 !important; letter-spacing: -.02em; text-shadow: 0 0 24px rgba(var(--jgl-accent-rgb), .12); } .product-info-price { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-bottom: 16px; padding: 14px 16px; border-radius: 16px; border: 1px solid rgba(var(--jgl-accent-rgb), .22); background: rgba(var(--jgl-accent-rgb), .08); } .product-info-price .price-label { color: var(--jgl-muted) !important; font-size: 11px !important; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; } .product-info-price .price, .product-info-price .price-wrapper .price { color: var(--jgl-gold) !important; font-size: clamp(22px, 3vw, 30px) !important; font-weight: 800 !important; text-shadow: 0 0 18px rgba(var(--jgl-accent-rgb), .22); } .product-info-main .product.attribute.sku { color: var(--jgl-muted); font-size: 12px; } .product-info-main .product.attribute.sku .type { color: #cfcfcf; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; } .product-info-main .box-tocart { margin-top: 8px; } .product-info-main .box-tocart .fieldset { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .product-info-main .box-tocart .field.qty .label { color: var(--jgl-muted); font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; } .product-info-main .box-tocart select.qty, .product-info-main .box-tocart .input-text.qty { min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid rgba(var(--jgl-accent-rgb), .28); background: rgba(255, 255, 255, .04); color: #fff; } .product-info-main .action.primary.tocart { min-height: 48px; padding: 0 22px; border: 0; border-radius: 14px; color: #101010 !important; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; background: linear-gradient(135deg, var(--jgl-gold), var(--jgl-cyan)) !important; box-shadow: 0 10px 24px rgba(var(--jgl-accent-rgb), .24); transition: transform .2s ease, box-shadow .2s ease; } .product-info-main .action.primary.tocart:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(var(--jgl-accent-rgb), .32); } .product-info-main .action.towishlist { color: var(--jgl-cyan) !important; font-weight: 700; } .product-info-main .product.attribute.overview { margin-top: 18px; padding: 18px 16px; border-radius: 18px; border: 1px solid rgba(var(--jgl-accent-rgb), .18); background: rgba(255, 255, 255, .03); color: #e4e4e4; line-height: 1.75; } .product-info-main .product.attribute.overview p, .product-info-main .product.attribute.overview li { color: #d8d8d8; } .product-info-main .product.attribute.overview a { color: var(--jgl-cyan); font-weight: 700; } .product-info-main .available-block { margin-top: 14px; padding: 14px 16px; border-radius: 16px; border: 1px solid rgba(var(--jgl-secondary-rgb), .18); background: rgba(var(--jgl-secondary-rgb), .06); } .product-info-main .available-block .avail-text { color: var(--jgl-gold); font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; } .product-info-main .available-block .home, .product-info-main .available-block .store { color: #d6d6d6; } .product-info-main .sharing-buttons { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(var(--jgl-accent-rgb), .14); } .product-info-main .sharing-buttons label { display: block; margin-bottom: 8px; color: var(--jgl-muted); font-size: 11px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; } .seo-hero-meta, .seo-quick-links, .seo-trust-cards { margin-top: 16px; } .seo-hero-meta ul { margin: 0; padding: 14px 16px; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; border-radius: 16px; border: 1px solid rgba(var(--jgl-accent-rgb), .20); background: rgba(var(--jgl-accent-rgb), .06); } .seo-hero-meta li { padding: 10px; text-align: center; border-radius: 12px; background: rgba(255, 255, 255, .03); color: #ddd; font-size: 12px; } .seo-hero-meta li strong { display: block; margin-bottom: 4px; color: var(--jgl-muted); font-size: 10px; letter-spacing: .8px; text-transform: uppercase; } .seo-quick-links h3 { margin: 0 0 10px; color: var(--jgl-gold); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; } .seo-quick-links ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .seo-quick-links a { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(var(--jgl-secondary-rgb), .18); background: rgba(255, 255, 255, .03); color: #dedede; font-size: 11px; font-weight: 800; letter-spacing: .55px; text-transform: uppercase; text-decoration: none !important; } .seo-trust-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .seo-trust-card { position: relative; min-height: 128px; padding: 16px; overflow: hidden; border-radius: 18px; border: 1px solid rgba(var(--jgl-accent-rgb), .22); background: radial-gradient(circle at 100% 0%, rgba(var(--jgl-secondary-rgb), .12), transparent 42%), linear-gradient(160deg, rgba(var(--jgl-accent-rgb), .05), rgba(0, 0, 0, .22)); box-shadow: 0 14px 32px rgba(0, 0, 0, .24); } .seo-trust-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .seo-trust-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; border: 1px solid rgba(var(--jgl-accent-rgb), .30); color: var(--jgl-gold); background: rgba(var(--jgl-accent-rgb), .10); font-size: 18px; } .seo-trust-pill { padding: 5px 9px; border-radius: 999px; border: 1px solid rgba(var(--jgl-secondary-rgb), .24); color: #d2d2d2; background: rgba(var(--jgl-secondary-rgb), .08); font-size: 10px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; } .seo-trust-card h3 { margin: 0 0 7px; color: #f5f5f5; font-size: 13px; letter-spacing: .45px; text-transform: uppercase; } .seo-trust-card p { margin: 0; color: #ababab; font-size: 11px; line-height: 1.65; } @media (max-width: 760px) { .product-info-main { padding: 18px 14px 16px; border-radius: 18px; } .page-title-wrapper.product .page-title, .page-title-wrapper.product .page-title .base { font-size: 26px !important; } .product-info-main .box-tocart .fieldset { flex-direction: column; align-items: stretch; } .product-info-main .action.primary.tocart { width: 100%; } .seo-hero-meta ul { grid-template-columns: 1fr; } .seo-trust-cards, .seo-quick-links ul { grid-template-columns: 1fr; } } /* ========================================================= MAIN IMAGE ========================================================= */ @property --jgl-neon-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; } .main-image { --jgl-neon-angle: 0deg; display: block; width: 100%; height: auto; padding: 2px; box-sizing: border-box; border-radius: 0; background: conic-gradient( from var(--jgl-neon-angle), var(--jgl-navy) 0deg, var(--jgl-mid) 65deg, var(--jgl-cyan) 92deg, var(--jgl-gold) 104deg, var(--jgl-cyan) 116deg, var(--jgl-mid-2) 150deg, var(--jgl-navy) 220deg, var(--jgl-cyan) 276deg, var(--jgl-navy) 360deg ); box-shadow: 0 0 10px rgba(var(--jgl-accent-rgb), .30), 0 0 26px rgba(var(--jgl-accent-rgb), .18); animation: jglImageNeon 5.5s linear infinite; } @keyframes jglImageNeon { from { --jgl-neon-angle: 0deg; } to { --jgl-neon-angle: 360deg; } } /* ========================================================= TESTIMONIAL - VOICE WALL BENTO STYLE ========================================================= */ .seo-voice-wall { position: relative; width: 100%; overflow: hidden; color: #fff; background: linear-gradient(180deg, rgba(var(--jgl-accent-rgb), .06) 0%, transparent 28%), linear-gradient(180deg, #0a0604 0%, #050302 100%); border-top: 1px solid rgba(var(--jgl-accent-rgb), .22); border-bottom: 1px solid rgba(var(--jgl-accent-rgb), .18); } .seo-voice-shell { width: min(1240px, calc(100% - 40px)); margin: 0 auto; padding: 72px 0 78px; } .seo-voice-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: end; margin-bottom: 32px; } .seo-voice-kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(var(--jgl-secondary-rgb), .32); color: var(--jgl-cyan); background: rgba(var(--jgl-secondary-rgb), .08); font-size: 10px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; } .seo-voice-head h2 { margin: 0 0 10px; max-width: 720px; color: #fff; font-family: Arial, Helvetica, sans-serif; font-size: clamp(28px, 3.8vw, 46px); line-height: 1.08; font-weight: 800; letter-spacing: -.6px; } .seo-voice-head p { margin: 0; max-width: 680px; color: var(--jgl-muted); font-size: 15px; line-height: 1.75; } .seo-voice-stats { display: grid; grid-template-columns: repeat(3, minmax(88px, 1fr)); gap: 10px; } .seo-voice-stat { padding: 14px 12px; border-radius: 16px; border: 1px solid rgba(var(--jgl-accent-rgb), .24); background: rgba(10, 6, 4, .82); text-align: center; } .seo-voice-stat strong { display: block; margin-bottom: 4px; color: var(--jgl-gold); font-size: 22px; line-height: 1; } .seo-voice-stat span { color: #b9aaa0; font-size: 9px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; } .seo-voice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .seo-voice-card { position: relative; display: flex; flex-direction: column; min-height: 220px; padding: 22px 22px 18px; border-radius: 20px; border: 1px solid rgba(var(--jgl-accent-rgb), .22); background: radial-gradient(circle at 100% 0%, rgba(var(--jgl-accent-rgb), .12), transparent 38%), linear-gradient(155deg, rgba(14, 8, 5, .96), rgba(8, 5, 3, .98)); box-shadow: 0 16px 34px rgba(0, 0, 0, .28); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; } .seo-voice-card:hover { transform: translateY(-2px); border-color: rgba(var(--jgl-accent-rgb), .42); box-shadow: 0 20px 40px rgba(0, 0, 0, .32), 0 0 24px rgba(var(--jgl-accent-rgb), .10); } .seo-voice-card--hero { grid-column: 1 / -1; min-height: 250px; border-color: rgba(var(--jgl-accent-rgb), .38); background: radial-gradient(circle at 0% 100%, rgba(var(--jgl-secondary-rgb), .14), transparent 42%), radial-gradient(circle at 100% 0%, rgba(var(--jgl-accent-rgb), .16), transparent 36%), linear-gradient(145deg, rgba(16, 9, 5, .98), rgba(8, 5, 3, .98)); } .seo-voice-card-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-bottom: 16px; } .seo-voice-avatar { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; border: 1px solid rgba(var(--jgl-accent-rgb), .34); color: #fff; background: linear-gradient(135deg, var(--jgl-gold), var(--jgl-cyan)); font-size: 14px; font-weight: 900; letter-spacing: .5px; } .seo-voice-card-meta strong { display: block; margin-bottom: 2px; color: #fff; font-size: 14px; } .seo-voice-card-meta span { color: #a89a90; font-size: 12px; } .seo-voice-card-rating { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .seo-voice-stars { color: var(--jgl-gold); font-size: 12px; letter-spacing: 1px; } .seo-voice-score { padding: 4px 8px; border-radius: 999px; border: 1px solid rgba(var(--jgl-accent-rgb), .28); color: var(--jgl-gold); background: rgba(var(--jgl-accent-rgb), .08); font-size: 11px; font-weight: 800; } .seo-voice-card blockquote { flex: 1; margin: 0 0 16px; color: #ece3dc; font-size: 15px; line-height: 1.78; font-style: italic; } .seo-voice-card--hero blockquote { font-size: clamp(16px, 2vw, 19px); } .seo-voice-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(var(--jgl-accent-rgb), .16); } .seo-voice-chip { padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(var(--jgl-secondary-rgb), .28); color: var(--jgl-cyan); background: rgba(var(--jgl-secondary-rgb), .08); font-size: 9px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; } .seo-voice-index { color: rgba(255, 255, 255, .35); font-size: 11px; font-weight: 800; letter-spacing: 1px; } /* ========================================================= FAQ - HELP RAIL TIMELINE STYLE ========================================================= */ .seo-help-rail { position: relative; width: 100%; padding: 76px 0; overflow: hidden; color: #fff; background: radial-gradient(circle at 88% 20%, rgba(var(--jgl-secondary-rgb), .10), transparent 34%), linear-gradient(180deg, #080504 0%, #030201 100%); border-top: 1px solid rgba(var(--jgl-accent-rgb), .20); } .seo-help-shell { width: min(1120px, calc(100% - 40px)); margin: 0 auto; display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); gap: 36px; align-items: start; } .seo-help-aside { position: sticky; top: 24px; } .seo-help-kicker { display: inline-flex; margin-bottom: 12px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(var(--jgl-accent-rgb), .30); color: var(--jgl-gold); background: rgba(var(--jgl-accent-rgb), .08); font-size: 10px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; } .seo-help-aside h2 { margin: 0 0 12px; color: #fff; font-family: Arial, Helvetica, sans-serif; font-size: clamp(28px, 3.6vw, 42px); line-height: 1.08; font-weight: 800; letter-spacing: -.5px; } .seo-help-aside p { margin: 0 0 18px; color: var(--jgl-muted); font-size: 15px; line-height: 1.75; } .seo-help-tags { display: flex; flex-wrap: wrap; gap: 8px; } .seo-help-tag { padding: 7px 11px; border-radius: 999px; border: 1px solid rgba(var(--jgl-accent-rgb), .22); color: #d8ccc2; background: rgba(255, 255, 255, .03); font-size: 10px; font-weight: 700; letter-spacing: .4px; } .seo-help-track { position: relative; padding-left: 28px; } .seo-help-track::before { content: ""; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 2px; border-radius: 999px; background: linear-gradient( 180deg, rgba(var(--jgl-accent-rgb), .65), rgba(var(--jgl-secondary-rgb), .35) ); } .seo-help-item { position: relative; margin: 0 0 12px; border-radius: 16px; border: 1px solid rgba(var(--jgl-accent-rgb), .18); background: rgba(12, 7, 4, .78); overflow: hidden; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; } .seo-help-item:last-child { margin-bottom: 0; } .seo-help-item:hover { border-color: rgba(var(--jgl-accent-rgb), .34); transform: translateX(2px); } .seo-help-item[open] { border-color: rgba(var(--jgl-accent-rgb), .48); background: linear-gradient(145deg, rgba(var(--jgl-accent-rgb), .10), rgba(8, 4, 2, .95)); box-shadow: 0 14px 30px rgba(0, 0, 0, .26); } .seo-help-item summary { display: grid; grid-template-columns: 18px minmax(0, 1fr) 28px; gap: 12px; align-items: center; padding: 16px 16px 16px 8px; cursor: pointer; list-style: none; user-select: none; } .seo-help-item summary::-webkit-details-marker { display: none; } .seo-help-dot { width: 12px; height: 12px; margin-left: -22px; border-radius: 50%; border: 2px solid rgba(var(--jgl-accent-rgb), .55); background: #0a0604; box-shadow: 0 0 0 4px rgba(var(--jgl-accent-rgb), .12); transition: background .25s ease, border-color .25s ease, box-shadow .25s ease; } .seo-help-item[open] .seo-help-dot { border-color: var(--jgl-gold); background: linear-gradient(135deg, var(--jgl-gold), var(--jgl-cyan)); box-shadow: 0 0 16px rgba(var(--jgl-accent-rgb), .45); } .seo-help-q { color: #f2ebe6; font-size: 15px; font-weight: 700; line-height: 1.5; } .seo-help-item[open] .seo-help-q { color: var(--jgl-gold); } .seo-help-icon { position: relative; width: 28px; height: 28px; border-radius: 10px; border: 1px solid rgba(var(--jgl-accent-rgb), .24); background: rgba(var(--jgl-accent-rgb), .08); } .seo-help-icon::before, .seo-help-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; border-radius: 999px; background: var(--jgl-gold); transform: translate(-50%, -50%); transition: transform .25s ease, background .25s ease; } .seo-help-icon::after { transform: translate(-50%, -50%) rotate(90deg); } .seo-help-item[open] .seo-help-icon { border-color: rgba(var(--jgl-accent-rgb), .45); background: linear-gradient(135deg, var(--jgl-gold), var(--jgl-cyan)); } .seo-help-item[open] .seo-help-icon::before, .seo-help-item[open] .seo-help-icon::after { background: #1c242d; } .seo-help-item[open] .seo-help-icon::after { transform: translate(-50%, -50%) rotate(90deg) scaleY(0); } .seo-help-body { padding: 0 16px 16px 38px; animation: seoHelpIn .28s cubic-bezier(.22, 1, .36, 1); } .seo-help-body p { margin: 0; padding: 12px 14px; border-left: 3px solid rgba(var(--jgl-secondary-rgb), .55); border-radius: 0 12px 12px 0; color: #d8cbc0; font-size: 14px; line-height: 1.78; background: rgba(0, 0, 0, .16); } @keyframes seoHelpIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================= FLOATING BOTTOM MENU ========================================================= */ .jgl-floatbar { position: fixed; left: 50%; bottom: 16px; z-index: 99999; width: min(780px, calc(100% - 30px)); min-height: 74px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; align-items: stretch; padding: 8px; transform: translateX(-50%); border-radius: 22px; border: 1px solid rgba(var(--jgl-accent-rgb), .34); background: linear-gradient(180deg, rgba(var(--jgl-accent-rgb), .08), rgba(0, 0, 0, .42)), linear-gradient(180deg, rgba(12, 10, 8, .97), rgba(4, 3, 2, .99)); box-shadow: 0 20px 48px rgba(0, 0, 0, .62), 0 0 0 1px rgba(255, 255, 255, .04) inset, 0 0 28px rgba(var(--jgl-accent-rgb), .12); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .jgl-floatbar::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient( 135deg, rgba(var(--jgl-accent-rgb), .58), rgba(var(--jgl-secondary-rgb), .40), rgba(var(--jgl-accent-rgb), .28) ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .jgl-float-item { position: relative; min-width: 0; padding: 10px 8px 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .06); background: rgba(255, 255, 255, .03); color: #ececec; text-decoration: none !important; transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease; } .jgl-float-item:last-child { border-right: 0; } .jgl-float-item:hover { color: var(--jgl-cyan); border-color: rgba(var(--jgl-accent-rgb), .24); background: rgba(var(--jgl-accent-rgb), .10); transform: translateY(-2px); } .jgl-float-item::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 0; height: 2px; transform: translateX(-50%); background: linear-gradient(90deg, var(--jgl-cyan), var(--jgl-gold)); transition: width .25s ease; } .jgl-float-item:hover::after { width: 52%; } .jgl-float-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid rgba(var(--jgl-accent-rgb), .22); background: rgba(var(--jgl-accent-rgb), .10); } .jgl-float-icon svg { width: 20px; height: 20px; fill: #fff; transition: fill .25s ease, transform .25s ease; } .jgl-float-item:hover .jgl-float-icon svg { fill: var(--jgl-cyan); transform: translateY(-1px); } .jgl-float-label { max-width: 100%; overflow: hidden; color: inherit; font-size: 10px; font-weight: 800; line-height: 1.2; letter-spacing: .45px; text-align: center; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; } .jgl-float-main { padding-top: 30px; border-color: rgba(255, 255, 255, .14); background: linear-gradient(135deg, var(--jgl-gold), var(--jgl-cyan)); box-shadow: 0 10px 24px rgba(var(--jgl-accent-rgb), .26); } .jgl-float-main:hover { color: #101010; background: linear-gradient(135deg, var(--jgl-gold), var(--jgl-cyan)); } .jgl-float-main .jgl-float-icon { border-color: rgba(0, 0, 0, .12); background: rgba(0, 0, 0, .10); } .jgl-float-main .jgl-float-icon svg { fill: #111; } .jgl-float-main::after { background: linear-gradient(90deg, var(--jgl-gold), #fff, var(--jgl-cyan)); } .jgl-float-logo { position: absolute; left: 50%; top: -34px; width: 62px; height: 62px; display: flex; align-items: center; justify-content: center; transform: translateX(-50%); overflow: hidden; border-radius: 999px; border: 2px solid var(--jgl-cyan); background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .12), transparent 42%), linear-gradient(145deg, var(--jgl-mid), var(--jgl-navy)); box-shadow: 0 0 0 5px var(--jgl-navy), 0 8px 22px rgba(0, 0, 0, .62), 0 0 24px rgba(var(--jgl-accent-rgb), .30); transition: transform .25s ease, border-color .25s ease; } .jgl-float-logo img { width: 44px; height: 44px; object-fit: contain; } .jgl-float-main:hover .jgl-float-logo { transform: translateX(-50%) translateY(-4px); border-color: var(--jgl-gold); } .jgl-float-main .jgl-float-label { color: #101010; font-size: 11px; font-weight: 900; letter-spacing: .55px; } .jgl-mobile-label { display: none; } body { padding-bottom: 108px; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1050px) { .seo-help-shell { grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: 28px; } } @media (max-width: 760px) { .page-title { font-size: 30px !important; } .seo-voice-shell { width: calc(100% - 28px); padding: 52px 0 58px; } .seo-voice-head, .seo-help-shell { grid-template-columns: 1fr; gap: 18px; } .seo-voice-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .seo-voice-grid { grid-template-columns: 1fr; } .seo-voice-card--hero { grid-column: auto; } .seo-help-rail { padding: 54px 0; } .seo-help-shell { width: calc(100% - 28px); } .seo-help-aside { position: static; } .seo-help-aside h2 { font-size: 30px; } .seo-help-item summary { grid-template-columns: 18px minmax(0, 1fr) 26px; padding: 14px 12px 14px 8px; } .seo-help-body { padding: 0 12px 14px 34px; } .jgl-floatbar { left: 0; bottom: 0; width: 100%; min-height: 68px; transform: none; border-radius: 18px 18px 0 0; border-left: 0; border-right: 0; border-bottom: 0; padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); gap: 4px; } .jgl-floatbar::before { border-radius: 18px 18px 0 0; } .jgl-float-item { padding: 9px 3px calc(7px + env(safe-area-inset-bottom)); border-radius: 14px; } .jgl-float-icon { width: 22px; height: 22px; } .jgl-float-icon svg { width: 21px; height: 21px; } .jgl-float-label { font-size: 10px; } .jgl-float-main { padding-top: 29px; } .jgl-float-logo { top: -29px; width: 55px; height: 55px; box-shadow: 0 0 0 4px #13151a, 0 5px 15px rgba(0,0,0,.6), 0 0 18px rgba(var(--jgl-accent-rgb),.25); } .jgl-float-logo img { width: 41px; height: 41px; } .jgl-desktop-label { display: none; } .jgl-mobile-label { display: inline; } body { padding-bottom: 88px; } } @media (max-width: 460px) { .seo-voice-stats { grid-template-columns: 1fr; } .seo-voice-card-top { grid-template-columns: auto minmax(0, 1fr); } .seo-voice-card-rating { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-start; } .jgl-float-label { font-size: 9px; } .jgl-float-logo { width: 52px; height: 52px; } .jgl-float-logo img { width: 38px; height: 38px; } }