/* carefoundation.css * CARE Foundation Site Redesign for 2020 * May 2020 */ :root { --header-height: calc(100px + 2em); --footer-height: calc(100px + 2em); --nav-item-height: 1em; --header-height-narrow: calc(50px + 2em); --video-height: calc(100vw * 720 / 1280 - 10px); --video-overlay-content-height: calc( var(--video-height) - var(--header-height) + 1vw ); --ilm_li_count: 5; /* starting count, will be overriden on scroller element */ --ilm_li_height: 20vw; --ilm_li_width: var(--ilm_li_height); /* render as square */ --ilm_ul_width: calc( var(--ilm_li_count) * (var(--ilm_li_width) + 2px) ); --page-content-max-width: 80%; --care-yellow: #c9bb45; --cat_color: #b74e06; } *, ::before, ::after { box-sizing: border-box; } .bold { font-weight: bold; } .center { text-align: center; } .outline_all, .outline_all * { outline: 4px groove rgba(255, 0, 0, 0.5); } body .hide { display: none !important; } body { margin: 0; padding: 0; min-height: 100vh; overflow-y: scroll; /* always show scroll-bar */ font-family: Arial, Helvetica, sans-serif; } body.home { color: white; background-color: black; min-height: 200vh; overflow-y: hidden; overflow-x: hidden; } header { position: sticky; top: 0px; z-index: 5; width: 100%; } header .header_content { position: relative; height: var(--header-height); width: var(--page-content-max-width); margin: 0px auto; padding: 1em; display: grid; grid-template-columns: 20% auto; grid-template-rows: 3em auto; /* auto; */ grid-template-areas: "logo social" "logo nav"; /* "logo extra"; */ } body:not(.home) header.old { background-repeat: no-repeat; background-position: top center; background-image: url("/assets/video/poster.png"); } footer, div.footer_placeholder { min-height: var(--footer-height); margin-top: 2em; padding: 1em; } .footer_placeholder { display: none; } footer { display: grid; grid-template-columns: 10em auto 10em; align-items: center; position: relative; width: 100%; /* 100VW produces oversized width, perhaps due to overflow-y:scroll on */ bottom: 0px; z-index: 2; background-color: black; color: white; } .footer_nav { justify-self: center; } .home footer { /* override fixed position for home page render */ position: relative; } .home .footer_placeholder { display: none; } @media (min-height: 800px) { .old .footer_placeholder { display: block; } .old footer { margin-top: 0px; position: fixed; } } header.black_out { background-color: black; /* background-color:rgba(128,255,128,0.5); */ } body.home .header_scroll_trigger { outline: 2px dotted pink; } header .logo_wrapper { grid-area: logo; position: relative; padding-top: 10px; padding-left: 10px; } footer .logo_wrapper { padding-left: 10px; padding-bottom: 10px; } body.home header .logo_wrapper.old { display: none; } header .logo_wrapper img, footer .logo_wrapper img { height: auto; } header .logo_wrapper img { width: 9em; /* max-width: 8em; */ } footer .logo_wrapper img { width: 6em; max-width: 6em; } footer .footer_last_col { grid-area: -1/-2; text-align: center; } .footer_last_col .social_connections { position: relative; } /* VIDEO UNDERLAY */ /* iframe#tigervideo { width:100VW; height:56VW; } */ #no_hero_video, #hero_video { position: absolute; top: 0; left: 0; height: var(--video-height); width: 100%; } /* #no_hero_video.nope_not_like_this, #hero_video.nope_not_like_this { width:100VW; max-width:calc(100VW - 17px); /* not sure why this is necessary * / } */ #no_hero_video.old, #hero_video.old { outline: 1px solid rgba(255, 128, 255, 0.5); } #hero_video video { width: 100%; } #no_hero_video { background-position: center; background-repeat: no-repeat; background-image: url("/assets/video/poster.png"); background-size: cover; } #no_hero_video p { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0px; padding: 0.5em; color: white; background-color: rgba(255, 0, 0, 0.5); } #hero_video { display: none; } #music_credits { position: absolute; height: 1.5em; width: 10em; text-align: center; background-color: black; color:#CCCCCC; font-size:12px; bottom:5px; right:5px; padding:2px; } .darken_overlay { position: absolute; height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.25); top: 0; left: 0; } #content_overlaying_video { height: var(--video-overlay-content-height); /* height:var(--video-height); */ width: 100%; bottom: 0px; z-index: 1; position: absolute; /* background-color:rgba(0,0,0,0.1); */ } body:not(.home) #content_overlaying_video { display: none; } .audio_toggle_container { position: absolute; top: 1em; right: 1em; padding: 1em; cursor: pointer; } .audio_toggle_container .fas { font-size: 1.5em; } .audio_toggle_container .fa-volume-mute, .audio_toggle_container.muted .fa-volume-up { display: none; } .audio_toggle_container.muted .fa-volume-mute { display: inline; } @media (min-width: 768px) { } /* per Christin -- ALWAYS show video on page, even on mobile render! */ #hero_video { display: block; } #no_hero_video { display: none; } /* SOCIAL CONNECTIONS */ header .social_connections { grid-area: social; justify-self: end; align-self: center; } footer .social_connections { text-align: center; } header .social_connections, footer .social_connections { color: white; } .social_connections a { margin: 0px 0.5em; } .social_connections .fab, .social_connections .fas, .contact .fas, nav .fas { color: white; font-size: 1.5em; } .contact { text-align: center; padding-top: 0.75em; } /* NAV SECTION */ nav { grid-area: nav; justify-self: end; } #nav_toggle_ctrl, #nav_toggle_ctrl + label { display: none; } #nav_toggle_ctrl + label { cursor: pointer; } #nav_toggle_ctrl + label i.fas { font-size: 2em; } #nav_toggle_ctrl + label i.fa-bars { display: block; } #nav_toggle_ctrl + label i.fa-times { display: none; } @media (min-width: 1250px) { nav { font-size: 1.1em; } } /*nav ul, */ .flat_ul { padding-left: 0px; list-style-type: none; } nav ul li { padding-left: 0px; position: relative; cursor: pointer; color: white; } nav ul li a { color: white; text-decoration: none; } nav ul.sub_nav li { padding: 3px 3px; } nav ul.sub_nav li a { color: black; background-color: var(--care-yellow); } nav > ul { display: grid; grid-template-columns: repeat(11, auto); } nav > ul > li:not(.pipe) div.nav_li_wrapper > a { padding: 1em 0.5em; display: block; } li.pipe { padding: 1em 0em; } nav li:hover .nav_li_wrapper { height: var(--nav-item-height); } nav.trial > ul > li:after { /* :not(:last-of-type) */ content: "|"; color: white; position: absolute; top: 0px; right: 0px; height: 1em; } /* nav > ul > li:last-of-type { border:0px; } */ nav li div .sub_nav { position: absolute; top: 3em; right: 50%; width: 11em; transform: translate(50%, 0); border-radius: 10px 10px; display: none; background: var(--care-yellow); padding: 4px; } nav li.active .nav_li_wrapper > a, nav li:hover .nav_li_wrapper > a { color: var(--care-yellow); } nav li:hover .sub_nav { display: block; } .sub_nav li.active, .sub_nav li.active a, .sub_nav li:hover, .sub_nav li:hover a { color: var(--care-yellow); background-color: white; } .show-yellow-pad .nav_li_wrapper.yellow-pad a { color: yellow; } .show-yellow-pad nav li:hover .nav_li_wrapper.yellow-pad a { color: black; } .show-yellow-pad /* header .black_out */ nav li:hover .nav_li_wrapper.yellow-pad a { background-color: var(--care-yellow); outline: 5px solid var(--care-yellow); } @media (max-width: 1150px) { header .header_content { width: 100%; height: var(--header-height-narrow); grid-template-rows: 0.5em auto; } header .logo_wrapper { padding: 0px; } header .logo_wrapper img { width: 6em; } nav ul.sub_nav li a { color: white; background-color: inherit; } nav li:hover .nav_li_wrapper { height: inherit; } nav li div .sub_nav { display: block; position: relative; top: 0; right: inherit; left: 1em; width: 100%; transform: none; background: black; } .sub_nav li.active, .sub_nav li.active a, .sub_nav li:hover, .sub_nav li:hover a { color: var(--care-yellow); background-color: inherit; } header .social_connections { display: none; } header nav > ul, header li.pipe { display: none; } #nav_toggle_ctrl + label { display: block; } header nav ul { top: var(--header-height-narrow); /* 50px */ left: 0; width: 100%; margin: 0px; position: absolute; outline: 0px solid gray; } nav ul li { background-color: black; } #nav_toggle_ctrl:checked ~ ul { display: block; } #nav_toggle_ctrl:checked + label i.fa-bars { display: none; } #nav_toggle_ctrl:checked + label i.fa-times { display: block; } footer nav ul { grid-template-columns: repeat(6, auto); grid-auto-rows: 35px; justify-items: center; align-items: center; margin: 0px; } footer nav > ul > li:not(.pipe) div.nav_li_wrapper > a { padding: 0px 0.5em; } } @media (max-width: 785px) { footer nav { display: none; } } /* BODY CONTENT CONTAINERS */ div.content_panel { margin: 0px auto; } body:not(.home) div.content_panel { width: var(--page-content-max-width); } div.content_panel.green { background-color: rgba(128, 255, 128, 0.5); } /* HOME PAGE PARALLAX STUFF */ .home .content_panel { /* min-height:8em; */ /* margin-bottom:2em; */ outline: 1px solid gray; } .home .content_panel > p { position: relative; /*! left: 0; */ top: 1em; margin: 0; } /* .content_panels */ .parallax { perspective: 300px; height: 100vh; overflow-x: hidden; overflow-y: scroll; } .p_group { position: relative; height: 500px; height: 100vh; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transform-origin: 100%; } .p_group { height: 50vh; } .p_group.video_panel { height: var(--video-height); margin-top: calc(var(--header-height) * -1); } .p_group:not(.panel3) { background-color: black; z-index: 4; } .p_layer { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .p_fore { -webkit-transform: translateZ(90px) scale(0.7); transform: translateZ(90px) scale(0.7); z-index: 1; } .p_base { -webkit-transform: translateZ(0px); transform: translateZ(0px); z-index: 4; } .p_back { -webkit-transform: translateZ(-300px) scale(2); transform: translateZ(-300px) scale(2); z-index: 3; } .panel3 .p_back { background-image: url("/assets/video/poster.png"); background-position: center center; background-size: cover; height: 100vh; } .debug3D .p_group { /* position: relative; */ transform: translate3d(800px, 0px, -700px) rotateY(30deg); perspective: 600px; /* height: 25VH; */ } .debug3D .p_layer { opacity: 0.75; box-shadow: 0 0 10px 5px pink; } /* trying to follow this example: https://keithclark.co.uk/articles/pure-css-parallax-websites/ */ .panel3 { overflow:hidden; } .panel5, .panel6 { display:none; } .p_layer.no_abs_pos { position:relative; /* cancel absolute positioning */ } .p_group.taller { height:auto; } .padding-side { padding-left: 5%; padding-right:5%; } .padding-all { padding:1em 5%; } .padding-all h3 { margin:0; } .donation_grid { display:grid; grid-template-areas: "d_btn d_verbiage" "mat_d mat_d" "a_wl_btn a_wl_verbiage"; /* grid-template-columns: 220px auto; */ } @media (max-width:768px) { .donation_grid { display:block; } } .donation_button { grid-area:d_btn; align-self: center; text-align: center; } .button-donate { border-radius:12px; padding:10px 20px 10px 10px; border: 1px solid black; background-color: #d2961d; } .donation_verbiage { grid-area: d_verbiage; } .material_donations { grid-area: mat_d; } .amazon_wishlist_button { grid-area: a_wl_btn; text-align:center; } .amazon_wishlist_button img { height:auto; max-width:100%; } .amazon_wishlist_verbiage { grid-area: a_wl_verbiage; align-self:center; } #homepage_banner_wrapper { text-align: center; color:lightgreen; } p.centered, h1.centered, h2.centered, h3.centered, h4.centered, h5.centered { text-align: center; } /* now provided by .flat_ul */ ul.animal_categories.old { padding-left: 0px; list-style-type: none; } ul.animal_categories { /* max-width:var(--page-content-max-width); */ /* margin:0px auto; */ width: 100%; display: grid; grid-template-columns: repeat(8, auto); justify-content: space-between; } ul.animal_categories a { color: var(--cat_color); text-decoration: none; font-weight: bold; display: block; padding: 5px; } /* ul.animal_categories li { padding:5px; } */ ul.animal_categories li.active, ul.animal_categories li:hover { background-color: var(--cat_color); box-shadow: 0px 0px 3px 1px var(--cat_color); } ul.animal_categories li.active a, ul.animal_categories li:hover a { color: white; } /* RESIDENT THUMBNAILS */ section#resident_thumbnails { /* max-width:var(--page-content-max-width); */ width: 100%; margin: 15px 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 19.7vw; } @media (max-width: 960px) { section#resident_thumbnails { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 26.1vw; } } @media (max-width: 750px) { section#resident_thumbnails { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 38.8vw; } } .tn_element .name_element, .tn_element .click_target { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .tn_element .click_target { cursor: pointer; } .name_element { background-color: rgba(0, 0, 0, 0.5); color: white; } .big_name { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 4vw; text-align: center; } .category_name { position: absolute; bottom: 0px; height: 20%; width: 100%; text-align: center; font-size: 2vw; } .tn_element { position: relative; background-size: contain; background-position: center; background-repeat: no-repeat; } .tn_element .name_element, .tn_element .click_target { display: none; } .tn_element:hover .name_element, .tn_element:hover .click_target { display: block; } /* RESIDENT DETAILS OUTPUT */ #resident_details .bio_wrap { padding:0.5em; outline:2px solid gold; } /* EDUCATION PAGE GALLERY GRID */ section.hands_on_animals, section.presentation_animals { position: relative; } .ed_page_grid { display: grid; grid-template-columns: repeat(4, 1fr); } .team_member { text-align: center; position: relative; height: 18em; } .team_member img { display: block; width: 100%; } .team_member p { position: absolute; left: 0; bottom: 0; width: 100%; } /* IN LOVING MEMORY SCROLLER */ section#in_loving_memory_scroller { min-height: 20vw; /* max-width:var(--page-content-max-width); */ /* width: 100%; */ padding-top: 1px; margin: 0px -8px; /* negative margins because scrollbar width intrudes viewport */ } section#in_loving_memory_scroller .scroller_viewport { height: var(--ilm_li_height); overflow: hidden; position: relative; } .scroller_wrapper { position: relative; } .scroller_wrapper #left_arrow.old, .scroller_wrapper #right_arrow.old { background-color: rgba(255, 255, 255, 0.5); } .scroller_wrapper #left_arrow, .scroller_wrapper #right_arrow { position: absolute; left: 0px; top: 0; width: 2em; height: 100%; color: black; font-weight: bold; text-align: center; cursor: pointer; display:none; } .scroller_wrapper.can_scroll_left #left_arrow, .scroller_wrapper.can_scroll_right #right_arrow { display:block; } /* provide hover reveal of scroller arrows */ .scroller_viewport #left_arrow.old { margin-left: -2.5em; transition: margin-left 250ms ease-in-out 0s; } .scroller_viewport #right_arrow.old { left: auto; right: 0px; margin-right: -2.5em; transition: margin-right 250ms ease-in-out 0s; } .scroller_wrapper:hover #left_arrow, .scroller_wrapper:hover #right_arrow { margin: 0px; } .scroller_wrapper #right_arrow { left: auto; right: 0px; } #left_arrow.old:hover, #right_arrow.old:hover { background-color: rgba(255, 255, 255, 0.75); } #left_arrow i, #right_arrow i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 3em; /* background-color: white; */ color:gray; } /* now provided by .flat_ul */ section#in_loving_memory_scroller ul.scrollable_items.old { padding-left: 0px; list-style-type: none; } section#in_loving_memory_scroller ul.scrollable_items { margin: 0px; height: 100%; width: var(--ilm_ul_width); transition: margin-left 250ms ease-in-out 0s; } ul.scrollable_items li { background-color: black; display: inline-block; height: var(--ilm_li_height); /* width: calc(20% - 2px); /* allowance for 1px margin-right */ width: var(--ilm_li_height); /* because they should be square */ margin-right: 1px; } .old ul.scrollable_items li:nth-child(4n + 1) { background-color: #222; } .old ul.scrollable_items li:nth-child(4n + 2) { background-color: #666; } .old ul.scrollable_items li:nth-child(4n + 3) { background-color: #444; } .old ul.scrollable_items li:nth-child(4n + 4) { background-color: #aaa; } .old ul.scrollable_items li:nth-child(4n + 5) { background-color: #888; } .bio_images img { display:block; width:100%; } .bio_images_wrapper, .bio_images { display:grid; grid-auto-flow:row; grid-template-columns: repeat(3,1fr); column-gap:1em; justify-content: space-between; } .bio_images_wrapper { grid-template-columns: repeat(2, 1fr); } @media (max-width:960px) { .bio_images_wrapper { grid-template-columns: 1fr; row-gap:0.5em; } } @media (max-width:768px) { .not .bio_images { grid-template-columns: repeat(3, 1fr); } }