/** * MooseU ELEVATE — top polish layer (loads after mooseu-polish.css). * * Goal: take the faithful live-site reproduction and push it a notch * further — confident display type, accessible focus states, a unified * button/interaction language, a compact branded search, and one * well-orchestrated page-load reveal. Everything is reduced-motion-safe * and token-driven; no raw hex outside the established palette vars. * * Deliberately additive: it refines, it does not re-lay-out. The tuned * grid/section work in mooseu-layout.css is left intact. */ /* ════════════════════════════════════════════════════════════════ 1. DISPLAY TYPE — give page + node titles the chunky branded punch the design always intended (Cooper Black was never loaded; Lilita One now carries it). Handwritten Patrick Hand stays on the whiteboard/divider moments to match live. ════════════════════════════════════════════════════════════════ */ h1, .page-title, .node__title, .block-page-title-block h1 { font-family: var(--mu-font-display); color: var(--mu-navy); letter-spacing: 0.3px; line-height: 1.08; } /* Lilita One is a single-weight face — normalise bold requests so the browser doesn't synthesise an ugly faux-bold. */ h1, h2, h3, h4, .mu-page-heading, .mu-courses-heading { font-synthesis: none; } /* A warm hairline flourish under standalone page titles. */ .block-page-title-block h1::after, .node--view-mode-full > .node__header .node__title::after { content: ""; display: block; width: 3.5rem; height: 5px; margin-top: 0.5rem; border-radius: 999px; background: linear-gradient(90deg, var(--mu-yellow), var(--mu-orange)); } /* ════════════════════════════════════════════════════════════════ 2. ACCESSIBLE FOCUS — visible, on-brand keyboard ring everywhere. ════════════════════════════════════════════════════════════════ */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible, .menu--main a:focus-visible, .nav__menu-link-main:focus-visible { outline: 3px solid var(--mu-yellow); outline-offset: 2px; border-radius: var(--mu-radius-sm); } /* On the dark blue nav band a gold ring on blue is low-contrast — use a white ring there instead. */ #primary-menu a:focus-visible, .navigation__menubar-account a:focus-visible { outline-color: #fff; } /* ════════════════════════════════════════════════════════════════ 3. BUTTON & PILL LANGUAGE — one consistent press/hover feel. (brand.css already paints .btn blue; we add motion + active + focus.) ════════════════════════════════════════════════════════════════ */ .btn, .button, button.form-submit, input[type="submit"], .mu-pill, a.button { transition: transform var(--mu-duration-fast) var(--mu-easing), box-shadow var(--mu-duration-fast) var(--mu-easing), background var(--mu-duration-fast) var(--mu-easing), color var(--mu-duration-fast) var(--mu-easing); will-change: transform; } .btn:hover, .button:hover, button.form-submit:hover, input[type="submit"]:hover, .mu-pill:hover, a.button:hover { transform: translateY(-2px); box-shadow: var(--mu-shadow-lift); } .btn:active, .button:active, button.form-submit:active, input[type="submit"]:active, .mu-pill:active { transform: translateY(0); box-shadow: var(--mu-shadow-card); } /* ════════════════════════════════════════════════════════════════ 4. HEADER SEARCH — compact, branded pill instead of a raw wide input. Solo emits form#search-block-form with input#edit-keys.solo-input and a submit#edit-submit.search-button-block. Constrain + style so it reads as one tidy control, matching live's compact search affordance. ════════════════════════════════════════════════════════════════ */ .solo-search-block-form { display: flex; align-items: center; gap: 0.4rem; max-width: 320px; margin-left: auto; } .solo-search-block-form .form-item, .solo-search-block-form .js-form-item { margin: 0; flex: 1 1 auto; } #edit-keys.solo-input, .solo-search-block-form input[type="search"] { width: 100%; border: 2px solid rgba(30, 58, 95, 0.14) !important; border-radius: var(--mu-radius-pill) !important; padding: 0.5rem 1rem !important; font-size: 0.9rem; background: var(--mu-bg-paper); color: var(--mu-navy); transition: border-color var(--mu-duration-fast) var(--mu-easing), box-shadow var(--mu-duration-fast) var(--mu-easing); } .solo-search-block-form input[type="search"]:focus { border-color: var(--mu-blue) !important; box-shadow: 0 0 0 4px var(--mu-bg-hover) !important; outline: none; } .solo-search-block-form input[type="search"]::placeholder { color: rgba(30, 58, 95, 0.45); } /* Submit reads as a compact round pill next to the field. */ #edit-submit.search-button-block, .solo-search-block-form .form-submit { flex: 0 0 auto; padding: 0.5rem 1.1rem !important; border-radius: var(--mu-radius-pill) !important; } /* ════════════════════════════════════════════════════════════════ 5. BODY LINKS — animated underline for in-content links (not nav, not buttons, not cards). ════════════════════════════════════════════════════════════════ */ .field--name-body a:not(.button), .mooseu-highlighted-block a:not(.button), .block-inline-blockbasic a:not(.button) { background-image: linear-gradient(var(--mu-blue), var(--mu-blue)); background-size: 0% 2px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size var(--mu-duration-mid) var(--mu-easing); padding-bottom: 1px; } .field--name-body a:not(.button):hover, .mooseu-highlighted-block a:not(.button):hover, .block-inline-blockbasic a:not(.button):hover { background-size: 100% 2px; } /* ════════════════════════════════════════════════════════════════ 6. SELECTION + DETAIL — small touches that read as "designed". ════════════════════════════════════════════════════════════════ */ ::selection { background: var(--mu-yellow); color: var(--mu-navy-deep); } img { /* Avoid layout jank from late-loading imagery on the card lists. */ background-color: var(--mu-yellow-soft); } /* The brand accent strip on #main-container::before is great — echo a faint one at the very bottom of the page for symmetry. */ footer[role="contentinfo"]::after, #footer::after { content: ""; display: block; height: 0; } /* ════════════════════════════════════════════════════════════════ 7. PAGE-LOAD REVEAL — one orchestrated, gentle stagger on the home page only. Reduced-motion users and anyone whose animations never run still see everything (default state is fully visible; the animation only plays when motion is allowed). ════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: no-preference) { @keyframes muReveal { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* Home: the three home columns rise in sequence. */ .path-frontpage .layout--threecol-section--25-50-25 > .layout__region { animation: muReveal var(--mu-duration-slow) var(--mu-easing) both; } .path-frontpage .layout--threecol-section--25-50-25 > .layout__region--first { animation-delay: 0.05s; } .path-frontpage .layout--threecol-section--25-50-25 > .layout__region--second { animation-delay: 0.13s; } .path-frontpage .layout--threecol-section--25-50-25 > .layout__region--third { animation-delay: 0.21s; } /* Role tiles: a quick capped stagger (first 8 only, so total stays well under the duration the previous attempt tripped over). */ .path-frontpage .layout--twocol-section--25-75 .views-view-responsive-grid__item { animation: muReveal var(--mu-duration-mid) var(--mu-easing) both; } .path-frontpage .views-view-responsive-grid__item:nth-child(1) { animation-delay: 0.04s; } .path-frontpage .views-view-responsive-grid__item:nth-child(2) { animation-delay: 0.08s; } .path-frontpage .views-view-responsive-grid__item:nth-child(3) { animation-delay: 0.12s; } .path-frontpage .views-view-responsive-grid__item:nth-child(4) { animation-delay: 0.16s; } .path-frontpage .views-view-responsive-grid__item:nth-child(5) { animation-delay: 0.20s; } .path-frontpage .views-view-responsive-grid__item:nth-child(6) { animation-delay: 0.24s; } .path-frontpage .views-view-responsive-grid__item:nth-child(7) { animation-delay: 0.28s; } .path-frontpage .views-view-responsive-grid__item:nth-child(8) { animation-delay: 0.32s; } } /* ════════════════════════════════════════════════════════════════ 8. COPYRIGHT / FOOTER STRIP — Solo renders the credit line in #copyright (NOT in