/* ============================================================ * Customer Cloud — Site Chrome (unified header / footer) * * SSOT for header + footer across all cc-v2 pages. * Visually mirrors the TOP page's hand-rolled Tailwind chrome, * implemented as pure CSS so it can be loaded on sub-pages * without pulling Tailwind CDN. * * Markup is injected by /cc-v2/assets/js/site-chrome.js * (which reads for relative paths). * * All selectors are scoped under .ccv2 to avoid leaking into * the legacy site, and use the .cc-chrome__ prefix to coexist * with the older .cc-header / .cc-footer styles. * ============================================================ */ /* ---------------------------------------------------------- * Reset for chrome (no Tailwind preflight available) * ---------------------------------------------------------- */ .ccv2 .cc-chrome, .ccv2 .cc-chrome * { box-sizing: border-box; } .ccv2 .cc-chrome a { color: inherit; text-decoration: none; } .ccv2 .cc-chrome button { font: inherit; background: transparent; border: 0; padding: 0; cursor: pointer; color: inherit; } .ccv2 .cc-chrome img { display: block; max-width: 100%; } .ccv2 .cc-chrome ul { list-style: none; margin: 0; padding: 0; } /* ============================================================ * MOBILE HEADER — always visible (≤767px) * ============================================================ */ .ccv2 .cc-chrome__mobile-header { display: flex; position: fixed; top: 0; left: 0; width: 100%; height: 64px; background: #ffffff; border-bottom: 1px solid #f3f4f6; z-index: 50; align-items: center; justify-content: space-between; padding: 0 24px; font-family: var(--cc-font-en), var(--cc-font-ja); } @media (min-width: 768px) { .ccv2 .cc-chrome__mobile-header { display: none; } } .ccv2 .cc-chrome__mobile-header img.cc-chrome__logo-img { height: 24px; width: auto; } .ccv2 .cc-chrome__mobile-actions { display: flex; align-items: center; gap: 8px; } /* Lang dropdown (mobile) */ .ccv2 .cc-chrome__lang { position: relative; } .ccv2 .cc-chrome__lang-toggle { display: flex; align-items: center; gap: 4px; color: #000; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; padding: 12px 8px; } .ccv2 .cc-chrome__lang-menu { display: none; position: absolute; right: 0; top: 100%; background: #fff; border: 1px solid #e5e7eb; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); padding: 4px 0; min-width: 56px; z-index: 60; } .ccv2 .cc-chrome__lang.is-open .cc-chrome__lang-menu { display: block; } .ccv2 .cc-chrome__lang-menu button { display: block; width: 100%; text-align: left; padding: 10px 16px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: #9ca3af; } .ccv2 .cc-chrome__lang-menu button.is-active { color: #000; } .ccv2 .cc-chrome__lang-menu button:hover { background: #f9fafb; } /* Hamburger button */ .ccv2 .cc-chrome__hamburger { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; } .ccv2 .cc-chrome__hamburger svg { display: block; stroke: currentColor; } .ccv2 .cc-chrome__hamburger .icon-close { display: none; } .ccv2 .cc-chrome__hamburger.is-open .icon-hamburger { display: none; } .ccv2 .cc-chrome__hamburger.is-open .icon-close { display: block; } /* Mobile menu overlay */ .ccv2 .cc-chrome__mobile-menu { display: none; position: fixed; inset: 0; background: #ffffff; z-index: 40; padding: 80px 24px 48px; flex-direction: column; font-family: var(--cc-font-en), var(--cc-font-ja); } .ccv2 .cc-chrome__mobile-menu.is-open { display: flex; } @media (min-width: 768px) { .ccv2 .cc-chrome__mobile-menu { display: none !important; } } .ccv2 .cc-chrome__mobile-menu nav { display: flex; flex-direction: column; } .ccv2 .cc-chrome__mobile-menu a { color: #000; font-size: 14px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; padding: 20px 0; border-bottom: 1px solid #f3f4f6; } .ccv2 .cc-chrome__mobile-menu a:last-child { border-bottom: 0; } /* ============================================================ * DESKTOP HEADER — fixed, always visible on subpages (≥768px) * On TOP page (data-mode="scroll") it stays hidden until scroll. * ============================================================ */ .ccv2 .cc-chrome__desktop-header { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 64px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid #f3f4f6; z-index: 50; align-items: center; justify-content: space-between; padding: 0 40px; font-family: var(--cc-font-en), var(--cc-font-ja); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); } @media (min-width: 768px) { .ccv2 .cc-chrome__desktop-header { display: flex; } } /* Scroll mode (TOP page) — hidden until scrolled past hero */ .ccv2 .cc-chrome__desktop-header[data-mode="scroll"] { transform: translateY(-100%); } .ccv2 .cc-chrome__desktop-header[data-mode="scroll"].is-scrolled { transform: translateY(0); } .ccv2 .cc-chrome__desktop-header img.cc-chrome__logo-img { height: 28px; width: auto; } .ccv2 .cc-chrome__desktop-right { display: flex; align-items: center; gap: 32px; } .ccv2 .cc-chrome__desktop-nav { display: flex; gap: 24px; } .ccv2 .cc-chrome__desktop-nav a { color: #000; font-size: 14px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; transition: opacity 0.2s; } .ccv2 .cc-chrome__desktop-nav a:hover { opacity: 0.5; } .ccv2 .cc-chrome__desktop-nav a[aria-current="page"] { opacity: 0.55; } .ccv2 .cc-chrome__desktop-lang { display: flex; gap: 16px; border-left: 1px solid #d1d5db; padding-left: 32px; } .ccv2 .cc-chrome__desktop-lang button { color: #9ca3af; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; transition: color 0.2s; } .ccv2 .cc-chrome__desktop-lang button:hover, .ccv2 .cc-chrome__desktop-lang button.is-active { color: #000; } /* Spacer for fixed header on subpages — pushes
down */ .ccv2.has-site-chrome main, .ccv2.has-site-chrome > main { /* nothing — page hero/sections already provide top padding */ } /* ============================================================ * FOOTER * ============================================================ */ .ccv2 .cc-chrome__footer { width: 100%; background: #0a0f18; color: #ffffff; padding: 64px 0 48px; display: flex; justify-content: center; user-select: none; font-family: var(--cc-font-en), var(--cc-font-ja); } @media (min-width: 768px) { .ccv2 .cc-chrome__footer { padding: 96px 0 48px; } } .ccv2 .cc-chrome__footer-inner { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 24px; } @media (min-width: 768px) { .ccv2 .cc-chrome__footer-inner { padding: 0 40px; } } .ccv2 .cc-chrome__footer-top { display: flex; flex-direction: column; gap: 48px; margin-bottom: 64px; } @media (min-width: 768px) { .ccv2 .cc-chrome__footer-top { flex-direction: row; justify-content: space-between; gap: 0; margin-bottom: 112px; } } /* Brand block (logo + social) */ .ccv2 .cc-chrome__footer-brand { width: 100%; display: flex; flex-direction: column; } @media (min-width: 768px) { .ccv2 .cc-chrome__footer-brand { width: 33.333%; } } .ccv2 .cc-chrome__footer-logo { height: 28px; width: auto; align-self: flex-start; margin-bottom: 24px; } .ccv2 .cc-chrome__footer-tag { color: #9ca3af; font-size: 12px; letter-spacing: 0.1em; margin-bottom: 40px; } .ccv2 .cc-chrome__footer-social { display: flex; gap: 16px; align-items: center; } .ccv2 .cc-chrome__footer-social a { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: #fff; transition: opacity 0.2s; } .ccv2 .cc-chrome__footer-social a img { width: 32px; height: 32px !important; object-fit: contain; } .ccv2 .cc-chrome__footer-social a:hover { opacity: 0.8; } .ccv2 .cc-chrome__footer-social a.is-note { background: #41c9b4; border-radius: 2px; font-weight: 800; font-size: 14px; } .ccv2 .cc-chrome__footer-social a.is-linkedin { background: #0a66c2; border-radius: 2px; } .ccv2 .cc-chrome__footer-social a.is-facebook { background: #1877f2; border-radius: 9999px; } .ccv2 .cc-chrome__footer-social a.is-prtimes { background: #222; border-radius: 2px; border: 1px solid #374151; flex-direction: column; font-weight: 900; line-height: 1; } .ccv2 .cc-chrome__footer-social a.is-prtimes span:nth-child(1) { font-size: 6px; } .ccv2 .cc-chrome__footer-social a.is-prtimes span:nth-child(2) { font-size: 5px; } /* Sitemap (4 columns) */ .ccv2 .cc-chrome__footer-sitemap { width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; } @media (min-width: 768px) { .ccv2 .cc-chrome__footer-sitemap { width: 66.666%; display: flex; justify-content: space-between; gap: 0; } } .ccv2 .cc-chrome__footer-col { display: flex; flex-direction: column; } .ccv2 .cc-chrome__footer-col-title { color: #9ca3af; font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; margin: 0 0 32px; } .ccv2 .cc-chrome__footer-col-links { display: flex; flex-direction: column; gap: 24px; } .ccv2 .cc-chrome__footer-col-links a { color: #fff; font-size: 13px; letter-spacing: 0.05em; transition: color 0.2s; } .ccv2 .cc-chrome__footer-col-links a:hover { color: #d1d5db; } /* Bottom: copyright */ .ccv2 .cc-chrome__footer-bottom { border-top: 1px solid rgba(31, 41, 55, 0.8); padding-top: 32px; display: flex; flex-direction: column; gap: 12px; color: #6b7280; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; } @media (min-width: 768px) { .ccv2 .cc-chrome__footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; gap: 0; } } .ccv2 .cc-chrome__footer-motto { display: none; } @media (min-width: 768px) { .ccv2 .cc-chrome__footer-motto { display: block; } } /* ============================================================ * Body padding for fixed header on subpages * (TOP page handles its own hero positioning) * ============================================================ */ .ccv2.has-site-chrome:not(.is-top) { padding-top: 0; } /* Hide legacy cc-header / cc-footer when site-chrome is active, so they don't double-render during the transition. Also hides national-infrastructure's custom .header. */ .ccv2.has-site-chrome .cc-header, .ccv2.has-site-chrome .cc-footer, .ccv2.has-site-chrome > .header, .ccv2.has-site-chrome > .mobile-menu, .ccv2.has-site-chrome > .mobile-menu-overlay { display: none !important; }