/* ========================================================== Kingdom Harvester shared viewport-panel layout Use these classes on any page that should have measured, full-screen sections beneath the shared sticky header. Required HTML class: Standard section: class="kh-panel kh-panel--full" Closing section containing support content and footer: class="kh-panel kh-panel--full kh-panel--closing" ========================================================== */ html.kh-panel-document { scroll-padding-top: var(--kh-header-height); } .kh-panel { position: relative; scroll-margin-top: 0; } .kh-panel-shell { width: min( var(--kh-content-width), calc(100% - 56px) ); height: 100%; margin: 0 auto; padding: clamp(42px, 5.5vh, 68px) 0; display: flex; flex-direction: column; justify-content: center; } .kh-panel-heading { max-width: 900px; margin-bottom: clamp(28px, 3.5vh, 42px); } .kh-panel-heading .kh-section-title { font-size: clamp(2.45rem, 4vw, 4.1rem); line-height: 1; text-wrap: balance; } .kh-panel-grid { display: grid; } /* ========================================================== Shared split panel ========================================================== */ .kh-split-panel { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(410px, 0.95fr); width: 100%; height: 100%; min-height: 0; align-items: stretch; } .kh-split-panel-media { min-width: 0; min-height: 0; overflow: hidden; } .kh-split-panel-media img { width: 100%; height: 100%; object-fit: cover; } .kh-split-panel-content { min-width: 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; padding: clamp(36px, 5vh, 64px) max( 34px, calc((100vw - var(--kh-content-width)) / 2) ); padding-left: clamp(38px, 5vw, 68px); } /* ========================================================== Closing panel containing footer ========================================================== */ .kh-panel--closing { display: flex; flex-direction: column; } .kh-panel-closing-content { flex: 1 1 auto; min-height: 0; } .kh-panel--closing .kh-page-footer { flex: 0 0 auto; min-height: 124px; align-items: center; } /* ========================================================== Measured desktop panel mode ========================================================== */ @media (min-width: 1000px) { html.kh-panel-document { scroll-snap-type: y mandatory; } html.kh-panel-document .kh-panel--full { height: calc(100dvh - var(--kh-header-height)); min-height: 0; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; } /* * Closing panels reserve exactly 124px for the shared footer. * The remaining space is divided between the image and content. */ html.kh-panel-document .kh-panel--closing .kh-panel-closing-content { flex: 0 0 auto; width: 100%; height: calc(100% - 110px); min-height: 0; } html.kh-panel-document .kh-panel--closing .kh-page-footer { flex: 0 0 110px; min-height: 110px; } } /* ========================================================== Natural scrolling when content needs more room ========================================================== */ @media (max-width: 999px) { html.kh-panel-document { scroll-snap-type: none; } html.kh-panel-document .kh-panel--full { height: auto; min-height: auto; overflow: visible; } .kh-panel-shell { height: auto; padding-top: 72px; padding-bottom: 72px; } .kh-split-panel { height: auto; grid-template-columns: 1fr; } .kh-split-panel-media { min-height: 360px; } .kh-panel--closing .kh-page-footer { min-height: 0; } } @media (max-width: 620px) { .kh-panel-shell { width: calc(100% - 38px); padding-top: 64px; padding-bottom: 64px; } .kh-split-panel-content { padding: 58px 20px; } } @media (prefers-reduced-motion: reduce) { html.kh-panel-document { scroll-behavior: auto; scroll-snap-type: none; } }