/** * Nettoge retro-guide site shell (phase 1). * Reference: こういうサイトにしたい/globals.css (site-header / global-nav / breadcrumb / site-footer). * * Scope: page outer bg, #header, gnav tab strip, breadcrumb, #footer only. * Do NOT change: sticky / z-index / isolation / overflow / submenu geometry / SP menu behavior / * content width / heading styles / Sparking·ARC·D2 body CSS. * * Palette: --nettoge-retro-* in tokens-nettoge.css (light + dark). No raw shell colors here. * * Surface contract: keep --nettoge-page-bg / --surface-widget untouched so * .-frame-on .l-mainContent and cards stay opaque over the outer grid. * * Note: SWELL puts body_class on #body_wrap (not ). Frame/theme helpers use that. */ /* -------------------------------------------------------------------------- */ /* Page outer background (grid). Content faces stay on token surfaces. */ /* -------------------------------------------------------------------------- */ body, .l-body, .l-wrapper { background-color: var(--nettoge-retro-page-bg); background-image: var(--nettoge-retro-page-grid-image); background-size: var(--nettoge-retro-page-grid-size) var(--nettoge-retro-page-grid-size); } /* Ensure framed main / widgets do not inherit the page grid. Main face keeps existing --nettoge-page-bg (same as swell_custom .-frame-on rule). */ .-frame-on .l-mainContent { background-color: var(--nettoge-page-bg, var(--surface-widget, #ffffff)); background-image: none; } /* Widget faces: owned by sidebar-nettoge.css (phase 2 --nettoge-retro-side-*). Keep only grid-bleed prevention here; do not force --surface-widget. */ #sidebar .c-widget, #fix_sidebar .c-widget { background-image: none; } /* -------------------------------------------------------------------------- */ /* Header — slate-blue 4-stop gradient + light logo text */ /* (height / position / z-index / isolation / SP controls untouched) */ /* -------------------------------------------------------------------------- */ #header.l-header { background: var(--nettoge-retro-header-bg); border-bottom: 1px solid var(--nettoge-retro-header-border); box-shadow: inset 0 1px var(--nettoge-retro-header-inset); } #header.l-header .l-header__logo .nettoge-logo__word, #header.l-header .l-header__logo .nettoge-logo__sub, #header.l-header .l-header__logo .c-headLogo.-txt, #header.l-header .l-header__logo .c-headLogo__link { color: var(--nettoge-retro-header-logo); text-shadow: var(--nettoge-retro-header-text-shadow); } #header.l-header .l-header__logo .nettoge-logo__sub { color: var(--nettoge-retro-header-kicker, var(--nettoge-retro-header-logo-sub)); opacity: 0.95; text-shadow: var(--nettoge-retro-header-text-shadow); } #header.l-header .l-header__logo .nettoge-logo__tld { color: var(--nettoge-retro-header-kicker); } #header.l-header .l-header__inner .c-catchphrase { color: var(--nettoge-retro-header-kicker); text-shadow: var(--nettoge-retro-header-text-shadow); } /* -------------------------------------------------------------------------- */ /* Gnav tab strip — gray band; current/hover navy (z-index/overflow untouched) */ /* -------------------------------------------------------------------------- */ body .l-header__additional-menu { background: var(--nettoge-retro-nav-bg); border-top: 1px solid var(--nettoge-retro-nav-border-top); border-bottom: 1px solid var(--nettoge-retro-nav-border-bottom); } body .l-header__gnav .c-gnav > li.menu-item > a { color: var(--nettoge-retro-nav-link); border-right: 1px solid var(--nettoge-retro-nav-link-border-right); border-left: 1px solid var(--nettoge-retro-nav-link-border-left); font-weight: 700; } body .l-header__gnav .c-gnav > li.menu-item > a:hover, body .l-header__gnav .c-gnav > li.menu-item:hover > a, body .l-header__gnav .c-gnav > li.menu-item:focus-within > a, body .l-header__gnav .c-gnav > li.menu-item.-current > a, body .l-header__gnav .c-gnav > li.menu-item.current-menu-item > a, body .l-header__gnav .c-gnav > li.menu-item.current-menu-ancestor > a, body .l-header__gnav .c-gnav > li.menu-item.current-menu-parent > a { color: var(--nettoge-retro-nav-active-fg); background: var(--nettoge-retro-nav-active-bg); text-shadow: var(--nettoge-retro-nav-active-text-shadow); } /* Submenu faces stay on opaque surface tokens (do not restyle geometry). */ body .l-header__gnav .c-gnav > li.menu-item > ul.sub-menu { background: var(--surface-gnav-submenu, var(--surface-widget, #ffffff)); color: var(--color_text); text-shadow: none; } body .l-header__gnav .c-gnav > li.menu-item > ul.sub-menu > li.menu-item > a { color: var(--color_text); background: transparent; border: 0; text-shadow: none; font-weight: 500; } body .l-header__gnav .c-gnav > li.menu-item > ul.sub-menu > li.menu-item > a:hover, body .l-header__gnav .c-gnav > li.menu-item > ul.sub-menu > li.menu-item > a:focus { background: var(--surface-gnav-submenu-hover, var(--nettoge-page-bg)); color: var(--color_text); text-shadow: none; } /* SP: keep underline-current chrome usable; only soft band + link colors. */ @media (max-width: 960px) { body .l-header__additional-menu { background: var(--nettoge-retro-nav-bg); border-top: 1px solid var(--nettoge-retro-nav-border-top); border-bottom: 1px solid var(--nettoge-retro-nav-border-bottom); } body .l-header__gnav .c-gnav > li.menu-item > a { border-left: 0; border-right: 0; } body .l-header__gnav .c-gnav > li.menu-item.-current > a, body .l-header__gnav .c-gnav > li.menu-item.current-menu-item > a, body .l-header__gnav .c-gnav > li.menu-item.current-menu-ancestor > a { border-bottom-color: var(--nettoge-retro-nav-current-underline); } } /* -------------------------------------------------------------------------- */ /* Breadcrumb */ /* -------------------------------------------------------------------------- */ #breadcrumb.p-breadcrumb { padding-top: 8px; padding-bottom: 8px; margin-bottom: 0; color: var(--nettoge-retro-breadcrumb); font-size: var(--nettoge-retro-breadcrumb-size); } #breadcrumb.p-breadcrumb .p-breadcrumb__item, #breadcrumb.p-breadcrumb .p-breadcrumb__list { font-size: var(--nettoge-retro-breadcrumb-size); color: inherit; } #breadcrumb.p-breadcrumb .p-breadcrumb__item::after { color: var(--nettoge-retro-breadcrumb-sep); } #breadcrumb.p-breadcrumb .p-breadcrumb__text { color: inherit; } /* -------------------------------------------------------------------------- */ /* Footer */ /* -------------------------------------------------------------------------- */ #footer.l-footer, #footer.l-footer .l-footer__widgetArea, #footer.l-footer .l-footer__foot { background-color: var(--nettoge-retro-footer-bg); color: var(--nettoge-retro-footer-fg); } #footer.l-footer { border-top: 4px solid var(--nettoge-retro-footer-border); } #footer.l-footer a, #footer.l-footer span { color: inherit; } #footer.l-footer a:hover { color: var(--nettoge-retro-footer-link-hover); }