/**** Fonts: ****/ @font-face{ font-family: syncopate; src: url(syncopate_regular.ttf); } /*@font-face{ font-family: syncopate; src: url(syncopate_bold.ttf); font-weight: bold; }*/ /**** Variables: ****/ :root{ /* root variables are available in the whole document.*/ /* in this document the 'root' tag is the '' tag.*/ /* set the font-size to 62.5% to makes it easier to working with 'rem'.*/ /* 62.5% font-size is equal to 10px and 1rem in most browsers*/ font-size: 62.5%; /* 62.5% == 10px == 1rem */ --my-window-ratio: 1;/*<- this is updated from JS.*/ --my-color-light-green: #acbf64; --my-color-green: #809c13; --my-color-dark-green: #4e5f0c; --my-logo-pos-y: 5vw; --my-logo-pos-x: 5vw; --my-logo-width: 45vw; --my-logo-height: calc( var(--my-logo-width) * 0.439); /*<- height/width ratio, see in HTML.*/ --my-island-pos-y: 7.5vw; --my-island-height: calc( 100vw * 0.49); /*<- height/width ratio, see in HTML.*/ --my-scrollspy-width: 20.0rem; } /*** SVG Vitjun logo: ***/ #id_sticky-container{ position: absolute; top: 0; left: var(--my-logo-pos-x); width: var(--my-logo-width); height: calc(( var(--my-logo-height) * 1.2 ) + var(--my-island-height)); } #id_vitjun_logo{ position: sticky; top: var(--my-logo-pos-y); } #id_vitjun_logo svg{ width: 100%; height: 100%; } #id_vitjun_logo svg .c_svg-logo-art{ stroke: var(--my-color-green); } /**** Wrapper and The SVG 'northern-sea-line' in the header: ****/ #id_wrapper{ position: absolute; width: 100%; min-height: max(100%, var(--my-island-height)); /* The SVG 'northern-sea-line' in the header: */ background-image: url(nordurstrond_skuggi.svg); background-repeat: no-repeat; background-size: 100%; top: var(--my-island-pos-y); } /**** Header: ***/ #id_header-space{ width: 100%; min-height: calc( 90vh - var(--my-island-height)); } #id_vitjun-header{ --y-scale: 2.2; --y: calc( var(--my-island-height) + var(--my-island-pos-y)); position: absolute; right: var(--my-scrollspy-width); top: max( calc( var(--y) / var(--y-scale)), calc( var(--y) / var(--my-window-ratio) / 1.15 )); width: min-content; text-align: center; margin-right: 2vw; text-shadow: 0rem 0rem 0.8rem #fffee5; } #id_vitjun-header h2{ text-align: right; font-size: calc(( 58vw - var(--my-scrollspy-width)) * 0.055); white-space: nowrap; padding-top: 0rem; } #id_vitjun-header blockquote{ background-image: radial-gradient(ellipse at top, rgb(255 255 255 / 50%), transparent); border-top: 5px solid; border-image: linear-gradient(135deg, var(--my-color-green), transparent) 1; padding-bottom: calc( 1rem * var(--my-window-ratio)); } /**** Responsive Header: ****/ /* materializecss: s=0px-600px, m=601px-992px, l=993px-1200px and xl=1201 & above. */ @media screen and (max-width: 1165px){ /* this is only for 1165px and less.*/ #id_vitjun-header{ --y-scale: 1.8; } #id_vitjun-header h2{ font-size: calc(( 72.5vw - var(--my-scrollspy-width)) * 0.055); } }/*@medie*/ @media screen and (max-width: 870px){ /* this is only for 870px and less.*/ #id_vitjun-header{ --y-scale: 1.45; } #id_vitjun-header h2{ font-size: calc(( 92.5vw - var(--my-scrollspy-width)) * 0.055); } }/*@medie*/ @media screen and (max-width: 600px){ /* this is only for 600px and less.*/ #id_vitjun-header{ position: static; width: 100%; margin: 0rem; padding: 0rem 2rem 8vw 2rem; } #id_vitjun-header h2{ font-size: calc(90vw * 0.0525 ); } #id_header-space{ min-height: 0rem; } }/*@medie*/ /**** Main: ****/ main{ background-image: linear-gradient(to bottom, var(--my-color-light-green), 20%, white ); width: 100%; min-height: 100%; margin-top: var(--my-island-height); } /*** Collapsible: ***/ #id_set1-title1{ grid-area: a_set1-title1; } #id_set1-img1{ grid-area: a_set1-img1; } #id_set1-section1{ grid-area: a_set1-section1; } #id_set1-section2{ grid-area: a_set1-section2; } #id_set1-section3{ grid-area: a_set1-section3; } #id_set2-title1{ grid-area: a_set2-title1; } #id_set2-img1{ grid-area: a_set2-img1; } #id_set2-section1{ grid-area: a_set2-section1; } #id_set2-section2{ grid-area: a_set2-section2; } #id_set3-title1{ grid-area: a_set3-title1; } #id_set3-img1{ grid-area: a_set3-img1; } #id_set3-section1{ grid-area: a_set3-section1; } #id_set3-section2{ grid-area: a_set3-section2; } #id_set4-title1{ grid-area: a_set4-title1; } #id_set4-img1{ grid-area: a_set4-img1; } #id_set4-section1{ grid-area: a_set4-section1; } #id_set5-title1{ grid-area: a_set5-title1; } #id_set5-img1{ grid-area: a_set5-img1; } #id_set5-section1{ background: radial-gradient(ellipse at 0% 0%, white, white, transparent 70% ); padding-left: 0; grid-area: a_set5-section1; } #id_set5-section2{ grid-area: a_set5-section2; } .c_set-title{ font-size: min(16.5rem, calc(( 100vw - var(--my-scrollspy-width)) * 0.08)); padding-top: 5rem; } .c_set-img{ width: 100%; padding: 5rem 1vw 2rem 1vw; } .c_radgjafi-container{ padding-bottom: 3.5rem; } .c_radgjafi-container img{ float: left; width: min( 50%, 18rem ); margin: 0 4vw 1.5rem 0; } .c_radgjafi-container p{ margin-top: 0; } #id_set5-section1 p b{ font-size: 1.6rem; } #id_menntun1{ float: right; max-width: max( 49%, calc( 100% - 18rem - 4vw )); margin-top: 0.5rem; padding-top: 1rem; } #id_menntun1 ul{ padding-left: 2.25rem; } #id_menntun1 ul li{ color: var(--my-color-green); list-style: square; font-size: 1.2rem; } #id_menntun1 ul li p{ color: black; padding-right: 2.25rem; margin-bottom: 0.75rem; } .c_set-section{ border-top: 5px solid; border-image: linear-gradient(135deg, var(--my-color-light-green), transparent) 1; } .c_set-section-line{ border-image: linear-gradient(transparent, var(--my-color-light-green), transparent) 50; } #id_main h3{ padding: 0rem 2.25rem 0rem 2.25rem; } #id_main .c_epilogue{ padding: 0rem 2.25rem 0rem 2.25rem; margin-bottom: 1rem; } .c_arrow{ background: black; width: 1.25rem; height: 1.25rem; margin: 0.4rem 1rem 0rem 0.5rem; } /* overriding materialize.css: */ .collapsible-header { background-color: rgb(255 255 255 / 70%); border-bottom: 1px solid rgb(40 40 40 / 25%); } .collapsible.popout>li { font-size: 1.33rem; } .collapsible-body { background-color: rgb(255 255 255 / 70%); border-bottom: 1px solid rgb(40 40 40 / 25%); } blockquote { border-left: 5px solid var(--my-color-light-green); } blockquote span{ white-space: nowrap; } .collapsible { margin-top: 2.5rem; } #id_main{ width: 100%; padding-bottom: 8vw; padding-right: calc( 2rem + var(--my-scrollspy-width)); padding-left: 2rem; /* grid: */ display: grid; grid-template-columns: 1fr 1fr 3fr 1fr; /*grid-auto-rows: minmax(10px, auto);*/ /* just so we can see the rows.*/ grid-auto-rows: minmax(min-content, max-content); /* areas: */ grid-template-areas: "a_set1-img1 a_set1-title1 a_set1-title1 a_set1-title1 " "a_set1-img1 a_set1-section1 a_set1-section1 . " "a_set1-img1 . a_set1-section2 a_set1-section2" "a_set1-img1 a_set1-section3 a_set1-section3 . " "a_set2-img1 a_set2-title1 a_set2-title1 a_set2-title1 " "a_set2-img1 a_set2-section1 a_set2-section1 . " "a_set2-img1 . a_set2-section2 a_set2-section2" "a_set3-img1 a_set3-title1 a_set3-title1 a_set3-title1 " "a_set3-img1 a_set3-section1 a_set3-section1 . " "a_set3-img1 . a_set3-section2 a_set3-section2" "a_set4-img1 a_set4-title1 a_set4-title1 a_set4-title1 " "a_set4-img1 a_set4-section1 a_set4-section1 . " "a_set5-img1 a_set5-title1 a_set5-title1 a_set5-title1 " "a_set5-img1 a_set5-section1 a_set5-section1 . " ; } /**** Responsive main: ****/ /* materializecss: s=0px-600px, m=601px-992px, l=993px-1200px and xl=1201 & above. */ @media screen and (max-width: 1200px){ /* this is only for 1200px and less.*/ #id_menntun1{ max-width: none; width: 100%; padding-left: 2.25rem; border: hidden; } }/*@medie*/ @media screen and (max-width: 775px){ /* this is only for 775px and less.*/ .c_radgjafi-container img{ margin-right: 0.5rem; } }/*@medie*/ @media screen and (max-width: 680px){ /* this is only for 680px and less.*/ .c_radgjafi-container img{ width: 65%; margin-right: 30%; } }/*@medie*/ @media screen and (max-width: 600px){ /* this is only for 600px and less.*/ #id_main{ padding: 8vw 2rem; padding-top: calc( 99vh - var(--my-header-height)); grid-template-columns: 5fr 1fr; /* areas: */ grid-template-areas: "a_set1-title1 a_set1-img1" "a_set1-section1 a_set1-section1" "a_set1-section2 a_set1-section2" "a_set1-section3 a_set1-section3" "a_set2-title1 a_set2-img1" "a_set2-section1 a_set2-section1" "a_set2-section2 a_set2-section2" "a_set3-title1 a_set3-img1" "a_set3-section1 a_set3-section1" "a_set3-section2 a_set3-section2" "a_set4-title1 a_set4-img1" "a_set4-section1 a_set4-section1" "a_set5-title1 a_set5-img1" "a_set5-section1 a_set5-section1" "a_set5-img2 a_set5-img2"; } .c_set-title{ font-size: calc( 80vw * 0.08); padding-left: 1vw; } .c_set-img{ padding: 5rem 0 0 0; } .c_radgjafi-container img{ width: 50%; margin-right: 7.5%; } }/*@medie*/ @media screen and (max-width: 380px){ /* this is only for 380px and less.*/ .c_radgjafi-container img{ width: 65%; margin-right: 30%; } }/*@medie*/ /*** Footer: ***/ #id_footer-area1{ grid-area: a_footer-area1; background-image: url(simi.svg); background-repeat: no-repeat; background-size: 60%; background-position: 100% 60%; padding: 1rem 4vw 1rem 0.2rem; } #id_footer-area2{ grid-area: a_footer-area2; background-image: url(stadsetning.svg); background-repeat: no-repeat; background-size: 75%; background-position: 100% 60%; padding: 1rem 4vw 1rem 0.2rem; } #id_footer-area3{ grid-area: a_footer-area3; padding: 1rem 4vw 1rem 0.2rem; } #id_footer-spacer{ grid-area: a_footer-spacer; } #id_footer-bottom{ grid-area: a_footer-bottom; background-color: var(--my-color-light-green); } #id_footer-bottom .c_th_left{ text-align: right; } #id_footer h4{ font-size: 1.2rem; font-weight: bold; margin: 0; } #id_footer p{ margin: 0; } #id_footer { position: sticky; top: 100vh; background-color: var(--my-color-green); padding: 0; background-image: url(logo.svg); background-repeat: no-repeat; background-size: auto 40%; background-position: top 40% right calc((( 100vw - var(--my-scrollspy-width)) / 3 ) / 1.75); width: 100%; color: #ffffff; padding: 1rem 0 0 0; font-weight: bold; /* grid: */ display: grid; grid-template-columns: 1fr 1fr 1fr var(--my-scrollspy-width); grid-auto-rows: minmax(min-content, max-content); justify-items: center; /* areas: */ grid-template-areas: "a_footer-area1 a_footer-area2 a_footer-area3 a_footer-spacer" "a_footer-bottom a_footer-bottom a_footer-bottom a_footer-bottom"; } /**** Responsive footer: ****/ /* materializecss: s=0px-600px, m=601px-992px, l=993px-1200px and xl=1201 & above. */ @media screen and (max-width: 600px){ /* this is only for 600px and less.*/ #id_footer{ grid-template-columns: 1fr minmax(max-content, 20rem) 1fr; justify-items: start; /* areas: */ grid-template-areas: "a_footer-spacer a_footer-area1 ." "a_footer-spacer a_footer-area2 ." "a_footer-spacer a_footer-area3 ." "a_footer-bottom a_footer-bottom a_footer-bottom"; } #id_footer { background-image: none; } #id_footer-area1{ background-size: auto 70%; background-position: 100% 70%; width: 100%; } #id_footer-area2{ background-size: auto 70%; background-position: 20% 50%; width: 100%; padding-left: 50%; } #id_footer-area3{ background-image: url(logo.svg); background-repeat: no-repeat; background-size: auto 50%; background-position: 100% 60%; width: 100%; } }/*@medie*/ /*** Scrollspy: ***/ #id_scrollspy-container{ position: fixed; top: 0; right: 0; width: var(--my-scrollspy-width); height: 100vh; } #id_scrollspy-bg{ position: relative; top: 50%; transform: translateY( -50% ); width: 100%; padding: 5rem 0 5rem 0; /* blur-filter: */ -webkit-backdrop-filter: blur( 0.75rem ); -moz-backdrop-filter: blur(0.75rem); backdrop-filter: blur( 0.75rem ); background: linear-gradient( transparent, rgb(255 255 255 / 50%) 20% 80%, transparent ); /* shadow: */ -webkit-box-shadow: 0 5px 5px 0 rgb(0 0 0 / 16%), 0 5px 10px 0 rgb(0 0 0 / 12%); box-shadow: 0 5px 5px 0 rgb(0 0 0 / 16%), 0 5px 10px 0 rgb(0 0 0 / 12%); /* box-shadow on only one sid: */ clip-path: inset( 0px 0px 0px -15px ); } .c_arrow-point{ display: inline-block; font-size: 1rem; color: blueviolet; background: rgb(23, 23, 23); width: 1.0rem; height: 1.0rem; /*margin: 0.4rem 1rem 0rem 0.5rem;*/ clip-path: polygon( 42% 8%, 50% 0, 92% 42%, 100% 50%, 50% 100%, 42% 92%, 85% 50%, 42% 8% ); } /* overriding materialize.css: */ #id_scrollspy-container ul li{ font-family: syncopate; font-weight: bold; color: black; font-size: 1.2rem; padding: 1rem; } .table-of-contents a { color: black; } .table-of-contents a:hover { color: black; border-left: 2px solid var(--my-color-green); } .table-of-contents a.active { border-left: 4px solid var(--my-color-green); } /**** Responsive Scrollspy: ****/ @media screen and (max-height: 450px){ /* this is only for 450px and less.*/ #id_scrollspy-container ul li{ font-size: 2.66vh; padding: 2.22vh; } #id_scrollspy-container .c_divider{ display: none; } }/*@medie*/ /*** Sidenav: (phones) ***/ #id_sidenav-trigger{ position: fixed; top: 1rem; right: 1rem; padding: 1rem; border-radius: 50%; z-index: 100; /* shadow: */ border-bottom: 1px solid rgb(40 40 40 25%); -webkit-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%); box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%); /* blur-filter: */ -webkit-backdrop-filter: blur(0.75rem); -moz-backdrop-filter: blur(0.75rem); backdrop-filter: blur(0.75rem); background-color: rgb(255 255 255 / 50%); } #id_sidenav-trigger i{ color: rgb(51 51 51); top: 0.2rem; /* make clickable bigger: */ display: inline-block; position: relative; padding: 0.5em; margin: -0.5em; } #slide-out a i{ font-size: 1.33rem; margin-right: 0; } /*** Text & Font: ***/ .c_font-syncopate{ font-family: syncopate; } h3{ font-size: 1.75rem; } h4{ font-size: 1.3rem; margin: 0; line-height: 1.7; } p{ font-size: 1.25rem; } main a{ font-size: 1.35rem; font-weight: bolder; color: var(--my-color-dark-green); } /*** Other Styles ***/ .c_overlayer{ border-bottom: 1px solid rgb(40 40 40 / 25%); -webkit-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%); box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%); /* blur-filter: */ -webkit-backdrop-filter: blur(0.75rem); -moz-backdrop-filter: blur(0.75rem); backdrop-filter: blur(0.75rem); background-color: rgb(255 255 255 / 50%); } /*** Animations: ***/ .c_animate-soon{ opacity: 0; } .c_animate{ animation-delay: 0.2s; animation-duration: 0.4s; transform-origin: 50% 50%; animation-timing-function: ease; animation-fill-mode: backwards; } /* Pop In: */ .c_animate.pop{ animation-name: animate-pop; } @-webkit-keyframes animate-pop{ 0%{ opacity: 0; transform: scale(0.95, 0.95); } 100%{ opacity: 1; transform: scale(1, 1); } } @keyframes animate-pop{ 0%{ opacity: 0; transform: scale(0.95, 0.95); } 100%{ opacity: 1; transform: scale(1, 1); } } /* Glow In: */ .c_animate.glow{ animation-name: animate-glow; animation-duration: 0.9s; } @-webkit-keyframes animate-glow{ 0%{ opacity: 0; -webkit-filter: brightness(3) saturate(3); filter: brightness(3) saturate(3); transform: scale(0.8, 0.8); } 100%{ opacity: 1; -webkit-filter: brightness(1) saturate(1); filter: brightness(1) saturate(1); transform: scale(1, 1); } } @keyframes animate-glow{ 0%{ opacity: 0; filter: brightness(3) saturate(3); transform: scale(0.8, 0.8); } 100%{ opacity: 1; filter: brightness(1) saturate(1); transform: scale(1, 1); } } /* Slide In: */ .c_animate.slide{ animation-name: animate-slide; } @keyframes animate-slide{ 0%{ opacity: 0; transform: translate(5rem, 0); } 100%{ opacity: 1; transform: translate(0, 0); } } .c_arrow{ animation-name: rotate-90; animation-duration: 1.5s; animation-timing-function: ease-in-out; animation-fill-mode: both; } li.active .c_arrow{ animation-name: rotate90; } @keyframes rotate90{ 0%{ clip-path: polygon(42% 8%, 50% 0, 92% 42%, 100% 50%, 50% 100%, 42% 92%, 85% 50%, 42% 8%); } 40%{ clip-path: polygon(42% 8%, 50% 0, 92% 42%, 100% 50%, 50% 100%, 42% 92%, 0 50%, 42% 8%); background: var(--my-color-green); } 60%{ clip-path: polygon(8% 42%, 50% 0, 92% 42%, 100% 50%, 50% 100%, 42% 92%, 0 50%, 8% 42%); background: var(--my-color-green); } 100%{ clip-path: polygon(8% 42%, 50% 85%, 92% 42%, 100% 50%, 50% 100%, 42% 92%, 0 50%, 8% 42%); } } @keyframes rotate-90{ 0%{ clip-path: polygon(8% 42%, 50% 85%, 92% 42%, 100% 50%, 50% 100%, 42% 92%, 0 50%, 8% 42%); } 40%{ clip-path: polygon(8% 42%, 50% 0, 92% 42%, 100% 50%, 50% 100%, 42% 92%, 0 50%, 8% 42%); background: var(--my-color-green); } 60%{ clip-path: polygon(42% 8%, 50% 0, 92% 42%, 100% 50%, 50% 100%, 42% 92%, 0 50%, 42% 8%); background: var(--my-color-green); } 100%{ clip-path: polygon(42% 8%, 50% 0, 92% 42%, 100% 50%, 50% 100%, 42% 92%, 85% 50%, 42% 8%); } } /* Animation Delays: */ .as-delay-0{ animation-delay: 0s; } .as-delay-1{ animation-delay: 0.6s; } .as-delay-2{ animation-delay: 0.7s; } .as-delay-3{ animation-delay: 0.8s; } .as-delay-4{ animation-delay: 0.9s; } .as-delay-5{ animation-delay: 1s; } .as-delay-6{ animation-delay: 1.1s; } .as-delay-7{ animation-delay: 1.2s; } .as-delay-8{ animation-delay: 1.3s; } .as-delay-9{ animation-delay: 1.4s; } .as-delay-10{ animation-delay: 1.5s; } .as-delay-11{ animation-delay: 1.6s; } .as-delay-12{ animation-delay: 1.7s; } .as-delay-13{ animation-delay: 1.8s; } .as-delay-14{ animation-delay: 1.9s; } .as-delay-15{ animation-delay: 2s; } /*Remove animations for users who have enabled their reduced motion preference setting:*/ @media screen and (prefers-reduced-motion: reduce){ .animate{ animation: none !important; } }