/* ========================================================= JST FINAL UNIFIED BUTTON STYLE --------------------------------------------------------- ALL buttons use the SAME behavior. NORMAL - Soft glossy silver-blue / navy - No hard border HOVER - Same deep-blue glossy surface - Button enlarges slightly - Other buttons shrink + blur - RGB/Rainbow glow travels continuously around the OUTER BORDER only - Text/icon/arrow become black ACTIVE - NEVER gets a special red style - Uses exactly the same normal appearance - If hovered, behaves exactly like every other button IMPORTANT - Only the RGB pseudo-element rotates. - The actual button never rotates. ========================================================= */ .jst-glass-menu, .jst-glass-menu * { box-sizing: border-box !important; } .jst-glass-menu { width: 100% !important; max-width: 560px !important; margin: 0 auto !important; } /* ========================================================= SECTION TITLE ========================================================= */ .jst-menu-title { display: flex !important; align-items: center !important; gap: 10px !important; margin: 0 0 14px 0 !important; padding: 0 !important; color: #071A33 !important; font-size: 16px !important; font-weight: 700 !important; /* subtle 3D / embossed icon finish */ text-shadow: 0 1px 0 rgba(255,255,255,.95), 0 -1px 0 rgba(255,255,255,.55), 1px 1px 0 rgba(17,63,96,.20), 0 2px 2px rgba(7,26,51,.18) !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: .35px !important; text-align: left !important; } .jst-title-accent { display: inline-block !important; width: 4px !important; min-width: 4px !important; height: 22px !important; border-radius: 999px !important; background: #244F7B !important; } /* ========================================================= MENU LISTS ========================================================= */ .jst-menu-list, .jst-primary-list, .jst-secondary-list { display: flex !important; flex-direction: column !important; gap: 9px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } /* ========================================================= COMMON BUTTON ========================================================= */ .jst-glass-menu .jst-menu-item { --rgb1: #ff3b30; --rgb2: #ff9500; --rgb3: #ffd60a; --rgb4: #34c759; --rgb5: #00c7ff; --rgb6: #007aff; --rgb7: #5856d6; --rgb8: #af52de; --rgb9: #ff2d55; position: relative !important; isolation: isolate !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; min-width: 0 !important; min-height: 58px !important; margin: 0 !important; padding: 9px 13px !important; overflow: visible !important; color: #071A33 !important; text-decoration: none !important; text-align: left !important; background: linear-gradient( 180deg, #fbfdff 0%, #e9f1f7 27%, #d6e4ee 56%, #c3d7e4 80%, #aec8d8 100% ) !important; border: 0 !important; outline: 0 !important; border-radius: 15px !important; transform: scale(1) translateY(0) !important; opacity: 1 !important; filter: none !important; box-shadow: 0 6px 12px rgba(7,26,51,.12), inset 0 2px 0 rgba(255,255,255,.96), inset 0 -6px 10px rgba(49,90,122,.10) !important; will-change: transform, opacity, filter, box-shadow !important; transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .28s ease, filter .28s ease, background .22s ease, box-shadow .24s ease !important; } /* ========================================================= GLOSSY HIGHLIGHT ========================================================= */ .jst-glass-menu .jst-menu-item::after { content: "" !important; position: absolute !important; left: 8% !important; top: 4px !important; width: 84% !important; height: 40% !important; border-radius: 999px !important; pointer-events: none !important; background: linear-gradient( 180deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.36) 48%, rgba(255,255,255,0) 100% ) !important; opacity: .76 !important; z-index: 2 !important; } /* ========================================================= RGB BORDER RING --------------------------------------------------------- This pseudo-element is the ONLY thing that rotates. A mask cuts out the center so RGB is visible only on the perimeter. ========================================================= */ .jst-glass-menu .jst-menu-item::before { content: "" !important; position: absolute !important; z-index: -1 !important; inset: -2px !important; padding: 2px !important; border-radius: 17px !important; background: conic-gradient( from 0deg, var(--rgb1) 0deg, var(--rgb2) 40deg, var(--rgb3) 80deg, var(--rgb4) 120deg, var(--rgb5) 160deg, var(--rgb6) 205deg, var(--rgb7) 250deg, var(--rgb8) 305deg, var(--rgb9) 335deg, var(--rgb1) 360deg ) !important; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important; -webkit-mask-composite: xor !important; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important; mask-composite: exclude !important; opacity: 0 !important; transform: rotate(0deg) !important; pointer-events: none !important; transition: opacity .20s ease !important; } /* ========================================================= OUTER RGB AURA ========================================================= */ .jst-glass-menu .jst-menu-item > .jst-menu-icon, .jst-glass-menu .jst-menu-item > .jst-menu-text, .jst-glass-menu .jst-menu-item > .jst-menu-arrow { position: relative !important; z-index: 4 !important; } .jst-glass-menu .jst-menu-item:hover { transform: scale(1.045) translateY(-2px) !important; z-index: 50 !important; color: #000000 !important; background: linear-gradient( 180deg, #e4f3ff 0%, #c4dff1 28%, #98bdd8 55%, #709dbe 79%, #5687a9 100% ) !important; box-shadow: 0 12px 24px rgba(7,35,62,.22), inset 0 2px 0 rgba(255,255,255,.98), inset 0 5px 10px rgba(255,255,255,.30), inset 0 -7px 11px rgba(21,61,94,.16) !important; } /* Hovered button's border spins independently */ .jst-glass-menu .jst-menu-item:hover::before { opacity: 1 !important; animation: jst-rainbow-perimeter 2.25s linear infinite !important; filter: drop-shadow(0 0 2px rgba(80,150,255,.22)) drop-shadow(0 0 5px rgba(175,82,222,.16)) !important; } /* Text/icon/arrow hover */ .jst-glass-menu .jst-menu-item:hover .jst-menu-icon { transform: scale(1.08) translateY(-1px) !important; color: #000000 !important; text-shadow: 0 1px 0 rgba(255,255,255,.80), 1px 1px 0 rgba(0,0,0,.20), 0 2px 3px rgba(0,0,0,.20) !important; text-shadow: none !important; } .jst-glass-menu .jst-menu-item:hover .jst-menu-text { transform: translateX(2px) !important; color: #000000 !important; text-shadow: none !important; } .jst-glass-menu .jst-menu-item:hover .jst-menu-arrow { transform: translateX(4px) !important; color: #000000 !important; text-shadow: none !important; } /* ========================================================= GLOBAL FOCUS MODE When ANY button is hovered, ALL buttons in BOTH sections respond together. ========================================================= */ .jst-glass-menu:has(.jst-menu-item:hover) .jst-menu-item { transform: scale(.93) !important; opacity: .38 !important; filter: blur(2.2px) saturate(.66) brightness(.90) !important; box-shadow: 0 2px 6px rgba(7,26,51,.07) !important; } /* Only hovered button stays large, sharp and bright */ .jst-glass-menu:has(.jst-menu-item:hover) .jst-menu-item:hover { transform: scale(1.045) translateY(-2px) !important; opacity: 1 !important; filter: none !important; z-index: 50 !important; } /* ========================================================= ACTIVE IS EXACTLY THE SAME AS NORMAL --------------------------------------------------------- No crimson. No special active glow. ========================================================= */ .jst-glass-menu .jst-menu-item.jst-active, .jst-glass-menu .jst-menu-item:first-child.jst-active { color: #071A33 !important; background: linear-gradient( 180deg, #fbfdff 0%, #e9f1f7 27%, #d6e4ee 56%, #c3d7e4 80%, #aec8d8 100% ) !important; border: 0 !important; outline: 0 !important; transform: scale(1) translateY(0) !important; opacity: 1 !important; filter: none !important; box-shadow: 0 6px 12px rgba(7,26,51,.12), inset 0 2px 0 rgba(255,255,255,.96), inset 0 -6px 10px rgba(49,90,122,.10) !important; } .jst-glass-menu .jst-menu-item.jst-active .jst-menu-icon, .jst-glass-menu .jst-menu-item.jst-active .jst-menu-text, .jst-glass-menu .jst-menu-item.jst-active .jst-menu-arrow { color: #174F78 !important; text-shadow: 0 1px 0 rgba(255,255,255,.95) !important; } /* Active behaves exactly like a normal button on hover */ .jst-glass-menu .jst-menu-item.jst-active:hover { transform: scale(1.045) translateY(-2px) !important; opacity: 1 !important; filter: none !important; } .jst-glass-menu .jst-menu-item.jst-active:hover::before { opacity: 1 !important; animation: jst-rainbow-perimeter 2.25s linear infinite !important; } /* ========================================================= PRESS ========================================================= */ .jst-glass-menu .jst-menu-item:active { transform: scale(.985) translateY(1px) !important; } /* ========================================================= SECTION SPACING ========================================================= */ .jst-glass-menu .jst-secondary-title { margin-top: 18px !important; } /* ========================================================= RGB ROTATION — ONLY THE RING ========================================================= */ @keyframes jst-rainbow-perimeter { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 768px) { .jst-glass-menu:has(.jst-menu-item:hover) .jst-menu-item { transform: scale(.965) !important; filter: blur(1.5px) saturate(.75) brightness(.92) !important; } .jst-glass-menu:has(.jst-menu-item:hover) .jst-menu-item:hover { transform: scale(1.02) translateY(-1px) !important; } } @media (max-width: 420px) { .jst-menu-list { gap: 8px !important; } .jst-menu-item { min-height: 55px !important; padding-left: 11px !important; padding-right: 10px !important; border-radius: 14px !important; } .jst-menu-item::before { border-radius: 16px !important; } .jst-menu-item::after { left: 9% !important; width: 82% !important; } .jst-menu-icon { flex-basis: 27px !important; width: 27px !important; font-size: 15px !important; margin-right: 8px !important; } .jst-menu-text { font-size: 14px !important; } .jst-menu-arrow { flex-basis: 20px !important; width: 20px !important; font-size: 21px !important; } .jst-glass-menu:has(.jst-menu-item:hover) .jst-menu-item { transform: scale(.965) !important; } .jst-glass-menu:has(.jst-menu-item:hover) .jst-menu-item:hover { transform: scale(1.02) translateY(-1px) !important; } } @media (prefers-reduced-motion: reduce) { .jst-glass-menu .jst-menu-item:hover::before { animation: none !important; } } /* ========================================================= FINAL FIX — ACTIVE BUTTON MUST PARTICIPATE IN FOCUS MODE --------------------------------------------------------- Problem: Online Submission carries .jst-active. The active rule was restoring its normal opacity/scale/filter after the global hover-focus rule. Result intended: - Hover ANY button: hovered = large + sharp + RGB ALL others = small + blur + dim INCLUDING .jst-active - When mouse leaves: all return to normal ========================================================= */ /* Highest-priority global focus state */ .jst-glass-menu:has(.jst-menu-item:hover) .jst-menu-item, .jst-glass-menu:has(.jst-menu-item:hover) .jst-menu-item.jst-active, .jst-glass-menu:has(.jst-menu-item:hover) .jst-menu-item:first-child.jst-active { transform: scale(.93) !important; opacity: .38 !important; filter: blur(2.2px) saturate(.66) brightness(.90) !important; } /* ONLY the currently hovered button escapes the blur */ .jst-glass-menu:has(.jst-menu-item:hover) .jst-menu-item:hover, .jst-glass-menu:has(.jst-menu-item:hover) .jst-menu-item.jst-active:hover { transform: scale(1.045) translateY(-2px) !important; opacity: 1 !important; filter: none !important; z-index: 50 !important; } /* ========================================================= ACTIVE MUST HAVE SAME NORMAL SURFACE ========================================================= */ .jst-glass-menu .jst-menu-item.jst-active { color: #071A33 !important; background: linear-gradient( 180deg, #fbfdff 0%, #e9f1f7 27%, #d6e4ee 56%, #c3d7e4 80%, #aec8d8 100% ) !important; border: 0 !important; outline: 0 !important; } /* Active content same as normal */ .jst-glass-menu .jst-menu-item.jst-active .jst-menu-icon, .jst-glass-menu .jst-menu-item.jst-active .jst-menu-text, .jst-glass-menu .jst-menu-item.jst-active .jst-menu-arrow { color: #174F78 !important; text-shadow: 0 1px 0 rgba(255,255,255,.95) !important; } /* ========================================================= ACTIVE HOVER = EXACTLY SAME AS EVERY OTHER HOVER BUTTON ========================================================= */ .jst-glass-menu .jst-menu-item.jst-active:hover { color: #000000 !important; background: linear-gradient( 180deg, #e4f3ff 0%, #c4dff1 28%, #98bdd8 55%, #709dbe 79%, #5687a9 100% ) !important; transform: scale(1.045) translateY(-2px) !important; opacity: 1 !important; filter: none !important; z-index: 50 !important; box-shadow: 0 12px 24px rgba(7,35,62,.22), inset 0 2px 0 rgba(255,255,255,.98), inset 0 5px 10px rgba(255,255,255,.30), inset 0 -7px 11px rgba(21,61,94,.16) !important; } .jst-glass-menu .jst-menu-item.jst-active:hover .jst-menu-icon, .jst-glass-menu .jst-menu-item.jst-active:hover .jst-menu-text, .jst-glass-menu .jst-menu-item.jst-active:hover .jst-menu-arrow { color: #000000 !important; text-shadow: none !important; } /* ========================================================= ACTIVE BUTTON MUST RECEIVE THE SAME RGB HOVER BORDER ========================================================= */ .jst-glass-menu .jst-menu-item.jst-active:hover::before { opacity: 1 !important; background: conic-gradient( from 0deg, var(--rgb1) 0deg, var(--rgb2) 40deg, var(--rgb3) 80deg, var(--rgb4) 120deg, var(--rgb5) 160deg, var(--rgb6) 205deg, var(--rgb7) 250deg, var(--rgb8) 305deg, var(--rgb9) 335deg, var(--rgb1) 360deg ) !important; animation: jst-rainbow-perimeter 2.25s linear infinite !important; filter: drop-shadow(0 0 2px rgba(80,150,255,.22)) drop-shadow(0 0 5px rgba(175,82,222,.16)) !important; } /* ========================================================= WHEN ANOTHER BUTTON IS HOVERED: .jst-active IS BLURRED LIKE ALL OTHER NON-HOVER BUTTONS. This rule is deliberately placed LAST. ========================================================= */ .jst-glass-menu:has(.jst-menu-item:hover) .jst-menu-item.jst-active:not(:hover) { transform: scale(.93) !important; opacity: .38 !important; filter: blur(2.2px) saturate(.66) brightness(.90) !important; box-shadow: 0 2px 6px rgba(7,26,51,.07) !important; } /* ========================================================= MOBILE FOCUS ========================================================= */ @media (max-width: 768px) { .jst-glass-menu:has(.jst-menu-item:hover) .jst-menu-item.jst-active:not(:hover) { transform: scale(.965) !important; opacity: .38 !important; filter: blur(1.5px) saturate(.75) brightness(.92) !important; } .jst-glass-menu:has(.jst-menu-item:hover) .jst-menu-item.jst-active:hover { transform: scale(1.02) translateY(-1px) !important; } } /* ========================================================= TYPOGRAPHY / ICON ONLY OVERRIDE --------------------------------------------------------- Button/background/glow/focus layout is intentionally untouched. Only text, font weight, icon sizing and the icon-to-text spacing are adjusted to match the reference. ========================================================= */ /* Text */ .jst-glass-menu .jst-menu-text { font-size: 14px !important; font-weight: 600 !important; line-height: 1.35 !important; letter-spacing: 0 !important; } /* Icon */ .jst-glass-menu .jst-menu-icon { flex-basis: 24px !important; width: 24px !important; height: 24px !important; margin-right: 13px !important; font-size: 14px !important; font-weight: 600 !important; } /* Keep arrow exactly as before */ .jst-glass-menu .jst-menu-arrow { margin-left: 8px !important; } /* Responsive: typography/icon only */ @media (max-width: 420px) { .jst-glass-menu .jst-menu-text { font-size: 12.5px !important; font-weight: 600 !important; line-height: 1.34 !important; } .jst-glass-menu .jst-menu-icon { flex-basis: 24px !important; width: 24px !important; height: 24px !important; margin-right: 11px !important; font-size: 14px !important; } } /* ========================================================= FINAL TEXT-ONLY LAYOUT --------------------------------------------------------- Icons and arrows are removed completely from the layout. The text is centered inside each button. All existing button/glow/focus styling remains intact. ========================================================= */ .jst-glass-menu .jst-menu-item { justify-content: center !important; } /* Remove icon and arrow completely so they leave NO SPACE */ .jst-glass-menu .jst-menu-icon, .jst-glass-menu .jst-menu-arrow { display: none !important; width: 0 !important; min-width: 0 !important; flex: 0 0 0 !important; margin: 0 !important; padding: 0 !important; } /* Center text in the full button */ .jst-glass-menu .jst-menu-text { display: block !important; flex: 1 1 100% !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; text-align: center !important; transform: none !important; } /* Keep text centered while hovering; focus-mode animation may still scale/blur the button itself. */ .jst-glass-menu .jst-menu-item:hover .jst-menu-text { transform: none !important; } /* Mobile text remains centered */ @media (max-width: 420px) { .jst-glass-menu .jst-menu-item { justify-content: center !important; } .jst-glass-menu .jst-menu-text { width: 100% !important; flex-basis: 100% !important; text-align: center !important; margin: 0 !important; padding: 0 !important; } } /* ========================================================= HIDE DEFAULT OJS / PKP FOOTER BRANDING --------------------------------------------------------- ADDED ONLY TO REMOVE THE LARGE DEFAULT "Platform & workflow by OJS / PKP" LOGO. ALL JST MENU STYLES ABOVE ARE UNCHANGED. ========================================================= */ .pkp_brand_footer, footer .pkp_brand_footer, .pkp_structure_footer_wrapper .pkp_brand_footer, .pkp_structure_footer .pkp_brand_footer { display: none !important; } /* ========================================================= FINAL USER REQUEST — TITLE CENTER + UNIFIED BUTTON TEXT --------------------------------------------------------- 1. "MENU JOURNAL" is centered. 2. "Online Submission" uses the same normal text color as the other buttons. 3. Existing button surfaces, hover, RGB, blur, spacing, and animations are intentionally unchanged. ========================================================= */ /* Center the MENU JOURNAL heading */ .jst-glass-menu .jst-menu-title { justify-content: center !important; text-align: center !important; } /* Make Online Submission use the same normal text color */ .jst-glass-menu .jst-menu-item.jst-active .jst-menu-text { color: #071A33 !important; text-shadow: none !important; } /* Keep the same unified color for active icon/arrow if present */ .jst-glass-menu .jst-menu-item.jst-active .jst-menu-icon, .jst-glass-menu .jst-menu-item.jst-active .jst-menu-arrow { color: #071A33 !important; } /* Hover color remains black, exactly like the other buttons */ .jst-glass-menu .jst-menu-item.jst-active:hover .jst-menu-text, .jst-glass-menu .jst-menu-item.jst-active:hover .jst-menu-icon, .jst-glass-menu .jst-menu-item.jst-active:hover .jst-menu-arrow { color: #000000 !important; text-shadow: none !important; }