/* Theme Name: labrea Theme URI: https://tarpits.org/ Description: LA Brea Tar Pits WP-Theme Version: 1.0 Author: CHRS Interactive Author URI: https://www.chrsinteractive.com/ */ /* ---------------------------- */ /* -- @MASTERHEAD/NAVIGATION -- */ body.overflow-hidden {overflow: hidden;} .hide-mobile {display:none;} .site-header {width:100%;position:sticky;top:0;left:0;z-index:99;background:#fff;} .site-header.sticky {box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);} .header-bar {background:#000;text-align:right;} .header-bar-link {display:inline-block;height:40px;padding:0 20px;background:var(--color-orange);color:#fff;text-align:center;font-size:16px;line-height:40px;font-weight:800;letter-spacing: 0.4px;} .header-bar-link:hover {color:var(--color-main);background:var(--color-beige);} .header-main {display:flex;justify-content:space-between;align-items:center;} .logo {width:100px;display:block;} .logo img {display:block;} .site-header.sticky .logo {width:70px;} /* Main Menu */ .mainNav {margin-right:60px;} .mainNav li {display:inline-block;margin-right:20px;padding:5px 0;font-size:18px;line-height:30px;font-weight:500;position:relative;} .mainNav li a {color:#000;display:inline-block;position:relative;z-index:2;} .mainNav li a:after {content:"";position:absolute;bottom:-4px;left:0;width:0;border-bottom:3px solid var(--color-orange);transition:0.5s;z-index:3;} .mainNav li:hover a:after {width:100%;} .mainNav li a:hover, .mainNav li.current-menu-item a {color:#000;} /* Level 2 */ .mainNav li ul {display:none;} .mainNav li:hover > ul {display: block;} .mainNav li ul {position: absolute; top: 100%;left:-20px;padding:20px;width:max-content;z-index:99;background:#fff;} .mainNav li ul li {display:block;position:relative;font-size:18px;line-height:36px;margin:0;font-weight:700;padding:0;white-space:nowrap;} .mainNav li ul li a:after {display:none;} .mainNav li ul li a:hover {color:var(--color-orange);} /* Responsive Menu */ .mainNav-wrap {display:none;} .mobile-nav-trigger-outter {float:right;width:30px;height:30px;z-index:99;margin-right:20px;} .mobile-nav-trigger {display:block;} .mobile-nav-trigger .cd-menu-icon {margin-top:15px;margin-left:15px;display: block;transform: translateX(-50%) translateY(-50%); width: 30px; height:2px;transition: background-color 0.3s;} .mobile-nav-trigger .cd-menu-icon::before, .mobile-nav-trigger .cd-menu-icon:after { content: ''; width: 100%; height: 100%; position: absolute;top:0;left:0;z-index:9;transition: transform .3s, top .3s, background-color 0s; } .mobile-nav-trigger .cd-menu-icon::before { top: -9px; } .mobile-nav-trigger .cd-menu-icon::after { top: 9px; } .mobile-nav-trigger .cd-menu-icon.is-clicked::before { top: 0;transform: rotate(135deg);} .mobile-nav-trigger .cd-menu-icon.is-clicked::after { top: 0;transform: rotate(225deg); } .mobile-nav-trigger .cd-menu-icon.is-clicked { background: none !important } .mobile-nav-trigger .cd-menu-icon, .mobile-nav-trigger .cd-menu-icon::before, .mobile-nav-trigger .cd-menu-icon:after, .mobile-nav-trigger .cd-menu-icon.is-clicked::before, .mobile-nav-trigger .cd-menu-icon.is-clicked::after {background:#000;} .mobile-nav {position: fixed;visibility:hidden;opacity:0; left: 0; top: 110px; height:calc(100% - 110px);width:100%;background:#000; z-index:98;transition:all 0.3s ease;overflow:scroll;} .mobile-nav.is-visible {visibility:visible;opacity:1;} .mobile-nav-inner {padding-top:80px;} .mobileNav li {display:block;font-size:2.0rem;line-height:1.4;margin-bottom:15px;font-weight:700;} .mobileNav li ul {margin:20px 0 20px 20px;} .mobileNav li a {color:#fff;transition:none;-webkit-tap-highlight-color:transparent;} /* No transition: the menu fades out and the page navigates before a 0.4s fade reaches full orange, so a tap only ever showed a washed-out halfway colour */ .mobileNav li a:hover, .mobileNav li a:focus, .mobileNav li a:active {color:var(--color-orange);} .post-edit-link {display:block;position:fixed;top:50%;right:0;padding:10px;z-index:99999999;background:rgba(139,16,6,0.8);color:#fff;font:16px/1 Helvetica, Arial, serif;text-transform:uppercase;font-weight:600;} .post-edit-link:hover {background:rgba(139,16,6,1);color:#fff;} /* -- @CONTENT ---------------- */ .button {display:inline-block;padding:15px 30px;border:2px solid #000;background:#fff;color:var(--color-main);text-transform:uppercase;text-align:center;box-sizing:border-box;font-weight:700;transition:0.4s;cursor:pointer;} .button-white {border-color:#fff;color:#000;} .button-beige {border-color:var(--color-beige);} .button:hover, .gform_wrapper .button{background:#000;color:#fff;} .button-white:hover {border-color:#000;} .button-beige:hover {border-color:#000;} .gform_wrapper .button:hover {background:var(--color-orange);border-color:var(--color-orange);} .hero-banner {width:100%;position:relative;height:70vh;} .hero-banner-inner {position:absolute;top:7%;width:100%;} .hero-banner h1 {line-height:1.1;} .hero-banner span, .hero-banner h1, .hero-banner p {color:#fff;} .hero-banner span {display:block;font-size:1.6rem;line-height:30px;font-weight:800;} .hero-banner p {font-size:1.5rem;line-height:20px;font-weight:700;} .page-id-135 .hero-banner {background-position:center right !important;} .banner-play {opacity:0.6;position:absolute;top:70%;left:50%;transform:translate(-50%,-50%);display:block;width:80px;height:80px;z-index:2;cursor:pointer;transition:transform 0.3s ease,opacity 0.3s ease;} .banner-play:hover {opacity:1;} .banner-play svg {display:block;width:100%;height:100%;} .banner-play svg path {fill:#fff;} .callout-wrap {margin-bottom:40px;} .callout-pic img {display:block;width:100%;} .callout-content {padding:40px 0;} .fundraiser-meter {padding-top:40px;} .fundraiser-content {max-width:950px;} .fundraiser-content p, .fundraiser-meter p {font-size:2.0rem;line-height:28px;} .fundraiser-content p a {text-decoration:underline;} .fundraiser-meter p span {font-size:4.0rem;line-height:52px;display:block;font-weight:700;} .fundraiser-meter p span:first-of-type {margin-bottom:30px;display:block;} .meter {position:relative;margin-top:40px;} .meter-track {position:relative;width:100%;height:20px;background:#00000033;overflow:hidden;} .meter-fill {position:absolute;top:0;left:0;width:0;height:100%;background:#000000;transition:width 1.6s cubic-bezier(0.25,0.1,0.25,1);} .meter-ticks {position:relative;height:40px;margin-top:8px;} .meter-tick {position:absolute;top:0;width:0;} .meter-tick:before {content:"";position:absolute;top:-8px;left:0;width:1px;height:12px;background:#000000;} .meter-tick span {position:absolute;top:14px;left:0;transform:translateX(-50%);white-space:nowrap;font-size:1.6rem;} .meter-tick:first-child span {transform:translateX(0);} .meter-tick:last-child span {transform:translateX(-100%);} @media (prefers-reduced-motion: reduce) { .meter-fill {transition:none;} } /* -- @SLIDER ----------------- */ .slider-block {position:relative;margin-top:30px;} .slider-slide img {display:block;width:100%;} .slider-controls {display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:15px;} .slider-progress {flex:1 1 auto;min-width:0;} .slider-bar {position:relative;width:100%;max-width:150px;height:1px;background:#000;} .slider-bar-thumb {position:absolute;top:50%;left:0;width:0;height:5px;background:var(--color-orange);transform:translateY(-50%);transition:left 0.4s ease,width 0.4s ease;border-radius:3px;} .slider-count {margin:8px 0 0;font-weight:500;} .slider-arrows {display:flex;flex:0 0 auto;} .slider-arrow {display:block;width:50px;height:50px;padding:0;border:none;background-color:#fff;background-image:url(images/arrows-black.svg?v=2);background-repeat:no-repeat;background-size:100px 50px;cursor:pointer;transition:background-color 0.3s ease;box-sizing:border-box;position:relative;} .slider-arrow:after {content:"";position:absolute;top:0;left:0;width:100%;height:100%;border:2px solid var(--color-orange);box-sizing:border-box;} .slider-arrow:hover {background-color:var(--color-orange);background-image:url(images/arrows-white.svg?v=2);} .slider-prev {background-position:0 0;} .slider-next {background-position:-50px 0;} .slider-prev:after {border-right-width:1px;} .slider-next:after {border-left-width:1px;} .slider-captions {margin-top:20px;} .slider-caption {display:none;} .slider-caption.is-active {display:block;} @media (prefers-reduced-motion: reduce) { .slider-bar-thumb {transition:none;} } .transformation-row {margin-bottom:40px;} .transformation-pic {margin-bottom:20px;} .transformation-row p {font-weight:500;margin-bottom:10px;} .transformation-row .button {margin-top:15px;} /* -- @HISTORY SLIDER --------- */ .history-wrap {position:relative;} .history-pic .slider-slide img {display:block;width:100%;} .history-content {padding:40px 0;color:var(--color-blue-dark);} /* Captions cross-fade rather than swap, so they stack on top of each other */ .history-content .slider-captions {position:relative;margin-top:0;} .history-content .slider-caption {display:block;position:absolute;top:0;left:0;width:100%;opacity:0;visibility:hidden;transition:opacity 0.5s ease;} .history-content .slider-caption p {font-size:3.0rem;min-height:150px;} .history-content .slider-caption.is-active {position:relative;opacity:1;visibility:visible;} .history-content .slider-arrow {background-color:transparent;background-image:url(images/arrows-white.svg);} .history-content .slider-arrow:after {border-color:#fff;} .history-content .slider-arrow:hover {background-color:var(--color-orange);} .history-content .slider-bar {background:#fff;} .history-content .slider-count {color:#fff;} @media (prefers-reduced-motion: reduce) { .history-content .slider-caption {transition:none;} } .latest-news-block {margin-bottom:40px;} .latest-news-grid .latest-news-block:last-of-type {margin-bottom:0;} .news-category, .latest-news-block a, .callout-wrap a {display:block;margin:15px 0 10px;font-size:1.6rem;text-transform:uppercase;font-weight:800;} .news-category {color:var(--color-orange)} .latest-news-block a {text-decoration:underline;} .latest-news-block a:hover {color:var(--color-orange);} .news-category {line-height:1.4;} .accordion-row {border-top:2px solid #000;} .accordion-title {display:flex;padding:40px 0 40px 60px;position:relative;cursor:pointer;} .accordion-title:before {content:"";position:absolute;top:40px;left:0;width:40px;height:40px;border:2px solid var(--color-orange);border-radius:100%;background:url(images/arrows-down-orange.svg) center center no-repeat;background-size:cover;} .accordion-title p {font-size:2.0rem;line-height:30px;margin:0;} .accordion-content {display:none;padding:0 0 20px 60px;position:relative;} .accordion-content:before {content:"";position:absolute;top:-20px;left:60px;width:80px;height:2px;background:var(--color-orange);} .active .accordion-content {display:block;} .active .accordion-title:before {transform:rotate(180deg)} .testimonial-content {position:relative;} .testimonial-content {font-size:2.0rem;line-height:30px;font-weight:800;} .testimonial-content:before, .testimonial-content:after {font-size:3.0rem;color:#fff;display:inline-block;font-weight:800;} .testimonial-content:before {content:'“';top:-5px;left:-17px;position:absolute;} .testimonial-content:after {content:'”';margin-left:2px;} .testimonial-name {font-weight:500;font-size:1.8rem;} .testimonial-trigger, .testimonial-less {cursor:pointer;} .testimonial-less-wrap {clear:both;margin:30px 0 0;text-align:center;} .testimonial-less {font-weight:500;font-size:1.8rem;} .testimonial-long {display:none;} .testimonial-long.active {display:block;} /* -- @IMPACT GRID ------------ */ .impact-grid {display:grid;grid-template-columns:1fr;gap:30px;margin-top:60px;} .impact-cat-heading .impact-grid:first-of-type {margin-top:20px;} .impact-item {display:flex;flex-direction:column;} /* Content grows into the leftover space, so every box in the row ends level and the picture is pushed to the bottom of the item */ .impact-content {flex:1 1 auto;padding:30px;} .impact-content > p:first-of-type {margin-bottom:10px;} .impact-content > *:last-child {margin-bottom:0;} .impact-grid.odd .impact-item {background:#78B4CC;} .impact-grid.even .impact-item {background:#A4A882;} /* Fixed ratio keeps every picture the same height, which is what keeps the content boxes the same height too */ .impact-pic {position:relative;flex:0 0 auto;aspect-ratio:3/2;overflow:hidden;} .impact-pic img {position:absolute;top:0;left:0;display:block;width:100%;height:100%;object-fit:cover;} .gform-field-label--type-sub {margin-bottom:10px !important;} .gfield_required_text {color:var(--color-main) !important} /* -- @FOOTER ----------------- */ .site-footer {padding:60px 0 120px;} .site-footer p {font-weight:500;} .footer-logo {font-size:6rem;font-weight:800;color:#fff;} .footer-right {padding-top:30px;} .footer-right p {margin-bottom:10px;font-weight:700;} .footer-right p:first-of-type {margin-bottom:30px;} .footer-left p {margin:20px 0 30px;} .footer-right p a {text-decoration:underline;} .site-footer .button {padding:7px 15px;} /* #Opportunity Tiers ================================================== */ .accordion-tiers > .accordion-row {border-top:none;margin-bottom:10px;} .accordion-tiers > .accordion-row > .accordion-title {flex-direction:column;align-items:flex-start;padding:20px 70px 20px 20px;background:var(--color-orange);color:#fff;} .accordion-tiers > .accordion-row > .accordion-title p {width:100%;} .accordion-tiers > .accordion-row > .accordion-title:before {top:50%;left:auto;right:20px;width:34px;height:34px;margin-top:-17px;border-color:#fff;background-image:url(images/arrows-down-white.svg);} .accordion-tiers .tier-range {margin-left:12px;padding-left:12px;border-left:2px solid #fff;} .accordion-tiers .tier-count {margin-top:5px;white-space:nowrap;font-size:1.4rem;} .accordion-tiers > .accordion-row > .accordion-content {padding:30px 0 0;} .accordion-tiers > .accordion-row > .accordion-content:before {display:none;} /* Nested opportunity rows -- FAQ row styling, price on the right. The reset is required: the open TIER is an .active ancestor, so the global `.active .accordion-title:before` rotate would flip every child chevron too. */ .opportunity-rows > .accordion-row {border-top:2px solid #e2dcce;} .opportunity-rows > .accordion-row > .accordion-title:before {transform:none;} .opportunity-rows > .accordion-row.active > .accordion-title:before {transform:rotate(180deg);} .opportunity-rows > .accordion-row > .accordion-title {flex-direction:column;} .accordion-title .opportunity-price {text-align:left;} .opportunity-rows > .accordion-row > .accordion-content:before {display:none;} /* The open TIER is an .active ancestor, so the global `.active .accordion-content` would show every nested panel at once. Re-scope the nested level to its own row. */ .opportunity-rows > .accordion-row > .accordion-content {display:none;padding-left:0;} .opportunity-rows > .accordion-row.active > .accordion-content {display:block;} .opportunity-detail-pic {margin-bottom:30px;} .opportunity-detail-pic img, .opportunity-map img {display:block;width:100%;height:auto;} .opportunity-map img {padding:10px;box-sizing:border-box;border:2px solid #e2dcce;} .opportunity-heading {color:var(--color-orange);font-size:3.0rem;line-height:1.2;margin-bottom:15px;} .opportunity-location {display:block;margin-top:5px;font-size:2.0rem;} .opportunity-giving p {margin:0;} .opportunity-giving-value {font-weight:500;} .opportunity-save {margin-top:30px;} .opportunity-map {margin-top:40px;} .opportunity-save {background:#e2dcce;} /* #Save for Review ================================================== */ .header-bar-review {display:inline-block;height:40px;padding:0 20px;color:#fff;text-align:center;font-size:16px;line-height:40px;font-weight:800;letter-spacing:0.4px;} .header-bar-review[hidden] {display:none;} .review-modal {position:fixed;top:0;left:0;width:100%;height:100%;z-index:99999;visibility:hidden;transition:visibility 0s linear 0.4s;} .review-modal.is-open {visibility:visible;transition-delay:0s;} .review-modal-overlay {position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);opacity:0;transition:opacity 0.4s ease;} .review-modal.is-open .review-modal-overlay {opacity:1;} .review-modal-panel {position:absolute;top:40px;right:0;width:100%;max-width:600px;box-sizing:border-box;height:calc(100vh - 40px);height:calc(100dvh - 40px);overflow-y:auto;padding:30px 20px;background:#fff;transform:translateX(100%);transition:transform 0.4s ease;} .review-modal.is-open .review-modal-panel {transform:translateX(0);} @media (prefers-reduced-motion: reduce) { .review-modal, .review-modal-overlay, .review-modal-panel {transition:none;} } .review-modal-close {position:absolute;top:10px;right:15px;padding:0;border:none;background:none;line-height:1;cursor:pointer;font-size:3.0rem;color:var(--color-orange);} .review-modal-title {font-size:3.0rem;font-weight:500;line-height:1.2;margin-bottom:10px;} .review-modal-intro {max-width:520px;} .review-modal-list {margin:20px 0;padding:20px 0 0;border-top:1px solid #d5d5d5;} .review-list-label {text-transform:uppercase;margin-bottom:0;} .review-item {display:flex;align-items:flex-start;gap:20px;padding:15px 0;border-bottom:1px solid #d5d5d5;} .review-item-pic {flex:0 0 80px;} .review-item-pic img {display:block;width:100%;height:auto;} .review-item-pic a {display:block;} .review-item-pic a img {transition:opacity 0.2s ease;} .review-item-pic a:hover img, .review-item-pic a:focus-visible img {opacity:0.75;} .review-item-content {flex:1 1 auto;} .review-item-content p {margin:0;} .review-item-link {color:inherit;text-decoration:none;} .review-item-link:hover, .review-item-link:focus-visible {text-decoration:underline;} .review-item-remove {flex:0 0 auto;padding:0;border:none;background:none;font-style:italic;cursor:pointer;color:var(--color-orange);} .review-modal .gform_wrapper {margin-top:30px;} /* Field 6 carries the saved list into the entry/email. GF 2.9 ships no .gf_hidden rule, so it would render as a visible textarea without this. */ .review-modal .gf_hidden {display:none;} /* Scoped to the modal on purpose -- form 1 elsewhere keeps its own styling. GF 2.9 renders the submit as a