/* ==================================================================== */ /* System Style Definitions */ /* ==================================================================== */ @media all { *#dm div.dmContent h1, *#dm div.dmFooter h1 { color:rgb(102,102,102); } *#dm div.dmRespCol>* { line-height:normal; } *.dmDesktopBody *#dm ul.dmNavWrapper>li>a *.navText, *.dmDesktopBody *#dm ul.dmNavWrapper>li>a *.navItemText, *.dmDesktopBody *#dm ul.dmNavWrapper>li>*.dmNavigation { color:rgb(17,17,17); font-weight:normal; } *.dmDesktopBody *#dm ul.dmNavWrapper>li>a:hover, *.dmDesktopBody *#dm ul.dmNavWrapper>li>a.currentPage { border-color:rgb(17,17,17); } *.dmDesktopBody *#dm ul.dmNavWrapper>li.navItemSelectedServer>a *.navText, *.dmDesktopBody *#dm ul.dmNavWrapper>li.dmNavItemSelected>a *.navItemText, *.dmDesktopBody *#dm ul.dmNavWrapper>li.dmNavItemSelected>*.navItemText { font-weight:bold; } *.stickyHeaderSpacer { height:112px; } #dm div.dmInner, #dm div.dmInner .dmRespCol, #dm .dmRespCol div.dmNewParagraph, #dm .ecwid .ec-store, #dm .dmform .dmforminput label, .dmPrettyList .listText, .dmPrettyList .itemName, #dm .dmRestaurantMenu .menuItemBox, .dmRestaurantMenu .menuItemName, .dmRestaurantMenu .menuItemDesc, .dmRestaurantMenu .menuItemPrice, .dmPhotoGallery .caption-text.caption-text, .dmGeoLocation a span.dmGeoMLocItemTitle, .dmGeoLocation a span.dmGeoMLocItemDetails, .map-popup-description { font-family: "Barlow Condensed", "Barlow Condensed Fallback"; color:var(--color_1); font-weight:600; } *#dm div.dmContent h1, *#dm div.dmFooter h1, *#dm div.p_hfcontainer h1, *#dm div.flex_hfcontainer h1, *#dm div.dm-title h1 { color:var(--color_1); direction:ltr; font-family: Poppins, "Poppins Fallback"; font-weight:700; font-style:normal; text-decoration:none; } *#dm div.dmContent .dmNewParagraph[data-version] h1, *#dm div.dmFooter .dmNewParagraph[data-version] h1, *#dm div.p_hfcontainer .dmNewParagraph[data-version] h1, *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h1, *#dm div.dm-title .dmNewParagraph[data-version] h1 { text-decoration:inherit; } *#dm div.dmContent .dmNewParagraph[data-version] h1 *, *#dm div.dmFooter .dmNewParagraph[data-version] h1 *, *#dm div.p_hfcontainer .dmNewParagraph[data-version] h1 *, *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h1 *, *#dm div.dm-title .dmNewParagraph[data-version] h1 * { text-decoration:none; } #dm div.dmNewParagraph p, #dm div.dmNewParagraph li { color:var(--color_1); direction:ltr; font-family: Poppins, "Poppins Fallback"; font-weight:400; font-style:normal; text-decoration:none; } *#dm div.dmNewParagraph a, *#dm .dmNewParagraph a, *#dm div.dmBlockElement a, *#dm .dmBlockElement a, *#dm .dmform a.fileUploadLink, .dmPrettyList .link:not(.dmWidget), *#dm .dmGeoLocation a.dmGeoSVSeeAll, *#dm .dmGeoLocation a.dmGeoSVGoToPage, *#dm .postDescription a, *#dm .blog-post-component a, *#dm .timeline-post a, *#dm .rteBlock a, .newPhotoGallery .photoGalleryViewAll.link, .dmTable a, *#dm .ecwid .ec-link:not(.breadcrumbs__link), .dmSignup a:not(.social-link) { color:var(--color_4); } *#dm div.dmContent h2, *#dm div.dmFooter h2, *#dm div.p_hfcontainer h2, *#dm div.flex_hfcontainer h2, *#dm div.dm-title h2 { color:var(--color_1); direction:ltr; font-family: Poppins, "Poppins Fallback"; font-weight:700; font-style:normal; text-decoration:none; } *#dm div.dmContent .dmNewParagraph[data-version] h2, *#dm div.dmFooter .dmNewParagraph[data-version] h2, *#dm div.p_hfcontainer .dmNewParagraph[data-version] h2, *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h2, *#dm div.dm-title .dmNewParagraph[data-version] h2 { text-decoration:inherit; } *#dm div.dmContent .dmNewParagraph[data-version] h2 *, *#dm div.dmFooter .dmNewParagraph[data-version] h2 *, *#dm div.p_hfcontainer .dmNewParagraph[data-version] h2 *, *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h2 *, *#dm div.dm-title .dmNewParagraph[data-version] h2 * { text-decoration:none; } *#dm div.dmContent h3, *#dm div.dmFooter h3, *#dm div.p_hfcontainer h3, *#dm div.flex_hfcontainer h3, *#dm div.dm-title h3 { color:var(--color_1); direction:ltr; font-family: Poppins, "Poppins Fallback"; font-weight:700; font-style:normal; text-decoration:none; } *#dm div.dmContent .dmNewParagraph[data-version] h3, *#dm div.dmFooter .dmNewParagraph[data-version] h3, *#dm div.p_hfcontainer .dmNewParagraph[data-version] h3, *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h3, *#dm div.dm-title .dmNewParagraph[data-version] h3 { text-decoration:inherit; } *#dm div.dmContent .dmNewParagraph[data-version] h3 *, *#dm div.dmFooter .dmNewParagraph[data-version] h3 *, *#dm div.p_hfcontainer .dmNewParagraph[data-version] h3 *, *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h3 *, *#dm div.dm-title .dmNewParagraph[data-version] h3 * { text-decoration:none; } *#dm div.dmContent h4, *#dm div.dmFooter h4, *#dm div.p_hfcontainer h4, *#dm div.flex_hfcontainer h4, *#dm div.dm-title h4 { color:var(--color_1); direction:ltr; font-family: Poppins, "Poppins Fallback"; font-weight:700; font-style:normal; text-decoration:none; } *#dm div.dmContent .dmNewParagraph[data-version] h4, *#dm div.dmFooter .dmNewParagraph[data-version] h4, *#dm div.p_hfcontainer .dmNewParagraph[data-version] h4, *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h4, *#dm div.dm-title .dmNewParagraph[data-version] h4 { text-decoration:inherit; } *#dm div.dmContent .dmNewParagraph[data-version] h4 *, *#dm div.dmFooter .dmNewParagraph[data-version] h4 *, *#dm div.p_hfcontainer .dmNewParagraph[data-version] h4 *, *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h4 *, *#dm div.dm-title .dmNewParagraph[data-version] h4 * { text-decoration:none; } *#dm div.dmContent h5, *#dm div.dmFooter h5, *#dm div.p_hfcontainer h5, *#dm div.flex_hfcontainer h5, *#dm div.dm-title h5 { color:var(--color_1); direction:ltr; font-family: Poppins, "Poppins Fallback"; font-weight:700; font-style:normal; text-decoration:none; } *#dm div.dmContent .dmNewParagraph[data-version] h5, *#dm div.dmFooter .dmNewParagraph[data-version] h5, *#dm div.p_hfcontainer .dmNewParagraph[data-version] h5, *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h5, *#dm div.dm-title .dmNewParagraph[data-version] h5 { text-decoration:inherit; } *#dm div.dmContent .dmNewParagraph[data-version] h5 *, *#dm div.dmFooter .dmNewParagraph[data-version] h5 *, *#dm div.p_hfcontainer .dmNewParagraph[data-version] h5 *, *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h5 *, *#dm div.dm-title .dmNewParagraph[data-version] h5 * { text-decoration:none; } *#dm div.dmContent h6, *#dm div.dmFooter h6, *#dm div.p_hfcontainer h6, *#dm div.flex_hfcontainer h6, *#dm div.dm-title h6 { color:var(--color_1); direction:ltr; font-family: Poppins, "Poppins Fallback"; font-weight:700; font-style:normal; text-decoration:none; } *#dm div.dmContent .dmNewParagraph[data-version] h6, *#dm div.dmFooter .dmNewParagraph[data-version] h6, *#dm div.p_hfcontainer .dmNewParagraph[data-version] h6, *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h6, *#dm div.dm-title .dmNewParagraph[data-version] h6 { text-decoration:inherit; } *#dm div.dmContent .dmNewParagraph[data-version] h6 *, *#dm div.dmFooter .dmNewParagraph[data-version] h6 *, *#dm div.p_hfcontainer .dmNewParagraph[data-version] h6 *, *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h6 *, *#dm div.dm-title .dmNewParagraph[data-version] h6 * { text-decoration:none; } *#dm div.dmNewParagraph a.visited, *#dm div.dmNewParagraph a:visited, *#dm .dmNewParagraph a.visited, *#dm .dmNewParagraph a:visited, *#dm div.dmBlockElement a.visited, *#dm div.dmBlockElement a:visited, *#dm .dmBlockElement a.visited, *#dm .dmBlockElement a:visited, *#dm .dmform a.fileUploadLink.visited, *#dm .dmform a.fileUploadLink:visited, .dmPrettyList .link:not(.dmWidget).visited, .dmPrettyList .link:not(.dmWidget):visited, *#dm .dmGeoLocation a.dmGeoSVSeeAll.visited, *#dm .dmGeoLocation a.dmGeoSVSeeAll:visited, *#dm .dmGeoLocation a.dmGeoSVGoToPage.visited, *#dm .dmGeoLocation a.dmGeoSVGoToPage:visited, *#dm .postDescription a.visited, *#dm .postDescription a:visited, *#dm .blog-post-component a.visited, *#dm .blog-post-component a:visited, *#dm .timeline-post a.visited, *#dm .timeline-post a:visited, *#dm .rteBlock a.visited, *#dm .rteBlock a:visited, .newPhotoGallery .photoGalleryViewAll.link.visited, .newPhotoGallery .photoGalleryViewAll.link:visited, .dmTable a.visited, .dmTable a:visited, *#dm .ecwid .ec-link:not(.breadcrumbs__link).visited, *#dm .ecwid .ec-link:not(.breadcrumbs__link):visited, .dmSignup a:not(.social-link).visited, .dmSignup a:not(.social-link):visited, .prev-next-links a.visited, .prev-next-links a:visited { color:var(--color_1); } *#dm div.dmNewParagraph a.hover, *#dm div.dmNewParagraph a:hover, *#dm .dmNewParagraph a.hover, *#dm .dmNewParagraph a:hover, *#dm div.dmBlockElement a.hover, *#dm div.dmBlockElement a:hover, *#dm .dmBlockElement a.hover, *#dm .dmBlockElement a:hover, *#dm .dmform a.fileUploadLink.hover, *#dm .dmform a.fileUploadLink:hover, .dmPrettyList .link:not(.dmWidget).hover, .dmPrettyList .link:not(.dmWidget):hover, *#dm .dmGeoLocation a.dmGeoSVSeeAll.hover, *#dm .dmGeoLocation a.dmGeoSVSeeAll:hover, *#dm .dmGeoLocation a.dmGeoSVGoToPage.hover, *#dm .dmGeoLocation a.dmGeoSVGoToPage:hover, *#dm .postDescription a.hover, *#dm .postDescription a:hover, *#dm .blog-post-component a.hover, *#dm .blog-post-component a:hover, *#dm .timeline-post a.hover, *#dm .timeline-post a:hover, *#dm .rteBlock a.hover, *#dm .rteBlock a:hover, .newPhotoGallery .photoGalleryViewAll.link.hover, .newPhotoGallery .photoGalleryViewAll.link:hover, .dmTable a.hover, .dmTable a:hover, *#dm .ecwid .ec-link:not(.breadcrumbs__link).hover, *#dm .ecwid .ec-link:not(.breadcrumbs__link):hover, .dmSignup a:not(.social-link).hover, .dmSignup a:not(.social-link):hover, .prev-next-links a.hover, .prev-next-links a:hover { color:var(--color_1); } *#dm div.dmNewParagraph a, *#dm .dmNewParagraph a, *#dm div.dmBlockElement a, *#dm .dmBlockElement a, *#dm .dmform a.fileUploadLink, .dmPrettyList .link:not(.dmWidget), *#dm .dmGeoLocation a.dmGeoSVSeeAll, *#dm .dmGeoLocation a.dmGeoSVGoToPage, *#dm .postDescription a, *#dm .blog-post-component a, *#dm .timeline-post a, *#dm .rteBlock a, .newPhotoGallery .photoGalleryViewAll.link, .dmTable a, *#dm .ecwid .ec-link:not(.breadcrumbs__link), .dmSignup a:not(.social-link), .prev-next-links a { color:var(--color_1); } #dmRoot #dm div.dmNewParagraph p, #dmRoot #dm div.dmNewParagraph li { color:rgba(27,34,41,1); direction:ltr; font-family: Barlow, "Barlow Fallback"; font-weight:400; font-style:normal; text-decoration:none; line-height:1.6; } #dmRoot *#dm div.dmContent h1, #dmRoot *#dm div.dmFooter h1, #dmRoot *#dm div.p_hfcontainer h1, #dmRoot *#dm div.flex_hfcontainer h1, #dmRoot *#dm div.dm-title h1 { color:rgba(27,34,41,1); direction:ltr; font-family: "Barlow Condensed", "Barlow Condensed Fallback"; font-weight:600; font-style:normal; text-decoration:none; letter-spacing:initial; } #dmRoot *#dm div.dmContent .dmNewParagraph[data-version] h1, #dmRoot *#dm div.dmFooter .dmNewParagraph[data-version] h1, #dmRoot *#dm div.p_hfcontainer .dmNewParagraph[data-version] h1, #dmRoot *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h1, #dmRoot *#dm div.dm-title .dmNewParagraph[data-version] h1 { text-decoration:inherit; } #dmRoot *#dm div.dmContent .dmNewParagraph[data-version] h1 *, #dmRoot *#dm div.dmFooter .dmNewParagraph[data-version] h1 *, #dmRoot *#dm div.p_hfcontainer .dmNewParagraph[data-version] h1 *, #dmRoot *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h1 *, #dmRoot *#dm div.dm-title .dmNewParagraph[data-version] h1 * { text-decoration:none; } #dmRoot *#dm div.dmContent h2, #dmRoot *#dm div.dmFooter h2, #dmRoot *#dm div.p_hfcontainer h2, #dmRoot *#dm div.flex_hfcontainer h2, #dmRoot *#dm div.dm-title h2 { color:rgba(27,34,41,1); direction:ltr; font-family: "Barlow Condensed", "Barlow Condensed Fallback"; font-weight:600; font-style:normal; text-decoration:none; } #dmRoot *#dm div.dmContent .dmNewParagraph[data-version] h2, #dmRoot *#dm div.dmFooter .dmNewParagraph[data-version] h2, #dmRoot *#dm div.p_hfcontainer .dmNewParagraph[data-version] h2, #dmRoot *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h2, #dmRoot *#dm div.dm-title .dmNewParagraph[data-version] h2 { text-decoration:inherit; } #dmRoot *#dm div.dmContent .dmNewParagraph[data-version] h2 *, #dmRoot *#dm div.dmFooter .dmNewParagraph[data-version] h2 *, #dmRoot *#dm div.p_hfcontainer .dmNewParagraph[data-version] h2 *, #dmRoot *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h2 *, #dmRoot *#dm div.dm-title .dmNewParagraph[data-version] h2 * { text-decoration:none; } #dmRoot *#dm div.dmContent h3, #dmRoot *#dm div.dmFooter h3, #dmRoot *#dm div.p_hfcontainer h3, #dmRoot *#dm div.flex_hfcontainer h3, #dmRoot *#dm div.dm-title h3 { color:rgba(27,34,41,1); direction:ltr; font-family: "Barlow Condensed", "Barlow Condensed Fallback"; font-weight:600; font-style:normal; text-decoration:none; } #dmRoot *#dm div.dmContent .dmNewParagraph[data-version] h3, #dmRoot *#dm div.dmFooter .dmNewParagraph[data-version] h3, #dmRoot *#dm div.p_hfcontainer .dmNewParagraph[data-version] h3, #dmRoot *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h3, #dmRoot *#dm div.dm-title .dmNewParagraph[data-version] h3 { text-decoration:inherit; } #dmRoot *#dm div.dmContent .dmNewParagraph[data-version] h3 *, #dmRoot *#dm div.dmFooter .dmNewParagraph[data-version] h3 *, #dmRoot *#dm div.p_hfcontainer .dmNewParagraph[data-version] h3 *, #dmRoot *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h3 *, #dmRoot *#dm div.dm-title .dmNewParagraph[data-version] h3 * { text-decoration:none; } #dmRoot *#dm div.dmContent h4, #dmRoot *#dm div.dmFooter h4, #dmRoot *#dm div.p_hfcontainer h4, #dmRoot *#dm div.flex_hfcontainer h4, #dmRoot *#dm div.dm-title h4 { color:rgba(27,34,41,1); direction:ltr; font-family: "Barlow Condensed", "Barlow Condensed Fallback"; font-weight:600; font-style:normal; text-decoration:none; } #dmRoot *#dm div.dmContent .dmNewParagraph[data-version] h4, #dmRoot *#dm div.dmFooter .dmNewParagraph[data-version] h4, #dmRoot *#dm div.p_hfcontainer .dmNewParagraph[data-version] h4, #dmRoot *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h4, #dmRoot *#dm div.dm-title .dmNewParagraph[data-version] h4 { text-decoration:inherit; } #dmRoot *#dm div.dmContent .dmNewParagraph[data-version] h4 *, #dmRoot *#dm div.dmFooter .dmNewParagraph[data-version] h4 *, #dmRoot *#dm div.p_hfcontainer .dmNewParagraph[data-version] h4 *, #dmRoot *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h4 *, #dmRoot *#dm div.dm-title .dmNewParagraph[data-version] h4 * { text-decoration:none; } #dmRoot *#dm div.dmContent h5, #dmRoot *#dm div.dmFooter h5, #dmRoot *#dm div.p_hfcontainer h5, #dmRoot *#dm div.flex_hfcontainer h5, #dmRoot *#dm div.dm-title h5 { color:rgb(27,34,41); direction:ltr; font-family: "Barlow Condensed", "Barlow Condensed Fallback"; font-weight:600; font-style:normal; text-decoration:none; } #dmRoot *#dm div.dmContent .dmNewParagraph[data-version] h5, #dmRoot *#dm div.dmFooter .dmNewParagraph[data-version] h5, #dmRoot *#dm div.p_hfcontainer .dmNewParagraph[data-version] h5, #dmRoot *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h5, #dmRoot *#dm div.dm-title .dmNewParagraph[data-version] h5 { text-decoration:inherit; } #dmRoot *#dm div.dmContent .dmNewParagraph[data-version] h5 *, #dmRoot *#dm div.dmFooter .dmNewParagraph[data-version] h5 *, #dmRoot *#dm div.p_hfcontainer .dmNewParagraph[data-version] h5 *, #dmRoot *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h5 *, #dmRoot *#dm div.dm-title .dmNewParagraph[data-version] h5 * { text-decoration:none; } #dmRoot *#dm div.dmContent h6, #dmRoot *#dm div.dmFooter h6, #dmRoot *#dm div.p_hfcontainer h6, #dmRoot *#dm div.flex_hfcontainer h6, #dmRoot *#dm div.dm-title h6 { color:rgb(27,34,41); direction:ltr; font-family: "Barlow Condensed", "Barlow Condensed Fallback"; font-weight:600; font-style:normal; text-decoration:none; } #dmRoot *#dm div.dmContent .dmNewParagraph[data-version] h6, #dmRoot *#dm div.dmFooter .dmNewParagraph[data-version] h6, #dmRoot *#dm div.p_hfcontainer .dmNewParagraph[data-version] h6, #dmRoot *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h6, #dmRoot *#dm div.dm-title .dmNewParagraph[data-version] h6 { text-decoration:inherit; } #dmRoot *#dm div.dmContent .dmNewParagraph[data-version] h6 *, #dmRoot *#dm div.dmFooter .dmNewParagraph[data-version] h6 *, #dmRoot *#dm div.p_hfcontainer .dmNewParagraph[data-version] h6 *, #dmRoot *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h6 *, #dmRoot *#dm div.dm-title .dmNewParagraph[data-version] h6 * { text-decoration:none; } } @media (min-width:1025px) { *#dm div.dmContent h3, *#dm div.dmFooter h3, *#dm div.flex_hfcontainer h3, *#dm div.dm-title h3 { font-size:18px; } #dm div.dmNewParagraph p { font-size:18px; } *#dm div.dmContent h6, *#dm div.dmFooter h6, *#dm div.flex_hfcontainer h6, *#dm div.dm-title h6 { font-size:16px; } #dm DIV.dmOuter DIV.dmInner, #dm DIV.dmOuter DIV#dmSlideRightNavRight { background-image:none; } #dm div.dmInner, #dm div.dmInner .dmRespCol, #dm .dmRespCol div.dmNewParagraph, #dm .ecwid .ec-store, #dm .dmform .dmforminput label, .dmPrettyList .listText, .dmPrettyList .itemName, #dm .dmRestaurantMenu .menuItemBox, .dmRestaurantMenu .menuItemName, .dmRestaurantMenu .menuItemDesc, .dmRestaurantMenu .menuItemPrice, .dmPhotoGallery .caption-text.caption-text, .dmGeoLocation a span.dmGeoMLocItemTitle, .dmGeoLocation a span.dmGeoMLocItemDetails, .map-popup-description { font-size:16px; } #dm div.dmNewParagraph p, #dm div.dmNewParagraph li { font-size:18px; } *#dm div.dmContent h1, *#dm div.dmFooter h1, *#dm div.p_hfcontainer h1, *#dm div.flex_hfcontainer h1, *#dm div.dm-title h1 { font-size:50px; } *#dm div.dmContent h2, *#dm div.dmFooter h2, *#dm div.p_hfcontainer h2, *#dm div.flex_hfcontainer h2, *#dm div.dm-title h2 { font-size:32px; } *#dm div.dmContent h3, *#dm div.dmFooter h3, *#dm div.p_hfcontainer h3, *#dm div.flex_hfcontainer h3, *#dm div.dm-title h3 { font-size:25px; } *#dm div.dmContent h4, *#dm div.dmFooter h4, *#dm div.p_hfcontainer h4, *#dm div.flex_hfcontainer h4, *#dm div.dm-title h4 { font-size:20px; } *#dm div.dmContent h5, *#dm div.dmFooter h5, *#dm div.p_hfcontainer h5, *#dm div.flex_hfcontainer h5, *#dm div.dm-title h5 { font-size:15px; } *#dm div.dmContent h6, *#dm div.dmFooter h6, *#dm div.p_hfcontainer h6, *#dm div.flex_hfcontainer h6, *#dm div.dm-title h6 { font-size:14px; } #dmRoot *#dm div.dmContent h2, #dmRoot *#dm div.dmFooter h2, #dmRoot *#dm div.p_hfcontainer h2, #dmRoot *#dm div.flex_hfcontainer h2, #dmRoot *#dm div.dm-title h2 { font-size:50px; line-height:1; } #dmRoot *#dm div.dmContent h3, #dmRoot *#dm div.dmFooter h3, #dmRoot *#dm div.p_hfcontainer h3, #dmRoot *#dm div.flex_hfcontainer h3, #dmRoot *#dm div.dm-title h3 { font-size:22px; } #dmRoot *#dm div.dmContent h5, #dmRoot *#dm div.dmFooter h5, #dmRoot *#dm div.p_hfcontainer h5, #dmRoot *#dm div.flex_hfcontainer h5, #dmRoot *#dm div.dm-title h5 { font-size:16px; } #dmRoot #dm div.dmNewParagraph p, #dmRoot #dm div.dmNewParagraph li { font-size:17px; } #dmRoot *#dm div.dmContent h1, #dmRoot *#dm div.dmFooter h1, #dmRoot *#dm div.p_hfcontainer h1, #dmRoot *#dm div.flex_hfcontainer h1, #dmRoot *#dm div.dm-title h1 { font-size:64px; line-height:1; } #dmRoot *#dm div.dmContent h4, #dmRoot *#dm div.dmFooter h4, #dmRoot *#dm div.p_hfcontainer h4, #dmRoot *#dm div.flex_hfcontainer h4, #dmRoot *#dm div.dm-title h4 { font-size:20px; } } @media (min-width:768px) and (max-width:1024px) { *#dm div.dmContent h3, *#dm div.dmFooter h3, *#dm div.flex_hfcontainer h3, *#dm div.dm-title h3 { font-size:18px; } #dm div.dmNewParagraph p { font-size:18px; } *#dm div.dmContent h6, *#dm div.dmFooter h6, *#dm div.flex_hfcontainer h6, *#dm div.dm-title h6 { font-size:16px; } *#dm div.dmContent h6, *#dm div.dmFooter h6, *#dm div.p_hfcontainer h6, *#dm div.flex_hfcontainer h6, *#dm div.dm-title h6 { font-size:14px; } #dm div.dmInner, #dm div.dmInner .dmRespCol, #dm .dmRespCol div.dmNewParagraph, #dm .ecwid .ec-store, #dm .dmform .dmforminput label, .dmPrettyList .listText, .dmPrettyList .itemName, #dm .dmRestaurantMenu .menuItemBox, .dmRestaurantMenu .menuItemName, .dmRestaurantMenu .menuItemDesc, .dmRestaurantMenu .menuItemPrice, .dmPhotoGallery .caption-text.caption-text, .dmGeoLocation a span.dmGeoMLocItemTitle, .dmGeoLocation a span.dmGeoMLocItemDetails, .map-popup-description { font-size:16px; } #dm div.dmNewParagraph p, #dm div.dmNewParagraph li { font-size:16px; } *#dm div.dmContent h1, *#dm div.dmFooter h1, *#dm div.p_hfcontainer h1, *#dm div.flex_hfcontainer h1, *#dm div.dm-title h1 { font-size:50px; } *#dm div.dmContent h2, *#dm div.dmFooter h2, *#dm div.p_hfcontainer h2, *#dm div.flex_hfcontainer h2, *#dm div.dm-title h2 { font-size:30px; } *#dm div.dmContent h3, *#dm div.dmFooter h3, *#dm div.p_hfcontainer h3, *#dm div.flex_hfcontainer h3, *#dm div.dm-title h3 { font-size:25px; } *#dm div.dmContent h4, *#dm div.dmFooter h4, *#dm div.p_hfcontainer h4, *#dm div.flex_hfcontainer h4, *#dm div.dm-title h4 { font-size:20px; } *#dm div.dmContent h5, *#dm div.dmFooter h5, *#dm div.p_hfcontainer h5, *#dm div.flex_hfcontainer h5, *#dm div.dm-title h5 { font-size:15px; } #dmRoot *#dm div.dmContent h1, #dmRoot *#dm div.dmFooter h1, #dmRoot *#dm div.p_hfcontainer h1, #dmRoot *#dm div.flex_hfcontainer h1, #dmRoot *#dm div.dm-title h1 { font-size:50px; } #dmRoot *#dm div.dmContent h2, #dmRoot *#dm div.dmFooter h2, #dmRoot *#dm div.p_hfcontainer h2, #dmRoot *#dm div.flex_hfcontainer h2, #dmRoot *#dm div.dm-title h2 { font-size:50px; } #dmRoot *#dm div.dmContent h3, #dmRoot *#dm div.dmFooter h3, #dmRoot *#dm div.p_hfcontainer h3, #dmRoot *#dm div.flex_hfcontainer h3, #dmRoot *#dm div.dm-title h3 { font-size:22px; } #dmRoot *#dm div.dmContent h4, #dmRoot *#dm div.dmFooter h4, #dmRoot *#dm div.p_hfcontainer h4, #dmRoot *#dm div.flex_hfcontainer h4, #dmRoot *#dm div.dm-title h4 { font-size:20px; } #dmRoot #dm div.dmNewParagraph p, #dmRoot #dm div.dmNewParagraph li { font-size:17px; } } @media (min-width:0px) and (max-width:767px) { *#dm div.dmContent h6, *#dm div.dmFooter h6, *#dm div.flex_hfcontainer h6, *#dm div.dm-title h6 { font-size:14px; } #dm div.dmInner, #dm div.dmInner .dmRespCol, #dm .dmRespCol div.dmNewParagraph, #dm .ecwid .ec-store, #dm .dmform .dmforminput label, .dmPrettyList .listText, .dmPrettyList .itemName, #dm .dmRestaurantMenu .menuItemBox, .dmRestaurantMenu .menuItemName, .dmRestaurantMenu .menuItemDesc, .dmRestaurantMenu .menuItemPrice, .dmPhotoGallery .caption-text.caption-text, .dmGeoLocation a span.dmGeoMLocItemTitle, .dmGeoLocation a span.dmGeoMLocItemDetails, .map-popup-description { font-size:16px; } #dm div.dmNewParagraph p, #dm div.dmNewParagraph li { font-size:16px; } *#dm div.dmContent h1, *#dm div.dmFooter h1, *#dm div.p_hfcontainer h1, *#dm div.flex_hfcontainer h1, *#dm div.dm-title h1 { font-size:40px; } *#dm div.dmContent h2, *#dm div.dmFooter h2, *#dm div.p_hfcontainer h2, *#dm div.flex_hfcontainer h2, *#dm div.dm-title h2 { font-size:30px; } *#dm div.dmContent h3, *#dm div.dmFooter h3, *#dm div.p_hfcontainer h3, *#dm div.flex_hfcontainer h3, *#dm div.dm-title h3 { font-size:20px; } *#dm div.dmContent h4, *#dm div.dmFooter h4, *#dm div.p_hfcontainer h4, *#dm div.flex_hfcontainer h4, *#dm div.dm-title h4 { font-size:18px; } *#dm div.dmContent h5, *#dm div.dmFooter h5, *#dm div.p_hfcontainer h5, *#dm div.flex_hfcontainer h5, *#dm div.dm-title h5 { font-size:15px; } #dmRoot *#dm div.dmContent h4, #dmRoot *#dm div.dmFooter h4, #dmRoot *#dm div.p_hfcontainer h4, #dmRoot *#dm div.flex_hfcontainer h4, #dmRoot *#dm div.dm-title h4 { font-size:19px; } #dmRoot *#dm div.dmContent h1, #dmRoot *#dm div.dmFooter h1, #dmRoot *#dm div.p_hfcontainer h1, #dmRoot *#dm div.flex_hfcontainer h1, #dmRoot *#dm div.dm-title h1 { font-size:38px; } #dmRoot *#dm div.dmContent h2, #dmRoot *#dm div.dmFooter h2, #dmRoot *#dm div.p_hfcontainer h2, #dmRoot *#dm div.flex_hfcontainer h2, #dmRoot *#dm div.dm-title h2 { font-size:31px; } #dmRoot *#dm div.dmContent h3, #dmRoot *#dm div.dmFooter h3, #dmRoot *#dm div.p_hfcontainer h3, #dmRoot *#dm div.flex_hfcontainer h3, #dmRoot *#dm div.dm-title h3 { font-size:22px; } #dmRoot #dm div.dmNewParagraph p, #dmRoot #dm div.dmNewParagraph li { font-size:16px; } } /* ========================================================================== site-css-bluarc.css BluArc Anodizing - bluarc-usa.com - the WHOLE stylesheet for the site Mansfield Marketing - architecture v4 - September 10, 2026 PASTE THIS INTO Dev Mode > Site HTML/CSS > site.css, REPLACING THE WHOLE FILE. Not appending. The BluArc Duda site is a clone of Standard's b2ffbbb7, so its site.css arrives holding Standard's library already - and this file contains that library, so appending would ship two copies of every shared rule and let source order decide which one wins. ONE FILE, ONE PASTE, AND NO VERSION TRAIL, and that is a decision rather than an omission (bluarc-site.md, decision 9). Standard runs a site-css-FULL-[date]-vN chain because its library changes weekly and five copies of it have to agree. This site will not be updated after launch, so its library is pinned and a frozen fork cannot drift. WHAT IS IN IT, in three parts and in this order, because an override goes after the thing it overrides (duda-css-rules.md section 3): 1. THE SHARED LIBRARY, verbatim from site-css-paste.css as it stood on September 2, 2026. Tokens, the three shell rules, the block root, the type and device library, and the utility-form set that /start-your-rfq and /contact will use. NOT ONE CHARACTER IS CHANGED, so this half stays a clean diff against Standard's copy and a fix that lands there can be dropped in here whole. 2. THE BLUARC BLOCK - style-guide.md section 11's deviation table written as CSS, and nothing else. If a rule in it is not traceable to that table it is drift and it comes out. THE ONE RULE IN PART 2 THAT IS NOT A DEVIATION is the cyan eyebrow on a dark ground, and it is flagged in place. It is a hole in the shared library rather than a BluArc choice - the fourth of the family of defects that file's own eyebrow comment documents - and it should be folded back into site-css-paste.css at the next stitch. THE SPEC BAR NEEDS NO CSS. Standard's proof bar and BluArc's spec bar are the same component with the same metrics; the only difference is the Section's colour swatch, amber against arc cyan, which is set in the Duda panel. That is the shared-design strategy doing real work rather than being described. ========================================================================== */ /* ========================================================================== PART 1 - THE SHARED LIBRARY, PINNED AT SEPTEMBER 2, 2026, VERBATIM ========================================================================== */ /* ========================================================================== PASTE THIS INTO Dev Mode > Site HTML/CSS > site.css The SITE SHELL and the SHARED LIBRARY go in once, at the top, and are the same on every page. A page's own block appends at the end. ========================================================================== */ /* --- TOKENS - style-guide.md section 2. The list is closed. ------------- */ :root{ --blue:#1C75BC; --blue-lt:#4FA8E8; --blue-deep:#0F3A5F; --blue-deepest:#082539; --steel:#101820; --gray:#6D6E71; --line:#E3E7EB; --off:#F4F6F8; --red:#C8102E; --red-dk:#A50D26; --amber:#F0A202; --body:#1B2229; --lead:#3A444E; --ondark:#C2D0DB; --disp:'Barlow Condensed',Impact,'Arial Narrow',sans-serif; --text:'Barlow','Segoe UI',Arial,sans-serif; } /* ====================================================================== SITE SHELL - three rules, written once, and they are the reason a Section takes two clicks instead of five. These are the ONLY rules in the system allowed to name Duda's own classes. Everything else names an sm- class. ====================================================================== */ /* 1180px of content inside a 1200px page width, matching the header and footer inset exactly. */ section.section > .flex-element.grid{ padding-left: max(10px, calc((100% - 1180px)/2)); padding-right: max(10px, calc((100% - 1180px)/2)); } @media(max-width:767px){ section.section > .flex-element.grid{padding-left:20px;padding-right:20px} } /* Section padding to zero, so a band's colour runs edge to edge. THIS USED TO BE TWO PANEL SETTINGS ON EVERY SECTION OF EVERY PAGE. The vertical rhythm comes from the block instead, so nothing is lost. */ section.section{padding:0} /* The Inner Column's own 16px padding. Missing this is what leaves a 16px white strip down both edges of every dark band, and it was the setting that got forgotten most. */ section.section > .flex-element.grid > *{padding-left:0;padding-right:0} /* ====================================================================== THE BLOCK ROOT - and this is the ONLY armored rule in the system. Duda's theme styles p, li and headings only when they sit inside div.dmNewParagraph, which is a TEXT widget. An HTML widget renders as .dmCustomHtml, so nothing in the theme matches anything inside a block. Measured against the real generated theme from site b2ffbbb7. What DOES reach in is inheritance: #dm div.dmInner .dmRespCol sets font-family, color and font-weight on an ancestor of the block, and no specificity on a descendant stops an inherit. So the block root declares every inheritable property, the inherit chain stops there, and every rule below this one needs no prefix at all. ====================================================================== */ #dm#dm#dm .sm-blk{ font-family: var(--text); font-size:17px; font-weight:400; font-style:normal; line-height:1.65; letter-spacing:normal; word-spacing:normal; text-transform:none; text-decoration:none; text-align:start; direction:ltr; color:var(--body); box-sizing:border-box; } /* ====================================================================== SHARED LIBRARY - every page uses these. A page does not redefine them. ====================================================================== */ .sm-blk *,.sm-blk *::before,.sm-blk *::after{box-sizing:border-box} .sm-blk{padding:92px 0} .sm-blk-tight{padding:64px 0} .sm-blk-flush{padding:0} @media(max-width:767px){ .sm-blk{padding:66px 0} .sm-blk-tight{padding:52px 0} } /* --- type ------------------------------------------------------------- */ /* HEADINGS RENDER IN CAPS. The HTML text stays Title Case, so Google and AI overviews pull normal sentence text while the page reads industrial. Doug's instruction, Round 13 of the homepage build, and it has been live in site.css since. IT WAS NEVER WRITTEN INTO style-guide.md section 5, which is why every wireframe and the whole of this stylesheet missed it until August 27, 2026 - the only trace of it in the kit was section 7.2 calling the Straight Answer question "the one heading on the site that escapes the sitewide uppercase treatment", which describes a rule stated nowhere. AUTHOR HEADINGS IN TITLE CASE. Never type them in caps - that would send caps to the SERP, which is the thing this split exists to avoid. Tracking opens from .005em to .02em, because caps at display size set tighter than mixed case at the same value. */ #dm#dm#dm .sm-blk h1, #dm#dm#dm .sm-blk h2, #dm#dm#dm .sm-blk h3, #dm#dm#dm .sm-blk h4, #dm#dm#dm .sm-blk h5, #dm#dm#dm .sm-blk h6{ font-family: var(--disp);font-weight:600;line-height:1.05;letter-spacing:.02em; text-transform:uppercase;color:var(--body);margin:0 0 12px} #dm#dm#dm .sm-blk h1{font-size:clamp(38px,4.9vw,64px)} #dm#dm#dm .sm-blk h2{font-size:clamp(31px,3.8vw,50px);margin-bottom:26px} #dm#dm#dm .sm-blk h3{font-size:22px;line-height:1.2} #dm#dm#dm .sm-blk h1 em, #dm#dm#dm .sm-blk h2 em{font-style:normal;color:var(--amber)} #dm#dm#dm .sm-blk h1 .nb, #dm#dm#dm .sm-blk h2 .nb{white-space:nowrap} @media(max-width:460px){.sm-blk h1 .nb,.sm-blk h2 .nb{white-space:normal}} .sm-blk p{margin:0 0 18px} .sm-blk p:last-child{margin-bottom:0} .sm-blk ul,.sm-blk ol{margin:0 0 18px;padding-left:1.2em} .sm-blk li{margin:0 0 8px} .sm-blk a{color:var(--blue);text-decoration:none;font-weight:500} .sm-blk-dark a{color:var(--blue-lt)} .sm-blk img{max-width:100%;display:block} /* ORDER MATTERS AND THIS BLOCK MOVED. The dark rules are (3,1,1) and so are the base type rules, so equal specificity means source order decides. With the dark rules first, `.sm-blk h1{color:var(--body)}` won and every heading on every dark band rendered body-black on navy. Found by rendering, not by reading. Overrides go after the thing they override. */ /* Dark-ground text. The Section's own colour swatch paints the band; this sets what the words do on it. Both are named in the build map. */ #dm#dm#dm .sm-blk-dark h1, #dm#dm#dm .sm-blk-dark h2, #dm#dm#dm .sm-blk-dark h3, #dm#dm#dm .sm-blk-dark h4{color:#fff} .sm-blk-dark p,.sm-blk-dark li{color:var(--ondark)} .sm-blk-dark strong{color:#fff} /* --- THE EYEBROW ON A DARK GROUND. MEASURED, SEPTEMBER 2, 2026. ------- `.sm-eyebrow{color:var(--amber)}` is (0,1,0). `.sm-blk-dark p` two blocks above is (0,1,1) and every eyebrow on the site is a

, so the dark rule won and EVERY EYEBROW ON EVERY DARK BAND OF EVERY PAGE HAS BEEN RENDERING #C2D0DB INSTEAD OF AMBER. Not a hero problem and not new: home, machining, defense, aerospace, quality and anodizing all carry it. Doug spotted it on the /start-your-rfq hero as "no yellow accent"; probing the computed style gave rgb(194,208,219) and named the winning rule. Source order was never going to save this one. Specificity did. THIRD OF THIS KIND. `.sm-modnum` renders grey on dark for the same reason, and the comment on the three-eyebrow-classes block above records a fourth, found on the client-selected homepage. When a bare utility sits on a dark ground, check it against `.sm-blk-dark p` before shipping it. */ .sm-blk-dark .sm-eyebrow{color:var(--amber)} /* --- rows: the class owns the column geometry -------------------------- */ .sm-cols-2{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin:28px 0} .sm-cols-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:28px 0;align-items:stretch} .sm-cols-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin:28px 0;align-items:stretch} .sm-cols-rail{display:grid;grid-template-columns:200px 1fr;gap:44px} .sm-cols-split{display:grid;grid-template-columns:1.18fr .82fr;gap:56px;align-items:start} @media(max-width:1024px){ .sm-cols-4{grid-template-columns:repeat(2,1fr)} .sm-cols-rail{grid-template-columns:1fr;gap:22px} .sm-cols-split{grid-template-columns:1fr;gap:34px} } @media(max-width:767px){.sm-cols-2,.sm-cols-3{grid-template-columns:1fr;gap:28px}} /* --- type roles -------------------------------------------------------- */ /* Three complete classes, never a base plus a modifier. The modifier form rendered grey on every dark band of the client-selected homepage, because the band's colour rule beat the bare utility. style-guide.md section 5. */ .sm-eyebrow,.sm-eyebrow-lt,.sm-eyebrow-cy{ font-family: var(--disp);font-size:14px;font-weight:600;line-height:1.35; letter-spacing:.22em;text-transform:uppercase;margin:0 0 16px} .sm-eyebrow{color:var(--amber)} .sm-eyebrow-lt{color:#12558A} /* amber is 2.13:1 on white and fails at any size */ .sm-eyebrow-cy{color:#00A7E1} /* BluArc only */ .sm-lead{font-size:19px;line-height:1.55;color:var(--lead)} .sm-blk-dark .sm-lead{color:#D6E2EC} .sm-prose{max-width:74ch} @media(max-width:767px){.sm-blk p{font-size:16px}} /* Drop cap: CSS only, no markup. Once per page, and never on a paragraph opening with a quotation mark. */ .sm-dropcap > p:first-of-type::first-letter{ font-family: var(--disp);font-weight:600;font-size:76px;line-height:.78; float:left;padding:6px 14px 0 0;color:var(--blue-deep)} /* --- buttons ----------------------------------------------------------- */ .sm-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px} .sm-btns-flush{margin-top:0} .sm-btns a{display:inline-block;padding:15px 30px;border:2px solid transparent; font-family: var(--disp);font-size:16px;font-weight:600;letter-spacing:.11em; text-transform:uppercase;text-decoration:none;line-height:1;transition:.15s} /* NOTE THE `a.` ON EVERY ONE OF THESE, AND IT IS LOAD-BEARING. `.sm-blk a{color:var(--blue)}` is (0,1,1) and a bare `.sm-btn-red` is (0,1,0), so the link colour won and EVERY BUTTON LABEL ON THE PAGE RENDERED BLUE - blue-lt on dark grounds, brand blue on light. Qualifying with the tag makes each of these (0,2,1) and they win. Doug reported this as "the blue button text does not look right" on August 27, 2026. It was first mis-diagnosed as a problem with the outline button in the spec, because the spec was read instead of the render being measured. EVERY BUTTON LABEL ON THIS SITE IS WHITE. */ a.sm-btn-red{background:var(--red);color:#fff;border-color:var(--red)} a.sm-btn-red:hover{background:var(--red-dk);border-color:var(--red-dk);color:#fff} a.sm-btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)} a.sm-btn-ghost:hover{background:rgba(255,255,255,.1);color:#fff} /* FILLED, WITH A WHITE LABEL. It was a transparent button with a blue-deep label until August 27, 2026 - the only button in the system whose text was not white, and it read wrong. Every button label on this site is white now. White on brand blue measures 4.9:1 and clears AA. style-guide.md section 3. */ a.sm-btn-out{background:var(--blue);color:#fff;border-color:var(--blue)} a.sm-btn-out:hover{background:var(--blue-deep);border-color:var(--blue-deep);color:#fff} /* ====================================================================== DEVICE LIBRARY - the nine-section spine. page-classes/content-page.md. NOTHING BELOW IS ARMORED, and that is not an oversight: the theme does not reach inside an HTML widget. If a rule here ever needs a prefix, something has moved into a text widget and the block is not a block. ====================================================================== */ /* --- 1 - HERO ---------------------------------------------------------- The photograph is the SECTION's own background image, set natively, so Duda serves it as WebP with a srcset. The hero is the page's Largest Contentful Paint element and this is the only way it gets served properly. THE SCRIMS ARE THE ONE THING ON A PAGE THAT NEEDS A CLASS ON THE SECTION. They have to cover the full bleed and the block is capped at 1180, so they live on the Section's grid. Put them on section.section and they paint correctly and then sit BEHIND the grid's own background, which fails with no error and no visible cause. Probed on the live site, August 25, 2026. DESCENDANT COMBINATOR, NOT CHILD, AND IT IS LOAD-BEARING. The class dialog puts a Section's custom class on a div[data-layout-section] WRAPPER that Duda generates around the section, so the grid is two levels down and a child combinator matches nothing, silently. Measured on the /machining preview, August 29, 2026. THE SECTION'S BACKGROUND PANEL MUST CARRY NO OVERLAY. A panel overlay renders as a generated ::before on this same grid and outranks these class-only rules. Remove the setting rather than out-specify it. */ .sm-hero-sec .flex-element.grid{position:relative;min-height:680px; display:flex;flex-direction:column;justify-content:flex-end} .sm-hero-sec .flex-element.grid::before, .sm-hero-sec .flex-element.grid::after{content:"";position:absolute;inset:0; z-index:0;pointer-events:none} /* THE GRADIENT IS BACK ON sm-hero-sec ITSELF, AUGUST 30 2026 (round 4 of the day). Earlier the same day this went to per-page classes and per-photo measured curves, on the theory that one curve couldn't fit every hero photo. Doug's call, having seen it built: he wants the one shared effect back on the base class, no per-page CSS and no second class required in Duda. sm-hero-[page] classes already applied in Duda (sm-hero-machining, sm-hero-defense) are harmless left in place; nothing hooks to them any more. LIGHTENED SITEWIDE, HOMEPAGE HERO BUILD, ROUND 12. Doug set the homepage hero's background image natively on the Section (as designed - this is exactly why the scrim lives here rather than on the widget: the Section runs full-bleed, the sm-blk widget on top of it is capped at 1200px). Seeing it live, he felt it obscured the photo more than he wanted, even though it does its job for text legibility. These values are roughly 30% lighter than the originals across every stop, sitewide - Defense and Machining get the same lighter treatment (Doug's call - a homepage-only version was the other option). Previous values: ::before .20/.55/.86, ::after .88/.62/0. Adjust further here if any of the three hero pages wants it lighter or darker still - it is one shared rule for all of them, by design. */ /* #################################################################### THE ONLY DIVERGENCE FROM THE PINNED SHARED LIBRARY IN THIS WHOLE FILE, AND IT IS COMMENTED OUT RATHER THAN DELETED SO THE DIFF AGAINST site-css-paste.css STAYS ONE READABLE HUNK. September 10, 2026. THESE TWO RULES ARE WHY DUDA'S SECTION BACKGROUND OVERLAY CONTROL DID NOTHING ON THIS SITE, AND THEN, ONCE A VALUE WAS WRITTEN INTO THEM, WHY THE OVERLAY APPEARED BUT COULD NOT BE ADJUSTED. Duda emits its panel overlay as a rule pinned to the grid's element id - ONE id-equivalent. These carry three, so they win, on `background` AND on `opacity`. The `opacity:1` is the half people miss: even with the background handed over, it pins the panel's opacity slider to full and the control still reads as frozen. BLUARC PUTS THE HERO OVERLAY IN THE PANEL, ON PURPOSE, so both come out. Doug asked for a control he can move; a frozen wash he cannot tune is worse than one point of divergence in a file that will never be updated again. With these gone, NOTHING in this stylesheet names the background of `.flex-element.grid::before`, and the panel owns the hero. WHAT IS SET IN DUDA, and it is the whole hero treatment. READ BACK FROM THE LIVE PREVIEW ON SEPTEMBER 11, 2026, not transcribed from a panel screenshot - the generated rule is the only thing that settles it: Section > Style > Colour > Background overlay ON Type Gradient Stop 1 #000000 at 65% Stop 2 #242424 at 100% Direction 135deg (top-left to bottom-right) Opacity 85 <- ONE opacity for the whole overlay Generated: linear-gradient(135deg,#000000 65%,#242424 100%), opacity .85 Background position on the Section is 50% 50%. DUDA GIVES EACH STOP A HEX AND A POSITION BUT ONLY ONE OPACITY FOR THE WHOLE OVERLAY, so the falloff is built with the second HEX, not a second alpha. That is why the far stop is a near-black grey rather than a lower percentage: at 85 per cent coverage, #242424 composites to roughly what a 78 per cent black would, while the 65 per cent black plateau gives the headline a much darker ground than a flat wash could. THE FALLOFF HEX IS THE WHOLE BALLGAME, AND #545454 IS THE CAUTIONARY VALUE. The first working attempt used #545454 at 78 and looked right on an EMPTY hero Section. Measured with the block in place, the spec card's 14px cyan kicker read 2.57:1 - a hard fail - because 135deg puts the lightest point at the bottom-right corner and that kicker is the bottom-right-most text on the page. Nothing about the empty section showed it. #2E2E2E is about the lightest that still passes; anything at or above #424242 fails that one element however the opacity is set. A TINTED FALLOFF IS WORSE THAN A GREY ONE: #23303A, the obvious navy choice on this palette, measured 3.77. Keep stop 2 neutral. MEASURED ON THE LIVE VALUES, worst pixel under each glyph run via Range.getClientRects(), against each role's own colour, at 1440 / 1024 / 768 / 390 - ALL EIGHT CLEAR WCAG AA AT EVERY WIDTH. At 1440: eyebrow 5.91 - H1 14.97 - deck 11.63 - hero kicker 6.67 card label 5.66 - card value 13.73 - card line 6.90 - card kicker 4.71 Thinnest margin anywhere is the hero kicker at 4.96 at 390. AT THE PANEL'S DEFAULT FLAT 50, SIX OF THE EIGHT FAIL. The 14px eyebrow and the cyan card kicker fail first, every time. THE `content:""` RULE ABOVE STAYS AND IS LOAD-BEARING. It is what makes both pseudo-elements exist at all. ::after keeps it and paints nothing, which is the point - see the BluArc block, where ::after is killed so the library's 96deg gradient cannot sit on top of the panel's wash. WHAT THIS COSTS: Trap 3 comes back. A panel overlay leaves an id-pinned background declaration behind even when the toggle is switched OFF (measured on Standard, August 29, 2026), and with no armor here there is nothing to out-rank it. On a site that ships once and is never edited again that is a risk worth taking. ON STANDARD IT IS NOT - leave those two rules armored in site-css-paste.css, and do not fold this hunk back. Original, verbatim: #dm#dm#dm .sm-hero-sec .flex-element.grid::before{opacity:1; background:linear-gradient(180deg,rgba(8,37,57,.14) 0%,rgba(8,37,57,.39) 55%,rgba(8,37,57,.60) 100%)} #dm#dm#dm .sm-hero-sec .flex-element.grid::after{opacity:1; background:linear-gradient(90deg,rgba(8,37,57,.62) 0%,rgba(8,37,57,.43) 42%,rgba(8,37,57,0) 78%)} #################################################################### */ .sm-hero-sec .flex-element.grid > *{position:relative;z-index:1;width:100%} @media(max-width:767px){.sm-hero-sec .flex-element.grid{min-height:560px}} /* pointer-events:none is not optional. Without it the overlay eats clicks on everything beneath it, including the hero's button. */ .sm-hero{padding:110px 0 80px} .sm-hero-deck{border-left:1px solid rgba(255,255,255,.28);padding-left:34px;padding-top:8px} .sm-hero-deck p{font-size:19px;line-height:1.55;color:#D6E2EC} @media(max-width:1024px){ .sm-hero-deck{border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.28);padding-top:26px}} /* --- HERO H1 DROP SHADOW - promoted to the shared library, August 30, 2026, round 10. Added Defense-only in round 8 (2px offset), widened to 4px in round 9, scoped to sm-hero-defense both times. Doug then asked for it on every hero page's H1 and found /machining did not pick it up - correctly, since the rule only ever matched sm-hero-defense. Promoted here with no page class in the selector, so any Section carrying sm-hero-sec gets it - present hero pages and any built after. 4px offset, no blur, solid black, bottom-right - value unchanged from round 9. #dm#dm#dm because it targets the h1 tag directly, matching every other heading override in this file. The page-specific version is removed from deploy-standard-defense.css/.html - this is the only copy now. */ #dm#dm#dm .sm-hero-sec .sm-blk h1{text-shadow:4px 4px 0 #000} /* --- PROOF BAR - belongs to section 1's movement, not a section of its own. NO RED TERMINATOR, IN CSS OR NATIVE. First shipped as 5px block CSS, then moved to a native Section bottom border the same day after the block-CSS version stopped short of full bleed, then retired outright a few hours later on Doug's direct instruction after seeing it live: the bar just ends on its own ground. */ .sm-proofbar{padding:19px 0} .sm-proofrow{display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px 30px} .sm-proofrow p{font-family: var(--disp);font-size:14px;font-weight:600; letter-spacing:.11em;text-transform:uppercase;color:#06202D;margin:0;line-height:1.2} /* The red check is a bullet, not a target: 2.4:1 on amber, so it carries no meaning on its own and the label beside it has to stand without it. */ .sm-proofrow p::before{content:"\2713 ";color:var(--red)} @media(max-width:1024px){.sm-proofrow{justify-content:flex-start}} /* --- INDEX RAIL -------------------------------------------------------- */ .sm-rail{border-top:2px solid var(--line);padding-top:14px} .sm-blk-dark .sm-rail{border-top-color:rgba(255,255,255,.24)} .sm-rail p{font-family: var(--disp);font-size:13px;font-weight:600;letter-spacing:.16em; text-transform:uppercase;color:var(--gray);margin:0 0 6px;line-height:1.3} .sm-rail p:last-child{color:var(--blue);font-size:12px;letter-spacing:.2em} .sm-blk-dark .sm-rail p{color:#8FA6B6} .sm-blk-dark .sm-rail p:last-child{color:var(--amber)} /* --- PULL QUOTE - the colour IS the rule ------------------------------- RED is the one sentence the page is built to earn. At most one per page and many pages will not have one. The content file marks it [pullquote!]. style-guide.md section 4 rule 2. A red rule is a rail, never a fill. */ .sm-pull{border-left:5px solid var(--amber);padding:4px 0 4px 26px;margin:34px 0} .sm-pull-red{border-left-color:var(--red)} .sm-pull p{font-family: var(--disp);font-size:clamp(24px,2.4vw,32px);font-weight:600; line-height:1.22;letter-spacing:.005em;color:var(--blue-deep);margin:0} .sm-blk-dark .sm-pull p{color:#fff} /* The lead-in variant: the direct answer promoted to the section's largest type. Brand blue, NOT red - the page's red rail budget is two and both are spent on meaning. */ .sm-leadpull{border-left:5px solid var(--blue);padding:2px 0 2px 28px;margin:0 0 32px} .sm-leadpull p{font-family: var(--disp);font-size:clamp(26px,2.7vw,36px);font-weight:600; line-height:1.2;letter-spacing:.005em;color:var(--blue-deep);margin:0} /* --- WAYFINDER --------------------------------------------------------- */ .sm-wayfind{margin-top:30px;padding-top:18px;border-top:1px solid var(--line); font-size:15px;color:var(--gray)} .sm-wayfind p{margin:0} .sm-wayfind a::after{content:" \2192"} /* --- AT A GLANCE - the block a sourcing engineer screenshots ----------- */ .sm-glance{background:#fff;border:1px solid var(--line);border-top:5px solid var(--blue)} .sm-glance-row{display:grid;grid-template-columns:minmax(180px,.42fr) 1fr; border-bottom:1px solid var(--line)} .sm-glance-row:last-child{border-bottom:0} .sm-glance-row > div{padding:18px 26px} .sm-glance-row > div:first-child{font-family: var(--disp);font-size:14px;font-weight:600; letter-spacing:.13em;text-transform:uppercase;color:var(--gray)} .sm-glance-row p{margin:0} /* Three columns, for a page whose third column is the whole value of the block - what the row means for the reader's part. */ .sm-glance-3 .sm-glance-row{grid-template-columns:minmax(150px,.26fr) minmax(190px,.34fr) 1fr} .sm-glance-3 .sm-glance-row > div + div{border-left:1px solid var(--line);font-size:16px} .sm-glance-3 .sm-glance-row > div:last-child{color:var(--lead)} /* The head row does NOT carry sm-glance-row, and that is the fix rather than a specificity fight: it did, and the three-column rules took its text colour back to body black on a blue-deep ground. */ .sm-glance-head{background:var(--blue-deep);display:grid; grid-template-columns:minmax(150px,.26fr) minmax(190px,.34fr) 1fr} .sm-glance-head > div{padding:14px 26px;font-family: var(--disp);font-size:13px; font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#fff} .sm-glance-head > div + div{border-left:1px solid rgba(255,255,255,.22)} .sm-glance-head p{margin:0} /* THE PENDING-CREDENTIAL INSET RAIL - promoted here, August 31, 2026, from Defense's own page addition (deploy-standard-defense.css), per that file's own comment: promote it the day a second page needs it. Quality has two pending rows (AS9100D, ISO 9001:2015) and needed the identical rule, so this is now unscoped in the shared library. Removed from Defense's own addition; see that file for the note. */ .sm-glance-row.is-pending{box-shadow:inset 6px 0 0 var(--amber)} @media(max-width:1024px){ .sm-glance-head{display:none} .sm-glance-3 .sm-glance-row{grid-template-columns:minmax(140px,.34fr) 1fr} .sm-glance-3 .sm-glance-row > div:last-child{grid-column:1 / -1;border-left:0; border-top:1px solid var(--line);padding-top:12px}} @media(max-width:767px){ .sm-glance-row,.sm-glance-3 .sm-glance-row{grid-template-columns:1fr} .sm-glance-3 .sm-glance-row > div + div{border-left:0} .sm-glance-row > div{padding:14px 20px}} /* --- EARLY CTA LINE - the quiet mid-page exit -------------------------- */ .sm-ctaline{margin-top:34px;padding-top:26px;border-top:2px solid var(--line); display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px} .sm-ctaline p{margin:0;color:var(--lead)} /* --- MODULE NUMBER ----------------------------------------------------- */ .sm-modnum{font-family: var(--disp);font-size:15px;font-weight:600; letter-spacing:.2em;color:var(--amber);margin:0 0 10px} /* --- MANIFEST - the dark-ground form of a list with bolded lead-ins ---- */ .sm-manifest{margin-top:8px} .sm-manifest ul{list-style:none;margin:0;padding:0} .sm-manifest li{border-top:1px solid rgba(255,255,255,.16);padding:16px 0; font-size:16.5px;line-height:1.6} .sm-manifest li:first-child{border-top:0} .sm-manifest li strong{font-family: var(--disp);font-size:18px;font-weight:600; letter-spacing:.04em;text-transform:uppercase;display:block;margin-bottom:4px} .sm-blk:not(.sm-blk-dark) .sm-manifest li{border-top-color:var(--line)} .sm-blk:not(.sm-blk-dark) .sm-manifest li strong{color:var(--blue-deep)} /* --- BAND IMAGE - its own Section, native background image ------------- A Duda Section has NO aspect-ratio control and collapses to nothing without this. The height IS the device. */ .sm-imgband{aspect-ratio:3/1;width:100%} @media(max-width:767px){.sm-imgband{aspect-ratio:2/1}} /* --- COMMON QUESTIONS - open by default, FAQPage marked ---------------- */ .sm-qa{border-top:1px solid var(--line)} .sm-qa-item{border-bottom:1px solid var(--line);padding:26px 0} #dm#dm#dm .sm-qa-item h3{font-size:20px;color:var(--blue-deep);margin:0 0 10px} .sm-qa-item p{font-size:16.5px;color:var(--lead);margin:0} /* --- THE STRAIGHT ANSWER - one per page, the page's turning point ------ The 10px red rail is a rail, never a fill. It is the second and last red rail on a page. If a third appears, one of them is wrong. */ .sm-straight-sec{border-left:10px solid var(--red)} .sm-straight-label{font-family: var(--disp);font-size:13px;font-weight:600; letter-spacing:.24em;text-transform:uppercase;color:var(--amber);margin:0 0 18px} /* SENTENCE CASE, AND IT IS THE ONE HEADING ON THE SITE THAT ESCAPES THE UPPERCASE TREATMENT. The reason is worth keeping: uppercase turns a question into a headline, and the whole value of this block is that it reads as something a person actually asked. style-guide.md section 7.2. */ /* NOTE THE h2. The heading rule that sets uppercase is (3,1,1) and a bare class rule is (3,1,0), so it lost - the exception rendered in caps anyway, which is exactly the defect it exists to prevent. Qualifying it with the tag makes it (3,2,1) and it wins. Found by measuring the computed style, not by reading the file. */ #dm#dm#dm .sm-blk h2.sm-straight-q{font-size:clamp(26px,2.8vw,38px);margin-bottom:22px; text-transform:none;letter-spacing:.005em} /* rgba(255,255,255,.82) composites over steel to #D4D5D7 and measures 12.2:1. Deliberately NOT the band body colour - the panel reads as a different voice, not as more band text. style-guide.md section 3. */ .sm-straight-a p{font-size:18.5px;line-height:1.62;color:rgba(255,255,255,.82)} /* --- PROOF CARDS ------------------------------------------------------- */ .sm-stat{background:#fff;border:1px solid var(--line);border-bottom:4px solid var(--blue); padding:30px 28px;display:flex;flex-direction:column} #dm#dm#dm .sm-stat h3{font-family: var(--disp);font-size:clamp(40px,4vw,54px);font-weight:600; line-height:1;color:var(--blue-deep);margin:0 0 12px} #dm#dm#dm .sm-stat h3 em{font-size:.45em;font-style:normal;letter-spacing:0} .sm-stat p{font-size:15.5px;line-height:1.55;color:var(--lead);margin:0;flex:1} /* flex:0 0 auto is not optional. A bare .sm-stat p{flex:1} also matches the note and knocks it off the baseline by one line height, which is exactly the failure the pattern exists to prevent. */ .sm-stat p:last-of-type{flex:0 0 auto;margin-top:16px;padding-top:14px; border-top:1px solid var(--line);font-family: var(--disp);font-size:13px; letter-spacing:.13em;text-transform:uppercase;color:var(--gray)} /* --- MATCHED ENVELOPE - TWO BARS, BECAUSE THE PAIRING IS THE POINT ----- One bar alone is a chart of nothing. Use it only where two measurements are deliberately the same number and the sameness IS the argument. */ .sm-env{display:flex;flex-direction:column;justify-content:center;gap:38px} .sm-envlabel{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px} .sm-envlabel .n{font-family: var(--disp);font-size:14px;font-weight:600; letter-spacing:.14em;text-transform:uppercase;color:var(--blue-deep)} .sm-envlabel .v{font-family: var(--disp);font-size:26px;font-weight:600;line-height:1; letter-spacing:.005em;color:var(--blue)} .sm-envlabel .v em{font-size:.5em;font-style:normal;letter-spacing:.04em;margin-left:3px} .sm-envbar{height:16px;position:relative;width:100%; background:linear-gradient(90deg,var(--blue-deep),var(--blue-lt))} .sm-envbar::after{content:"";position:absolute;right:0;top:-5px;bottom:-5px; width:3px;background:var(--amber)} /* --- SPEC PAIR - two figures behind the hero's hairline ---------------- */ .sm-specpair{display:grid;grid-template-columns:1fr 1fr;gap:26px} .sm-specpair .v{font-family: var(--disp);font-size:clamp(34px,3.4vw,46px);font-weight:600; line-height:1;letter-spacing:.005em;color:#fff;margin:0 0 8px} .sm-specpair .v em{font-size:.42em;font-style:normal;letter-spacing:.04em;margin-left:4px} .sm-specpair .n{font-family: var(--disp);font-size:13px;font-weight:600;letter-spacing:.16em; text-transform:uppercase;color:var(--amber);margin:0;line-height:1.35} @media(max-width:767px){.sm-specpair{grid-template-columns:1fr;gap:18px}} /* --- GROWTH FIGURES - stacks, because it sits in half of a split ------- */ .sm-growth{background:#fff;border:1px solid var(--line);border-top:5px solid var(--blue)} .sm-growth > div{padding:24px 26px;border-top:1px solid var(--line)} .sm-growth > div:first-child{border-top:0} .sm-growth .v{font-family: var(--disp);font-size:clamp(38px,4vw,52px);font-weight:600; line-height:1;color:var(--blue-deep);margin:0 0 10px} .sm-growth .v em{font-size:.40em;font-style:normal;letter-spacing:.03em;margin-left:2px} .sm-growth p:last-child{font-size:15.5px;line-height:1.5;color:var(--lead);margin:0} /* --- DARK CARD - a dark panel inside a light section, never its own Section */ .sm-darkcard{background:var(--blue-deepest);padding:38px 40px;border-left:5px solid var(--amber)} #dm#dm#dm .sm-darkcard h3{color:#fff;font-size:24px} .sm-darkcard p{color:var(--ondark);font-size:16.5px} @media(max-width:767px){.sm-darkcard{padding:28px 24px}} /* --- NUMBERED SEND ROWS - the number and the hairline ARE the device --- */ .sm-sendrow{display:grid;grid-template-columns:64px 1fr;gap:0 22px; padding:24px 0;border-top:1px solid var(--line)} .sm-sendrow .n{font-family: var(--disp);font-size:34px;font-weight:600;line-height:1; color:var(--blue)} .sm-sendrow p{margin:0;line-height:1.6} @media(max-width:767px){.sm-sendrow{grid-template-columns:44px 1fr;gap:0 14px}} /* --- LINK CARDS - at most two. More than two turns a page into a menu -- */ .sm-linkcard{background:#E7F0FA;border:1px solid var(--line);border-top:4px solid var(--blue); padding:26px 28px;display:flex;flex-direction:column;box-shadow:0 1px 3px rgba(15,58,95,.08)} #dm#dm#dm .sm-linkcard h3{font-size:20px;color:var(--blue-deep);margin:0 0 8px} .sm-linkcard p{font-size:16px;color:var(--lead);margin:0;flex:1} .sm-linkcard a{margin-top:18px;font-family: var(--disp);font-size:14px;font-weight:600; letter-spacing:.14em;text-transform:uppercase} .sm-linkcard a::after{content:" \2192"} /* CLOSING CTA rules (.sm-close / .sm-close-note / .sm-phone) removed Sept 1, 2026 - the Ask CTA on every live page is now a single sm-btns row of three equal-weight buttons (see the Ask section markup). No page references these classes anymore. */ /* ====================================================================== UTILITY FORM PAGES - added September 2, 2026. Serves /start-your-rfq and /contact, and BluArc's /rfq when it is built. page-classes/utility-form.md is the spec. THE BODY SECTION IS OFF-WHITE AND THAT IS A FUNCTIONAL DECISION, NOT A DECORATIVE ONE. Every input on the page is white with a 1px border. On a white ground the border is the only thing separating a field from the page and the form reads as a list of lines. On off-white the fields sit forward of the ground on their own and the form reads as a form. Doug's call, September 2, 2026, and it is why this class set has no white variant. ====================================================================== */ /* --- UTILITY PAGE HEADER ----------------------------------------------- The hero-equivalent for a page with no argument to make. Solid band, no photograph, no scrim, no second CTA. It is deliberately about half the height of an interior page hero: a visitor who clicked Start Your RFQ has already decided, and a 680px masthead in front of the form is a toll. */ .sm-uhero{padding:76px 0 62px} .sm-uhero h1{margin-bottom:0} /* The rule is the page's amber, and on a hero with no photograph it is carrying more weight than the same device does on an interior page. 88x5, not 66x4. Round 2, after Doug read the built hero as having no yellow accent at all - most of that was the eyebrow defect fixed in the shared library above, but the rule was also too slight to register as an accent on its own. */ .sm-uhero-rule{width:88px;height:5px;background:var(--amber);margin:24px 0 0} /* BOTTOM ALIGNED, NOT TOP. Top aligned, the deck starts level with the eyebrow and then just stops, and the two columns read as two unrelated blocks that happen to share a band. Bottom aligned, the deck's last line lands on the amber rule and the hero reads as one object. */ .sm-uhero .sm-cols-split{align-items:end} @media(max-width:1024px){.sm-uhero .sm-cols-split{align-items:start}} @media(max-width:767px){.sm-uhero{padding:56px 0 48px}} /* --- THE TWO COLUMN BODY ----------------------------------------------- Roughly 62/38. The form is first in source order, so it is first on mobile with no ordering rule needed. */ .sm-cols-form{display:grid;grid-template-columns:1.62fr .98fr;gap:46px;align-items:start} @media(max-width:1024px){.sm-cols-form{grid-template-columns:1fr;gap:38px}} /* --- FIELD GROUPS ------------------------------------------------------ A long form is not long because of the number of fields. It is long because it reads as one undifferentiated column. Six named groups with a numbered rule above each one turn twenty six fields into six short asks. */ .sm-form{margin-top:30px} .sm-fset{border:0;margin:0 0 40px;padding:0;min-width:0} .sm-fset:last-of-type{margin-bottom:0} .sm-fset-hd{display:flex;align-items:baseline;gap:14px; border-top:2px solid #CFD8E0;padding-top:12px;margin-bottom:6px} .sm-fset-hd .n{font-family: var(--disp);font-size:13px;font-weight:600; letter-spacing:.2em;color:var(--blue);flex:0 0 auto} .sm-fset-hd h3{margin:0;font-size:21px;line-height:1.1} .sm-fset-note{font-size:14.5px;line-height:1.5;color:var(--gray);margin:0 0 20px} /* --- FIELDS ------------------------------------------------------------ */ .sm-fgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px 20px} .sm-fgrid-3{grid-template-columns:repeat(3,1fr)} .sm-f-full{grid-column:1/-1} .sm-fld{display:flex;flex-direction:column;min-width:0} /* CHILD COMBINATOR, AND IT IS LOAD-BEARING. Written as a descendant selector, .sm-fld label also matched every checkbox label inside a .sm-checks grid: they rendered in condensed uppercase with display:block, which killed the flex gap and pushed the tick against the word. Found by rendering at 1440, not by reading. The field label is always a direct child of .sm-fld; a checkbox label never is. */ .sm-fld > label,.sm-lgd{font-family: var(--disp);font-size:14px;font-weight:600; letter-spacing:.1em;text-transform:uppercase;color:var(--body); margin:0 0 7px;line-height:1.25;display:block} .sm-req{color:var(--red);margin-left:4px} .sm-opt{color:var(--gray);font-weight:400;letter-spacing:.04em; text-transform:none;font-size:13px;margin-left:7px;font-family:var(--text)} .sm-inp,.sm-sel,.sm-ta{font-family: var(--text);font-size:16px;color:var(--body); background:#fff;border:1px solid #BCC7D1;border-bottom:2px solid #93A2AF; border-radius:0;padding:12px 13px;width:100%;line-height:1.4; -webkit-appearance:none;appearance:none;transition:border-color .12s,box-shadow .12s} .sm-ta{min-height:132px;resize:vertical} .sm-sel{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236D6E71' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 14px center; background-size:12px 8px;padding-right:38px} .sm-inp:focus,.sm-sel:focus,.sm-ta:focus{outline:0;border-color:var(--blue); border-bottom-color:var(--blue);box-shadow:0 0 0 3px rgba(28,117,188,.18)} /* 4.6:1 on white. Placeholder text is still text. */ .sm-inp::placeholder,.sm-ta::placeholder{color:#6E7883} .sm-hint{font-size:13.5px;line-height:1.5;color:var(--gray);margin:7px 0 0} /* Three numbers and a unit, on one line. It stays two-up on a phone rather than stacking, because three stacked number boxes look like three unrelated questions instead of one envelope. */ .sm-dims{display:grid;grid-template-columns:1fr 1fr 1fr .85fr;gap:10px} /* --- CHECKBOX AND RADIO SETS ------------------------------------------- */ .sm-checks{display:grid;grid-template-columns:1fr 1fr;gap:11px 20px;margin-top:3px} .sm-checks-3{grid-template-columns:repeat(3,1fr)} .sm-checks-1{grid-template-columns:1fr} .sm-check{display:flex;align-items:flex-start;gap:10px;font-size:15.5px; line-height:1.4;color:var(--body);cursor:pointer} .sm-check input{width:18px;height:18px;margin:1px 0 0;flex:0 0 auto; accent-color:var(--blue);cursor:pointer} /* --- FILE UPLOAD ------------------------------------------------------- Rendered as a bordered plate rather than a bare browser file input, because the native control gives no room for the one line that matters most on this page: zip your CAD files. See utility-form.md, Duda form constraints. */ .sm-drops{display:grid;grid-template-columns:1fr;gap:12px} .sm-drop{display:flex;align-items:center;justify-content:space-between;gap:16px; flex-wrap:wrap;background:#fff;border:2px dashed #B4C0CB;padding:15px 17px} .sm-drop .t{min-width:0} .sm-drop .t b{display:block;font-family: var(--disp);font-size:15px;font-weight:600; letter-spacing:.1em;text-transform:uppercase;color:var(--body);margin-bottom:3px} .sm-drop .t span{display:block;font-size:14px;line-height:1.45;color:var(--gray)} .sm-drop .btn{font-family: var(--disp);font-size:14px;font-weight:600; letter-spacing:.11em;text-transform:uppercase;color:#fff;background:var(--blue); padding:11px 20px;white-space:nowrap;line-height:1;flex:0 0 auto;cursor:pointer; border:2px solid var(--blue)} .sm-drop .btn:hover{background:var(--blue-deep);border-color:var(--blue-deep)} /* --- THE NOTICE ------------------------------------------------------- Amber rail, not red. Red on this page is spent on submit. The export control line is written as an instruction and never as a warning. */ .sm-notice{border-left:5px solid var(--amber);background:#EEF2F6; padding:16px 20px;margin:18px 0 0} .sm-notice p{font-size:15px;line-height:1.55;color:var(--lead);margin:0 0 9px} .sm-notice p:last-child{margin:0} .sm-notice strong{color:var(--body)} /* --- SUBMIT ------------------------------------------------------------ */ .sm-submit-row{display:flex;align-items:center;gap:24px;flex-wrap:wrap; margin-top:30px;border-top:2px solid #CFD8E0;padding-top:26px} button.sm-submit{background:var(--red);color:#fff;border:2px solid var(--red); font-family: var(--disp);font-size:17px;font-weight:600;letter-spacing:.11em; text-transform:uppercase;padding:17px 42px;line-height:1;cursor:pointer; transition:.15s} button.sm-submit:hover{background:var(--red-dk);border-color:var(--red-dk)} .sm-submit-row .sm-hint{margin:0;max-width:36ch} /* --- THE SIDEBAR ------------------------------------------------------- Sticky, because the RFQ form is long and the checklist in the first card is a reference while filling it in rather than something read once at the top. 104px clears Duda's sticky header. IF THE HEADER HEIGHT CHANGES, THIS NUMBER CHANGES WITH IT and there is no other copy of it. Released below 1024, where the sidebar has already stacked under the form and a sticky element in a single column pins to nothing useful. */ .sm-side{position:sticky;top:104px} @media(max-width:1024px){.sm-side{position:static;top:auto}} /* --- SIDEBAR CARDS ----------------------------------------------------- */ .sm-card{background:#fff;border:1px solid var(--line);border-top:4px solid var(--blue); padding:24px 24px 26px;margin-bottom:20px} .sm-card:last-child{margin-bottom:0} .sm-card h3{font-size:19px;margin-bottom:12px} .sm-card p{font-size:15.5px;line-height:1.55;margin:0 0 10px} .sm-card p:last-child{margin-bottom:0} .sm-card-dark{background:var(--blue-deepest);border-color:var(--blue-deepest); border-top-color:var(--amber)} /* ARMORED, AND IT HAS TO BE. The base heading rule is #dm#dm#dm .sm-blk h1..h6{color:var(--body)} at (3,1,1). A bare .sm-card-dark h3 is (0,2,1) and loses, so the card's heading rendered near-black on blue-deepest and was invisible. The sm-blk-dark override does not reach it either: this card sits inside a LIGHT block. */ #dm#dm#dm .sm-blk .sm-card-dark h3{color:#fff} .sm-card-dark p{color:var(--ondark)} .sm-card-dark a{color:var(--blue-lt)} .sm-ticks{list-style:none;margin:0;padding:0} .sm-ticks li{position:relative;padding-left:25px;font-size:15.5px; line-height:1.45;margin:0 0 10px} .sm-ticks li:last-child{margin-bottom:0} .sm-ticks li::before{content:"\2713";position:absolute;left:0;top:0; color:var(--blue);font-weight:700} .sm-ticks-later li::before{content:"\2022";color:var(--gray);font-size:20px; line-height:1.05} .sm-card-dark .sm-ticks li{color:var(--ondark)} .sm-card-dark .sm-ticks li::before{color:var(--amber)} a.sm-tel{font-family: var(--disp);font-size:31px;font-weight:600;letter-spacing:.01em; color:#fff;display:block;margin:4px 0 6px;line-height:1;text-decoration:none} a.sm-tel:hover{color:var(--amber)} /* --- WHAT HAPPENS NEXT, the closing band ------------------------------- NAMED sm-nextsteps AND sm-nextstep, NOT sm-steps AND sm-step, AND THE RENAME IS THE WHOLE POINT OF THIS COMMENT. The first build called them .sm-steps and .sm-step. `.sm-steps` was already taken: it is the five-step process strip from the Anodizing and BluArc homepage work, a LIGHT-ground device, and its rules are stronger than anything a new block was going to bring: #dm#dm#dm .sm-steps h3{ ... color:var(--blue-deep)} (3,1,1) .sm-steps p:last-child{ ... color:var(--lead)} (0,2,1) Dropped onto a blue-deep band that made the three step HEADINGS render blue-deep on blue-deep - gone, not dim, gone - and the paragraphs render #3A444E. It also drew vertical dividers between the columns that were never in the design. Doug caught the paragraph colour on the live page; sampling the pixels gave rgb(58,66,88), which is var(--lead) and named the collision. The lesson, and it is cheap: a new device's class name has to be grepped against the shared library before it is written, not after it ships. The library is one flat namespace with no scoping of any kind. `sm-steps` is exactly the name a second person invents for a numbered row. The two colour rules below are belt and braces. They would not be needed in a clean namespace, and they are here because this block has already been bitten once. */ .sm-nextsteps{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:36px} .sm-nextstep{border-top:2px solid rgba(255,255,255,.26);padding-top:16px} .sm-nextstep .n{display:block;font-family: var(--disp);font-size:42px;font-weight:600; color:var(--amber);line-height:1;margin-bottom:10px} .sm-nextstep h3{font-size:19px;margin-bottom:9px} .sm-nextstep p{font-size:15.5px;margin:0} #dm#dm#dm .sm-blk-dark .sm-nextstep h3{color:#fff} .sm-blk-dark .sm-nextstep p{color:var(--ondark)} @media(max-width:1024px){.sm-nextsteps{grid-template-columns:1fr 1fr;gap:30px}} @media(max-width:767px){.sm-nextsteps{grid-template-columns:1fr;gap:26px}} /* --- TWO SMALL THINGS THAT WOULD OTHERWISE BE INLINE STYLES ------------ Nothing in a block carries a style attribute. These are the two places this page wanted one. */ .sm-card-sub{margin:18px 0 10px !important;font-size:15.5px;color:var(--body)} /* The closing line under the three steps. NOT sm-wayfind: that class sets colour:var(--gray), which measures 2.4:1 on blue-deep and fails at any size. Same rule and spacing, its own colour. */ .sm-closeline{margin:34px 0 0;padding-top:18px; border-top:1px solid rgba(255,255,255,.24);font-size:16px} .sm-blk-dark .sm-closeline{color:var(--ondark)} /* --- RESPONSIVE -------------------------------------------------------- */ @media(max-width:1024px){ .sm-fgrid-3{grid-template-columns:1fr 1fr} .sm-checks-3{grid-template-columns:1fr 1fr} } @media(max-width:767px){ .sm-fgrid,.sm-fgrid-3{grid-template-columns:1fr} .sm-checks,.sm-checks-3{grid-template-columns:1fr} .sm-dims{grid-template-columns:1fr 1fr} .sm-fset{margin-bottom:34px} .sm-drop{align-items:flex-start} .sm-drop .btn{width:100%;text-align:center} } /* ========================================================================== THE BLUARC BLOCK - style-guide.md section 11's deviation table, in CSS. Appended after the shared library, which is where an override belongs (duda-css-rules.md section 3: an override goes after the thing it overrides, and a page's own block never goes in front). Everything above this line is Standard's, unchanged and pinned. Everything below is the complete list of ways BluArc differs, and if a rule here is not traceable to section 11's table it is drift and it comes out. ONE TOKEN IS ADDED AND NOTHING IS REDEFINED. --cyan is BluArc's accent in place of --amber. The amber token stays exactly where it is: the closed list in section 2 is closed, and redefining --amber to a cyan value would make every future reader of this file believe amber IS cyan on this site. The swaps below are explicit, one accent role at a time, which is longer and is the only version that can be read. ========================================================================== */ :root{--cyan:#00A7E1} /* --- THE CYAN EYEBROW ON A DARK GROUND. THIS IS A DEFECT FIX, NOT A PREFERENCE, AND IT IS THE SAME DEFECT THE SHARED LIBRARY ALREADY DOCUMENTS ONE CLASS TO THE LEFT. ------------------------------------- `.sm-eyebrow-cy{color:#00A7E1}` is (0,1,0). `.sm-blk-dark p` is (0,1,1) and every eyebrow on this site is a

, so on the hero, the process strip and the RFQ band the cyan eyebrow would render #C2D0DB - the band body grey - exactly as every amber eyebrow on every Standard page did for a month before September 2, 2026. The shared library fixed the amber case with `.sm-blk-dark .sm-eyebrow` and did not add the cy twin, because no page had used it yet. BluArc is the first, and all three of its dark bands open with one. MEASURED IN THE BROWSER ON THIS PAGE, not read: without this rule the hero eyebrow computes to rgb(194,208,219); with it, rgb(0,167,225). FOLD THIS INTO THE SHARED LIBRARY at the next stitch - it is a hole in site-css-paste.css, not a BluArc deviation, and the fourth of its family (see that file's own eyebrow comment for the first three). */ .sm-blk-dark .sm-eyebrow-cy{color:var(--cyan)} /* --- THE NOWRAP RELEASE IS DEAD IN THE SHARED LIBRARY, AND THIS PAGE IS WHERE IT SHOWS. SECOND DEFECT FOUND BY THIS BUILD, AND IT IS THE SAME SHAPE AS THE FIRST. --------------------------------------------------- site-css-paste.css sets the pair and then releases it: #dm#dm#dm .sm-blk h1 .nb{white-space:nowrap} (3,2,0) @media(max-width:460px){.sm-blk h1 .nb{...normal}} (0,2,0) A media query does not raise specificity. The setter is armored and the release is not, so THE RELEASE HAS NEVER FIRED ON ANY PAGE ON EITHER SITE. Measured here at 390px: the span holding "Aluminum anodizing" is 443px wide inside a 350px column, and it drags the eyebrow, the deck and the whole hero column out to 443 with it. 93px of overflow, in the hero, on a phone. THIS IS THE AUGUST 17 DEFECT WEARING A DIFFERENT HAT. That one shipped an   that could not be released and clipped the headline mid-word as "Aluminum anodizi"; the fix was a span that CAN be released, and then the v4 rewrite armored the setter and left the release where it was. The mechanism is the fourth of the family site-css-paste.css already documents at its eyebrow comment: a rule losing a contest to another rule in the same stylesheet, with no error and nothing visible above 460px. FOLD THIS INTO THE SHARED LIBRARY at the next stitch and check every Standard page with a nowrap pair in its H1 - the release is dead on all of them, and it only bites below 460px where a long headline runs out of room. */ @media(max-width:460px){ #dm#dm#dm .sm-blk h1 .nb,#dm#dm#dm .sm-blk h2 .nb{white-space:normal} } /* --- ACCENT SWAPS ON SHARED CLASSES ----------------------------------- The roles where the shared library hard-codes Standard's amber and section 11's table says BluArc uses arc cyan. Nothing else in the library carries amber into a band this site will ever build: the proof bar takes its colour from the Section swatch, which is why the spec bar needs no CSS at all and only a cyan swatch, and the index rail, module numeral, manifest and pull quote belong to the nine-section interior spine that a four-page brochure has no page for. The h1/h2 em rule is armored #dm#dm#dm to match the rule it overrides - an unarmored (0,2,0) would lose to the library's (3,1,2). The last two are for the utility pages' sidebar card, which is built and waiting in the shared library and which /start-your-rfq and /contact will both use. */ #dm#dm#dm .sm-blk h1 em, #dm#dm#dm .sm-blk h2 em{color:var(--cyan)} .sm-card-dark .sm-ticks li::before{color:var(--cyan)} a.sm-tel:hover{color:var(--cyan)} /* --- THE SECONDARY BUTTON ON A DARK GROUND ---------------------------- section 11: `.sm-btn-cy` replaces `.sm-btn-ghost` on BluArc. Reconciled with colour rule 1 (section 4) on August 16, 2026: cyan is banned as a button FILL, so the resting state is an outline and the hover fill is a state rather than a resting signal. NOTE THE `a.` - `.sm-blk a{color:var(--blue)}` is (0,1,1) and a bare class is (0,1,0), which is what rendered every button label on Standard blue in August. Every button label on this site is white. */ a.sm-btn-cy{background:transparent;color:#fff;border-color:var(--cyan)} a.sm-btn-cy:hover{background:var(--cyan);color:#06202D;border-color:var(--cyan)} /* --- THE HERO GRID RATIO ---------------------------------------------- 1.3fr / .7fr against Standard's 1.18fr / .82fr, approved August 16, 2026. Copy column 731px instead of 629px, spec card 393px instead of 494px. It is not a preference: at 1.18 the H1 orphans its first word, and the two obvious alternatives were both tested and rejected - a max-width on the H1 does nothing (18ch is wider than the column at 64px Barlow Condensed), and widening the wrap or shrinking the 28px gutter touches section 6 layout constants that govern Standard too. 1.4/.6 buys a fourth line and drops the spec card to 342px, where its kicker breaks in two. style-guide.md section 7.1. A modifier on the base class, not a self-contained variant: section 7 of duda-css-rules.md bars base-plus-modifier for COLOUR utilities, which lose to a band's own colour rule. grid-template-columns is contested by nothing, and .sm-cols-split.sm-flip on Standard's anodizing page is the precedent. */ .sm-cols-split.sm-hero-ba{grid-template-columns:1.3fr .7fr} @media(max-width:1024px){.sm-cols-split.sm-hero-ba{grid-template-columns:1fr}} /* --- THE H1 SIZE ON THIS HERO, AND IT IS A MEASUREMENT RATHER THAN A PREFERENCE. ----------------------------------------------------------- THE SITEWIDE CAPS RULE AND THIS PAGE'S APPROVED HEADLINE COLLIDE, and the spec card is what pays for it. Measured at 1440: the nowrap span "Aluminum anodizing" needs 746px at 64px caps, .02em the 1.3fr copy column's share is 731px A grid item cannot shrink below its min-content, so the copy column gets PINNED at 746 and the spec card takes what is left: 275px instead of the 393px section 7.1 designed it for. At 275 the card's kicker breaks onto two lines - which is the exact failure section 7.1 predicts at 342px when it records why 1.4fr/.6fr was rejected. Nothing overflows and nothing errors; the hero just quietly stops being the approved hero. IT DID NOT HAPPEN ON THE WIREFRAME because that file predates the caps rule. In mixed case the same span is about 610px, comfortably inside the share, so nothing was ever pinned. Uppercase is roughly 20 per cent wider at this size, and this headline is long enough for that to matter. 60px is the fix and 62px was the other candidate. 62 is the largest size that fits (723px against 731) and it leaves 8px of headroom, which one edit to the headline or one font-loading difference would eat. 60 leaves about 31px. The change is invisible at reading distance and it restores 731/393 exactly. SCOPED TO THIS HERO, not to BluArc H1s generally: the three utility pages carry short headlines that pin nothing, and they should keep the sitewide clamp. Armored to (3,1,1) to match the rule it overrides, and later in source, which is what wins. THE GENERAL FORM OF THIS, worth carrying to any page on either site: a nowrap pair inside a heading sets a hard floor under its grid column, and caps raise that floor by about a fifth. Check the column split, not just the headline, whenever a long H1 sits beside an object. */ #dm#dm#dm .sm-hero-ba h1{font-size:clamp(38px,4.4vw,60px)} /* --- THE HERO SCRIM - ONE RULE, AND IT IS A KILL RATHER THAN A PAINT. September 10-11, 2026. THE HERO'S OVERLAY IS SET IN DUDA'S PANEL on this site: Background overlay ON, type Gradient, #000000 to 65% then #242424, 135deg, overlay opacity 85. The long note in Part 1 gives the panel settings as read back from the live preview, the measured contrast at four widths, why the falloff hex is the value that matters, what this costs, and why Standard must NOT copy it. THIS FILE MUST NOT NAME `::before` ANYWHERE. Any rule here would carry more weight than the panel's id-pinned rule and freeze the control again - which is exactly what happened twice on September 10, first with the library's gradient and then with a flat wash written to replace it. Adjusting the hero is a panel job now. If a future page needs a scrim in CSS instead, take the panel overlay OFF first and say so here. ::after IS KILLED AND MUST STAY KILLED. Part 1 paints a 96deg gradient there and the panel does not touch it, so left alive it would sit on top of the panel's wash and darken the left third past what was approved and past what was measured. It is killed here rather than deleted from Part 1 because that hunk is already carrying the file's one divergence and a second one buys nothing - this rule is later in source at equal specificity, so it wins and paints nothing. */ #dm#dm#dm .sm-hero-sec .flex-element.grid::after{background:none} /* --- THE HERO KICKER -------------------------------------------------- The full-width line beneath both hero columns. "Aluminum only. On purpose." It sits outside the split so it spans the wrap, and its rule is what closes the hero. */ .sm-heronote{padding-top:22px; border-top:1px solid rgba(255,255,255,.16);font-family: var(--disp); text-transform:uppercase;letter-spacing:.15em;font-size:19px;color:#93A9B9} #dm#dm#dm .sm-blk-dark p.sm-heronote strong{color:#fff;font-weight:600} /* --- HERO SPEC CARD (.sm-speccard) ------------------------------------ style-guide.md section 7.1, at that section's own numbers rather than the reduced ones deploy-standard-anodizing.css carries. The component was designed here, on a 393px hero column; Standard borrowed it into a narrower slot and took the value down from 30px to 26px and the row padding from 22px to 20px. This is its home, so it runs at spec. CAP AT THREE ROWS. A fourth turns a spec answer into a spec sheet. */ /* THE CARD'S GROUND IS BLUE-DEEPEST AT 44 PER CENT, NOT WHITE AT 4.5. Doug's call, September 11, 2026, seeing the built hero: the card was reading as an outlined rectangle rather than as an object, because a 4.5 per cent white tint over a dark photograph is very nearly nothing. Three strengths were rendered against the real frame and this is the middle one - the card sits forward of the photograph and the tank line still shows through it. EACH ROW CARRIES ITS OWN 135deg WASH so the three cells read as three cells rather than as one panel with hairlines. Brand blue, fading out by 72 per cent, which puts a light corner at each row's top-left and lets the hairline do less work. NOT CYAN, and that is colour rule 6 rather than taste: cyan is the page's accent for text and small marks, and using it as a FILL here would put it in competition with the cyan top border and the kicker beneath the card. MEASURED, and it costs nothing: the tint is dark enough to help every value inside the card and light enough not to flatten it. Card label 5.66 -> 5.81, card value 13.73 -> 14.17, card line 6.90 -> 7.48, all at 1440 on the live overlay. The kicker below the card is unchanged at 4.71 because it sits on the photograph, not on the card. THIS IS A DEVIATION and it belongs in style-guide.md section 11's table with the rest. bluarc-site.md decision 21. */ .sm-speccard{background:rgba(8,37,57,.44);border:1px solid rgba(255,255,255,.18); border-top:5px solid var(--cyan)} .sm-speccard > div{padding:22px 26px;border-top:1px solid rgba(255,255,255,.13); background:linear-gradient(135deg,rgba(28,117,188,.15),rgba(28,117,188,0) 72%)} .sm-speccard > div:first-child{border-top:0} .sm-speccard .n{font-family: var(--disp);font-size:12.5px;font-weight:600; letter-spacing:.2em;text-transform:uppercase;color:#8FA6B6;margin:0 0 7px} .sm-speccard .v{font-family: var(--disp);font-size:30px;font-weight:600; line-height:1.05;letter-spacing:.01em;color:#fff;margin:0 0 6px} .sm-speccard .v em{font-size:.57em;font-style:normal;font-weight:500; letter-spacing:.06em;color:#A8BDCB;margin-left:4px} .sm-speccard p:last-child{font-size:14.5px;line-height:1.5;color:#A8BDCB;margin:0} /* Centred and capped below the tablet ceiling, matching how Standard's hero object behaves at the same stop. */ @media(max-width:1024px){.sm-speccard{max-width:540px;margin:0 auto;width:100%}} .sm-specnote{font-family: var(--disp);font-size:14px;font-weight:600; letter-spacing:.2em;text-transform:uppercase;color:var(--cyan); text-align:center} /* The kicker is a

on a dark band, so it needs the same protection the eyebrow does or .sm-blk-dark p takes its colour. */ #dm#dm#dm .sm-blk-dark p.sm-specnote{color:var(--cyan)} /* --- FINISH SWATCH CARDS (.sm-fin / .sm-fincard) ---------------------- style-guide.md section 7.1. The one component with no Standard equivalent. The 5px cyan top border is permitted on a white card by colour rule 6, which governs text and anything carrying meaning at small size and explicitly allows an accent top border. COLLAPSES TO ONE COLUMN AT 1100px, NOT 900px, AND THE REASON IS THE SPEC LINE. Below roughly a 318px card the spec wraps to two lines, which lifts that card's hairline above the other two and reads immediately as a defect. Found by sweeping 360 to 1480 in 20px steps. Collapsing at 1100 also puts the component above Duda's 1024px tablet ceiling, so the port has one fewer breakpoint with no platform equivalent - which is why this media query is the only one in this file that does not sit on a Duda stop. THE FLEX COLUMN PLUS flex:1 ON THE PARAGRAPH is what keeps the three spec lines on one baseline across cards of different length, and `.sm-fincard .sm-spec{flex:0 0 auto}` is not optional: a bare `.sm-fincard p{flex:1}` also matches the spec paragraph and knocks it off the baseline by exactly one line height, which is the failure the pattern exists to prevent. */ .sm-fin{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px; align-items:stretch} .sm-fincard{background:#fff;border:1px solid var(--line);border-top:5px solid var(--cyan); display:flex;flex-direction:column} .sm-fincard .sm-sw{height:132px;flex:0 0 auto} .sm-fincard .sm-fintxt{padding:26px 26px 28px;flex:1;display:flex;flex-direction:column} #dm#dm#dm .sm-fincard h3{font-size:20px;letter-spacing:.08em;color:var(--blue-deep); margin:0 0 10px} .sm-fincard p{font-size:15.5px;line-height:1.6;color:#4C5866;margin:0 0 18px;flex:1} .sm-fincard .sm-spec{flex:0 0 auto;margin:0;padding-top:14px; border-top:1px solid var(--line);font-family: var(--disp);font-size:13px; font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--gray)} @media(max-width:1100px){.sm-fin{grid-template-columns:1fr;margin-top:38px}} /* THE THREE SWATCH PANELS ARE A LAUNCH FALLBACK AND THEY ARE DELIBERATELY NOT PHOTOGRAPHS OF ANYTHING. image-prompts.md sections 8 and 9: BluArc sells these three finishes BY SPECIFICATION, so a generated swatch is a guess at a real deliverable and is the one image category on either site that carries real risk. The approved wireframe carried a visible "Placeholder swatch" label, which is right for a review artifact and wrong for a live page. These are flat tone panels that do not claim to be a finish. When Haley supplies three photographs shot together under one light, each of these three rules becomes a Duda Image widget in the same 132px slot and nothing else on the card changes. */ .sm-sw-clear{background:linear-gradient(150deg,#DCE3E8 0%,#B4BEC6 48%,#93A0AA 100%)} .sm-sw-hard{background:linear-gradient(150deg,#8C8578 0%,#6B665C 52%,#4A4740 100%)} .sm-sw-black{background:linear-gradient(150deg,#33383B 0%,#1A1E21 52%,#0B0D0F 100%)} /* --- COLOUR ROW (.sm-sws) --------------------------------------------- 112px swatch height against Standard's 62px, doubled August 17, 2026 and recorded in section 11 rather than left as drift. Two reasons, and neither is taste: this row runs the full 1180px wrap where Standard's sits inside a narrow split column, so at 62px it reads as a ribbon rather than as colour; and colour is one of the two questions this page exists to answer, so it earns the height. Border is --line on white here against rgba(255,255,255,.28) on Standard's dark ground. Each colour is a literal depiction of an anodized part, not a UI token, so none of them is drawn from the closed palette in section 2. */ .sm-sws{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px} .sm-sws figure{margin:0;flex:1 1 0;min-width:74px} .sm-sws .sm-chip{display:block;height:112px;border:1px solid var(--line)} .sm-sws figcaption{font-family: var(--disp);font-size:12.5px;font-weight:600; letter-spacing:.14em;text-transform:uppercase;color:var(--gray); margin-top:9px;text-align:center} .sm-c-black{background:linear-gradient(150deg,#2A2E31,#0B0D0F)} .sm-c-clear{background:linear-gradient(150deg,#DCE3E8,#9EAAB3)} .sm-c-red{background:linear-gradient(150deg,#B32432,#78121C)} .sm-c-green{background:linear-gradient(150deg,#3E6B45,#1F3B26)} .sm-c-blue{background:linear-gradient(150deg,#1F5FA0,#123A61)} .sm-c-custom{background:conic-gradient(from 210deg,#2A2E31,#B32432,#3E6B45,#1F5FA0,#DCE3E8,#2A2E31)} @media(max-width:600px){.sm-sws .sm-chip{height:88px}} /* --- FIVE-STEP PROCESS STRIP (.sm-steps) ------------------------------ style-guide.md section 7.1, in its BluArc form: cyan numerals and a 44px cyan tick where Standard's anodizing page runs amber. THIS STRIP SITS ON BLUE-DEEPEST, NOT BLUE-DEEP, AND THAT IS A CONTRAST DECISION RATHER THAN A RHYTHM ONE. Cyan measures 5.7:1 on blue-deepest and 4.21:1 on blue-deep, and a 15px step numeral is not large text, so blue-deep fails AA. That 4.21 figure was missing from section 3 until August 16, 2026, which is how the first BluArc build put the strip on the wrong ground. FIVE IS THE COUNT, not a range: it fits the width and it forces the copy to stay mechanical. The breakpoint structure is the one Standard's port uses rather than the wireframe's, because its stops are Duda's - two columns at the tablet ceiling, one at 600. */ .sm-steps{display:grid;grid-template-columns:repeat(5,1fr);margin:34px 0 8px; border-top:1px solid rgba(255,255,255,.18)} .sm-steps > div{position:relative;padding:30px 26px 4px; border-left:1px solid rgba(255,255,255,.18)} .sm-steps > div:first-child{border-left:0;padding-left:0} .sm-steps > div:last-child{padding-right:0} .sm-steps > div::before{content:"";position:absolute;top:-1px;left:26px; width:44px;height:5px;background:var(--cyan)} .sm-steps > div:first-child::before{left:0} .sm-steps .n{font-family: var(--disp);font-size:15px;font-weight:600; letter-spacing:.2em;color:var(--cyan);margin:0 0 12px} #dm#dm#dm .sm-steps h3{font-size:18px;letter-spacing:.11em;color:#fff;margin:0 0 10px} .sm-steps p:last-child{font-size:15px;line-height:1.55;color:#A8BDCB;margin:0} /* The numeral is a

on a dark ground. Same family of defect as the eyebrow: without this it takes .sm-blk-dark p's grey. */ #dm#dm#dm .sm-blk-dark .sm-steps p.n{color:var(--cyan)} @media(max-width:1024px){ .sm-steps{grid-template-columns:repeat(2,1fr);border-top:0} .sm-steps > div{border-left:1px solid rgba(255,255,255,.18); border-top:1px solid rgba(255,255,255,.18);padding:30px 26px 22px} .sm-steps > div:nth-child(odd){border-left:0;padding-left:0} .sm-steps > div:nth-child(odd)::before{left:0} .sm-steps > div:last-child{padding-right:26px}} @media(max-width:600px){ .sm-steps{grid-template-columns:1fr} .sm-steps > div{border-left:0;padding-left:0;padding-right:0} .sm-steps > div::before{left:0} .sm-steps > div:first-child{border-top:0}} /* --- DIMENSION CALLOUT (.sm-dim) -------------------------------------- style-guide.md section 7.1, at the approved wireframe's metrics: centred, the number at clamp(78px,10vw,132px), a 14px gradient bar, then label and caption. Standard's anodizing page carries a left-aligned variant sized for a narrower column; this is the component's own form. BRAND BLUE AND NOT CYAN, and the end tick is blue-deep rather than Standard's amber. Both follow from colour rule 6, which keeps BOTH warm accents and cyan off light grounds - this card sits on white inside a white band. The one place BluArc's accent does not appear on its own page, and that is the rule working rather than an inconsistency. Standard renders the same 120 inch fact as two matched bars because the PAIRING is its point. BluArc has one number, and a bar chart of one bar is a chart of nothing. */ .sm-dim{background:#fff;border:1px solid var(--line);padding:44px 40px 40px; text-align:center} .sm-dim .v{font-family: var(--disp);font-size:clamp(78px,10vw,132px);font-weight:600; line-height:.9;letter-spacing:-.01em;color:var(--blue);margin:0} .sm-dim .v em{font-size:.28em;font-style:normal;letter-spacing:.16em; color:var(--blue-deep);margin-left:6px;vertical-align:super} .sm-dim .bar{height:14px;position:relative;margin:26px 0 0; background:linear-gradient(90deg,var(--blue-deep),var(--blue-lt))} .sm-dim .bar::after{content:"";position:absolute;right:0;top:-6px;bottom:-6px; width:3px;background:var(--blue-deep)} .sm-dim .n{font-family: var(--disp);font-size:14px;font-weight:600;letter-spacing:.2em; text-transform:uppercase;color:var(--gray);margin:16px 0 0} .sm-dim p:last-child{font-size:14px;line-height:1.5;color:var(--gray);margin:16px 0 0} @media(max-width:600px){.sm-dim{padding:34px 24px 30px}} /* --- THE TWO-COLUMN BAND (.sm-cols-x) --------------------------------- Capacity and Machining both set copy against an object at equal width, vertically centred. The shared .sm-cols-2 is the right geometry with the wrong spacing for a band-level split - it carries a 28px block margin and a 40px gap meant for a row inside prose. One class, two sections, and it is the only layout class this page adds. */ .sm-cols-x{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center} @media(max-width:1024px){.sm-cols-x{grid-template-columns:1fr;gap:38px}} /* --- THE CROSS-BRAND PANEL (.sm-xpanel) ------------------------------- The mirror of the Standard homepage's BluArc panel, inverted: there the BluArc mark sits in a dark frame inside a blue-deep band, here the Standard mark sits in a dark frame inside an off-white one. THE MARK IS INLINE SVG, not an image. It is small brand art rather than a photograph, so none of the reasons a photograph must be a native Duda image apply, and inline it needs no upload and cannot arrive as a broken CDN URL. It is also why nothing here is an at a fixed box, which inherits the theme's height rule and can be reshaped (duda-css-rules.md section 6). */ .sm-xpanel{position:relative;overflow:hidden;min-height:340px;padding:48px 34px; display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center; background:linear-gradient(150deg,#16232e 0%,#0b141b 58%,#111f2a 100%)} .sm-xpanel::before{content:"";position:absolute;inset:0; background:radial-gradient(90% 70% at 50% 38%,rgba(28,117,188,.34),transparent 66%)} .sm-xpanel::after{content:"";position:absolute;inset:0; background:repeating-linear-gradient(112deg,rgba(255,255,255,.022) 0 2px,transparent 2px 11px)} .sm-xpanel svg{position:relative;z-index:2;height:60px;width:auto;margin:0 auto 22px; display:block} .sm-xpanel p{position:relative;z-index:2;font-family: var(--disp);font-size:13px; font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#9FBACB; line-height:1.7;margin:0} .sm-xpanel p strong{display:block;color:var(--blue-lt);font-weight:600; letter-spacing:.22em;margin-bottom:8px} @media(max-width:600px){.sm-xpanel{min-height:280px;padding:38px 24px}} /* --- THE RFQ BAND (.sm-rfq / .sm-rfqlist) ----------------------------- Standard's closing band says "Send us the print." This one says "Send us the parts." Same component, same vocabulary, one different noun. The dash bullet is cyan and it is decoration rather than meaning: the item reads without it, which is the same test the proof bar's red check has to pass. */ .sm-rfq{display:grid;grid-template-columns:1.05fr .95fr;gap:62px;align-items:start} @media(max-width:1024px){.sm-rfq{grid-template-columns:1fr;gap:38px}} #dm#dm#dm .sm-rfq h3{font-family: var(--disp);font-size:15px;font-weight:600; letter-spacing:.16em;color:#fff;margin:0} .sm-rfqlist{list-style:none;padding:0} .sm-rfqlist li{position:relative;padding-left:26px;margin:0 0 13px; font-size:16px;line-height:1.5} .sm-rfqlist li:last-child{margin-bottom:0} .sm-rfqlist li::before{content:"";position:absolute;left:0;top:11px;width:11px; height:2px;background:var(--cyan)} /* --- THE ADDRESS LINE UNDER THE RFQ BUTTONS --------------------------- Not a paragraph and not an eyebrow: it closes the band the way the hero kicker closes the hero. Small, tracked, and quiet on purpose. */ .sm-addr{font-family: var(--disp);font-size:13px;font-weight:600;letter-spacing:.15em; text-transform:uppercase;color:#8FA6B6} #dm#dm#dm .sm-blk-dark p.sm-addr{color:#8FA6B6} /* --- FIFTH AND SIXTH INSTANCES OF THE SAME FAMILY, FOUND BY PROBING COMPUTED MARGINS RATHER THAN BY READING. ----------------------------- `.sm-blk p{margin:0 0 18px}` and `.sm-blk ul{margin:0 0 18px}` are both (0,1,1). A single-class utility on a

or a