. /*! * Simple Origin - so-product.css (DROP-IN) * Product pages + product listing cards + spec-heavy sections * Includes brand accents (SO orange, Bestron blue, TVIPS blue) + unified carousel sizing */ /* ========================================================= Brand variables - Set a brand class on : or brand-bestron or brand-tvips ========================================================= */ :root { --so-accent: #fa9632; /* Simple Origin orange (default) */ --brand-accent: var(--so-accent); --brand-text: #4a4a4a; --brand-border: rgba(0,0,0,0.12); --brand-muted: #6b6b6b; /* Shadows */ --so-shadow-sm: 0 4px 14px rgba(0,0,0,0.10); --so-shadow-md: 0 8px 24px rgba(0,0,0,0.12); } /* Brand modifiers */ .brand-so { --brand-accent: #fa9632; --brand-hover: #e88324; --brand-border: rgba(0,0,0,0.08); --brand-muted: #666; } .brand-bestron { --brand-accent: #1F4B99; --brand-hover: #163a77; --brand-border: rgba(0,0,0,0.08); --brand-muted: #666; } .brand-tvips { --brand-accent: #2a56ae; --brand-hover: #1f4490; /* slightly darker hover */ --brand-border: rgba(0,0,0,0.08); --brand-muted: #666; } /* change if TVIPS uses a different hex */ /* ========================================================= Page title area ========================================================= */ .product-page section { padding: 22px 0 !important; } .product-page .section-title { font-size: 2.1rem; color: #222; margin-bottom: 0.4rem; letter-spacing: 0.01em; } .product-page .section-subtitle { font-size: 1.05rem; color: #4f4f4f; margin-left: auto; margin-right: auto; line-height: 1.35; max-width: 1200px; } @media (max-width: 576px) { .product-page .section-title { font-size: 1.75rem; } .product-page .section-subtitle { font-size: 0.98rem; } } /* ========================================================= Product listing cards (products.html / related products) ========================================================= */ .product-card { background: #fff; border: 1px solid #e5e5e5; box-shadow: var(--so-shadow-sm); display: flex; flex-direction: column; height: 100%; transition: box-shadow 0.2s ease, transform 0.2s ease; } .product-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.12), 0 12px 36px rgba(0,0,0,0.08); transform: translateY(-2px); } .product-card img { width: 100%; height: 240px; object-fit: contain; background: #fff; padding: 10px; border-bottom: 1px solid #e5e5e5; } .product-body { padding: 18px 22px; display: flex; flex-direction: column; flex: 1; } .product-title { font-size: 1.05rem; margin-bottom: 8px; color: #1e1e1e; } .product-desc { font-size: 0.92rem; color: #555; line-height: 1.45; flex-grow: 1; margin-bottom: 12px; text-transform: none !important; } .link-arrow { font-weight: 600; font-size: 0.9rem; color: var(--brand-accent); text-decoration: none; margin-top: auto; } /* ========================================================= Product detail text (left column on product pages) Use one baseline: 1rem ========================================================= */ .productrow { font-size: 1rem; line-height: 1.65; } .productrow p, .productrow li { color: var(--brand-text); font-size: inherit; line-height: inherit; } .productrow h5 { font-size: 1.25rem; color: #1f1f1f; margin-top: 28px; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid rgba(0,0,0,0.18); letter-spacing: 0.02em; font-weight: 700; } .productrow h6 { margin-top: 14px; margin-bottom: 6px; color: #222; } /* Bullets: match paragraph sizing */ .product-bullets { margin: 10px 0 18px; padding-left: 18px; font-size: inherit; line-height: inherit; color: var(--brand-text); } .product-bullets li { margin-bottom: 6px; } /* Model blocks */ .model-title { font-size: 1rem; color: #222; margin-top: 14px; margin-bottom: 6px; line-height: 1.35; } .model-no { color: var(--brand-accent); } .model-desc { font-size: 0.95rem; line-height: 1.55; color: #555; margin-bottom: 18px; } /* ========================================================= Product media panel (carousel card) Brand top border comes from --brand-accent ========================================================= */ .product-media-panel { background: #ffffff; box-shadow: var(--so-shadow-md); overflow: hidden; border-top: 4px solid var(--brand-accent); display: flex; flex-direction: column; } /* ========================================================= Carousel sizing (ONE system) Add classes on carousel root: - class="carousel ... so-carousel so-carousel-360" ========================================================= */ .so-carousel { background: #fff; box-sizing: border-box !important; } /* default height */ .so-carousel { --carousel-h: 360px; } /* size variants */ .so-carousel-300 { --carousel-h: 300px; } .so-carousel-320 { --carousel-h: 320px; } .so-carousel-360 { --carousel-h: 360px; } .so-carousel-420 { --carousel-h: 420px; } .so-carousel-480 { --carousel-h: 480px; } /* fixed window */ .so-carousel .carousel-inner, .so-carousel .carousel-item { height: var(--carousel-h); } /* images fill the window without distortion */ .so-carousel .carousel-item img { width: 100%; height: 100%; object-fit: contain; object-position: center; background: transparent; display: block; } .product-media-panel .so-carousel { padding: 18px; } /* IMPORTANT: Do NOT keep any old rules like: .product-page .carousel-item img { height: 520px; } or #someCarousel .carousel-item img { height: 420px; } Those will fight this system. */ /* ========================================================= Downloads card (brochure thumbnails) ========================================================= */ .download-card { background: #ffffff; border-radius: 0; box-shadow: var(--so-shadow-md); border-top: 4px solid var(--brand-accent); padding: 14px 20px 18px; text-align: center; } .product-downloads-title { font-size: 0.92rem; letter-spacing: 0.03em; margin-bottom: 14px; color: #222; font-weight:700; } /* ========================================= Brochures layout Stable on desktop, wraps on mobile ========================================= */ .product-downloads { display: flex; gap: 14px; justify-content: center; align-items: flex-start; } /* Desktop / large screens: do NOT wrap */ @media (min-width: 992px) { .product-downloads { flex-wrap: nowrap; } } /* Mobile / tablet: allow wrapping */ @media (max-width: 991.98px) { .product-downloads { flex-wrap: wrap; } } /* Prevent flex children from shrinking */ .product-downloads a { flex: 0 0 auto; margin: 0; } .download-card--compact { padding: 12px 16px 14px; /* slightly less than default */ } .download-card--compact .product-downloads img { width: 90px; height: 110px; } .product-downloads img { width: 115px; height: 130px; object-fit: contain; padding: 6px; border: 1px solid rgba(0,0,0,0.10); border-radius: 0; background: #fff; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .product-downloads a:hover img { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,0.12); border-color: color-mix(in srgb, var(--brand-accent) 85%, transparent); } /* ========================================================= Action row (Accessories + Quote / etc.) ========================================================= */ .action-row { display: flex; gap: 16px; margin-top: 24px; align-items: stretch; background: transparent; } .action-col { flex: 1 1 0; min-width: 0; display: flex; /* lets the card stretch */ } .action-col > * { flex: 1; /* card fills the column height */ } @media (max-width: 991.98px) { .action-row { flex-direction: column; } } /* Shared fixed height */ .fixed-card-height { min-height: 180px; height: auto; } /* Accessories card (fully clickable) */ .accessories-link { display: block; height: 180px; text-decoration: none; color: inherit; } .accessories-card { position: relative; width: 100%; height: 100%; overflow: hidden; background: #eaeaea; box-shadow: var(--so-shadow-md); transition: transform 0.18s ease, box-shadow 0.18s ease; } .accessories-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,0.16); } .accessories-top-border { width: 100%; height: 4px; background: var(--brand-accent); position: absolute; top: 0; left: 0; z-index: 2; } .accessories-full-img { width: 100%; height: auto; object-fit: contain; display: block; filter: saturate(0.95); } .accessories-card:hover .accessories-full-img { filter: saturate(1.02); } .accessories-bottom-link { position: absolute; bottom: 0; left: 0; width: 100%; padding: 10px 16px; background: var(--brand-accent); color: #fff; text-align: center; font-size: 0.95rem; z-index: 2; } /* Quote card */ .action-card-quote { background: #ffffff; box-shadow: var(--so-shadow-md); padding: 14px 16px 16px; transition: transform 0.18s ease, box-shadow 0.18s ease; position: relative; border-top: none; } .action-card-quote:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,0.16); } .card-top-border { position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--brand-accent); z-index: 2; } .quote-card-link { display: flex; height: 100%; flex-direction: column; align-items: center; justify-content: flex-end; text-decoration: none; color: inherit; text-align: center; padding: 12px 10px 22px; } .quote-card-text { font-size: 0.92rem; line-height: 1.45; color: #4a4a4a; margin: 0 0 12px; max-width: 220px; text-transform: none; } .action-card-quote .btn { font-size: 0.86rem; padding: 6px 18px; text-transform: none; } .action-card-quote:hover .btn { background-color: color-mix(in srgb, var(--brand-accent) 85%, #000 15%); border-color: color-mix(in srgb, var(--brand-accent) 85%, #000 15%); } /* ========================================================= Spec-heavy components (Bestron INSTEMS, etc.) ========================================================= */ .feature-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 10px 0 18px; } @media (min-width: 576px) { .feature-grid { grid-template-columns: 1fr 1fr; } } .feature-item { background: #fff; border: 1px solid var(--brand-border); border-left: 4px solid var(--brand-accent); padding: 8px 12px; box-shadow: 0 3px 12px rgba(0,0,0,0.06); } .feature-item .k { color: #222; font-size: 0.92rem; margin-bottom: 0; font-weight:700; } .feature-item .v { font-size: 0.92rem; color: var(--brand-text); line-height: 1.35; } /* Specs table */ .spec-table { width: 100%; border-collapse: collapse; margin-top: 10px; margin-bottom: 8px; font-size: 0.95rem; } .spec-table th, .spec-table td { border: 1px solid var(--brand-border); padding: 10px 12px; vertical-align: top; background: #fff; padding-right: 18px; } .spec-table th { background: #f4f4f4; font-weight: 600; color: #222; width: 42%; } .spec-table tr:hover { background: #f9fbff; } .spec-note { font-size: 0.88rem; line-height: 1.55; color: var(--brand-muted); margin-top: 8px; } .spec-table { border: 1px solid rgba(0,0,0,0.06); } .spec-table th, .spec-table td { border-bottom: 1px solid rgba(0,0,0,0.06); } /* Comparison table (Feature | TE | TE Pro) */ .compare-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 0.95rem; } .compare-table th, .compare-table td { border: none; border-bottom: 1px solid rgba(0,0,0,0.08); padding: 12px 10px; vertical-align: middle; } .compare-table td { background: #fff; } .compare-table thead th { color: #222; padding-top: 6px; padding-bottom: 10px; } .compare-table thead th:first-child { text-align: left; } .compare-table thead th:not(:first-child), .compare-table td:not(:first-child) { text-align: center; width: 22%; } .compare-table tbody tr:last-child td { border-bottom: none; } .compare-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; background: rgba(31, 75, 153, 0.12); color: var(--brand); font-weight: 900; line-height: 1; } .compare-dash { color: #999; font-weight: 700; } .compare-muted { color: #666; font-weight: 600; font-size: 0.92rem; } .compare-table th, .compare-table td { white-space: nowrap; } .compare-table-title, .productrow h5.compare-title { text-transform: none; } /* Auto-height carousel (image decides height) */ .so-carousel-auto { --carousel-h: auto; } .so-carousel-auto .carousel-inner, .so-carousel-auto .carousel-item { height: auto !important; } .so-carousel-auto .carousel-item img { height: auto !important; max-height: none; } /* Brand-aware primary button */ .product-page .btn-primary { background-color: var(--brand-accent) !important; border-color: var(--brand-accent) !important; } .product-page .btn-primary:hover { background-color: var(--brand-hover) !important; border-color: var(--brand-hover) !important; } .tech-list { padding-left: 18px; margin: 6px 0 14px; } .tech-list li { margin-bottom: 4px; line-height: 1.45; color: #333; } .brand-tvips .tech-list { list-style-type: disc; } /* ========================================================= Product page typography (shared across all brands) ========================================================= */ /* Body text + lists */ .product-page p, .product-page ul, .product-page li { font-size: 0.95rem; line-height: 1.6; } /* Section headings (Overview, System Requirements, Software, Applications) */ .product-page h5 { font-size: 1.05rem; margin-top: 20px; margin-bottom: 6px; } /* List spacing */ .product-page ul { margin-bottom: 10px; padding-left: 18px; } .product-page li { margin-bottom: 4px; } .brand-tvips .product-page p, .brand-tvips .product-page li { font-size: 0.93rem; } /* Tighten section rhythm on product pages */ .product-page h5 { margin-top: 18px; margin-bottom: 6px; } /* Pull lists closer to headings */ .product-page h5 + ul { margin-top: 4px; } /* Reduce bottom spacing between sections */ .product-page ul { margin-bottom: 12px; } /* Slightly tighter bullets */ .product-page li { margin-bottom: 3px; } /* Force product typography to apply everywhere inside product pages */ .product-page :where(p, ul, ol, li) { font-size: 0.95rem; line-height: 1.6; } .product-page :where(h5) { font-size: 1.05rem; margin-top: 18px; margin-bottom: 6px; } .product-page :where(h5 + ul) { margin-top: 4px; } .product-page :where(ul) { margin-bottom: 12px; padding-left: 18px; } .product-page :where(li) { margin-bottom: 3px; } .product-page .productrow p, .product-page .productrow ul, .product-page .productrow li { font-size: 0.95rem; line-height: 1.6; } .addon-title { color: var(--brand-accent); } /* ========================================================= Brand footer (below actions row) ========================================================= */ .brand-footer { margin-top: 24px; padding-top: 14px; border-top: 1px solid rgba(0,0,0,0.08); text-align: center; } .brand-footer-logo { max-height: 40px; margin-bottom: 8px; } /* Base footer text */ .brand-footer-text { font-size: 0.9rem; color: #555; line-height: 1.5; margin: 0; margin-top: 4px; } /* Simple Origin = always orange */ .brand-footer-text .representative-name { color: #fa9632 !important; /* Simple Origin orange (fixed) */ font-weight: 600; } /* Prevent title hiding under navbar */ #portfolio { scroll-margin-top: 5rem !important; padding-top: 5rem !important; } /* Page width */ #pumping-assembly .container { width: 100%; max-width: 1500px; padding-left: 40px; padding-right: 40px; } @media (min-width: 1600px) { #pumping-assembly .container { max-width: 92vw; } } /* Left column spacing */ #pumping-assembly .productrow { padding-right: 40px; max-width: 680px; } @media (min-width: 992px) { #pumping-assembly .productrow { padding-right: 48px; } } /* --------------------------------------------- Widen only the Cryo Holder layout ----------------------------------------------*/ #cryo-holder .container { width: 100%; max-width: 1500px; padding-left: 40px; padding-right: 40px; } @media (min-width: 1600px) { #cryo-holder .container { max-width: 92vw; } } /* --------------------------------------------- Left text spacing ----------------------------------------------*/ #cryo-holder .productrow { padding-right: 40px; max-width: 680px; } @media (min-width: 992px) { #cryo-holder .productrow { padding-right: 48px; /* a touch more air */ } } /* --------------------------------------------- Widen only the Cryo Holder layout ----------------------------------------------*/ #heating-biasing .container { width: 100%; max-width: 1500px; padding-left: 40px; padding-right: 40px; } @media (min-width: 1600px) { #heating-biasing .container { max-width: 92vw; } } /* --------------------------------------------- Left text spacing ----------------------------------------------*/ #heating-biasing .productrow { padding-right: 40px; max-width: 680px; } @media (min-width: 992px) { #heating-biasing .productrow { padding-right: 48px; /* a touch more air */ } } /* --------------------------------------------- Widen only the Cryo Holder layout ----------------------------------------------*/ #vacuum-holder .container { width: 100%; max-width: 1500px; padding-left: 40px; padding-right: 40px; } @media (min-width: 1600px) { #vacuum-holder .container { max-width: 92vw; } } /* --------------------------------------------- Left text spacing ----------------------------------------------*/ #vacuum-holder .productrow { padding-right: 40px; max-width: 680px; } @media (min-width: 992px) { #vacuum-holder .productrow { padding-right: 48px; } } #work-station .container { width: 100%; max-width: 1500px; padding-left: 40px; padding-right: 40px; margin-left: auto; margin-right: auto; } @media (min-width: 1600px) { #work-station .container { max-width: 92vw; } } #work-station .productrow { padding-right: 40px; max-width: 680px; } @media (min-width: 992px) { #work-station .productrow { padding-right: 48px; } } .patent { font-weight: 800; margin-top: 10px; color: #000000; } #tvips-imaging-software .container { width: 100%; max-width: 1500px; padding-left: 40px; padding-right: 40px; } @media (min-width: 1600px) { #tvips-imaging-software .container { max-width: 92vw; } } #tvips-xf216 .container { width: 100%; max-width: 1500px; padding-left: 40px; padding-right: 40px; } @media (min-width: 1600px) { #tvips-xf216 .container { max-width: 92vw; } } #tvips-xf416 .container { width: 100%; max-width: 1500px; padding-left: 40px; padding-right: 40px; } @media (min-width: 1600px) { #tvips-xf416 .container { max-width: 92vw; } } #tvips-xf416r .container { width: 100%; max-width: 1500px; padding-left: 40px; padding-right: 40px; } @media (min-width: 1600px) { #tvips-xf416r .container { max-width: 92vw; } }