/* ========================================================= OOMBAM FANSITE — GLOBAL SITE HEADER / NAVIGATION OB_00001.9 — responsive footer + homepage Blossom auth utility IMPORTANT --------- Every global navigation selector is namespaced with `ob-`. This prevents page stylesheets (style.css, oom.css, bam.css, community.css, guidelines.css, etc.) from changing the header. Load this stylesheet AFTER the page-specific stylesheet. ========================================================= */ :root { --ob-shell-max: 1480px; --ob-header-height: 84px; --ob-header-height-mobile: 72px; --ob-header-height-landscape: 58px; --ob-ui-font: "DM Sans", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --ob-display-font: "Cormorant Garamond", "Playfair Display", Georgia, serif; --ob-ink: #2d3035; --ob-muted: #75777c; --ob-blue: #5d9fd2; --ob-blue-deep: #397ba9; --ob-pink: #e57b9c; --ob-ivory: #fffdf9; --ob-line: rgba(45, 48, 53, 0.11); --ob-panel: rgba(255, 253, 249, 0.985); --ob-dark-bg: #1f2024; --ob-dark-panel: #25272c; --ob-dark-ink: #f5f2ef; --ob-dark-muted: rgba(245, 242, 239, 0.68); --ob-dark-line: rgba(255, 255, 255, 0.09); --ob-shadow-sm: 0 12px 34px rgba(25, 31, 37, 0.09); --ob-shadow-lg: 0 26px 72px rgba(20, 24, 29, 0.22); } html { scroll-behavior: smooth; color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; } /* ========================================================= COMPONENT RESET / ISOLATION ========================================================= */ .ob-header, .ob-header *, .ob-mobile-menu, .ob-mobile-menu *, .ob-site-search, .ob-site-search * { box-sizing: border-box; } .ob-header a, .ob-mobile-menu a, .ob-site-search a { text-decoration: none; } .ob-header button, .ob-mobile-menu button, .ob-site-search button, .ob-site-search input { font: inherit; } body.ob-menu-open { overflow: hidden; overscroll-behavior: none; touch-action: none; } body.ob-menu-open .ob-mobile-menu, body.ob-menu-open .ob-mobile-menu__panel { touch-action: pan-y; } /* ========================================================= HEADER — direct child of , never inside page shells ========================================================= */ .ob-header { position: sticky; top: 0; z-index: 5000; width: 100%; min-height: var(--ob-header-height); margin: 0; padding: 0; border: 0; border-bottom: 1px solid var(--ob-line); border-radius: 0; background: rgba(255, 253, 249, 0.965); color: var(--ob-ink); box-shadow: none; backdrop-filter: blur(16px) saturate(130%); -webkit-backdrop-filter: blur(16px) saturate(130%); transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease; } .ob-header.is-scrolled { box-shadow: var(--ob-shadow-sm); } .ob-header__inner { width: min(var(--ob-shell-max), 100%); min-height: var(--ob-header-height); margin-inline: auto; padding-inline: clamp(24px, 3.5vw, 52px); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(16px, 2vw, 30px); } /* Brand */ .ob-brand { justify-self: start; display: inline-flex; align-items: center; width: max-content; min-width: 72px; color: inherit; } .ob-brand__logo { display: block; width: 82px; height: 52px; max-width: 82px; max-height: 52px; margin: 0; padding: 0; object-fit: contain; object-position: left center; filter: none; transform: none; transition: transform 160ms ease, opacity 160ms ease; } .ob-brand:hover .ob-brand__logo { transform: translateY(-1px); } /* ========================================================= DESKTOP NAV — intentionally right-aligned Brand stays left; navigation + actions form the right cluster. ========================================================= */ .ob-nav { justify-self: end; display: flex; align-items: center; justify-content: flex-end; gap: clamp(14px, 1.35vw, 23px); min-width: 0; margin: 0; padding: 0; white-space: nowrap; font-family: var(--ob-ui-font); } .ob-nav__link { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 2px 0; border: 0; border-radius: 0; background: transparent; color: var(--ob-ink); font-family: var(--ob-ui-font); font-size: 0.69rem; font-weight: 600; line-height: 1; letter-spacing: 0.055em; text-transform: uppercase; opacity: 0.84; transition: color 160ms ease, opacity 160ms ease; } .ob-nav__link::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 0; height: 2px; border-radius: 999px; background: var(--ob-blue); transform: translateX(-50%); transition: width 170ms ease; } .ob-nav__link:hover, .ob-nav__link:focus-visible, .ob-nav__link.active, .ob-nav__link[aria-current="page"] { color: var(--ob-ink); opacity: 1; outline: none; } .ob-nav__link:hover::after, .ob-nav__link:focus-visible::after, .ob-nav__link.active::after, .ob-nav__link[aria-current="page"]::after { width: 100%; } /* Parent items with dropdowns */ .ob-nav__group { position: relative; display: flex; align-items: center; min-height: 44px; } /* Invisible hover bridge keeps the pointer path continuous between the parent label and its dropdown. This prevents menu flicker. */ .ob-nav__group::after { content: ""; position: absolute; left: -8px; right: -8px; top: 100%; height: 10px; pointer-events: none; } .ob-nav__group.is-open::after { pointer-events: auto; } .ob-nav__parent { display: inline-flex; align-items: center; gap: 3px; } .ob-nav__submenu-toggle { width: 20px; height: 36px; display: grid; place-items: center; margin: 0 -5px 0 -1px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--ob-muted); cursor: pointer; } .ob-nav__submenu-toggle svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform 160ms ease; } .ob-nav__group.is-open .ob-nav__submenu-toggle svg { transform: rotate(180deg); } /* Desktop dropdown */ .ob-submenu { position: absolute; top: calc(100% - 1px); left: 50%; z-index: 5100; width: 252px; padding: 9px; border: 1px solid var(--ob-line); border-radius: 16px; background: var(--ob-panel); color: var(--ob-ink); box-shadow: var(--ob-shadow-lg); opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, -5px) scale(0.985); transform-origin: top center; transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease; } .ob-nav__group.is-open > .ob-submenu { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0) scale(1); } .ob-submenu__link, .ob-submenu__disabled { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 10px 11px; border-radius: 10px; color: var(--ob-ink); font-family: var(--ob-ui-font); font-size: 0.76rem; font-weight: 600; line-height: 1.25; letter-spacing: 0; text-transform: none; transition: background-color 150ms ease, color 150ms ease; } .ob-submenu__link:hover, .ob-submenu__link:focus-visible, .ob-submenu__link.is-current { background: rgba(93, 159, 210, 0.09); color: var(--ob-blue-deep); outline: none; } .ob-submenu__arrow { color: var(--ob-pink); font-size: 0.88rem; } .ob-submenu__disabled { color: var(--ob-muted); cursor: default; } .ob-submenu__note { padding: 3px 7px; border-radius: 999px; background: rgba(229, 123, 156, 0.10); color: #b55f7c; font-size: 0.54rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } /* ========================================================= HEADER ACTIONS ========================================================= */ .ob-header__actions { justify-self: end; margin-left: clamp(10px, 1vw, 16px); display: flex; align-items: center; justify-content: flex-end; gap: 8px; } .ob-header__icon, .ob-menu-toggle { width: 38px; height: 38px; min-width: 38px; min-height: 38px; display: grid; place-items: center; margin: 0; padding: 0; border: 1px solid var(--ob-line); border-radius: 50%; background: rgba(255, 255, 255, 0.22); color: var(--ob-ink); box-shadow: none; cursor: pointer; appearance: none; -webkit-appearance: none; transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease; } .ob-header__icon:hover, .ob-header__icon:focus-visible, .ob-menu-toggle:hover, .ob-menu-toggle:focus-visible { border-color: rgba(93, 159, 210, 0.46); background: rgba(93, 159, 210, 0.08); transform: translateY(-1px); outline: none; } .ob-header__glyph { display: block; color: currentColor; font-family: Georgia, "Times New Roman", serif; font-size: 1.23rem; font-weight: 400; line-height: 1; transform: translateY(-1px); user-select: none; } .ob-header__glyph--search { font-size: 1.26rem; transform: translateY(-2px); } .ob-theme-toggle { position: relative; } .ob-theme-glyph { font-size: 1.14rem; transform: translateY(-1px); } .ob-menu-toggle { display: none; align-content: center; gap: 4px; } .ob-menu-toggle span { display: block; width: 15px; height: 1.5px; margin: 0; border: 0; border-radius: 999px; background: currentColor; transform-origin: center; transition: transform 170ms ease, opacity 170ms ease; } .ob-menu-toggle.is-active span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); } .ob-menu-toggle.is-active span:nth-child(2) { opacity: 0; } .ob-menu-toggle.is-active span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); } /* ========================================================= MOBILE NAVIGATION ========================================================= */ .ob-mobile-menu { display: none; } @media (max-width: 1100px) { .ob-header, .ob-header__inner { min-height: var(--ob-header-height-mobile); } .ob-header__inner { grid-template-columns: auto 1fr auto; gap: 14px; padding-inline: clamp(17px, 4vw, 30px); } .ob-brand__logo { width: 72px; height: 46px; max-width: 72px; max-height: 46px; } .ob-nav { display: none; } .ob-menu-toggle { display: grid; } .ob-mobile-menu { /* Start the overlay at the *rendered* bottom edge of the sticky header. script.js keeps --ob-mobile-menu-top synced with the live viewport, which prevents iOS/Chrome landscape browser chrome from creating a gap. */ position: fixed; inset: var(--ob-mobile-menu-top, var(--ob-header-height-mobile)) 0 0; z-index: 4900; contain: layout paint; transform: translateZ(0); display: block; pointer-events: none; } .ob-mobile-menu__backdrop { position: absolute; inset: 0; background: rgba(18, 20, 24, 0.24); opacity: 0; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); transition: opacity 170ms ease; } .ob-mobile-menu__panel { position: absolute; top: 9px; right: clamp(11px, 3vw, 25px); width: min(318px, calc(100vw - 22px)); max-height: calc(100% - 18px); overflow-y: auto; overscroll-behavior: contain; padding: 10px; border: 1px solid var(--ob-line); border-radius: 18px; background: var(--ob-panel); color: var(--ob-ink); box-shadow: var(--ob-shadow-lg); opacity: 0; transform: translateY(-7px) scale(0.985); transform-origin: top right; transition: opacity 170ms ease, transform 170ms ease; } .ob-mobile-menu.is-open { pointer-events: auto; } .ob-mobile-menu.is-open .ob-mobile-menu__backdrop { opacity: 1; } .ob-mobile-menu.is-open .ob-mobile-menu__panel { opacity: 1; transform: translateY(0) scale(1); } .ob-mobile-nav__link, .ob-mobile-nav__parent-link { position: relative; display: flex; align-items: center; min-height: 42px; width: 100%; padding: 10px 12px; border: 0; border-bottom: 1px solid rgba(45, 48, 53, 0.07); border-radius: 9px; background: transparent; color: var(--ob-ink); font-family: var(--ob-ui-font); font-size: 0.75rem; font-weight: 600; line-height: 1.2; letter-spacing: 0.055em; text-transform: uppercase; } .ob-mobile-nav__link:hover, .ob-mobile-nav__link:focus-visible, .ob-mobile-nav__link.active, .ob-mobile-nav__link[aria-current="page"], .ob-mobile-nav__parent-link:hover, .ob-mobile-nav__parent-link:focus-visible, .ob-mobile-nav__parent-link.active, .ob-mobile-nav__parent-link[aria-current="page"] { background: rgba(93, 159, 210, 0.08); color: var(--ob-blue-deep); outline: none; } .ob-mobile-nav__link.active::before, .ob-mobile-nav__link[aria-current="page"]::before, .ob-mobile-nav__parent-link.active::before, .ob-mobile-nav__parent-link[aria-current="page"]::before { content: ""; position: absolute; left: 2px; top: 50%; width: 2px; height: 18px; border-radius: 999px; background: var(--ob-blue); transform: translateY(-50%); } .ob-mobile-nav__group { border-bottom: 1px solid rgba(45, 48, 53, 0.07); } .ob-mobile-nav__parent-row { display: grid; grid-template-columns: minmax(0, 1fr) 42px; align-items: stretch; } .ob-mobile-nav__parent-link { border-bottom: 0; } .ob-mobile-nav__toggle { width: 42px; min-height: 42px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--ob-muted); cursor: pointer; } .ob-mobile-nav__toggle svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform 160ms ease; } .ob-mobile-nav__group.is-open .ob-mobile-nav__toggle svg { transform: rotate(180deg); } .ob-mobile-submenu { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 170ms ease, opacity 170ms ease; } .ob-mobile-submenu__inner { overflow: hidden; } .ob-mobile-nav__group.is-open .ob-mobile-submenu { grid-template-rows: 1fr; opacity: 1; } .ob-mobile-submenu__link, .ob-mobile-submenu__disabled { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 39px; margin-left: 12px; padding: 8px 10px 8px 15px; border-left: 1px solid rgba(93, 159, 210, 0.20); color: #64686d; font-family: var(--ob-ui-font); font-size: 0.73rem; font-weight: 500; line-height: 1.25; } .ob-mobile-submenu__link:hover, .ob-mobile-submenu__link:focus-visible, .ob-mobile-submenu__link.is-current { color: var(--ob-blue-deep); background: rgba(93, 159, 210, 0.06); outline: none; } .ob-mobile-submenu__disabled { color: #96989b; } .ob-mobile-submenu__note { padding: 2px 6px; border-radius: 999px; background: rgba(229, 123, 156, 0.10); color: #b55f7c; font-size: 0.50rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } } /* Explicit mobile landscape behavior */ @media (max-width: 1100px) and (max-height: 600px) and (orientation: landscape) { .ob-mobile-menu { inset: var(--ob-mobile-menu-top, var(--ob-header-height-landscape)) 0 0; } .ob-header, .ob-header__inner { min-height: var(--ob-header-height-landscape); } .ob-header__inner { padding-inline: 17px; } .ob-brand__logo { width: 62px; height: 39px; max-width: 62px; max-height: 39px; } .ob-header__actions { gap: 5px; } .ob-header__icon, .ob-menu-toggle { width: 32px; height: 32px; min-width: 32px; min-height: 32px; } .ob-header__icon svg { width: 16px; height: 16px; } .ob-mobile-menu__panel { /* Same relationship as portrait: a small, fixed gap below the live header edge. */ top: 7px; right: 11px; width: min(318px, calc(100vw - 22px)); max-height: calc(100% - 14px); margin-top: 0; padding: 7px; border-radius: 14px; transform-origin: top right; } .ob-mobile-nav__link, .ob-mobile-nav__parent-link { min-height: 31px; padding: 6px 9px; font-size: 0.66rem; } .ob-mobile-nav__parent-row { grid-template-columns: minmax(0, 1fr) 32px; } .ob-mobile-nav__toggle { width: 32px; min-height: 31px; } .ob-mobile-submenu__link, .ob-mobile-submenu__disabled { min-height: 29px; padding-block: 5px; font-size: 0.64rem; } } /* ========================================================= GLOBAL SEARCH — Community-style compact search bar Same width, placement and behavior on every page. ========================================================= */ .ob-site-search { position: fixed; z-index: 4900; top: var(--ob-header-height); left: 0; right: 0; width: 100%; padding: 15px 24px 16px; border: 0; border-bottom: 1px solid var(--ob-line); background: rgba(255, 253, 249, 0.975); color: var(--ob-ink); box-shadow: 0 12px 30px rgba(25, 31, 37, 0.08); backdrop-filter: blur(16px) saturate(125%); -webkit-backdrop-filter: blur(16px) saturate(125%); } .ob-site-search[hidden] { display: none !important; } .ob-site-search__inner { width: min(720px, 100%); margin-inline: auto; } .ob-site-search__label { display: block; margin: 0 0 8px; color: var(--ob-muted); font-family: var(--ob-ui-font); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; line-height: 1.2; text-transform: uppercase; } .ob-site-search__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; margin: 0; } .ob-site-search__row input { width: 100%; min-width: 0; min-height: 44px; padding: 10px 14px; border: 1px solid rgba(68, 68, 72, 0.14); border-radius: 10px; outline: none; background: #fff; color: var(--ob-ink); font-family: var(--ob-ui-font); font-size: 0.86rem; transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease; } .ob-site-search__row input:focus { border-color: rgba(93, 159, 210, 0.58); box-shadow: 0 0 0 3px rgba(93, 159, 210, 0.10); } .ob-site-search__button { min-width: 104px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 10px; background: var(--ob-blue); color: #fff; font-family: var(--ob-ui-font); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.075em; text-transform: uppercase; cursor: pointer; transition: background-color 150ms ease, transform 150ms ease; } .ob-site-search__button:hover, .ob-site-search__button:focus-visible { background: var(--ob-blue-deep); transform: translateY(-1px); outline: none; } .ob-site-search__status { min-height: 17px; margin: 7px 2px 0; color: var(--ob-muted); font-family: var(--ob-ui-font); font-size: 0.70rem; line-height: 1.4; } .ob-site-search__results { display: grid; gap: 3px; max-height: min(320px, calc(100vh - var(--ob-header-height) - 150px)); margin-top: 8px; overflow-y: auto; overscroll-behavior: contain; } .ob-site-search__results:empty { display: none; } .ob-search-result { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 52px; padding: 9px 11px; border: 1px solid transparent; border-radius: 9px; color: inherit; background: transparent; text-decoration: none; transition: background-color 140ms ease, border-color 140ms ease; } .ob-search-result:hover, .ob-search-result:focus-visible { border-color: rgba(93, 159, 210, 0.12); background: rgba(93, 159, 210, 0.07); outline: none; } .ob-search-result__category { display: block; margin-bottom: 2px; color: #6d99b8; font-family: var(--ob-ui-font); font-size: 0.55rem; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; } .ob-search-result__title { display: block; color: inherit; font-family: var(--ob-ui-font); font-size: 0.80rem; font-weight: 600; line-height: 1.25; } .ob-search-result__snippet { display: block; margin-top: 2px; color: var(--ob-muted); font-family: var(--ob-ui-font); font-size: 0.66rem; line-height: 1.35; } .ob-search-result__arrow { color: var(--ob-pink); font-style: normal; font-size: 0.88rem; } .ob-site-search__empty { margin: 0; padding: 10px 2px 2px; color: var(--ob-muted); font-family: var(--ob-ui-font); font-size: 0.72rem; } .ob-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* ========================================================= DARK MODE ========================================================= */ html[data-theme="dark"] .ob-header { /* Opaque global surface: prevents page-specific backgrounds from tinting the shared header. */ background: var(--ob-dark-bg); color: var(--ob-dark-ink); border-bottom-color: var(--ob-dark-line); } html[data-theme="dark"] .ob-nav__link, html[data-theme="dark"] .ob-header__icon, html[data-theme="dark"] .ob-menu-toggle { color: var(--ob-dark-ink); } html[data-theme="dark"] .ob-nav__submenu-toggle { color: var(--ob-dark-muted); } html[data-theme="dark"] .ob-header__icon, html[data-theme="dark"] .ob-menu-toggle { border-color: var(--ob-dark-line); background: rgba(255, 255, 255, 0.015); } html[data-theme="dark"] .ob-submenu, html[data-theme="dark"] .ob-mobile-menu__panel { background: rgba(37, 39, 44, 0.99); color: var(--ob-dark-ink); border-color: var(--ob-dark-line); } html[data-theme="dark"] .ob-submenu__link, html[data-theme="dark"] .ob-submenu__disabled, html[data-theme="dark"] .ob-mobile-nav__link, html[data-theme="dark"] .ob-mobile-nav__parent-link { color: var(--ob-dark-ink); } html[data-theme="dark"] .ob-submenu__disabled, html[data-theme="dark"] .ob-mobile-submenu__disabled, html[data-theme="dark"] .ob-mobile-submenu__link, html[data-theme="dark"] .ob-search-result__snippet, html[data-theme="dark"] .ob-site-search__status { color: var(--ob-dark-muted); } html[data-theme="dark"] .ob-submenu__link:hover, html[data-theme="dark"] .ob-submenu__link:focus-visible, html[data-theme="dark"] .ob-submenu__link.is-current, html[data-theme="dark"] .ob-mobile-nav__link:hover, html[data-theme="dark"] .ob-mobile-nav__link.active, html[data-theme="dark"] .ob-mobile-nav__parent-link:hover, html[data-theme="dark"] .ob-mobile-nav__parent-link.active, html[data-theme="dark"] .ob-mobile-submenu__link:hover, html[data-theme="dark"] .ob-mobile-submenu__link.is-current { color: #a9d7f7; background: rgba(93, 159, 210, 0.10); } html[data-theme="dark"] .ob-mobile-nav__group, html[data-theme="dark"] .ob-mobile-nav__link, html[data-theme="dark"] .ob-mobile-nav__parent-link, html[data-theme="dark"] .ob-search-result { border-color: rgba(255, 255, 255, 0.06); } html[data-theme="dark"] .ob-site-search { background: rgba(31, 32, 36, 0.985); color: var(--ob-dark-ink); border-bottom-color: var(--ob-dark-line); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22); } html[data-theme="dark"] .ob-site-search__label, html[data-theme="dark"] .ob-site-search__status, html[data-theme="dark"] .ob-search-result__snippet { color: var(--ob-dark-muted); } html[data-theme="dark"] .ob-site-search__row input { color: var(--ob-dark-ink); background: rgba(255, 255, 255, 0.045); border-color: var(--ob-dark-line); } html[data-theme="dark"] .ob-site-search__row input::placeholder { color: rgba(245, 242, 239, 0.42); } html[data-theme="dark"] .ob-search-result:hover, html[data-theme="dark"] .ob-search-result:focus-visible { border-color: rgba(93, 159, 210, 0.16); background: rgba(93, 159, 210, 0.10); } /* ========================================================= RESPONSIVE SEARCH ========================================================= */ @media (max-width: 1100px) { .ob-site-search { top: var(--ob-header-height-mobile); padding: 13px 18px 14px; } } @media (max-width: 520px) { .ob-site-search__row { grid-template-columns: 1fr; } .ob-site-search__button { min-width: 0; } .ob-site-search__results { max-height: min(280px, calc(100vh - var(--ob-header-height-mobile) - 190px)); } } @media (max-width: 1100px) and (max-height: 600px) and (orientation: landscape) { .ob-site-search { top: var(--ob-header-height-landscape); padding: 8px 18px 9px; } .ob-site-search__label { margin-bottom: 5px; font-size: 0.58rem; } .ob-site-search__row input, .ob-site-search__button { min-height: 36px; } .ob-site-search__status { margin-top: 4px; font-size: 0.62rem; } .ob-site-search__results { max-height: min(190px, calc(100vh - var(--ob-header-height-landscape) - 105px)); } } /* ========================================================= OB_00001.4A — DESKTOP HEADER ALIGNMENT CORRECTION Keep the global header on the same 1480px / 96vw canvas as the homepage shell, and make the desktop menu a true right-aligned cluster rather than a centered grid column. ========================================================= */ @media (min-width: 1101px) { .ob-header { width: min(var(--ob-shell-max), 96vw); margin-inline: auto; } .ob-header__inner { width: 100%; max-width: none; display: flex; align-items: center; gap: 0; padding-inline: clamp(28px, 3.4vw, 50px); } .ob-brand { flex: 0 0 auto; margin-right: auto; } .ob-nav { flex: 0 1 auto; margin-left: auto; justify-self: auto; justify-content: flex-end; gap: clamp(14px, 1.2vw, 22px); } .ob-header__actions { flex: 0 0 auto; justify-self: auto; margin-left: clamp(18px, 1.35vw, 24px); } } /* ========================================================= OB_00001.5A — SEARCH BAR / HEADER FLOW CORRECTION Search is a normal in-flow surface directly below the header. It uses the same desktop canvas as the header/home shell, so it never overlaps the navigation or stretches edge-to-edge. ========================================================= */ .ob-site-search { position: relative; z-index: 4800; top: auto; left: auto; right: auto; width: min(var(--ob-shell-max), 96vw); margin: 0 auto; padding: 14px clamp(28px, 3.4vw, 50px) 15px; border: 0; border-bottom: 1px solid var(--ob-line); border-radius: 0; box-shadow: none; background: rgba(255, 253, 249, 0.985); } .ob-site-search__inner { width: min(720px, 100%); margin-inline: auto; } @media (max-width: 1100px) { .ob-site-search { position: relative; top: auto; width: 100%; margin: 0; padding: 12px 18px 13px; } } @media (max-width: 1100px) and (max-height: 600px) and (orientation: landscape) { .ob-site-search { position: relative; top: auto; padding: 8px 18px 9px; } } /* ========================================================= OB00001.6 — TOUCH-TABLET DESKTOP-NAV BEHAVIOR iPad landscape can retain the full desktop navigation while using coarse touch input. Keep dropdown parents tap-friendly. ========================================================= */ @media (hover: none), (pointer: coarse) { .ob-nav__group, .ob-nav__parent, .ob-nav__link, .ob-nav__submenu-toggle { touch-action: manipulation; } .ob-nav__group > .ob-nav__parent .ob-nav__link { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } /* On touch, JS owns the open/closed state; avoid hover persistence. */ .ob-nav__group:not(.is-open) > .ob-submenu { opacity: 0; visibility: hidden; pointer-events: none; } .ob-nav__group.is-open > .ob-submenu { opacity: 1; visibility: visible; pointer-events: auto; } } /* ========================================================= OB_00001.5E — THEME ICON + SHARED DARK HEADER HARDENING --------------------------------------------------------- 1) Use SVG icons instead of Unicode emoji/text glyphs so the icon renders identically on desktop, iPad and phones. 2) The sun is intentionally warm yellow on every viewport. 3) Keep the global dark header on one exact opaque surface. ========================================================= */ .ob-theme-glyph { display: grid; place-items: center; width: 20px; height: 20px; line-height: 1; } .ob-theme-svg { display: block; width: 19px; height: 19px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; } .ob-theme-svg--moon { color: currentColor; } .ob-theme-svg--sun { color: #f2bc3f; } html[data-theme="dark"] .ob-theme-svg--sun { color: #f2bc3f; } html[data-theme="dark"] .ob-header { background-color: var(--ob-dark-bg); background-image: none; backdrop-filter: none; -webkit-backdrop-filter: none; } /* ========================================================= OB_00001.8 — MOBILE STICKY NAVIGATION STABILITY --------------------------------------------------------- Mobile Safari/Chrome can stop position:sticky from working when a page-level body uses overflow-x:hidden. Several site pages use that rule for horizontal clipping, while Oom/Bam do not — which is why their headers remained sticky. Use overflow-x:clip on mobile instead. `clip` prevents horizontal spill without creating the scrolling container that interferes with the sticky global header. ========================================================= */ @media (max-width: 1100px) { html, body.ob-global { overflow-x: clip !important; } body.ob-global > .ob-header { position: sticky !important; top: 0 !important; z-index: 5000 !important; transform: translateZ(0); -webkit-transform: translateZ(0); } } /* Short landscape phones/tablets use the same stable behavior. */ @media (max-width: 1100px) and (max-height: 600px) and (orientation: landscape) { html, body.ob-global { overflow-x: clip !important; } body.ob-global > .ob-header { position: sticky !important; top: 0 !important; z-index: 5000 !important; } } /* ========================================================= GLOBAL FOOTER — OB_00001.8a Unified brand + social links across the fansite. Namespaced to avoid page-specific footer collisions. ========================================================= */ .ob-global .ob-site-footer { width: 100%; margin: 0; padding: 0; color: var(--ob-ink); background: rgba(255, 253, 249, 0.985); border-top: 1px solid var(--ob-line); box-shadow: none; } .ob-global .ob-site-footer, .ob-global .ob-site-footer * { box-sizing: border-box; } .ob-global .ob-footer__inner { width: min(var(--ob-shell-max), 100%); margin-inline: auto; padding: 26px clamp(24px, 3.5vw, 52px) 20px; display: grid; grid-template-columns: minmax(230px, 1fr) auto minmax(200px, 1fr); align-items: center; gap: clamp(22px, 4vw, 60px); } .ob-global .ob-footer__brand-block { min-width: 0; display: flex; align-items: center; gap: 14px; } .ob-global .ob-footer__brand { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 78px; } .ob-global .ob-footer__brand img { display: block; width: 78px; height: auto; max-height: 52px; object-fit: contain; } .ob-global .ob-footer__main, .ob-global .ob-footer__message, .ob-global .ob-footer__social-label, .ob-global .ob-footer__bottom p { margin: 0; } .ob-global .ob-footer__main { color: var(--ob-muted); font-family: var(--ob-ui-font); font-size: 0.72rem; line-height: 1.5; } .ob-global .ob-footer__social-block { display: grid; justify-items: center; gap: 8px; } .ob-global .ob-footer__social-label { color: var(--ob-muted); font-family: var(--ob-ui-font); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } .ob-global .ob-footer__socials { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; } .ob-global .ob-footer__socials a { min-height: 32px; padding: 7px 12px; display: inline-flex; align-items: center; justify-content: center; color: var(--ob-ink); background: transparent; border: 1px solid var(--ob-line); border-radius: 999px; font-family: var(--ob-ui-font); font-size: 0.67rem; font-weight: 600; line-height: 1; text-decoration: none; transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease, transform 180ms ease; } .ob-global .ob-footer__socials a:hover, .ob-global .ob-footer__socials a:focus-visible { color: var(--ob-blue-deep); border-color: rgba(93, 159, 210, 0.5); background: rgba(93, 159, 210, 0.07); transform: translateY(-1px); outline: none; } .ob-global .ob-footer__message { justify-self: end; color: var(--ob-ink); font-family: var(--ob-display-font); font-size: clamp(0.92rem, 1.25vw, 1.08rem); font-weight: 600; white-space: nowrap; } .ob-global .ob-footer__bottom { border-top: 1px solid var(--ob-line); } .ob-global .ob-footer__bottom p { width: min(var(--ob-shell-max), 100%); margin-inline: auto; padding: 11px clamp(24px, 3.5vw, 52px) 13px; color: var(--ob-muted); font-family: var(--ob-ui-font); font-size: 0.62rem; text-align: center; } html[data-theme="dark"] .ob-global .ob-site-footer { color: var(--ob-dark-ink); background: rgba(23, 24, 27, 0.985); border-color: var(--ob-dark-line); } html[data-theme="dark"] .ob-global .ob-footer__main, html[data-theme="dark"] .ob-global .ob-footer__social-label, html[data-theme="dark"] .ob-global .ob-footer__bottom p { color: var(--ob-dark-muted); } html[data-theme="dark"] .ob-global .ob-footer__message, html[data-theme="dark"] .ob-global .ob-footer__socials a { color: var(--ob-dark-ink); } html[data-theme="dark"] .ob-global .ob-footer__socials a, html[data-theme="dark"] .ob-global .ob-footer__bottom { border-color: var(--ob-dark-line); } html[data-theme="dark"] .ob-global .ob-footer__socials a:hover, html[data-theme="dark"] .ob-global .ob-footer__socials a:focus-visible { color: #c7e6fb; border-color: rgba(169, 206, 229, 0.42); background: rgba(169, 206, 229, 0.08); } @media (max-width: 1100px) and (min-width: 901px) { .ob-global .ob-footer__inner { grid-template-columns: minmax(220px, 1fr) auto; grid-template-areas: "brand social" "message message"; gap: 18px 32px; padding-top: 24px; } .ob-global .ob-footer__brand-block { grid-area: brand; } .ob-global .ob-footer__social-block { grid-area: social; justify-self: end; } .ob-global .ob-footer__message { grid-area: message; justify-self: center; } } @media (max-width: 900px) { .ob-global .ob-footer__inner { grid-template-columns: 1fr; justify-items: center; gap: 18px; padding-top: 24px; text-align: center; } .ob-global .ob-footer__brand-block { flex-direction: column; justify-content: center; gap: 8px; } .ob-global .ob-footer__message { justify-self: center; } } @media (max-width: 520px) { .ob-global .ob-footer__inner { padding-inline: 18px; } .ob-global .ob-footer__socials { width: 100%; gap: 6px; } .ob-global .ob-footer__socials a { min-height: 34px; padding-inline: 11px; font-size: 0.65rem; } .ob-global .ob-footer__bottom p { padding-inline: 18px; } } /* ========================================================= HOMEPAGE — BLOSSOM ACCOUNT ACCESS v1.0 Mirrors Community header auth without crowding main nav. ========================================================= */ .page-home [hidden] { display: none !important; } .page-home .home-brand-access { justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-width: 0; } .page-home .home-brand-access .ob-brand { flex: 0 0 auto; } .page-home .home-header-auth { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; } .page-home .home-header-auth__button { min-height: 32px; padding: 7px 11px; border: 1px solid rgba(229,123,156,.34); border-radius: 999px; background: transparent; color: var(--ob-muted); font-family: var(--ob-ui-font); font-size: .68rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap; cursor: pointer; transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease; } .page-home .home-header-auth__button:hover { color: #c65376; border-color: rgba(229,123,156,.62); transform: translateY(-1px); } .page-home .home-header-auth__button.is-primary { color: #c65376; background: rgba(229,123,156,.10); } .page-home .home-header-auth__button:disabled { opacity: .45; cursor: default; transform: none; } .page-home .ob-nav__link[data-nav-key="welcome"] { max-width: 155px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .page-home .home-mobile-auth { display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; padding: 0 2px 14px; border-bottom: 1px solid rgba(120,120,120,.12); } .page-home .home-mobile-auth__button { min-height: 40px; padding: 8px 12px; border: 1px solid rgba(229,123,156,.28); border-radius: 10px; background: transparent; color: inherit; font: 600 .76rem var(--ob-ui-font); cursor: pointer; } .page-home .home-mobile-auth__button.is-primary { color: #c65376; background: rgba(229,123,156,.10); } /* Auth modal */ .page-home .home-auth-modal { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 24px; } .page-home .home-auth-modal[hidden] { display: none !important; } .page-home .home-auth-modal__backdrop { position:absolute; inset:0; background:rgba(24,25,30,.60); backdrop-filter:blur(8px); } .page-home .home-auth-modal__dialog { position: relative; width: min(520px, 100%); max-height: min(760px, calc(100vh - 34px)); overflow: auto; padding: 30px; border: 1px solid rgba(217,168,166,.26); border-radius: 22px; background: rgba(255,253,249,.985); color: var(--ob-ink); box-shadow: 0 28px 80px rgba(31,32,36,.22); } .page-home .home-auth-modal__close { position:absolute; top:14px; right:16px; width:36px; height:36px; border:0; border-radius:50%; background:transparent; color:inherit; font-size:1.5rem; cursor:pointer; } .page-home .home-auth-eyebrow { margin:0 0 9px; color:var(--ob-pink); font:.7rem/1.2 var(--ob-ui-font); font-weight:700; letter-spacing:.16em; } .page-home .home-auth-title { margin:0 44px 8px 0; font:600 clamp(1.9rem,4vw,2.6rem)/1 var(--ob-display-font); } .page-home .home-auth-intro { margin:0 0 18px; color:var(--ob-muted); font:.84rem/1.55 var(--ob-ui-font); } .page-home .home-auth-tabs { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:18px; padding:5px; border-radius:12px; background:rgba(229,123,156,.07); } .page-home .home-auth-tab { min-height:40px; border:0; border-radius:9px; background:transparent; color:var(--ob-muted); font:600 .78rem var(--ob-ui-font); cursor:pointer; } .page-home .home-auth-tab.is-active { background:#fff; color:#c65376; box-shadow:0 5px 18px rgba(80,50,60,.07); } .page-home .home-auth-form { display:grid; gap:13px; } .page-home .home-auth-form label { display:grid; gap:6px; color:var(--ob-ink); font:600 .76rem var(--ob-ui-font); } .page-home .home-auth-form input { width:100%; min-height:44px; padding:10px 12px; border:1px solid rgba(45,48,53,.14); border-radius:9px; background:#fff; color:var(--ob-ink); font:400 .84rem var(--ob-ui-font); outline:none; } .page-home .home-auth-form input:focus { border-color:rgba(229,123,156,.58); box-shadow:0 0 0 3px rgba(229,123,156,.08); } .page-home .home-auth-guidance { display:grid; gap:7px; padding:12px 13px; border:1px solid rgba(217,168,166,.22); border-radius:11px; background:rgba(255,248,250,.62); color:var(--ob-muted); font:.72rem/1.45 var(--ob-ui-font); } .page-home .home-auth-guidance p { margin:0; } .page-home .home-auth-forgot { justify-self:end; border:0; border-bottom:1px solid rgba(183,76,107,.25); background:transparent; color:#b74c6b; font:600 .72rem var(--ob-ui-font); cursor:pointer; } .page-home .home-auth-status { min-height:18px; margin:0; color:var(--ob-muted); font:.74rem/1.4 var(--ob-ui-font); } .page-home .home-auth-status.is-error { color:#b8405e; } .page-home .home-auth-status.is-success { color:#47765f; } .page-home .home-auth-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:2px; } .page-home .home-auth-secondary, .page-home .home-auth-primary { min-height:42px; padding:9px 16px; border-radius:9px; font:600 .76rem var(--ob-ui-font); cursor:pointer; } .page-home .home-auth-secondary { border:1px solid rgba(45,48,53,.13); background:transparent; color:var(--ob-muted); } .page-home .home-auth-primary { border:1px solid transparent; background:linear-gradient(135deg,var(--ob-pink),#d96f91); color:#fff; } .page-home .home-auth-success-icon { display:grid; place-items:center; width:52px; height:52px; margin:2px 0 13px; border:1px solid rgba(229,123,156,.22); border-radius:50%; background:rgba(229,123,156,.08); font-size:1.4rem; } .page-home .home-auth-account { display:grid; grid-template-columns:auto 1fr; gap:9px 16px; margin:18px 0; padding:14px; border:1px solid rgba(45,48,53,.10); border-radius:11px; background:rgba(255,255,255,.55); font:.76rem var(--ob-ui-font); } .page-home .home-auth-account span { color:var(--ob-muted); } .page-home .home-auth-account strong { overflow-wrap:anywhere; } body.home-auth-modal-open { overflow:hidden; } html[data-theme="dark"] .page-home .home-header-auth__button, html[data-theme="dark"] .page-home .home-mobile-auth__button { color:rgba(255,255,255,.76); border-color:rgba(242,154,181,.25); } html[data-theme="dark"] .page-home .home-header-auth__button.is-primary, html[data-theme="dark"] .page-home .home-mobile-auth__button.is-primary { color:#f29ab5; background:rgba(242,154,181,.10); } html[data-theme="dark"] .page-home .home-auth-modal__dialog { background:#25272c; color:#f5f2ef; border-color:rgba(255,255,255,.08); } html[data-theme="dark"] .page-home .home-auth-tab.is-active, html[data-theme="dark"] .page-home .home-auth-form input { background:#1f2024; color:#f5f2ef; } html[data-theme="dark"] .page-home .home-auth-form label { color:#f5f2ef; } html[data-theme="dark"] .page-home .home-auth-guidance, html[data-theme="dark"] .page-home .home-auth-account { background:rgba(255,255,255,.025); border-color:rgba(255,255,255,.08); } @media (max-width: 1180px) { .page-home .home-header-auth { gap:5px; } .page-home .home-header-auth__button { padding-inline:9px; font-size:.64rem; } } @media (max-width: 1040px) { .page-home .home-header-auth { display:none; } .page-home .home-mobile-auth:not([hidden]) { display:grid; } .page-home .ob-mobile-nav__link[data-nav-key="welcome"] { max-width:none; } } @media (max-width: 620px) { .page-home .home-auth-modal { padding:10px; align-items:end; } .page-home .home-auth-modal__dialog { width:100%; max-height:88vh; padding:24px 18px 20px; border-radius:18px 18px 0 0; } .page-home .home-auth-actions { flex-direction:column-reverse; } .page-home .home-auth-secondary, .page-home .home-auth-primary { width:100%; } } /* ========================================================= GLOBAL FOOTER SOCIAL ICONS — OB_00001.10 Shared across all fansite pages. ========================================================= */ .ob-global .ob-footer__socials--icons { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 10px; } .ob-global .ob-footer__socials--icons .ob-footer__social-icon { width: 36px; height: 36px; min-width: 36px; min-height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; line-height: 1; } .ob-global .ob-footer__socials--icons .ob-footer__social-icon svg { width: 16px; height: 16px; display: block; flex: 0 0 auto; } .ob-global .ob-footer__socials--icons .ob-footer__social-icon:hover, .ob-global .ob-footer__socials--icons .ob-footer__social-icon:focus-visible { transform: translateY(-1px); } .ob-global .ob-footer__socials--icons .ob-footer__social-icon:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } .ob-global .ob-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } @media (max-width: 520px) { .ob-global .ob-footer__socials--icons { width: auto; gap: 9px; } .ob-global .ob-footer__socials--icons .ob-footer__social-icon { width: 36px; height: 36px; min-width: 36px; min-height: 36px; padding: 0; font-size: inherit; } }