:root { --roofnet-navy: #04263a; --roofnet-blue: #006eab; --roofnet-blue-light: #9abdde; --roofnet-grey: #999999; --roofnet-cyan: #0089d4; --roofnet-ink: #13212b; --roofnet-muted: #55646f; --roofnet-paper: #f1f6fa; --menu-delay: .3s; --roofnet-header-height: 124px; } html, body { font-family:"Poppins", Arial, sans-serif; color: var(--roofnet-ink); } main.page h1, main.page h2, main.page h3, main.page p { font-family: inherit; } .roofnet-logo { display: inline-block; line-height: 0; width: 205px; } .roofnet-logo img { display: block; height: auto; width: 100%; } .top_space { height: var(--roofnet-header-height); } html.home-page .top_space { height: 0; } header.top { background: #fff; height: var(--roofnet-header-height); left: 0; padding: 0; position: fixed; top: 0; width: 100%; z-index: 20; transition: height var(--menu-delay) ease-in-out, box-shadow var(--menu-delay) ease-out, background var(--menu-delay) ease-out; } header.top::before { background: linear-gradient(110deg, #04263a 0%, var(--roofnet-navy) 62%, #0a3450 100%); content:""; inset: 0; position: absolute; z-index: -1; transition: opacity var(--menu-delay) ease-out; } html.home-page header.top:not(.header_scroll) { background: transparent; } html.home-page header.top:not(.header_scroll)::before { opacity: 0; } header.top.header_scroll { box-shadow: 0 4px 18px rgba(9, 33, 52, .18); height: 72px; } header.top .roofnet-logo { transition: width var(--menu-delay) ease-in-out; } header.top.header_scroll .roofnet-logo { width: 150px; } header.top #menu_bt { transition: padding var(--menu-delay) ease-in-out; } header.top.header_scroll #menu_bt { padding: 0; } header.top .page_content { height: 100%; align-items: center; display: flex; justify-content: space-between; } header.top .menu ul, .roofnet-footer-nav { display: flex; gap: clamp(22px, 3vw, 60px); list-style: none; margin: 0; padding: 0; } header.top .menu li { margin: 0; } header.top .menu a { color: #fff; display: block; font-size: .95rem; font-weight: 400; padding: 12px 0; } header.top .menu .roofnet-menu-contact { border: 1px solid #fff; margin: 0 0 0 16px; padding: 0 22px; } header.top .menu .roofnet-menu-contact a { padding: 11px 0; text-transform: uppercase; } #menu_bt_close { display: none; } .roofnet-eyebrow, .roofnet-label { color: var(--roofnet-blue); font-size: .98rem; font-weight: 600; letter-spacing: -.02em; margin-bottom: 34px; text-transform: uppercase; } .bouton.roofnet-button { border-radius: 0; font-family: inherit; font-size: .88rem; font-weight: 500; letter-spacing: 0; margin: 0; padding: 16px 24px; text-transform: uppercase; } .bouton.roofnet-button-primary { background: var(--roofnet-blue); border-color: var(--roofnet-blue); color: #fff; } .bouton.roofnet-button:hover, .bouton.roofnet-button-primary:hover { background: var(--roofnet-cyan); border-color: var(--roofnet-cyan); box-shadow: none; color: #fff; } .roofnet-section { padding: 112px 0; position: relative; } .roofnet-field-video { background: linear-gradient(135deg, #30495d, #101d28); height: 100%; inset: 0; overflow: hidden; position: absolute; width: 100%; } .roofnet-field-video > img, .roofnet-field-video .video_container, .roofnet-field-video video { height: 100%; inset: 0; position: absolute; width: 100%; } main.page .roofnet-field-video > img, .roofnet-field-video video { display: block; object-fit: cover; } .roofnet-field-video .video_container { z-index: 1; } .roofnet-video-play { align-items: center; background: rgba(20, 27, 32, .28); border: 6px solid #fff; border-radius: 50%; color: #fff; cursor: pointer; display: flex; height: clamp(112px, 9vw, 178px); justify-content: center; left: 50%; padding: 0; position: absolute; top: 54%; transform: translate(-50%, -50%); transition: background .2s ease, opacity .2s ease, transform .2s ease; width: clamp(112px, 9vw, 178px); z-index: 3; } .roofnet-video-play svg { fill: currentColor; height: 48%; margin-left: 6%; width: 48%; } .roofnet-video-play:hover, .roofnet-video-play:focus-visible { background: rgba(0, 110, 171, .8); transform: translate(-50%, -50%) scale(1.04); } .roofnet-video-play:focus-visible { outline: 3px solid #fff; outline-offset: 5px; } .roofnet-video-play.is-hidden { opacity: 0; pointer-events: none; } .roofnet-footer { background: var(--roofnet-navy); color: #fff; padding: 58px 0 44px; } .roofnet-footer a { color: #fff; } .roofnet-footer a:hover { color: var(--roofnet-blue-light); } .roofnet-footer-top { column-gap: 32px; justify-content: space-between; padding-bottom: 40px; } .roofnet-footer-nav { flex-wrap: wrap; max-width: 100%; padding-top: 24px; row-gap: 13px; } .roofnet-footer-nav a { font-size: .9rem; } .roofnet-footer .roofnet-logo { flex-shrink: 0; font-size: 2.5rem; } .roofnet-footer-bottom { border-top: 1px solid rgba(255, 255, 255, .22); gap: 16px 32px; padding-top: 32px; } .roofnet-footer-bottom p { font-size: .78rem; line-height: 1.85; margin: 0; } .roofnet-footer-bottom p:last-child { display: flex; flex-wrap: wrap; gap: 8px 25px; } .contact-hero { background: radial-gradient(circle at 82% 20%, rgba(0, 137, 212, .26), transparent 30%), linear-gradient(135deg, #04263a 0%, var(--roofnet-navy) 62%, #0a3450 100%); overflow: hidden; padding: clamp(75px, 8vw, 120px) 0 clamp(82px, 9vw, 135px); position: relative; } .contact-hero:after { background: linear-gradient(90deg, transparent, rgba(154, 189, 222, .55), transparent); bottom: 0; content:""; height: 1px; left: 15%; position: absolute; width: 70%; } .contact-hero-layout { align-items: end; display: grid; gap: clamp(45px, 8vw, 130px); grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); } .contact-hero .portfolio-kicker, .contact-details .portfolio-kicker, .contact-form-success .portfolio-kicker { align-items: center; color: var(--roofnet-blue); display: flex; font-size: .78rem; font-weight: 600; gap: .55em; letter-spacing: .06em; margin: 0 0 20px; text-transform: uppercase; } .contact-hero .portfolio-kicker { color: var(--roofnet-blue-light); } .contact-hero .portfolio-kicker .icon, .contact-details .portfolio-kicker .icon { height: 1.15em; width: 1.15em; } .contact-hero h1 { color: #fff; font-size: clamp(3rem, 5.4vw, 5.6rem); font-weight: 600; letter-spacing: -.06em; line-height: 1.02; margin: 0; } .contact-hero h1 span { color: var(--roofnet-blue-light); } .contact-hero-intro { color: rgba(255, 255, 255, .76); font-size: clamp(1rem, 1.25vw, 1.15rem); font-weight: 400; line-height: 1.75; margin: 2em 0 0; max-width: 710px; } .contact-hero-note { align-items: center; border-bottom: 1px solid rgba(255, 255, 255, .18); border-top: 1px solid rgba(255, 255, 255, .18); display: flex; gap: 1.1em; padding: 1.45em 0; } .contact-availability { background: var(--roofnet-blue-light); border: 5px solid rgba(154, 189, 222, .14); border-radius: 50%; box-sizing: content-box; flex: 0 0 auto; height: 9px; width: 9px; } .contact-hero-note p { color: rgba(255, 255, 255, .58); font-size: .69rem; letter-spacing: .08em; margin: 0 0 .35em; text-transform: uppercase; } .contact-hero-note strong { color: #fff; font-size: .87rem; font-weight: 500; } .contact-page { background: #fff; color: var(--roofnet-ink); padding: clamp(65px, 8vw, 120px) 0 clamp(90px, 10vw, 150px); } .contact-layout { display: grid; gap: clamp(45px, 8vw, 115px); grid-template-columns: minmax(250px, .7fr) minmax(0, 1.3fr); } .contact-details { align-self: start; position: sticky; top: 30px; } .contact-details h2, .contact-form-heading h2, .contact-form-success h2 { font-weight: 600; letter-spacing: -.055em; } .contact-details h2 { font-size: clamp(2rem, 3.3vw, 3.35rem); line-height: 1.1; margin: 0; } .contact-details-intro { color: var(--roofnet-muted); font-size: .96rem; line-height: 1.75; margin: 1.35em 0 0; max-width: 450px; } .contact-details-list { border-top: 1px solid #d9e0e4; margin-top: clamp(32px, 4vw, 52px); } .contact-details-list > a, .contact-details-list > div { align-items: center; border-bottom: 1px solid #d9e0e4; color: var(--roofnet-ink); display: grid; gap: 0 1em; grid-template-columns: 2.8em minmax(0, 1fr); padding: 1.15em 0; text-decoration: none; } .contact-details-list > a { transition: color .2s ease, padding-left .2s ease; } .contact-details-list > a:hover { color: var(--roofnet-blue); padding-left: .4em; } .contact-details-list span { align-items: center; background: #e7f2fa; border-radius: 50%; color: var(--roofnet-blue); display: flex; grid-row: 1 / span 2; height: 2.8em; justify-content: center; width: 2.8em; } .contact-details-list .icon { height: 1.25em; width: 1.25em; } .contact-details-list small { color: var(--roofnet-muted); font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; } .contact-details-list strong { font-size: .86rem; font-weight: 500; min-width: 0; overflow-wrap: anywhere; } .contact-promise { align-items: flex-start; background: #edf6fb; border-left: 3px solid var(--roofnet-blue); display: flex; font-size: .73rem; gap: 1em; line-height: 1.65; margin-top: 2.2em; padding: 1.35em 1.5em; } .contact-promise > .icon { color: var(--roofnet-blue); flex: 0 0 auto; height: 1.4em; margin-top: .15em; width: 1.4em; } .contact-promise p { margin: 0; } .contact-form-card { background: var(--roofnet-paper); border: 1px solid #e1e6e9; box-shadow: 0 24px 70px rgba(9, 33, 52, .11); min-width: 0; padding: clamp(28px, 5vw, 62px); } .contact-form-step { color: var(--roofnet-blue); font-size: .67rem; font-weight: 600; letter-spacing: .11em; margin: 0 0 .8em; text-transform: uppercase; } .contact-form-heading h2 { font-size: clamp(2rem, 3.6vw, 3.7rem); line-height: 1.08; margin: 0; } .contact-form-heading > p:last-child { color: var(--roofnet-muted); font-size: .94rem; line-height: 1.7; margin: 1em 0 0; } .contact-form { margin-top: clamp(34px, 5vw, 55px); } .contact-form[hidden], .contact-form-heading[hidden], .contact-form-success[hidden], .contact-form-error[hidden] { display: none !important; } .contact-honeypot { height: 1px; left: -10000px; overflow: hidden; position: absolute; top: auto; width: 1px; } .contact-form-grid { display: grid; gap: 1.35em; grid-template-columns: repeat(2, minmax(0, 1fr)); } .contact-field { margin-bottom: 0; } .contact-field label { display: block; font-size: .72rem; font-weight: 500; margin-bottom: .65em; } .contact-field label span { color: var(--roofnet-blue); } .contact-field label small { color: var(--roofnet-muted); font-size: .84em; font-weight: 400; } .contact-field input, .contact-field select, .contact-field textarea { appearance: none; background: #fff; border: 1px solid #cfd8de; border-radius: 0; box-sizing: border-box; color: var(--roofnet-ink); font: inherit; font-size: .82rem; line-height: 1.5; outline: none; padding: .95em 1.05em; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; width: 100%; } .contact-field select { background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 18px) calc(50% - 2px), calc(100% - 13px) calc(50% - 2px); background-repeat: no-repeat; background-size: 5px 5px, 5px 5px; padding-right: 2.8em; } .contact-field textarea { min-height: 190px; resize: vertical; } .contact-field input:focus, .contact-field select:focus, .contact-field textarea:focus { background: #fff; border-color: var(--roofnet-blue); box-shadow: 0 0 0 4px rgba(0, 110, 171, .16); } .contact-field input.is-invalid, .contact-field select.is-invalid, .contact-field textarea.is-invalid { border-color: #c44231; } .contact-field-error { color: #a53325; display: block; font-size: .65rem; line-height: 1.4; min-height: 1.4em; padding-top: .35em; } .contact-form-error { background: rgba(196, 66, 49, .09); border-left: 3px solid #c44231; color: #962d20; font-size: .72rem; line-height: 1.55; margin-top: 1.5em; padding: 1em 1.2em; } .contact-form-footer { align-items: center; border-top: 1px solid #d9e0e4; display: flex; gap: 2em; justify-content: space-between; margin-top: 2em; padding-top: 2em; } .contact-form-footer > p { align-items: center; color: var(--roofnet-muted); display: flex; font-size: .65rem; gap: .55em; line-height: 1.5; margin: 0; } .contact-form-footer > p .icon { height: 1.2em; width: 1.2em; } .contact-submit { align-items: center; background: var(--roofnet-blue); border: 1px solid var(--roofnet-blue); border-radius: 0; color: #fff; cursor: pointer; display: inline-flex; font: inherit; font-size: .76rem; font-weight: 600; justify-content: center; min-height: 3.6em; min-width: 205px; padding: .9em 1.5em; text-transform: uppercase; transition: background .25s ease, border-color .25s ease, transform .25s ease; } .contact-submit:hover { background: var(--roofnet-cyan); border-color: var(--roofnet-cyan); transform: translateY(-2px); } .contact-submit:focus-visible { box-shadow: 0 0 0 4px rgba(0, 110, 171, .22); outline: none; } .contact-submit:disabled { cursor: wait; opacity: .8; transform: none; } .contact-submit-label, .contact-submit-loading { align-items: center; display: flex; gap: .65em; } .contact-submit-label .icon { height: 1.25em; transition: transform .2s ease; width: 1.25em; } .contact-submit:hover .contact-submit-label .icon { transform: translateX(3px); } .contact-submit-loading { display: none; } .contact-form.is-loading .contact-submit-label { display: none; } .contact-form.is-loading .contact-submit-loading { display: flex; } .contact-form-success { align-items: flex-start; display: flex; flex-direction: column; justify-content: center; min-height: 540px; } .contact-form-success > span { align-items: center; background: var(--roofnet-blue); border-radius: 50%; color: #fff; display: flex; height: 4.3em; justify-content: center; margin-bottom: 2em; width: 4.3em; } .contact-form-success > span .icon { height: 2em; stroke-width: 2.5; width: 2em; } .contact-form-success h2 { font-size: clamp(2.2rem, 4vw, 4rem); line-height: 1.08; margin: 0; } .contact-form-success > p:not(.portfolio-kicker) { color: var(--roofnet-muted); font-size: .94rem; line-height: 1.75; margin: 1.2em 0 0; max-width: 560px; } .contact-form-success > a { align-items: center; color: var(--roofnet-ink); display: inline-flex; font-size: .78rem; font-weight: 600; gap: .6em; margin-top: 2.5em; text-decoration: none; } .contact-form-success > a:hover { color: var(--roofnet-blue); } .contact-form-success > a .icon { height: 1.3em; transition: transform .2s ease; width: 1.3em; } .contact-form-success > a:hover .icon { transform: translateX(3px); } @media(max-width: 900px) { .contact-hero-layout, .contact-layout { grid-template-columns: 1fr; } .contact-hero-note { max-width: 480px; } .contact-details { position: static; } .contact-details-list { display: grid; gap: 0 1.5em; grid-template-columns: repeat(2, minmax(0, 1fr)); } .contact-details-list > div { grid-column: 1 / -1; } } @media(max-width: 600px) { .contact-hero { padding-bottom: 80px; padding-top: 65px; } .contact-hero-layout { gap: 35px; } .contact-hero h1 { font-size: 2.85rem; } .contact-details-list, .contact-form-grid { grid-template-columns: 1fr; } .contact-details-list > div { grid-column: auto; } .contact-form-card { padding: 29px 20px 32px; } .contact-form-footer { align-items: stretch; flex-direction: column; } .contact-submit { width: 100%; } .contact-form-success { min-height: 440px; } } .company-contact h2 { font-size: clamp(2.2rem, 3.5vw, 3.35rem); font-weight: 600; letter-spacing: -.06em; line-height: 1.1; margin: 0; } .company-contact { background: #f1f2f2; } .company-contact-card { align-items: center; display: flex; gap: 35px; justify-content: space-between; } .company-contact-card .roofnet-label { margin-bottom: 16px; } .company-contact-card .roofnet-button { flex: 0 0 auto; } .company-contact-card .roofnet-button span { font-size: 1.3rem; margin-left: 10px; vertical-align: -1px; } @media(max-width: 992px) { :root { --roofnet-header-height: 114px; } header.top.header_scroll { height: 56px; } #menu_bt { color: #fff; display: block; padding: 0; position: static; } #menu_bt svg { width: 30px; } header.top .menu { background: var(--roofnet-navy); display: none; left: 0; padding: 95px 40px 36px; position: absolute; top: 0; width: 100%; } header.top.menu_mobile .menu { display: block; } header.top .menu ul { align-items: flex-start; flex-direction: column; gap: 4px; } header.top .menu .roofnet-menu-contact { margin: 14px 0 0; } .roofnet-section { padding: 82px 0; } } @media(max-width: 640px) { .roofnet-logo { width: 150px; } .roofnet-eyebrow { font-size: .72rem; line-height: 1.6; margin-bottom: 24px; } .bouton.roofnet-button { text-align: center; width: 100%; } .roofnet-video-play { top: 60%; } .roofnet-footer { padding: 48px 0 35px; } .roofnet-footer-top, .roofnet-footer-bottom { align-items: flex-start; flex-direction: column; gap: 32px; } .roofnet-footer-top { padding-bottom: 42px; } .roofnet-footer-nav { flex-direction: column; gap: 13px; padding-top: 0; } .roofnet-footer-bottom p:last-child { flex-direction: column; gap: 5px; } .company-contact h2 { font-size: 2.3rem; } .company-contact { padding-bottom: 75px; padding-top: 75px; } .company-contact-card { align-items: flex-start; flex-direction: column; } .company-contact-card .roofnet-button { width: 100%; } } header.top { z-index:50 } header.top .page_content { width:100%; max-width:1600px; padding-inline:clamp(20px, 4vw, 64px); gap:25px } header.top .roofnet-logo { position:relative; flex-shrink:0; display:flex; align-items:center; gap:18px; width:auto; --header-roofnet-width:205px; --header-alpha-height:30px } header.top .logo-roofnet { display:block; width:var(--header-roofnet-width); height:auto; color:#fff; fill:currentColor; transition:width .3s ease, color .3s ease } header.top .logo-roofnet [fill] { fill:currentColor } header.top .logo-alpha { display:block; width:auto; height:var(--header-alpha-height); color:#fff; fill:currentColor; flex-shrink:0; transition:height .3s ease, color .3s ease; border-left: 1px solid rgba(255, 255, 255, 0.35); padding-left: 15px; } header.top.header_scroll::before { opacity:0 } header.top.header_scroll .roofnet-logo { width:auto; --header-roofnet-width:150px; --header-alpha-height:26px } header.top.header_scroll .logo-roofnet { color:var(--roofnet-blue) } header.top.header_scroll .logo-alpha { color:#2495ae } header.top .menu ul { gap:clamp(10px, 1.35vw, 22px); align-items:center } header.top .menu a { position:relative; font-size:clamp(11px, .9vw, 14px); white-space:nowrap; padding:9px 0; text-decoration:none; transition:color .2s ease } header.top .menu a::after { content:""; position:absolute; left:0; right:0; bottom:3px; height:2px; background:var(--roofnet-cyan); transform:scaleX(0); transform-origin:left; transition:transform .3s cubic-bezier(.2, .7, .3, 1) } header.top .menu a:hover::after, header.top .menu a:focus-visible::after, header.top .menu a[aria-current="true"]::after { transform:scaleX(1) } header.top.header_scroll .menu a { color:var(--roofnet-ink) } header.top .menu .roofnet-menu-contact { margin-left:0; padding-inline:16px; transition:background .2s ease, border-color .2s ease } header.top.header_scroll .menu .roofnet-menu-contact { background:var(--roofnet-blue); border-color:var(--roofnet-blue) } header.top.header_scroll .menu .roofnet-menu-contact a { color:#fff } header.top .menu .roofnet-menu-contact a { font-size:12px; text-transform:none } header.top .menu .roofnet-menu-contact a::after { display:none } header.top .menu .roofnet-menu-contact:hover, header.top .menu .roofnet-menu-contact:focus-within { background:var(--roofnet-cyan); border-color:var(--roofnet-cyan) } #menu_bt, #menu_bt_close { background:transparent; border:1px solid rgba(255, 255, 255, .8); width:44px; height:42px; padding:5px; cursor:pointer; line-height:0; position:relative; z-index:52 } #menu_bt { display:none } #menu_bt svg, #menu_bt_close svg { width:30px } header.top.header_scroll #menu_bt { padding:5px; border-color:var(--roofnet-blue) } header.top.header_scroll #menu_bt svg g { stroke:var(--roofnet-blue) } header.top.menu_mobile #menu_bt { display:none } header.top.menu_mobile #menu_bt_close { display:block } header.top.menu_mobile #menu_bt_close svg g { stroke:#fff } body.roofnet-menu-open { overflow:hidden } @media(max-width:1200px) { header.top .page_content { flex-wrap:nowrap } header.top .roofnet-logo { margin-right:auto } #menu_bt { display:block } header.top .menu { display:none; position:fixed; inset:0; background:var(--roofnet-navy); padding:90px clamp(24px, 7vw, 80px) 35px; overflow-y:auto; max-height:100dvh } header.top.menu_mobile .menu { display:flex; align-items:center } header.top.menu_mobile .roofnet-logo { position:relative; z-index:52 } header.top.menu_mobile .logo-roofnet, header.top.menu_mobile .logo-alpha { color:#fff } header.top .menu ul { flex-direction:column; align-items:flex-start; gap:8px } header.top .menu a, header.top.header_scroll .menu a { font-size:clamp(18px, 3.4vh, 28px); color:#fff; white-space:normal; padding:8px 0 } header.top .menu a::after { display:none } header.top .menu .roofnet-menu-contact { margin:10px 0 0; padding-inline:20px } header.top .menu .roofnet-menu-contact a { font-size:15px } } @media(min-width:1201px) { header.top .menu { display:block } header.top.menu_mobile #menu_bt_close { display:none } } @media(max-width:640px) { header.top .roofnet-logo { --header-roofnet-width:150px; --header-alpha-height:26px; gap:14px } } @media(prefers-reduced-motion:reduce) { header.top, header.top *, header.top .menu a::after { transition:none } }