/* EDIT GUIDE: css/refresh.css Page-specific or legacy styles. Shared theme files load later and can override these rules. Check the page stylesheet list before changing colours or spacing. Search EDIT BLOCK for selectors/functions; see EDITING-GUIDE.md for the file map. */ /* FILE GUIDE: Current site-wide visual overrides. Loaded after base/page styles; order and selector specificity matter. */ /* Shared full-page visual system for every completed page. */ /* Discovery links use real anchors: whole cards support keyboard navigation and open-in-new-tab. */ /* EDIT BLOCK: .refreshed a.discovery-card. Change the declarations below; shared overrides may load later. */ .refreshed a.discovery-card { color:inherit; text-decoration:none; } /* EDIT BLOCK: .refreshed a.discovery-card:hover. Change the declarations below; shared overrides may load later. */ .refreshed a.discovery-card:hover { border-color:var(--accent); box-shadow:var(--shadow-card-hover); } /* EDIT BLOCK: .discovery-arrow. Change the declarations below; shared overrides may load later. */ .discovery-arrow { color:#986300; font-size:.8em; white-space:nowrap; } /* EDIT BLOCK: .refreshed a:focus-visible. Change the declarations below; shared overrides may load later. */ .refreshed a:focus-visible { outline:3px solid #e9ae3f; outline-offset:4px; } /* Deep-link targets stay below the sticky header and briefly identifiable through :target. */ /* EDIT BLOCK: .linked-reference,.enquiry-form input,.enquiry-form select. Change the declarations below; shared overrides may load later. */ .linked-reference,.enquiry-form input,.enquiry-form select { scroll-margin-top:180px; } /* EDIT BLOCK: .linked-reference:target. Change the declarations below; shared overrides may load later. */ .linked-reference:target { background:#fff5dc; } /* EDIT BLOCK: .refreshed .inline-guide-link. Change the declarations below; shared overrides may load later. */ .refreshed .inline-guide-link { color:#123c56; text-decoration:underline; text-underline-offset:3px; } /* Navigation and header: layout, dropdown visibility and navigation controls. */ /* EDIT BLOCK: .refreshed .refreshed-header. Change the declarations below; shared overrides may load later. */ .refreshed .refreshed-header { height:auto; position:sticky; } /* EDIT BLOCK: .refreshed .refreshed-header .container. Change the declarations below; shared overrides may load later. */ .refreshed .refreshed-header .container { height:auto; } /* EDIT BLOCK: .refreshed .refreshed-header .logo-img. Change the declarations below; shared overrides may load later. */ .refreshed .refreshed-header .logo-img { max-height:none; height:auto; } /* Hero section: introductory text, illustration layout and primary actions. */ /* EDIT BLOCK: .refreshed :is(.product-hero,.fittings-hero,.catalog-hero). Change the declarations below; shared overrides may load later. */ .refreshed :is(.product-hero,.fittings-hero,.catalog-hero) { padding:76px 0 82px; min-height:0; background:radial-gradient(ellipse at 90% 80%,#21516a55,transparent 50%),#092438; } /* EDIT BLOCK: .refreshed .product-hero .container. Change the declarations below; shared overrides may load later. */ .refreshed .product-hero .container { width:min(100% - 48px,1200px); } /* EDIT BLOCK: .refreshed .product-hero-grid. Change the declarations below; shared overrides may load later. */ .refreshed .product-hero-grid { display:grid; grid-template-columns:1.1fr 1fr; min-height:0; gap:56px; padding:0; } /* EDIT BLOCK: .refreshed .product-hero-content. Change the declarations below; shared overrides may load later. */ .refreshed .product-hero-content { margin:0; max-width:none; } /* EDIT BLOCK: .refreshed .product-hero h1,.refreshed .fittings-hero h1,.refreshed .catalog-hero h1. Change the declarations below; shared overrides may load later. */ .refreshed .product-hero h1,.refreshed .fittings-hero h1,.refreshed .catalog-hero h1 { font-size:clamp(38px,4.5vw,60px); line-height:1.12; font-weight:700; letter-spacing:-.045em; color:white; margin:20px 0 24px; } /* EDIT BLOCK: .refreshed :is(.product-hero,.fittings-hero,.catalog-hero) h1 span. Change the declarations below; shared overrides may load later. */ .refreshed :is(.product-hero,.fittings-hero,.catalog-hero) h1 span { color:#f0ba4f; } /* EDIT BLOCK: .refreshed :is(.product-hero,.fittings-hero,.catalog-hero) p. Change the declarations below; shared overrides may load later. */ .refreshed :is(.product-hero,.fittings-hero,.catalog-hero) p { color:#c3d3de; font-size:15px; line-height:1.85; } /* EDIT BLOCK: .refreshed :is(.product-hero,.fittings-hero,.catalog-hero) :is(.eyebrow,.section-tag). Change the declarations below; shared overrides may load later. */ .refreshed :is(.product-hero,.fittings-hero,.catalog-hero) :is(.eyebrow,.section-tag) { color:#f0ba4f; } /* EDIT BLOCK: .refreshed .product-hero-image img. Change the declarations below; shared overrides may load later. */ .refreshed .product-hero-image img { width:100%; height:auto; max-width:600px; object-fit:contain; border-radius:24px; box-shadow:0 18px 36px #061c2c33; } /* EDIT BLOCK: .refreshed .hero-image-glow,.refreshed .product-hero::after,.refreshed .fittings-hero::after. Change the declarations below; shared overrides may load later. */ .refreshed .hero-image-glow,.refreshed .product-hero::after,.refreshed .fittings-hero::after { display:none; } /* EDIT BLOCK: .refreshed :is(.product-hero,.fittings-hero,.catalog-hero) .btn-primary. Change the declarations below; shared overrides may load later. */ .refreshed :is(.product-hero,.fittings-hero,.catalog-hero) .btn-primary { color:#092438; background:#efb648; border-color:#efb648; } /* EDIT BLOCK: .refreshed :is(.product-hero,.fittings-hero,.catalog-hero) :is(.btn-outline,.btn-secondary). Change the declarations below; shared overrides may load later. */ .refreshed :is(.product-hero,.fittings-hero,.catalog-hero) :is(.btn-outline,.btn-secondary) { background:transparent; color:white; border:1px solid #7c94a4; } /* EDIT BLOCK: .refreshed .fittings-hero-content. Change the declarations below; shared overrides may load later. */ .refreshed .fittings-hero-content { text-align:left; max-width:960px; margin:0; } /* EDIT BLOCK: .refreshed .fittings-hero p. Change the declarations below; shared overrides may load later. */ .refreshed .fittings-hero p { margin:0 0 28px; } /* EDIT BLOCK: .refreshed :is(.fittings-hero-actions,.fittings-hero-trust). Change the declarations below; shared overrides may load later. */ .refreshed :is(.fittings-hero-actions,.fittings-hero-trust) { justify-content:flex-start; } /* Reusable content grids and cards: spacing, borders and hover treatment. */ /* EDIT BLOCK: .refreshed :is(.fitting-category-card,.tee-type-card). Change the declarations below; shared overrides may load later. */ .refreshed :is(.fitting-category-card,.tee-type-card) { background:white; border:1px solid #dfe6eb; border-radius:16px; overflow:hidden; } /* EDIT BLOCK: .refreshed :is(.fitting-category-card,.tee-type-card,.catalog-card):hover. Change the declarations below; shared overrides may load later. */ .refreshed :is(.fitting-category-card,.tee-type-card,.catalog-card):hover { border-color:#e9ae3f; box-shadow:var(--shadow-card-hover); } /* EDIT BLOCK: .refreshed .fitting-category-card. Change the declarations below; shared overrides may load later. */ .refreshed .fitting-category-card { padding:28px; } /* Material cards: grade labels, badges and responsive directory layouts. */ /* EDIT BLOCK: .refreshed :is(.fittings-introduction,.fittings-material-section,.fittings-standards-section). Change the declarations below; shared overrides may load later. */ .refreshed :is(.fittings-introduction,.fittings-material-section,.fittings-standards-section) { padding:88px 0; } /* Application and requirement cards: readable supporting information. */ /* EDIT BLOCK: .refreshed :is(.fittings-intro-panel,.product-spec-box,.quality-box). Change the declarations below; shared overrides may load later. */ .refreshed :is(.fittings-intro-panel,.product-spec-box,.quality-box) { padding:30px; border-radius:16px; background:#123c56; color:white; } /* EDIT BLOCK: .refreshed :is(.product-spec-box,.quality-box) :is(h3,p,span,strong). Change the declarations below; shared overrides may load later. */ .refreshed :is(.product-spec-box,.quality-box) :is(h3,p,span,strong) { color:inherit; } /* EDIT BLOCK: .refreshed :is(.spec-row,.quality-check). Change the declarations below; shared overrides may load later. */ .refreshed :is(.spec-row,.quality-check) { display:flex; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid #ffffff22; font-size:13px; } /* Standards content: reference cards and specification notes. */ /* EDIT BLOCK: .refreshed :is(.product-overview-grid,.standards-content-grid). Change the declarations below; shared overrides may load later. */ .refreshed :is(.product-overview-grid,.standards-content-grid) { display:grid; grid-template-columns:1.15fr 1fr; gap:40px; align-items:start; } /* Component styling: .refreshed .product-overview-content p. */ /* EDIT BLOCK: .refreshed .product-overview-content p. Change the declarations below; shared overrides may load later. */ .refreshed .product-overview-content p { margin-bottom:18px; } /* Component styling: .refreshed .product-overview .feature-list,.refreshed .tee-type-content .feature-list. */ /* EDIT BLOCK: .refreshed .product-overview .feature-list,.refreshed .tee-type-content .feature-list. Change the declarations below; shared overrides may load later. */ .refreshed .product-overview .feature-list,.refreshed .tee-type-content .feature-list { display:grid; grid-template-columns:1fr; gap:12px; margin-top:20px; font-size:13px; } /* Application and requirement cards: readable supporting information. */ /* EDIT BLOCK: .refreshed :is(.feature-list,.quality-check) i. Change the declarations below; shared overrides may load later. */ .refreshed :is(.feature-list,.quality-check) i { color:#b27c18; margin-right:8px; } /* Component styling: .refreshed .tee-types-grid. */ /* EDIT BLOCK: .refreshed .tee-types-grid. Change the declarations below; shared overrides may load later. */ .refreshed .tee-types-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; } /* Component styling: .refreshed .tee-type-image. */ /* EDIT BLOCK: .refreshed .tee-type-image. Change the declarations below; shared overrides may load later. */ .refreshed .tee-type-image { height:140px; background:#edf3f6; display:grid; place-items:center; } /* Component styling: .refreshed .tee-placeholder. */ /* EDIT BLOCK: .refreshed .tee-placeholder. Change the declarations below; shared overrides may load later. */ .refreshed .tee-placeholder { background:#123c56; color:#f0ba4f; padding:22px; border-radius:12px; } /* Component styling: .refreshed .tee-type-content. */ /* EDIT BLOCK: .refreshed .tee-type-content. Change the declarations below; shared overrides may load later. */ .refreshed .tee-type-content { padding:28px; } /* Component styling: .refreshed .type-label. */ /* EDIT BLOCK: .refreshed .type-label. Change the declarations below; shared overrides may load later. */ .refreshed .type-label { color:#986300; font-size:11px; font-weight:700; letter-spacing:.12em; } /* Component styling: .refreshed .tee-type-content h3. */ /* EDIT BLOCK: .refreshed .tee-type-content h3. Change the declarations below; shared overrides may load later. */ .refreshed .tee-type-content h3 { margin:10px 0 16px; font-size:24px; } /* Standards content: reference cards and specification notes. */ /* EDIT BLOCK: .refreshed .standard-item. Change the declarations below; shared overrides may load later. */ .refreshed .standard-item { display:flex; align-items:flex-start; gap:18px; padding:22px; margin-top:14px; border:1px solid #dfe6eb; border-radius:14px; background:white; } /* EDIT BLOCK: .refreshed .standard-item strong,.refreshed .standard-item span. Change the declarations below; shared overrides may load later. */ .refreshed .standard-item strong,.refreshed .standard-item span { display:block; } /* EDIT BLOCK: .refreshed .standard-item span. Change the declarations below; shared overrides may load later. */ .refreshed .standard-item span { color:#526778; margin-top:8px; font-size:13px; } /* Application and requirement cards: readable supporting information. */ /* EDIT BLOCK: .refreshed .application-card. Change the declarations below; shared overrides may load later. */ .refreshed .application-card { display:flex; gap:20px; padding:26px; border:1px solid #dfe6eb; border-radius:16px; background:white; } /* EDIT BLOCK: .refreshed .applications-grid. Change the declarations below; shared overrides may load later. */ .refreshed .applications-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; } /* EDIT BLOCK: .refreshed .application-content h3. Change the declarations below; shared overrides may load later. */ .refreshed .application-content h3 { font-size:18px; margin-bottom:12px; } /* EDIT BLOCK: .refreshed .application-content p. Change the declarations below; shared overrides may load later. */ .refreshed .application-content p { font-size:13px; } /* Material cards: grade labels, badges and responsive directory layouts. */ /* EDIT BLOCK: .refreshed :is(.applications-note,.materials-note,.quality-box-note). Change the declarations below; shared overrides may load later. */ .refreshed :is(.applications-note,.materials-note,.quality-box-note) { padding:20px; margin-top:24px; border-left:3px solid #e9ae3f; background:#edf3f6; color:#123c56; font-size:13px; } /* Application and requirement cards: readable supporting information. */ /* EDIT BLOCK: .refreshed .quality-features. Change the declarations below; shared overrides may load later. */ .refreshed .quality-features { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:24px; } /* EDIT BLOCK: .refreshed .quality-feature. Change the declarations below; shared overrides may load later. */ .refreshed .quality-feature { padding:20px; border:1px solid #dfe6eb; border-radius:12px; } /* EDIT BLOCK: .refreshed .quality-feature h4. Change the declarations below; shared overrides may load later. */ .refreshed .quality-feature h4 { color:#123c56; margin:10px 0; } /* EDIT BLOCK: .refreshed .quality-feature p. Change the declarations below; shared overrides may load later. */ .refreshed .quality-feature p { font-size:13px; } /* EDIT BLOCK: .refreshed .quality-feature-icon. Change the declarations below; shared overrides may load later. */ .refreshed .quality-feature-icon { color:#986300; font-size:22px; } /* Call to action: highlighted next-step section and enquiry links. */ /* EDIT BLOCK: .refreshed .product-cta. Change the declarations below; shared overrides may load later. */ .refreshed .product-cta { padding:60px 0; background:#eeb748; } /* EDIT BLOCK: .refreshed .product-cta-inner. Change the declarations below; shared overrides may load later. */ .refreshed .product-cta-inner { display:flex; align-items:center; justify-content:space-between; gap:32px; } /* EDIT BLOCK: .refreshed .product-cta :is(h2,p,.section-tag). Change the declarations below; shared overrides may load later. */ .refreshed .product-cta :is(h2,p,.section-tag) { color:#092438; } /* EDIT BLOCK: .refreshed .product-cta h2. Change the declarations below; shared overrides may load later. */ .refreshed .product-cta h2 { font-size:clamp(26px,3vw,40px); margin-bottom:18px; } /* EDIT BLOCK: .refreshed .product-cta .btn-primary. Change the declarations below; shared overrides may load later. */ .refreshed .product-cta .btn-primary { background:#092438; color:white; white-space:nowrap; } /* Component styling: .refreshed .catalog-drawing. */ /* EDIT BLOCK: .refreshed .catalog-drawing. Change the declarations below; shared overrides may load later. */ .refreshed .catalog-drawing { padding:18px; background:#123c5633; } /* Hero section: introductory text, illustration layout and primary actions. */ /* EDIT BLOCK: .refreshed .catalog-hero-image. Change the declarations below; shared overrides may load later. */ .refreshed .catalog-hero-image { width:100%; max-width:545px; } /* EDIT BLOCK: .refreshed .catalog-hero-image img. Change the declarations below; shared overrides may load later. */ .refreshed .catalog-hero-image img { display:block; width:100%; height:auto; aspect-ratio:520 / 358; object-fit:contain; } /* EDIT BLOCK: .refreshed .catalog-hero .hero-actions. Change the declarations below; shared overrides may load later. */ .refreshed .catalog-hero .hero-actions { display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:14px; } /* EDIT BLOCK: .refreshed .catalog-hero .hero-actions .btn. Change the declarations below; shared overrides may load later. */ .refreshed .catalog-hero .hero-actions .btn { width:auto; } /* EDIT BLOCK: .refreshed .catalog-hero p. Change the declarations below; shared overrides may load later. */ .refreshed .catalog-hero p { margin-bottom:26px; } /* Reusable content grids and cards: spacing, borders and hover treatment. */ /* EDIT BLOCK: .refreshed .catalog-card. Change the declarations below; shared overrides may load later. */ .refreshed .catalog-card { border-radius:16px; } /* EDIT BLOCK: .refreshed .catalog-list strong. Change the declarations below; shared overrides may load later. */ .refreshed .catalog-list strong { color:#123c56; } /* EDIT BLOCK: .refreshed .catalog-list li. Change the declarations below; shared overrides may load later. */ .refreshed .catalog-list li { padding:26px; } /* Responsive or accessibility override: @media(max-width:1000px). Rules inside this block apply only when its condition matches. */ /* EDIT BLOCK: @media(max-width:1000px). Change the declarations below; shared overrides may load later. */ @media(max-width:1000px) { .refreshed :is(.product-overview-grid,.standards-content-grid) { grid-template-columns:1fr; } .refreshed .applications-grid { grid-template-columns:1fr 1fr; } } /* Responsive or accessibility override: @media(max-width:760px). Rules inside this block apply only when its condition matches. */ /* EDIT BLOCK: @media(max-width:760px). Change the declarations below; shared overrides may load later. */ @media(max-width:760px) { .refreshed .product-hero-grid { grid-template-columns:1fr; gap:28px; text-align:left; } .refreshed :is(.product-hero,.fittings-hero,.catalog-hero) { padding:44px 0; } .refreshed .product-hero-actions { flex-wrap:wrap; } .refreshed .product-cta-inner { flex-direction:column; align-items:flex-start; } .refreshed :is(.fittings-introduction,.fittings-material-section,.fittings-standards-section) { padding:56px 0; } } /* Responsive or accessibility override: @media(max-width:520px). Rules inside this block apply only when its condition matches. */ /* EDIT BLOCK: @media(max-width:520px). Change the declarations below; shared overrides may load later. */ @media(max-width:520px) { .refreshed :is(.tee-types-grid,.applications-grid,.quality-features,.fitting-category-grid) { grid-template-columns:1fr; } .refreshed .product-hero .container { width:calc(100% - 32px); } } /* Shared visual foundation: content width, section spacing, colors and headings. */ /* EDIT BLOCK: .refreshed. Change the declarations below; shared overrides may load later. */ .refreshed { --primary:#123c56; --primary-dark:#092438; --accent:#e9ae3f; --text-light:#526778; --bg:#f2f5f7; --radius:16px; } /* EDIT BLOCK: .refreshed .container. Change the declarations below; shared overrides may load later. */ .refreshed .container { width:min(100% - 48px,1200px); } /* Standards content: reference cards and specification notes. */ /* EDIT BLOCK: .refreshed .section,.refreshed .standards-section. Change the declarations below; shared overrides may load later. */ .refreshed .section,.refreshed .standards-section { padding:88px 0; } /* Navigation and header: layout, dropdown visibility and navigation controls. */ /* EDIT BLOCK: .refreshed .section-heading,.refreshed .section-header. Change the declarations below; shared overrides may load later. */ .refreshed .section-heading,.refreshed .section-header { max-width:800px; margin:0 0 40px; text-align:left; } /* EDIT BLOCK: .refreshed .section-heading p,.refreshed .section-header p. Change the declarations below; shared overrides may load later. */ .refreshed .section-heading p,.refreshed .section-header p { margin:0; max-width:700px; } /* EDIT BLOCK: .refreshed :is(.section-heading,.section-header) h2. Change the declarations below; shared overrides may load later. */ .refreshed :is(.section-heading,.section-header) h2 { font-size:clamp(28px,3.3vw,42px); line-height:1.18; margin-bottom:18px; } /* Shared visual foundation: content width, section spacing, colors and headings. */ /* EDIT BLOCK: .refreshed :is(.eyebrow,.section-tag). Change the declarations below; shared overrides may load later. */ .refreshed :is(.eyebrow,.section-tag) { display:block; color:#986300; font-size:11px; font-weight:700; letter-spacing:.16em; margin-bottom:14px; } /* Navigation and header: layout, dropdown visibility and navigation controls. */ /* EDIT BLOCK: .refreshed-header. Change the declarations below; shared overrides may load later. */ .refreshed-header { position:sticky; top:0; background:#fff; border-bottom:1px solid #e0e7eb; z-index:1000; } /* EDIT BLOCK: .refreshed-header-inner. Change the declarations below; shared overrides may load later. */ .refreshed-header-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:88px; } /* EDIT BLOCK: .refreshed-header .logo-img. Change the declarations below; shared overrides may load later. */ .refreshed-header .logo-img { width:176px; } /* EDIT BLOCK: .refreshed-nav. Change the declarations below; shared overrides may load later. */ .refreshed-nav { display:flex; align-items:center; gap:25px; font-size:15px; font-weight:600; } /* Responsive or accessibility override: @media (min-width:1051px) and (max-width:1200px). Rules inside this block apply only when its condition matches. */ /* EDIT BLOCK: @media (min-width:1051px) and (max-width:1200px). Change the declarations below; shared overrides may load later. */ @media (min-width:1051px) and (max-width:1200px) { .refreshed-header-inner { flex-wrap:wrap; padding:16px 0; gap:14px; } .refreshed-nav { order:3; width:100%; justify-content:space-between; gap:14px; } .nav-parent { padding:8px 0; } } /* Navigation and header: layout, dropdown visibility and navigation controls. */ /* EDIT BLOCK: .nav-group. Change the declarations below; shared overrides may load later. */ .nav-group { position:relative; } /* EDIT BLOCK: .nav-parent. Change the declarations below; shared overrides may load later. */ .nav-parent { display:flex; align-items:center; gap:9px; padding:24px 0; } /* EDIT BLOCK: .nav-group > .nav-panel. Change the declarations below; shared overrides may load later. */ .nav-group > .nav-panel { display:none; } /* EDIT BLOCK: .nav-group:focus-within > .nav-panel. Change the declarations below; shared overrides may load later. */ .nav-group:focus-within > .nav-panel { display:block; } /* Responsive or accessibility override: @media (hover:hover). Rules inside this block apply only when its condition matches. */ /* EDIT BLOCK: @media (hover:hover). Change the declarations below; shared overrides may load later. */ @media (hover:hover) { .nav-group:hover > .nav-panel { display:block; } } /* Navigation and header: layout, dropdown visibility and navigation controls. */ /* EDIT BLOCK: .nav-group.dismissed > .nav-panel. Change the declarations below; shared overrides may load later. */ .nav-group.dismissed > .nav-panel { display:none; } /* EDIT BLOCK: .nav-panel. Change the declarations below; shared overrides may load later. */ .nav-panel { position:absolute; top:100%; left:-20px; width:245px; max-height:70vh; overflow:auto; padding:10px; border:1px solid #e0e7eb; border-top:3px solid var(--accent); border-radius:0 0 12px 12px; box-shadow:0 18px 38px #09243826; background:white; } /* EDIT BLOCK: .nav-panel a. Change the declarations below; shared overrides may load later. */ .nav-panel a { display:block; padding:10px 12px; border-radius:6px; color:var(--primary-dark); } /* EDIT BLOCK: .nav-panel a:hover,.nav-panel a:focus-visible. Change the declarations below; shared overrides may load later. */ .nav-panel a:hover,.nav-panel a:focus-visible { background:#f4efe3; } /* EDIT BLOCK: .refresh-quote. Change the declarations below; shared overrides may load later. */ .refresh-quote { display:inline-flex; gap:20px; align-items:center; justify-content:center; background:#efb648; color:#092438; padding:13px 20px; border-radius:7px; font-size:13px; font-weight:700; } /* EDIT BLOCK: .refresh-quote:hover. Change the declarations below; shared overrides may load later. */ .refresh-quote:hover { background:#ffce6d; } /* EDIT BLOCK: .refreshed-header .refresh-quote. Change the declarations below; shared overrides may load later. */ .refreshed-header .refresh-quote { font-size:15px; } /* Hero section: introductory text, illustration layout and primary actions. */ /* EDIT BLOCK: .refreshed :is(.hero,.elbow-hero). Change the declarations below; shared overrides may load later. */ .refreshed :is(.hero,.elbow-hero) { padding:76px 0 82px; background:radial-gradient(ellipse at 90% 80%,#21516a55,transparent 50%),#092438; } /* EDIT BLOCK: .refreshed :is(.hero-grid,.elbow-hero-grid). Change the declarations below; shared overrides may load later. */ .refreshed :is(.hero-grid,.elbow-hero-grid) { grid-template-columns:1.1fr 1fr; gap:56px; } /* EDIT BLOCK: .refreshed :is(.hero-image-wrap,.elbow-hero-image-wrap,.product-hero-image). Change the declarations below; shared overrides may load later. */ .refreshed :is(.hero-image-wrap,.elbow-hero-image-wrap,.product-hero-image) { width:100%; max-width:545px; } /* EDIT BLOCK: .refreshed :is(.technical-hero-image,.product-hero-image img). Change the declarations below; shared overrides may load later. */ .refreshed :is(.technical-hero-image,.product-hero-image img) { width:100%; height:auto; aspect-ratio:520 / 358; object-fit:contain; max-width:545px; } /* EDIT BLOCK: .refreshed :is(.hero,.elbow-hero) h1. Change the declarations below; shared overrides may load later. */ .refreshed :is(.hero,.elbow-hero) h1 { font-size:clamp(38px,4.5vw,60px); line-height:1.12; font-weight:700; letter-spacing:-.045em; color:white; margin:20px 0 24px; } /* EDIT BLOCK: .refreshed :is(.hero,.elbow-hero) h1 span. Change the declarations below; shared overrides may load later. */ .refreshed :is(.hero,.elbow-hero) h1 span { color:#f0ba4f; } /* EDIT BLOCK: .refreshed :is(.hero,.elbow-hero) p. Change the declarations below; shared overrides may load later. */ .refreshed :is(.hero,.elbow-hero) p { color:#c3d3de; font-size:15px; line-height:1.85; margin-bottom:28px; } /* EDIT BLOCK: .refreshed :is(.hero,.elbow-hero) .eyebrow,.hero-kicker. Change the declarations below; shared overrides may load later. */ .refreshed :is(.hero,.elbow-hero) .eyebrow,.hero-kicker { color:#f0ba4f; font-size:10px; letter-spacing:.14em; font-weight:700; display:block; } /* EDIT BLOCK: .hero-back. Change the declarations below; shared overrides may load later. */ .hero-back { display:block; color:#c3d3de; font-size:12px; margin-bottom:18px; } /* EDIT BLOCK: .refreshed :is(.hero,.elbow-hero) .btn-primary. Change the declarations below; shared overrides may load later. */ .refreshed :is(.hero,.elbow-hero) .btn-primary { background:#efb648; color:#092438; box-shadow:none; } /* EDIT BLOCK: .refreshed :is(.hero,.elbow-hero) .btn-secondary. Change the declarations below; shared overrides may load later. */ .refreshed :is(.hero,.elbow-hero) .btn-secondary { background:transparent; color:white; border-color:#7c94a4; } /* EDIT BLOCK: .refreshed .hero-trust. Change the declarations below; shared overrides may load later. */ .refreshed .hero-trust { gap:12px 18px; } /* Component styling: .refreshed .trust-item. */ /* EDIT BLOCK: .refreshed .trust-item. Change the declarations below; shared overrides may load later. */ .refreshed .trust-item { color:#cad9e3; font-size:11px; } /* Hero section: introductory text, illustration layout and primary actions. */ /* EDIT BLOCK: .refreshed .hero-image-wrap::before,.refreshed .hero::after,.refreshed .elbow-hero::before. Change the declarations below; shared overrides may load later. */ .refreshed .hero-image-wrap::before,.refreshed .hero::after,.refreshed .elbow-hero::before { display:none; } /* EDIT BLOCK: .refreshed .elbow-hero-visual. Change the declarations below; shared overrides may load later. */ .refreshed .elbow-hero-visual { order:initial; } /* Component styling: .refreshed .about-grid,.refreshed .overview-grid. */ /* EDIT BLOCK: .refreshed .about-grid,.refreshed .overview-grid. Change the declarations below; shared overrides may load later. */ .refreshed .about-grid,.refreshed .overview-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:48px; align-items:center; } /* Component styling: .refreshed .about-content p,.refreshed .overview-content p. */ /* EDIT BLOCK: .refreshed .about-content p,.refreshed .overview-content p. Change the declarations below; shared overrides may load later. */ .refreshed .about-content p,.refreshed .overview-content p { font-size:14px; margin-bottom:18px; } /* Reusable content grids and cards: spacing, borders and hover treatment. */ /* EDIT BLOCK: .refreshed .stats-card. Change the declarations below; shared overrides may load later. */ .refreshed .stats-card { background:#123c56; padding:34px; border-radius:18px; box-shadow:0 18px 38px #09243815; } /* EDIT BLOCK: .refreshed .stats-card .stats-label. Change the declarations below; shared overrides may load later. */ .refreshed .stats-card .stats-label { color:#f0ba4f; } /* Component styling: .refreshed .overview-points. */ /* EDIT BLOCK: .refreshed .overview-points. Change the declarations below; shared overrides may load later. */ .refreshed .overview-points { display:grid; gap:0; border:1px solid #dfe6eb; border-radius:16px; padding:14px 26px; background:white; } /* Component styling: .refreshed .overview-point. */ /* EDIT BLOCK: .refreshed .overview-point. Change the declarations below; shared overrides may load later. */ .refreshed .overview-point { padding:15px 0; display:flex; align-items:center; gap:14px; border-bottom:1px solid #e5eaee; font-size:13px; } /* Component styling: .refreshed .overview-point:last-child. */ /* EDIT BLOCK: .refreshed .overview-point:last-child. Change the declarations below; shared overrides may load later. */ .refreshed .overview-point:last-child { border:0; } /* Component styling: .refreshed .overview-point i. */ /* EDIT BLOCK: .refreshed .overview-point i. Change the declarations below; shared overrides may load later. */ .refreshed .overview-point i { color:#986300; } /* Application and requirement cards: readable supporting information. */ /* EDIT BLOCK: .refreshed :is(.products-section,.elbow-types-section,.elbow-applications-section). Change the declarations below; shared overrides may load later. */ .refreshed :is(.products-section,.elbow-types-section,.elbow-applications-section) { background:#f2f5f7; } /* EDIT BLOCK: .refreshed :is(.product-card,.elbow-type-card,.elbow-application-card,.industry-card,.why-card). Change the declarations below; shared overrides may load later. */ .refreshed :is(.product-card,.elbow-type-card,.elbow-application-card,.industry-card,.why-card) { background:white; border:1px solid #dfe6eb; border-radius:16px; padding:28px; } /* Reusable content grids and cards: spacing, borders and hover treatment. */ /* EDIT BLOCK: .refreshed .product-card. Change the declarations below; shared overrides may load later. */ .refreshed .product-card { min-height:300px; } /* EDIT BLOCK: .refreshed .product-card h3. Change the declarations below; shared overrides may load later. */ .refreshed .product-card h3 { font-size:23px; } /* EDIT BLOCK: .refreshed .product-card p. Change the declarations below; shared overrides may load later. */ .refreshed .product-card p { font-size:13px; } /* EDIT BLOCK: .refreshed .card-link. Change the declarations below; shared overrides may load later. */ .refreshed .card-link { padding-top:22px; } /* Material cards: grade labels, badges and responsive directory layouts. */ /* EDIT BLOCK: .refreshed :is(.material-card,.elbow-material-card). Change the declarations below; shared overrides may load later. */ .refreshed :is(.material-card,.elbow-material-card) { display:block; padding:24px; background:white; border:1px solid #dfe6eb; border-radius:14px; } /* EDIT BLOCK: .refreshed :is(.material-card,.elbow-material-card) h3. Change the declarations below; shared overrides may load later. */ .refreshed :is(.material-card,.elbow-material-card) h3 { font-size:17px; margin-top:16px; } /* EDIT BLOCK: .refreshed .material-card > span. Change the declarations below; shared overrides may load later. */ .refreshed .material-card > span { color:#526778; font-size:11px; } /* EDIT BLOCK: .refreshed .material-card > .material-explore. Change the declarations below; shared overrides may load later. */ .refreshed .material-card > .material-explore { border:0; font-weight:700; color:#123c56; } /* EDIT BLOCK: .refreshed .elbow-material-grid. Change the declarations below; shared overrides may load later. */ .refreshed .elbow-material-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; } /* Standards content: reference cards and specification notes. */ /* EDIT BLOCK: .refreshed :is(.standard-card,.elbow-standard-card). Change the declarations below; shared overrides may load later. */ .refreshed :is(.standard-card,.elbow-standard-card) { background:white; padding:28px; gap:20px; border-radius:14px; } /* EDIT BLOCK: .refreshed .standards-grid. Change the declarations below; shared overrides may load later. */ .refreshed .standards-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } /* EDIT BLOCK: .refreshed .standard-card h3. Change the declarations below; shared overrides may load later. */ .refreshed .standard-card h3 { font-size:19px; } /* EDIT BLOCK: .refreshed .standard-card p. Change the declarations below; shared overrides may load later. */ .refreshed .standard-card p { font-size:13px; } /* EDIT BLOCK: .refreshed .elbow-standards-grid. Change the declarations below; shared overrides may load later. */ .refreshed .elbow-standards-grid { max-width:none; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; } /* EDIT BLOCK: .refreshed .elbow-standard-card. Change the declarations below; shared overrides may load later. */ .refreshed .elbow-standard-card { min-height:176px; } /* EDIT BLOCK: .refreshed .elbow-standard-code. Change the declarations below; shared overrides may load later. */ .refreshed .elbow-standard-code { color:#986300; font-size:11px; letter-spacing:.12em; } /* EDIT BLOCK: .refreshed .standards-note. Change the declarations below; shared overrides may load later. */ .refreshed .standards-note { background:#123c56; border:0; align-items:center; } /* EDIT BLOCK: .refreshed .standards-note p,.refreshed .standards-link. Change the declarations below; shared overrides may load later. */ .refreshed .standards-note p,.refreshed .standards-link { color:white; } /* EDIT BLOCK: .refreshed .standards-link. Change the declarations below; shared overrides may load later. */ .refreshed .standards-link { white-space:normal; } /* Application and requirement cards: readable supporting information. */ /* EDIT BLOCK: .refreshed .elbow-application-icon. Change the declarations below; shared overrides may load later. */ .refreshed .elbow-application-icon { margin-bottom:20px; } /* Component styling: .refreshed .type-tags. */ /* EDIT BLOCK: .refreshed .type-tags. Change the declarations below; shared overrides may load later. */ .refreshed .type-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; } /* Component styling: .refreshed .type-tags span. */ /* EDIT BLOCK: .refreshed .type-tags span. Change the declarations below; shared overrides may load later. */ .refreshed .type-tags span { background:#eef3f6; padding:5px 9px; border-radius:4px; color:#456073; font-size:11px; } /* Application and requirement cards: readable supporting information. */ /* EDIT BLOCK: .refreshed .quality-grid. Change the declarations below; shared overrides may load later. */ .refreshed .quality-grid { display:grid; grid-template-columns:1.2fr 1fr; align-items:center; gap:48px; } /* EDIT BLOCK: .refreshed .quality-content h2. Change the declarations below; shared overrides may load later. */ .refreshed .quality-content h2 { font-size:clamp(28px,3vw,40px); margin-bottom:20px; } /* EDIT BLOCK: .refreshed .quality-list. Change the declarations below; shared overrides may load later. */ .refreshed .quality-list { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:26px; font-size:13px; } /* EDIT BLOCK: .refreshed .quality-list i. Change the declarations below; shared overrides may load later. */ .refreshed .quality-list i { color:#986300; margin-right:8px; } /* EDIT BLOCK: .refreshed .quality-card. Change the declarations below; shared overrides may load later. */ .refreshed .quality-card { padding:48px 34px; background:#123c56; border-radius:20px; color:white; } /* EDIT BLOCK: .refreshed .quality-card > i. Change the declarations below; shared overrides may load later. */ .refreshed .quality-card > i { color:#f0ba4f; font-size:36px; } /* EDIT BLOCK: .refreshed .quality-card strong. Change the declarations below; shared overrides may load later. */ .refreshed .quality-card strong { display:block; font-size:26px; margin:20px 0 12px; } /* EDIT BLOCK: .refreshed .quality-card span. Change the declarations below; shared overrides may load later. */ .refreshed .quality-card span { color:#c3d3de; } /* Call to action: highlighted next-step section and enquiry links. */ /* EDIT BLOCK: .refreshed .cta-section. Change the declarations below; shared overrides may load later. */ .refreshed .cta-section { background:#eeb748; padding:60px 0; } /* EDIT BLOCK: .refreshed .cta-section::before,.refreshed .cta-section::after. Change the declarations below; shared overrides may load later. */ .refreshed .cta-section::before,.refreshed .cta-section::after { display:none; } /* EDIT BLOCK: .refreshed .cta-section :is(h2,p,.eyebrow). Change the declarations below; shared overrides may load later. */ .refreshed .cta-section :is(h2,p,.eyebrow) { color:#092438; } /* EDIT BLOCK: .refreshed .cta-section .btn-light. Change the declarations below; shared overrides may load later. */ .refreshed .cta-section .btn-light { background:#092438; color:white; } /* Footer and India clock: shared spacing, colors and readable time display. */ /* EDIT BLOCK: .refreshed-footer. Change the declarations below; shared overrides may load later. */ .refreshed-footer { background:#061c2c; padding:56px 0 0; } /* EDIT BLOCK: .footer-lead. Change the declarations below; shared overrides may load later. */ .footer-lead { border-bottom:1px solid #ffffff22; padding-bottom:36px; margin-bottom:42px; } /* EDIT BLOCK: .refreshed .footer-lead h2. Change the declarations below; shared overrides may load later. */ .refreshed .footer-lead h2 { color:white; font-size:clamp(27px,3vw,38px); margin:12px 0 24px; } /* EDIT BLOCK: .refreshed .footer-lead .eyebrow. Change the declarations below; shared overrides may load later. */ .refreshed .footer-lead .eyebrow { color:#f0ba4f; } /* EDIT BLOCK: .refreshed .footer-column a. Change the declarations below; shared overrides may load later. */ .refreshed .footer-column a { display:block; margin-bottom:9px; } /* EDIT BLOCK: .refreshed .footer-column p,.refreshed .footer-company p. Change the declarations below; shared overrides may load later. */ .refreshed .footer-column p,.refreshed .footer-company p { color:#a7bdcd; font-size:13px; } /* EDIT BLOCK: .refreshed .footer-column h3. Change the declarations below; shared overrides may load later. */ .refreshed .footer-column h3 { color:white; } /* EDIT BLOCK: .refreshed .footer-grid. Change the declarations below; shared overrides may load later. */ .refreshed .footer-grid { grid-template-columns:1.2fr .8fr .8fr 1.2fr; gap:36px; } /* EDIT BLOCK: .refreshed .live-clock strong. Change the declarations below; shared overrides may load later. */ .refreshed .live-clock strong { font-variant-numeric:tabular-nums; } /* Responsive or accessibility override: @media(max-width:1050px). Rules inside this block apply only when its condition matches. */ /* EDIT BLOCK: @media(max-width:1050px). Change the declarations below; shared overrides may load later. */ @media(max-width:1050px) { .refreshed-header-inner { flex-wrap:wrap; padding:16px 0; gap:14px; } .refreshed-nav { order:3; width:100%; justify-content:space-between; gap:14px; } .nav-parent { padding:8px 0; } .refreshed :is(.hero-grid,.elbow-hero-grid,.product-hero-grid,.catalog-hero-grid) { grid-template-columns:1fr; gap:32px; } .refreshed :is(.hero-image-wrap,.elbow-hero-image-wrap,.product-hero-image,.catalog-drawing) { max-width:545px; } .refreshed .elbow-material-grid,.refreshed .materials-grid,.refreshed .standards-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .refreshed .standard-card { flex-direction:column; } .refreshed .footer-grid { grid-template-columns:1fr 1fr; } } /* Responsive or accessibility override: @media(max-width:760px). Rules inside this block apply only when its condition matches. */ /* EDIT BLOCK: @media(max-width:760px). Change the declarations below; shared overrides may load later. */ @media(max-width:760px) { .refreshed .container { width:calc(100% - 32px); } .refreshed .section,.refreshed .standards-section { padding:56px 0; } .refreshed :is(.hero-grid,.elbow-hero-grid,.about-grid,.overview-grid,.quality-grid) { grid-template-columns:1fr; text-align:left; gap:32px; } .refreshed :is(.hero,.elbow-hero) { padding:44px 0; } .refreshed .hero-visual { order:initial; } .refreshed .hero-actions,.refreshed .hero-trust,.refreshed .elbow-hero-actions { justify-content:flex-start; } .refreshed .product-grid,.refreshed .elbow-types-grid { grid-template-columns:1fr 1fr; } .refreshed .elbow-standards-grid { grid-template-columns:1fr; } .refreshed .nav-panel { position:fixed; top:auto; left:16px; right:16px; width:auto; margin-top:8px; } } /* Responsive or accessibility override: @media(max-width:520px). Rules inside this block apply only when its condition matches. */ /* EDIT BLOCK: @media(max-width:520px). Change the declarations below; shared overrides may load later. */ @media(max-width:520px) { .refreshed-header .logo-img { width:142px; } .refreshed-header .refresh-quote { padding:10px 12px; font-size:13px; } .refreshed-nav { font-size:13px; gap:8px; flex-wrap:wrap; } .refreshed :is(.product-grid,.elbow-types-grid,.elbow-material-grid,.materials-grid,.standards-grid,.quality-list,.footer-grid,.feature-list) { grid-template-columns:1fr; } .refreshed .product-card { min-height:0; } .refreshed .standard-card { flex-direction:row; } .refreshed .hero-content { text-align:left; } .refreshed .hero-actions { align-items:stretch; } }