/* Font installations */ @font-face { font-family: futura-pt; font-style: normal; font-weight: 500; font-display: swap; src: local(''), url("../fonts/Futura-Medium.woff2"); } @font-face { font-family: 'Open Sans Condensed'; font-style: normal; font-weight: 300; src: local(''), url("../fonts/open-sans-condensed-v15.woff2"); } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-display: swap; src: local(''), url('../fonts/open-sans-v18-latin-regular.woff2') format('woff2'), url('../fonts/open-sans-v18-latin-regular.woff') format('woff'); } /* Variables */ :root { /* Colors */ --white: #FFF; --rgb-white: 255, 255, 255; --light-grey: #F5F5F5; --rgb-light-grey: 245, 245, 245; --mid-grey: #E5E5E5; --rgb-mid-grey: 229, 229, 229; --dark-grey: #3F3D56; --rgb-dark-grey: 63, 61, 86; --ligth-blue: #547AA5; --rgb-ligth-blue: 84, 122, 165; --dark-blue: #1A0E81; --rgb-dark-blue: 26, 14, 129; --black: #131200; --rgb-black: 19, 18, 0; /* Root font sizes */ --ty-font-size: 90%; --sm-font-size: 100%; --md-font-size: 110%; --lg-font-size: 130%; --xl-font-size: 140%; /* Relative font sizes */ --label-font-size: 1.2em; --p-font-size: 1.125em; --h3-font-size: 1.527em; --h2-font-size: 2.5em; --h1-font-size: 3em; /* Font families */ --paragraph-font-family: 'Open Sans'; --label-font-family: 'Open Sans Condensed'; --header-font-family: futura-pt, sans-serif; --button-font-family: futura-pt, sans-serif; /* Display settings */ --desktop-only-visible: none; --mobile-only-visible: var(--visible-display); /* Spacing sizes */ --sm-spacing: 0.6em; --sm-spacing-pct: 7%; --md-spacing: 1.3em; --md-spacing-pct: 15%; --lg-spacing: 2.5em; --lg-spacing-pct: 28%; --xl-spacing: 5em; --xl-spacing-pct: 45%; } /* Basic styles */ html { scroll-behavior: smooth; } html, body { margin: 0; overflow-y: overlay; background-color: var(--white); } a { color: inherit; text-decoration: none; } ul { list-style: none; padding: 0; margin: 0; } h1, h2, h3 { font-weight: normal } h1, h2, h3, p { margin: 0; } /* Scroll bar classes */ *::-webkit-scrollbar { width: 1em; } *::-webkit-scrollbar-track { display: none; } *::-webkit-scrollbar-thumb { border-radius: 1em; z-index: 1; background-color: rgba(var(--rgb-dark-grey), 0.75); } /* spacing classes */ .sm_v_margin { margin-bottom: var(--sm-spacing); margin-top: var(--sm-spacing) } .sm_h_margin { margin-left: var(--sm-spacing); margin-right: var(--sm-spacing) } .sm_margin { margin: var(--sm-spacing) } .sm_padding { padding: var(--sm-spacing) } .sm_v_padding { padding-bottom: var(--sm-spacing); padding-top: var(--sm-spacing) } .sm_h_padding { padding-left: var(--sm-spacing); padding-right: var(--sm-spacing) } .md_v_margin { margin-bottom: var(--md-spacing); margin-top: var(--md-spacing) } .md_h_margin { margin-left: inherit var(--md-spacing); margin-right: inherit var(--md-spacing) } .md_margin { margin: var(--md-spacing) } .md_padding { padding: var(--md-spacing) } .md_v_padding { padding-bottom: var(--md-spacing); padding-top: var(--md-spacing) } .md_h_padding { padding-left: inherit var(--md-spacing); padding-right: inherit var(--md-spacing) } /* Font definitions */ h1 { font-size: var(--h1-font-size) } h2 { font-size: var(--h2-font-size) } h3 { font-size: var(--h3-font-size) } h1, h2, h3 { font-family: var(--header-font-family) } p, li { font-family: var(--paragraph-font-family); font-size: var(--p-font-size); } label { font-family: var(--label-font-family); font-size: var(--label-font-size); } /* Display media queries */ @media (min-width: 46em) { :root { --desktop-only-visible: flex; --mobile-only-visible: none; } } /* Font media queries */ @media (min-width: 0em) { html { font-size: var(--ty-font-size) } } @media (min-width: 30em) { html { font-size: var(--sm-font-size) } } @media (min-width: 90em) { html { font-size: var(--md-font-size) } } @media (min-width: 130em) { html { font-size: var(--lg-font-size) } } /* Scroll media queries */ @media screen and (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } aside { font-size: 1em; position: fixed; width: 1em; right: 6em; bottom: 1em; } aside img { width: 5em; } /* Basic styling */ button { font-size: 1em; min-width: 11em; min-height: 3em; padding: 0 3em; background: var(--light-grey); color: var(--black); border-radius: 0.65em; cursor: pointer; border: none; outline: none; user-select: none; } /* Sizes */ .small { font-size: 0.75em } .large { font-size: 0.7em } /* Press animation */ button { transition: all 0.085s; box-shadow: 0em 0.3em 0.6em 0.1em rgba(var(--rgb-dark-grey), 0.5); } button:hover { transform: translateY(-1px) } button:active { transform: translateY(1px); box-shadow: 0em 0.15em 0.25em 0.075em rgba(var(--rgb-dark-grey), 0.5); } /* Backgrounds */ button.grandient { background: linear-gradient(95.69deg, var(--dark-blue) 23.1%, var(--ligth-blue) 89.18%); color: var(--white) } button.simple { color: var(--white); background: transparent; } /* Simple button styling */ button.simple { box-shadow: none; border: none; border-radius: none; } button.simple:active { transform: none; box-shadow: none; } button.simple:hover { transform: none; } .cards_grid { /* variables */ --column-gap: var(--md-spacing); --row-gap: var(--lg-spacing); --card-width: 15em; --card-height: 13em; --grid-padding: 1.2em; font-size: 1rem; flex-grow: 1; max-height: calc(var(--row-gap) + var(--card-height)); box-sizing: border-box; padding: var(--grid-padding); overflow: hidden; display: flex; justify-content: space-around; flex-flow: row wrap; column-gap: var(--column-gap); row-gap: var(--row-gap); transition: ease max-height 0.68s; } .silent_checkbox:checked + .column_section_content > .cards_grid { max-height: calc(var(--row-gap) * 2 + var(--card-height) * 2); scroll-snap-type: y mandatory; overflow-y: overlay; scroll-padding-top: 1em; } .silent_checkbox:checked + .column_section_content > .cards_grid > * { scroll-snap-align: center; } .silent_checkbox { display: none; } .column_section_content > .cards_grid > * { scroll-snap-align: start; } .cards_grid > li { font-size: 1em; background: transparent; perspective: 50em; } .cards_grid > li:hover .card { transform: rotateY(180deg); } .card { font-size: 1em; position: relative; transform-style: preserve-3d; background: transparent; transition: ease transform 1s; height: var(--card-height); width: var(--card-width); box-shadow: 0px 0.2em 0.3em 0.1em rgba(0, 0, 0, 0.11); } .card h3 { text-align: center; font-size: var(--p-font-size); } .card_back, .card_front, .card { border-radius: 1em; } .card_back, .card_front { font-size: 1em; -webkit-backface-visibility: hidden; backface-visibility: hidden; position: absolute; border: 1px solid var(--mid-grey); background-color: var(--white); padding: 0 2em 1.4em 2em; box-sizing: border-box; display: flex; flex-flow: column nowrap; align-items: center; width: 100%; height: 100%; } .card_back { transform: rotateY(180deg); } .card img { width: 6em; margin-top: auto; border-radius: 30%; width: 90%; height: 90%; } @media (min-width: 63em) { .silent_checkbox:checked + .column_section_content > .cards_grid { max-height: calc(var(--row-gap) * 3 + var(--card-height) * 3); } } footer { font-size: 1rem; width: 100%; height: 3em; padding: 1em 0em; display: flex; flex-flow: row nowrap; justify-content: center; align-items: flex-end; color: var(--white); background-color: var(--dark-grey); } .footer_places { font-size: 0.8em; display: var(--desktop-only-visible); flex-flow: row nowrap; } .footer_places > li:not(:first-child)::before { content: "|"; margin: 0 0.15em } .footer_legal { display: flex; justify-self: flex-start; flex-flow: column nowrap; align-items: center; font-size: 0.8em; } .form { display: flex; flex-flow: column nowrap; gap: var(--lg-spacing); align-items: flex-start; } .text_input, .text_area_input { display: flex; width: 100%; flex-flow: column nowrap; } .form input, .form textarea { background-color: var(--light-grey); border: 1px solid var(--mid-grey); } .form p { margin: 0; font-size: var(--ty-font-size); } .form input { height: 2em; border-radius: 0.2em; } .form input:focus, .form textarea:focus { outline: none; border: 0.12em var(--ligth-blue) solid; border-radius: 0.4em; } .form textarea { height: 10em; } .form button { align-self: flex-end; } #hero_header { font-size: 1.15rem; display: flex; position: relative; flex-flow: column; align-items: center; padding-bottom: 2.5em; padding-top: 1em; color: var(--light-grey); background: linear-gradient(100.37deg, rgba(var(--rgb-dark-blue), 0.9) 0%, rgba(var(--rgb-ligth-blue), 0.9) 100%), url("../images/tools/toolsw_581.webp"); } #hero_content { display: flex; flex-flow: column; align-items: center; flex-grow: 1; max-width: 33em; text-align: center; } #hero_content .title { display: flex; flex-flow: column nowrap; width: 100%; max-width: 25em; } #hero_content .title h1 { align-self: center; } #hero_content .title span { font-family: var(--header-font-family); align-self: center; font-size: var(--h3-font-size); } #hero_content a span { font-family: var(--button-font-family); font-size: 1.3em; } #hero_content p, #hero_content h1, #hero_content .title span { text-shadow: 0 0.131em 0.195em rgba(var(--rgb-black), 0.67); } .flex_buttons { width: 100%; display: flex; flex-flow: row wrap; row-gap: var(--sm-spacing); column-gap: var(--sm-spacing); justify-content: space-around; } #hero_bottom { fill: var(--white); position: absolute; /* For avoiding the svg being 0.X PXs above the bottom */ bottom: -1px; /* For avoiding the svg overlapping a clickable element */ pointer-events: none; } header#hero_header { background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } #hero_header address { font-size: 0.65em; position: absolute; top: 2.3em; display: var(--desktop-only-visible); font-style: normal; flex-flow: row nowrap; justify-content: space-between; width: 80%; } #hero_header address * { text-shadow: 0 0.131em 0.195em rgba(var(--rgb-black), 0.67); } @media (min-width: 30em) { #hero_header { font-size: 1.5rem; background: linear-gradient(100.37deg, rgba(var(--rgb-dark-blue), 0.9) 0%, rgba(var(--rgb-ligth-blue), 0.9) 100%), url("../images/tools/toolsw_1085.webp"); } } @media (min-width: 40em) { #hero_content .title span { align-self: flex-end; } } @media (min-width: 90em) { #hero_header { background: linear-gradient(100.37deg, rgba(var(--rgb-dark-blue), 0.9) 0%, rgba(var(--rgb-ligth-blue), 0.9) 100%), url("../images/tools/toolsw_1400.webp"); } } /* Generic section styles */ .landing_page_article { display: flex; flex-flow: column nowrap; width: 100%; /* Variables */ --row-gap: var(--md-spacing); --column-gap: var(--md-spacing-pct); --column-width: calc((100% - var(--column-gap)) / 2); --column-min-width: 16em; --section-content-max-width: calc(62em); --section-content-padding: 3em; --max-width-image: 21em; --max-height-image: 22em; } .landing_page_section { font-size: 1rem; display: flex; flex-grow: 1; align-items: center; justify-content: center; position: relative; /* absolute objects */ overflow: visible; /* absolute objects */ padding: var(--xl-spacing) var(--lg-spacing); background-color: var(--white); } .landing_page_section:nth-child(even) { background-color: var(--light-grey) } .landing_page_section.sm_padding { padding: var(--md-spacing) 0em} /* Row section styles */ .row_section_content { display: flex; flex-grow: 1; flex-flow: row wrap; justify-content: space-around; column-gap: var(--column-gap); row-gap: var(--row-gap); max-width: var(--section-content-max-width); padding: 0em var(--sectioncontent-padding); } .row_section_content.reverse { flex-direction: row-reverse } .row_section_content > * { width: var(--column-width); flex-grow: 1; } /* TODO: Create a class instead of using it in two different tags */ .row_section_content > img, .row_section_content > iframe, .row_section_content > div{ max-width: var(--max-width-image); max-height: var(--max-height-image); min-width: var(--column-min-width); } .row_section_content > iframe { min-height: 20em; } .row_section_content > div { max-width: 27em; min-width: var(--column-min-width); } /* Column styles */ .column_section_content { display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: center; flex-grow: 1; margin: 0 4em; max-width: var(--section-content-max-width); } .grandient .column_section_content > h2 { color: white; margin-top: 0; text-shadow: 0 0.131em 0.195em rgba(var(--rgb-black), 0.67); } .silent_checkbox:checked + .column_section_content + label { transform: rotate(0deg); } .landing_page_section > label { display: flex; cursor: pointer; justify-content: center; align-items: center; position: absolute; font-size: 2.5em; height: 1em; width: 1em; bottom: calc(-1em/2); z-index: 1; background-color: var(--dark-grey); color: var(--white); border-radius: 50%; transform: rotate(180deg); transition: transform ease 0.3s; } /* Section backgrounds */ .landing_page_section.grandient.parallax { background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } #contact_section { font-size: 0.9rem; background-color: var(--ligth-blue); color: var(--white) } #contact_section .info { margin-bottom: 3em; } #contact_section .contact_info p { font-style: normal; } .custom-image { border-radius: 30%; } @media (min-width: 0em) { section.grandient.parallax { background: linear-gradient(100.37deg, rgba(var(--rgb-dark-blue), 0.9) 0%, rgba(var(--rgb-ligth-blue), 0.9) 100%), url("../images/plumbing/plumbingw_501.webp"); } } @media (min-width: 30em) { section.grandient.parallax { background: linear-gradient(100.37deg, rgba(var(--rgb-dark-blue), 0.9) 0%, rgba(var(--rgb-ligth-blue), 0.9) 100%), url("../images/plumbing/plumbingw_1038.webp"); } } @media (min-width: 60em) { section.grandient.parallax { background: linear-gradient(100.37deg, rgba(var(--rgb-dark-blue), 0.9) 0%, rgba(var(--rgb-ligth-blue), 0.9) 100%), url("../images/plumbing/plumbingw_1400.webp"); } }