/* Theme Name: Geprek Theme URI: https://geprek.com.au Description: Geprek Indonesian crispy chicken restaurant child theme based on Blocksy Author: Greys Author URI: https://greys.co Template: blocksy Version: 3.2.0 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: geprek */ /* ============================================ Wave Mask — single source of truth ============================================ */ :root { --gp-wave-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 40' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M0,0 H1440 V18 C1404,18 1386,33 1350,33 C1314,33 1296,18 1260,18 C1224,18 1206,33 1170,33 C1134,33 1116,18 1080,18 C1044,18 1026,33 990,33 C954,33 936,18 900,18 C864,18 846,33 810,33 C774,33 756,18 720,18 C684,18 666,33 630,33 C594,33 576,18 540,18 C504,18 486,33 450,33 C414,33 396,18 360,18 C324,18 306,33 270,33 C234,33 216,18 180,18 C144,18 126,33 90,33 C54,33 36,18 0,18 Z'/%3E%3C/svg%3E"); } /* Admin bar fix — WP adds margin-top:32px on which inflates the document height, creating a white bar at the bottom when scrolling. Move the offset to instead so no extra space is created. */ html:root { padding-top: 0 !important; } body.admin-bar { padding-top: 32px; } /* ============================================ Page Hero Banners ============================================ */ .gp-page-hero { position: relative; min-height: 300px; display: flex; align-items: center; justify-content: center; background-size: cover; background-position: center; text-align: center; overflow: visible !important; } .gp-page-hero .wp-block-cover__background { opacity: 0.55 !important; } .gp-page-hero h1 { color: #fff; font-weight: 800; text-transform: uppercase; font-size: clamp(2.5rem, 5vw, 4rem); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } .gp-page-hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 50px; background-color: #ffffff; mask-image: var(--gp-wave-mask); -webkit-mask-image: var(--gp-wave-mask); mask-size: 100% 100%; -webkit-mask-size: 100% 100%; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; transform: scaleY(-1); z-index: 2; } /* Hide Blocksy default page title on all pages (we use custom heroes) */ .page .entry-header, .page .hero-section { display: none; } /* Remove Blocksy spacing so hero sits flush under transparent header and no white bar appears between content and footer */ .has-transparent-header [data-vertical-spacing*="top"] { padding-top: 0 !important; } [data-vertical-spacing*="bottom"] { padding-bottom: 0 !important; } /* ============================================ Top Announcement Bar ============================================ */ #header [data-row="top"] { background-color: var(--theme-palette-color-5) !important; } #header [data-row="top"], #header [data-row="top"] .ct-header-text, #header [data-row="top"] .entry-content { color: #1A1A1A !important; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; } #header [data-row="top"] .ct-container { padding-top: 6px; padding-bottom: 6px; } /* ============================================ Menu Styling ============================================ */ [data-header*="type-1"] .ct-header [data-id="menu"] > ul > li > a { font-size: 16px; color: #1A1A1A; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } [data-header*="type-1"] .ct-header [data-id="menu"] > ul > li > a:hover { color: var(--theme-palette-color-1); } /* Mobile offcanvas menu */ [data-header*="type-1"] #offcanvas .ct-panel-inner { background-color: var(--theme-palette-color-1) !important; } [data-header*="type-1"] #offcanvas .ct-panel-inner .mobile-menu a { color: var(--theme-palette-color-8) !important; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; font-size: 1.25rem; padding: 0.6rem 0; transition: opacity 0.2s; } [data-header*="type-1"] #offcanvas .ct-panel-inner .mobile-menu a:hover { color: var(--theme-palette-color-5) !important; } [data-header*="type-1"] #offcanvas .ct-toggle-close { color: var(--theme-palette-color-8) !important; } [data-header*="type-1"] #offcanvas .ct-toggle-close:hover { color: var(--theme-palette-color-5) !important; } /* Dividers between mobile menu items */ [data-header*="type-1"] #offcanvas .mobile-menu > li { border-bottom: 1px solid rgba(255, 255, 255, 0.2); } [data-header*="type-1"] #offcanvas .mobile-menu > li:last-child { border-bottom: none; } /* Allow bowls to overflow hero edge (Blocksy sets overflow:clip on #main-container) */ #main-container { overflow: visible !important; } /* ============================================ Wave Utilities — reusable scalloped wave mask ============================================ */ .gp-wave-top, .gp-wave-bottom { position: relative; } .gp-wave-top::before, .gp-wave-bottom::after { content: ''; position: absolute; left: 0; right: 0; height: 50px; mask-image: var(--gp-wave-mask); -webkit-mask-image: var(--gp-wave-mask); mask-size: 100% 100%; -webkit-mask-size: 100% 100%; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; pointer-events: none; z-index: 5; } .gp-wave-top::before { top: 0; background-color: var(--gp-wave-top-color, var(--gp-wave-color, #fff)); } .gp-wave-bottom::after { bottom: 0; transform: scaleY(-1); background-color: var(--gp-wave-bottom-color, var(--gp-wave-color, #fff)); } /* Group block wave style variations */ .wp-block-group.is-style-gp-wave-top { position: relative; } .wp-block-group.is-style-gp-wave-top::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 50px; mask-image: var(--gp-wave-mask); -webkit-mask-image: var(--gp-wave-mask); mask-size: 100% 100%; -webkit-mask-size: 100% 100%; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; pointer-events: none; z-index: 5; background-color: var(--gp-wave-top-color, #fff); } .wp-block-group.is-style-gp-wave-bottom { position: relative; } .wp-block-group.is-style-gp-wave-bottom::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 50px; mask-image: var(--gp-wave-mask); -webkit-mask-image: var(--gp-wave-mask); mask-size: 100% 100%; -webkit-mask-size: 100% 100%; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; pointer-events: none; z-index: 5; transform: scaleY(-1); background-color: var(--gp-wave-bottom-color, #fff); } /* Smaller waves on mobile */ @media (max-width: 689px) { .gp-wave-top::before, .gp-wave-bottom::after, .wp-block-group.is-style-gp-wave-top::before, .wp-block-group.is-style-gp-wave-bottom::after { height: 25px; } } /* ============================================ Home Hero ============================================ */ .gp-home-hero { position: relative; min-height: 60vh; display: flex; align-items: center; background-color: #E41C22; margin-bottom: 0; overflow: visible; } .gp-home-hero__overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; } /* White scalloped wave at bottom of header — applied globally on all pages. Positioned at bottom: -28px for ideal overlap, then clip-path hides the solid white that would otherwise cover the header content above. */ #header [data-row="middle"]::after { content: ''; position: absolute; bottom: -28px; left: 0; right: 0; height: 50px; background-color: #ffffff; mask-image: var(--gp-wave-mask); -webkit-mask-image: var(--gp-wave-mask); mask-size: 100% 100%; -webkit-mask-size: 100% 100%; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; z-index: 5; pointer-events: none; clip-path: inset(22px 0 0 0); } @media (max-width: 689px) { #header [data-row="middle"]::after { height: 25px; bottom: -14px; clip-path: inset(11px 0 0 0); } } .gp-home-hero__inner { display: flex; align-items: center; width: 100%; max-width: 1400px; margin: 0 auto; padding: 2rem; position: relative; z-index: 6; } .gp-home-hero__text { flex: 0 0 50%; max-width: 50%; } .gp-home-hero__subtitle { font-size: clamp(1.2rem, 2.5vw, 1.6rem); font-weight: 700; text-transform: uppercase; color: #f6c526; margin: 0 0 0.5rem; letter-spacing: 1px; } .gp-home-hero__title { font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 900; text-transform: uppercase; color: #fff; line-height: 1.05; margin: 0; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.15); } .gp-home-hero__bowls { flex: 0 0 50%; max-width: 50%; position: relative; height: clamp(280px, 34vw, 480px); z-index: 10; margin-bottom: -100px; } .gp-home-hero__bowl { position: absolute; } .gp-home-hero__bowl img { width: 100%; max-width: 350px; height: auto; object-fit: contain; display: block; } /* Bowl 1 (mayo) - top of cluster */ .gp-home-hero__bowl--1 { top: -15%; right: 24%; left: auto; z-index: 1; animation: gp-float-1 4s ease-in-out infinite; } /* Bowl 2 (sambal) - bottom-left */ .gp-home-hero__bowl--2 { bottom: -6%; left: 0; z-index: 3; animation: gp-float-2 5s ease-in-out infinite; } /* Bowl 3 (peanut) - right side */ .gp-home-hero__bowl--3 { bottom: 8%; right: -5%; left: auto; z-index: 2; animation: gp-float-3 4.5s ease-in-out infinite; } /* Floating animations (include base rotation so animation doesn't reset it) */ @keyframes gp-float-1 { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(-3deg) translateY(-12px); } } @keyframes gp-float-2 { 0%, 100% { transform: rotate(4deg) translateY(0); } 50% { transform: rotate(4deg) translateY(-16px); } } @keyframes gp-float-3 { 0%, 100% { transform: rotate(-2deg) translateY(0); } 50% { transform: rotate(-2deg) translateY(-10px); } } /* Mobile */ @media (max-width: 768px) { .gp-home-hero { min-height: auto; } .gp-home-hero__inner { flex-direction: column; text-align: center; padding: 2rem 1.5rem; gap: 1rem; } .gp-home-hero__text { flex: none; max-width: 100%; } .gp-home-hero__bowls { flex: none; max-width: 100%; width: 100%; height: 55vw; } .gp-home-hero__bowl--1 { width: 38vw; top: -5%; left: 25%; } .gp-home-hero__bowl--2 { width: 38vw; bottom: -5%; left: 0; right: auto; } .gp-home-hero__bowl--3 { width: 38vw; bottom: 0; right: 5%; } } /* ============================================ Homepage Sections ============================================ */ /* CTA Image Cards section */ .gp-cta-cards { position: relative; } .gp-cta-cards > .wp-block-columns { gap: 2rem !important; justify-content: center; align-items: center; max-width: 1200px; margin: 0 auto; } /* CTA Card wrapper */ .gp-cta-card-wrap { position: relative; aspect-ratio: 1; } .gp-cta-card-wrap::before { content: ''; position: absolute; top: 0; left: -4%; right: -4%; bottom: -4%; background-image: var(--border-image); background-size: contain; background-repeat: no-repeat; background-position: center; pointer-events: none; z-index: 10; } .gp-cta-card-wrap:hover::before { animation: border-wobble 2s ease-in-out infinite; } @keyframes border-wobble { 0% { transform: rotate(0deg); } 25% { transform: rotate(8deg); } 50% { transform: rotate(0deg); } 75% { transform: rotate(-8deg); } 100% { transform: rotate(0deg); } } /* CTA Card block */ .gp-cta-card { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; text-decoration: none; z-index: 11; -webkit-mask-image: var(--mask-image); mask-image: var(--mask-image); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } /* Border ring overlays */ .gp-cta-cards .wp-block-column { position: relative; overflow: visible; } .gp-cta-card__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .gp-cta-card__text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1.5rem; color: #fff; font-weight: 900; font-size: clamp(1.6rem, 2.8vw, 2.4rem); text-transform: uppercase; letter-spacing: 1px; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8), 0 0 40px rgba(0, 0, 0, 0.4); line-height: 1.15; z-index: 2; } @media (max-width: 768px) { .gp-cta-cards > .wp-block-columns { flex-direction: row !important; flex-wrap: nowrap; gap: 0.5rem !important; } .gp-cta-card__text { font-size: clamp(0.85rem, 3vw, 1.1rem); overflow-wrap: normal; word-break: keep-all; hyphens: none; } } /* Locations Near You section */ .gp-locations { overflow: hidden; } .gp-locations .wp-block-columns { align-items: stretch; gap: 0 !important; margin: 0; } .gp-locations .wp-block-column { display: flex; flex-direction: column; } .gp-locations__map { margin: 0; flex: 1; } .gp-locations__map img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; } .gp-locations__map iframe { width: 100%; height: 100%; min-height: 450px; display: block; border: 0; } .gp-locations__info { background-color: #FDB913; display: flex; flex-direction: column; justify-content: center; padding: 4rem 3.5rem !important; flex: 1; align-self: stretch !important; } @media (max-width: 768px) { .gp-locations .wp-block-columns { flex-direction: column-reverse !important; } .gp-locations__info { padding: 2.5rem 1.5rem !important; } } /* About / Who We Are section */ .gp-about .wp-block-columns { align-items: center; } .gp-about .wp-block-image img { border-radius: 8px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); } /* Overlapping images layout */ .gp-about__images { position: relative; min-height: 420px; } .gp-about__images .gp-about__image-main { position: relative; z-index: 1; max-width: 75%; } .gp-about__images .gp-about__image-main img, .gp-about__images .gp-about__image-overlap img { display: block; position: relative; z-index: 1; border-radius: 0; box-shadow: none; } .gp-about__images .gp-about__image-main::after { content: ''; position: absolute; top: -12px; left: -12px; right: 12px; bottom: 12px; border: 3px solid #FDB913; z-index: 0; } .gp-about__images .gp-about__image-overlap { position: absolute; bottom: 0; right: 0; z-index: 2; max-width: 75%; } .gp-about__images .gp-about__image-overlap::after { content: ''; position: absolute; top: 12px; left: -12px; right: 12px; bottom: -12px; border: 3px solid #FDB913; z-index: 0; } @media (max-width: 768px) { .gp-about__images { min-height: auto; padding: 8px; } .gp-about__images .gp-about__image-main { max-width: 85%; position: relative; } .gp-about__images .gp-about__image-main::after { top: -8px; left: -8px; right: 8px; bottom: 8px; } .gp-about__images .gp-about__image-overlap { position: relative; max-width: 70%; margin-top: -30px; margin-left: auto; } .gp-about__images .gp-about__image-overlap::after { top: 8px; left: -8px; right: 8px; bottom: -8px; } } /* Media Features banner */ .gp-media-features { position: relative; padding-top: 8rem !important; padding-bottom: 8rem !important; background-blend-mode: color-burn; } .gp-media-features { --gp-wave-bottom-color: #FFF8F0; } .gp-media-features .wp-block-heading { color: var(--theme-palette-color-5) !important; } .gp-media-features .wp-block-image { display: flex; align-items: center; justify-content: center; } .gp-media-features .wp-block-image img { width: auto !important; height: auto !important; max-height: 140px; object-fit: contain; } /* Hiring section — offset yellow border frame */ .gp-hiring .wp-block-image { position: relative; display: inline-block; z-index: 0; margin-right: 20px; margin-bottom: 20px; } .gp-hiring .wp-block-image::after { content: ''; position: absolute; top: 20px; left: 20px; right: -20px; bottom: -20px; border: 4px solid #FDB913; z-index: -1; pointer-events: none; transition: top 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), left 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), bottom 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .gp-hiring .wp-block-image:hover::after { top: 0; left: 0; right: 0; bottom: 0; } .gp-hiring .wp-block-image img { border-radius: 0; position: relative; display: block; } /* ============================================ Location Grid ============================================ */ .gp-location-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; padding: 2rem 0; } @media (max-width: 1024px) { .gp-location-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { .gp-location-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .gp-location-grid { grid-template-columns: 1fr; } } .gp-location-card { background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); transition: transform 0.2s ease, box-shadow 0.2s ease; } .gp-location-card .wp-block-post-featured-image { margin-block-end: 0; } .gp-location-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); } .gp-location-card__image { width: 100%; height: 200px; object-fit: cover; } .gp-location-card__info { padding: 1rem; } .gp-location-card__name { font-weight: 700; font-size: 0.95rem; margin: 0 0 0.25rem; } .gp-location-card__meta { font-size: 0.85rem; color: #666; display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 0.5rem; margin-top: 0.25rem; } .gp-location-card__address { font-weight: 600; color: var(--theme-palette-color-1); } .gp-location-card__phone { color: #888; } /* ============================================ Footer ============================================ */ .ct-footer { position: relative; overflow: hidden !important; background: transparent !important; } [data-footer] .ct-footer [data-row="middle"] { position: relative; overflow: visible; background-color: var(--theme-palette-color-6) !important; color: var(--theme-palette-color-8); padding: 2.35rem 0 2.1rem; margin-top: 85px; } .ct-footer [data-row="middle"] .ct-container { position: relative; z-index: 2; display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 2.15rem; align-items: start; padding: 0 !important; } /* Footer logo column */ .gp-footer-logo { display: flex; align-items: flex-start; justify-content: center; padding-top: 0.25rem; } .gp-footer-logo img { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; } .ct-footer [data-row="middle"] [data-column^="widget-area"] { min-width: 0; } .ct-footer [data-row="middle"] .widget { color: #fff; } .ct-footer [data-row="middle"] a { color: #fff; text-decoration: none; transition: opacity 0.2s; } .ct-footer [data-row="middle"] a:hover { opacity: 0.8; } .ct-footer [data-row="middle"] .widget-title, .ct-footer [data-row="middle"] h2, .ct-footer [data-row="middle"] h3 { font-weight: 700; text-transform: uppercase; margin-bottom: 0.95rem; margin-top: 0; color: #fff; font-size: 1.3rem; letter-spacing: 0.35px; } .ct-footer [data-row="middle"] h4 { margin: 1.25rem 0 0.3rem; color: #fff; font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.45px; } .ct-footer [data-row="middle"] h4:first-child { margin-top: 0; } .ct-footer [data-row="middle"] p { color: #fff; margin: 0 0 0.5rem; } .ct-footer [data-row="middle"] ul { list-style: none; padding: 0; margin: 0; } .ct-footer [data-row="middle"] ul li { color: #fff; margin-bottom: 0.75rem; line-height: 1.6; } .ct-footer [data-row="middle"] .social-icons { display: flex; gap: 1rem; margin-top: 1rem; } .ct-footer [data-row="middle"] .social-icons a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: rgba(255, 255, 255, 0.2); border-radius: 50%; color: #fff; font-size: 1.25rem; transition: all 0.3s ease; } .ct-footer [data-row="middle"] .social-icons a:hover { background: rgba(255, 255, 255, 0.3); transform: translateY(-2px); } .ct-footer [data-row="middle"] .social-icons svg, .ct-footer [data-row="middle"] .social-icons i { width: 20px; height: 20px; } .ct-footer [data-row="middle"] [data-column="widget-area-2"] p:last-child a { text-transform: uppercase; font-weight: 700; letter-spacing: 0.45px; } .ct-footer [data-row="bottom"] { position: relative; z-index: 3; background: #EA7833 !important; color: rgba(255, 255, 255, 0.88); text-align: center; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.55px; } .ct-footer [data-row="bottom"] .ct-container { justify-content: center; } .ct-footer [data-row="bottom"] a { color: rgba(255, 255, 255, 0.88); text-decoration: none; } .ct-footer [data-row="bottom"] a:hover { text-decoration: underline; } /* Footer social icons (under logo) — left on mobile, centered on desktop */ .ct-footer [data-row="middle"] [data-id="socials"] { display: flex; justify-content: flex-start; gap: 10px; margin-top: 1.5rem; } @media (min-width: 690px) { .ct-footer [data-row="middle"] [data-id="socials"] { justify-content: center; } } .ct-footer [data-row="middle"] [data-id="socials"] a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: #fff !important; border-radius: 10px; color: var(--theme-palette-color-6) !important; transition: transform 0.2s ease, box-shadow 0.2s ease; } .ct-footer [data-row="middle"] [data-id="socials"] a:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); opacity: 1; } .ct-footer [data-row="middle"] [data-id="socials"] svg { width: 22px; height: 22px; fill: var(--theme-palette-color-6); } .ct-footer .ct-footer-copyright { color: rgba(255, 255, 255, 0.88); width: 100%; text-align: center; } @media (max-width: 900px) { .ct-footer [data-row="middle"] .ct-container { grid-template-columns: auto 1fr 1fr !important; gap: 1.9rem; } .ct-footer [data-row="middle"] [data-column="widget-area-2"] { grid-column: 2 / -1; } } @media (max-width: 768px) { .ct-footer [data-row="middle"] .ct-container { grid-template-columns: 1fr !important; gap: 1.45rem; } .ct-footer [data-row="middle"] [data-column="widget-area-2"] { grid-column: auto; } .ct-footer [data-row="middle"] { padding: 1.95rem 0 2rem; } .gp-footer-logo { justify-content: flex-start; } .gp-footer-logo img { width: 80px; height: 80px; } } /* ============================================ Inner Page Content ============================================ */ .gp-inner-content { text-align: center; } .gp-inner-content p { max-width: 680px; margin-left: auto; margin-right: auto; line-height: 1.8; } /* Orange CTA Banner (Hiring & Catering pages) */ .gp-cta-banner { background-color: #F58220 !important; text-align: center; } .gp-cta-banner p { color: #fff !important; font-weight: 800; text-transform: uppercase; font-size: clamp(0.85rem, 2vw, 1.15rem); letter-spacing: 0.5px; line-height: 1.6; max-width: 100%; } .gp-cta-banner a { color: #fff !important; text-decoration: underline; text-underline-offset: 3px; } .gp-cta-banner a:hover { opacity: 0.85; } /* Contact page location cards */ .gp-contact-locations .wp-block-column { text-align: center; } .gp-contact-locations .wp-block-image img { border-radius: 12px; aspect-ratio: 4/3; object-fit: cover; width: 100%; } .gp-contact-locations h3 { font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 1rem; font-size: 1.15rem; } .gp-contact-locations p { font-size: 0.9rem; line-height: 1.7; color: #444; } /* Get in touch section */ .gp-get-in-touch { text-align: center; } .gp-get-in-touch a { color: var(--theme-palette-color-1); font-weight: 600; text-decoration: none; } .gp-get-in-touch a:hover { text-decoration: underline; } /* Menu image placeholder */ .gp-menu-placeholder { background: #e8ddd0; border-radius: 8px; min-height: 400px; display: flex; align-items: center; justify-content: center; color: #999; text-transform: uppercase; font-weight: 600; letter-spacing: 1px; } /* ============================================ Footer Wave Decoration (scalloped waves) --gp-footer-preceding-bg (set by JS) fills the gap above the wave with the preceding section's color. ============================================ */ /* Gap fill — matches preceding section's background color */ .ct-footer [data-row="middle"]::before { content: ''; position: absolute; top: -200px; left: 0; right: 0; height: 200px; background-color: var(--gp-footer-preceding-bg, #fff); z-index: 0; } /* Orange scalloped wave band — always matches the footer background */ .ct-footer [data-row="middle"]::after { content: ''; position: absolute; top: -85px; left: 0; right: 0; height: 90px; background-color: var(--theme-palette-color-6); mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 90' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M0,18 C36,18 54,33 90,33 C126,33 144,18 180,18 C216,18 234,33 270,33 C306,33 324,18 360,18 C396,18 414,33 450,33 C486,33 504,18 540,18 C576,18 594,33 630,33 C666,33 684,18 720,18 C756,18 774,33 810,33 C846,33 864,18 900,18 C936,18 954,33 990,33 C1026,33 1044,18 1080,18 C1116,18 1134,33 1170,33 C1206,33 1224,18 1260,18 C1296,18 1314,33 1350,33 C1386,33 1404,18 1440,18 V90 H0 Z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 90' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M0,18 C36,18 54,33 90,33 C126,33 144,18 180,18 C216,18 234,33 270,33 C306,33 324,18 360,18 C396,18 414,33 450,33 C486,33 504,18 540,18 C576,18 594,33 630,33 C666,33 684,18 720,18 C756,18 774,33 810,33 C846,33 864,18 900,18 C936,18 954,33 990,33 C1026,33 1044,18 1080,18 C1116,18 1134,33 1170,33 C1206,33 1224,18 1260,18 C1296,18 1314,33 1350,33 C1386,33 1404,18 1440,18 V90 H0 Z'/%3E%3C/svg%3E"); mask-size: 100% 100%; -webkit-mask-size: 100% 100%; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; z-index: 1; } /* ============================================ Homepage Scroll Animations ============================================ */ @keyframes gp-fade-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .home .gp-cta-cards, .home .gp-about, .home .gp-media-features, .home .gp-hiring { animation: gp-fade-up 0.7s ease-out both; } .home .gp-about .wp-block-heading { line-height: 1; } /* Mobile: balance section padding */ @media (max-width: 768px) { .home .gp-cta-cards.wp-block-group { padding-top: 3rem !important; padding-bottom: 3rem !important; } .home .gp-about.wp-block-group { padding-top: 3rem !important; padding-bottom: 3rem !important; } .home .gp-hiring.wp-block-group { padding-top: 3rem !important; padding-bottom: 3rem !important; } } /* ============================================ General Utilities ============================================ */ .text-uppercase { text-transform: uppercase; } /* Fix WP admin bar margin causing white gap at page bottom. WordPress uses margin-top on which adds scroll space beyond the footer. Swap to padding-top so the space stays inside the box. */ @media screen { html { margin-top: 0 !important; padding-top: 32px !important; } } @media screen and (max-width: 782px) { html { padding-top: 46px !important; } } /* ============================================ Global Button Style — pill outline ============================================ */ .wp-block-button__link.wp-element-button { background-color: transparent !important; color: #1A1A1A !important; border: 3px solid #1A1A1A !important; border-radius: 999px !important; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; padding: 0.85rem 2.5rem; font-size: 0.95rem; transition: background-color 0.2s ease, color 0.2s ease; } .wp-block-button__link.wp-element-button:hover { background-color: #1A1A1A !important; color: #fff !important; } /* White variant — Locations section */ .gp-locations .wp-block-button__link.wp-element-button { color: #fff !important; border-color: #fff !important; } .gp-locations .wp-block-button__link.wp-element-button:hover { background-color: #fff !important; color: #1A1A1A !important; }