/* Theme Name: Buah Kurma Orchard Template: buahkurma Author: Optimization Agent Version: 1.0 Description: Fast, accessible child theme of Buah Kurma. Unique "Orchard Light" design — Astra-flavoured centered hero, olive-green (#8db752) accent, Nunito Sans, warm cream. Keeps WPBakery content + menus identical; only presentation + asset loading change. */ /* ============================================================ BUAH KURMA ORCHARD — design tokens ============================================================ */ :root{ --olive:#8db752; /* assigned accent (decorative use) */ --olive-deep:#4f6e26; /* AA link green on cream (>=4.5:1) */ --olive-ink:#3a5018; /* darkest green for headings */ --forest:#243010; /* near-black green body text */ --honey:#c98a26; /* warm date/amber (decorative) */ --honey-btn:#946017; /* button bg: white text passes AA (>=4.5) */ --olive-btn:#3f6b14; /* alt button bg: white text passes AA */ --cream:#fbfaf4; /* page bg */ --cream-2:#f4f1e6; /* alt section bg */ --card:#ffffff; --line:#e7e2cf; --ink:#2b3220; /* body text */ --muted:#5a6149; --maxw:1120px; --radius:18px; --shadow:0 10px 30px -12px rgba(60,80,24,.22); --shadow-sm:0 4px 14px -8px rgba(60,80,24,.30); --ff: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* @font-face injected inline in (see functions.php) so no extra request blocks render */ /* ---- reset-ish over the parent (we drop bootstrap/parent css entirely) ---- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; font-family:var(--ff); font-weight:400; font-size:17px; line-height:1.72; color:var(--ink); background:var(--cream); -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%;height:auto;display:block} a{color:var(--olive-deep);text-decoration:none;transition:color .15s} a:hover{color:var(--olive-ink);text-decoration:underline} :focus-visible{outline:3px solid var(--olive);outline-offset:2px} h1,h2,h3,h4,h5,h6{ font-family:var(--ff); color:var(--olive-ink); line-height:1.18; font-weight:800; letter-spacing:-.012em; margin:0 0 .5em; } h1{font-size:clamp(1.9rem,5.2vw,3rem)} h2{font-size:clamp(1.45rem,3.6vw,2.1rem)} h3{font-size:clamp(1.2rem,2.6vw,1.5rem)} p{margin:0 0 1.1em} strong{color:var(--forest);font-weight:700} .container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 22px} .clear{clear:both} /* skip link */ .skip-link{position:absolute;left:-999px;top:0;background:var(--olive-ink);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;z-index:100000} .skip-link:focus{left:0} /* ============================================================ HEADER — Astra-flavoured centered minimal ============================================================ */ .header-menu{position:relative;z-index:50} #header-sticky{ background:rgba(251,250,244,.92); backdrop-filter:saturate(1.1) blur(6px); border-bottom:1px solid var(--line); } #top_part{display:none} #menu_part{padding:14px 0} #menu_part .row{ display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap; } #menu_part .row > div{padding:0} /* logo */ .logo a{ font-family:var(--ff); font-weight:800; font-size:1.45rem; letter-spacing:-.02em; color:var(--olive-ink); text-decoration:none; display:inline-flex;align-items:center;gap:.5ch; } .logo a::before{ content:""; width:26px;height:26px;border-radius:50% 50% 50% 0; background:linear-gradient(135deg,var(--olive),var(--honey)); display:inline-block;transform:rotate(-12deg); box-shadow:var(--shadow-sm); } .logo img{max-height:54px;width:auto} /* contact pill */ .whats_app a{ display:inline-flex;align-items:center;gap:.5ch; background:var(--olive-btn);color:#fff !important; font-weight:700;font-size:.95rem; padding:10px 20px;border-radius:999px; box-shadow:var(--shadow-sm); text-decoration:none !important; transition:transform .15s, background .15s; } .whats_app a:hover{background:var(--olive-ink);transform:translateY(-1px)} .whats_app a i{color:#fff} /* ============================================================ HERO — centered, soft olive radial, palm motif We RE-SKIN the WPBakery #banner-part (parallax stripped in PHP). ============================================================ */ #banner-part.vc_row, #banner-part{ position:relative; background: radial-gradient(120% 140% at 50% -10%, #eaf3d8 0%, var(--cream) 55%), linear-gradient(180deg, #f2f7e6, var(--cream)); border-bottom:1px solid var(--line); padding:clamp(56px,9vw,104px) 0 clamp(48px,7vw,84px) !important; text-align:center; overflow:hidden; } /* decorative palm-leaf arcs */ #banner-part::before,#banner-part::after{ content:"";position:absolute;border-radius:50%;pointer-events:none; background:radial-gradient(circle at 30% 30%, rgba(141,183,82,.16), transparent 70%); } #banner-part::before{width:380px;height:380px;top:-120px;left:-120px} #banner-part::after{width:300px;height:300px;bottom:-110px;right:-90px;background:radial-gradient(circle at 30% 30%, rgba(201,138,38,.14), transparent 70%)} #banner-part .wpb_column,#banner-part .vc_column-inner,#banner-part .wpb_wrapper{position:relative;z-index:2} #banner-part h1{ max-width:880px;margin-left:auto;margin-right:auto; color:var(--olive-ink) !important; /* override inline white (was on dark img) */ text-shadow:none !important; } /* little eyebrow chip above hero h1 */ #banner-part h1::before{ content:"Buah Kurma Malaysia"; display:block; font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase; color:var(--olive-deep); margin-bottom:14px; } /* "join-me" intro band right under hero */ .join-me{background:var(--cream);padding:34px 0 8px} .join-me .vc_btn3-container{margin-top:8px} /* ============================================================ CONTENT / WPBakery normalisation ============================================================ */ #content_wrapper{background:var(--cream)} #inner-page-content,#homepagecontent{padding:36px 0 8px} .wpb-content-wrapper,.wpb_wrapper{max-width:100%} .vc_row{margin:0 !important} .vc_column-inner{padding:0 !important} .wpb_text_column{margin-bottom:1.1em} /* readable column widths for the long article body */ #inner-page-content .vc_row:not(#banner-part):not(.join-me){ max-width:var(--maxw);margin:0 auto !important; padding:18px 0; } /* section cards: give the alternating content rows a soft card look */ .vc_custom_heading{margin-top:.4em} /* in-content links: underline so they don't rely on colour alone (a11y) */ #content_wrapper p a, #content_wrapper li a, #content_wrapper td a{ color:var(--olive-deep); text-decoration:underline; text-underline-offset:2px; } #content_wrapper p a:hover, #content_wrapper li a:hover{color:var(--olive-ink)} /* but NOT the WPBakery button links */ #content_wrapper a.vc_btn3,#content_wrapper .vc_btn3-container a{text-decoration:none !important} /* lists */ #content_wrapper ul,#content_wrapper ol{padding-left:1.3em;margin:0 0 1.2em} #content_wrapper li{margin-bottom:.4em} /* WPBakery buttons → orchard pills (white text on AA-dark bg) */ a.vc_general.vc_btn3, .vc_btn3.vc_btn3-color-green, .vc_btn3.vc_btn3-style-custom, .vc_btn3-shape-rounded, .vc_btn3-shape-round{ background:var(--honey-btn) !important; background-color:var(--honey-btn) !important; background-image:none !important; color:#fff !important; border:none !important; border-radius:999px !important; font-weight:700 !important; padding:13px 28px !important; box-shadow:var(--shadow-sm) !important; font-family:var(--ff) !important; text-decoration:none !important; display:inline-block; transition:transform .15s, filter .15s; } a.vc_general.vc_btn3:hover, .vc_btn3:hover{filter:brightness(.92);transform:translateY(-1px);color:#fff !important;text-decoration:none !important} /* images inside content get rounded + shadow */ #content_wrapper .wpb_single_image img, #content_wrapper p img, #content_wrapper figure img{ border-radius:14px;box-shadow:var(--shadow-sm); } /* tables / FAQ readability */ #content_wrapper table{width:100%;border-collapse:collapse;margin:0 0 1.4em;font-size:.97em} #content_wrapper th,#content_wrapper td{border:1px solid var(--line);padding:10px 12px;text-align:left} #content_wrapper th{background:var(--cream-2);color:var(--olive-ink)} /* blockquotes */ #content_wrapper blockquote{ border-left:4px solid var(--olive);background:var(--cream-2); margin:0 0 1.2em;padding:14px 18px;border-radius:0 12px 12px 0;color:var(--muted); } /* single post / blog body */ .single #content_wrapper,.archive #content_wrapper,.blog #content_wrapper{padding-bottom:30px} /* ============================================================ SIDEBAR widgets (Recent Posts / Archives / Categories) ============================================================ */ #content_wrapper h2:not(.vc_custom_heading), .widget-title, #content_wrapper .widget h3{ color:var(--olive-ink); } #content_wrapper aside,#content_wrapper .widget{margin-bottom:24px} /* ============================================================ FOOTER ============================================================ */ footer{background:#22300f;color:#dfe6cf;margin-top:48px} footer a, footer p a, footer li a, footer .widget a{color:#d4e4a6 !important;text-decoration:none} footer a:hover,footer li a:hover{color:#fff !important;text-decoration:underline} footer ul{list-style:none;padding-left:0;margin:0} footer li{margin-bottom:.35em} .footer-top{padding:46px 0 22px} .footer-top .row{display:flex;flex-wrap:wrap;gap:24px} .footer-top .row > div{flex:1 1 200px;padding:0} footer h3{color:#fff;font-size:1.05rem;margin-bottom:.7em} .footer_bottom{border-top:1px solid rgba(255,255,255,.12);padding:16px 0} .footer_bottom .copyright p{margin:0;font-size:.9rem;color:#aeba8f} /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:860px){ body{font-size:16px} #menu_part .row{justify-content:space-between} .footer-top .row{flex-direction:column} } @media (max-width:560px){ .logo a{font-size:1.2rem} .whats_app a{padding:9px 15px;font-size:.85rem} #banner-part{padding:46px 0 38px !important} } /* kill any leftover parent slider/scrollup remnants if present */ .slider-area,#scrollUp{display:none !important} /* main landmark spacing */ main#main-content{display:block}