/** * The HOPE Project: mobile header, dropdown menu, and footer buttons (matches D7 mobile) * * Replaces ALL earlier mobile header/menu CSS. Paste as one Asset Injector * entry or into the thehopeproject subtheme stylesheet. * * Requires: * - /sites/default/files/header-bg00.png * - Block "mobilelanguage" -> "Mobile header" menu (one link: Languages) in Navigation region * - Block "mobilefootermenu" -> Footer menu in Navigation (Collapsible), below Main menu * - Block "mobilebuttonsmain" -> Main navigation menu in Footer region (supplies Study Guide) * - Block "mobilebuttonsfooter" -> Footer menu in Footer region (supplies Feedback + Spiritual Help) * Give both button blocks the same Menu Multilingual settings as the main menu block, * so Study Guide drops out in languages where node/85 isn't translated. * * Links are targeted by Drupal's data-drupal-link-system-path (the same in every language), * never by position, because Menu Multilingual removes items per language. * node/85 Study Guide node/199 Language Options * node/28 Resources node/27 Spiritual Help node/29 About * Feedback has no node path; it's targeted by its existing class "menu-hide-mobile". * * Mobile rules are scoped to DXPR's mobile body class, so desktop is untouched. * Exceptions, in the last section: desktop fixed-footer clearance and Dacast * video sizing (all widths). */ /* ========================================================== Desktop: hide the mobile-only blocks ========================================================== */ body:not(.body--dxpr-theme-nav-mobile) #block-mobilelanguage, body:not(.body--dxpr-theme-nav-mobile) #block-mobilefootermenu, body:not(.body--dxpr-theme-nav-mobile) #block-mobilebuttonsmain, body:not(.body--dxpr-theme-nav-mobile) #block-mobilebuttonsfooter { display: none !important; } /* ========================================================== Mobile header bar ========================================================== */ body.body--dxpr-theme-nav-mobile .dxpr-theme-header { position: relative !important; height: 76px !important; background: #e8dfcc url('/sites/default/files/header-bg00.png') center bottom / cover no-repeat !important; } body.body--dxpr-theme-nav-mobile .dxpr-theme-header .navbar-header { position: static !important; height: 76px; } /* Logo: centered, top of the parchment */ body.body--dxpr-theme-nav-mobile #block-thehopeproject-logoen { position: absolute !important; left: 50% !important; top: 4px !important; transform: translateX(-50%) !important; width: auto !important; margin: 0 !important; padding: 0 !important; } body.body--dxpr-theme-nav-mobile #block-thehopeproject-logoen .site-slogan { display: none; } body.body--dxpr-theme-nav-mobile #block-thehopeproject-logoen article, body.body--dxpr-theme-nav-mobile #block-thehopeproject-logoen .field--name-field-media-image, body.body--dxpr-theme-nav-mobile #block-thehopeproject-logoen .field__item { float: none !important; margin: 0 !important; padding: 0 !important; display: block; } body.body--dxpr-theme-nav-mobile #block-thehopeproject-logoen img { width: 96px !important; height: auto; display: block; margin: 0 auto; /* Hides the desktop divider line baked into the logo image. Adjust 8px if needed. */ clip-path: inset(0 8px 0 0); } /* Languages button: left */ body.body--dxpr-theme-nav-mobile #block-mobilelanguage { position: absolute !important; left: 12px !important; top: 14px !important; width: auto !important; margin: 0; padding: 0; } #block-mobilelanguage ul:not(.contextual-links) { margin: 0; padding: 0; list-style: none; } #block-mobilelanguage ul:not(.contextual-links) a { display: inline-block; padding: 8px 10px; font-size: 1rem; line-height: 1; text-transform: uppercase; text-decoration: none; color: #7a5a2e; background: linear-gradient(#efe6d3, #d9ccb0); border: 1px solid #b9a98a; border-radius: 3px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6); } /* Hamburger: right, beveled box, level with Languages */ body.body--dxpr-theme-nav-mobile .dxpr-theme-header #dxpr-theme-menu-toggle { position: absolute !important; right: 12px; top: 14px !important; width: 46px; height: 38px; margin: 0 !important; padding: 0 !important; background: linear-gradient(#efe6d3, #d9ccb0); border: 1px solid #b9a98a; border-radius: 3px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6); } /* Hamburger bars: centered, and stay bars when open (D7 has no X) */ body.body--dxpr-theme-nav-mobile .dxpr-theme-header #dxpr-theme-menu-toggle span, body.body--dxpr-theme-nav-mobile .dxpr-theme-header #dxpr-theme-menu-toggle span::before, body.body--dxpr-theme-nav-mobile .dxpr-theme-header #dxpr-theme-menu-toggle span::after { width: 24px !important; height: 3px !important; background-color: #7a5a2e !important; transform: none !important; opacity: 1 !important; } body.body--dxpr-theme-nav-mobile .dxpr-theme-header #dxpr-theme-menu-toggle span { left: 10px !important; top: 16px !important; } body.body--dxpr-theme-nav-mobile .dxpr-theme-header #dxpr-theme-menu-toggle span::before { top: -7px !important; } body.body--dxpr-theme-nav-mobile .dxpr-theme-header #dxpr-theme-menu-toggle span::after { top: 7px !important; } /* ========================================================== Mobile menu: full-width dropdown under the header (replaces DXPR's slide-in side panel) ========================================================== */ body.body--dxpr-theme-nav-mobile #dxpr-theme-main-menu { position: absolute !important; top: 76px !important; left: 0 !important; right: 0 !important; width: 100% !important; height: auto !important; max-height: calc(100vh - 76px); overflow-y: auto; padding: 0 !important; transition: none !important; display: none !important; background: #d9cfb8 !important; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.45); } body.body--dxpr-theme-nav-mobile #dxpr-theme-main-menu.menu--open { display: block !important; } /* DXPR lock on page scroll while the panel is open; not needed for a dropdown */ html.html--dxpr-theme-nav-mobile--open body { overflow: auto !important; } /* Strip DXPR panel chrome */ body.body--dxpr-theme-nav-mobile #dxpr-theme-main-menu .menu__breadcrumbs { display: none !important; } body.body--dxpr-theme-nav-mobile #dxpr-theme-main-menu .region-navigation-collapsible, body.body--dxpr-theme-nav-mobile #dxpr-theme-main-menu .block { margin: 0 !important; padding: 0 !important; } body.body--dxpr-theme-nav-mobile #dxpr-theme-main-menu ul:not(.contextual-links) { margin: 0 !important; padding: 0 !important; background: transparent !important; } body.body--dxpr-theme-nav-mobile #dxpr-theme-main-menu li { float: none !important; } /* Main menu: un-fix DXPR's drill-down panel and show Viewing Options' children flat */ body.body--dxpr-theme-nav-mobile #block-thehopeproject-main-menu ul.menu__level { position: static !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; width: auto !important; height: auto !important; overflow: visible !important; visibility: visible !important; transform: none !important; } /* Hide the "Viewing Options" parent link (its children still show) */ body.body--dxpr-theme-nav-mobile #block-thehopeproject-main-menu ul.menu__level--current > li > a.dropdown-toggle { display: none !important; } /* Hide Study Guide and Language Options (Study Guide is a button; Languages is in the header) */ body.body--dxpr-theme-nav-mobile #block-thehopeproject-main-menu li:has(> a[data-drupal-link-system-path="node/85"]), body.body--dxpr-theme-nav-mobile #block-thehopeproject-main-menu li:has(> a[data-drupal-link-system-path="node/199"]) { display: none !important; } /* Footer menu in the dropdown: D7 order = Resources, About, Prayer & Giving, Spiritual Help, Store. Targeted by link path, so it holds even when a language is missing an item. */ body.body--dxpr-theme-nav-mobile #block-mobilefootermenu ul:not(.contextual-links) { display: flex !important; flex-direction: column; } /* Default (Store, and anything added later) goes last */ body.body--dxpr-theme-nav-mobile #block-mobilefootermenu ul:not(.contextual-links) > li { order: 5; } body.body--dxpr-theme-nav-mobile #block-mobilefootermenu li:has(> a[data-drupal-link-system-path="node/28"]) { order: 1; } body.body--dxpr-theme-nav-mobile #block-mobilefootermenu li:has(> a[data-drupal-link-system-path="node/29"]) { order: 2; } body.body--dxpr-theme-nav-mobile #block-mobilefootermenu li:has(> a[href*="prayer"]) { order: 3; } body.body--dxpr-theme-nav-mobile #block-mobilefootermenu li:has(> a[data-drupal-link-system-path="node/27"]) { order: 4; } /* Feedback is a button below the page, so not in the dropdown */ body.body--dxpr-theme-nav-mobile #block-mobilefootermenu li:has(> a.menu-hide-mobile) { display: none !important; } /* Row styling: beige gradient rows with light/dark dividers, like D7 */ body.body--dxpr-theme-nav-mobile #block-thehopeproject-main-menu ul.dropdown-menu a, body.body--dxpr-theme-nav-mobile #block-mobilefootermenu ul:not(.contextual-links) a { display: block !important; margin: 0 !important; padding: 9px 20px !important; font-size: 1rem !important; line-height: 1.3 !important; letter-spacing: 0.02em; text-transform: uppercase !important; text-decoration: none !important; color: #3d2f1f !important; background: linear-gradient(to bottom, #e3dac6 0%, #d8ceb6 100%) !important; border-top: 1px solid rgba(255, 255, 255, 0.55) !important; border-bottom: 1px solid rgba(0, 0, 0, 0.14) !important; box-shadow: inset 0 0 18px rgba(120, 100, 70, 0.18); } body.body--dxpr-theme-nav-mobile #block-thehopeproject-main-menu ul.dropdown-menu a:hover, body.body--dxpr-theme-nav-mobile #block-thehopeproject-main-menu ul.dropdown-menu a:focus, body.body--dxpr-theme-nav-mobile #block-mobilefootermenu ul:not(.contextual-links) a:hover, body.body--dxpr-theme-nav-mobile #block-mobilefootermenu ul:not(.contextual-links) a:focus { background: #cfc3a6 !important; } /* ========================================================== Mobile footer: replace everything with D7-style buttons Study Guide | Feedback Spiritual Help ========================================================== */ body.body--dxpr-theme-nav-mobile .dxpr-theme-footer { background: #1c1712 !important; background-image: none !important; padding: 24px 0 36px !important; } /* Hide every footer block except the two button blocks */ body.body--dxpr-theme-nav-mobile .dxpr-theme-footer .region-footer > *:not(#block-mobilebuttonsmain):not(#block-mobilebuttonsfooter) { display: none !important; } /* The region becomes one centered, wrapping row of buttons (DXPR sets column direction here on mobile, so force row) */ body.body--dxpr-theme-nav-mobile .dxpr-theme-footer .region-footer { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 16px 20px !important; width: 100% !important; margin: 0 !important; padding: 0 16px !important; box-sizing: border-box; } /* Flatten the two menu blocks so their links become the flex items */ body.body--dxpr-theme-nav-mobile #block-mobilebuttonsmain, body.body--dxpr-theme-nav-mobile #block-mobilebuttonsfooter, body.body--dxpr-theme-nav-mobile #block-mobilebuttonsmain *:not(a):not(.contextual):not(.contextual *), body.body--dxpr-theme-nav-mobile #block-mobilebuttonsfooter *:not(a):not(.contextual):not(.contextual *) { display: contents !important; } /* Clearfix pseudo-elements would otherwise become full-width flex rows */ body.body--dxpr-theme-nav-mobile #block-mobilebuttonsmain::before, body.body--dxpr-theme-nav-mobile #block-mobilebuttonsmain::after, body.body--dxpr-theme-nav-mobile #block-mobilebuttonsmain *::before, body.body--dxpr-theme-nav-mobile #block-mobilebuttonsmain *::after, body.body--dxpr-theme-nav-mobile #block-mobilebuttonsfooter::before, body.body--dxpr-theme-nav-mobile #block-mobilebuttonsfooter::after, body.body--dxpr-theme-nav-mobile #block-mobilebuttonsfooter *::before, body.body--dxpr-theme-nav-mobile #block-mobilebuttonsfooter *::after { display: none !important; content: none !important; } /* Admin-only contextual links would break the button row */ body.body--dxpr-theme-nav-mobile #block-mobilebuttonsmain .contextual, body.body--dxpr-theme-nav-mobile #block-mobilebuttonsfooter .contextual { display: none !important; } /* Hide every link in the two blocks, then show only the three buttons */ body.body--dxpr-theme-nav-mobile #block-mobilebuttonsmain a, body.body--dxpr-theme-nav-mobile #block-mobilebuttonsfooter a { display: none !important; } body.body--dxpr-theme-nav-mobile #block-mobilebuttonsmain a[data-drupal-link-system-path="node/85"], body.body--dxpr-theme-nav-mobile #block-mobilebuttonsfooter a.menu-hide-mobile, body.body--dxpr-theme-nav-mobile #block-mobilebuttonsfooter a[data-drupal-link-system-path="node/27"] { display: block !important; flex: 0 0 auto; width: calc(50% - 10px) !important; max-width: 170px !important; min-width: 0 !important; box-sizing: border-box; margin: 0 !important; padding: 12px 14px !important; font-size: 1rem !important; font-weight: 400 !important; line-height: 1.2 !important; letter-spacing: 0.02em; text-align: center; text-transform: uppercase !important; text-decoration: none !important; text-shadow: none !important; color: #d9cbb4 !important; background: linear-gradient(to bottom, #4a3626 0%, #2e2117 100%) !important; border: 1px solid #20170f !important; border-radius: 3px !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; } body.body--dxpr-theme-nav-mobile #block-mobilebuttonsmain a[data-drupal-link-system-path="node/85"] { order: 1; } body.body--dxpr-theme-nav-mobile #block-mobilebuttonsfooter a.menu-hide-mobile { order: 2; } body.body--dxpr-theme-nav-mobile #block-mobilebuttonsfooter a[data-drupal-link-system-path="node/27"] { order: 3; } /* Tapped/hover state: the light tan button in the D7 screenshot */ body.body--dxpr-theme-nav-mobile #block-mobilebuttonsmain a:hover, body.body--dxpr-theme-nav-mobile #block-mobilebuttonsmain a:focus, body.body--dxpr-theme-nav-mobile #block-mobilebuttonsmain a:active, body.body--dxpr-theme-nav-mobile #block-mobilebuttonsfooter a:hover, body.body--dxpr-theme-nav-mobile #block-mobilebuttonsfooter a:focus, body.body--dxpr-theme-nav-mobile #block-mobilebuttonsfooter a:active { color: #2e2117 !important; background: linear-gradient(to bottom, #c9b089 0%, #a8885c 100%) !important; } /* DXPR's round back-to-top button overlaps the buttons; D7 has none on mobile */ body.body--dxpr-theme-nav-mobile #backtotop { display: none !important; } /* ========================================================== Study guides: tighter outline indents on phones The migrated D7 body text hard-codes indents inline: level 2 (a., b.)

level 3 (bullets)