@font-face {
font-family: "If Sans";
src: url("https://static.design.if.eu/ids-font/IfSans-Variable.woff2") format("woff2"),
url("https://static.design.if.eu/ids-font/IfSans-Variable.woff") format("woff");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
/* Italic versio */
@font-face {
font-family: "If Sans";
src: url("https://static.design.if.eu/ids-font/IfSans-Variable.woff2") format("woff2"),
url("https://static.design.if.eu/ids-font/IfSans-Variable.woff") format("woff");
font-weight: 100 900;
font-style: italic;
font-display: swap;
}
body {
font-family: "If Sans", Arial, sans-serif;
color: #331e11;
font-size: 1rem;
font-variation-settings: "wght" 78;
font-weight: 400;
letter-spacing: normal;
line-height: 1.75rem;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0;
padding: 0;
}
.header {
background-color: #ffffff;
border-bottom: 1px solid #eaeaea;
}
.hero {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 2rem;
background-color: #e8e0d9;
position: relative;
min-height: 25rem;
}
.hero-image img {
display: block;
/* Ensures the image behaves like a block element */
width: auto;
/* Allows the image to grow naturally */
max-width: none;
/* Removes any intrinsic max-width limitations */
height: auto;
/* Maintains aspect ratio */
position: relative;
/* Allows positioning adjustments */
right: 0;
width: 100%;
}
.hero-text {
flex: 1;
max-width: 50%;
}
.preferences {
background-color: white;
padding-top: 3.5rem;
padding-bottom: 3.5rem;
}
.form-check {
margin-bottom: 1rem;
}
footer {
padding: 1rem;
background-color: #F6F3F0;
}
.footer {
text-align: left;
font-size: 0.9rem;
display: flex;
flex-direction: row;
justify-content: space-between;
}
footer a {
color: #0054F0;
text-decoration: none;
padding-right: 1rem;
}
footer a:hover {
text-decoration: underline;
}
footer a::after {
background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-arrow-up-right' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M14 2.5a.5.5 0 0 0-.5-.5h-6a.5.5 0 0 0 0 1h4.793L2.146 13.146a.5.5 0 0 0 .708.708L13 3.707V8.5a.5.5 0 0 0 1 0z'/></svg>");
background-position: 50%;
background-repeat: no-repeat;
background-size: .75rem .75rem;
content: "";
display: inline-block;
height: .75rem;
margin-left: .5rem;
white-space: nowrap;
width: .75rem;
}
.policy a::after {
background-image: none;
}
@media (max-width: 988px) and (min-width: 768px) {
.hero {
flex-direction: row;
text-align: left;
}
.hero-text {
flex: 1;
padding-right: 1rem;
}
.hero img {
max-width: 50%;
flex: 1;
}
.container {
max-width: 750px;
}
}
@media (max-width: 768px) {
.hero {
flex-direction: column-reverse;
text-align: left;
}
.hero-text {
padding: 0;
}
.hero img {
max-width: 100%;
}
}
/* self styles */
.navbar {
height: 5rem;
padding: 0px;
background-color: #FAF9F7;
}
.navbar-expand-lg .navbar-nav .nav-link {
padding-left: 1rem;
padding-right: 2rem;
}
.hero-text {
padding: 2rem 4rem 2rem 0rem;
}
h1 {
margin-bottom: 2rem
}
.nav-item a {
align-items: center;
background-color: transparent;
border: none;
box-shadow: none;
box-sizing: border-box;
color: #331e11;
cursor: pointer;
display: flex;
flex-direction: row;
font-family: "If Sans", Arial, sans-serif;
font-size: .9375rem;
font-variation-settings: "wght" 72;
font-weight: 400;
height: 3.25rem;
justify-content: center;
letter-spacing: normal;
line-height: 1.5rem;
margin: 0;
max-width: none;
min-width: 0;
overflow: hidden;
padding: 0 1rem;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
.content-hero {
background-color: #e8e0d9;
overflow: hidden;
}
.content-preferences {
background-color: white;
}
.container.preferences {
background-color: white;
}
.container.ft {
color: #6E625E;
font-size: 0.9rem;
}
@media screen and (min-width: 25rem) {
body {
font-size: 1.125rem
}
}
.if.heading.large {
text-rendering: optimizeLegibility;
font-family: "If Sans", Arial, sans-serif;
font-size: 1.5rem;
font-variation-settings: "wght" 54;
font-weight: 400;
letter-spacing: normal;
line-height: 2.5rem;
}
@media screen and (min-width: 22.5rem) {
.if.heading.large {
font-size: 1.625rem;
}
}
@media screen and (min-width: 25rem) {
.if.heading.large {
font-size: 2.5rem;
line-height: 3rem;
}
}
@media screen and (min-width: 60rem) {
.if.heading.large {
font-size: 2.625rem;
font-variation-settings: "wght" 45;
font-weight: 400;
line-height: 3.5rem;
}
}
.hero-image {
background-image: url('https://image.em.if.eu/lib/fe3b11717564047f711371/m/1/9c5a73ca-88f8-4806-a20a-f8f35d4f41aa.jpg');
width: 48.8vw;
left: 50%;
position: absolute;
top: 0;
height: 100%;
margin-left: 0;
margin-right: 0;
background-repeat: no-repeat;
background-size: cover;
flex-grow: 0;
flex-shrink: 0;
background-position-x: 50% !important;
background-position-y: center !important;
}
.if.text.meta {
font-family: "If Sans", Arial, sans-serif;
margin-bottom: 16px;
font-size: 1.125rem;
font-variation-settings: "wght" 78;
font-weight: 400;
letter-spacing: normal;
line-height: 1.75rem;
}
h2 {
font-size: 1.5rem;
line-height: 2.5rem;
font-variation-settings: "wght" 45;
font-weight: 400;
letter-spacing: normal;
}
.preferences p {
margin-bottom: 2rem;
;
}
/* Override default slider styles */
.form-check-input {
width: 3rem !important;
/* Slider width (48px) */
height: 1.5rem !important;
/* Slider height */
background-color: #fff !important;
/* White background */
border: 1px solid #6E625E !important;
/* Black border for the slider */
border-radius: 12px !important;
/* Rounded slider shape */
appearance: none !important;
/* Removes default checkbox appearance */
position: relative !important;
/* For positioning the knob */
cursor: pointer !important;
/* Pointer cursor on hover */
outline: none !important;
/* Removes focus outline */
transition: background-color 0.1s ease-in-out, border-color 0.1s ease-in-out !important;
/* Smooth transitions */
}
/* Checked slider */
.form-check-input:checked {
background-color: #0054F0 !important;
/* Blue background when checked */
border-color: #0054F0 !important;
/* Blue border when checked */
}
/* Circle (knob) for the slider */
.form-check-input::before {
content: '' !important;
width: 1.3rem !important;
/* Knob width */
height: 1.3rem !important;
/* Knob height */
background-color: #fff !important;
/* White knob */
border: 1px solid #6E625E !important;
/* Black border for the knob */
border-radius: 50% !important;
/* Circular knob */
position: absolute !important;
top: 50% !important;
/* Centers the knob vertically */
left: -0.1rem !important;
/* Updated position for unselected knob */
transform: translateY(-50%) !important;
/* Adjust for vertical alignment */
transition: transform 0.1s ease-in-out, border-color 0.1s ease-in-out !important;
/* Smooth movement */
}
/* Checked slider's knob */
.form-check-input:checked::before {
transform: translate(1.5rem, -50%) !important;
/* Moves the knob to the right when checked */
border: none !important;
/* Removes the black border for the knob when checked */
left: -0.1rem !important;
}
/* Label text spacing */
.form-check-label {
margin-left: 0.5rem !important;
/* Space between the slider and the label text */
font-family: "If Sans", Arial, sans-serif;
font-size: 1.125rem;
line-height: 1.75rem;
margin-left: 0.5rem !important;
font-variation-settings: "wght" 78;
font-weight: 400;
letter-spacing: normal;
}
.text-muted.d-block {
margin-left: 0.7rem;
font-size: 1rem;
line-height: 1.75rem;
font-variation-settings: "wght" 78;
font-weight: 400;
letter-spacing: normal;
}
.btn-primary {
width: fit-content;
background-color: #0054F0;
padding: 14px 24px;
gap: 2rem;
display: flex;
margin-top: 1.5rem !important;
}
.preferences div:nth-last-child(3){
padding-bottom: 1rem;
border-bottom: 1px solid #D6CEC8;
}
@media (max-width: 998px) {
.hero {
flex-direction: column-reverse;
text-align: left;
gap: 0;
}
.hero-image {
position: static;
height: 50vw;
width: 100vw;
margin-left: -3rem;
margin-right: -5rem;
;
}
.hero-text {
max-width: 100%;
padding-right: 0;
}
.container {
width: calc(100% - 64px);
margin-left: 1rem;
margin-right: 2rem;
max-width: 100vw;
}
.preferences {
padding-top: 3rem;
}
.text-muted.d-block {
font-size: 0.9rem;
line-height: 1.25rem;
font-variation-settings: "wght" 78;
font-weight: 400;
letter-spacing: normal;
}
.footer {
padding-right:0;
display: block;
text-align: center;
width: 100%;
margin: 0;
}
.footer a,
.policy a,
.ft p {
display: block;
text-align: center;
padding-bottom: 0.75rem;
padding-right:0;
}
.ft {
width: 100%;
margin: 0;
}
nav .container {
width: 100%;
margin-right: 0;
}
nav .container button {
background: none;
border: none;
}
.menu {
display: block;
font-size: 1rem;
}
/* Ensure the navbar-collapse expands properly */
.navbar-collapse {
max-width: 250px;
position: absolute;
top: 5rem;
/* Position it just below the navbar */
right: 0;
background-color: #FAF9F7;
/* Match the navbar background */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
/* Add a subtle shadow */
z-index: 1000;
/* Ensure it appears above other content */
border-radius: 0 0 4px 4px;
}
.navbar-collapse.show {
display: block;
/* Ensure the menu is visible when toggled */
}
/* Add an animation for dropdown */
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Adjust the toggle button */
.navbar-toggler {
border: none;
background: none;
}
/* Ensure menu items look good */
.navbar-nav .nav-link {
text-align: left;
padding: 0.5rem 1rem;
display: block;
color: #331e11;
}
.navbar-nav .nav-link:hover {
background-color: #e8e0d9;
}
}
.thank-you{
margin-top: 6rem;
margin-bottom: 6rem;
text-align: center;
}
.t-header{
margin-top:2rem;
}
.navbar-brand {
background-image: url('https://image.em.if.eu/lib/fe3b11717564047f711371/m/1/de99458b-c0c3-473c-9498-913bf9c3cde3.jpg');
background-size: contain;
background-repeat: no-repeat;
width: 40px;
height: 40px;
display: inline-block;
}