/* ========================================================================== Hacquebord Staal & Buizen - ez2Web theme Built on the design language of hacquebord.nl: charcoal surfaces, square corners, Raleway in caps over Open Sans, one yellow accent (#F4DF0C) and a blue footer. Runs in Bootstrap dark mode, so _Layout puts data-bs-theme=dark on (Layout module, darkStyle = true) and the navigation is the always collapsed one (constandCollapsedNavbar = true), the way the main site keeps its menu behind one button at every width. Only this file and company.js are company specific; everything else comes from Bootstrap 5.3 and Global.css. 1. Design tokens 2. Base and typography 3. Page frame (bar, content, footer) 4. Navigation bar 5. Panels and cards 6. Product tree (sidebar) 7. Product group tiles 8. Tables 9. Buttons 10. Forms and controls 11. Shopping cart and summary 12. Login page 13. Hidden on purpose ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Raleway:wght@300;500;600;700;800&display=swap'); /* ========================================================================== 1. Design tokens ========================================================================== */ :root, [data-bs-theme="dark"] { /* Steel greys, from the darkest surface up */ --hb-black: #141414; /* navigation bar */ --hb-page: #1F1F1F; /* page behind everything */ --hb-panel: #292929; /* the content panel, the body colour of the site */ --hb-raised: #3A3A3A; /* inputs, table head, hover */ --hb-line: #454545; --hb-line-soft: #343434; /* Ink */ --hb-white: #FFFFFF; --hb-muted: #BBBBBB; /* 9:1 on the panel */ --hb-dim: #8C8C8C; /* Accents */ --hb-yellow: #F4DF0C; --hb-yellow-bright: #FFE800; --hb-yellow-deep: #D6C40A; --hb-blue: #23A1D1; /* links */ --hb-blue-deep: #1B70DF; /* the footer band */ /* Frame - square, the whole site has no rounded corner anywhere */ --hb-radius: 0; --hb-navbar-height: 78px; --hb-logo-height: 46px; --hb-content-top: 28px; --hb-bg-shift: 0px; /* parallax offset, written by company.js */ /* Bootstrap reads these everywhere, so components this file never mentions still come out in the right colours, font and (absence of) radius. Listed on the dark attribute as well, since that is what _Layout sets. */ --bs-primary: #F4DF0C; --bs-primary-rgb: 244, 223, 12; --bs-body-bg: #292929; --bs-body-color: #FFFFFF; --bs-emphasis-color: #FFFFFF; --bs-secondary-color: #BBBBBB; --bs-border-color: #454545; --bs-border-radius: 0; --bs-link-color: #23A1D1; --bs-link-color-rgb: 35, 161, 209; --bs-link-hover-color: #F4DF0C; --bs-font-sans-serif: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --bs-body-font-family: var(--bs-font-sans-serif); --hb-display: "Raleway", var(--bs-font-sans-serif); } /* ========================================================================== 2. Base and typography ========================================================================== */ body, html { font-family: var(--bs-font-sans-serif) !important; font-style: normal; } html { background-color: var(--hb-page); } body { background-color: transparent; /* the photo layer in section 3 shows through */ color: var(--hb-white); padding-top: calc(var(--hb-navbar-height) + var(--hb-content-top)); padding-bottom: 76px; /* clears the fixed footer band */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Raleway in caps with a touch of tracking, as on every heading of the site. */ h1, h2, h3, h4, h5, h6, h1.text-muted, h2.text-muted, h3.text-muted { color: var(--hb-white); font-family: var(--hb-display); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; } h1, h1.page-title, h2.page-title { font-size: 1.75rem; } h2 { font-size: 1.375rem; } h3 { font-size: 1.125rem; } h5, h6 { font-size: 1rem; } /* The page title carries the yellow rule that marks a section on the site. */ h1.page-title, h2.page-title, h1.groupedlines-title, h2.groupedlines-title { border-bottom: 3px solid var(--hb-yellow); color: var(--hb-white) !important; display: inline-block; padding-bottom: 8px; text-transform: uppercase; } .text-muted { color: var(--hb-muted) !important; } a { color: var(--hb-blue); text-decoration: none; } a:hover { color: var(--hb-yellow); text-decoration: none; } ::selection { background-color: var(--hb-yellow); color: var(--hb-black); } .page-header { border-bottom: 1px solid var(--hb-line-soft); padding-bottom: 8px; } .download-row-inner { border-bottom: 1px solid var(--hb-line-soft); padding-bottom: 10px; } /* ========================================================================== 3. Page frame (bar, content, footer) ========================================================================== */ /* The warehouse photo is the page background: a layer pinned to the viewport behind everything, so it fills the full height at any scroll position. A fixed layer rather than background-attachment: fixed, which mobile browsers render badly. The wash is heavy enough to keep the photo a texture behind the panels instead of something competing with the yellow. It reaches 25vh past the viewport on either side, a touch more than the 20vh company.js drifts it, so the edges never come into view. Keep that slack ahead of the limit in the script. */ body::before { content: ""; position: fixed; top: -25vh; left: 0; right: 0; height: 150vh; z-index: -1; transform: translate3d(0, var(--hb-bg-shift), 0); will-change: transform; /* Both paths on purpose: the relative one resolves when this stylesheet is served as a file, the rooted one when it is served from the style bundle. */ background-image: linear-gradient(180deg, rgba(20, 20, 20, .88) 0%, rgba(20, 20, 20, .70) 45%, rgba(20, 20, 20, .90) 100%), url('Background.png'), url('/Content/Company/Background.png'); background-position: center center; background-repeat: no-repeat; background-size: cover; } /* The empty band _Layout renders takes no room: the photo is the page. */ .header-outerwrapper { display: none; } .container-xxl.main-content { margin-bottom: 44px; margin-top: 0; position: relative; } /* One panel per page, square, separated from the page by a hairline instead of a shadow. */ .main-content > .row:nth-child(2) { background-color: var(--hb-panel); border: 1px solid var(--hb-line-soft); margin-left: 0; margin-right: 0; padding: 28px 20px 36px; } .title-container { padding-top: 4px; } footer.footer { background-color: var(--hb-blue-deep); border-top: 0; color: rgba(255, 255, 255, .85) !important; font-family: var(--hb-display); font-size: .8125rem; font-weight: 500; letter-spacing: .3px; } footer.p-3 { padding: 14px 15px !important; } footer a, footer .navbar-text, footer #deliveryTermsModalLink, footer #version { color: #fff; } footer a:hover, footer a:active, footer a:focus, footer #deliveryTermsModalLink:hover { color: var(--hb-yellow); text-decoration: none; } .fixed-bottom { border: 0; } /* ========================================================================== 4. Navigation bar ========================================================================== */ .navbar.fixed-top { background-color: var(--hb-black); background-image: none; border-bottom: 3px solid var(--hb-yellow); box-shadow: none !important; min-height: var(--hb-navbar-height); padding-bottom: .5rem; padding-top: .5rem; } .logo { background-image: url(https://hacquebord.nl/image/catalog/logo-1.png); background-position: left center; background-repeat: no-repeat; background-size: contain; height: var(--hb-logo-height); margin-right: 24px; width: 260px; } .navbar .nav-link, .navbar .nav-item > .text-white, .navbar .navbar-toggler, .navbar .btn.text-light { color: var(--hb-white); } /* The icons of the collapsed bar carry .fs-1 in the markup, which is 2.5rem and far too loud next to the logo. Yellow at rest, white when you point at them, so they answer the opposite way round from the text links. */ .navbar .bi { color: var(--hb-yellow); font-size: 1.35rem !important; transition: color .15s ease-in-out; vertical-align: middle; } .navbar .navbar-toggler .bi { font-size: 1.6rem !important; } .navbar a:hover .bi, .navbar a:focus .bi, .navbar button:hover .bi, .navbar button:focus .bi, .navbar .navbar-toggler:hover .bi { color: var(--hb-white); } .navbar .nav-link { font-family: var(--hb-display); font-size: .9375rem; font-weight: 600; letter-spacing: .5px; position: relative; text-transform: uppercase; transition: color .15s ease-in-out; } .navbar .nav-link:hover, .navbar .nav-link:focus { color: var(--hb-yellow) !important; } .navbar .active .nav-link { color: var(--hb-yellow) !important; } .navbar-toggler { border: 1px solid rgba(255, 255, 255, .25); border-radius: 0; } .navbar-toggler:focus, .navbar-toggler:active { box-shadow: none; outline: none; } /* The menu of the always collapsed bar drops over the page, so it gets the same black as the bar. No yellow edge of its own: the bar grows with the open menu and its own border already closes it off. Repeating it here put a second line a few pixels lower, and only as wide as the container. */ .navbar .navbar-collapse { background-color: var(--hb-black); margin: .5rem -1rem -.5rem; padding: .5rem 1rem 1rem; } /* The claim sits in the middle of the SCREEN, not in what is left between the logo and the icons. The markup gives it ms-auto, which would push it against the icon group, so it is taken out of the flow and pinned to the centre of the bar, which spans the viewport. Top and height are set as well, otherwise it falls back to its static position: the bar aligns its items centred, so with the menu open the claim would sink to the middle of the whole opened bar. This keeps it on the logo row, where it belongs. */ .navbar.fixed-top .navbar-text { align-items: center; color: var(--hb-muted); display: flex; font-family: var(--hb-display); font-weight: 600; /* The height of the CLOSED bar, minus its yellow border, so the claim rests on the same line as the logo and stays there when the bar grows. */ height: calc(var(--hb-navbar-height) - 3px); justify-content: center; left: 50%; letter-spacing: 1px; margin: 0 !important; position: absolute; text-transform: uppercase; top: 0; transform: translateX(-50%); white-space: nowrap; } .navbar.fixed-top .navbar-text:after { color: var(--hb-muted); content: "DE STAALEXPERT SINDS 1865"; font-size: 1rem; } .navbar .badge.bg-danger { background-color: var(--hb-yellow) !important; border: 0; color: var(--hb-black); font-weight: 700; } /* ========================================================================== 5. Panels and cards ========================================================================== */ .card { background-color: var(--hb-panel); border: 1px solid var(--hb-line-soft); border-radius: var(--hb-radius); box-shadow: none; } .card > .card-header { background-color: var(--hb-page); background-image: none; border-bottom: 2px solid var(--hb-yellow); color: var(--hb-white) !important; font-family: var(--hb-display); font-size: .9375rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; } .card > .card-header a, .card > .card-header .all-products { color: var(--hb-white) !important; font-size: .9375rem !important; font-weight: 700; } .card > .card-header a:hover { color: var(--hb-yellow) !important; } .card-body { background-color: var(--hb-panel); } .card-header.datails-title, .card-header.change-password-title, .card-header.reset-password-title-container { background-color: var(--hb-page); } .summary { background-color: transparent; border-radius: var(--hb-radius); } .list-group-item { background-color: var(--hb-panel); border-color: var(--hb-line-soft); color: var(--hb-white); } /* Rows you can pick answer to the pointer the same way table rows do. */ .list-group-item.clickable:hover, .list-group-item.clickable:hover .text-muted { background-color: var(--hb-raised); color: var(--hb-white); } /* What is chosen is yellow, the one thing on the page that shouts. */ .list-group-item.active { background-color: var(--hb-yellow) !important; border-color: var(--hb-yellow); color: var(--hb-black); font-weight: 600; z-index: 2; } .list-group-item.active .text-muted { color: rgba(20, 20, 20, .75) !important; } .alert { border-radius: var(--hb-radius); } .modal-content { background-color: var(--hb-panel); border: 1px solid var(--hb-line); border-radius: var(--hb-radius); } .modal-header, .modal-footer { border-color: var(--hb-line-soft); } .modal-title { font-family: var(--hb-display); letter-spacing: 1px; text-transform: uppercase; } /* ========================================================================== 6. Product tree (sidebar) ========================================================================== */ #productTreeContainer .card-body, #productTreeContainer .card-body #productTree .productTree ul { background-color: var(--hb-panel); } #productTreeContainer .productTree ul li a, .root-articleLink { background-color: var(--hb-panel) !important; color: var(--hb-muted); transition: background-color .15s ease-in-out, color .15s ease-in-out; } #productTreeContainer .productTree ul li a:hover, .root-articleLink:hover { background-color: var(--hb-raised) !important; color: var(--hb-white); text-decoration: none; } #productTreeContainer .productTree > ul > li > a { border-bottom: 1px solid var(--hb-line-soft); color: var(--hb-white); } /* The markup writes "currentitem" in lower case, which the rule in Global.css (a.currentItem) does not match, so the active group is coloured here. */ .root-articleLink.currentitem, #productTreeContainer .productTree ul li a.currentitem { background-color: var(--hb-yellow) !important; color: var(--hb-black) !important; font-weight: 700; } /* ========================================================================== 7. Product group tiles ========================================================================== */ .rectangle.productcategory.maincategory { background-color: var(--hb-page); border: 1px solid var(--hb-line-soft); border-left: 3px solid var(--hb-line); border-radius: var(--hb-radius); height: 102px; margin-bottom: 20px; padding-right: 12px; transition: border-left-color .15s ease-in-out, background-color .15s ease-in-out; } .rectangle.productcategory.maincategory:hover { background-color: var(--hb-raised); border-left-color: var(--hb-yellow); } .maincategory .groupimage { padding: 0 14px; width: auto; } /* Square, like everything else, and dimmed until you point at the tile. */ .maincategory .groupimage .product-category-image { background-color: var(--hb-panel); border: 1px solid var(--hb-line); border-radius: var(--hb-radius); filter: grayscale(35%); height: 76px; object-fit: cover; transition: filter .15s ease-in-out; width: 76px; } .maincategory:hover .groupimage .product-category-image { filter: none; } .maincategory .groupdtext { overflow: hidden; overflow-wrap: break-word; padding-left: 5px; } .maincategory .groupdtext a, .maincategory .groupdtext a:active, .maincategory .btn-product.productcategory_link_btn { color: var(--hb-white); font-family: var(--hb-display); font-size: 15px !important; font-weight: 600; letter-spacing: .5px; overflow: hidden; text-decoration: none; text-transform: uppercase; } .maincategory:hover .groupdtext a, .maincategory .groupdtext a:hover { color: var(--hb-yellow); text-decoration: none; } /* Plain group tiles: whatever sits inside the button follows it. */ .productcategory .btn:hover, .productcategory .btn:hover *, .productcategory .btn:focus, .productcategory .btn:focus * { color: var(--hb-black); } #productscontainer > div { margin-bottom: 20px; } #productscontainer > div.download-container, #productscontainer > div.modal, #productscontainer > div.row { margin-bottom: 0; } /* ========================================================================== 8. Tables ========================================================================== */ table.dataTable thead > tr > th, table.dataTable thead > tr > td, .table > thead > tr > th { background-color: transparent; border-left: none; border-right: none; border-top: none; color: var(--hb-muted); font-family: var(--hb-display); font-size: .8125rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; } /* datatables.min.css draws a light line on the right of the LAST cell of every row: table.dataTable.table-bordered th:last-child { border-right: 1px solid ... } In a grouped header that lands twice: once next to the last price band, which is the last cell of the second row, and once at the outer edge. Specificity (0,3,2) again, hence the !important. */ table.dataTable.table-bordered thead > tr > th:last-child, table.dataTable.table-bordered thead > tr > td:last-child { border-right: none !important; } /* A grouped header - "Bruto prijs per KG" spanning the price bands over a second row of columns - puts cells in a row that does not reach the bottom of the header. The heavy rule therefore goes on the cells that do reach it: the last header row, plus the cells above it that span down into it. Putting it on every header cell draws a second rule straight across the middle. The !important is aimed at datatables.min.css, which carries table.dataTable.table-bordered tr:last-child th { border-bottom-width: 0 } at a higher specificity than anything sane here. That rule flattened the line under the second header row, so it ran under the spanning columns only. */ table.dataTable thead > tr:last-child > th, table.dataTable thead > tr:last-child > td, table.dataTable thead > tr > th[rowspan]:not([rowspan="1"]), .table > thead > tr:last-child > th, .table > thead > tr > th[rowspan]:not([rowspan="1"]) { border-bottom: 2px solid var(--hb-yellow) !important; } /* The spanning cell keeps a light rule over its own columns, so it still reads as the heading of that group. */ table.dataTable thead > tr:not(:last-child) > th:not([rowspan]), table.dataTable thead > tr:not(:last-child) > th[rowspan="1"], .table > thead > tr:not(:last-child) > th:not([rowspan]), .table > thead > tr:not(:last-child) > th[rowspan="1"] { border-bottom: 1px solid var(--hb-line); } table.dataTable tbody tr { background-color: transparent; border-bottom: 1px solid var(--hb-line-soft); border-left: none; border-right: none; border-top: none; } table.dataTable tbody tr td, table.dataTable tbody tr td:last-child { border: none !important; } table.dataTable.product-table tbody tr td, table.dataTable.product-table tbody tr th, table.dataTable.product-table-sm tbody tr td, table.dataTable.product-table-sm tbody tr th { background-color: transparent !important; color: var(--hb-white) !important; } /* Hovering a row lifts it a step out of the panel. The hidden order rows that hang under a product row are skipped: they are not a row you point at, they belong to the row above. */ .table { --bs-table-hover-bg: var(--hb-raised); --bs-table-hover-color: #fff; } table.dataTable tbody > tr:hover:not([id^="product_addToShoppingCart_"]) > *, .table-hover > tbody > tr:hover:not([id^="product_addToShoppingCart_"]) > * { background-color: var(--hb-raised) !important; color: var(--hb-white) !important; } /* Everything inside the row comes along, whatever colour it carries of its own - muted labels, links, euro signs, marks. Setting it on the cell is not enough: a child with its own colour keeps it and turns unreadable. */ table.dataTable tbody > tr:hover:not([id^="product_addToShoppingCart_"]) > * *, .table-hover > tbody > tr:hover:not([id^="product_addToShoppingCart_"]) > * * { color: var(--hb-white) !important; } /* Buttons in the row keep their own fill, only the outline variant needs to come along. Same exception: the order panel that opens under a product row keeps its own look. */ table.dataTable tbody > tr:hover:not([id^="product_addToShoppingCart_"]) .btn-secondary, .table-hover > tbody > tr:hover:not([id^="product_addToShoppingCart_"]) .btn-secondary { --bs-btn-color: var(--hb-yellow); --bs-btn-bg: transparent; --bs-btn-border-color: var(--hb-yellow); --bs-btn-hover-color: var(--hb-black); --bs-btn-hover-bg: var(--hb-yellow); --bs-btn-hover-border-color: var(--hb-yellow); } /* Zebra striping on the overview lists only - the product tables carry hidden order rows that would break the rhythm. */ table.dataTable.basic-table tbody tr:nth-of-type(odd) > td, table.dataTable.basic-table-afzet tbody tr:nth-of-type(odd) > td, table.dataTable.contract-product-table tbody tr:nth-of-type(odd) > td { background-color: rgba(255, 255, 255, .03); } .product-table td:not(:first-child), .product-table th:not(:first-child), .product-table-sm td:not(:first-child), .product-table-sm th:not(:first-child) { text-align: center !important; } .product-table td:first-child, .product-table th:first-child, .product-table-sm td:first-child, .product-table-sm th:first-child { text-align: start !important; } .assortimentMark { color: var(--hb-yellow) !important; } .table-responsive > .table > tbody > tr > td { white-space: normal; } .dt-paging .page-item .page-link, .dt-paging .page-item.disabled .page-link { background-color: transparent; border-color: var(--hb-line); border-radius: 0; box-shadow: none; color: var(--hb-white); } .dt-paging .page-item.active .page-link { background-color: var(--hb-yellow); border: 1px solid var(--hb-yellow); border-radius: 0; box-shadow: none; color: var(--hb-black); } input.custom-search { background-color: var(--hb-raised); border: 1px solid var(--hb-line); border-radius: var(--hb-radius); color: var(--hb-white); min-width: 220px; padding: .375rem .75rem; } input.custom-search:focus { border-color: var(--hb-yellow); box-shadow: 0 0 0 .15rem rgba(244, 223, 12, .25); outline: none; } /* ========================================================================== 9. Buttons ========================================================================== */ .btn { border-radius: var(--hb-radius); font-family: var(--hb-display); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; transition: background-color .15s ease-in-out, border-color .15s ease-in-out, color .15s ease-in-out; } /* Links styled as buttons do not take the link colours. */ a.btn:hover, a.btn:focus { text-decoration: none; } /* Yellow on near black is the one loud pairing the site allows itself, so it is reserved for the step forward, including the order and quote buttons, which carry .btn-success in the markup. */ .btn-primary, .btn-success, .form-signin .btn-login, #shoppingCartSummary .btn-primary { --bs-btn-color: var(--hb-black); --bs-btn-bg: var(--hb-yellow); --bs-btn-border-color: var(--hb-yellow); --bs-btn-hover-color: var(--hb-black); --bs-btn-hover-bg: var(--hb-yellow-bright); --bs-btn-hover-border-color: var(--hb-yellow-bright); --bs-btn-active-color: var(--hb-black); --bs-btn-active-bg: var(--hb-yellow-deep); --bs-btn-active-border-color: var(--hb-yellow-deep); --bs-btn-disabled-color: var(--hb-black); --bs-btn-disabled-bg: var(--hb-yellow-deep); --bs-btn-disabled-border-color: var(--hb-yellow-deep); --bs-btn-focus-shadow-rgb: 244, 223, 12; background-image: none; } /* Everything else is a ghost: a hairline box that fills in on hover, the pattern the main site uses for its secondary calls to action. */ .btn-secondary, .btn-back, .productcategory .btn { --bs-btn-color: var(--hb-white); --bs-btn-bg: transparent; --bs-btn-border-color: var(--hb-line); --bs-btn-hover-color: var(--hb-black); --bs-btn-hover-bg: var(--hb-yellow); --bs-btn-hover-border-color: var(--hb-yellow); --bs-btn-active-color: var(--hb-black); --bs-btn-active-bg: var(--hb-yellow-deep); --bs-btn-active-border-color: var(--hb-yellow-deep); --bs-btn-focus-shadow-rgb: 244, 223, 12; background-image: none; } table.products .btn:hover { background-color: var(--hb-yellow); color: var(--hb-black); } #revenueHeader .btn-info { background: transparent !important; border-color: var(--hb-line) !important; box-shadow: none; color: var(--hb-white); } .progress { background-color: var(--hb-raised); border-radius: 0; } .progress-bar { background-color: var(--hb-yellow); } .badge.bg-primary { background-color: var(--hb-yellow) !important; border-radius: 0; color: var(--hb-black); } /* ========================================================================== 10. Forms and controls ========================================================================== */ .form-control, .form-select, .input-group-text { background-color: var(--hb-raised); border-color: var(--hb-line); border-radius: var(--hb-radius); color: var(--hb-white); } .form-control::placeholder, .form-select::placeholder { color: var(--hb-dim); opacity: 1; } .form-control:focus, .form-select:focus { background-color: var(--hb-raised); border-color: var(--hb-yellow); box-shadow: 0 0 0 .15rem rgba(244, 223, 12, .25); color: var(--hb-white); } .input-group-text { background-color: var(--hb-page); color: var(--hb-muted); } input[type="checkbox"], input[type="radio"] { accent-color: var(--hb-yellow); } .form-check-input { background-color: var(--hb-raised); border-color: var(--hb-line); } .form-check-input:checked { background-color: var(--hb-yellow); border-color: var(--hb-yellow); } .form-check-input:focus { border-color: var(--hb-yellow); box-shadow: 0 0 0 .15rem rgba(244, 223, 12, .25); } .products label { width: 0; } /* The add to cart footer holds its buttons on one line with .text-nowrap. In this font the label runs past the edge of the dialog and the check mark is cut off, so let it wrap and let the columns shrink with it. */ .modal-footer .btn.text-nowrap { white-space: normal !important; } .modal-footer .row > [class*="col"] { min-width: 0; } /* ========================================================================== 11. Shopping cart and summary ========================================================================== */ #shoppingCartSummary .btn { background-color: var(--hb-yellow); background-image: none; border-color: var(--hb-yellow); color: var(--hb-black); } #shoppingCartSummary .btn:hover, #shoppingCartSummary .btn:focus { background-color: var(--hb-yellow-bright); border-color: var(--hb-yellow-bright); color: var(--hb-black); } /* Address block, charges and totals: no fill, the weight sits on the figures. */ table.summary { background-color: transparent; border: 1px solid var(--hb-line-soft); border-radius: var(--hb-radius); } table.summary > tbody > tr > td, table.summary > tr > td { color: var(--hb-white); } /* The label above each value. */ table.summary td.text-muted { color: var(--hb-muted) !important; font-family: var(--hb-display); font-size: .75rem; font-weight: 600; letter-spacing: 1px; padding-bottom: 0; text-transform: uppercase; } table.summary .totalExclTax, table.summary .totalTax, table.summary .totalInclTax, .summary-charges, .summary-totals { color: var(--hb-white); font-weight: 600; } /* The figure the customer is actually looking for. */ table.summary tr.final.summary-total-row > td { border-top: 2px solid var(--hb-yellow); color: var(--hb-yellow); font-size: 1.0625rem; font-weight: 700; } .thumbnail { background-color: var(--hb-panel); border-color: var(--hb-line-soft); } /* ========================================================================== 12. Login page ========================================================================== */ /* The photo layer above already covers this page; only the frame differs, as there is no navigation bar to clear. */ body:has(.container.login) { min-height: 100vh; padding-bottom: 0; padding-top: 0; } .container.login { max-width: 440px; padding: 90px 15px 60px; } .login .logo { background-position: center center; background-size: auto 46px; margin-right: 0; min-height: 90px; width: 100%; } .form-signin { background-color: var(--hb-panel); border: 1px solid var(--hb-line-soft); border-radius: var(--hb-radius); border-top: 3px solid var(--hb-yellow); max-width: 100%; padding: 32px 28px; } .form-signin .form-signin-heading { font-family: var(--hb-display); letter-spacing: 1px; text-transform: uppercase; } .form-signin .btn-login { background-color: var(--hb-yellow); border-color: var(--hb-yellow); color: var(--hb-black); } .remember-me { color: var(--hb-muted); } #forgotpassword a { color: var(--hb-blue); } .container.login .text-center.voffset-4 a { color: var(--hb-muted); font-weight: 600; } .btn-register { display: block; } /* ========================================================================== 13. Hidden on purpose ========================================================================== */ .searchform { display: none; } /* site wide search form */ .price-valid-from { display: none !important; } /* price valid from date */ .download-row { display: none !important; } /* download row */ .shoppingCart-lineUrl span { display: none; } /* line url label */ .product-header, .size-row { height: 0 !important; } /* empty table headers */ .title-container .col-12.text-end.d-none.d-lg-inline { display: none !important; } #contact-popup-link { display: inline !important; } .contact-popup-link .bi.bi-telephone-fill { display: none !important; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 1199.98px) { :root { --hb-logo-height: 40px; } .navbar.fixed-top .navbar-text:after { font-size: .875rem; } .logo { width: 220px; } } @media (max-width: 991.98px) { :root { --hb-navbar-height: 68px; --hb-logo-height: 38px; } .logo { margin-right: 0; width: 200px; } .navbar.fixed-top { height: auto; } footer.footer { font-size: .75rem; } } @media (max-width: 813.98px) { .navbar.fixed-top .navbar-text, .navbar.fixed-top .navbar-text:after { display: none; } } @media (max-width: 767.98px) { :root { --hb-content-top: 18px; } .main-content > .row:nth-child(2) { padding: 18px 12px 26px; } .container.login { padding-top: 50px; } .download-row-inner { border-bottom: none; padding-bottom: 0; } } @media (max-width: 390px) { footer.footer { font-size: .6875rem; } } @media (max-width: 350px) { .logo { width: 100%; } }