/* ============================================================ shared-head.css Styles that used to be duplicated inline in every page's . Edit once here instead of in 19 separate files. ============================================================ */ /* --- Base reset --- */ html { line-height: 1.15;}body { margin: 0;}* { box-sizing: border-box; border-width: 0; border-style: solid; -webkit-font-smoothing: antialiased;}p,li,ul,pre,div,h1,h2,h3,h4,h5,h6,figure,blockquote,figcaption { margin: 0; padding: 0;}button { background-color: transparent;}button,input,optgroup,select,textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0;}button,select { text-transform: none;}button,[type="button"],[type="reset"],[type="submit"] { -webkit-appearance: button; color: inherit;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner { border-style: none; padding: 0;}button:-moz-focus,[type="button"]:-moz-focus,[type="reset"]:-moz-focus,[type="submit"]:-moz-focus { outline: 1px dotted ButtonText;}a { color: inherit; text-decoration: inherit;}pre { white-space: normal;}input { padding: 2px 4px;}img { display: block;}details { display: block; margin: 0; padding: 0;}summary::-webkit-details-marker { display: none;}[data-thq="accordion"] [data-thq="accordion-content"] { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-in-out; padding: 0;}[data-thq="accordion"] details[data-thq="accordion-trigger"][open] + [data-thq="accordion-content"] { max-height: 1000vh;}details[data-thq="accordion-trigger"][open] summary [data-thq="accordion-icon"] { transform: rotate(180deg);}html { scroll-behavior: smooth } /* --- Base typography/defaults --- */ html { font-family: Jost; font-size: 16px; } body { font-weight: 400; font-style:normal; text-decoration: none; text-transform: none; letter-spacing: 0.02; line-height: 1.55; color: var(--dl-color-gray-black); background: var(--dl-color-gray-white); fill: var(--dl-color-gray-black); } /* --- Dropdown hover behavior --- */ [data-thq="thq-dropdown"]:hover > [data-thq="thq-dropdown-list"] { display: flex; } [data-thq="thq-dropdown"]:hover > div [data-thq="thq-dropdown-arrow"] { transform: rotate(90deg); } /* --- Lightbox / thumbnail scrollbar --- */ /* CSS for Lightbox */ .lightbox img { max-width: 100%; max-height: 100%; } .thumbnail img { max-width: '80px'; } /* Hide the horizontal scrollbar */ .thumbnails { overflow-x: hidden; overflow-y: scroll; } /* Style the vertical scrollbar */ .thumbnails::-webkit-scrollbar { width: 10px; /* Width of the scrollbar */ } .thumbnails::-webkit-scrollbar-thumb { background-color: transparent; /* Transparent background */ border-radius: 5px; /* Rounded corners */ } .thumbnails::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.3); /* Semi-transparent background on hover */ } /* --- Image magnifier glass --- */ * {box-sizing: border-box;} .img-magnifier-container { position:relative; } .img-magnifier-container:hover .img-magnifier-glass { position: absolute; border: 2px solid #000; cursor: pointer; /*Set the size of the magnifier glass:*/ width: 15rem; height: 15rem; display:block; z-index: 100; } .img-magnifier-glass { display:none; } /* --- Collapsible sections --- */ .collapsible { background-color: #777; color: white; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; } .active, .collapsible:hover { background-color: #555; } .content { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; } .collapsible:after { content: '\002B'; color: white; font-weight: bold; float: right; margin-left: 5px; } .active:after { content: "\2212"; } /* --- Nav tooltip hide/show helper --- */ .hide { display: none; } .myDIV:hover + .hide { display: flex; color: gray; } /* --- Hero section fade --- */ .hero-sections { position: relative; height: 550px; overflow: hidden; width: 100%; } .home-hero { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s ease; z-index: 0; } .home-hero.active { opacity: 1; z-index: 1; } /* --- Navbar fade-out --- */ .navbar { transition: opacity 0.5s ease; /* Add the transition property for fade-out effect */ } /* Apply the fade-out animation to the navbar */ .navbar.fade-out { opacity: 0; pointer-events: none; } /* --- Enlarged background container --- */ /* Apply the transition property to the .container class for smooth transitions */ .container { transition: background-position 0.3s ease; } .container.enlarged { background-size: 4500px 2592px; backgroundRepeat: repeat; /* Add any additional styles for the enlarged state here */ } /* --- Dropdown hover behavior (dup) --- */ [data-thq="thq-dropdown"]:hover > [data-thq="thq-dropdown-list"] { display: flex; } [data-thq="thq-dropdown"]:hover > div [data-thq="thq-dropdown-arrow"] { transform: rotate(90deg); }