/* ========================================= KYRIMAI CUSTOM PAGES — shared base Loaded on every custom page. Page-specific styles live in their own stylesheet. ========================================= */ .kev-page, .kev-page *, .kev-page *::before, .kev-page *::after { box-sizing: border-box; } .kev-page { color: #000; overflow: hidden; } .kev-page img { max-width: 100%; } /* Layout helpers (prefixed so they never clash with the host theme) */ .kev-container { width: 95%; max-width: 1600px; margin: 0 auto; } .kev-full-bleed { width: 100vw; margin-left: calc(50% - 50vw); } /* Reusable centered text measure (same system as the events page): 2/3 width on desktop with a 5/6 inner column, full width on mobile. */ /* Three-tier text layout, shared by Events + Restaurant: .kev-row → outer, negative gutters .kev-measure → 66.66% column (≥768px), 100% below .kev-measure__inner → 83.33% column + 15px gutters (≥768px), 100% below Titles and body text both carry .kev-measure__inner, so they share width. */ .kev-row { box-sizing: border-box; width: 95%; max-width: 1600px; margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; } .kev-measure { box-sizing: border-box; width: 100%; margin-left: auto; margin-right: auto; } .kev-measure__inner { box-sizing: border-box; width: 100%; margin-left: auto; margin-right: auto; } @media (min-width: 768px) { .kev-measure { width: 66.66666667%; } .kev-measure__inner { width: 83.33333333%; padding-left: 15px; padding-right: 15px; } } /* ========================================= SHARED SCROLL REVEAL Reusable across all custom pages. Active only when JS adds .kev-anim to (no-JS safe). .kev-fade-up → fades up (text) : translateY 150px .kev-fade → fades in (images): 3s opacity ========================================= */ @keyframes kevFadeIn { from { opacity: 0; } to { opacity: 1; } } .kev-anim .kev-fade-up { opacity: 0; transform: translateY(150px); /* Opacity runs longer than the slide so the fade itself reads more clearly. */ transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); } .kev-anim .kev-fade-up.is-visible { opacity: 1; transform: none; } .kev-anim .kev-fade { opacity: 0; } .kev-anim .kev-fade.is-visible { animation: kevFadeIn 3s ease forwards; } @media (prefers-reduced-motion: reduce) { .kev-anim .kev-fade-up, .kev-anim .kev-fade { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; } } /* — Responsive — */ @media (max-width: 768px) { .kev-container { padding-left: 15px; padding-right: 15px; } }