/* SEBLIP theme layer. Additions on top of the reference design system in site.css: the bolder navigation, the header search, the floating contact rail, and the templates the reference build did not have (product detail, category, article, search). */ /* ------------------------------------------------------------------ basics */ .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; overflow: hidden; position: absolute !important; white-space: nowrap; word-wrap: normal; } .skip-link { position: absolute; top: -100px; left: 16px; z-index: 200; background: var(--signal); color: var(--ink); padding: 12px 20px; font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; transition: top .18s var(--ease-out); } .skip-link:focus { top: 12px; } :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; } body.nav-open { overflow: hidden; } /* Side-entering content can briefly extend a few pixels beyond its container while transparent. `clip` prevents a transient horizontal scrollbar without creating a scroll container or interfering with the FAQ's sticky column. */ #main-content { overflow-x: clip; } /* WordPress injects a 32px desktop / 46px mobile toolbar for logged-in users. The site header is fixed to the viewport, so it must opt into that offset — the margin WordPress puts on only moves normal-flow content. */ body.admin-bar .site-header { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar .site-header { top: 46px; } } /* Core changes the toolbar to absolute below 600px. Keep it fixed here so the fixed site header can remain directly beneath it instead of leaving a 46px gap after the toolbar scrolls away. */ @media screen and (max-width: 600px) { body.admin-bar #wpadminbar { position: fixed; } } /* Templates carry width/height attributes to reserve layout space, so images need height:auto to keep their aspect ratio when CSS constrains the width. site.css only sets max-width. */ img { height: auto; } /* Several site.css rules set `display`, which outranks the UA's `[hidden] { display: none }`. Templates toggle the hidden attribute for the mobile drawer, hero slides, the back-to-top button and form messages, so hidden has to win. */ [hidden] { display: none !important; } /* ------------------------------------------------- navigation (user: bolder) */ .header-inner { grid-template-columns: 268px minmax(0, 1fr) auto; gap: 20px; } .desktop-nav a { font-size: 14.5px; font-weight: 700; letter-spacing: .06em; padding: 15px 0; } .desktop-nav a.active { color: var(--signal); } .site-header--scrolled .desktop-nav a.active { color: var(--ink); } .desktop-nav a:after { height: 2.5px; } /* The larger type needs the gap to give ground first, so the six items keep fitting on one line before the media queries below step the size down. */ .desktop-nav { gap: clamp(14px, 1.7vw, 32px); } .mobile-nav a { font-weight: 700; letter-spacing: .02em; } /* Phone number in the header — matched up with the nav. */ .header-contact { font-size: 14px; gap: 9px; } /* ------------------------------------------------------------ header search */ .header-tools { display: flex; align-items: center; justify-content: flex-end; gap: 16px; } .header-search { display: flex; align-items: center; gap: 4px; border: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 34%, transparent); background: color-mix(in srgb, currentColor 7%, transparent); height: 38px; padding: 0 4px 0 12px; transition: border-color .18s var(--ease-out), background .18s var(--ease-out); } .header-search:focus-within { border-color: var(--signal); } .header-search__input { background: none; border: 0; color: inherit; width: 150px; font-size: 12.5px; font-weight: 500; outline: none; } .header-search__input::placeholder { color: inherit; opacity: .6; } /* Safari draws its own clear/search decorations that break the flat look. */ .header-search__input::-webkit-search-decoration, .header-search__input::-webkit-search-cancel-button { -webkit-appearance: none; } .header-search__submit { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: none; color: inherit; transition: color .18s var(--ease-out); } .header-search__submit:hover { color: var(--signal); } .mobile-search { display: flex; align-items: center; gap: 6px; border: 1px solid #ffffff3d; margin-bottom: 6px; padding: 0 6px 0 12px; height: 44px; } .mobile-search input { flex: 1; min-width: 0; background: none; border: 0; color: #fff; font-size: 14px; outline: none; } .mobile-search input::placeholder { color: #ffffff8c; } .mobile-search button { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: none; color: var(--signal); } /* site.css sets `.mobile-nav { display: flex }` inside the mobile media query, which outranks the `hidden` attribute's UA style. Restore it. */ .mobile-nav[hidden] { display: none !important; } .menu-button__close { display: none; } .menu-button[aria-expanded='true'] .menu-button__open { display: none; } .menu-button[aria-expanded='true'] .menu-button__close { display: block; } @media (max-width: 1180px) { .header-search__input { width: 108px; } .header-tools { gap: 12px; } /* site.css drops these to 10px at 1100px; keep them legible instead. */ .desktop-nav a { font-size: 13px; } .header-contact { font-size: 12.5px; } } @media (max-width: 1000px) { .header-inner { grid-template-columns: 210px minmax(0, 1fr) auto; } .header-search { display: none; } } @media (max-width: 820px) { .header-inner { grid-template-columns: 1fr auto; } .header-tools { display: none; } .mobile-nav a { font-size: 16px; } /* site.css pins this one with !important, so match it. */ .mobile-contact { font-size: 14px !important; } } /* --------------------------------------------------- floating contact rail */ .floating-contact { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: flex; flex-direction: column; gap: 8px; } .floating-contact__button { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: var(--ink); color: #fff; border: 1px solid #ffffff26; box-shadow: 0 10px 24px #0814222e; transition: background .18s var(--ease-out), color .18s var(--ease-out), transform .18s var(--ease-out); } .floating-contact__button:hover { background: var(--signal); color: var(--ink); transform: translateY(-2px); } .floating-contact__button--whatsapp { background: #1faa54; border-color: #ffffff33; } .floating-contact__button--whatsapp:hover { background: #25c463; color: #fff; } /* Label flies out on hover/focus so the icons stay unambiguous. */ .floating-contact__button:after { content: attr(data-label); position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%) translateX(6px); background: var(--ink); color: #fff; padding: 6px 10px; font-family: 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .18s var(--ease-out), transform .18s var(--ease-out); } .floating-contact__button:hover:after, .floating-contact__button:focus-visible:after { opacity: 1; transform: translateY(-50%) translateX(0); } @media (max-width: 820px) { .floating-contact { right: 12px; bottom: 12px; gap: 6px; } .floating-contact__button { width: 44px; height: 44px; } .floating-contact__button:after { display: none; } } /* ------------------------------------------------------- light-hero header */ /* Over the light news hero the default white header is unreadable. Switch it to the ink treatment before any scrolling happens. */ body.has-light-hero .site-header { color: var(--ink); } body.has-light-hero .brand-logo { filter: none; } body.has-light-hero .desktop-nav a.active { color: var(--ink); } body.has-light-hero .desktop-nav a.active:after { background: var(--signal); } body.has-light-hero .seblip-breadcrumbs { color: var(--muted); } body.has-light-hero .seblip-breadcrumbs [aria-current='page'], body.has-light-hero .seblip-breadcrumbs .breadcrumb_last { color: var(--ink); } /* ------------------------------------------------------------ breadcrumbs */ .seblip-breadcrumbs { margin-top: 26px; font-family: 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #b6c5cc; } .seblip-breadcrumbs a { color: inherit; transition: color .18s var(--ease-out); } .seblip-breadcrumbs a:hover { color: var(--signal); } .seblip-breadcrumbs i { font-style: normal; opacity: .45; margin: 0 6px; } .seblip-breadcrumbs [aria-current='page'] { color: #fff; } .seblip-breadcrumbs .breadcrumb_last { color: #fff; } /* ------------------------------------------------------------ nav dropdown */ /* The parent stays an ordinary link so Products is still reachable in one click; the chevron next to it is a separate button that owns the submenu, so keyboard and touch users can open the list without navigating away. Hover opens it for pointers, :focus-within for keyboards, and .is-open for the button — all three drive the same visual state. */ .nav-has-children { position: relative; display: flex; align-items: center; gap: 4px; } .nav-toggle { display: flex; align-items: center; justify-content: center; padding: 4px 2px; color: inherit; background: none; border: 0; cursor: pointer; line-height: 0; } .nav-toggle svg { transition: transform .2s var(--ease-out); } .nav-has-children:hover .nav-toggle svg, .nav-has-children:focus-within .nav-toggle svg, .nav-toggle[aria-expanded="true"] svg { transform: rotate(180deg); } .nav-submenu { position: absolute; top: calc(100% + 10px); left: -18px; z-index: 60; display: flex; flex-direction: column; min-width: 244px; padding: 10px 0; background: var(--ink); box-shadow: 0 18px 38px #0814224d; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s var(--ease-out), transform .18s var(--ease-out), visibility .18s; } /* A transparent bridge over the gap above, so moving the pointer from the parent down into the panel does not cross a dead zone and close it. */ .nav-submenu::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 10px; } .nav-has-children:hover .nav-submenu, .nav-has-children:focus-within .nav-submenu, .nav-submenu.is-open { opacity: 1; visibility: visible; transform: none; } /* No font-size or letter-spacing here on purpose: these links sit inside .desktop-nav, so `.desktop-nav a` above already gives them the nav's 14.5px / 700 / .06em, and they follow its step down to 13px at 1180px for free. Restating the size here is what made the submenu smaller than its own parent item — one source of truth keeps the two from drifting apart again. */ .nav-submenu a { padding: 11px 24px; color: #fff; white-space: nowrap; transition: background .16s var(--ease-out), color .16s var(--ease-out); } .nav-submenu a:after { display: none; } .nav-submenu a:hover, .nav-submenu a:focus-visible, .nav-submenu a.active { background: #ffffff14; color: var(--signal); } /* ------------------------------------------------------- nav dropdown, mobile */ @media (max-width: 1000px) { .mobile-nav-row { display: flex; align-items: center; border-bottom: 1px solid #ffffff24; } .mobile-nav-row a { flex: 1; border-bottom: 0; } .mobile-nav-toggle { display: flex; align-items: center; justify-content: center; width: 44px; align-self: stretch; padding: 0; color: #fff; background: none; border: 0; cursor: pointer; line-height: 0; } .mobile-nav-toggle svg { transition: transform .2s var(--ease-out); } .mobile-nav-toggle[aria-expanded="true"] svg { transform: rotate(180deg); } .mobile-submenu { display: flex; flex-direction: column; background: #ffffff0a; } .mobile-submenu a { padding: 13px 4px 13px 30px; font-size: 14px; font-weight: 600; color: #ffffffd6; border-bottom: 1px solid #ffffff14; } .mobile-submenu a:last-child { border-bottom: 0; } .mobile-submenu a.active { color: var(--signal); } } /* ---------------------------------------------------------- reveal on scroll */ .will-reveal { opacity: 0; transform: translate3d(0, 30px, 0); transition: opacity .72s cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms), transform .72s cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms); will-change: opacity, transform; } .will-reveal[data-reveal-from='left'] { transform: translate3d(-42px, 0, 0); } .will-reveal[data-reveal-from='right'] { transform: translate3d(42px, 0, 0); } .will-reveal.is-revealed { opacity: 1; transform: none; will-change: auto; } /* First-view content uses a separate hook so opening an inner page is animated even when its hero fills the viewport before IntersectionObserver runs. */ .page-enter { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .8s cubic-bezier(.16, 1, .3, 1) var(--page-enter-delay, 0ms), transform .8s cubic-bezier(.16, 1, .3, 1) var(--page-enter-delay, 0ms); will-change: opacity, transform; } .page-hero-grid > .page-enter:first-child { transform: translate3d(-36px, 0, 0); } .page-hero-grid > .page-enter:last-child:not(:first-child) { transform: translate3d(36px, 0, 0); } .page-enter.is-entered { opacity: 1; transform: none; will-change: auto; } /* ------------------------------------------------------------------ motion */ /* Counting numbers. The digits are reserved at their final width in JS, and tabular figures stop the glyphs from shifting as the value climbs — without both, the whole stat row jitters for the length of the animation. */ [data-count-up] { position: relative; display: inline-block; font-variant-numeric: tabular-nums; will-change: transform; } [data-count-up]::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px; background: var(--signal); transition: width .55s var(--ease-out); } [data-count-up].is-counting { filter: drop-shadow(0 0 10px rgb(0 158 224 / .3)); } [data-count-up].is-counting::after, [data-count-up].is-complete::after { width: 32px; } [data-count-up].is-complete { animation: seblip-count-settle .5s cubic-bezier(.2, .8, .2, 1); } @keyframes seblip-count-settle { 0% { transform: translateY(2px) scale(.985); } 55% { transform: translateY(-2px) scale(1.04); } 100% { transform: none; } } /* A light sweep across a card on hover. The pseudo-element is inert and the card already clips, so this costs nothing but a transform. */ .catalog-card, .category-card, .news-card { position: relative; overflow: hidden; } .catalog-card::after, .category-card::after, .news-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, transparent 26%, rgb(255 255 255 / .38) 47%, transparent 68%); transform: translateX(-120%); transition: transform .75s var(--ease-out); } .catalog-card:hover::after, .category-card:hover::after, .news-card:hover::after { transform: translateX(120%); } .category-card:hover { transform: translateY(-3px); } .news-card { transition: transform .25s var(--ease-out); } .news-card:hover { transform: translateY(-3px); } .button { transition: background .2s var(--ease-out), color .2s var(--ease-out), transform .2s var(--ease-out); } .button:hover { transform: translateY(-2px); } /* One switch for everything above. The JS paths check the same media query, so with reduced motion the counters land on their final value without counting and the reveals never get their starting offset. */ @media (prefers-reduced-motion: reduce) { .will-reveal, .will-reveal.is-revealed { opacity: 1; transform: none; transition: none; } .page-enter, .page-enter.is-entered { opacity: 1; transform: none; transition: none; } [data-count-up], [data-count-up].is-complete { animation: none; filter: none; } [data-count-up]::after { transition: none; } .catalog-card::after, .category-card::after, .news-card::after { display: none; } .catalog-card:hover, .category-card:hover, .news-card:hover, .button:hover { transform: none; } .nav-submenu { transition: none; } .nav-toggle svg, .mobile-nav-toggle svg { transition: none; } } /* --------------------------------------------------------------- page hero */ .page-hero-icon { display: flex; align-items: center; justify-content: center; color: var(--signal); opacity: .55; } /* The FAQ artwork is intentionally lighter than the site's near-black navy: the client wanted this banner to read as blue at first glance while the darker edge keeps the white copy comfortably legible. */ .page-hero--faq { background: linear-gradient(135deg, #0868a8 0%, #0a4a7d 100%); } /* The new About overview is a detailed square poster, not a compact number mark. Give it a full column and let the heading/copy share the second one so the small factory details remain readable without sacrificing the text. */ .about-intro--visual { grid-template-columns: minmax(320px, .8fr) minmax(0, 1.2fr); column-gap: clamp(48px, 6vw, 90px); row-gap: 28px; } .about-intro-visual { grid-row: 1 / span 2; overflow: hidden; } .about-intro-visual img, .elementor .about-intro-visual img { display: block; width: 100%; height: auto; } .about-intro--visual > p { align-self: start; } @media (max-width: 820px) { .about-intro--visual { grid-template-columns: 1fr; gap: 27px; } .about-intro-visual { grid-row: auto; max-width: 560px; } } /* Only the first slide gets the

