/* ================================================================== HANAN LAND — Main Stylesheet 1. Variables 2. Reset & Base 3. Typography 4. Layout / Container 5. Buttons & Badges 6. Header & Navigation 7. Mobile Offcanvas Menu 8. Page Header / Breadcrumb 9. Sections & Utility Blocks 10. Cards / Grid / Feature Box / Accordion / Counter / Marquee 11. Blog (archive, single, comments, pagination) 12. Sidebar & Widgets 13. Footer 14. WordPress Core Classes 15. Animations (scroll reveal, hover, keyframes) 16. Responsive ================================================================== */ /* ============ 1. VARIABLES ============ */ :root{ --hl-dark:#0B0D10; --hl-dark-2:#12161B; --hl-dark-3:#1A1F26; --hl-accent:#C8F169; /* neon lime */ --hl-accent-2:#A6E63F; --hl-accent-soft:rgba(200,241,105,.12); --hl-white:#ffffff; --hl-body:#5B6472; --hl-body-dark:#98A2B3; --hl-heading:#0B0D10; --hl-border:#E6E9EE; --hl-border-dark:rgba(255,255,255,.10); --hl-bg-soft:#F5F7F4; --hl-font-heading:'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --hl-font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --hl-container:1320px; --hl-radius:16px; --hl-radius-sm:10px; --hl-radius-lg:24px; --hl-shadow:0 18px 50px rgba(11,13,16,.08); --hl-shadow-dark:0 18px 50px rgba(0,0,0,.35); --hl-transition:all .4s cubic-bezier(.25,.8,.25,1); --hl-header-h:92px; } /* ============ 2. RESET & BASE ============ */ *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;} body{ margin:0; font-family:var(--hl-font-body); font-size:16px; line-height:1.75; font-weight:400; color:var(--hl-body); background:var(--hl-white); overflow-x:hidden; -webkit-font-smoothing:antialiased; } body.hl-no-scroll{overflow:hidden;} img{max-width:100%;height:auto;display:block;} figure{margin:0;} a{color:var(--hl-heading);text-decoration:none;transition:var(--hl-transition);} a:hover{color:var(--hl-accent-2);} ul,ol{padding-left:20px;} button,input,select,textarea{font-family:inherit;font-size:inherit;} iframe{max-width:100%;border:0;} table{width:100%;border-collapse:collapse;} table th,table td{border:1px solid var(--hl-border);padding:12px 14px;text-align:left;} table th{font-family:var(--hl-font-heading);font-weight:700;color:var(--hl-heading);background:var(--hl-bg-soft);} hr{border:0;border-top:1px solid var(--hl-border);margin:32px 0;} ::selection{background:var(--hl-accent);color:var(--hl-dark);} /* ============ 3. TYPOGRAPHY ============ */ h1,h2,h3,h4,h5,h6, .h1,.h2,.h3,.h4,.h5,.h6{ font-family:var(--hl-font-heading); color:var(--hl-heading); font-weight:700; line-height:1.16; letter-spacing:-.02em; margin:0 0 18px; } h1,.h1{font-size:clamp(38px,5vw,64px);font-weight:800;} h2,.h2{font-size:clamp(30px,3.6vw,48px);} h3,.h3{font-size:clamp(24px,2.4vw,32px);} h4,.h4{font-size:22px;} h5,.h5{font-size:19px;} h6,.h6{font-size:17px;} p{margin:0 0 18px;} p:last-child{margin-bottom:0;} blockquote{ margin:32px 0;padding:28px 32px; background:var(--hl-bg-soft); border-left:4px solid var(--hl-accent); border-radius:var(--hl-radius-sm); font-family:var(--hl-font-heading); font-size:20px;line-height:1.5;color:var(--hl-heading);font-weight:500; } blockquote cite{display:block;margin-top:14px;font-family:var(--hl-font-body);font-size:14px;color:var(--hl-body);font-style:normal;} code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;} code{background:var(--hl-bg-soft);padding:3px 7px;border-radius:6px;color:#C0392B;} pre{background:var(--hl-dark-2);color:#E6E9EE;padding:22px;border-radius:var(--hl-radius-sm);overflow:auto;} pre code{background:none;color:inherit;padding:0;} .hl-lead{font-size:18px;line-height:1.72;} .hl-text-accent{color:var(--hl-accent-2);} .hl-text-white{color:#fff;} .hl-underline{ -webkit-text-decoration:underline var(--hl-accent) 4px; text-decoration:underline var(--hl-accent) 4px;text-underline-offset:6px;} /* ============ 4. LAYOUT ============ */ .hl-container{width:100%;max-width:var(--hl-container);margin:0 auto;padding:0 20px;} .hl-container-sm{max-width:900px;} .hl-container-fluid{max-width:100%;padding:0 40px;} .hl-site{min-height:100vh;display:flex;flex-direction:column;} .hl-main{flex:1 0 auto;} .hl-content-area{padding:80px 0 100px;} .hl-with-sidebar{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:50px;align-items:flex-start;} .hl-row{display:grid;gap:30px;} .hl-col-2{grid-template-columns:repeat(2,minmax(0,1fr));} .hl-col-3{grid-template-columns:repeat(3,minmax(0,1fr));} .hl-col-4{grid-template-columns:repeat(4,minmax(0,1fr));} .hl-text-center{text-align:center;} .hl-mb-0{margin-bottom:0!important;} .hl-mt-40{margin-top:40px;} .hl-mt-60{margin-top:60px;} /* ============ 5. BUTTONS ============ */ .hl-btn, .wp-block-button__link, input[type="submit"], button[type="submit"], .hl-content .button{ display:inline-flex;align-items:center;justify-content:center;gap:10px; font-family:var(--hl-font-heading);font-weight:700;font-size:15px;letter-spacing:.01em; padding:16px 34px;border-radius:50px;border:1px solid var(--hl-accent); background:var(--hl-accent);color:var(--hl-dark)!important; cursor:pointer;position:relative;overflow:hidden;z-index:1; transition:var(--hl-transition); } .hl-btn::before, input[type="submit"]::before, button[type="submit"]::before{ content:'';position:absolute;inset:0;z-index:-1; background:var(--hl-dark); transform:translateY(101%);transition:transform .45s cubic-bezier(.25,.8,.25,1); } .hl-btn:hover::before, input[type="submit"]:hover::before, button[type="submit"]:hover::before{transform:translateY(0);} .hl-btn:hover, input[type="submit"]:hover, button[type="submit"]:hover{color:var(--hl-accent)!important;border-color:var(--hl-dark);} .hl-btn i,.hl-btn svg{width:16px;height:16px;} .hl-btn-dark{background:var(--hl-dark);border-color:var(--hl-dark);color:var(--hl-white)!important;} .hl-btn-dark::before{background:var(--hl-accent);} .hl-btn-dark:hover{color:var(--hl-dark)!important;border-color:var(--hl-accent);} .hl-btn-outline{background:transparent;border-color:var(--hl-border);color:var(--hl-heading)!important;} .hl-btn-outline::before{background:var(--hl-accent);} .hl-btn-outline:hover{color:var(--hl-dark)!important;border-color:var(--hl-accent);} .hl-btn-light{background:#fff;border-color:#fff;color:var(--hl-dark)!important;} .hl-btn-light::before{background:var(--hl-accent);} .hl-btn-sm{padding:12px 24px;font-size:14px;} .hl-btn-lg{padding:19px 44px;font-size:16px;} .hl-btn-arrow::after{content:'\2192';font-size:17px;transition:transform .35s ease;} .hl-btn-arrow:hover::after{transform:translateX(5px);} .hl-badge{ display:inline-flex;align-items:center;gap:8px; font-family:var(--hl-font-heading);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase; color:var(--hl-heading);background:var(--hl-accent-soft); border:1px solid rgba(11,13,16,.08); padding:8px 18px;border-radius:50px;margin-bottom:20px; } .hl-badge::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--hl-accent-2);box-shadow:0 0 0 4px rgba(200,241,105,.25);} .hl-section-dark .hl-badge{color:#fff;background:rgba(255,255,255,.06);border-color:var(--hl-border-dark);} /* ============ 6. HEADER & NAV ============ */ .hl-header{ position:absolute;top:0;left:0;width:100%;z-index:999; transition:background .4s ease, box-shadow .4s ease, padding .4s ease; } .hl-header.is-sticky{ position:fixed;background:var(--hl-dark); box-shadow:0 10px 40px rgba(0,0,0,.28); animation:hlSlideDown .5s ease forwards; } body.hl-header-solid .hl-header{position:relative;background:var(--hl-dark);} body.hl-header-solid .hl-header.is-sticky{position:fixed;} .hl-header-inner{ display:flex;align-items:center;justify-content:space-between;gap:30px; min-height:var(--hl-header-h); } .hl-header.is-sticky .hl-header-inner{min-height:76px;} /* Logo */ .hl-logo{display:flex;align-items:center;gap:12px;} .hl-logo img{max-height:46px;width:auto;} .hl-logo-text{ font-family:var(--hl-font-heading);font-weight:800;font-size:24px;letter-spacing:-.03em; color:#fff;line-height:1.1; } .hl-logo-text span{color:var(--hl-accent);} .hl-logo-tagline{display:block;font-family:var(--hl-font-body);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--hl-body-dark);} .hl-logo:hover .hl-logo-text{color:#fff;} /* Desktop nav */ .hl-nav{display:flex;align-items:center;} .hl-nav ul{list-style:none;margin:0;padding:0;} .hl-nav > ul{display:flex;align-items:center;gap:6px;} .hl-nav > ul > li{position:relative;} .hl-nav > ul > li > a{ display:block;padding:12px 16px; font-family:var(--hl-font-heading);font-weight:600;font-size:15px; color:rgba(255,255,255,.82);position:relative; } .hl-nav > ul > li > a::after{ content:'';position:absolute;left:16px;right:16px;bottom:6px;height:2px; background:var(--hl-accent);transform:scaleX(0);transform-origin:right; transition:transform .35s cubic-bezier(.25,.8,.25,1); } .hl-nav > ul > li:hover > a::after, .hl-nav > ul > li.current-menu-item > a::after, .hl-nav > ul > li.current-menu-parent > a::after, .hl-nav > ul > li.current_page_item > a::after{transform:scaleX(1);transform-origin:left;} .hl-nav > ul > li:hover > a, .hl-nav > ul > li.current-menu-item > a, .hl-nav > ul > li.current_page_item > a{color:#fff;} /* Dropdown */ .hl-nav > ul > li.menu-item-has-children > a{padding-right:38px;} .hl-nav li.menu-item-has-children > a::before{ content:'';position:absolute;width:6px;height:6px; right:16px;top:50%;transform:translateY(-50%) rotate(45deg); border-right:2px solid currentColor;border-bottom:2px solid currentColor; } .hl-nav ul ul{ position:absolute;top:calc(100% + 14px);left:0;min-width:238px; background:var(--hl-dark-2);border:1px solid var(--hl-border-dark); border-radius:var(--hl-radius-sm);padding:10px; box-shadow:var(--hl-shadow-dark); opacity:0;visibility:hidden;transform:translateY(12px); transition:all .35s cubic-bezier(.25,.8,.25,1);z-index:10; } .hl-nav ul li:hover > ul{opacity:1;visibility:visible;transform:translateY(0);} .hl-nav ul ul li{position:relative;} .hl-nav ul ul a{ display:block;padding:10px 14px;border-radius:8px; font-size:14.5px;font-weight:500;color:rgba(255,255,255,.75); } .hl-nav ul ul a:hover{background:rgba(255,255,255,.06);color:var(--hl-accent);padding-left:20px;} .hl-nav ul ul ul{top:-10px;left:100%;} .hl-nav ul ul li.menu-item-has-children > a{padding-right:32px;} .hl-nav ul ul li.menu-item-has-children > a::before{position:absolute;right:14px;top:50%;transform:translateY(-50%) rotate(-45deg);width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;} /* Header right */ .hl-header-right{display:flex;align-items:center;gap:14px;} .hl-header-cta{white-space:nowrap;} .hl-menu-toggle{ display:none;width:48px;height:48px;border-radius:12px; background:rgba(255,255,255,.07);border:1px solid var(--hl-border-dark); cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px; transition:var(--hl-transition); } .hl-menu-toggle span{display:block;width:20px;height:2px;background:#fff;border-radius:2px;transition:var(--hl-transition);} .hl-menu-toggle:hover{background:var(--hl-accent);border-color:var(--hl-accent);} .hl-menu-toggle:hover span{background:var(--hl-dark);} /* ============ 7. OFFCANVAS MOBILE MENU ============ */ .hl-offcanvas{ position:fixed;top:0;right:0;height:100%;width:340px;max-width:88%; background:var(--hl-dark);border-left:1px solid var(--hl-border-dark); z-index:1002;padding:28px 26px 40px;overflow-y:auto; transform:translateX(100%);transition:transform .45s cubic-bezier(.25,.8,.25,1); } .hl-offcanvas.is-open{transform:translateX(0);} .hl-offcanvas-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;} .hl-offcanvas-close{ width:42px;height:42px;border-radius:10px;background:rgba(255,255,255,.07); border:1px solid var(--hl-border-dark);color:#fff;font-size:22px;line-height:1; cursor:pointer;transition:var(--hl-transition); } .hl-offcanvas-close:hover{background:var(--hl-accent);color:var(--hl-dark);} .hl-offcanvas-nav ul{list-style:none;margin:0;padding:0;} .hl-offcanvas-nav li{border-bottom:1px solid var(--hl-border-dark);} .hl-offcanvas-nav a{ display:block;padding:14px 0;font-family:var(--hl-font-heading); font-weight:600;font-size:16px;color:rgba(255,255,255,.85); } .hl-offcanvas-nav a:hover{color:var(--hl-accent);padding-left:6px;} .hl-offcanvas-nav ul ul{display:none;padding-left:14px;} .hl-offcanvas-nav ul ul li:last-child{border-bottom:0;} .hl-offcanvas-nav ul ul a{font-size:14.5px;font-weight:500;color:var(--hl-body-dark);} .hl-submenu-toggle{ position:absolute;right:0;top:8px;width:34px;height:34px;border-radius:8px; background:rgba(255,255,255,.06);border:1px solid var(--hl-border-dark); color:#fff;cursor:pointer;font-size:18px;line-height:1;transition:var(--hl-transition); } .hl-offcanvas-nav li.menu-item-has-children{position:relative;} .hl-submenu-toggle.is-active{background:var(--hl-accent);color:var(--hl-dark);transform:rotate(45deg);} .hl-offcanvas-foot{margin-top:32px;color:var(--hl-body-dark);font-size:14.5px;} .hl-offcanvas-foot a{color:#fff;} .hl-offcanvas-foot .hl-btn{margin-top:18px;width:100%;} .hl-overlay{ position:fixed;inset:0;background:rgba(6,8,10,.7);backdrop-filter:blur(3px); opacity:0;visibility:hidden;transition:var(--hl-transition);z-index:1001; } .hl-overlay.is-open{opacity:1;visibility:visible;} /* ============ 8. PAGE HEADER ============ */ .hl-page-header{ background:var(--hl-dark);color:#fff;position:relative;overflow:hidden; padding:calc(var(--hl-header-h) + 80px) 0 90px; } body.hl-header-solid .hl-page-header{padding:90px 0;} .hl-page-header::before{ content:'';position:absolute;width:620px;height:620px;border-radius:50%; background:radial-gradient(circle,rgba(200,241,105,.16) 0%,transparent 68%); top:-260px;right:-160px; } .hl-page-header::after{ content:'';position:absolute;inset:0;opacity:.35; background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:70px 70px; -webkit-mask-image:radial-gradient(circle at 50% 40%,#000,transparent 75%); mask-image:radial-gradient(circle at 50% 40%,#000,transparent 75%); } .hl-page-header .hl-container{position:relative;z-index:2;} .hl-page-title{color:#fff;margin-bottom:14px;max-width:900px;} .hl-breadcrumb{ display:flex;flex-wrap:wrap;align-items:center;gap:10px; font-size:14.5px;color:var(--hl-body-dark); } .hl-breadcrumb a{color:#fff;} .hl-breadcrumb a:hover{color:var(--hl-accent);} .hl-breadcrumb .sep{opacity:.45;} /* ============ 9. SECTIONS ============ */ .hl-section{padding:100px 0;position:relative;} .hl-section-sm{padding:70px 0;} .hl-section-lg{padding:130px 0;} .hl-section-soft{background:var(--hl-bg-soft);} .hl-section-dark{background:var(--hl-dark);color:var(--hl-body-dark);} .hl-section-dark h1,.hl-section-dark h2,.hl-section-dark h3, .hl-section-dark h4,.hl-section-dark h5,.hl-section-dark h6{color:#fff;} .hl-section-dark a{color:#fff;} .hl-section-dark a:hover{color:var(--hl-accent);} .hl-section-head{max-width:720px;margin:0 0 56px;} .hl-section-head.is-center{margin-left:auto;margin-right:auto;text-align:center;} .hl-section-head p{font-size:17px;} .hl-section-title{margin-bottom:16px;} /* Hero helper (untuk konten manual) */ .hl-hero{ position:relative;overflow:hidden;background:var(--hl-dark);color:var(--hl-body-dark); padding:calc(var(--hl-header-h) + 110px) 0 120px; } .hl-hero h1{color:#fff;} .hl-hero::before{ content:'';position:absolute;width:760px;height:760px;border-radius:50%; background:radial-gradient(circle,rgba(200,241,105,.18) 0%,transparent 66%); top:-320px;right:-220px;animation:hlFloat 9s ease-in-out infinite; } .hl-hero .hl-container{position:relative;z-index:2;} /* ============ 10. COMPONENTS ============ */ .hl-card{ background:#fff;border:1px solid var(--hl-border);border-radius:var(--hl-radius-lg); padding:34px;transition:var(--hl-transition);position:relative;overflow:hidden; } .hl-card:hover{transform:translateY(-8px);box-shadow:var(--hl-shadow);border-color:var(--hl-accent);} .hl-section-dark .hl-card{background:var(--hl-dark-2);border-color:var(--hl-border-dark);} .hl-section-dark .hl-card:hover{box-shadow:var(--hl-shadow-dark);} .hl-card h3,.hl-card h4{margin-bottom:12px;} .hl-icon-box{ width:64px;height:64px;border-radius:18px;display:flex;align-items:center;justify-content:center; background:var(--hl-accent-soft);color:var(--hl-heading);font-size:26px;margin-bottom:22px; transition:var(--hl-transition); } .hl-card:hover .hl-icon-box{background:var(--hl-accent);transform:rotate(-8deg);} .hl-section-dark .hl-icon-box{color:var(--hl-accent);} .hl-section-dark .hl-card:hover .hl-icon-box{color:var(--hl-dark);} /* Counter */ .hl-counter{font-family:var(--hl-font-heading);font-size:clamp(34px,4vw,54px);font-weight:800;color:var(--hl-heading);line-height:1;} .hl-section-dark .hl-counter{color:#fff;} .hl-counter-label{font-size:15px;margin-top:10px;} /* Accordion */ .hl-accordion-item{border:1px solid var(--hl-border);border-radius:var(--hl-radius-sm);margin-bottom:14px;overflow:hidden;background:#fff;transition:var(--hl-transition);} .hl-accordion-item.is-open{border-color:var(--hl-accent);box-shadow:var(--hl-shadow);} .hl-accordion-head{ width:100%;text-align:left;background:none;border:0;cursor:pointer; padding:22px 60px 22px 26px;position:relative; font-family:var(--hl-font-heading);font-weight:700;font-size:18px;color:var(--hl-heading); } .hl-accordion-head::after{ content:'+';position:absolute;right:24px;top:50%;transform:translateY(-50%); font-size:24px;font-weight:600;color:var(--hl-accent-2);transition:var(--hl-transition); } .hl-accordion-item.is-open .hl-accordion-head::after{content:'\2212';} .hl-accordion-body{max-height:0;overflow:hidden;transition:max-height .45s ease;} .hl-accordion-body-inner{padding:0 26px 24px;} .hl-section-dark .hl-accordion-item{background:var(--hl-dark-2);border-color:var(--hl-border-dark);} .hl-section-dark .hl-accordion-head{color:#fff;} /* Marquee */ .hl-marquee{overflow:hidden;white-space:nowrap;padding:22px 0;border-top:1px solid var(--hl-border-dark);border-bottom:1px solid var(--hl-border-dark);} .hl-marquee-track{display:inline-flex;gap:60px;align-items:center;animation:hlMarquee 26s linear infinite;} .hl-marquee:hover .hl-marquee-track{animation-play-state:paused;} .hl-marquee-item{font-family:var(--hl-font-heading);font-size:clamp(22px,3vw,38px);font-weight:800;color:#fff;letter-spacing:-.02em;display:inline-flex;align-items:center;gap:60px;} .hl-marquee-item::after{content:'';width:12px;height:12px;border-radius:50%;background:var(--hl-accent);} /* Back to top */ .hl-to-top{ position:fixed;right:26px;bottom:26px;width:50px;height:50px;border-radius:50%; background:var(--hl-accent);color:var(--hl-dark);border:0;cursor:pointer; display:flex;align-items:center;justify-content:center;font-size:20px; opacity:0;visibility:hidden;transform:translateY(16px);z-index:990; box-shadow:0 10px 30px rgba(11,13,16,.2);transition:var(--hl-transition); } .hl-to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0);} .hl-to-top:hover{background:var(--hl-dark);color:var(--hl-accent);} /* Preloader */ .hl-preloader{ position:fixed;inset:0;background:var(--hl-dark);z-index:9999; display:flex;align-items:center;justify-content:center;transition:opacity .5s ease,visibility .5s ease; } .hl-preloader.is-hidden{opacity:0;visibility:hidden;} .hl-preloader-ring{ width:52px;height:52px;border-radius:50%; border:3px solid rgba(255,255,255,.14);border-top-color:var(--hl-accent); animation:hlSpin .9s linear infinite; } /* ============ 11. BLOG ============ */ .hl-post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;} .hl-post-card{ background:#fff;border:1px solid var(--hl-border);border-radius:var(--hl-radius-lg); overflow:hidden;display:flex;flex-direction:column;transition:var(--hl-transition);height:100%; } .hl-post-card:hover{transform:translateY(-8px);box-shadow:var(--hl-shadow);border-color:var(--hl-accent);} .hl-post-thumb{position:relative;overflow:hidden;aspect-ratio:16/10;background:var(--hl-bg-soft);display:block;} .hl-post-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.25,.8,.25,1);} .hl-post-card:hover .hl-post-thumb img{transform:scale(1.07);} .hl-post-thumb-empty{ width:100%;height:100%;display:flex;align-items:center;justify-content:center; font-family:var(--hl-font-heading);font-weight:800;font-size:34px;color:rgba(11,13,16,.14); background:linear-gradient(135deg,var(--hl-bg-soft),#EDF3E2); } .hl-post-cat{ position:absolute;left:16px;top:16px;z-index:2; background:var(--hl-accent);color:var(--hl-dark)!important; font-family:var(--hl-font-heading);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; padding:7px 14px;border-radius:50px; } .hl-post-body{padding:26px 28px 30px;display:flex;flex-direction:column;flex:1;} .hl-post-meta{ display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px; font-size:13.5px;color:var(--hl-body);margin-bottom:14px; } .hl-post-meta span{display:inline-flex;align-items:center;gap:7px;} .hl-post-meta span::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--hl-accent-2);} .hl-post-title{font-size:21px;line-height:1.32;margin-bottom:12px;} .hl-post-title a{color:var(--hl-heading);background-image:linear-gradient(var(--hl-accent),var(--hl-accent));background-size:0 2px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .4s ease;} .hl-post-card:hover .hl-post-title a{background-size:100% 2px;} .hl-post-excerpt{font-size:15px;margin-bottom:20px;} .hl-post-more{ margin-top:auto;display:inline-flex;align-items:center;gap:9px; font-family:var(--hl-font-heading);font-weight:700;font-size:14.5px;color:var(--hl-heading); } .hl-post-more::after{content:'\2192';transition:transform .35s ease;} .hl-post-more:hover{color:var(--hl-accent-2);} .hl-post-more:hover::after{transform:translateX(6px);} .hl-section-dark .hl-post-card{background:var(--hl-dark-2);border-color:var(--hl-border-dark);} .hl-section-dark .hl-post-title a{color:#fff;} .hl-section-dark .hl-post-more{color:#fff;} .hl-section-dark .hl-post-excerpt,.hl-section-dark .hl-post-meta{color:var(--hl-body-dark);} /* Single post */ .hl-single{max-width:860px;margin:0 auto;} .hl-single-thumb{border-radius:var(--hl-radius-lg);overflow:hidden;margin-bottom:38px;} .hl-content{font-size:16.5px;} .hl-content > *:first-child{margin-top:0;} .hl-content h2{margin-top:44px;} .hl-content h3{margin-top:36px;} .hl-content ul,.hl-content ol{margin:0 0 20px;padding-left:22px;} .hl-content li{margin-bottom:9px;} .hl-content img{border-radius:var(--hl-radius-sm);} .hl-content a{color:var(--hl-accent-2);text-decoration:underline;text-underline-offset:3px;} .hl-content a:hover{color:var(--hl-heading);} .hl-entry-footer{margin-top:46px;padding-top:30px;border-top:1px solid var(--hl-border);display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center;} .hl-tags a{ display:inline-block;margin:0 6px 6px 0;padding:7px 16px;border-radius:50px; background:var(--hl-bg-soft);font-size:13.5px;font-weight:500;color:var(--hl-heading); } .hl-tags a:hover{background:var(--hl-accent);} .hl-post-nav{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:40px;} .hl-post-nav a{ display:block;padding:24px;border:1px solid var(--hl-border);border-radius:var(--hl-radius); transition:var(--hl-transition); } .hl-post-nav a:hover{border-color:var(--hl-accent);box-shadow:var(--hl-shadow);} .hl-post-nav small{display:block;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--hl-body);margin-bottom:8px;} .hl-post-nav strong{font-family:var(--hl-font-heading);font-size:17px;color:var(--hl-heading);} .hl-post-nav .next{text-align:right;} /* Pagination */ .hl-pagination{margin-top:60px;display:flex;justify-content:center;} .hl-pagination .page-numbers{ display:inline-flex;align-items:center;justify-content:center; min-width:46px;height:46px;padding:0 14px;margin:0 5px;border-radius:50px; border:1px solid var(--hl-border);background:#fff; font-family:var(--hl-font-heading);font-weight:600;font-size:15px;color:var(--hl-heading); transition:var(--hl-transition); } .hl-pagination .page-numbers:hover, .hl-pagination .page-numbers.current{background:var(--hl-accent);border-color:var(--hl-accent);color:var(--hl-dark);} .hl-pagination .dots{border:0;background:none;} /* Comments */ .hl-comments{margin-top:64px;padding-top:44px;border-top:1px solid var(--hl-border);} .hl-comments-title{margin-bottom:30px;} .comment-list{list-style:none;margin:0 0 40px;padding:0;} .comment-list ul.children{list-style:none;margin:0;padding-left:34px;} .comment-body{padding:24px;border:1px solid var(--hl-border);border-radius:var(--hl-radius);margin-bottom:18px;} .comment-author{display:flex;align-items:center;gap:12px;font-family:var(--hl-font-heading);font-weight:700;color:var(--hl-heading);margin-bottom:8px;} .comment-author img{border-radius:50%;} .comment-meta{font-size:13.5px;margin-bottom:10px;} .comment-reply-link{font-family:var(--hl-font-heading);font-weight:600;font-size:14px;color:var(--hl-accent-2);} .comment-form{display:grid;gap:18px;grid-template-columns:repeat(2,1fr);} .comment-form p{margin:0;} .comment-form .comment-form-comment, .comment-form .form-submit, .comment-form .comment-notes, .comment-form .comment-form-cookies-consent{grid-column:1/-1;} .comment-form label{display:block;font-size:14px;font-weight:500;margin-bottom:7px;color:var(--hl-heading);} /* Forms */ input[type="text"],input[type="email"],input[type="url"],input[type="tel"], input[type="password"],input[type="search"],input[type="number"],input[type="date"], select,textarea{ width:100%;padding:14px 18px;border:1px solid var(--hl-border);border-radius:var(--hl-radius-sm); background:#fff;color:var(--hl-heading);transition:var(--hl-transition); } input:focus,select:focus,textarea:focus{outline:0;border-color:var(--hl-accent);box-shadow:0 0 0 4px var(--hl-accent-soft);} textarea{min-height:150px;resize:vertical;} ::placeholder{color:#A6AEBA;} /* ============ 12. SIDEBAR & WIDGETS ============ */ .hl-sidebar .widget{ background:#fff;border:1px solid var(--hl-border);border-radius:var(--hl-radius); padding:28px;margin-bottom:28px; } .hl-sidebar .widget-title, .hl-sidebar .wp-block-heading{font-size:19px;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--hl-border);} .hl-sidebar ul{list-style:none;margin:0;padding:0;} .hl-sidebar li{padding:9px 0;border-bottom:1px dashed var(--hl-border);font-size:15px;} .hl-sidebar li:last-child{border-bottom:0;} .hl-search-form{display:flex;gap:10px;} .hl-search-form input[type="search"]{flex:1;} .hl-search-form button{padding:14px 20px;} /* ============ 13. FOOTER ============ */ .hl-footer{background:var(--hl-dark);color:var(--hl-body-dark);position:relative;overflow:hidden;} .hl-footer::before{ content:'';position:absolute;width:640px;height:640px;border-radius:50%; background:radial-gradient(circle,rgba(200,241,105,.10) 0%,transparent 70%); left:-240px;bottom:-320px; } .hl-footer .hl-container{position:relative;z-index:2;} .hl-footer-cta{ background:var(--hl-accent);border-radius:var(--hl-radius-lg); padding:54px 60px;margin-bottom:-90px;position:relative;z-index:3; display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:26px; box-shadow:0 22px 60px rgba(11,13,16,.16); } .hl-footer-cta h2{margin:0;max-width:640px;color:var(--hl-dark);font-size:clamp(26px,3vw,40px);} .hl-footer-cta p{margin:10px 0 0;color:rgba(11,13,16,.72);} .hl-footer-top{padding:150px 0 60px;} body.no-footer-cta .hl-footer-top{padding:90px 0 60px;} .hl-footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.3fr;gap:44px;} .hl-footer-widget h4, .hl-footer-widget .widget-title{ color:#fff;font-size:17px;margin-bottom:22px;position:relative;padding-bottom:14px; } .hl-footer-widget h4::after, .hl-footer-widget .widget-title::after{content:'';position:absolute;left:0;bottom:0;width:36px;height:2px;background:var(--hl-accent);} .hl-footer-widget ul{list-style:none;margin:0;padding:0;} .hl-footer-widget li{margin-bottom:12px;} .hl-footer-widget a{color:var(--hl-body-dark);font-size:15px;position:relative;display:inline-block;} .hl-footer-widget a:hover{color:var(--hl-accent);transform:translateX(4px);} .hl-footer-about p{font-size:15px;max-width:360px;} .hl-footer-logo{margin-bottom:22px;} .hl-footer-contact li{display:flex;gap:12px;align-items:flex-start;font-size:15px;} .hl-footer-contact li strong{color:#fff;font-family:var(--hl-font-heading);font-weight:600;} .hl-footer-hours-list li{display:flex;gap:10px;align-items:center;font-size:14.5px;color:var(--hl-body-dark);margin-bottom:8px;} .hl-footer-hours-list li:last-child{margin-bottom:0;} .hl-social{display:flex;gap:10px;margin-top:24px;} .hl-social a{ width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center; background:rgba(255,255,255,.06);border:1px solid var(--hl-border-dark);color:#fff;font-size:15px; } .hl-social a:hover{background:var(--hl-accent);color:var(--hl-dark);border-color:var(--hl-accent);transform:translateY(-4px);} .hl-footer-newsletter{display:flex;gap:10px;margin-top:18px;} .hl-footer-newsletter input{background:rgba(255,255,255,.05);border-color:var(--hl-border-dark);color:#fff;} .hl-footer-bottom{ border-top:1px solid var(--hl-border-dark);padding:26px 0; display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;font-size:14.5px; } .hl-footer-bottom a{color:#fff;} .hl-footer-bottom a:hover{color:var(--hl-accent);} .hl-footer-menu{display:flex;flex-wrap:wrap;gap:22px;list-style:none;margin:0;padding:0;} /* ============ 14. WP CORE ============ */ .alignleft{float:left;margin:8px 28px 22px 0;} .alignright{float:right;margin:8px 0 22px 28px;} .aligncenter{margin:22px auto;display:block;} .alignwide{max-width:1180px;margin-left:auto;margin-right:auto;} .alignfull{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);} .wp-caption{max-width:100%;} .wp-caption-text,.wp-element-caption{font-size:13.5px;text-align:center;margin-top:10px;color:var(--hl-body);} .sticky .hl-post-card{border-color:var(--hl-accent);} .screen-reader-text{ position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px); clip-path:inset(50%);white-space:nowrap; } .hl-skip-link:focus{ position:fixed;top:14px;left:14px;z-index:10000;background:var(--hl-accent); color:var(--hl-dark);padding:12px 20px;border-radius:8px;width:auto;height:auto;clip:auto;clip-path:none; } .hl-no-result{padding:60px;text-align:center;border:1px dashed var(--hl-border);border-radius:var(--hl-radius-lg);} /* ============ 15. ANIMATIONS ============ */ [data-hl-animate]{opacity:0;transition:opacity .85s cubic-bezier(.25,.8,.25,1),transform .85s cubic-bezier(.25,.8,.25,1);will-change:opacity,transform;} [data-hl-animate="fade-up"]{transform:translateY(46px);} [data-hl-animate="fade-down"]{transform:translateY(-46px);} [data-hl-animate="fade-left"]{transform:translateX(56px);} [data-hl-animate="fade-right"]{transform:translateX(-56px);} [data-hl-animate="zoom-in"]{transform:scale(.9);} [data-hl-animate="fade"]{transform:none;} [data-hl-animate].is-visible{opacity:1;transform:none;} @keyframes hlSlideDown{from{transform:translateY(-100%);}to{transform:translateY(0);}} @keyframes hlSpin{to{transform:rotate(360deg);}} @keyframes hlFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(34px);}} @keyframes hlMarquee{from{transform:translateX(0);}to{transform:translateX(-50%);}} @keyframes hlPulse{0%,100%{box-shadow:0 0 0 0 rgba(200,241,105,.45);}70%{box-shadow:0 0 0 18px rgba(200,241,105,0);}} .hl-pulse{animation:hlPulse 2.2s infinite;} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;} [data-hl-animate]{opacity:1;transform:none;} } /* ============ 16. RESPONSIVE ============ */ @media (max-width:1200px){ :root{--hl-container:1140px;} .hl-footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;} .hl-footer-grid > *:nth-child(5){grid-column:1/-1;} } @media (max-width:1024px){ .hl-nav,.hl-header-cta{display:none;} .hl-menu-toggle{display:flex;} .hl-section{padding:80px 0;} .hl-section-lg{padding:96px 0;} .hl-with-sidebar{grid-template-columns:1fr;} .hl-post-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .hl-col-4{grid-template-columns:repeat(2,minmax(0,1fr));} .hl-col-3{grid-template-columns:repeat(2,minmax(0,1fr));} .hl-footer-cta{padding:42px;} } @media (max-width:767px){ :root{--hl-header-h:78px;} body{font-size:15.5px;} .hl-section{padding:64px 0;} .hl-section-lg{padding:76px 0;} .hl-content-area{padding:56px 0 70px;} .hl-post-grid,.hl-col-2,.hl-col-3,.hl-col-4{grid-template-columns:1fr;} .hl-footer-grid{grid-template-columns:1fr;gap:34px;} .hl-footer-top{padding:130px 0 50px;} .hl-footer-cta{padding:34px 26px;text-align:center;justify-content:center;} .hl-post-nav,.comment-form{grid-template-columns:1fr;} .hl-post-nav .next{text-align:left;} .hl-page-header{padding:calc(var(--hl-header-h) + 56px) 0 62px;} .hl-hero{padding:calc(var(--hl-header-h) + 70px) 0 80px;} .hl-container-fluid{padding:0 20px;} .alignleft,.alignright{float:none;margin:22px 0;} } /* Conten Style */ /* ============================================================ */ /* HANAN LAND — CONSOLIDATED CSS */ /* Merged from all section