/* Theme Name: Karunia Land Theme URI: https://karunialand.com Author: PT. Karunia Land Description: Tema FSE (block theme) editorial-mewah untuk PT. Karunia Land — pengembang perumahan Sidoarjo bergaya Eropa Modern. Tipografi geometris (URW Gothic) berpadu serif, palet hangat, ringan & sepenuhnya dapat diedit lewat Site Editor. Version: 1.18.0 Requires at least: 6.6 Tested up to: 7.0 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: karunia-land Tags: full-site-editing, block-patterns, custom-colors, real-estate, editor-style */ /* ========================================================================= Fonts. The reference (Easto) uses URW Gothic L — a geometric sans. It's a GPL font (URW Base 35); drop urw-gothic.woff2 into assets/fonts/ to self-host. Otherwise the stack falls back to Century Gothic (Win/macOS) → Questrial → system. Serif body falls back to Georgia everywhere. No Google Fonts request. ========================================================================= */ @font-face { font-family:'URW Gothic L'; font-style:normal; font-weight:400 700; font-display:swap; src:url('assets/fonts/urw-gothic.woff2') format('woff2'); } @font-face { font-family:'Newsreader'; font-style:normal; font-weight:400 600; font-display:swap; src:url('assets/fonts/newsreader.woff2') format('woff2'); } @font-face { font-family:'Newsreader'; font-style:italic; font-weight:400 500; font-display:swap; src:url('assets/fonts/newsreader-italic.woff2') format('woff2'); } /* ========================================================================= Tokens ========================================================================= */ :root{ --paper:#F7F4EF; --paper-2:#FFFFFF; --sand:#EDE7DB; --heading:#8C7A64; --ink:#2A2620; --body:#4E473D; --muted:#948A7C; --gold:#C29A45; --gold-deep:#9C7A2C; --navy:#141C26; --line:rgba(42,38,32,.14); --line-strong:rgba(42,38,32,.24); --wrap:1240px; --wide:1400px; --radius:6px; --radius-lg:10px; --font-display:'URW Gothic L','URW Gothic','Century Gothic','Questrial','Jost',system-ui,sans-serif; --font-serif:'Newsreader','PT Serif','Iowan Old Style',Georgia,'Times New Roman',serif; --ease:cubic-bezier(.22,.61,.36,1); } /* ========================================================================= Base ========================================================================= */ html{scroll-behavior:smooth;} body{ background:var(--paper); color:var(--body); font-family:var(--font-serif); font-size:1.0625rem; line-height:1.75; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } h1,h2,h3,h4,h5,h6{ font-family:var(--font-display); color:var(--heading); font-weight:500; line-height:1.06; letter-spacing:-.005em; margin:0; } h1{font-size:clamp(3rem,7vw,5.5rem); font-weight:700;} h2{font-size:clamp(2.5rem,5.6vw,4.4rem); font-weight:700;} h3{font-size:clamp(1.7rem,2.9vw,2.5rem);} a{color:var(--gold-deep); text-decoration:none; transition:color .2s;} a:hover{color:var(--ink);} img{max-width:100%; height:auto; display:block;} /* kl_img() wraps every theme image in to offer AVIF then WebP. This keeps the wrapper out of the box tree entirely, so the existing descendant rules (.hero__bg img, .split__media img, …) — including the absolutely positioned covers — apply exactly as they did to a bare . */ picture{display:contents;} ::selection{background:var(--gold); color:#fff;} /* Layout primitives */ .wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:1.5rem;} .wrap.wrap--wide{max-width:var(--wide);} .section{padding-block:clamp(3.5rem,8vw,7.5rem); position:relative;} /* Full-bleed sections span the viewport; inner .wrap centres content. */ .site-main .wp-block-post-content > .alignfull, .site-main .wp-block-post-content > .section{margin-block:0;} .site-main .wp-block-post-content > :not(.alignfull):not(.section){margin-block:1rem;} /* Section colour variants */ .on-paper{background:var(--paper);} .on-white{background:var(--paper-2);} .on-sand{background:var(--sand);} /* Eyebrow / kicker — uppercase micro-label with a short rule beneath (Easto). */ .eyebrow{ display:block; font-family:var(--font-display); font-size:.78rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ink); margin:0 0 1.4rem; padding-bottom:.7rem; position:relative; width:fit-content; } .eyebrow::after{content:""; position:absolute; left:0; bottom:0; width:64px; height:2px; background:var(--gold);} .eyebrow--center{margin-inline:auto;} .eyebrow--center::after{left:50%; transform:translateX(-50%);} /* Lead / intro serif copy */ .lead{font-family:var(--font-serif); font-size:clamp(1.12rem,1.7vw,1.32rem); line-height:1.7; color:var(--body); max-width:56ch;} .muted{color:var(--muted);} .text-center{text-align:center;} .section__head{max-width:75ch; margin-bottom:clamp(2.5rem,5vw,4rem);} .section__head--center{margin-inline:auto; text-align:center;} .section__head h2{color:var(--heading);} /* Bottom breathing room under section titles */ .section__head h2{margin-bottom:1.4rem;} .split__col h2{margin-bottom:1.5rem;} /* Thin editorial divider */ .hairline{height:1px; border:0; margin:0; background:var(--line);} /* Micro-link: uppercase, letter-spaced, underline + arrow (Easto). */ .link-arrow{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-weight:600; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); padding-bottom:.35rem; border-bottom:1.5px solid var(--ink); transition:.25s var(--ease); } .link-arrow:hover{color:var(--gold-deep); border-color:var(--gold-deep);} .link-arrow svg{width:18px; height:18px; transition:transform .25s var(--ease);} .link-arrow:hover svg{transform:translateX(5px);} /* ========================================================================= Buttons — pill, uppercase letter-spaced (theme.json sets base colours) ========================================================================= */ .wp-block-buttons{gap:.9rem; flex-wrap:wrap; align-items:stretch;} .wp-block-button{display:flex;} /* stretch so paired buttons match height */ .wp-block-button__link{ font-family:var(--font-display); font-weight:600; font-size:.8rem; text-transform:uppercase; letter-spacing:.12em; padding:1.05em 1.9em; border-radius:999px; line-height:1; display:inline-flex; align-items:center; justify-content:center; gap:.55rem; transition:transform .25s var(--ease), background-color .25s, color .25s, box-shadow .25s; } .wp-block-button__link svg{width:1.35em; height:1.35em; flex:0 0 auto;} /* icon scales with text */ .btn-primary .wp-block-button__link{background:var(--ink); color:var(--paper);} .btn-primary .wp-block-button__link:hover{background:var(--gold-deep); color:#fff; transform:translateY(-2px);} .btn-ghost .wp-block-button__link{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line-strong);} .btn-ghost .wp-block-button__link:hover{box-shadow:inset 0 0 0 1.5px var(--ink); color:var(--ink); transform:translateY(-2px);} .btn-gold .wp-block-button__link{background:var(--gold); color:#fff;} .btn-gold .wp-block-button__link:hover{background:var(--gold-deep); transform:translateY(-2px);} .btn-wa .wp-block-button__link{background:#1FAF54; color:#fff;} .btn-wa .wp-block-button__link:hover{background:#178f44; transform:translateY(-2px);} .btn-ghost-light .wp-block-button__link{background:rgba(255,255,255,.06); color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5);} .btn-ghost-light .wp-block-button__link:hover{background:rgba(255,255,255,.14); box-shadow:inset 0 0 0 1.5px #fff; color:#fff; transform:translateY(-2px);} /* ========================================================================= Header — light, editorial. Solid bg (no filter/transform → overlay works). ========================================================================= */ /* Fixed (NOT sticky) on every page: body's overflow-x:hidden computes overflow-y to auto, which breaks position:sticky. Fixed sidesteps that entirely. */ .site-header{position:fixed; top:0; left:0; right:0; z-index:100; background:var(--navy); border-bottom:1px solid rgba(255,255,255,.1); transition:background-color .35s var(--ease), border-color .35s var(--ease);} /* Interior pages: the first section absorbs the fixed-header height into its OWN top padding, so its background fills up behind the header — no reserved cream strip that could peek out as a white gap. (home hero slides under it separately.) */ body:not(.home) .site-main .wp-block-post-content > .section:first-child{ padding-top:calc(var(--header-h, 64px) + clamp(2.5rem,5vw,4rem)) !important; } .site-header .bar{padding-block:.55rem; align-items:center;} .brand{display:inline-flex; align-items:center;} .brand__logo{height:46px; width:auto; display:block; object-fit:contain;} .header-nav-wrap{gap:clamp(2rem,4vw,3.5rem); align-items:center;} .header-cta{margin-left:.5rem;} /* Navigation block — force light text over the dark header (beats WP global-styles). */ .main-nav{font-family:var(--font-display); font-weight:500;} .site-header .main-nav .wp-block-navigation-item__content, .site-header .main-nav .wp-block-navigation-item__content a, .site-header .main-nav a.wp-block-navigation-item__content{ color:rgba(255,255,255,.88) !important; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; padding:.4rem 0; transition:color .2s; } .site-header .main-nav .wp-block-navigation-item__content:hover, .site-header .main-nav .wp-block-navigation-item:hover .wp-block-navigation-item__content{color:var(--gold-soft,#E4C778) !important;} .main-nav .wp-block-navigation__container{gap:2rem;} .site-header .main-nav .wp-block-navigation__responsive-container-open, .site-header .main-nav .wp-block-navigation__responsive-container-close{color:#fff !important;} /* Homepage only: the header floats TRANSPARENTLY over the dark hero, then turns solid navy once the hero scrolls past it (JS toggles .is-solid). Other pages keep the default solid sticky bar sitting above the content. */ .home .site-header{background:transparent; border-bottom-color:transparent;} .home .site-header.is-solid{background:var(--navy); border-bottom-color:rgba(255,255,255,.1);} /* Push the hero copy just clear of the overlaid header. Zero the section's own top padding so it doesn't stack on top of this (was ~120px extra → big empty gap). */ .home .hero{padding-block-start:0;} .home .hero .wrap{padding-top:calc(var(--header-h, 64px) + clamp(2.5rem,5vw,4rem));} /* ========================================================================= Hero — centred, warm, geometric headline + serif italic subcopy (Easto) ========================================================================= */ .hero{position:relative; text-align:center; overflow:hidden; isolation:isolate; border-bottom:3px solid var(--gold);} .hero__bg{position:absolute; inset:0; z-index:-2;} .hero__bg img{width:100%; height:100%; object-fit:cover;} .hero::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(9,14,21,.68) 0%, rgba(9,14,21,.5) 42%, rgba(9,14,21,.82) 100%);} .hero .wrap{padding-block:clamp(5.5rem,0,11rem); max-width:1120px;} .hero .eyebrow{margin-inline:auto; color:#fff; text-align:center;} .hero .eyebrow::after{background:var(--gold); left:50%; transform:translateX(-50%);} .hero h1{color:#fff; margin:0 0 1.7rem; font-size:clamp(3.2rem,8.4vw,7rem); font-weight:700; line-height:.98; letter-spacing:-.02em;} .hero__sub{font-family:var(--font-serif); font-style:italic; font-size:clamp(1.2rem,2.2vw,1.6rem); color:rgba(255,255,255,.92); max-width:46ch; margin:0 auto 2.6rem;} .hero__cta{justify-content:center; margin-bottom:3.2rem;} .hero__stats{display:grid; grid-template-columns:repeat(3,auto); gap:clamp(1.5rem,5vw,4rem); justify-content:center; border-top:1px solid rgba(255,255,255,.28); padding-top:2.2rem; max-width:720px; margin-inline:auto;} .stat__num{font-family:var(--font-display); font-weight:500; font-size:clamp(2rem,3.8vw,3rem); color:#fff; line-height:1;} .stat__label{font-family:var(--font-display); font-size:.72rem; color:rgba(255,255,255,.72); margin-top:.55rem; text-transform:uppercase; letter-spacing:.14em;} /* ========================================================================= Fade band — background photo fading into a solid navy panel that holds copy ========================================================================= */ .fade-band{position:relative; overflow:hidden; isolation:isolate; background:var(--navy);} .fade-band__bg{position:absolute; inset:0; z-index:-2;} .fade-band__bg img{width:100%; height:100%; object-fit:cover;} /* Solid navy on the left → transparent over the photo on the right. */ .fade-band::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, var(--navy) 0%, var(--navy) 30%, rgba(20,28,38,.72) 52%, rgba(20,28,38,.18) 78%, rgba(20,28,38,0) 100%);} .fade-band .wrap{padding-block:0;} .fade-band__inner{max-width:540px; color:#fff; padding-block:clamp(3.25rem,0,5rem);} .fade-band__inner .eyebrow{color:#fff;} .fade-band__inner .eyebrow::after{background:var(--gold);} .fade-band__inner h2{color:#fff; margin:0 0 1.4rem;} .fade-band__sub{font-family:var(--font-serif); font-size:clamp(1.05rem,1.7vw,1.28rem); color:rgba(255,255,255,.9); line-height:1.7; margin:0 0 2rem; max-width:44ch;} @media (max-width:820px){ /* Photo on top fading down into the solid navy that holds the copy. */ .fade-band::after{background:linear-gradient(180deg, rgba(20,28,38,.12) 0%, rgba(20,28,38,.55) 34%, var(--navy) 72%, var(--navy) 100%);} .fade-band__inner{max-width:none; padding-block:clamp(9rem,38vw,12rem) clamp(2.5rem,7vw,3.5rem);} } /* ========================================================================= About page (Tentang Kami) — page hero, breadcrumb, visi statement, stat band ========================================================================= */ /* About hero — LIGHT editorial split (deliberately unlike the dark home hero). */ .about-hero{background:var(--sand); overflow:hidden; padding-block:clamp(2.75rem,5vw,4.25rem);} .about-hero__grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2.5rem,6vw,5rem); align-items:stretch;} .about-hero__text{align-self:center; padding-block:clamp(1rem,2vw,2rem);} .about-hero h1{color:var(--ink); font-size:clamp(2.5rem,5.4vw,4.4rem); line-height:1.03; margin:0 0 1.5rem;} .about-hero__sub{font-family:var(--font-serif); font-size:clamp(1.08rem,1.6vw,1.3rem); line-height:1.7; color:var(--body); max-width:46ch; margin:0;} .about-hero__media{position:relative; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); min-height:420px;} .about-hero__media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;} .about-hero__badge{position:absolute; left:1.1rem; bottom:1.1rem; background:var(--navy); padding:.85rem 1.15rem; border-radius:8px;} .about-hero__badge b{display:block; font-family:var(--font-display); font-weight:700; font-size:1.55rem; line-height:1; color:var(--gold-soft,#E4C778);} .about-hero__badge span{display:block; margin-top:.2rem; font-family:var(--font-display); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.82);} /* Breadcrumb — dark-on-light variant for the about hero. */ .crumb{display:flex; gap:.7rem; align-items:center; margin:0 0 1.5rem; font-family:var(--font-display); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);} .crumb a{color:var(--muted); transition:color .2s;} .crumb a:hover{color:var(--gold-deep);} .crumb span[aria-hidden]{color:var(--gold);} @media (max-width:820px){ .about-hero__grid{grid-template-columns:1fr; gap:2rem;} .about-hero__text{padding-block:0;} .about-hero__media{min-height:0; aspect-ratio:5/4; order:-1;} } /* Story — bespoke editorial layout: title + (photo | big stat) left, prose right. */ .story-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,5.5rem);} .story__head h2{margin:1rem 0 0;} .story__feature{display:flex; align-items:center; gap:clamp(1.4rem,3vw,2.4rem); margin-top:clamp(2.2rem,4.5vw,3.4rem);} .story__img{flex:0 0 auto; width:clamp(130px,17vw,210px); aspect-ratio:3/4; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line);} .story__img img{width:100%; height:100%; object-fit:cover;} .story__stat{display:flex; align-items:flex-start; gap:.7rem;} .story__statnum{font-family:var(--font-display); font-weight:700; line-height:.82; letter-spacing:-.02em; color:var(--heading); font-size:clamp(3.4rem,6.5vw,5.5rem);} .story__statnum sup{font-size:.42em; font-weight:700; top:-.15em;} .story__statlabel{font-family:var(--font-display); font-weight:600; font-size:.8rem; line-height:1.35; letter-spacing:.14em; text-transform:uppercase; color:var(--body); padding-top:.35em;} .story__col--right{display:flex; flex-direction:column;} .story__col--right p{margin:0 0 1.4rem; max-width:52ch;} .story__link{margin-top:auto; align-self:flex-end;} @media (max-width:820px){ .story-grid{grid-template-columns:1fr; gap:2.2rem;} .story__link{align-self:flex-start; margin-top:.5rem;} } /* Very narrow: the photo + big "16+" stat row can exceed the column — shrink it and let it wrap rather than push the page into horizontal overflow. */ @media (max-width:440px){ .story__feature{flex-wrap:wrap; gap:1.1rem 1.4rem;} .story__img{width:clamp(88px,26vw,120px);} .story__statnum{font-size:clamp(2.6rem,11vw,3.6rem);} } /* Visi — oversized editorial statement above the Misi grid. */ .visi-statement{max-width:960px; margin:0 auto clamp(2.8rem,6vw,4.5rem); text-align:center;} .visi-statement .eyebrow{margin-inline:auto; color:var(--heading);} .visi-statement .eyebrow::after{left:50%; transform:translateX(-50%);} .visi-statement h2{font-family:var(--font-serif); font-weight:500; font-style:italic; text-transform:none; font-size:clamp(1.5rem,3vw,2.35rem); line-height:1.42; letter-spacing:0; color:var(--ink); margin:0;} /* Milestones — big OUTLINED numeral with the label STACKED beneath it (centred), and dividers centred in the gaps between items. Stacked rather than overlaid so longer Indonesian labels never collide with or clip over the numeral. */ .stat-band{--sb-gap:clamp(1.25rem,3vw,2.5rem); display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sb-gap);} .stat-band__item{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:.55rem; text-align:center; padding-inline:.4rem; min-height:clamp(4rem,8vw,6rem);} /* Divider sits at the mid-point of the gap (half-gap past the cell edge). */ .stat-band__item:not(:last-child)::after{content:""; position:absolute; right:calc(var(--sb-gap) / -2); top:12%; bottom:12%; width:1px; background:var(--line-strong);} .stat-band__num{font-family:var(--font-display); font-weight:700; line-height:.85; letter-spacing:-.03em; font-size:clamp(2.6rem,5.6vw,5rem); color:transparent; -webkit-text-stroke:1.3px var(--heading);} .stat-band__label{max-width:14ch; font-family:var(--font-display); font-weight:600; font-size:.78rem; line-height:1.35; letter-spacing:.06em; color:var(--body);} /* Award seal (shield) inside the Penghargaan fade band. */ .award-seal{display:inline-flex; align-items:center; justify-content:center; width:4rem; height:4rem; border-radius:50%; border:1px solid rgba(194,154,69,.5); color:var(--gold-soft,#E4C778); margin-bottom:1.6rem;} @media (max-width:820px){ .stat-band{grid-template-columns:1fr 1fr; gap:2.4rem 1.5rem;} .stat-band__item:nth-child(2)::after{display:none;} } @media (max-width:460px){ .stat-band{grid-template-columns:1fr;} .stat-band__item::after{display:none;} } /* ========================================================================= Split (editorial: text + media), thin rule ========================================================================= */ .split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,5.5rem); align-items:center;} .split__col > :first-child{margin-top:0;} .split__col p{margin:0 0 1.1rem;} .split__media{ border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/3; background:linear-gradient(135deg,var(--sand),#dcd3c4); position:relative; border:1px solid var(--line); } .split__media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;} .split__media::after{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, transparent 48%, rgba(9,14,21,.62));} .media-note{position:absolute; left:1.6rem; bottom:1.4rem; z-index:2; font-family:var(--font-display); color:#fff;} .media-note b{display:block; color:var(--gold-soft,#E4C778); font-size:1.35rem; font-weight:600;} .media-note span{font-size:.85rem; color:rgba(255,255,255,.85);} /* ========================================================================= Card grids ========================================================================= */ .grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.5rem,3vw,2.4rem);} .grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:0;} .grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:0;} /* Feature cells — bordered editorial grid (thin rules, Easto). */ .grid-3 > .card, .grid-4 > .card{ background:transparent; border:1px solid var(--line); margin:-0.5px; padding:2.4rem 2rem; transition:background-color .3s, transform .3s; } .grid-3 > .card:hover, .grid-4 > .card:hover{background:var(--paper-2);} .card h3,.card h4{color:var(--ink); margin:.2rem 0 .6rem; font-size:1.35rem;} .card p{margin:0; color:var(--body);} .card__icon{width:54px; height:54px; border-radius:50%; display:grid; place-items:center; margin-bottom:1.4rem; color:var(--gold-deep); border:1px solid var(--gold);} .card__icon svg{width:24px; height:24px;} /* Project cards — image + body + micro-link (with soft border/shadow) */ .project-card{padding:0 !important; background:var(--paper-2) !important; border:1px solid var(--line) !important; border-radius:var(--radius-lg); overflow:hidden; margin:0 !important; transition:transform .3s var(--ease), box-shadow .3s;} .project-card:hover{transform:translateY(-5px); box-shadow:0 26px 50px -30px rgba(42,38,32,.4);} .project-card__media{aspect-ratio:16/10; position:relative; overflow:hidden; background:linear-gradient(135deg,var(--sand),#d6ccbb); border-bottom:1px solid var(--line);} .project-card__media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease);} .project-card:hover .project-card__media img{transform:scale(1.05);} .project-card__badge{position:absolute; top:1.1rem; left:1.1rem; z-index:1; font-family:var(--font-display); font-size:.68rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); background:rgba(247,244,239,.9); border:1px solid var(--line); padding:.45rem .9rem; border-radius:999px;} .project-card__body{padding:2rem;} .project-card__body h3{margin:0 0 .6rem; color:var(--ink);} .project-card__body > p{color:var(--body);} .project-card__meta{display:flex; gap:2rem; margin:1.4rem 0; padding:1.2rem 0; border-block:1px solid var(--line); flex-wrap:wrap;} .project-card__meta span{font-family:var(--font-display); font-size:.78rem; color:var(--muted); text-transform:uppercase; letter-spacing:.1em;} .project-card__meta b{display:block; color:var(--ink); font-family:var(--font-display); font-size:1.15rem; font-weight:500; letter-spacing:0; text-transform:none; margin-top:.3rem;} /* House-type cells — 5 verified types, bordered editorial grid */ .type-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:0;} .type-grid > .card{background:transparent; border:1px solid var(--line); margin:-0.5px; padding:2rem 1.6rem; transition:background-color .3s;} .type-grid > .card:hover{background:var(--paper-2);} .type-card{text-align:left;} .type-card .type__project{font-family:var(--font-display); font-size:.66rem; color:var(--muted); text-transform:uppercase; letter-spacing:.14em; margin-bottom:.7rem;} .type-card .type__name{font-family:var(--font-display); color:var(--ink); font-size:1.6rem; font-weight:700;} .type-card .type__size{margin-top:1.4rem; display:flex; flex-direction:column; gap:.35rem;} .type-card .type__size span{font-family:var(--font-display); font-size:1.05rem; color:var(--ink);} .type-card .type__size b{color:var(--gold-deep); font-weight:600; font-size:.72rem; letter-spacing:.1em; margin-right:.35rem;} /* Mini trust stats (konsep) */ .mini-stats{display:flex; gap:2rem; flex-wrap:wrap; margin:1.8rem 0;} .mini-stats > div{border-left:2px solid var(--gold); padding-left:1rem;} .mini-stats b{display:block; font-family:var(--font-display); font-weight:700; font-size:1.6rem; color:var(--ink); line-height:1;} .mini-stats span{font-family:var(--font-display); font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.1em;} /* Location list */ .loc-list{list-style:none; margin:1.8rem 0 0; padding:0; display:grid; gap:0;} .loc-list li{display:flex; align-items:center; gap:1rem; padding:1.15rem 0; border-bottom:1px solid var(--line); color:var(--body); font-family:var(--font-serif);} .loc-list li:first-child{border-top:1px solid var(--line);} .loc-list li svg{width:22px; height:22px; color:var(--gold-deep); flex:0 0 auto;} .loc-list b{color:var(--ink); font-family:var(--font-display); font-weight:500;} .map-embed{border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line);} .map-embed iframe{display:block; width:100%; height:100%; min-height:400px; border:0;} /* Map facade — the click-to-load stand-in for the Google Maps embed (see kl_map_facade() in inc/build.php). Keeps ~2.4MB of third-party script off the page until a visitor asks for the map. It fills the same box the iframe would, so swapping the two in causes no layout shift. */ .map-facade{position:relative; background:var(--sand); min-height:400px;} .map-facade__load{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.9rem; position:absolute; inset:0; width:100%; padding:2rem; text-align:center; cursor:pointer; background:none; border:0; color:var(--body); font:inherit;} .map-facade__load svg{color:var(--gold-deep);} .map-facade__addr{max-width:34ch; font-size:.95rem; line-height:1.55;} .map-facade__cta{font-family:var(--font-display); font-weight:500; letter-spacing:.04em; text-transform:uppercase; font-size:.82rem; color:var(--ink); border-bottom:1px solid var(--gold); padding-bottom:.2rem;} .map-facade__load:hover .map-facade__cta, .map-facade__load:focus-visible .map-facade__cta{color:var(--gold-deep);} .map-facade__fallback{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;} .map-facade.is-loaded{background:none;} .cmap.map-facade{min-height:0;} /* .cmap already sets an explicit height. */ /* Finance / partner strip — muted grayscale row (Manoir) */ .marquee{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);} .marquee__track{display:flex; gap:4rem; width:max-content; align-items:center; animation:kl-marquee 34s linear infinite;} .marquee__track span{font-family:var(--font-display); font-weight:500; font-size:1.5rem; color:var(--muted); opacity:.7; white-space:nowrap; letter-spacing:.02em;} /* Real partner logos in the KPR marquee — white chips, ~5 visible per view */ .marquee__track--logos{gap:clamp(1rem,1.6vw,1.75rem); align-items:stretch;} .marquee__logo{ box-sizing:border-box; flex:0 0 auto; width:calc(10vw - 1.4rem); min-width:150px; max-width:250px; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid var(--line); border-radius:10px; padding:.7rem 1rem; box-shadow:0 12px 30px -26px rgba(42,38,32,.55); transition:transform .3s var(--ease), box-shadow .3s; } .marquee__logo:hover{transform:translateY(-4px); box-shadow:0 18px 36px -24px rgba(42,38,32,.5);} .marquee__logo img{height:auto; max-height:38px; width:auto; max-width:100%; opacity:.85; transition:opacity .3s;} .marquee__logo:hover img{opacity:1;} @keyframes kl-marquee{to{transform:translateX(-50%);}} .marquee:hover .marquee__track{animation-play-state:paused;} /* Testimonials — 2-row infinite marquee, opposite directions */ .t-marquee{display:flex; flex-direction:column; gap:1.6rem; overflow:hidden; padding:clamp(2.5rem,5vw,4rem) 0 .5rem; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);} .t-row{display:flex; gap:1.6rem; width:max-content; will-change:transform; animation:t-marquee var(--t-dur,52s) linear infinite;} .t-row--ltr{animation-direction:reverse;} /* items drift left → right */ .t-row--rtl{animation-direction:normal;} /* items drift right → left */ @keyframes t-marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}} .t-marquee:hover .t-row{animation-play-state:paused;} .tcard{flex:0 0 auto; width:min(88vw,420px); margin:0; background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius-lg); padding:1.9rem 1.8rem;} .tcard__stars{display:flex; gap:.15rem; color:var(--gold); margin-bottom:1rem;} .tcard blockquote{margin:0; font-family:var(--font-serif); font-size:1.05rem; font-style:italic; color:var(--ink); line-height:1.65;} .tcard figcaption{display:flex; align-items:center; gap:.9rem; margin-top:1.4rem;} .tcard__avatar{width:44px; height:44px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center; background:var(--sand); color:var(--gold-deep); font-family:var(--font-display); font-weight:700; font-size:1.1rem; border:1px solid var(--gold);} .tcard__who b{display:block; font-family:var(--font-display); color:var(--ink); font-weight:600; font-size:.95rem;} .tcard__who small{color:var(--muted); font-family:var(--font-serif); font-style:italic; font-size:.85rem;} /* Character-reveal for large titles — masked counter/odometer slide (clipped top & bottom). JS-enhanced; SEO-safe — real text stays as the heading aria-label. */ .kl-title .kl-word{display:inline-block; white-space:nowrap; vertical-align:top;} .kl-title .kl-char{display:inline-block; overflow:hidden; vertical-align:top; line-height:inherit;} .kl-title .kl-char__inner{display:inline-block; transform:translateY(115%); transition:transform .6s var(--ease); will-change:transform;} .kl-title.is-in .kl-char__inner{transform:translateY(0);} /* CTA band — warm sand */ .cta-band{background:linear-gradient(180deg,var(--sand),#e4dccb); text-align:center; border-block:1px solid var(--line);} .cta-band h2{color:var(--heading); margin:0 0 1.2rem;} .cta-band .lead{margin:0 auto 2.4rem;} .cta-band .wp-block-buttons{justify-content:center;} /* ========================================================================= Contact page — team-first (dark hero → agent grid → offices → map) ========================================================================= */ /* Hero — dark navy band, distinct from the light interior pages. */ .contact-hero{background:var(--navy); color:#fff; position:relative; overflow:hidden;} .contact-hero::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(ellipse 70% 60% at 50% 0%, rgba(194,154,69,.18), transparent 70%);} .contact-hero__inner{position:relative; z-index:1; max-width:62ch; margin-inline:auto; text-align:center;} .contact-hero .eyebrow{color:#fff; margin-inline:auto;} .contact-hero .eyebrow::after{background:var(--gold);} .contact-hero h1{color:#fff; font-size:clamp(2rem,4.6vw,3.4rem); line-height:1.08; margin:.6rem 0 1rem; max-width:20ch; margin-inline:auto;} .contact-hero .lead{color:rgba(255,255,255,.82); margin:0 auto 2.2rem; max-width:58ch;} .contact-hero .wp-block-buttons{justify-content:center; margin-bottom:clamp(2rem,4vw,3rem);} .contact-hero__stats{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(1.2rem,4vw,3.2rem);} .contact-hero__stats li{position:relative; padding-right:clamp(1.2rem,4vw,3.2rem);} .contact-hero__stats li:not(:last-child)::after{content:""; position:absolute; right:0; top:50%; transform:translateY(-50%); width:1px; height:2.4em; background:rgba(255,255,255,.18);} .contact-hero__stats b{display:block; font-family:var(--font-display); font-weight:700; font-size:clamp(1.6rem,3vw,2.2rem); line-height:1; color:var(--gold-soft,#E4C778);} .contact-hero__stats span{display:block; margin-top:.35rem; font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; color:rgba(255,255,255,.6);} /* Desktop: force all three stats onto one row — break out of the 62ch inner width and re-centre, so "Cepat" never drops below the other two. */ @media (min-width:821px){ .contact-hero__stats{flex-wrap:nowrap; width:max-content; max-width:none; margin-left:50%; transform:translateX(-50%);} .contact-hero__stats li{white-space:nowrap;} } /* Mobile: stats wrap 2 + 1, so the 2nd item ends its row — drop its divider. */ @media (max-width:820px){ .contact-hero__stats li:nth-child(2)::after{display:none;} .contact-hero__stats li:nth-child(2){padding-right:0;} } /* Tim Marketing — photo cards; grayscale → colour + shimmer + lift on hover. */ .cteam__grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:clamp(1rem,2vw,1.5rem);} .cagent{display:flex; flex-direction:column; background:var(--paper-2); border:1px solid var(--line); border-radius:14px; overflow:hidden; text-decoration:none; box-shadow:0 16px 36px -28px rgba(20,28,38,.5); transition:transform .4s var(--ease), box-shadow .4s var(--ease);} .cagent:hover{transform:translateY(-6px); box-shadow:0 34px 66px -34px rgba(20,28,38,.55);} .cagent__photo{position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--navy);} .cagent__mono{position:absolute; inset:0; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:2.6rem; letter-spacing:.05em; color:rgba(255,255,255,.22);} .cagent__photo img{position:relative; z-index:1; width:100%; height:100%; object-fit:cover; object-position:top center; transition:filter .5s var(--ease), transform .6s var(--ease);} .cagent__shine{position:absolute; inset:0; z-index:2; pointer-events:none; transform:translateX(-130%); background:linear-gradient(120deg, transparent 34%, rgba(255,255,255,.45) 50%, transparent 66%);} .cagent__body{padding:1rem 1.1rem 1.2rem; display:flex; flex-direction:column; text-align:left;} .cagent__name{font-family:var(--font-display); font-weight:700; font-size:1.18rem; color:var(--ink); line-height:1.15;} .cagent__role{margin-top:.2rem; font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; color:var(--gold-deep); font-weight:600;} .cagent__wa{margin-top:.35rem; font-family:var(--font-serif); font-size:.9rem; color:var(--muted);} .cagent__cta{margin-top:1rem; display:inline-flex; align-items:center; justify-content:center; gap:.4rem; background:#1FAF54; color:#fff; border-radius:999px; padding:.6rem 1rem; font-weight:600; font-size:.85rem; transition:background .3s;} .cagent__cta svg{flex:none;} .cagent:hover .cagent__cta{background:#178f44;} @media (hover:hover){ .cagent__photo img{filter:grayscale(1) contrast(1.02);} .cagent:hover .cagent__photo img{filter:grayscale(0); transform:scale(1.05);} .cagent:hover .cagent__shine{animation:cShine .9s var(--ease);} } @keyframes cShine{from{transform:translateX(-130%);} to{transform:translateX(130%);}} /* Marketing Gallery & Kantor — office cards + contact/social row. */ .coffice__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,2.5vw,1.8rem);} .coffice{display:flex; flex-direction:column; background:var(--paper-2); border:1px solid var(--line); border-radius:14px; padding:clamp(1.5rem,3vw,2rem);} .coffice__icon{width:46px; height:46px; display:grid; place-items:center; border-radius:12px; background:rgba(194,154,69,.14); color:var(--gold-deep); margin-bottom:1.1rem;} .coffice__tag{font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; color:var(--gold-deep); font-weight:600; margin-bottom:.5rem;} .coffice__name{font-family:var(--font-display); font-weight:700; font-size:1.12rem; color:var(--ink); line-height:1.25; margin-bottom:.6rem;} .coffice__addr{margin:0 0 1.3rem; font-family:var(--font-serif); font-size:.92rem; line-height:1.6; color:var(--body);} .coffice__map{margin-top:auto;} .contact-row{margin-top:clamp(1.8rem,3.5vw,2.6rem); padding-top:clamp(1.5rem,3vw,2.1rem); border-top:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:center; gap:1.1rem 2.4rem;} .contact-row__item{display:flex; align-items:center; gap:.7rem; color:var(--body); font-family:var(--font-serif);} .contact-row__item svg{color:var(--gold-deep); flex:none;} .contact-row__item b{display:block; font-family:var(--font-display); font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink); font-weight:600;} .contact-row a.contact-row__item:hover{color:var(--gold-deep);} .contact-row__social{margin-left:auto; display:flex; gap:.6rem;} .contact-row__social a{width:42px; height:42px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--line-strong); color:var(--ink); transition:background-color .3s, color .3s, border-color .3s, transform .3s;} .contact-row__social a:hover{background:var(--navy); color:#fff; border-color:var(--navy); transform:translateY(-2px);} @media (max-width:820px){ .coffice__grid{grid-template-columns:1fr;} } @media (max-width:600px){ .contact-row__social{margin-left:0;} } /* Full-bleed map. */ .contact-map{padding:0 !important;} .cmap{position:relative; width:100%; height:clamp(360px,50vh,520px);} .cmap iframe{position:absolute; inset:0; width:100%; height:100%; border:0;} @media (prefers-reduced-motion:reduce){ .cagent, .cagent__photo img{transition:none;} .cagent:hover{transform:none;} .cagent:hover .cagent__photo img{transform:none;} .cagent:hover .cagent__shine{animation:none;} } /* ========================================================================= Footer — dark, grounding ========================================================================= */ .site-footer{background:var(--navy); color:#c9c3b8; border-top:3px solid var(--gold);} .site-footer .wrap{padding-block:clamp(3.5rem,7vw,5.5rem);} .footer-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:3rem;} .site-footer p{color:#9a9384;} .site-footer .brand,.site-footer .brand small{color:#fff;} .site-footer .brand__logo{height:60px;} .site-footer .brand small{color:var(--gold);} .site-footer h4{font-family:var(--font-display); font-size:.75rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin:0 0 1.2rem; font-weight:600;} .footer-links{list-style:none; margin:0; padding:0; display:grid; gap:.75rem;} .footer-links a{color:#c9c3b8; font-family:var(--font-serif); font-size:.98rem;} .footer-links a:hover{color:var(--gold);} .footer-social{display:flex; gap:.8rem; margin-top:1.4rem;} .footer-social a{width:42px; height:42px; border-radius:50%; display:grid; place-items:center; color:#c9c3b8; border:1px solid rgba(255,255,255,.16); transition:.2s;} .footer-social a:hover{color:var(--navy); background:var(--gold); border-color:var(--gold); transform:translateY(-2px);} .footer-social svg{width:20px; height:20px;} .footer-bottom{border-top:1px solid rgba(255,255,255,.12); margin-top:3rem; padding-top:1.6rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; color:#8a8474; font-family:var(--font-display); font-size:.75rem; letter-spacing:.06em; text-transform:uppercase;} /* ========================================================================= Reveal-on-scroll ========================================================================= */ .js .reveal{opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease);} .js .reveal.is-in{opacity:1; transform:none;} /* ========================================================================= Responsive ========================================================================= */ @media (max-width:992px){ .grid-4{grid-template-columns:repeat(2,1fr);} .footer-grid{grid-template-columns:1fr 1fr;} .site-header .header-cta{display:none !important;} } @media (max-width:820px){ .split{grid-template-columns:1fr;} .split--rev .split__col:first-child{order:2;} .grid-3{grid-template-columns:1fr 1fr;} .contact-grid{grid-template-columns:1fr;} .footer-bottom{flex-direction:column;} } @media (max-width:640px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;} .footer-grid{grid-template-columns:1fr;} .hero__stats{grid-template-columns:1fr 1fr; gap:1.7rem 1.2rem;} .hero__stats > .stat:first-child{grid-column:1 / -1; padding-bottom:1.5rem; border-bottom:1px solid rgba(255,255,255,.18);} } /* ========================================================================= Navigation block: raise collapse breakpoint + style the mobile overlay. ========================================================================= */ /* Raise the collapse breakpoint to ~992px and let WordPress own the open/close toggle (its Interactivity runtime is finicky — driving it from JS hangs the menu). The overlay just gets styled; WP handles show/hide via display. */ @media (max-width:991.98px){ .main-nav .wp-block-navigation__responsive-container-open{display:flex !important;} .main-nav .wp-block-navigation__responsive-container-close{display:flex !important;} .main-nav .wp-block-navigation__responsive-container:not(.is-menu-open){display:none !important;} } /* The close (X) belongs to the overlay only, never the desktop bar. */ @media (min-width:992px){ .main-nav .wp-block-navigation__responsive-container-close{display:none !important;} } /* Full-screen overlay when open: solid navy so the light-on-dark menu stays legible. */ .site-header .main-nav .wp-block-navigation__responsive-container.is-menu-open{ background-color:var(--navy) !important; background-image:radial-gradient(120% 75% at 100% 0%, rgba(194,154,69,.16), transparent 58%) !important; padding:0; } /* The mobile-only CTA link is hidden in the desktop bar (the gold button covers it). */ .main-nav .wp-block-navigation-item.nav-cta-mobile{display:none;} .site-header .main-nav .is-menu-open .wp-block-navigation__responsive-container-content{ width:100%; padding:5.75rem 1.9rem 2.5rem !important; } /* "Menu" eyebrow above the list (left-aligned so it clears the close button). */ .main-nav .is-menu-open .wp-block-navigation__responsive-container-content::before{ content:"Menu"; display:block; text-align:left; font-family:var(--font-display); font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); padding-bottom:1.4rem; margin-bottom:.4rem; border-bottom:1px solid rgba(255,255,255,.12); } .main-nav .is-menu-open .wp-block-navigation__container{ counter-reset:navitem; flex-direction:column; width:100%; gap:0 !important; align-items:stretch !important; justify-content:flex-start !important; } /* ⚠ Every rule from here to the CTA is scoped with `>` to DIRECT children of the overlay's list. It used to be a descendant selector, which also matched the two items inside the Proyek submenu — so they incremented the `navitem` counter (top-level numbering skipped 03 and 04), fired the nth-child entrance animation, and rendered at the 1.7rem top-level size that made "Prima Garden Estate" wrap onto a second line. */ .main-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item{ width:100%; margin:0; opacity:0; transform:translateY(14px); animation:kl-nav-in .55s var(--ease) forwards; } .main-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(1){animation-delay:.06s;} .main-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(2){animation-delay:.12s;} .main-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(3){animation-delay:.18s;} .main-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4){animation-delay:.24s;} .main-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(5){animation-delay:.30s;} @keyframes kl-nav-in{to{opacity:1; transform:none;}} /* Standard menu links: index number + big display type + arrow. The label is capped by the viewport, not by a fixed 1.7rem: at 360px the long entries ("Prima Garden Estate", "Tentang Kami") overflowed the 2.4rem arrow gutter and wrapped. nowrap + ellipsis is the backstop — one line, always. */ .main-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:not(.nav-cta-mobile){ border-bottom:1px solid rgba(255,255,255,.1); } .main-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:not(.nav-cta-mobile) > .wp-block-navigation-item__content{ position:relative; display:flex; align-items:center; gap:1rem; min-width:0; font-family:var(--font-display); font-weight:500; line-height:1.1; font-size:clamp(1.15rem,5.2vw,1.7rem); letter-spacing:.005em; text-transform:none; color:#fff; white-space:nowrap; padding:1.15rem 2.4rem 1.15rem 0; transition:color .25s var(--ease), padding .25s var(--ease); } .main-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:not(.nav-cta-mobile) > .wp-block-navigation-item__content .wp-block-navigation-item__label{ min-width:0; overflow:hidden; text-overflow:ellipsis; } .main-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:not(.nav-cta-mobile) > .wp-block-navigation-item__content::before{ counter-increment:navitem; content:counter(navitem,decimal-leading-zero); font-family:var(--font-display); font-weight:500; font-size:.72rem; letter-spacing:.1em; color:var(--gold); min-width:1.5rem; flex:0 0 auto; } .main-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:not(.nav-cta-mobile) > .wp-block-navigation-item__content::after{ content:"→"; position:absolute; right:.35rem; top:50%; transform:translateY(-50%); font-size:1.15rem; color:rgba(255,255,255,.32); transition:color .25s var(--ease), right .25s var(--ease); } .main-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:not(.nav-cta-mobile) > .wp-block-navigation-item__content:hover, .main-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:not(.nav-cta-mobile) > .wp-block-navigation-item__content:focus{ outline:none; color:var(--gold-soft,#E4C778); padding-left:.5rem; } .main-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:not(.nav-cta-mobile) > .wp-block-navigation-item__content:hover::after, .main-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:not(.nav-cta-mobile) > .wp-block-navigation-item__content:focus::after{ color:var(--gold); right:.1rem; } /* ---- Proyek accordion inside the overlay ---- No theme JS: core already renders a real