/* ============================================================ ELR MOBILE V1 Explorations in Linguistic Review Mobile design layer. Desktop remains unchanged. Blue carries structure. Gold marks discovery. ============================================================ */ /* ============================================================ DESKTOP ============================================================ */ .elr-mobile-nav-direct{ display:none; } /* ============================================================ MOBILE FOUNDATION ============================================================ */ @media(max-width:900px){ html, body{ width:100%; max-width:100%; overflow-x:hidden; } *, *::before, *::after{ box-sizing:border-box; } img{ max-width:100%; height:auto; } /* ======================================================== DESKTOP NAV OFF ======================================================== */ .elr-nav{ display:none !important; } /* ======================================================== OFFICIAL ELR MOBILE NAVIGATION ======================================================== */ .elr-mobile-nav-direct{ position:sticky; top:0; z-index:2147482000; display:block !important; width:100%; margin:0; background: linear-gradient( 105deg, #102F50 0%, #173F69 72%, #315F89 100% ); border-bottom: 2px solid #B08A4A; font-family: Arial, Helvetica, sans-serif; } .elr-mobile-nav-direct > summary{ display:flex !important; align-items:center; justify-content:space-between; min-height:52px; width: calc(100% - 28px); margin: 0 auto; padding:0; list-style:none; cursor:pointer; color:#FFFFFF; } .elr-mobile-nav-direct > summary::-webkit-details-marker{ display:none; } .elr-mobile-nav-direct > summary::marker{ content:""; } /* -------------------------------------------------------- MOBILE BRAND -------------------------------------------------------- */ .elr-mobile-nav-direct-brand{ display:flex; align-items:center; min-width:0; gap:9px; } .elr-mobile-nav-direct-mark{ position:relative; display:inline-flex; align-items:center; justify-content:center; min-width:37px; height:23px; padding: 0 7px; color:#FFFFFF; background: rgba(255,255,255,.06); border-left: 3px solid #B08A4A; font-family: Georgia, "Times New Roman", serif; font-size:9px; font-weight:700; letter-spacing:.11em; } .elr-mobile-nav-direct-journal{ max-width: min( 55vw, 255px ); overflow:hidden; color: rgba(255,255,255,.93); font-family: Georgia, "Times New Roman", serif; font-size:11px; line-height:1.2; white-space:nowrap; text-overflow:ellipsis; } /* -------------------------------------------------------- MENU BUTTON -------------------------------------------------------- */ .elr-mobile-nav-direct-button{ flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; min-height:32px; margin-left:10px; padding: 0 9px; color:#FFFFFF; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.25); border-radius:2px; font-size:8px; font-weight:800; letter-spacing:.13em; } .elr-mobile-nav-direct-icon{ position:relative; display:block; width:14px; height:10px; border-top: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF; } .elr-mobile-nav-direct-icon::after{ content:""; position:absolute; top:4px; left:0; width:14px; height:1px; background:#FFFFFF; } /* Open icon */ .elr-mobile-nav-direct[open] .elr-mobile-nav-direct-icon{ border:0; } .elr-mobile-nav-direct[open] .elr-mobile-nav-direct-icon::before, .elr-mobile-nav-direct[open] .elr-mobile-nav-direct-icon::after{ content:""; position:absolute; top:5px; left:0; width:14px; height:1px; background:#FFFFFF; } .elr-mobile-nav-direct[open] .elr-mobile-nav-direct-icon::before{ transform: rotate(45deg); } .elr-mobile-nav-direct[open] .elr-mobile-nav-direct-icon::after{ transform: rotate(-45deg); } /* ======================================================== MENU PANEL ======================================================== */ .elr-mobile-nav-direct-panel{ width:100%; max-height: calc(100vh - 54px); overflow-y:auto; overscroll-behavior:contain; background:#FFFFFF; border-top: 1px solid rgba(176,138,74,.5); box-shadow: 0 14px 30px rgba(16,47,80,.16); } .elr-mobile-nav-direct-inner{ width: calc(100% - 30px); max-width:620px; margin: 0 auto; padding: 9px 0 14px; } .elr-mobile-nav-direct-section{ padding: 11px 0 8px; } .elr-mobile-nav-direct-section + .elr-mobile-nav-direct-section{ border-top: 1px solid #E3E8EC; } .elr-mobile-nav-direct-label{ display:flex; align-items:center; gap:8px; margin: 0 0 4px; color:#9A773D; font-size:8px; line-height:1; font-weight:800; letter-spacing:.17em; } .elr-mobile-nav-direct-label::before{ content:""; display:block; width:11px; height:1px; background:#B08A4A; } .elr-mobile-nav-direct-section a{ position:relative; display:flex !important; align-items:center; min-height:42px; width:100%; padding: 8px 8px 8px 18px; color:#173F69 !important; background:#FFFFFF !important; border-bottom: 1px solid #EDF0F2; font-family: Georgia, "Times New Roman", serif !important; font-size:14px !important; line-height:1.28 !important; font-weight:400 !important; text-decoration:none !important; opacity:1 !important; visibility:visible !important; } .elr-mobile-nav-direct-section a::before{ content:""; position:absolute; left:0; top:50%; width:7px; height:1px; background:#B08A4A; } .elr-mobile-nav-direct-section a:last-child{ border-bottom:0; } /* ======================================================== LINGUISTIC SIGNATURE ======================================================== */ .elr-mobile-nav-direct-signature{ position:relative; min-height:42px; margin-top:5px; padding: 12px 0 8px; overflow:hidden; border-top: 1px solid #DCE4EA; color:#7B8B97; font-size:8px; line-height:1.45; letter-spacing:.07em; } .elr-mobile-nav-direct-signature strong{ color:#98753D; font-weight:800; } .elr-mobile-nav-direct-tree{ position:absolute; right:2px; bottom:4px; color: rgba(23,63,105,.08); font-family: Georgia, "Times New Roman", serif; font-size:19px; letter-spacing:.09em; pointer-events:none; } /* ======================================================== ELR HOMEPAGE MOBILE V1 ======================================================== */ body.elr-home-mobile-v1{ background:#FFFFFF; } /* -------------------------------------------------------- HERO SLIDER -------------------------------------------------------- */ body.elr-home-mobile-v1 .elr-hero{ width:100% !important; height:auto !important; min-height:0 !important; margin:0 !important; overflow:hidden; } body.elr-home-mobile-v1 .elr-hero-stage{ width:100% !important; min-height: clamp( 330px, 72vw, 430px ) !important; height:auto !important; } body.elr-home-mobile-v1 .elr-hero-slide{ min-height: clamp( 330px, 72vw, 430px ) !important; height:auto !important; padding: 34px 22px 38px !important; background-position: center !important; } body.elr-home-mobile-v1 .elr-hero-copy{ width:100% !important; max-width:100% !important; margin:0 !important; padding:0 !important; } body.elr-home-mobile-v1 .elr-hero-title{ max-width:100% !important; margin: 11px 0 14px !important; font-size: clamp( 31px, 9vw, 43px ) !important; line-height: 1.06 !important; letter-spacing: -.025em !important; } body.elr-home-mobile-v1 .elr-hero-label{ font-size: 9px !important; letter-spacing: .16em !important; } body.elr-home-mobile-v1 .elr-hero-copy p{ max-width:100% !important; font-size: 15px !important; line-height: 1.62 !important; } body.elr-home-mobile-v1 .elr-hero a{ min-height: 42px; touch-action: manipulation; } /* -------------------------------------------------------- HOMEPAGE SECTION RHYTHM -------------------------------------------------------- */ body.elr-home-mobile-v1 main, body.elr-home-mobile-v1 section{ max-width:100%; overflow:hidden; } body.elr-home-mobile-v1 section{ scroll-margin-top: 58px; } /* Most ELR homepage multi-column structures use grid/flex containers with semantic class names. Mobile V1 makes them single-column without affecting desktop. */ body.elr-home-mobile-v1 [class*="grid"], body.elr-home-mobile-v1 [class*="cards"], body.elr-home-mobile-v1 [class*="columns"]{ grid-template-columns: 1fr !important; } body.elr-home-mobile-v1 [class*="card"]{ max-width:100% !important; } body.elr-home-mobile-v1 [class*="issue"], body.elr-home-mobile-v1 [class*="article"], body.elr-home-mobile-v1 [class*="collection"]{ max-width:100%; } /* -------------------------------------------------------- COMMUNITY / FINAL HOME SECTION -------------------------------------------------------- */ body.elr-home-mobile-v1 .elr-community{ padding-left: 20px !important; padding-right: 20px !important; } /* -------------------------------------------------------- BUTTONS / LINKS -------------------------------------------------------- */ body.elr-home-mobile-v1 a, body.elr-home-mobile-v1 button{ touch-action: manipulation; } /* -------------------------------------------------------- IMAGES -------------------------------------------------------- */ body.elr-home-mobile-v1 section img{ max-width: 100% !important; height:auto !important; object-fit: contain; } } /* ============================================================ SMALL PHONE ============================================================ */ @media(max-width:430px){ .elr-mobile-nav-direct-journal{ max-width:155px; } body.elr-home-mobile-v1 .elr-hero-slide{ padding: 29px 18px 32px !important; } body.elr-home-mobile-v1 .elr-hero-title{ font-size: 32px !important; } } /* ============================================================ VERY SMALL PHONE ============================================================ */ @media(max-width:360px){ .elr-mobile-nav-direct-journal{ display:none; } .elr-mobile-nav-direct-inner{ width: calc(100% - 24px); } } /* ============================================================ ELR MOBILE MENU V1.1 START Multi-level navigation iPhone touch-scroll fix ============================================================ */ @media(max-width:900px){ /* ======================================================== WHEN MENU OPENS: pin entire navigation to viewport. ======================================================== */ .elr-mobile-nav-direct[open]{ position:fixed !important; top:0 !important; right:0 !important; left:0 !important; z-index: 2147483000 !important; width: 100% !important; height: 100dvh; max-height: 100dvh; overflow: hidden; background: #102F50; } @supports not (height:100dvh){ .elr-mobile-nav-direct[open]{ height: 100vh; max-height: 100vh; } } /* ======================================================== MAIN MENU BAR ======================================================== */ .elr-mobile-nav-main-summary{ position:relative; z-index:2; min-height: 54px !important; background: linear-gradient( 105deg, #102F50 0%, #173F69 72%, #315F89 100% ); } .elr-mobile-nav-direct-journal{ display:flex; flex-direction:column; justify-content:center; gap:1px; } .elr-mobile-nav-journal-short{ display:none; color: rgba(222,196,143,.86); font-family: Arial, Helvetica, sans-serif; font-size: 7px; line-height: 1; font-weight: 700; letter-spacing: .13em; } /* ======================================================== FIX THE iPHONE SCROLL PROBLEM ======================================================== */ .elr-mobile-nav-direct[open] .elr-mobile-nav-direct-panel{ position:relative; display:block; width:100%; height: calc( 100dvh - 54px ); max-height: calc( 100dvh - 54px ); margin:0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior-y: contain; scroll-behavior: smooth; background: #F8FAFB; padding-bottom: max( 18px, env( safe-area-inset-bottom ) ); } @supports not (height:100dvh){ .elr-mobile-nav-direct[open] .elr-mobile-nav-direct-panel{ height: calc( 100vh - 54px ); max-height: calc( 100vh - 54px ); } } .elr-mobile-nav-direct-inner{ width: calc(100% - 28px); max-width: 620px; margin: 0 auto; padding: 15px 0 22px; touch-action: pan-y; } /* ======================================================== SECOND LEVEL ======================================================== */ .elr-mobile-submenu{ display:block; margin: 0 0 10px; overflow:hidden; background: #FFFFFF; border: 1px solid #DCE4EA; border-left: 3px solid #173F69; border-radius: 2px; box-shadow: 0 4px 14px rgba( 16, 47, 80, .035 ); } .elr-mobile-submenu:nth-of-type(2){ border-left-color: #B08A4A; } .elr-mobile-submenu-summary{ position:relative; display:flex; align-items:center; justify-content:space-between; min-height: 64px; width:100%; box-sizing: border-box; padding: 12px 15px 12px 17px; cursor:pointer; list-style:none; user-select:none; -webkit-tap-highlight-color: transparent; background: #FFFFFF; } .elr-mobile-submenu-summary::-webkit-details-marker{ display:none; } .elr-mobile-submenu-summary::marker{ content:""; } .elr-mobile-submenu-copy{ display:flex; flex-direction:column; gap: 6px; min-width:0; } .elr-mobile-submenu-title{ color: #173F69; font-family: Arial, Helvetica, sans-serif; font-size: 9px; line-height: 1; font-weight: 800; letter-spacing: .17em; } .elr-mobile-submenu-note{ overflow:hidden; color: #778A98; font-family: Georgia, "Times New Roman", serif; font-size: 12px; line-height: 1.25; font-weight: 400; white-space: nowrap; text-overflow: ellipsis; } /* -------------------------------------------------------- CHEVRON -------------------------------------------------------- */ .elr-mobile-submenu-chevron{ position:relative; flex: 0 0 26px; width: 26px; height: 26px; margin-left: 12px; border: 1px solid #D4DDE4; border-radius: 50%; background: #F7F9FB; } .elr-mobile-submenu-chevron::after{ content:""; position:absolute; top: 8px; left: 9px; width: 6px; height: 6px; border-right: 1px solid #173F69; border-bottom: 1px solid #173F69; transform: rotate(45deg); transition: transform .16s ease; } .elr-mobile-submenu[open] .elr-mobile-submenu-chevron::after{ top: 10px; transform: rotate(225deg); } /* ======================================================== THIRD LEVEL / LINKS ======================================================== */ .elr-mobile-submenu-links{ padding: 2px 15px 10px; background: #FCFDFD; border-top: 1px solid #E7ECEF; } .elr-mobile-submenu-links a{ position:relative; display:flex !important; align-items:center; min-height: 46px; width: 100%; padding: 8px 8px 8px 18px; color: #173F69 !important; background: transparent !important; border-bottom: 1px solid #E9EDF0; font-family: Georgia, "Times New Roman", serif !important; font-size: 14px !important; line-height: 1.30 !important; font-weight: 400 !important; text-decoration: none !important; opacity: 1 !important; visibility: visible !important; touch-action: manipulation; } .elr-mobile-submenu-links a:last-child{ border-bottom: 0; } .elr-mobile-submenu-links a::before{ content:""; position:absolute; left: 0; top: 50%; width: 7px; height: 1px; background: #B08A4A; } .elr-mobile-submenu-links a:active{ background: #F3F6F8 !important; } /* ======================================================== GROUP IDENTITIES ======================================================== */ .elr-mobile-submenu-discover .elr-mobile-submenu-title::before{ content:"01"; margin-right: 8px; color: #B08A4A; font-family: Georgia, "Times New Roman", serif; font-weight: 400; } .elr-mobile-submenu-publish .elr-mobile-submenu-title::before{ content:"02"; margin-right: 8px; color: #B08A4A; font-family: Georgia, "Times New Roman", serif; font-weight: 400; } .elr-mobile-submenu-journal .elr-mobile-submenu-title::before{ content:"03"; margin-right: 8px; color: #B08A4A; font-family: Georgia, "Times New Roman", serif; font-weight: 400; } /* ======================================================== ELR LINGUISTIC SIGNATURE ======================================================== */ .elr-mobile-menu-signature{ position:relative; display:flex; align-items:center; justify-content:space-between; min-height: 74px; margin-top: 16px; padding: 14px 15px; overflow:hidden; background: linear-gradient( 105deg, #102F50, #173F69 ); border-top: 2px solid #B08A4A; color: rgba( 255, 255, 255, .78 ); } .elr-mobile-menu-signature-copy{ display:flex; flex-direction:column; gap: 7px; position:relative; z-index:2; font-family: Georgia, "Times New Roman", serif; font-size: 11px; line-height: 1.2; } .elr-mobile-menu-signature-copy strong{ color: #DEC48F; font-family: Arial, Helvetica, sans-serif; font-size: 8px; font-weight: 800; letter-spacing: .08em; } .elr-mobile-menu-tree{ display:flex; flex-direction:column; align-items:center; position:absolute; right: 20px; top: 8px; color: rgba( 255, 255, 255, .10 ); font-family: Georgia, "Times New Roman", serif; font-size: 11px; line-height: .9; pointer-events: none; } .elr-tree-branch{ color: rgba( 196, 166, 109, .25 ); } /* ======================================================== OPTIONAL SCROLLBAR ======================================================== */ .elr-mobile-nav-direct-panel{ scrollbar-width: thin; scrollbar-color: rgba( 23, 63, 105, .24 ) transparent; } .elr-mobile-nav-direct-panel ::-webkit-scrollbar{ width: 3px; } .elr-mobile-nav-direct-panel ::-webkit-scrollbar-thumb{ background: rgba( 23, 63, 105, .24 ); border-radius: 3px; } } /* ============================================================ SMALL SCREEN ============================================================ */ @media(max-width:430px){ .elr-mobile-nav-journal-main{ display:none; } .elr-mobile-nav-journal-short{ display:block; } .elr-mobile-nav-direct-mark{ min-width: 39px; } .elr-mobile-submenu-summary{ min-height: 61px; padding: 11px 13px 11px 15px; } .elr-mobile-submenu-note{ max-width: 215px; font-size: 11px; } } /* ============================================================ VERY SMALL SCREEN ============================================================ */ @media(max-width:360px){ .elr-mobile-submenu-note{ max-width: 175px; } .elr-mobile-nav-direct-button{ padding: 0 8px; } } /* ELR MOBILE MENU V1.1 END */ /* ============================================================ ELR MOBILE MENU V1.1 START Multi-level navigation iPhone touch-scroll fix ============================================================ */ @media(max-width:900px){ /* ======================================================== WHEN MENU OPENS: pin entire navigation to viewport. ======================================================== */ .elr-mobile-nav-direct[open]{ position:fixed !important; top:0 !important; right:0 !important; left:0 !important; z-index: 2147483000 !important; width: 100% !important; height: 100dvh; max-height: 100dvh; overflow: hidden; background: #102F50; } @supports not (height:100dvh){ .elr-mobile-nav-direct[open]{ height: 100vh; max-height: 100vh; } } /* ======================================================== MAIN MENU BAR ======================================================== */ .elr-mobile-nav-main-summary{ position:relative; z-index:2; min-height: 54px !important; background: linear-gradient( 105deg, #102F50 0%, #173F69 72%, #315F89 100% ); } .elr-mobile-nav-direct-journal{ display:flex; flex-direction:column; justify-content:center; gap:1px; } .elr-mobile-nav-journal-short{ display:none; color: rgba(222,196,143,.86); font-family: Arial, Helvetica, sans-serif; font-size: 7px; line-height: 1; font-weight: 700; letter-spacing: .13em; } /* ======================================================== FIX THE iPHONE SCROLL PROBLEM ======================================================== */ .elr-mobile-nav-direct[open] .elr-mobile-nav-direct-panel{ position:relative; display:block; width:100%; height: calc( 100dvh - 54px ); max-height: calc( 100dvh - 54px ); margin:0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior-y: contain; scroll-behavior: smooth; background: #F8FAFB; padding-bottom: max( 18px, env( safe-area-inset-bottom ) ); } @supports not (height:100dvh){ .elr-mobile-nav-direct[open] .elr-mobile-nav-direct-panel{ height: calc( 100vh - 54px ); max-height: calc( 100vh - 54px ); } } .elr-mobile-nav-direct-inner{ width: calc(100% - 28px); max-width: 620px; margin: 0 auto; padding: 15px 0 22px; touch-action: pan-y; } /* ======================================================== SECOND LEVEL ======================================================== */ .elr-mobile-submenu{ display:block; margin: 0 0 10px; overflow:hidden; background: #FFFFFF; border: 1px solid #DCE4EA; border-left: 3px solid #173F69; border-radius: 2px; box-shadow: 0 4px 14px rgba( 16, 47, 80, .035 ); } .elr-mobile-submenu:nth-of-type(2){ border-left-color: #B08A4A; } .elr-mobile-submenu-summary{ position:relative; display:flex; align-items:center; justify-content:space-between; min-height: 64px; width:100%; box-sizing: border-box; padding: 12px 15px 12px 17px; cursor:pointer; list-style:none; user-select:none; -webkit-tap-highlight-color: transparent; background: #FFFFFF; } .elr-mobile-submenu-summary::-webkit-details-marker{ display:none; } .elr-mobile-submenu-summary::marker{ content:""; } .elr-mobile-submenu-copy{ display:flex; flex-direction:column; gap: 6px; min-width:0; } .elr-mobile-submenu-title{ color: #173F69; font-family: Arial, Helvetica, sans-serif; font-size: 9px; line-height: 1; font-weight: 800; letter-spacing: .17em; } .elr-mobile-submenu-note{ overflow:hidden; color: #778A98; font-family: Georgia, "Times New Roman", serif; font-size: 12px; line-height: 1.25; font-weight: 400; white-space: nowrap; text-overflow: ellipsis; } /* -------------------------------------------------------- CHEVRON -------------------------------------------------------- */ .elr-mobile-submenu-chevron{ position:relative; flex: 0 0 26px; width: 26px; height: 26px; margin-left: 12px; border: 1px solid #D4DDE4; border-radius: 50%; background: #F7F9FB; } .elr-mobile-submenu-chevron::after{ content:""; position:absolute; top: 8px; left: 9px; width: 6px; height: 6px; border-right: 1px solid #173F69; border-bottom: 1px solid #173F69; transform: rotate(45deg); transition: transform .16s ease; } .elr-mobile-submenu[open] .elr-mobile-submenu-chevron::after{ top: 10px; transform: rotate(225deg); } /* ======================================================== THIRD LEVEL / LINKS ======================================================== */ .elr-mobile-submenu-links{ padding: 2px 15px 10px; background: #FCFDFD; border-top: 1px solid #E7ECEF; } .elr-mobile-submenu-links a{ position:relative; display:flex !important; align-items:center; min-height: 46px; width: 100%; padding: 8px 8px 8px 18px; color: #173F69 !important; background: transparent !important; border-bottom: 1px solid #E9EDF0; font-family: Georgia, "Times New Roman", serif !important; font-size: 14px !important; line-height: 1.30 !important; font-weight: 400 !important; text-decoration: none !important; opacity: 1 !important; visibility: visible !important; touch-action: manipulation; } .elr-mobile-submenu-links a:last-child{ border-bottom: 0; } .elr-mobile-submenu-links a::before{ content:""; position:absolute; left: 0; top: 50%; width: 7px; height: 1px; background: #B08A4A; } .elr-mobile-submenu-links a:active{ background: #F3F6F8 !important; } /* ======================================================== GROUP IDENTITIES ======================================================== */ .elr-mobile-submenu-discover .elr-mobile-submenu-title::before{ content:"01"; margin-right: 8px; color: #B08A4A; font-family: Georgia, "Times New Roman", serif; font-weight: 400; } .elr-mobile-submenu-publish .elr-mobile-submenu-title::before{ content:"02"; margin-right: 8px; color: #B08A4A; font-family: Georgia, "Times New Roman", serif; font-weight: 400; } .elr-mobile-submenu-journal .elr-mobile-submenu-title::before{ content:"03"; margin-right: 8px; color: #B08A4A; font-family: Georgia, "Times New Roman", serif; font-weight: 400; } /* ======================================================== ELR LINGUISTIC SIGNATURE ======================================================== */ .elr-mobile-menu-signature{ position:relative; display:flex; align-items:center; justify-content:space-between; min-height: 74px; margin-top: 16px; padding: 14px 15px; overflow:hidden; background: linear-gradient( 105deg, #102F50, #173F69 ); border-top: 2px solid #B08A4A; color: rgba( 255, 255, 255, .78 ); } .elr-mobile-menu-signature-copy{ display:flex; flex-direction:column; gap: 7px; position:relative; z-index:2; font-family: Georgia, "Times New Roman", serif; font-size: 11px; line-height: 1.2; } .elr-mobile-menu-signature-copy strong{ color: #DEC48F; font-family: Arial, Helvetica, sans-serif; font-size: 8px; font-weight: 800; letter-spacing: .08em; } .elr-mobile-menu-tree{ display:flex; flex-direction:column; align-items:center; position:absolute; right: 20px; top: 8px; color: rgba( 255, 255, 255, .10 ); font-family: Georgia, "Times New Roman", serif; font-size: 11px; line-height: .9; pointer-events: none; } .elr-tree-branch{ color: rgba( 196, 166, 109, .25 ); } /* ======================================================== OPTIONAL SCROLLBAR ======================================================== */ .elr-mobile-nav-direct-panel{ scrollbar-width: thin; scrollbar-color: rgba( 23, 63, 105, .24 ) transparent; } .elr-mobile-nav-direct-panel ::-webkit-scrollbar{ width: 3px; } .elr-mobile-nav-direct-panel ::-webkit-scrollbar-thumb{ background: rgba( 23, 63, 105, .24 ); border-radius: 3px; } } /* ============================================================ SMALL SCREEN ============================================================ */ @media(max-width:430px){ .elr-mobile-nav-journal-main{ display:none; } .elr-mobile-nav-journal-short{ display:block; } .elr-mobile-nav-direct-mark{ min-width: 39px; } .elr-mobile-submenu-summary{ min-height: 61px; padding: 11px 13px 11px 15px; } .elr-mobile-submenu-note{ max-width: 215px; font-size: 11px; } } /* ============================================================ VERY SMALL SCREEN ============================================================ */ @media(max-width:360px){ .elr-mobile-submenu-note{ max-width: 175px; } .elr-mobile-nav-direct-button{ padding: 0 8px; } } /* ELR MOBILE MENU V1.1 END */ /* ============================================================ ELR MOBILE V1.2 START Compact topbar ELR-only mobile identity Refined multi-level navigation ============================================================ */ @media(max-width:900px){ /* ======================================================== TOP BAR ======================================================== */ .elr-mobile-nav-direct > summary.elr-mobile-nav-main-summary{ min-height: 48px !important; width: calc(100% - 24px) !important; padding: 0 !important; } /* Mobile identity: show ELR only. */ .elr-mobile-nav-direct .elr-mobile-nav-direct-journal{ display: none !important; } .elr-mobile-nav-direct .elr-mobile-nav-direct-brand{ gap: 0 !important; min-width: auto !important; } .elr-mobile-nav-direct .elr-mobile-nav-direct-mark{ min-width: 45px !important; height: 24px !important; padding: 0 10px !important; background: rgba(255,255,255,.045) !important; border-left: 3px solid #B08A4A !important; color: #FFFFFF !important; font-size: 10px !important; letter-spacing: .12em !important; } /* ======================================================== MENU BUTTON ======================================================== */ .elr-mobile-nav-direct .elr-mobile-nav-direct-button{ min-height: 30px !important; height: 30px !important; margin-left: auto !important; padding: 0 9px !important; gap: 7px !important; font-size: 8px !important; } .elr-mobile-nav-direct .elr-mobile-nav-direct-icon{ width: 13px !important; height: 9px !important; } .elr-mobile-nav-direct .elr-mobile-nav-direct-icon::after{ width: 13px !important; top: 3px !important; } .elr-mobile-nav-direct[open] .elr-mobile-nav-direct-icon::before, .elr-mobile-nav-direct[open] .elr-mobile-nav-direct-icon::after{ width: 13px !important; top: 4px !important; } /* ======================================================== OPEN MENU HEIGHT ======================================================== */ .elr-mobile-nav-direct[open]{ height: 100dvh !important; max-height: 100dvh !important; } .elr-mobile-nav-direct[open] .elr-mobile-nav-direct-panel{ height: calc( 100dvh - 48px ) !important; max-height: calc( 100dvh - 48px ) !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; touch-action: pan-y !important; } /* ======================================================== MULTI-LEVEL MENU CARDS ======================================================== */ .elr-mobile-nav-direct .elr-mobile-nav-direct-inner{ width: calc(100% - 26px) !important; padding: 14px 0 22px !important; } .elr-mobile-nav-direct details.elr-mobile-submenu{ display: block !important; width: 100% !important; margin: 0 0 9px !important; padding: 0 !important; overflow: hidden !important; background: #FFFFFF !important; border: 1px solid #DCE4EA !important; border-left: 3px solid #173F69 !important; border-radius: 2px !important; box-shadow: 0 3px 12px rgba(16,47,80,.035) !important; } .elr-mobile-nav-direct details.elr-mobile-submenu:nth-of-type(2){ border-left-color: #B08A4A !important; } /* Kill native browser triangle */ .elr-mobile-nav-direct details.elr-mobile-submenu > summary.elr-mobile-submenu-summary{ display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; min-height: 55px !important; margin: 0 !important; padding: 10px 13px 10px 15px !important; list-style: none !important; appearance: none !important; -webkit-appearance: none !important; background: #FFFFFF !important; color: #173F69 !important; cursor: pointer !important; } .elr-mobile-nav-direct details.elr-mobile-submenu > summary.elr-mobile-submenu-summary::-webkit-details-marker{ display: none !important; } .elr-mobile-nav-direct details.elr-mobile-submenu > summary.elr-mobile-submenu-summary::marker{ content: "" !important; display: none !important; } .elr-mobile-nav-direct .elr-mobile-submenu-copy{ display: flex !important; flex-direction: column !important; gap: 5px !important; min-width: 0 !important; } .elr-mobile-nav-direct .elr-mobile-submenu-title{ color: #173F69 !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 9px !important; line-height: 1 !important; font-weight: 800 !important; letter-spacing: .16em !important; } .elr-mobile-nav-direct .elr-mobile-submenu-note{ color: #718592 !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 11px !important; line-height: 1.2 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* ======================================================== CUSTOM CHEVRON ======================================================== */ .elr-mobile-nav-direct .elr-mobile-submenu-chevron{ position: relative !important; display: block !important; flex: 0 0 25px !important; width: 25px !important; height: 25px !important; margin-left: 10px !important; border: 1px solid #D7E0E6 !important; border-radius: 50% !important; background: #F7F9FA !important; } .elr-mobile-nav-direct .elr-mobile-submenu-chevron::after{ content: "" !important; position: absolute !important; top: 7px !important; left: 8px !important; width: 6px !important; height: 6px !important; border-right: 1px solid #173F69 !important; border-bottom: 1px solid #173F69 !important; transform: rotate(45deg) !important; } .elr-mobile-nav-direct .elr-mobile-submenu[open] .elr-mobile-submenu-chevron::after{ top: 10px !important; transform: rotate(225deg) !important; } /* ======================================================== THIRD-LEVEL LINKS ======================================================== */ .elr-mobile-nav-direct .elr-mobile-submenu-links{ width: 100% !important; padding: 1px 14px 8px !important; background: #FCFDFD !important; border-top: 1px solid #E7ECEF !important; } .elr-mobile-nav-direct .elr-mobile-submenu-links a{ display: flex !important; align-items: center !important; width: 100% !important; min-height: 43px !important; padding: 7px 6px 7px 17px !important; color: #173F69 !important; background: transparent !important; border-bottom: 1px solid #E9EDF0 !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 13px !important; line-height: 1.3 !important; text-decoration: none !important; } .elr-mobile-nav-direct .elr-mobile-submenu-links a:last-child{ border-bottom: 0 !important; } /* ======================================================== SIGNATURE — QUIETER ======================================================== */ .elr-mobile-nav-direct .elr-mobile-menu-signature{ min-height: 62px !important; margin-top: 13px !important; padding: 12px 14px !important; } .elr-mobile-nav-direct .elr-mobile-menu-signature-copy{ font-size: 10px !important; } } /* ============================================================ SMALL PHONE ============================================================ */ @media(max-width:430px){ .elr-mobile-nav-direct > summary.elr-mobile-nav-main-summary{ min-height: 44px !important; width: calc(100% - 20px) !important; } .elr-mobile-nav-direct .elr-mobile-nav-direct-mark{ min-width: 41px !important; height: 22px !important; padding: 0 8px !important; font-size: 9px !important; } .elr-mobile-nav-direct .elr-mobile-nav-direct-button{ min-height: 28px !important; height: 28px !important; padding: 0 8px !important; } .elr-mobile-nav-direct[open] .elr-mobile-nav-direct-panel{ height: calc( 100dvh - 44px ) !important; max-height: calc( 100dvh - 44px ) !important; } .elr-mobile-nav-direct .elr-mobile-nav-direct-inner{ width: calc(100% - 20px) !important; padding-top: 11px !important; } .elr-mobile-nav-direct details.elr-mobile-submenu > summary.elr-mobile-submenu-summary{ min-height: 50px !important; padding: 9px 11px 9px 13px !important; } .elr-mobile-nav-direct .elr-mobile-submenu-note{ max-width: 205px !important; font-size: 10.5px !important; } } /* ============================================================ VERY SMALL PHONE ============================================================ */ @media(max-width:360px){ .elr-mobile-nav-direct > summary.elr-mobile-nav-main-summary{ min-height: 42px !important; } .elr-mobile-nav-direct .elr-mobile-nav-direct-mark{ min-width: 38px !important; height: 21px !important; padding: 0 7px !important; } .elr-mobile-nav-direct .elr-mobile-nav-direct-button{ height: 27px !important; min-height: 27px !important; font-size: 7px !important; } .elr-mobile-nav-direct[open] .elr-mobile-nav-direct-panel{ height: calc( 100dvh - 42px ) !important; max-height: calc( 100dvh - 42px ) !important; } .elr-mobile-nav-direct .elr-mobile-submenu-note{ max-width: 170px !important; } } /* ELR MOBILE V1.2 END */ /* ============================================================ ELR MOBILE V1.3 START Adaptive one-line journal title New linguistic motto ============================================================ */ /* ============================================================ MOTTO ============================================================ */ @media(max-width:900px){ .elr-mobile-nav-direct .elr-mobile-menu-signature-copy{ position:relative; z-index:2; display:flex; flex-direction:column; gap:6px; max-width:72%; color: rgba(255,255,255,.82); font-family: Georgia, "Times New Roman", serif; font-size:10.5px; line-height:1.38; letter-spacing:.01em; } .elr-mobile-nav-direct .elr-mobile-menu-signature-copy strong{ color:#DEC48F; font-family: Arial, Helvetica, sans-serif; font-size:8px; line-height:1.35; font-weight:800; letter-spacing:.06em; text-transform:none; } } /* ============================================================ SMALL-SCREEN JOURNAL TITLE ============================================================ */ @media(max-width:430px){ body.elr-home-mobile-v1 div.elr-title{ display:block !important; width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; margin-left: auto !important; margin-right: auto !important; white-space: nowrap !important; overflow: visible !important; text-align: center !important; font-size: clamp( 17px, 5.35vw, 23px ) !important; line-height: 1.08 !important; letter-spacing: -.025em !important; } } /* ============================================================ VERY SMALL SCREEN ============================================================ */ @media(max-width:360px){ body.elr-home-mobile-v1 div.elr-title{ width: calc(100vw - 18px) !important; max-width: calc(100vw - 18px) !important; font-size: clamp( 15px, 5.1vw, 18px ) !important; letter-spacing: -.03em !important; } } /* ELR MOBILE V1.3 END */ /* ============================================================ ELR MOBILE FINAL LOCK START FINAL MOBILE DESIGN Locked after this deployment. ============================================================ */ /* ============================================================ MOBILE MENU MOTTO ============================================================ */ @media(max-width:900px){ .elr-mobile-nav-direct .elr-mobile-menu-signature-copy{ display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:7px !important; max-width:78% !important; position:relative; z-index:2; } /* Exploring the unknown... Deliberately quieter. */ .elr-mobile-nav-direct .elr-mobile-menu-signature-copy > span{ display:block; color: rgba( 255, 255, 255, .66 ) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 8.5px !important; line-height: 1.35 !important; font-weight: 400 !important; letter-spacing: .045em !important; } /* Linguists never cease their inquiry. Primary closing statement. */ .elr-mobile-nav-direct .elr-mobile-menu-signature-copy > strong{ display:block; color: #DEC48F !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 13px !important; line-height: 1.25 !important; font-weight: 400 !important; letter-spacing: .005em !important; text-transform: none !important; } } /* ============================================================ JOURNAL TITLE PHONE: - homepage only - one line - automatically scales with viewport ============================================================ */ @media(max-width:600px){ /* Internal pages: do not repeat the large journal title. */ body:not(.elr-home-mobile-v1) div.elr-title{ display: none !important; } /* Homepage: preserve the journal masthead, but make it responsive and one-line. */ body.elr-home-mobile-v1 div.elr-title{ display: block !important; width: calc(100vw - 22px) !important; max-width: calc(100vw - 22px) !important; margin-left: auto !important; margin-right: auto !important; padding: 0 !important; white-space: nowrap !important; word-break: normal !important; overflow-wrap: normal !important; hyphens: none !important; overflow: visible !important; text-align: center !important; font-size: clamp( 15px, 4.65vw, 21px ) !important; line-height: 1.06 !important; letter-spacing: -.025em !important; } } /* ============================================================ SMALL PHONE ============================================================ */ @media(max-width:430px){ body.elr-home-mobile-v1 div.elr-title{ width: calc(100vw - 18px) !important; max-width: calc(100vw - 18px) !important; font-size: clamp( 15px, 4.55vw, 19.5px ) !important; letter-spacing: -.03em !important; } .elr-mobile-nav-direct .elr-mobile-menu-signature-copy > span{ font-size: 8px !important; } .elr-mobile-nav-direct .elr-mobile-menu-signature-copy > strong{ font-size: 12.5px !important; } } /* ============================================================ VERY SMALL PHONE ============================================================ */ @media(max-width:360px){ body.elr-home-mobile-v1 div.elr-title{ width: calc(100vw - 14px) !important; max-width: calc(100vw - 14px) !important; font-size: clamp( 14px, 4.5vw, 16.5px ) !important; letter-spacing: -.035em !important; } } /* ============================================================ EXTREME SMALL WIDTH ============================================================ */ @media(max-width:320px){ body.elr-home-mobile-v1 div.elr-title{ width: calc(100vw - 10px) !important; max-width: calc(100vw - 10px) !important; font-size: 14px !important; letter-spacing: -.04em !important; } } /* ELR MOBILE FINAL LOCK END */ /* ============================================================ ELR INTERNAL TITLE REVIEW START Restore the existing journal title on internal mobile pages. This deliberately overrides the earlier: display:none !important; ============================================================ */ @media(max-width:600px){ body:not(.elr-home-mobile-v1) div.elr-title{ display:block !important; width: calc(100vw - 22px) !important; max-width: calc(100vw - 22px) !important; margin-left: auto !important; margin-right: auto !important; padding: 0 !important; color: #173F69 !important; white-space: nowrap !important; word-break: normal !important; overflow-wrap: normal !important; hyphens: none !important; overflow: visible !important; text-align: center !important; font-size: clamp( 15px, 4.65vw, 21px ) !important; line-height: 1.06 !important; letter-spacing: -.025em !important; } } @media(max-width:430px){ body:not(.elr-home-mobile-v1) div.elr-title{ width: calc(100vw - 18px) !important; max-width: calc(100vw - 18px) !important; font-size: clamp( 15px, 4.55vw, 19.5px ) !important; letter-spacing: -.03em !important; } } @media(max-width:360px){ body:not(.elr-home-mobile-v1) div.elr-title{ width: calc(100vw - 14px) !important; max-width: calc(100vw - 14px) !important; font-size: clamp( 14px, 4.5vw, 16.5px ) !important; letter-spacing: -.035em !important; } } @media(max-width:320px){ body:not(.elr-home-mobile-v1) div.elr-title{ width: calc(100vw - 10px) !important; max-width: calc(100vw - 10px) !important; font-size: 14px !important; letter-spacing: -.04em !important; } } /* ELR INTERNAL TITLE REVIEW END */ /* ============================================================ ELR MOBILE INTERNAL TITLE BAND START Independent of desktop masthead / div.elr-title. Rendered from the universal page-content wrapper. ============================================================ */ @media(max-width:600px){ body:not(.elr-home-mobile-v1) .elr-global-content::before{ content: "Explorations in Linguistic Review"; display:block !important; position:relative !important; z-index:1 !important; width:100% !important; box-sizing:border-box !important; margin:0 !important; padding: 11px 8px 12px !important; color: #173F69 !important; background: #FFFFFF !important; border-bottom: 1px solid rgba(23,63,105,.12) !important; text-align: center !important; white-space: nowrap !important; overflow: visible !important; word-break: normal !important; overflow-wrap: normal !important; hyphens: none !important; font-family: Georgia, "Times New Roman", serif !important; font-size: clamp( 15px, 4.65vw, 20px ) !important; font-weight: 400 !important; line-height: 1.08 !important; letter-spacing: -.03em !important; } } @media(max-width:430px){ body:not(.elr-home-mobile-v1) .elr-global-content::before{ padding: 10px 4px 11px !important; font-size: clamp( 13.8px, 4.42vw, 17.8px ) !important; letter-spacing: -.035em !important; } } @media(max-width:360px){ body:not(.elr-home-mobile-v1) .elr-global-content::before{ padding-left: 2px !important; padding-right: 2px !important; font-size: clamp( 12.6px, 4.18vw, 15px ) !important; letter-spacing: -.04em !important; } } @media(max-width:320px){ body:not(.elr-home-mobile-v1) .elr-global-content::before{ font-size: 12.2px !important; letter-spacing: -.045em !important; } } /* ELR MOBILE INTERNAL TITLE BAND END */ /* ============================================================ ELR MOBILE EXTRA TITLE FINAL START Real mobile masthead now contains the journal title. Disable obsolete internal fallback title. ============================================================ */ @media (max-width:600px){ body:not(.elr-home-mobile-v1) .elr-global-content::before{ content:none !important; display:none !important; height:0 !important; min-height:0 !important; margin:0 !important; padding:0 !important; border:0 !important; } } /* ELR MOBILE EXTRA TITLE FINAL END */ /* ============================================================ ELR MOBILE INTERNAL JOURNAL TITLE — FINAL STATE START The real mobile masthead already contains: - logo - journal title - tagline Therefore the old internal fallback title below the ELR / MENU navigation must never render. ============================================================ */ @media (max-width:600px){ body:not(.elr-home-mobile-v1) .elr-global-content::before{ content:none !important; display:none !important; height:0 !important; min-height:0 !important; margin:0 !important; padding:0 !important; border:0 !important; } } /* ELR MOBILE INTERNAL JOURNAL TITLE — FINAL STATE END */