:root{--primary:#1C4FA3;--primary-bright:#2B78F8;--black:#061123;--black-overlay:rgba(1, 4, 5, .4);--black-overlay-hover:rgba(1, 4, 5, .7);--white:#E7EDF7;--white:#E7EDF7;--dark-primary:#0D264E;--grey-primary:#153A78;--off-primary:#2364CD;--shade-800:#111D23;--shade-700:#263238;--shade-600:#3E484E;--shade-500:#566065;--shade-400:#70787c;--shade-300:#8B9295;--shade-200:#A7ACAF;--shade-100:#C3C7C9;--shade-50:#E1E3E4;--glow:0px 0px 148px;font-size:16px;@media screen and (min-width:640px){font-size: 18px;}}*,*::before,*::after{box-sizing:border-box}*{padding:0;margin:0;font:inherit}html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:Roboto,sans-serif}body{min-height:100dvh;display:grid;overflow-x:hidden;grid-template-rows:auto 1fr auto;grid-template-columns:minmax(0,1fr)}main{display:block}h1,h2,h3,h4,h5,h6{font-weight:500}h1{font-size:2.5rem;margin:.67em 0}h2{font-size:2.25rem}h3{font-size:2em}h4{font-size:1.75rem}h5{font-size:1.5rem}h6{font-size:1rem}hr{box-sizing:content-box;height:0;overflow:visible}img,picture,svg,video{display:block;max-width:100%}pre,code,kbd,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;color:inherit;text-decoration:none;&:hover { text-decoration:underline; }}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.25em}img{border-style:none}label{display:block}button,input,optgroup,select,textarea{font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible;accent-color:var(--primary)}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{appearance:button;-webkit-appearance:button;border:none;border-radius:4px;font-size:1rem;display:block}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-focusring,[type=button]::-moz-focusring,[type=reset]::-moz-focusring,[type=submit]::-moz-focusring{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto;padding:1rem}[type=checkbox],[type=radio]{padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{appearance:textarea;-webkit-appearance:textarea;outline-offset:-2px}[type=search]::-webkit-search-decoration{appearance:none;-webkit-appearance:none}::-webkit-file-upload-button{appearance:button;-webkit-appearance:button}detail{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}header{width:100%;height:96px;z-index:500;padding-inline:1rem;background:var(--transparent);color:var(--white);transition:transform .7s ease-in-out;align-content:center;display:flex;justify-content:space-between;align-items:center;@media screen and (min-width:640px){padding-inline: 4rem;}}html:not([data-scroll='0']){padding-top:96px}html:not([data-scroll='0']) header{position:fixed;top:0;left:0;background:var(--black);box-shadow:0 2px 12px #000000}.parentmenu{position:relative;&:focus-within,&:hover { & > ul { display:block; } } p:after { content:""; border:0.35rem solid transparent; border-top-color:rgba(blue,0.45); margin-left:0.25em; transform:translateY(0.15em); } .submenu { display:none; background-color:#FFFFFF; border-radius:4px; box-shadow:0 0.15em 0.25em rgba(black,0.25); padding:0.5em 0; min-width:15ch; position:absolute; top:calc(100% + .5rem); right:0; height:fit-content; li { display:block; color:var(--black); padding:.5rem; width:100%; } }}nav.main-nav{display:none;ul { height: 100%; align-items: center; padding: 0; } li { flex: 1; } a { text-wrap: nowrap; height: 100%; display: inline-block; } @media screen and (min-width: 760px) { display: block; }}ul,ol{padding-left:1rem}nav ul{display:flex;gap:1rem;list-style:none;li { display: inline-block; }}form.contact{width:100%;display:flex;gap:1rem;flex-direction:column}.field{display:flex;flex-direction:column;gap:.25rem;width:100%;label { margin-bottom: .5rem }}fieldset{display:flex;flex-direction:column;gap:1rem;width:100%;border:none;& > * { flex: 1; } @media screen and (min-width: 640px) { flex-direction: row; }}.container{max-width:1080px;width:100%;margin:0;@media screen and (min-width:1120px){padding-inline: 0; margin: 0 auto;}}input,textarea,select{outline:none;border:2px solid var(--primary);padding:1rem .5rem;&:focus,&:focus-within,&:focus-visible { border:2px solid var(--shade-300); box-shadow:0 0 10px 6px var(--off-primary); }}[type=file]{border:none}[type=text],[type=password],[type=number],[type=tel],[type=email],textarea{border-radius:4px;width:100%;&:focus,&:focus-visible { border:2px solid var(--shade-300); box-shadow:0 0 10px 6px var(--off-primary); }}input:user-valid{outline-color:var(--primary-bright)}input:user-invalid{outline-color:var(--dark-primary)}select{width:100%;appearance:none;position:relative;color:var(--black);background:#fff;border-radius:4px}textarea{width:100%;resize:none;overflow:auto;margin:0}.btn-group{display:flex;align-items:center;justify-content:center;margin-bottom:4rem;.btn { width: fit-content; border-radius: 0; padding: 1rem 2rem; border: 2px solid var(--white); &:first-child { border-radius: 4px 0 0 4px; border-right: none; } &:last-child { border-radius: 0 4px 4px 0; border-left: none; } }}footer{background:var(--dark-primary);color:var(--white);& .footer-main { display: grid; grid-auto-flow: row; grid-auto-columns: 1fr 1fr 1fr; font-size: .875em; gap: 2rem; @media screen and (min-width: 640px) { grid-auto-flow: column; } } img.logo { margin-bottom: 1rem; } h5 { margin-bottom: 1rem; @media screen and (min-width: 640px) { margin-bottom: 1.875rem; } } p { line-height: 1.5; } ul { list-style: none; padding: 0; &.contact-info { li { display: flex; gap: 1rem; align-items: center; } } li { line-height: 2; ul { padding-left: 1rem; } } }}.contact-content{h3 { margin-bottom: 1rem; } ul { list-style: none; padding: 0; li { line-height: 2; display: flex; gap: 1rem; flex-direction: row; align-items: center; p {margin:0} } }}.footer-main{padding:4rem 1rem 2rem;@media screen and (min-width:640px){padding: 4rem 4rem 2rem;}}.footer-legal{background:var(--dark-primary);padding:1rem;text-align:center}footer img.logo{height:42px}.btn{background-color:var(--primary);display:inline-block;text-wrap:nowrap;color:var(--white);padding:.5em 1em;border-radius:4px;text-align:center;cursor:pointer;&:hover { background:var(--primary-bright); text-decoration:none; } &.lg { font-size:1.25rem } &.secondary { background:transparent; color:var(--white); border:2px solid var(--white); &:hover { background:var(--dark-primary); text-decoration:none; } } p { margin:0 } span { display:block; font-size:.75em; }}.request-quote{color:var(--white);text-decoration:none;text-align:center;padding:.5em 1em;border-radius:4px;background:var(--off-primary);height:100%;align-content:center;gap:.5rem;&:hover { background:var(--primary); text-decoration:none; } span { display:block; font-size:.75em; } @media screen and (min-width:760px) { display:block }}.main-nav+.request-quote{display:none;@media screen and (min-width:760px){display: block}}.contact-layout{margin:4;display:flex;flex-direction:column;grid-template-columns:none;order:-1;gap:2rem;.contact-content { flex: 1 } form.contact { flex: 2 } @media screen and (min-width: 1080px) { flex-direction: row-reverse; align-items: center; }}.right-nav{display:flex;gap:1rem;align-items:center}.mobile-button{color:var(--white);background:0 0;font-weight:700;cursor:pointer;display:inline-block;height:100%;@media screen and (min-width:760px){display: none}}dialog{position:fixed;top:0;left:0;border:none;min-width:100%;min-height:100%;width:100%;height:100%;background:var(--dark-primary);grid-template-rows:auto 1fr auto;grid-template-columns:minmax(0,1fr);&[open] { animation: fadein 500ms ease-in-out; display: grid; } &.is-hidden { animation: fadeout 350ms ease-in-out; } .dialog-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem; } nav.mobile-nav { display: flex; flex-direction: column; align-items: center; justify-content: center; } ul { width: 100%; flex-direction: column; text-align: center; color: var(--white); padding: 0; li { width: 100%; a, p { display: inline-block; width: 100%; font-size: 2rem; } } } img.logo { width: 6rem; }}body:has(dialog:modal){overflow-y:hidden}@keyframes fadein{0%{opacity:0;transform:translateY(50%)scale(.25,.25)}100%{opacity:1;transform:translateY(0%)scale(1,1)}}@keyframes fadeout{100%{opacity:0;transform:translateY(50%)scale(.25,.25)}0%{opacity:1;transform:translateY(0%)scale(1,1)}}.socials{display:flex;gap:1rem;a { padding: .5rem; border-radius: 4px; width: 24px; height: 24px; background-position: center; filter: invert(100%); &.fb { background-image: url('/icons/fb.svg'); } &.linkedin { background-image: url('/icons/linkedin.svg') } }}section.partner{.partner-content { display: grid; grid-template-areas: "content content content" "partners partners partners" "action action action"; align-items: center; gap: 2rem; @media screen and (min-width: 640px) { grid-template-areas: "content content action" "content content action" "partners partners partners"; } hgroup { grid-area: content } a { grid-area: action } .partners { grid-area: partners } }}.partners{display:flex;flex-wrap:wrap;flex-direction:row;justify-content:space-evenly;gap:2rem}main p{line-height:1.5;margin-block:1rem}.personal{display:grid;gap:1rem;@media screen and (min-width:640px){grid-template-columns: repeat(2,1fr);}@media(min-width:900px){grid-template-columns: repeat(3,1fr);}}.card{position:relative;display:flex;flex-direction:column;background-color:var(--white);border-radius:8px;padding:1rem;gap:.75rem;color:var(--black);img { width: 182px; border-radius: 8px; margin: 0 auto } .actions { margin-top: auto; }}section{padding:3rem 2rem;@media screen and (min-width:640px){padding: 6rem 3rem;}}section.hero{background:var(--black);background-repeat:no-repeat;background-position:50%;color:var(--white);height:auto;display:flex;gap:2rem;padding:2rem 1rem;align-items:center;justify-content:center;flex-direction:column;position:relative;width:100%;&.service { background-image: url('/portfolio/Maley_Billboard.jpg'); box-shadow: inset 0 0 0 100vw var(--black-overlay); max-height: 45dvh; aspect-ratio: 16/9; } &.contact { background-image: url('/portfolio/Kingsway_Billboard.jpg'); box-shadow: inset 0 0 0 100vw var(--black-overlay); aspect-ratio: 16/9; } &.small { max-height: 25vh; } &.ssm { background-image: url('/landscapes/ssm.jpg'); box-shadow: inset 0 0 0 100vw var(--black-overlay); aspect-ratio: 16/9; } &.nb { background-image: url('/landscapes/nb.jpg'); box-shadow: inset 0 0 0 100vw var(--black-overlay); aspect-ratio: 16/9; } &.sudbury { background-image: url('/landscapes/sd.jpg'); box-shadow: inset 0 0 0 100vw var(--black-overlay); aspect-ratio: 16/9; } @media screen and (min-width: 640px) { flex-direction: row; justify-content: left; padding: 4rem; } .content { position: relative; z-index: 50; }}@keyframes slidein-left{from{transform:translateX(105%)}to{transform:translateX(25%)}}.bg-dark{background-color:var(--black);color:var(--white)!important}.overlay{border-image-source:var(--black-overlay);border-image-slice:fill 1}.billboard{border-radius:24px;padding:3rem 1rem;margin-inline:auto;color:var(--white);box-shadow:var(--glow)15px var(--off-primary),inset 0 0 0 100vw var(--black-overlay);background-repeat:no-repeat;background-position:50%;aspect-ratio:16/9;width:100%;max-width:960px;align-content:center;background-size:cover;margin-block:4rem;@media screen and (min-width:640px){display: block; padding: 3rem 2rem; transition: transform; animation: fadein 1s ease-in-out;}}.content{h1 { font-size: 2.25rem; margin: 0; } p { font-size: 1.5rem; margin-block: 2rem; } & div { gap: 1rem; & .btn { width: fit-content; } }}div.inventory-list{display:grid;grid-template-columns:1fr;gap:1rem;@media(min-width:1080px){grid-template-columns: 1fr 1fr;}}div.inventory-item{display:grid;align-items:center;grid-template-columns:1fr;gap:2rem;@media(min-width:640px){grid-template-columns: 240px 1fr;}img { max-width: 100%; border-radius: 16px; width: 100%; aspect-ratio: 4/3; object-fit: cover; box-shadow: inset 0 0 0 100vw var(--black-overlay); }}.figures{display:grid;column-gap:1rem;row-gap:2rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:center;justify-content:center;@media screen and (min-width:1048px){grid-template-columns: repeat(3,minmax(300px,1fr));}}figure{display:flex;flex-direction:column;align-items:center;gap:.5rem;@media screen and (min-width:640px){justify-content: center;}img { border-radius: 16px; aspect-ratio: 4/3; object-fit: cover; box-shadow: inset 0 0 0 100vw var(--black-overlay); }}section.services{display:flex;align-items:center;flex-direction:column-reverse;gap:2rem;@media screen and (min-width:640px){flex-direction: row;}& > * { display: flex; gap: 1rem; width: 100%; align-items: center; flex-direction: column-reverse; @media screen and (min-width: 640px) { flex-direction: row; } & > * { flex: 1; width: 100%; } } & .transit { display: flex; align-items: center; flex-direction: column; gap: 2rem; & > * { flex: 1; width: 100%; } @media screen and (min-width: 640px) { flex-direction: row; } .service-img { background-image: url("/landscapes/Kingsway_Billboard.jpg"); box-shadow: inset 0 0 0 100vw rgba(1, 4, 5, .65); display: flex; justify-content: center; align-items: center; } } .service-img { width: 100%; border-radius: 16px; box-shadow: inset 0 0 0 100vw var(--black-overlay); aspect-ratio: 16/9; background-repeat: no-repeat; background-origin: padding-box; background-position: center; background-size: cover; }}.location-grid{display:flex;margin:2rem 0 3rem;flex-direction:column;@media screen and (min-width:640px){flex-direction: row;}.location-card { position: relative; display: flex; align-items: end; padding: 1rem; z-index: 50; box-shadow: inset 0 0 0 100vw var(--black-overlay); background-repeat: no-repeat; background-position: center; background-size: cover; flex: 1; aspect-ratio: 16/9; width: 100%; transition: .4s transform ease-in-out; hgroup p { margin-block: .5rem } @media screen and (min-width: 640px) { aspect-ratio: 4/3; &:hover { transform: scale(1.15); z-index: 300; text-decoration: none; box-shadow: inset 0 0 0 100vw var(--black-overlay), var(--glow) 5px var(--off-primary); } &:first-child { &:hover { transform: scale(1.15) translateX(2.25rem); } } &:last-child { &:hover { transform: scale(1.15) translateX(-2.25rem); } } } }}.cta{display:flex;flex-direction:row}section.home-services{padding-bottom:0}section.get-quote-footer{div { display: flex; gap: 1rem; justify-content: space-between; align-items: center; flex-direction: column; @media screen and (min-width: 640px) { flex-direction: row; } }}section.contact-section{padding-block:0}.personel-list{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));.personel-item { background-color: var(--grey-primary); padding: 1rem; hgroup { text-align: center; p { margin: 0 0 1rem; color: var(--shade-100) } }; }}