(one H1 per page), so slides 2+ carry the same headline as

. That

is also matched by site.css's `.hero-copy>p:not(.eyebrow)` body-text rule, and :not() counts toward specificity — (0,2,1) there beats a plain `.hero-copy .hero-headline` (0,2,0), which silently rendered those headlines at body size. Naming the element here ties the specificity at (0,2,1); theme.css is enqueued after site.css, so the tie resolves this way. The three font-size steps mirror `.hero-copy h1` at the same breakpoints — keep them in sync. */ .hero-copy > p.hero-headline { letter-spacing: -.07em; max-width: 760px; margin-top: 0; font-family: 'Space Grotesk', sans-serif; font-size: clamp(45px, 5.5vw, 78px); font-weight: 600; line-height: .99; color: #fff; } @media (max-width: 820px) { .hero-copy > p.hero-headline { font-size: clamp(40px, 9vw, 60px); } } @media (max-width: 520px) { .hero-copy > p.hero-headline { font-size: 40px; } } .hero-visual { opacity: 0; transform: scale(1.055); transition: opacity 1s cubic-bezier(.16, 1, .3, 1), transform 1.4s cubic-bezier(.16, 1, .3, 1); } .hero-visual.is-active { opacity: 1; transform: scale(1.01); } /* Keep the white hero copy readable while letting more of the new product photography show through. This intentionally softens both the left copy shade and the lower fade from site.css. The dark mass is collapsed to the very left edge (the interior stop sits at 1%, not a third of the way across) so the banner reads as the photograph rather than as a dark panel — a client decision, 2026-08-25. The vertical fade is left alone: it is what keeps the slide counter and the prev/next buttons legible over the bottom of the artwork. */ .hero-shade { background: linear-gradient(90deg, #040e18d9, #040e18b8 1%, #040e1800 83%), linear-gradient(#0000 65%, #040e18a8); } /* Same treatment for the product-section banner (/products/ and every product category page), which site.css shades from the left in the same way. */ .page-hero-product-shade { background: linear-gradient(90deg, #040e18f5, #040e18c7 1%, #040e180d 80%); } /* Same reason as the .hero-shade breakpoint below: a left-hand shade only works while there is a left-hand clear area in the crop. Below 820px the cover image fills the width and the copy runs straight over the light concrete of the product photography — white on white, 1.4:1 — so narrow viewports keep a vertical shade under the copy band. */ @media (max-width: 820px) { .page-hero-product-shade { background: linear-gradient(180deg, #040e1866, #040e1866 16%, #040e18bd 46%, #040e18d9), linear-gradient(90deg, #040e1899, #040e1842 1%, #040e181a); } } /* site.css shades the banner from the left, which is where the copy sits and where the artwork is deliberately kept clear. Once the 16:9 background is cropped to a tall viewport there is no clear left any more — the product fills the whole width and the copy runs straight over it. Narrow viewports therefore get a vertical shade as well, so the band the copy occupies stays dark whatever the crop leaves behind it. */ @media (max-width: 820px) { .hero-shade { background: linear-gradient(180deg, #040e1847, #040e1847 20%, #040e18ad 44%, #040e18d1), linear-gradient(90deg, #040e1880, #040e1842 1%, #040e181a); } } /* --------------------------------------------------------- category cards */ /* Separators are drawn per card rather than by painting the container behind a 1px gap — that trick leaves a grey block in any partly-filled final row. */ .category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-bottom: 54px; } .category-card { display: flex; flex-direction: column; gap: 10px; background: #fff; box-shadow: 0 0 0 1px var(--line); padding: 28px 24px 24px; transition: background .2s var(--ease-out), transform .2s var(--ease-out); } .category-card:hover { background: var(--paper-warm); } .category-card h3 { font-family: 'Space Grotesk', sans-serif; font-size: 19px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; } .category-card p { color: var(--muted); font-size: 13.5px; line-height: 1.65; flex: 1; } .category-card__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-family: 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .category-card:hover .category-card__link { color: var(--signal); } @media (max-width: 1100px) { .category-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .category-grid { grid-template-columns: 1fr; } } /* The card body is always dark navy, so its text cannot inherit the section colour — on the light search and related-product sections it went invisible. */ .product-card-copy h3, .product-card-copy h3 a { color: #fff; } .catalog-card h3 a { color: inherit; } .catalog-card h3 a:hover { color: var(--signal); } .catalog-image { display: block; } .catalog-empty { padding: 40px 0 10px; color: var(--muted); font-size: 15px; line-height: 1.8; } .catalog-empty a { color: var(--ink); border-bottom: 1px solid var(--signal); } /* ---------------------------------------------------------- product detail */ .product-hero-image { background: #fff; padding: 26px; align-self: start; } .product-hero-image img { width: 100%; height: auto; object-fit: contain; } /* Extra angles from the 附加产品图 field share the hero viewer: the featured image is the first frame, the thumbnails swap it. `.product-thumb img` is more specific than the rule above, so the thumbnails keep their own box. */ .product-hero-image--gallery { display: flex; flex-direction: column; gap: 16px; } .product-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; } .product-thumb { display: block; width: 68px; height: 68px; padding: 5px; background: #fff; box-shadow: 0 0 0 1px var(--line); transition: box-shadow .2s var(--ease-out); } .product-thumb img { width: 100%; height: 100%; object-fit: contain; } .product-thumb:hover { box-shadow: 0 0 0 1px var(--ink); } .product-thumb.is-active { box-shadow: 0 0 0 2px var(--signal); } .product-thumb:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; } .product-detail { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 64px; padding: 88px 0; align-items: start; } .product-detail-main h2 { font-family: 'Space Grotesk', sans-serif; font-size: 26px; font-weight: 600; letter-spacing: -.03em; line-height: 1.25; margin: 46px 0 18px; } .product-detail-main > h2:first-child { margin-top: 0; } .product-body p, .product-detail-main > p { color: #47555d; font-size: 15.5px; line-height: 1.9; margin-bottom: 16px; } /* 产品详细介绍 is a normal WordPress editor, so anything 添加媒体 or the toolbar can produce — images, captions, alignment classes, lists, quotes, tables — has to be styled here or it lands on the page unstyled. */ .product-body > *:first-child { margin-top: 0; } .product-body img { display: block; max-width: 100%; height: auto; margin: 26px 0; } .product-body figure { margin: 26px 0; } .product-body figure img, .product-body .wp-caption img { margin: 0; } .product-body .wp-caption { max-width: 100%; } .product-body figcaption, .product-body .wp-caption-text { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; } .product-body .aligncenter { margin-left: auto; margin-right: auto; } .product-body .alignleft { float: left; max-width: 50%; margin: 6px 28px 20px 0; } .product-body .alignright { float: right; max-width: 50%; margin: 6px 0 20px 28px; } /* Floated images must not escape the column into the section below it. */ .product-body::after { content: ""; display: block; clear: both; } .product-body h3, .product-body h4 { font-family: 'Space Grotesk', sans-serif; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; margin: 34px 0 12px; } .product-body h3 { font-size: 20px; } .product-body h4 { font-size: 17px; } .product-body ul, .product-body ol { margin: 0 0 18px; padding-left: 20px; color: #47555d; font-size: 15.5px; line-height: 1.9; } .product-body li { margin-bottom: 6px; } .product-body a { color: var(--ink); border-bottom: 1px solid var(--signal); } .product-body blockquote { margin: 26px 0; padding-left: 22px; border-left: 2px solid var(--signal); } .product-body blockquote p { color: var(--ink); font-size: 16.5px; } .product-body table { width: 100%; margin: 26px 0; border-collapse: collapse; font-size: 14.5px; } .product-body th, .product-body td { padding: 10px 12px; border: 1px solid var(--line); text-align: left; } .product-body th { background: var(--paper-warm); font-weight: 600; } /* Technical specification tables are written into 产品详细介绍 as plain HTML, and a few of them are three-column comparisons. Wrapping each one in .table-scroll keeps a wide table scrolling inside its own column instead of pushing the whole page sideways. No min-width: a two-column table wraps perfectly well on a phone and should not gain a scrollbar it does not need — the container is a safety net for the wide ones. A box that scrolls has to be operable from the keyboard, so the importer gives it tabindex="0" and this shows where the focus went. */ .product-body .table-scroll { overflow-x: auto; margin: 26px 0; } .product-body .table-scroll table { margin: 0; } .product-body .table-scroll:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; } .spec-list { list-style: none; margin: 0 0 8px; padding: 0; } .spec-list li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.65; } .spec-list li svg { color: var(--signal); flex-shrink: 0; margin-top: 2px; } .product-detail-aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 104px; } .product-fact-card, .product-contact-card { background: #fff; border: 1px solid var(--line); padding: 26px 24px; } .product-fact-card dl { margin: 14px 0 0; } .product-fact-card dt { font-family: 'Space Grotesk', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 14px; } .product-fact-card dd { margin: 4px 0 0; font-size: 14.5px; line-height: 1.55; } .product-fact-card dd a { border-bottom: 1px solid var(--signal); } .product-contact-card { background: var(--ink); color: #fff; border-color: transparent; } .product-contact-card .eyebrow { color: var(--signal); } .product-contact-card p { color: #c3d2d7; font-size: 14.5px; line-height: 1.75; margin: 14px 0 18px; } .product-contact-card a:not(.button) { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid #ffffff1f; font-size: 14px; } .product-contact-card a:not(.button):hover { color: var(--signal); } .product-contact-card a:not(.button) svg { color: var(--signal); } @media (max-width: 1000px) { .product-detail { grid-template-columns: 1fr; gap: 44px; padding: 62px 0; } .product-detail-aside { position: static; } } @media (max-width: 640px) { .product-body .alignleft, .product-body .alignright { float: none; max-width: 100%; margin: 26px 0; } } @media (max-width: 560px) { .product-thumb { width: 58px; height: 58px; } } /* ---------------------------------------------------------- related links */ .related-band { padding: 0 0 84px; } .related-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } .related-links a { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: #fff; padding: 11px 16px; font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .03em; transition: border-color .18s var(--ease-out), color .18s var(--ease-out); } .related-links a:hover { border-color: var(--signal); color: var(--signal); } .product-fact-card .related-links { flex-direction: column; gap: 0; } .product-fact-card .related-links a { border: 0; border-bottom: 1px solid var(--line); padding: 11px 0; } /* ---------------------------------------------------------------- article */ .article-hero .article-meta { margin-top: 14px; font-family: 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: #b6c5cc; } .article-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; padding: 84px 0; align-items: start; } .article-content { max-width: 760px; } .article-content h2 { font-family: 'Space Grotesk', sans-serif; font-size: 27px; font-weight: 600; letter-spacing: -.03em; line-height: 1.25; margin: 44px 0 16px; } .article-content h3 { font-family: 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 600; margin: 32px 0 12px; } .article-content p { color: #47555d; font-size: 16px; line-height: 1.95; margin-bottom: 20px; } .article-content ul, .article-content ol { margin: 0 0 20px 20px; color: #47555d; font-size: 16px; line-height: 1.9; } .article-content li { margin-bottom: 8px; } .article-content a { color: var(--ink); border-bottom: 1px solid var(--signal); } .article-content a:hover { color: var(--signal); } .article-content img { margin: 24px 0; } .article-content blockquote { margin: 28px 0; padding: 4px 0 4px 24px; border-left: 2px solid var(--signal); font-size: 18px; line-height: 1.7; } .article-aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 104px; } @media (max-width: 1000px) { .article-body { grid-template-columns: 1fr; gap: 44px; padding: 58px 0; } .article-aside { position: static; } } /* ----------------------------------------------------------------- search */ .search-section { padding: 78px 0 96px; } .search-page-form { display: flex; gap: 10px; margin-bottom: 52px; flex-wrap: wrap; } .search-page-form input { flex: 1; min-width: 220px; height: 52px; padding: 0 16px; border: 1px solid var(--line); background: #fff; font-size: 15px; outline: none; } .search-page-form input:focus { border-color: var(--signal); } .search-group { margin-bottom: 54px; } .search-group > .eyebrow { margin-bottom: 22px; } .search-group .product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; } .search-list { border-top: 1px solid var(--line); } .search-list article { padding: 22px 0; border-bottom: 1px solid var(--line); } .search-list h3 { font-family: 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 8px; } .search-list h3 a:hover { color: var(--signal); } .search-list p { color: var(--muted); font-size: 14.5px; line-height: 1.75; } .search-empty { padding: 20px 0 40px; } .search-empty h2 { font-family: 'Space Grotesk', sans-serif; font-size: 28px; font-weight: 600; letter-spacing: -.03em; margin-bottom: 12px; } .search-empty p { color: var(--muted); font-size: 15.5px; line-height: 1.85; margin-bottom: 24px; max-width: 560px; } .search-empty a:not(.button) { color: var(--ink); border-bottom: 1px solid var(--signal); } @media (max-width: 1100px) { .search-group .product-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .search-group .product-grid { grid-template-columns: 1fr; } } /* The /products filter bar turns into category links once the catalog spans more than one page, so anchors there need the button treatment. */ .filter-bar a { color: #657179; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; padding: 9px 13px; font-family: 'Space Grotesk', sans-serif; font-size: 10px; font-weight: 700; transition: background .15s var(--ease-out), color .15s var(--ease-out); } .filter-bar a:hover { background: var(--ink); color: #fff; } /* ------------------------------------------------------------- pagination */ .seblip-pagination { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 48px; } .seblip-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; border: 1px solid var(--line); background: #fff; font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 600; transition: border-color .18s var(--ease-out), background .18s var(--ease-out), color .18s var(--ease-out); } .seblip-pagination .page-numbers:hover { border-color: var(--signal); color: var(--signal); } .seblip-pagination .page-numbers.current { background: var(--ink); border-color: var(--ink); color: #fff; } /* ---------------------------------------------------------- 404 and forms */ .not-found .search-page-form { max-width: 560px; margin: 34px 0 30px; } .not-found .search-page-form input { background: #ffffff14; border-color: #ffffff33; color: #fff; } .not-found .search-page-form input::placeholder { color: #ffffff85; } .not-found .search-page-form .button--dark { background: #fff; color: var(--ink); } .form-honeypot { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-success--error { color: #b3261e; } /* ---------------------------------------------- FAQ accordion (native impl) */ .faq-item { border-bottom: 1px solid var(--line); } .faq-item:last-child { border-bottom: 0; } .faq-trigger { display: flex; align-items: flex-start; justify-content: flex-start; gap: 14px; width: 100%; padding: 22px 0; background: none; text-align: left; font-family: 'Space Grotesk', sans-serif; font-size: 17px; font-weight: 600; letter-spacing: -.01em; line-height: 1.4; transition: color .18s var(--ease-out); } .faq-trigger:hover { color: var(--signal); } .faq-trigger > span { color: var(--signal); font-size: 11px; font-weight: 700; letter-spacing: .1em; padding-top: 4px; flex-shrink: 0; } .faq-chevron { margin-left: auto; flex-shrink: 0; color: var(--muted); transition: transform .2s var(--ease-out); } .faq-trigger[aria-expanded='true'] .faq-chevron { transform: rotate(180deg); } .faq-panel { padding: 0 0 24px 42px; } .faq-panel p { color: #47555d; font-size: 15px; line-height: 1.9; } @media (max-width: 820px) { .faq-trigger { font-size: 15.5px; } .faq-panel { padding-left: 0; } } /* ------------------------------------------------------- misc adjustments */ /* site.css styles `.news-card a` as the square arrow button — the reference markup had no other link in the card. Headings are links here, so reset them. */ .news-card h3 a { display: inline; height: auto; width: auto; background: none; color: inherit; transform: none; } .news-card h3 a:hover { background: none; transform: none; } .news-card h3 a, .insight-list h3 a, .insight-feature-copy h2 a { color: inherit; } .news-card h3 a:hover, .insight-list h3 a:hover, .insight-feature-copy h2 a:hover { color: var(--signal); } .contact-links { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 28px; } .contact-links a { display: inline-flex; align-items: center; gap: 7px; font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border-bottom: 1px solid var(--signal); padding-bottom: 3px; } .contact-links a:hover { color: var(--signal); } .contact-band-actions a:not(.button) { border-bottom: 1px solid currentColor; } /* The rotated decorative square sits at right:6%, which pushes the document past the viewport on narrow screens. Clip it to its own section instead of relying on body { overflow-x: hidden } to hide the consequence. */ .contact-band, .custom-product-band, .news-cta, .faq-contact-strip, .about-capabilities, .strength-section { overflow: hidden; } /* Elementor's frontend.css ships `.elementor img { height: auto }`, which is (0,1,1) — exactly the same specificity as site.css's `.strength-visual img`, `.page-hero-image img` and the six other cover-image rules. Elementor's stylesheet is enqueued after the theme's, so the tie resolved its way and every one of those images collapsed to its intrinsic aspect ratio instead of filling its box: the home advantage visual left 341px of empty section background, the About hero 86px, the About detail 140px, the News feature 25px and the Contact brand mark 78px, while the products hero and catalog cards overflowed and cropped from the top instead of centre-cropping. Only Elementor-rendered pages were affected — the same components on /power-cord/ and the product and article templates measured correct, which is what made this easy to miss. Re-stating height here under a `.elementor` ancestor lifts these to (0,2,1) so the authored design wins back, and scoping to `.elementor` keeps the non-Elementor pages on site.css untouched. If a new cover-image component is added to site.css with height:100%, add its selector here too. */ .elementor .strength-visual img, .elementor .product-card-image img, .elementor .page-hero-image img, .elementor .page-hero-product-image img, .elementor .about-detail-image img, .elementor .catalog-image img, .elementor .insight-feature-image img { height: 100%; } /* The About "how we work" slot can hold either a photograph, which fills the frame, or a poster whose whole surface is the content. The poster case drops the fixed frame height so nothing is cropped: the image keeps its own aspect ratio from the width/height attributes the renderer measures off the file. Both selectors are restated under `.elementor` for the same specificity reason as the block above — without that, the height:100% rule up there would crop the poster back on Elementor-composed pages. */ .about-detail-image--contain { min-height: 0; } .about-detail-image--contain img, .elementor .about-detail-image--contain img { height: auto; object-fit: contain; } /* ------------------------------------------------- about: why choose SEBLIP */ /* The tile list runs to six entries, so the about page lays them out three across — site.css's four columns would strand two of them alone on a second row. These selectors are (0,2,0) and outrank site.css's own (0,1,0) column rules at every width, so each breakpoint has to restate the count it wants rather than letting the narrower rules take over. */ .strength-section--about .strength-tiles { grid-template-columns: repeat(3, 1fr); } .strength-section--about .strength-tiles article:nth-child(3n) { border-right: 1px solid #ffffff2e; } .strength-section--about .strength-tiles article:nth-child(n+4) { border-top: 1px solid #ffffff2e; } @media (max-width: 820px) { .strength-section--about .strength-tiles { grid-template-columns: repeat(2, 1fr); } .strength-section--about .strength-tiles article:nth-child(3n) { border-right: 0; } .strength-section--about .strength-tiles article:nth-child(2n) { border-right: 1px solid #ffffff2e; } .strength-section--about .strength-tiles article:nth-child(n+3) { border-top: 1px solid #ffffff2e; } } @media (max-width: 520px) { .strength-section--about .strength-tiles { grid-template-columns: 1fr; } .strength-section--about .strength-tiles article, .strength-section--about .strength-tiles article:nth-child(2n), .strength-section--about .strength-tiles article:nth-child(3n) { border-right: 1px solid #ffffff2e; } .strength-section--about .strength-tiles article:not(:first-child) { border-top: 1px solid #ffffff2e; } } .footer-contact a { display: flex; align-items: center; gap: 9px; } /* ------------------------------------------------------------- social links */ /* Outline marks on a dark ground: a hairline box that fills with the signal colour on hover, matching how the footer's other links behave. */ .footer-social { display: flex; flex-wrap: wrap; gap: 9px; margin: 22px 0 0; padding: 0; list-style: none; } .footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; color: #d3dde1; border: 1px solid #ffffff33; transition: color .18s var(--ease-out), background .18s var(--ease-out), border-color .18s var(--ease-out); } .footer-social a:hover { color: var(--ink); background: var(--signal); border-color: var(--signal); } /* The contact page renders them inside a channel row, so they sit on the light ground and follow that column's own link colour instead. */ .contact-social { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 14px; } .contact-social a { display: inline-flex; color: var(--ink); transition: color .18s var(--ease-out); } .contact-social a:hover { color: var(--signal); } .footer-location { display: flex; align-items: flex-start; gap: 8px; line-height: 1.7; } .footer-location svg { flex: none; margin-top: 2px; } .product-fact-card__back { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); width: 100%; font-family: 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; } .product-fact-card__back:hover { color: var(--signal); } /* Component hover rules appear later than the generic reveal block and use their own transition shorthand. Keep the entrance transition in control while these elements carry the temporary reveal class; JS removes the class after the entrance so their normal, quicker hover response returns. */ .category-card.will-reveal, .catalog-card.will-reveal, .news-card.will-reveal, .button.will-reveal { transition: opacity .72s cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms), transform .72s cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms); } @media (max-width: 820px) { .will-reveal[data-reveal-from='left'], .will-reveal[data-reveal-from='right'], .page-hero-grid > .page-enter:first-child, .page-hero-grid > .page-enter:last-child:not(:first-child) { transform: translate3d(0, 26px, 0); } } @media (prefers-reduced-motion: reduce) { .category-card.will-reveal, .catalog-card.will-reveal, .news-card.will-reveal, .button.will-reveal { transition: none; } }