/* Theme Name: Divi Child Theme URI: Description: Child theme for Divi Template: Divi Version: 1.0.0 */ /* * KALEPO CAMP — Custom Nav & Hero Styles * Child Theme: style.css additions */ /* ============================================================ COLOUR TOKENS ============================================================ */ :root { --k-bone: #E8E0CE; --k-slate: #404C5C; --k-oxblood: #7D2E2E; --k-brass: #A08B4A; --k-fuchsia: #DF1669; --nav-height: 80px; --nav-height-small: 56px; --nav-transition: 0.3s ease; --overlay-speed: 0.35s; } html, body { margin: 0; padding: 0; } body, #page-container, #et-main-area, .et_pb_section { background-color: var(--k-bone) !important; } body, #page-container { margin-top: 0 !important; padding-top: 0 !important; } .et_pb_section:first-of-type { margin-top: 0 !important; } .et_pb_section_0_tb_header, .et_pb_row_0_tb_header, .et_pb_column_0_tb_header { margin: 0 !important; padding: 0 !important; line-height: 0 !important; font-size: 0 !important; height: 0 !important; } /* ============================================================ 1. HIDE DIVI'S DEFAULT HEADER ============================================================ */ #main-header, #main-header .et-fixed-header { display: none !important; } #et-main-area { padding-top: 0 !important; } /* ============================================================ 2. NAV BAR ============================================================ */ #kalepo-nav { position: fixed; top: 20px; left: 0; right: 0; z-index: 9999!important; height: var(--nav-height); display: flex; align-items: center; justify-content: space-between; padding: 0 48px; background: transparent; pointer-events: none; transition: height var(--nav-transition), background var(--nav-transition), transform var(--nav-transition); } #kalepo-nav.nav-scrolled { top: 0; height: var(--nav-height-small); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } #kalepo-nav.nav-hidden { transform: translateY(-100%); } /* ============================================================ 3. LOGO ============================================================ */ #kalepo-nav .nav-logo { display: block; line-height: 0; z-index: 10001; pointer-events: all; padding-top: 8px; } #kalepo-nav .nav-logo svg { width: 258px; height: 79px; transition: width var(--nav-transition), height var(--nav-transition); } #kalepo-nav.nav-scrolled .nav-logo svg { width: 180px; height: 55px; } /* Default logo: bone (dark hero images) */ #kalepo-nav .nav-logo svg path, #kalepo-nav .nav-logo svg text, #kalepo-nav .nav-logo svg .logo-fill { fill: var(--k-bone); transition: fill var(--nav-transition); } /* Slate logo on light hero pages — add class .light-hero to */ body.light-hero #kalepo-nav .nav-logo svg path, body.light-hero #kalepo-nav .nav-logo svg text, body.light-hero #kalepo-nav .nav-logo svg .logo-fill { fill: var(--k-slate); } /* Always bone when overlay is open */ body.nav-open #kalepo-nav .nav-logo svg path, body.nav-open #kalepo-nav .nav-logo svg text, body.nav-open #kalepo-nav .nav-logo svg .logo-fill { fill: var(--k-bone); } /* ============================================================ 4. HAMBURGER BUTTON ============================================================ */ #kalepo-hamburger { background: none; border: none; cursor: pointer; padding: 8px; display: flex; flex-direction: row; align-items: center; gap: 12px; z-index: 10001; pointer-events: all; transition: opacity 0.2s ease; } #kalepo-hamburger:hover .menu-label, #kalepo-hamburger:hover .menu-line { opacity: 0.6; } /* Hidden when overlay is open */ body.nav-open #kalepo-hamburger { display: none; } /* MENU label */ .menu-label { font-family: 'Jost', sans-serif; font-size: 20px; font-weight: 400; letter-spacing: 0.22em; color: var(--k-bone); text-transform: uppercase; transition: opacity 0.2s ease; } body.light-hero .menu-label { color: var(--k-slate); } /* Hamburger lines */ .menu-lines { display: flex; flex-direction: column; gap: 5px; } .menu-line { display: block; width: 24px; height: 1.5px; background: var(--k-bone); transition: opacity 0.2s ease; } body.light-hero .menu-line { background: var(--k-slate); } /* ============================================================ 5. FULLSCREEN OVERLAY ============================================================ */ #kalepo-overlay { position: fixed; inset: 0; z-index: 9998; background: var(--k-slate); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 80px 48px 60px 120px; opacity: 0; visibility: hidden; transition: opacity var(--overlay-speed) ease, visibility var(--overlay-speed) ease; } body.nav-open #kalepo-overlay { opacity: 1; visibility: visible; } body.nav-open { overflow: hidden; } /* ============================================================ 6. CLOSE BUTTON ============================================================ */ #kalepo-close { position: absolute; top: 44px; right: 48px; background: none; border: none; cursor: pointer; color: var(--k-bone); font-family: 'Jost', sans-serif; font-size: 20px; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; display: none; flex-direction: row; align-items: center; gap: 10px; pointer-events: all; z-index: 99999; transition: opacity 0.2s ease; line-height: 1; } #kalepo-close::after { content: '×'; font-size: 40px; font-weight: 200; line-height: 0.75; display: inline-block; transform: translateY(-2px); } #kalepo-close:hover { opacity: 0.6; } body.nav-open #kalepo-close { display: flex; } /* ============================================================ 7. OVERLAY NAV LINKS ============================================================ */ #kalepo-overlay nav ul { list-style: none; margin: 0; padding: 0; } #kalepo-overlay nav ul li { margin-bottom: 8px; opacity: 0; transform: translateY(12px); transition: opacity 0.4s ease, transform 0.4s ease; } body.nav-open #kalepo-overlay nav ul li { opacity: 1; transform: translateY(0); } /* Stagger delays */ body.nav-open #kalepo-overlay nav ul li:nth-child(1) { transition-delay: 0.05s; } body.nav-open #kalepo-overlay nav ul li:nth-child(2) { transition-delay: 0.10s; } body.nav-open #kalepo-overlay nav ul li:nth-child(3) { transition-delay: 0.15s; } body.nav-open #kalepo-overlay nav ul li:nth-child(4) { transition-delay: 0.20s; } body.nav-open #kalepo-overlay nav ul li:nth-child(5) { transition-delay: 0.25s; } body.nav-open #kalepo-overlay nav ul li:nth-child(6) { transition-delay: 0.30s; } #kalepo-overlay nav ul li a { font-family: 'Jost', sans-serif; font-size: 30px; font-weight: 300; color: var(--k-bone); text-decoration: none; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.15; display: block; transition: color 0.2s ease, opacity 0.2s ease; } #kalepo-overlay nav ul li a:hover { color: var(--k-brass); opacity: 0.85; } #kalepo-overlay nav ul li.current-menu-item a { color: var(--k-brass); } /* ============================================================ 8. OVERLAY CONTACT DETAILS ============================================================ */ #kalepo-overlay .nav-contact { margin-top: 48px; opacity: 0; transform: translateY(8px); transition: opacity 0.4s ease 0.4s, transform 0.4s ease 0.4s; } body.nav-open #kalepo-overlay .nav-contact { opacity: 1; transform: translateY(0); } #kalepo-overlay .nav-contact p { font-family: 'Jost', sans-serif; font-size: 22px; font-weight: 300; letter-spacing: 0.12em; color: var(--k-bone); margin: 0; padding: 8px 0; line-height: 1; display: flex; align-items: center; } #kalepo-overlay .nav-contact p span.label { font-family: 'Cormorant Garamond', serif; font-size: 28px; font-weight: 400; font-style: normal; opacity: 0.7; width: 80px; flex-shrink: 0; display: flex; justify-content: flex-end; margin-right: 12px; } #kalepo-overlay .nav-contact a { font-family: 'Jost', sans-serif; font-size: 18px; font-weight: 300; color: var(--k-bone); text-decoration: none; letter-spacing: 0.12em; transition: opacity 0.2s ease; } #kalepo-overlay .nav-contact a:hover { opacity: 0.6; } #kalepo-overlay .nav-contact .nav-ig { display: flex; align-items: center; gap: 8px; padding: 8px 0; margin-top: 0; } #kalepo-overlay .nav-contact .label-icon { width: 80px; flex-shrink: 0; display: flex; align-items: center; } #kalepo-overlay .nav-contact .label-icon { width: 80px; flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; margin-right: 12px; } #kalepo-overlay .nav-contact .nav-ig a { font-size: 18px; } /* ============================================================ 9. HERO SECTION ============================================================ */ #kalepo-hero { position: relative; width: 100%; height: 100vh; min-height: 600px; overflow: hidden; display: flex; align-items: flex-end; padding-bottom: 10vh; } #kalepo-hero .hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; animation: heroZoom 18s ease-out forwards; } @keyframes heroZoom { from { transform: scale(1.04); } to { transform: scale(1.0); } } #kalepo-hero .hero-content { position: relative; z-index: 2; padding: 0 80px; max-width: 780px; pointer-events: none; } #kalepo-hero .hero-eyebrow { display: block; font-family: 'Jost', sans-serif; font-size: 20px; font-weight: 400; letter-spacing: 0.25em; text-transform: uppercase; color: var(--k-bone); margin-bottom: 0px; opacity: 0; animation: fadeUp 0.8s ease 0.3s forwards; } #kalepo-hero .hero-h1 { font-family: 'Cormorant Garamond', serif; font-size: clamp(50px, 6vw, 80px); font-weight: 300; line-height: 1; color: var(--k-bone); margin: 0 0 36px 0; opacity: 0; animation: fadeUp 0.9s ease 0.5s forwards; } #kalepo-hero .hero-cta { display: inline-block; font-family: 'Jost', sans-serif; font-size: 20px; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: var(--k-bone); border: 1px solid var(--k-bone); padding: 10px 25px; text-decoration: none; background: rgba(232, 224, 206, 0); transition: background 0.25s ease, color 0.25s ease; opacity: 0; animation: fadeUp 0.9s ease 0.7s forwards; } #kalepo-hero .hero-cta:hover { background: rgba(232, 224, 206, 0.25); color: var(--k-bone); } @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================ 10. RESPONSIVE ============================================================ */ @media (max-width: 768px) { #kalepo-nav { padding: 0 24px; } #kalepo-nav .nav-logo svg { width: 180px; height: 55px; } #kalepo-overlay { padding: 80px 32px 60px 32px; } #kalepo-overlay nav ul li a { font-size: clamp(28px, 8vw, 40px); } #kalepo-close { right: 24px; } #kalepo-hero .hero-content { padding: 0 32px; max-width: 100%; } #kalepo-hero .hero-h1 { font-size: clamp(32px, 15vw, 52px); } } @media (max-width: 480px) { #kalepo-nav .nav-logo svg { width: 140px; height: 43px; } } #kalepo-overlay { pointer-events: none; } body.nav-open #kalepo-overlay { pointer-events: all; } #kalepo-overlay nav, #kalepo-overlay .nav-contact, #kalepo-close { pointer-events: all; } #kalepo-overlay .nav-contact a:hover, #kalepo-overlay .nav-contact .nav-ig a:hover { color: var(--k-brass); opacity: 1; } /* ============================================================ TYPOGRAPHY ============================================================ */ /* H1 — Cormorant Garamond, bone, mixed italic */ h1 { font-family: 'Cormorant Garamond', serif; font-size: clamp(42px, 4.2vw, 60px); font-weight: 400; line-height: 1; letter-spacing: 0; color: #E7DFCE; } /* H2 — Cormorant Garamond, slate */ h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(40px, 5.5vw, 80px); font-weight: 400!important; line-height: 1.05; letter-spacing: 0; color: var(--k-slate); } /* H3 — Cormorant Garamond, slate */ h3 { font-family: 'Cormorant Garamond', serif; font-size: clamp(35px, 4.2vw, 60px)!important; font-weight: 400!important; line-height: 1.067; letter-spacing: 0; color: var(--k-slate); } /* Eyebrow — Jost Regular, slate, tracked out */ .eyebrow { font-family: 'Jost', sans-serif; font-size: clamp(14px, 1vw, 15px)!important; font-weight: 400; line-height: 1.5; letter-spacing: 0.2em; text-transform: uppercase; color: var(--k-slate); } .eyebrow_brass{ color: var(--k-brass); } /* Body — Jost Light, slate */ p { font-family: 'Jost', sans-serif; font-size: clamp(18px, 1.25vw, 18px); font-weight: 300; line-height: 1.444; letter-spacing: 0; color: var(--k-slate); } /* Editorial quote — Cormorant Garamond Italic, oxblood */ .editorial-quote { font-family: 'Cormorant Garamond', serif; font-size: clamp(22px, 2.1vw, 30px); font-style: italic; font-weight: 400; line-height: 1.133; letter-spacing: 0; color: var(--k-oxblood); } /* ============================================================ PILLAR CARDS ============================================================ */ .pillar-card { display: flex; flex-direction: column; } .pillar-image { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; margin-bottom: 24px; } .pillar-image2 { margin-bottom: 0px; } .pillar-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; } .pillar-card:hover .pillar-image img { transform: scale(1.03); } .pillar-card h4 { font-family: 'Cormorant Garamond', serif; font-size: clamp(22px, 2.1vw, 30px); font-weight: 400; line-height: 1.133; letter-spacing: 0; color: var(--k-slate); margin: 0 0 12px 0; } .pillar-card p { font-family: 'Jost', sans-serif; font-size: clamp(15px, 1.25vw, 18px); font-weight: 300; line-height: 1.444; letter-spacing: 0; color: var(--k-slate); margin: 0; } .pillar-tagline { font-family: 'Jost', sans-serif; font-size: clamp(14px, 1.25vw, 18px); font-weight: 300; line-height: 1.444; letter-spacing: 0; color: var(--k-oxblood) !important; margin: 0 0 15px 0 !important; } .pillar-link { font-family: 'Cormorant Garamond', serif; font-size: clamp(18px, 1.5vw, 22px); font-style: italic; font-weight: 400; line-height: 1.182; letter-spacing: 0; color: var(--k-slate); text-decoration: none; border-bottom: 1px solid var(--k-slate); padding-bottom: 8px; display: flex; align-items: center; gap: 10px; margin-top: auto; transition: color 0.2s ease, border-color 0.2s ease; } .pillar-link:hover { color: var(--k-fuchsia); border-color: var(--k-fuchsia); } .pillar-arrow { width: 15px; height: 12px; flex-shrink: 0; transition: transform 0.2s ease; } .pillar-arrow .arrow-fill { fill: var(--k-slate); transition: fill 0.2s ease; } .pillar-link:hover .pillar-arrow { transform: translateX(4px); } .pillar-link:hover .arrow-fill { fill: var(--k-fuchsia); } .et_pb_code_inner .pillar-card { display: flex; flex-direction: column; height: 100%; } .et_pb_code_inner .pillar-image img { transition: transform 0.6s ease; } .et_pb_code_inner .pillar-card:hover .pillar-image img { transform: scale(1.03); } .et_pb_code_inner .pillar-link { margin-top: auto; } #et-main-area .row-cards .et_pb_column .et_pb_code, #et-main-area .row-cards .et_pb_column .et_pb_code_inner { height: 100%; } .row-valign-center.et_pb_row { display: flex; align-items: center; } .row-valign-center .et_pb_column { display: flex; flex-direction: column; justify-content: center; } .row-three-col.et_pb_row { display: flex; } .row-three-col .et_pb_column:nth-child(1) { width: 25% !important; flex: 0 0 32% !important; } .row-three-col .et_pb_column:nth-child(2) { width: 50% !important; flex: 0 0 50% !important; } .row-three-col .et_pb_column:nth-child(3) { width: 15% !important; flex: 0 0 15% !important; } @media (max-width: 980px) { .et_pb_row.row-three-col .et_pb_column.et_pb_column_1_3 { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; } .et_pb_row.row-three-col { flex-direction: column !important; } } .row-ruled.et_pb_row { border-top: 1px solid; border-bottom: 1px solid; border-top-color: rgba(222, 22, 105, 0.42) !important; border-bottom-color:rgba(222, 22, 105, 0.42)!important; padding-top: 48px; padding-bottom: 48px; } .kalepo-hero-inner { height: 560px !important; min-height: unset !important; padding-bottom: 0 !important; align-items: flex-end; padding-bottom: 48px !important; } .kalepo-hero-inner { z-index: 1; position: relative; } #kalepo-hero .hero-bg { pointer-events: none; } .kalepo-header-section .et_pb_code_inner { position: static !important; } .kalepo-header-section .et_pb_row, .kalepo-header-section .et_pb_column, .kalepo-header-section .et_pb_section { position: static !important; z-index: auto !important; } /* ============================================================ DOWNLOAD BUTTON ============================================================ */ .download-link { font-family: 'Cormorant Garamond', serif; font-size: clamp(18px, 1.5vw, 22px); font-style: italic; font-weight: 400; color: var(--k-slate); text-decoration: none; display: inline-flex; align-items: center; gap: 12px; transition: color 0.2s ease; } .download-link:hover { color: var(--k-fuchsia); } .download-icon { display: inline-flex; align-items: center; overflow: hidden; height: 21px; } .download-arrow { width: 12px; height: 21px; transition: transform 0.3s ease; } .download-arrow .arrow-fill { fill: var(--k-slate); transition: fill 0.2s ease; } .download-link:hover .download-arrow { transform: translateY(3px); } .download-link:hover .arrow-fill { fill: var(--k-fuchsia); } .row-valign-bottom.et_pb_row { display: flex; align-items: flex-end; } .row-valign-bottom .et_pb_column { display: flex; flex-direction: column; justify-content: flex-end; } .activity-card .pillar-image { aspect-ratio: 3 / 2; } .activity-title { font-family: 'Jost', sans-serif; font-size: clamp(14px, 1vw, 15px)!important; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: var(--k-slate); margin: 16px 0 8px 0; } et_pb_code_inner .activity-card:hover .pillar-image img { transform: scale(1.03); } .activity-card .pillar-image img { transition: transform 0.6s ease; } .activity-card:hover .pillar-image img { transform: scale(1.03); } /* ============================================================ EXTRA EXPERIENCE CARDS ============================================================ */ .extra-card { display: flex; flex-direction: row; gap: 24px; align-items: flex-start; } .extra-card-image { width: 45%; flex-shrink: 0; aspect-ratio: 1 / 1; overflow: hidden; } .extra-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; } .extra-card:hover .extra-card-image img { transform: scale(1.03); } .extra-card-content { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; } .et_pb_column_0_tb_header::after, .et_pb_row_0_tb_header::after, .et_pb_section_0_tb_header::after { display: none !important; content: none !important; } .et_pb_column_4_4.et_pb_column_0_tb_header { height: 0 !important; overflow: hidden !important; } .et_pb_column_4_4.et_pb_column_0_tb_header::after { display: none !important; height: 0 !important; content: none !important; } #et-main-area { margin-top: -1px !important; } /* ============================================================ EXPERIENCE BLOCKS — alternating image/text ============================================================ */ .experience-block { display: flex; flex-direction: row; align-items: center; gap: 60px; } .experience-block--right { flex-direction: row-reverse; } .experience-block-image { width: 45%; flex-shrink: 0; overflow: hidden; } .experience-block-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; } .experience-block:hover .experience-block-image img { transform: scale(1.03); } .experience-block-content { flex: 1; } .experience-block-content .activity-title { margin-bottom: 16px; } .experience-blocks-wrapper { display: flex; flex-direction: column; gap: 60px; margin-bottom: 80px; } .experience-block { display: flex; flex-direction: row; align-items: center; gap: 60px; } .experience-block--right .experience-block-image { order: 2; } .experience-block--right .experience-block-content { order: 1; } .experience-block-image { width: 33%; flex-shrink: 0; overflow: hidden; } .experience-block-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; } .experience-block:hover .experience-block-image img { transform: scale(1.03); } .experience-block-content { flex: 1; } .experience-block-content .activity-title { margin-bottom: 16px; } /* ============================================================ VISION & MISSION BLOCK ============================================================ */ .vision-mission-block { display: flex; flex-direction: row; gap: 80px; } @media (max-width: 768px) { .vision-mission-block { flex-direction: column; gap: 48px; } .vm-divider { display: none; } } .vm-item { display: flex; flex-direction: row; align-items: flex-start; gap: 32px; flex: 1; } .vm-heading { font-family: 'Cormorant Garamond', serif; font-size: clamp(36px, 5.5vw, 80px); font-weight: 400; line-height: 1; color: var(--k-slate); margin: 0; flex-shrink: 0; } .vm-divider { width: 1px; background: rgba(64, 76, 92, 0.3); align-self: stretch; flex-shrink: 0; } .vm-item p { margin: 0; padding-top: 4px; } /* ============================================================ FOUNDATION PILLAR NUMBER CARDS ============================================================ */ .pillar-number-card { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 0 0 20px 0; } .pillar-number { font-family: 'Cormorant Garamond', serif; font-size: clamp(80px, 6vw, 90px); font-weight: 400; line-height: 1; color: var(--k-oxblood); margin-bottom: 5px; display: block; } .pillar-name { font-family: 'Cormorant Garamond', serif; font-size: clamp(24px, 2.5vw, 36px)!important; font-weight: 400; line-height: 1.1; color: var(--k-slate); margin: 0px; padding: 0px } .pillar-number-card p { font-family: 'Jost', sans-serif; font-size: clamp(14px, 1.25vw, 18px); font-weight: 300; line-height: 1.5; color: var(--k-slate); margin: 0; } /* ============================================================ FOUNDATION PROJECTS — sticky left sidebar ============================================================ */ .projects-section { display: flex; flex-direction: row; gap: 80px; align-items: flex-start; } .projects-sticky-left { width: 40%; flex-shrink: 0; position: sticky; top: 120px; /* clears the nav height */ } .projects-sticky-left h2 { margin: 0 0 24px 0; } .projects-sticky-left p { margin: 0; } .projects-list { flex: 1; } .project-item { padding-bottom: 40px; margin-bottom: 40px; } .project-budget { display: block; font-family: 'Jost', sans-serif; font-size: clamp(12px, 1vw, 15px); font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: var(--k-oxblood); margin-top: 16px; } .project-divider { width: 100%; height: 1px; background: rgba(64, 76, 92, 0.2); margin-top: 40px; } .svg-centered { display: flex; align-items: center; justify-content: center; height: 100%; } /* ============================================================ FOUNDATION CONTACT ============================================================ */ .foundation-contact { color: var(--k-fuchsia) !important; } .foundation-contact a { color: var(--k-fuchsia) !important; text-decoration: underline; transition: opacity 0.2s ease; } .foundation-contact a:hover { opacity: 0.7; } .foundation-contact-OB { color: var(--k-oxblood) !important; } .foundation-contact-OB a { color: var(--k-oxblood) !important; text-decoration: underline; transition: opacity 0.2s ease; } .foundation-contact-OB a:hover { opacity: 0.7; } /* ============================================================ INSTAGRAM STRIP ============================================================ */ .ig-strip { background: var(--k-bone); padding: 0px 80px; text-align: center; } .ig-strip__inner { display: inline-flex; align-items: center; gap: 28px; text-decoration: none; margin-bottom: 16px; } .ig-strip__icon svg { width: 52px; height: 52px; display: block; transition: opacity 0.2s ease; } .ig-strip__icon svg path { fill: var(--k-fuchsia); } .ig-strip__inner:hover .ig-strip__icon svg path { fill: var(--k-slate); } .ig-strip__heading { display: block; font-family: 'Cormorant Garamond', serif; font-size: clamp(36px, 5vw, 64px); font-weight: 300; color: var(--k-fuchsia); line-height: 1.1; transition: color 0.2s ease; } .ig-strip__inner:hover .ig-strip__heading { color: var(--k-slate); } .ig-strip__handle { margin: 0; padding-left: 80px; /* aligns under heading, past icon + gap */ } .ig-strip__handle a { font-family: 'Jost', sans-serif; font-size: 18px; font-weight: 300; letter-spacing: 0.12em; color: var(--k-fuchsia); text-decoration: none; opacity: 0.7; transition: opacity 0.2s ease, color 0.2s ease; } .ig-strip__handle a:hover { opacity: 1; color: var(--k-slate); } @media (max-width: 768px) { .ig-strip { padding: 20px 32px; } .ig-strip__handle { padding-left: 0; } } .ig-strip__footer { padding-left: 80px; } .ig-strip__footer p{ color: var(--k-fuchsia)!important; } .ig-strip__body { font-family: 'Jost', sans-serif; font-size: 18px; font-weight: 300; color: var(--k-fuchsia); margin: 0 0 6px 0; line-height: 1.6; } a.ig-strip__body { color: var(--k-fuchsia); text-decoration: none; transition: color 0.2s ease; } a.ig-strip__body:hover { color: var(--k-slate); } @media (max-width: 768px) { .ig-strip__footer { padding-left: 0; } } #kalepo-overlay { position: fixed; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; height: 100vh !important; width: 100vw !important; } /* ============================================================ CONTACT CARDS ============================================================ */ .contact-cards { display: flex; flex-direction: row; gap: 80px; align-items: flex-start; } @media (max-width: 768px) { .contact-cards { gap: 80px; flex-direction: column; } } .contact-card { flex: 1; display: flex; flex-direction: column; gap: 24px; } .contact-card h2 { margin: 0; } .contact-card p { margin: 0; } .contact-buttons { display: flex; flex-direction: row; gap: 16px; align-items: center; } .contact-btn { font-family: 'Jost', sans-serif; font-size: 18px; font-weight: 300; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; padding: 10px 25px; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; display: inline-block; } .contact-btn--filled { background: var(--k-slate); color: var(--k-bone); border: 1px solid var(--k-slate); } .contact-btn--filled:hover { background: var(--k-fuchsia); color: var(--k-bone); border-color: var(--k-fuchsia); } .contact-btn--outline { background: transparent; color: var(--k-slate); border: 1px solid var(--k-slate); } .contact-btn--outline:hover { background: var(--k-fuchsia); color: var(--k-bone); border: 1px solid var(--k-fuchsia); } .contact-note { font-family: 'Jost', sans-serif; font-size: 18px; font-weight: 300; color: var(--k-oxblood) !important; line-height: 1.6; margin: 0 !important; } .contact-note a { color: var(--k-oxblood); text-decoration: none; border-bottom: 1px solid var(--k-oxblood); transition: opacity 0.2s ease; } .contact-note a:hover { opacity: 0.7; } /* Nav colour swap once scrolled past hero */ body.past-hero #kalepo-nav .nav-logo svg path, body.past-hero #kalepo-nav .nav-logo svg .logo-fill { fill: var(--k-slate); } body.past-hero .menu-label { color: var(--k-slate); } body.past-hero .menu-lines .menu-line { background: var(--k-slate); } @media (max-width: 768px) { .menu-label { font-size: 14px; } } #kalepo-hero .hero-cta { pointer-events: all; } .row-full-width.et_pb_row { width: 100% !important; max-width: 100% !important; padding-left: 5% !important; padding-right: 5% !important; } .footer-nav { display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: center; } .footer-nav a { font-family: 'Jost', sans-serif; font-size: 16px; font-weight: 300; color: var(--k-bone); text-decoration: none; transition: opacity 0.2s ease; } .footer-nav a:hover { opacity: 0.6; } .footer-legal { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 12px 24px; flex-wrap: wrap; } .footer-copyright { font-family: 'Jost', sans-serif; font-size: 16px; font-weight: 300; color: var(--k-bone); } .footer-legal-links { display: flex; flex-direction: row; gap: 24px; align-items: center; } .footer-legal-links a { font-family: 'Jost', sans-serif; font-size: 16px; font-weight: 300; color: var(--k-bone); text-decoration: none; transition: opacity 0.2s ease; } .footer-legal-links a:hover { opacity: 0.6; } @media all and (max-width: 980px) { /*** wrap row in a flex box ***/ .custom_row { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; /* Safari 6.1+ */ flex-wrap: wrap; } /*** custom classes that will designate the order of columns in the flex box row ***/ .first-on-mobile { -webkit-order: 1; order: 1; } .second-on-mobile { -webkit-order: 2; order: 2; } .third-on-mobile { -webkit-order: 3; order: 3; } .fourth-on-mobile { -webkit-order: 4; order: 4; } /*** add margin to last column ***/ .custom_row:last-child .et_pb_column:last-child { margin-bottom: 30px; } } @media (max-width: 768px) { .extra-card { flex-direction: column !important; } .extra-card-image { width: 100% !important; } } @media (max-width: 768px) { .extra-card { flex-direction: column !important; } .extra-card-image { width: 100% !important; } .experience-block { flex-direction: column !important; } .experience-block--right .experience-block-image { order: 0 !important; } .experience-block--right .experience-block-content { order: 1 !important; } .experience-block-image { width: 100% !important; } .experience-block { gap: 40px !important; } .experience-blocks-wrapper { gap: 80px; margin-bottom:0px; } } @media (max-width: 768px) { .vision-mission-block { flex-direction: column; gap: 48px; } } .guide-card h4 { font-family: 'Cormorant Garamond', serif; font-size: clamp(22px, 2.4vw, 35px); font-weight: 400; line-height: 1.133; letter-spacing: 0; color: var(--k-slate); } @media (max-width: 768px) { .row-valign-center.et_pb_row { flex-direction: column; } } .commitment-item { display: flex; flex-direction: column; } .commitment-item img { width: 100%; height: auto; display: block; } .commitment-text { padding-bottom: 30px; text-align: center; } @media (max-width: 768px) { .commitment-item .commitment-image { order: 0; } .commitment-item .commitment-text { order: 1; } } .foundation-donate .eyebrow, .foundation-donate h3, .foundation-donate .donate-copy p { color: var(--k-bone); } @media (max-width: 768px) { .projects-section { flex-direction: column; gap: 40px; } .projects-sticky-left { position: relative; top: auto; width: 100%; } } .et_pb_column { min-height: 0 !important; } .kalepo-img-parallax { overflow: hidden; } .kalepo-img-parallax img { will-change: transform; display: block; width: 100%; /* Slightly taller than container to allow travel room */ height: 110%; object-fit: cover; object-position: center; transition: transform 0.05s linear; } /* Disable on mobile */ @media (max-width: 768px) { .kalepo-img-parallax img { height: 100%; transform: none !important; } } /* Scroll fade-up */ .kalepo-fade-up { opacity: 0; transform: translateY(32px); transition: opacity 0.7s ease, transform 0.7s ease; } .kalepo-fade-up.is-visible { opacity: 1; transform: translateY(0); } /* Stagger siblings automatically */ .kalepo-fade-up:nth-child(2) { transition-delay: 0.1s; } .kalepo-fade-up:nth-child(3) { transition-delay: 0.2s; } .kalepo-fade-up:nth-child(4) { transition-delay: 0.3s; } /* Disable reduced motion for accessibility */ @media (prefers-reduced-motion: reduce) { .kalepo-fade-up { opacity: 1; transform: none; transition: none; } } .photo-credit { font-family: 'Jost', sans-serif; font-size: clamp(10px, 0.75vw, 12px)!important; font-weight: 400; line-height: 1.5; letter-spacing: 0.2em; text-transform: uppercase; color: var(--k-brass); } /* ============================================================ STICKY STAR MARK — bottom right ============================================================ */ #kalepo-sticky-mark { position: fixed; bottom: 32px; right: 40px; z-index: 10000; display: block; width: 64px; height: auto; opacity: 0; transform: translateY(8px); transition: opacity 0.4s ease, transform 0.4s ease; pointer-events: none; } #kalepo-sticky-mark.is-visible { opacity: 1; transform: translateY(0); pointer-events: all; } #kalepo-sticky-mark svg { width: 100%; height: auto; display: block; fill: var(--k-fuchsia); transition: opacity 0.2s ease; } #kalepo-sticky-mark:hover svg { opacity: 0.75; } @media (max-width: 768px) { #kalepo-sticky-mark { width: 48px; bottom: 24px; right: 24px; } } .Contact-CTA H3 { color: var(--k-fuchsia)!important; } .CTA-Fuschia { background-color: var(--k-fuchsia)!important; } .CTA-Fuschia:hover { background-color: var(--k-slate)!important; }