/* ============================================================ Xihai Rainwater theme — v3 amiya-inspired polished corporate Brand: navy #01479D · bright #1CA0E0 · cyan #00B3D6 · sky #F7F9FB Reference: https://amiya.energy/ (layout / components) ============================================================ */ :root { --navy: #01479d; --navy-2: #003a80; --navy-deep: #012b5e; --blue-bright: #1ca0e0; --blue: #5684bb; --blue-lt: #bacce0; --cyan: #00b3d6; --sky: #f7f9fb; --sky-2: #eef2f6; --ink: #132a45; --grey: #5b6b80; --line: #e4eaf1; --wa: #25d366; --grad-primary: linear-gradient(135deg, #01479d 0%, #0a63c9 100%); --grad-hero: linear-gradient(128deg, #012b5e 0%, #01479d 46%, #1c7fd0 100%); --grad-cta: linear-gradient(122deg, #012b5e 0%, #01479d 55%, #1ca0e0 100%); --card-shadow: 0 6px 24px rgba(1, 43, 94, .07); --card-shadow-hov: 0 18px 44px rgba(1, 43, 94, .15); --radius: 16px; --radius-sm: 10px; --maxw: 1220px; --font: "Inter", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans", Roboto, Helvetica, Arial, sans-serif; } /* ---------- base ---------- */ html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.7; color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; height: auto; } a { color: var(--navy); text-decoration: none; transition: color .18s ease; } a:hover { color: var(--blue-bright); } h1, h2, h3, h4 { font-weight: 800; line-height: 1.25; color: var(--ink); margin: 0 0 .5em; } p { margin: 0 0 1em; } .wrap { max-width: var(--maxw); margin: 0 auto; padding-left: 22px; padding-right: 22px; } .visually-hidden { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); overflow: hidden; height: 1px; width: 1px; word-wrap: normal; } ::selection { background: rgba(0, 179, 214, .25); } abbr[title] { text-decoration: none; cursor: help; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font); font-weight: 700; font-size: 15px; line-height: 1; padding: 15px 30px; border-radius: 999px; cursor: pointer; text-align: center; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease; } .btn--primary { background: var(--grad-primary); color: #fff; border: 1px solid transparent; box-shadow: 0 10px 26px rgba(1, 71, 157, .28); } .btn--primary:hover { transform: translateY(-2px); color: #fff; box-shadow: 0 16px 34px rgba(1, 71, 157, .36); } .btn--ghost { background: rgba(255, 255, 255, .12); color: #fff; border: 1.5px solid rgba(255, 255, 255, .7); } .btn--ghost:hover { background: #fff; color: var(--navy); transform: translateY(-2px); } .btn--navy { background: var(--navy); color: #fff; border: 1px solid transparent; } .btn--navy:hover { background: var(--navy-2); color: #fff; transform: translateY(-2px); } .btn--sm { padding: 11px 22px; font-size: 14px; } /* ---------- topbar ---------- */ .topbar { background: var(--navy-deep); color: #cdddf1; font-size: 13px; } .topbar__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 38px; flex-wrap: wrap; } .topbar__tag { letter-spacing: .6px; text-transform: uppercase; font-size: 11.5px; font-weight: 600; color: #9fbfe8; } .topbar__contact { display: inline-flex; align-items: center; gap: 10px; } .topbar__contact a { color: #dbe8fa; } .topbar__contact a:hover { color: var(--cyan); } .topbar__sep { color: #49688f; } /* ---------- header ---------- */ .site-header { position: sticky; top: 0; z-index: 60; background: rgba(255, 255, 255, .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: box-shadow .2s ease, border-color .2s ease; } .site-header.is-scrolled { box-shadow: 0 10px 30px rgba(1, 43, 94, .1); border-bottom-color: var(--line); } .site-header__in { display: flex; align-items: center; gap: 26px; padding-top: 14px; padding-bottom: 14px; } .brand__logo { display: inline-flex; align-items: center; gap: 12px; } .brand__mark { width: 46px; height: 46px; border-radius: 12px; background: var(--grad-primary); color: #fff; font-size: 17px; font-weight: 800; letter-spacing: .5px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 8px 18px rgba(1, 71, 157, .28); } .brand__text { display: flex; flex-direction: column; line-height: 1.2; } .brand__text strong { font-size: 17.5px; font-weight: 800; color: var(--navy); letter-spacing: .2px; } .brand__text small { font-size: 11.5px; color: var(--grey); margin-top: 2px; } /* Brand logo image (replaces the XH text mark since 2026-11-08). */ .brand__mark--img { background: none; box-shadow: none; border-radius: 0; padding: 0; display: block; flex: 0 0 auto; object-fit: contain; } /* ---------- primary nav ---------- */ .primary-nav { margin-left: auto; display: flex; align-items: center; } .primary-nav > div { display: flex; align-items: center; gap: 26px; } #block-xihai-main-menu { display: flex; align-items: center; } #block-xihai-main-menu > ul { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; } #block-xihai-main-menu > ul > li { position: relative; margin: 0; } #block-xihai-main-menu > ul > li > a { display: inline-block; padding: 9px 14px; font-weight: 700; font-size: 15px; color: var(--ink); border-radius: 999px; position: relative; transition: color .18s ease, background .18s ease; } #block-xihai-main-menu > ul > li > a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 3px; border-radius: 2px; background: var(--grad-primary); transform: scaleX(0); transform-origin: left; transition: transform .22s ease; } #block-xihai-main-menu > ul > li > a:hover { color: var(--navy); } #block-xihai-main-menu > ul > li > a:hover::after, #block-xihai-main-menu > ul > li > a.is-active::after { transform: scaleX(1); } #block-xihai-main-menu > ul > li > a.is-active { color: var(--navy); } /* Language switcher — the block lives in the top bar and is styled by the "Block-driven top bar" section below (dark pills), not by the old light-on-white chips that used to sit in the header. */ .nav-cta { margin-left: 8px; } /* ---------- nav toggle (mobile) ---------- */ .nav-toggle { display: none; } /* The drawer head (brand + close button) exists only inside the mobile fullscreen drawer. The selector has to be specific enough to win over the ".primary-nav > nav" layout rules further down, hence the direct child. */ .primary-nav > .primary-nav__head { display: none; } /* ---------- hero ---------- */ .hero { position: relative; overflow: hidden; background: radial-gradient(900px 460px at 88% -10%, rgba(28, 160, 224, .35) 0%, rgba(28, 160, 224, 0) 55%), radial-gradient(700px 420px at -8% 110%, rgba(0, 179, 214, .22) 0%, rgba(0, 179, 214, 0) 55%), var(--grad-hero); color: #fff; padding: 92px 0 104px; } .hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1px); background-size: 26px 26px; opacity: .35; } .hero .wrap { position: relative; z-index: 1; } .hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; } .hero__badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .35); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .4px; padding: 8px 16px; border-radius: 999px; margin-bottom: 22px; } .hero__badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(0, 179, 214, .22); } .hero h1 { color: #fff; font-size: clamp(34px, 4.6vw, 56px); font-weight: 800; letter-spacing: .3px; margin: 0 0 14px; } .hero h1 em { font-style: normal; color: #7fd4ff; } .hero__sub { font-size: clamp(17px, 1.8vw, 21px); font-weight: 700; color: #d9ecff; margin: 0 0 12px; } .hero__text { font-size: 15.5px; color: #c3dcf7; max-width: 540px; margin: 0 0 22px; } .hero__list { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; max-width: 560px; } .hero__list li { position: relative; padding-left: 28px; font-size: 14.5px; color: #e3effd; } .hero__list li::before { content: ""; position: absolute; left: 0; top: 5px; width: 17px; height: 17px; border-radius: 50%; background: rgba(0, 179, 214, .25); box-shadow: inset 0 0 0 4px rgba(0, 179, 214, .25); } .hero__list li::after { content: ""; position: absolute; left: 5px; top: 9px; width: 7px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); } .hero__cta { display: flex; flex-wrap: wrap; gap: 14px; } .hero__media { position: relative; } .hero__media img { width: 100%; height: 400px; object-fit: cover; border-radius: 24px; display: block; box-shadow: 0 30px 70px rgba(1, 20, 60, .45); border: 1px solid rgba(255, 255, 255, .18); } .hero__media::after { content: ""; position: absolute; inset: 0; border-radius: 24px; background: linear-gradient(180deg, rgba(1, 20, 60, 0) 55%, rgba(1, 20, 60, .5) 100%); } .hero__chip { position: absolute; left: 22px; bottom: 22px; z-index: 2; display: inline-flex; align-items: baseline; gap: 8px; background: rgba(255, 255, 255, .96); color: var(--navy); padding: 12px 20px; border-radius: 999px; font-size: 14px; font-weight: 700; box-shadow: 0 14px 34px rgba(1, 20, 60, .35); } .hero__chip b { font-size: 22px; color: var(--blue-bright); font-weight: 800; } /* ---------- stats band ---------- */ .stats-band { background: #fff; border-bottom: 1px solid var(--line); } .stats-band .wrap { display: grid; grid-template-columns: repeat(4, 1fr); padding-top: 30px; padding-bottom: 30px; } .stat { text-align: center; padding: 18px 8px; position: relative; } .stat + .stat::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 54px; background: var(--line); } .stat b { display: block; font-size: clamp(28px, 3.2vw, 42px); font-weight: 800; color: var(--navy); line-height: 1.1; letter-spacing: .4px; } .stat b::after { content: ""; } .stat span { display: block; margin-top: 6px; font-size: 14px; color: var(--grey); font-weight: 600; } /* ---------- sections ---------- */ .sec { padding: 88px 0; } .sec--steps { background: var(--sky-2); } .sec--news { background: var(--sky); } .sec__inner { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; } .sec__head { text-align: center; max-width: 820px; margin: 0 auto 46px; position: relative; z-index: 1; } .sec__kicker { display: inline-flex; align-items: center; gap: 12px; font-size: 12.5px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; color: var(--blue-bright); margin-bottom: 10px; } .sec__kicker::before, .sec__kicker::after { content: ""; width: 34px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--blue-bright)); } .sec__kicker::after { background: linear-gradient(90deg, var(--blue-bright), transparent); } .sec__head h2 { font-size: clamp(27px, 3.2vw, 38px); font-weight: 800; color: var(--ink); margin: 0; letter-spacing: .2px; } .sec__head h2 small { display: block; margin-top: 10px; font-size: 15px; font-weight: 500; color: var(--grey); letter-spacing: .1px; } .sec__head p { color: var(--grey); font-size: 15.5px; margin: 12px auto 0; } /* views container blocks inside sections */ .sec .views-element-container { position: relative; z-index: 1; } /* ---------- cards (views rows) ---------- */ .views-row { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--card-shadow); display: flex; flex-direction: column; transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease; } .views-row:hover { transform: translateY(-6px); box-shadow: var(--card-shadow-hov); border-color: var(--blue-lt); } .views-field-field-image .field-content { display: block; overflow: hidden; position: relative; background: linear-gradient(135deg, #eef4fb, #dbe8f6); } .views-field-field-image img { width: 100%; height: 232px; object-fit: cover; display: block; transition: transform .55s ease, filter .55s ease; } .views-row:hover .views-field-field-image img { transform: scale(1.07); } .views-field-field-image .field-content:empty { height: 232px; display: flex; align-items: center; justify-content: center; } .views-field-field-image .field-content:empty::after { content: "Xihai"; font-size: 26px; font-weight: 800; letter-spacing: 2px; color: rgba(1, 71, 157, .35); text-transform: uppercase; } .views-field-title { padding: 20px 22px 6px; } .views-field-title .field-content { display: block; } .views-field-title a { font-size: 18px; font-weight: 700; color: var(--navy); line-height: 1.4; display: block; transition: color .18s ease; } .views-field-title a:hover { color: var(--blue-bright); } .views-field-field-summary, .views-field-body { padding: 4px 22px 16px; color: var(--grey); font-size: 14.5px; flex: 1; } .views-field-field-summary .field-content, .views-field-body .field-content { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .views-field-field-case-category, .views-field-field-case-location, .views-field-created { padding: 0 22px 18px; } .views-field-field-case-category .field-content, .views-field-field-case-location .field-content { display: inline-block; background: #eaf2fc; color: var(--navy); font-size: 12.5px; font-weight: 700; padding: 4px 12px; border-radius: 999px; margin: 4px 6px 4px 0; } .views-row > .views-field-field-image + .views-field-title { margin-top: 6px; } /* ---------- differentiated list layouts ---------- */ /* products & cases: compact grid cards */ .xh-grid-products, .xh-grid-cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 8px; } .xh-grid-products .views-row, .xh-grid-cases .views-row { margin-bottom: 0; } .xh-grid-products .views-field-field-image img, .xh-grid-cases .views-field-field-image img { height: 190px; } .xh-grid-products .views-field-title, .xh-grid-cases .views-field-title { padding: 16px 18px 4px; } .xh-grid-products .views-field-title a, .xh-grid-cases .views-field-title a { font-size: 16.5px; } .xh-grid-products .views-field-field-summary, .xh-grid-cases .views-field-body { padding: 4px 18px 16px; } .xh-grid-products .views-field-field-summary .field-content, .xh-grid-cases .views-field-body .field-content { -webkit-line-clamp: 2; } .xh-grid-products .views-field-field-case-location, .xh-grid-cases .views-field-field-case-location { padding: 0 18px 14px; } /* news: horizontal image-left list */ .xh-list-news { display: flex; flex-direction: column; gap: 20px; margin-top: 8px; } .xh-list-news .views-row { position: relative; display: grid; grid-template-columns: 320px 1fr; grid-template-rows: auto auto; align-items: stretch; align-content: center; border-radius: 14px; } .xh-list-news .views-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--grad-primary); opacity: .55; transition: opacity .2s ease; border-radius: 14px 0 0 14px; z-index: 2; } .xh-list-news .views-row:hover::before { opacity: 1; } .xh-list-news .views-field-field-image { grid-column: 1; grid-row: 1 / 3; min-width: 0; } .xh-list-news .views-field-field-image .field-content { height: 100%; } .xh-list-news .views-field-field-image img { width: 100%; height: auto; aspect-ratio: 8 / 5; min-height: 0; object-fit: cover; } .xh-list-news .views-field-field-image .field-content:empty { height: 200px; } .xh-list-news .views-field-title { grid-column: 2; grid-row: 1; padding: 24px 28px 6px; margin-top: 0; align-self: end; } .xh-list-news .views-field-title a { font-size: 20px; } .xh-list-news .views-field-title a::after { content: " \2192"; color: var(--blue-bright); opacity: 0; transform: translateX(-6px); display: inline-block; transition: opacity .2s ease, transform .2s ease; } .xh-list-news .views-row:hover .views-field-title a::after { opacity: 1; transform: translateX(0); } .xh-list-news .views-field-body { grid-column: 2; grid-row: 2; padding: 8px 28px 22px; align-self: start; } .xh-list-news .views-field-body .field-content { -webkit-line-clamp: 2; } .xh-list-news .views-row:hover { border-color: var(--blue-bright); } /* ---------- steps ---------- */ .xihai-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: xstep; } .xihai-step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px 24px; position: relative; box-shadow: var(--card-shadow); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; counter-increment: xstep; } .xihai-step:hover { transform: translateY(-5px); box-shadow: var(--card-shadow-hov); border-color: var(--blue-lt); } .xihai-step::before { content: counter(xstep, decimal-leading-zero); position: absolute; top: 16px; right: 20px; font-size: 34px; font-weight: 800; line-height: 1; background: linear-gradient(135deg, var(--blue-bright), var(--cyan)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--blue-bright); opacity: .9; } .xihai-step h3 { margin: 10px 0 8px; font-size: 16.5px; color: var(--ink); position: relative; z-index: 1; } .xihai-step p { margin: 0; color: var(--grey); font-size: 13.5px; } /* ---------- CTA band ---------- */ .cta-band { background: var(--grad-cta); color: #fff; padding: 84px 0; text-align: center; position: relative; overflow: hidden; } .cta-band::before { content: ""; position: absolute; left: -140px; top: -140px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 70%); } .cta-band::after { content: ""; position: absolute; right: -120px; bottom: -160px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(0, 179, 214, .28) 0%, rgba(0, 179, 214, 0) 70%); } .cta-band > div { position: relative; z-index: 1; } .cta-band h2 { color: #fff; font-size: clamp(25px, 3.2vw, 36px); margin: 0 0 12px; } .cta-band p { color: #d8e9fb; max-width: 680px; margin: 0 auto 28px; font-size: 15.5px; } .cta-band .btn { margin: 0 7px 10px; } /* ---------- breadcrumb ---------- The core breadcrumb markup carries no class of its own: the trail lives in #block-xihai-breadcrumb > nav > ol. It is printed inside the page hero now, on the centre axis and in the palette of the H1, so it reads as part of the colour block instead of floating above it as a grey pill. Pages that have no hero (login, system routes) fall back to .breadcrumb-row, a quiet line that keeps the light-background styling. 2026-11-13 */ .breadcrumb-row { padding-top: 18px; } .breadcrumb-row:has(#block-xihai-breadcrumb nav) { max-width: var(--maxw); margin: 0 auto; } .page-hero__bc { margin: 0 0 14px; } .page-hero--slim .page-hero__bc { margin-bottom: 10px; } .page-hero__bc #block-xihai-breadcrumb nav > ol, .breadcrumb-row #block-xihai-breadcrumb nav > ol { display: flex; flex-wrap: wrap; align-items: center; list-style: none; margin: 0; padding: 0; font-size: 12px; line-height: 1.5; } .page-hero__bc #block-xihai-breadcrumb nav > ol { justify-content: left; color: rgba(255, 255, 255, .52); } .breadcrumb-row #block-xihai-breadcrumb nav > ol { justify-content: flex-start; font-size: 13px; color: var(--grey); } .page-hero__bc #block-xihai-breadcrumb nav > ol > li, .breadcrumb-row #block-xihai-breadcrumb nav > ol > li { display: inline-flex; align-items: center; margin: 0; min-width: 0; max-width: 100%; } .page-hero__bc #block-xihai-breadcrumb nav > ol > li > a { color: rgba(255, 255, 255, .66); text-decoration: none; transition: color .15s ease; } .page-hero__bc #block-xihai-breadcrumb nav > ol > li > a:hover, .page-hero__bc #block-xihai-breadcrumb nav > ol > li > a:focus { color: #fff; text-decoration: none; } .page-hero__bc #block-xihai-breadcrumb nav > ol > li:last-child { color: rgba(255, 255, 255, .88); font-weight: 500; } .page-hero__bc #block-xihai-breadcrumb nav > ol > li:last-child > a { color: rgba(255, 255, 255, .88); font-weight: 500; } .breadcrumb-row #block-xihai-breadcrumb nav > ol > li > a { color: var(--grey); font-weight: 600; text-decoration: none; } .breadcrumb-row #block-xihai-breadcrumb nav > ol > li > a:hover { color: var(--navy); } .breadcrumb-row #block-xihai-breadcrumb nav > ol > li:last-child { color: var(--navy); font-weight: 700; } .breadcrumb-row #block-xihai-breadcrumb nav > ol > li:last-child > a { color: var(--navy); font-weight: 700; } /* chevron separator drawn with a rotated border so it needs no icon font */ .page-hero__bc #block-xihai-breadcrumb nav > ol > li + li::before, .breadcrumb-row #block-xihai-breadcrumb nav > ol > li + li::before { content: ""; flex: 0 0 auto; width: 5px; height: 5px; margin: 0 10px; border-top: 1.6px solid #b9c7da; border-right: 1.6px solid #b9c7da; transform: rotate(45deg); } /* on the dark hero the chevron is drawn in translucent white instead */ .page-hero__bc #block-xihai-breadcrumb nav > ol > li + li::before { border-top-color: rgba(255, 255, 255, .45); border-right-color: rgba(255, 255, 255, .45); } /* ---------- status messages ---------- Drupal 10.1+ renders messages as role="contentinfo"/"alert" inside [data-drupal-messages] and dropped the old .messages classes, so nothing styles them any more: the search page warning showed up as bare text. */ /* The wrapper is printed even when the region only holds core's hidden fallback div, which used to leave 12px of dead space under the header on every page. Space is reserved only for a real message. 2026-11-13 */ .messages-wrap { padding-top: 0; } .messages-wrap:has([data-drupal-messages] > div:not(.hidden)) { padding-top: 12px; } .messages-wrap:has([data-drupal-messages] > div) { max-width: var(--maxw); margin: 0 auto; } .messages-wrap [data-drupal-messages] > div { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 13px 18px; border: 1px solid #f0d9b5; border-left: 4px solid #e2a03c; border-radius: 10px; background: #fff8ef; color: #8a5a15; font-size: 14px; line-height: 1.65; } .messages-wrap [data-drupal-messages] > div::before { content: ""; flex: 0 0 auto; width: 17px; height: 17px; margin-top: 3px; background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e2a03c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 22 20.5H2z'/%3E%3Cpath d='M12 10v4.6'/%3E%3Cpath d='M12 17.6v.1'/%3E%3C/svg%3E") center / contain no-repeat; } .messages-wrap [data-drupal-messages] > div:has([role="alert"]) { background: #fdf1f0; border-color: #e8c3bf; border-left-color: #d9534a; color: #923022; } .messages-wrap [data-drupal-messages] > div:has([role="alert"])::before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d9534a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.6v5.4'/%3E%3Cpath d='M12 16.4v.1'/%3E%3C/svg%3E"); } /* ---------- search results page ---------- xihai.theme gives the search page form the class .xh-search-page-form; the page title, the "Search results" heading, the result list (a bare
    ) and the empty state are all siblings of that form, so everything is scoped from it and cannot leak into other content. */ .main__body:has(.xh-search-page-form) #block-xihai-page-title h1 { font-size: clamp(26px, 3vw, 38px); color: var(--navy); font-weight: 800; margin: 6px 0 18px; letter-spacing: .2px; } .xh-search-page-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; margin: 0; padding: 20px 22px; background: var(--sky); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--card-shadow); } .xh-search-page-form .container-inline { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: flex-end; gap: 14px; margin: 0; } .xh-search-page-form .form-item-keys, .xh-search-page-form .js-form-item-keys { flex: 1 1 320px; min-width: 0; margin: 0; } /* The visible "Enter your keywords" label is moved off-screen (it is kept as screen-reader-only text so the input stays labelled), and the "Search help" link plus any advanced-search disclosure are removed from the page. */ .xh-search-page-form label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .xh-search-page-form .search-help-link, .xh-search-page-form .search-advanced, .xh-search-page-form #edit-advanced, .xh-search-page-form details.search-advanced { display: none; } .xh-search-page-form input[type="search"] { width: 100%; height: 52px; padding: 0 20px 0 46px; box-sizing: border-box; font: inherit; font-size: 15px; color: var(--ink); background-color: #fff; border: 1.5px solid var(--line); border-radius: 999px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b80' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M20 20l-4.6-4.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 18px center; background-size: 18px 18px; -webkit-appearance: none; appearance: none; transition: border-color .16s ease, box-shadow .16s ease; } .xh-search-page-form input[type="search"]::placeholder { color: #9aa8b8; } .xh-search-page-form input[type="search"]:focus { border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(0, 179, 214, .16); outline: none; } .xh-search-page-form input[type="submit"] { flex: 0 0 auto; height: 52px; padding: 0 32px; border: 1px solid transparent; border-radius: 999px; background: var(--grad-primary); color: #fff; font: inherit; font-size: 15px; font-weight: 700; line-height: 1; cursor: pointer; box-shadow: 0 10px 26px rgba(1, 71, 157, .24); transition: transform .18s ease, box-shadow .18s ease; } .xh-search-page-form input[type="submit"]:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(1, 71, 157, .32); } /* "Search results" heading sits right below the form */ .xh-search-page-form + h2 { position: relative; margin: 34px 0 18px; padding-left: 16px; font-size: 20px; font-weight: 800; color: var(--navy); letter-spacing: .2px; } .xh-search-page-form + h2::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 4px; border-radius: 3px; background: var(--grad-primary); } /* One result per card */ .xh-search-page-form ~ ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; } .xh-search-page-form ~ ol > li { position: relative; list-style: none; margin: 0; padding: 22px 26px 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--card-shadow); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .xh-search-page-form ~ ol > li::before { content: ""; position: absolute; left: 0; top: 20px; bottom: 20px; width: 3px; border-radius: 0 3px 3px 0; background: var(--grad-primary); opacity: .35; transition: opacity .18s ease; } .xh-search-page-form ~ ol > li:hover { transform: translateY(-3px); border-color: var(--blue-lt); box-shadow: var(--card-shadow-hov); } .xh-search-page-form ~ ol > li:hover::before { opacity: 1; } .xh-search-page-form ~ ol h3 { margin: 0 0 8px; font-size: 17.5px; line-height: 1.45; } .xh-search-page-form ~ ol h3 a { color: var(--navy); font-weight: 800; } .xh-search-page-form ~ ol h3 a:hover { color: var(--blue-bright); } /* a small chevron trails each result title so the card reads as a link */ .xh-search-page-form ~ ol h3 a::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 9px; border-top: 2px solid var(--cyan); border-right: 2px solid var(--cyan); transform: rotate(45deg); vertical-align: 2px; opacity: .5; transition: transform .18s ease, opacity .18s ease; } .xh-search-page-form ~ ol > li:hover h3 a::after { transform: rotate(45deg) translate(3px, -3px); opacity: 1; } .xh-search-page-form ~ ol p { margin: 0; font-size: 14.5px; color: var(--grey); line-height: 1.75; } .xh-search-page-form ~ ol p + p { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 13px; color: #8b98a8; } .xh-search-page-form ~ ol p:empty { display: none; } .xh-search-page-form ~ ol strong { color: var(--navy); font-weight: 700; background: rgba(0, 179, 214, .14); border-radius: 4px; padding: 0 3px; } /* Empty state (no results) */ .xh-search-page-form ~ h3 { margin: 34px 0 0; padding: 44px 24px; text-align: center; background: var(--sky); border: 1px dashed var(--blue-lt); border-radius: var(--radius); font-size: 15.5px; font-weight: 600; color: var(--grey); } .xh-search-page-form ~ h3::before { content: ""; display: block; width: 46px; height: 46px; margin: 0 auto 14px; background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2301479d' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M20 20l-4.6-4.6'/%3E%3C/svg%3E") center / contain no-repeat; opacity: .45; } /* ---------- inner pages ---------- */ .main { max-width: var(--maxw); margin: 0 auto; padding: 34px 22px 96px; } /* Front page only: the node behind / has no body text, so
    printed nothing but its own padding - a 130px blank band (96px on mobile) between the CTA band and the footer. Collapse it while the region really is empty; the rule stops matching the moment real content (text, image, table, form, view or message) lands in it. 2026-11-13 */ .site > .hero ~ main.main:not(:has(p, img, table, ul, ol, h2, h3, figure, iframe, blockquote, .field, .view, form, .messages)) { padding-top: 0; padding-bottom: 0; } .main__body { max-width: var(--maxw); margin: 0 auto 0; } .page-title { font-size: clamp(28px, 3vw, 40px); color: var(--navy); font-weight: 800; margin: 8px 0 14px; letter-spacing: .2px; } .node-article, .node-page, .node-product, .node-project_case { background: #fff; } /* Node full-view images (article / product / project_case detail pages). Drupal 11 no longer prints the node/field CSS classes, so the historical ".node .field--name-field-image img" selector matched nothing at all; the rule is keyed on the real markup instead. max-width + height:auto keep the intrinsic ratio of the source file (the Image formatter prints it at its full size along with width/height attributes), so a 4096x3072 photo is scaled down proportionally instead of being stretched to the height attribute. Images narrower than the column keep their natural size and are centred in it. */ .main__body article img { display: block; width: auto; max-width: 100%; height: auto; margin: 4px auto 26px; border-radius: var(--radius); box-shadow: var(--card-shadow); } /* ---------- node neighbours (previous / next content) ---------- */ .xh-node-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 46px 0 10px; padding-top: 28px; border-top: 1px solid var(--line); } .xh-node-nav--two { grid-template-columns: 1fr 1fr; } .xh-node-nav__card { display: inline-flex; align-items: center; justify-content: flex-start; gap: 7px; min-width: 0; justify-self: start; padding: 11px 20px; border: 1px solid var(--line); border-radius: 999px; background: var(--sky); color: var(--navy); font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background .18s ease, color .18s ease, border-color .18s ease; } a.xh-node-nav__card:hover { background: var(--navy); border-color: var(--navy); } .xh-node-nav__card--next { justify-self: end; } /* A missing neighbour keeps its slot but paints nothing. The 1px border is kept (transparent, not removed) so this placeholder takes exactly the same flex base size as a real chip - with border:0 it was 2px narrower, which pushed the centred section link 1px off centre on phones. 2026-11-13 */ .xh-node-nav__card--empty { border-color: transparent; box-shadow: none; background: transparent; } .xh-node-nav__arrow { font-size: 15px; font-weight: 800; line-height: 1; color: var(--navy); flex: 0 0 auto; transition: color .18s ease; } .xh-node-nav__title { font-size: 14px; font-weight: 700; line-height: inherit; color: var(--navy); transition: color .18s ease; flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } a.xh-node-nav__card:hover .xh-node-nav__title, a.xh-node-nav__card:hover .xh-node-nav__arrow { color: #fff; } .xh-node-nav__back { display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; align-self: center; padding: 11px 20px; border: 1px solid var(--line); border-radius: 999px; background: var(--sky); color: var(--navy); font-size: 14px; font-weight: 700; text-decoration: none; transition: background .18s ease, color .18s ease, border-color .18s ease; } .xh-node-nav__back:hover { background: var(--navy); color: #fff; border-color: var(--navy); } .xh-node-nav__back span { font-size: 15px; line-height: 1; } @media (max-width: 767.98px) { /* One row on phones, always. The grid used to give the middle link an "auto" column, so a wide label plus two long titles squeezed the side chips and their heights drifted apart (cards measured 46px, the section link 44px), which read as a stagger. Flex + nowrap makes a second line impossible and lets the side chips shrink and ellipsize instead. All three chips share one height, one padding and one font size, so their top and bottom edges line up exactly. A missing neighbour keeps its slot as an invisible placeholder instead of collapsing, so the middle link stays put on every page. 2026-11-13 */ .xh-node-nav { display: flex; flex-wrap: nowrap; align-items: center; grid-template-columns: none; gap: 8px; } .xh-node-nav__card, .xh-node-nav__back { box-sizing: border-box; height: 42px; padding: 0 11px; gap: 4px; font-size: 12.5px; line-height: 1.2; } .xh-node-nav__card { flex: 1 1 0; width: auto; min-width: 0; } .xh-node-nav__card--prev { justify-content: flex-start; } .xh-node-nav__card--next { justify-content: flex-end; } .xh-node-nav__title { font-size: 12.5px; line-height: 1.2; max-width: 100%; } .xh-node-nav__arrow { font-size: 14px; } .xh-node-nav__back { flex: 0 1 auto; min-width: 0; max-width: 46%; margin: 0; overflow: hidden; } .xh-node-nav__card--empty { visibility: hidden; pointer-events: none; } } @media (max-width: 400px) { /* Small phones (360, 375, 320): the section link eats a fixed slice of the row, so tighten every chip a little instead of letting the side titles shrink to one character - at 320 the five-character label still keeps its own slot and the neighbours stay on the same line. 2026-11-13 */ .xh-node-nav { gap: 6px; } .xh-node-nav__card, .xh-node-nav__back { padding: 0 9px; gap: 3px; font-size: 12px; } .xh-node-nav__title { font-size: 12px; } .xh-node-nav__arrow { font-size: 13px; } } /* ---------- detail pages: field block + prose + tables ---------- The product (/product/*) and project-case (/cases/*) detail pages share one field layout. Drupal 11 prints no CSS class at all on the field, label or item wrappers (stable9's field.html.twig emits bare
    elements), so the classes .xh-d-field / .xh-d-field__label / .xh-d-field__item are added in xihai_preprocess_field(), and xihai_preprocess_node() regroups the children into media / meta / prose for node.html.twig to wrap. The historical ".node__content table" rules never matched anything on Drupal 11; the table rules below are keyed on the real markup instead and they apply to every content page (news included), so tables look identical everywhere. */ .xh-detail .xh-d-field--media { margin: 0 0 28px; } .xh-detail .xh-d-field--media img { display: block; width: auto; max-width: 100%; height: auto; margin: 0 auto; border-radius: var(--radius); box-shadow: var(--card-shadow); } .xh-detail__meta { margin: 0 0 28px; padding: 4px 24px; background: var(--sky); border: 1px solid var(--line); border-radius: var(--radius); } .xh-detail__meta > .xh-d-field { display: grid; grid-template-columns: minmax(118px, 158px) 1fr; gap: 0 18px; align-items: baseline; padding: 13px 0; border-bottom: 1px dashed var(--line); } .xh-detail__meta > .xh-d-field:last-child { border-bottom: 0; } .xh-detail__meta .xh-d-field__label { color: var(--grey); font-size: 13.5px; font-weight: 600; letter-spacing: .2px; } .xh-detail__meta .xh-d-field__item { color: var(--navy); font-size: 15.5px; font-weight: 700; } /* The body copy itself stays in a 760px reading column (about 45 Chinese characters per line at 16.5px); a data table is the one element allowed to use the wider block, see the table rules below. */ .xh-detail__prose { max-width: 760px; font-size: 16.5px; line-height: 1.78; color: var(--ink); } .xh-detail__prose > .xh-d-field { margin: 0 0 20px; } .xh-detail__prose > .xh-d-field:last-child { margin-bottom: 0; } .xh-detail__prose p { margin: 0 0 18px; } .xh-detail__prose p:last-child { margin-bottom: 0; } .xh-detail__prose h2 { margin: 34px 0 14px; font-size: 23px; color: var(--navy); } .xh-detail__prose h3 { margin: 28px 0 12px; font-size: 19px; color: var(--navy); } .xh-detail__prose ul, .xh-detail__prose ol { margin: 0 0 18px; padding-left: 22px; } .xh-detail__prose li { margin: 6px 0; } .xh-detail__prose a { color: var(--blue); text-decoration: underline; } .xh-detail__prose img { display: block; width: auto; max-width: 100%; height: auto; margin: 4px auto 24px; border-radius: var(--radius); box-shadow: var(--card-shadow); } /* Tables in a content body (product spec tables, case / news articles). */ .main__body article table, .xh-detail__prose table { width: 100%; margin: 4px 0 26px; font-size: 15px; line-height: 1.62; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--card-shadow); background: #fff; } .main__body article th, .main__body article td, .xh-detail__prose th, .xh-detail__prose td { padding: 13px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); } .main__body article th, .xh-detail__prose th { background: #eef4fb; color: var(--navy); font-size: 14.5px; font-weight: 700; } .main__body article tr:last-child td, .xh-detail__prose tr:last-child td { border-bottom: 0; } .main__body article th + th, .main__body article td + td, .xh-detail__prose th + th, .xh-detail__prose td + td { border-left: 1px solid var(--line); } /* Tables are written without : the header row is the first of the implicit , so tr:nth-child(odd) is the 2nd and the 4th data row - the row directly under the header stays white. */ .main__body article tbody tr:nth-child(odd) td, .xh-detail__prose tbody tr:nth-child(odd) td { background: #fafcfe; } .main__body article tbody tr:hover td, .xh-detail__prose tbody tr:hover td { background: #f2f7fd; } .main__body article td p:last-child, .xh-detail__prose td p:last-child { margin-bottom: 0; } @media (max-width: 767.98px) { .xh-detail .xh-d-field--media { margin-bottom: 22px; } .xh-detail__meta { padding: 2px 16px; margin-bottom: 24px; } .xh-detail__meta > .xh-d-field { grid-template-columns: minmax(92px, 118px) 1fr; gap: 0 12px; padding: 11px 0; } .xh-detail__meta .xh-d-field__label { font-size: 12.5px; } .xh-detail__meta .xh-d-field__item { font-size: 15px; } .xh-detail__prose { font-size: 16px; } .main__body article table, .xh-detail__prose table { font-size: 13.8px; } .main__body article th, .main__body article td, .xh-detail__prose th, .xh-detail__prose td { padding: 10px 12px; } .main__body article th, .xh-detail__prose th { font-size: 13.5px; } } /* ---------- detail pages: block width, product split, CTA, related ---------- 2026-11-12. The case and news pages are not split, so their whole detail block is narrowed to 940px and centred: the head image, the meta card and the tables keep one rhythm while the body copy inside it stays in the 760px reading column. The product page keeps the full 1220px block because its main image and parameter strip sit side by side. */ .xh-detail:not(.xh-detail--split) { max-width: 940px; margin-left: auto; margin-right: auto; } /* The product detail block is stacked now (its parameter strip moved into the hero meta row), so the 800x800 product photo would dominate the 940px block. Keep the framed picture at a comfortable reading width and centred. */ .xh-detail--product .xh-d-field--media { max-width: 640px; margin-left: auto; margin-right: auto; } /* A spec table may use the full block width instead of the reading column. Only above 1180px: below that the table would run past the page gutter. */ @media (min-width: 1180px) { .xh-detail .xh-detail__prose table { width: 940px; } } /* Product: main image on the left, parameter strip on the right. The image column is capped so the picture is not stretched by the grid, and the panel gives the small product photos a frame of their own. */ .xh-detail--split .xh-detail__top { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 34px; align-items: start; margin: 0 0 32px; } .xh-detail--split .xh-detail__media { min-width: 0; } .xh-detail--split .xh-detail__top .xh-d-field--media { margin: 0; padding: 26px; background: var(--sky); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--card-shadow); } .xh-detail--split .xh-detail__top .xh-d-field--media img { margin: 0 auto; border-radius: var(--radius-sm); box-shadow: none; } .xh-detail--split .xh-detail__side { min-width: 0; } /* The field rows become three side-by-side cells: one parameter strip. */ .xh-detail--split .xh-detail__meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0; margin: 0; background: transparent; border: 0; } .xh-detail--split .xh-detail__meta > .xh-d-field { display: block; margin: 0; padding: 14px 16px; background: var(--sky); border: 1px solid var(--line); border-radius: var(--radius-sm); } .xh-detail--split .xh-detail__meta .xh-d-field__label { display: block; margin: 0 0 4px; font-size: 12.5px; } .xh-detail--split .xh-detail__meta .xh-d-field__item { display: block; font-size: 15px; line-height: 1.45; } /* Closing call to action of a detail page. */ .xh-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 30px; align-items: center; margin: 36px 0 0; padding: 30px 34px; background: var(--grad-cta); border-radius: var(--radius); box-shadow: var(--card-shadow); } .xh-cta__title { margin: 0 0 6px; color: #fff; font-size: 20px; font-weight: 800; line-height: 1.35; } .xh-cta__note { margin: 0; color: rgba(255, 255, 255, .86); font-size: 14px; } .xh-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; } .xh-cta__btn { display: inline-flex; align-items: center; justify-content: center; padding: 13px 24px; border-radius: 999px; font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: all .18s ease; } .xh-cta__btn--primary { background: #fff; color: var(--navy); box-shadow: 0 8px 20px rgba(1, 27, 60, .18); } .xh-cta__btn--primary:hover { background: var(--sky); transform: translateY(-2px); } .xh-cta__btn--ghost { border: 1px solid rgba(255, 255, 255, .55); color: #fff; } .xh-cta__btn--ghost:hover { background: rgba(255, 255, 255, .16); border-color: #fff; } /* Related content: three cards using the same card vocabulary as the lists. */ .xh-related { margin: 40px 0 0; } .xh-related__title { margin: 0 0 18px; font-size: 22px; color: var(--navy); } .xh-related__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .xh-related__card { display: flex; flex-direction: column; overflow: hidden; text-decoration: none; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--card-shadow); transition: transform .18s ease, box-shadow .18s ease; } .xh-related__card:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hov); } .xh-related__thumb { display: block; aspect-ratio: 16 / 10; background: var(--sky); overflow: hidden; } .xh-related__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .xh-related__body { display: block; padding: 16px 18px 18px; } .xh-related__meta { display: block; margin: 0 0 6px; color: var(--blue); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .xh-related__name { display: block; color: var(--ink); font-size: 15.5px; font-weight: 700; line-height: 1.5; } @media (max-width: 991.98px) { .xh-detail--split .xh-detail__top { grid-template-columns: minmax(0, 1fr); gap: 24px; } .xh-detail--split .xh-detail__top .xh-d-field--media { padding: 20px; } .xh-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767.98px) { .xh-detail--split .xh-detail__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .xh-detail--split .xh-detail__meta > .xh-d-field { padding: 12px 14px; } .xh-cta { grid-template-columns: minmax(0, 1fr); padding: 24px 22px; margin-top: 30px; } .xh-cta__title { font-size: 18px; } .xh-cta__btn { flex: 1 1 auto; padding: 13px 18px; } .xh-related { margin-top: 32px; } .xh-related__title { font-size: 19px; margin-bottom: 14px; } .xh-related__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; } } .submitted { color: var(--grey); font-size: 14px; } /* ---------- pager ---------- List views use the mini pager: the markup is