/* ========================================================= Adhiraj Kunj — Uttrakhand Jan Awas Yojana Main Stylesheet ========================================================= */ /* ---------- Tokens ---------- */ :root{ /* ---- Brand palette ------------------------------------------------- Government-portal palette: deep blue (primary/trust), red (CTA/ urgency), amber (secondary approvals) on white/light-grey surfaces. Colours are declared once as RGB channel triplets, then composed into the named tokens below. Every translucent surface in the stylesheet references these channels via rgb(var(--x-rgb) / a), so re-theming the site means editing only this block. -------------------------------------------------------------- */ --brand-rgb:11 61 145; /* #0B3D91 deep government blue */ --brand-2-rgb:20 92 189; /* #145CBD brighter blue */ --dark-rgb:13 18 26; /* #0D121A near-black ink */ --gold-rgb:200 45 36; /* #C82D24 government red (CTA) */ --brand:rgb(var(--brand-rgb)); /* primary */ --brand-2:rgb(var(--brand-2-rgb)); /* secondary */ --gold:rgb(var(--gold-rgb)); --gold-soft-rgb:217 113 31; --gold-soft:rgb(var(--gold-soft-rgb)); /* amber accent for "why invest" etc. */ --dark:rgb(var(--dark-rgb)); --bg:#F5F7FA; --white:#FFFFFF; --text:#1B2330; --muted:#5B6675; --line:#E2E7EE; --line-soft:#EEF2F7; --r-sm:6px; --r:10px; --r-lg:12px; --r-xl:16px; --r-pill:999px; --sh-xs:0 1px 2px rgb(var(--dark-rgb) / .05); --sh-sm:0 3px 12px rgb(var(--dark-rgb) / .06); --sh:0 8px 26px rgb(var(--dark-rgb) / .08); --sh-lg:0 20px 50px rgb(var(--dark-rgb) / .12); --sh-gold:0 8px 22px rgb(var(--gold-rgb) / .3); --ff:'Inter','Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --ff-serif:'Playfair Display',Georgia,'Times New Roman',serif; --ff-hi:'Noto Sans Devanagari','Inter','Manrope',system-ui,sans-serif; --header-h:118px; --header-h-scrolled:88px; --notice-h:18px; --ease:cubic-bezier(.22,.61,.36,1); --container:1240px; } /* ---------- Reset ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body,h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0} ul,ol{padding:0;list-style:none} img{max-width:100%;display:block;height:auto} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} input,select,textarea{font:inherit;color:inherit} a{color:inherit;text-decoration:none} table{border-collapse:collapse;width:100%} html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);overflow-x:clip} body{ font-family:var(--ff); color:var(--text); background:var(--white); line-height:1.65; font-size:16px; overflow-x:hidden; } body.no-scroll{position:fixed;left:0;right:0;width:100%;overflow:hidden} .hi{font-family:var(--ff-hi);line-height:1.55} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px} ::selection{background:var(--brand);color:#fff} /* ---------- Layout ---------- */ .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:24px} .section{padding:96px 0;position:relative} .section-light{background:var(--bg)} .center{text-align:center} .mt-16{margin-top:16px} .mt-32{margin-top:32px} .mt-24{margin-top:24px} .mt-40{margin-top:40px} /* ---------- Typography ---------- */ h1,h2,h3{font-weight:800;letter-spacing:-.02em;line-height:1.18;color:var(--dark)} .sec-head{max-width:760px;margin-bottom:56px} .sec-head.center{margin-inline:auto} .sec-title{font-size:clamp(28px,3.4vw,44px)} .sec-title--serif{font-family:var(--ff-serif);font-weight:700;letter-spacing:0} .dot-sep{color:var(--line);margin:0 4px} .sec-sub{color:var(--muted);font-size:17px;margin-top:14px} .sec-head.center .sec-sub{margin-inline:auto} .eyebrow{ display:inline-flex;align-items:center;gap:8px; font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:var(--brand-2);background:rgb(var(--brand-2-rgb) / .08); padding:7px 16px;border-radius:var(--r-pill);margin-bottom:18px; } .eyebrow-gold{color:#8A5E10;background:rgb(var(--gold-rgb) / .16)} .pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--gold);position:relative} .pulse-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--gold);opacity:.6;animation:pulse 1.8s var(--ease) infinite} @keyframes pulse{0%{transform:scale(.6);opacity:.8}100%{transform:scale(1.5);opacity:0}} /* ---------- Icons (CSS masks, no icon font) ---------- */ .ic{ display:inline-block;width:1em;height:1em;flex:0 0 auto; background-color:currentColor; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-position:center;mask-position:center; -webkit-mask-size:contain;mask-size:contain; vertical-align:-.125em; } .ic-check{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")} .ic-check-circle{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1.2 14.3-4-4 1.6-1.6 2.4 2.4 5.2-5.2 1.6 1.6-6.8 6.8Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1.2 14.3-4-4 1.6-1.6 2.4 2.4 5.2-5.2 1.6 1.6-6.8 6.8Z'/%3E%3C/svg%3E")} .ic-phone{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2Z'/%3E%3C/svg%3E")} .ic-mail{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m2 7 10 6 10-6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m2 7 10 6 10-6'/%3E%3C/svg%3E")} .ic-pin{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E")} .ic-shield{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.4 8 11 4.6-1.6 8-6 8-11V5l-8-3Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.4 8 11 4.6-1.6 8-6 8-11V5l-8-3Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E")} .ic-building{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M9 7h2M13 7h2M9 11h2M13 11h2M9 15h2M13 15h2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M9 7h2M13 7h2M9 11h2M13 11h2M9 15h2M13 15h2'/%3E%3C/svg%3E")} .ic-doc{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M14 2H7a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7l-5-5Z'/%3E%3Cpath d='M14 2v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M14 2H7a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7l-5-5Z'/%3E%3Cpath d='M14 2v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E")} .ic-calendar{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E")} .ic-key{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='m11 12 9-9 2 2-2 2 2 2-3 3-2-2-3 3'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='m11 12 9-9 2 2-2 2 2 2-3 3-2-2-3 3'/%3E%3C/svg%3E")} .ic-bank{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M3 10 12 4l9 6M5 10v9M19 10v9M9 10v9M15 10v9M3 21h18'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M3 10 12 4l9 6M5 10v9M19 10v9M9 10v9M15 10v9M3 21h18'/%3E%3C/svg%3E")} .ic-refund{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9 8h6M9 12h6M11 8v8M15 16l-4-4'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9 8h6M9 12h6M11 8v8M15 16l-4-4'/%3E%3C/svg%3E")} .ic-land{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 8 12 4l9 4-9 4-9-4Z'/%3E%3Cpath d='m3 14 9 4 9-4'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 8 12 4l9 4-9 4-9-4Z'/%3E%3Cpath d='m3 14 9 4 9-4'/%3E%3C/svg%3E")} .ic-stamp{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M9 10a3 3 0 1 1 6 0c0 2-1 2-1 4h-4c0-2-1-2-1-4Z'/%3E%3Crect x='4' y='16' width='16' height='5' rx='1.5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M9 10a3 3 0 1 1 6 0c0 2-1 2-1 4h-4c0-2-1-2-1-4Z'/%3E%3Crect x='4' y='16' width='16' height='5' rx='1.5'/%3E%3C/svg%3E")} .ic-people{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0 1 13 0'/%3E%3Cpath d='M16 5.2a3.5 3.5 0 0 1 0 5.6M18 14.4a6.5 6.5 0 0 1 3.5 5.6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0 1 13 0'/%3E%3Cpath d='M16 5.2a3.5 3.5 0 0 1 0 5.6M18 14.4a6.5 6.5 0 0 1 3.5 5.6'/%3E%3C/svg%3E")} .ic-home{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='m3 10 9-7 9 7v10a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1V10Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='m3 10 9-7 9 7v10a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1V10Z'/%3E%3C/svg%3E")} .ic-layout{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18M9 21V9'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18M9 21V9'/%3E%3C/svg%3E")} .ic-edit{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L20 8l-4-4L4 16v4Z'/%3E%3Cpath d='m14 6 4 4'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L20 8l-4-4L4 16v4Z'/%3E%3Cpath d='m14 6 4 4'/%3E%3C/svg%3E")} .ic-wa{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15L2 22l5.2-1.4A10 10 0 1 0 12 2Zm5.3 14c-.2.6-1.3 1.2-1.8 1.2-.5.1-1 .1-1.7-.1a12 12 0 0 1-5.6-4.8c-.4-.7-.9-1.6-.9-2.5 0-.9.5-1.4.7-1.6.2-.2.4-.3.6-.3h.5c.2 0 .4 0 .6.4l.8 1.9c.1.2 0 .4-.1.5l-.4.5c-.1.2-.3.3-.1.6.2.4.8 1.3 1.6 2 1 .8 1.8 1.1 2.1 1.2.2.1.4.1.6-.1l.8-.9c.2-.2.4-.2.6-.1l1.8.9c.2.1.4.2.4.3v.9Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15L2 22l5.2-1.4A10 10 0 1 0 12 2Zm5.3 14c-.2.6-1.3 1.2-1.8 1.2-.5.1-1 .1-1.7-.1a12 12 0 0 1-5.6-4.8c-.4-.7-.9-1.6-.9-2.5 0-.9.5-1.4.7-1.6.2-.2.4-.3.6-.3h.5c.2 0 .4 0 .6.4l.8 1.9c.1.2 0 .4-.1.5l-.4.5c-.1.2-.3.3-.1.6.2.4.8 1.3 1.6 2 1 .8 1.8 1.1 2.1 1.2.2.1.4.1.6-.1l.8-.9c.2-.2.4-.2.6-.1l1.8.9c.2.1.4.2.4.3v.9Z'/%3E%3C/svg%3E")} .ic-clock{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")} .ic-bell{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.7 21a2 2 0 0 1-3.4 0'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.7 21a2 2 0 0 1-3.4 0'/%3E%3C/svg%3E")} .ic-spark{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='m12 2 2.2 6.3L21 10.5l-6.1 2.4L12 19l-2.9-6.1L3 10.5l6.8-2.2L12 2Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='m12 2 2.2 6.3L21 10.5l-6.1 2.4L12 19l-2.9-6.1L3 10.5l6.8-2.2L12 2Z'/%3E%3C/svg%3E")} /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:7px 28px;border-radius:var(--r-pill); font-weight:700;font-size:15px;letter-spacing:.01em; transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease); white-space:nowrap;position:relative;overflow:hidden; } .btn-lg{padding:17px 38px;font-size:16px} .btn-sm{padding:10px 20px;font-size:14px} .btn-block{width:100%} .btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(0)} .btn-primary{background:var(--brand);color:#fff;box-shadow:0 8px 24px rgb(var(--brand-rgb) / .26)} .btn-primary:hover{background:var(--brand-2);box-shadow:0 14px 34px rgb(var(--brand-rgb) / .34)} /* On the dark brand-coloured sections a blue button disappears into the background — promote it to the red CTA treatment instead. */ .section-alert .btn-primary, .section-stats .btn-primary, .section-enquiry .btn-primary{background:var(--gold);color:#fff;box-shadow:var(--sh-gold)} .section-alert .btn-primary:hover, .section-stats .btn-primary:hover, .section-enquiry .btn-primary:hover{background:var(--dark);box-shadow:0 16px 38px rgb(var(--gold-rgb) / .4)} .btn-gold{background:var(--gold);color:#fff;box-shadow:var(--sh-gold)} .btn-gold:hover{background:var(--dark);box-shadow:0 16px 38px rgb(var(--gold-rgb) / .4)} .btn-outline{border:1.5px solid var(--line);color:var(--text);background:#fff} .btn-outline:hover{border-color:var(--brand);color:var(--brand);background:#fff} .btn-ghost{border:1.5px solid rgba(255,255,255,.35);color:#fff} .btn-ghost:hover{background:rgba(255,255,255,.12)} .btn-glass{ background:rgba(255,255,255,.12);color:#fff; border:1.5px solid rgba(255,255,255,.4); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); } .btn-glass:hover{background:rgba(255,255,255,.22)} /* ---------- Preloader ---------- */ #preloader{ position:fixed;inset:0;z-index:9999;background:var(--dark); display:flex;align-items:center;justify-content:center; transition:opacity .5s var(--ease),visibility .5s var(--ease); } #preloader.done{opacity:0;visibility:hidden} .loader-ring{ width:52px;height:52px;border-radius:50%; border:3px solid rgba(255,255,255,.14);border-top-color:var(--gold); animation:spin .8s linear infinite; } @keyframes spin{to{transform:rotate(360deg)}} /* ---------- Header ---------- */ .site-header{position:fixed;top:0;left:0;right:0;z-index:900;transition:transform .4s var(--ease)} /* Top black government utility bar */ .govbar{background:var(--dark);color:rgba(255,255,255,.85);font-size:12.5px} .govbar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:34px;flex-wrap:wrap} .govbar .ic{font-size:12px;vertical-align:-1px;margin-right:4px;opacity:.85} .govbar-sep{margin:0 10px;opacity:.35} .govbar-right a{color:#fff;text-decoration:underline;text-underline-offset:2px} /* Green government info strip */ .infobar{background:var(--brand);color:#fff;font-size:13.5px;font-weight:600} .infobar-inner{display:flex;align-items:center;justify-content:center;gap:0;min-height:38px;flex-wrap:wrap;text-align:center} .infobar-item{display:inline-flex;align-items:center;gap:6px;padding:6px 0} .infobar-item.hi{font-family:var(--ff-hi)} .infobar-sep{opacity:.4;margin:0 4px} .infobar-phone{color:#fff} .infobar-phone:hover{text-decoration:underline} .mainbar{background:#fff;border-bottom:1px solid var(--line-soft);transition:box-shadow .35s var(--ease),padding .35s var(--ease)} .mainbar-inner{display:flex;align-items:center;gap:28px;min-height:82px;transition:min-height .35s var(--ease)} .brand{flex:0 0 auto;display:flex;align-items:center;gap:14px} .brand-logo{height:54px;width:auto;object-fit:contain;transition:height .35s var(--ease)} .brand-text{display:flex;flex-direction:column;line-height:1.3} .brand-text strong{font-size:17px;font-weight:800;color:var(--brand)} .brand-text em{font-style:normal;font-size:12.5px;font-weight:600;color:var(--text)} .brand-text small{font-size:11px;color:var(--muted)} /* Lets JS measure the true scrolled/unscrolled header height synchronously, without the .35s size transitions delaying what outerHeight() reports. */ .site-header.no-transition, .site-header.no-transition .mainbar, .site-header.no-transition .mainbar-inner, .site-header.no-transition .brand-logo{transition:none !important} .main-nav{margin-left:auto} .nav-list{display:flex;align-items:center;gap:4px} .nav-link{ display:block;padding:10px 15px;border-radius:var(--r-pill); font-weight:600;font-size:15px;color:var(--text); transition:color .25s,background .25s;position:relative; } .nav-link::after{ content:"";position:absolute;left:15px;right:15px;bottom:5px;height:2px; background:var(--gold);border-radius:2px;transform:scaleX(0);transform-origin:left; transition:transform .3s var(--ease); } .nav-link:hover{color:var(--brand)} .nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)} .nav-link.active{color:var(--brand)} .nav-mobile-cta{display:none} .header-actions{display:flex;align-items:center;gap:12px} .nav-toggle{ display:none;width:46px;height:46px;border-radius:14px; border:1.5px solid var(--line);background:#fff; flex-direction:column;align-items:center;justify-content:center;gap:5px; } .nav-toggle span{display:block;width:20px;height:2px;background:var(--dark);border-radius:2px;transition:transform .3s var(--ease),opacity .25s var(--ease)} .nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav-toggle.is-open span:nth-child(2){opacity:0} .nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* scrolled state */ .site-header.scrolled .mainbar{box-shadow:0 6px 28px rgb(var(--dark-rgb) / .1)} .site-header.scrolled .mainbar-inner{min-height:68px} .site-header.scrolled .brand-logo{height:44px} .site-header.scrolled .govbar, .site-header.scrolled .infobar{display:none} .nav-overlay{position:fixed;inset:0;background:rgb(var(--dark-rgb) / .5);opacity:0;visibility:hidden;z-index:880;transition:opacity .35s var(--ease),visibility .35s} .nav-overlay.show{opacity:1;visibility:visible} /* ---------- Notification marquee ---------- */ /* Fixed directly below the fixed header, so it stays pinned in place while the page scrolls. .hero carries the combined offset instead. */ .notice-bar{ position:fixed;top:var(--header-h);left:0;right:0;z-index:890; background:var(--dark); color:#fff; border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgb(var(--gold-rgb) / .35); overflow:hidden; transition:top .35s var(--ease); } /* The header shrinks once .scrolled is applied (JS mirrors that state here via .header-scrolled on ), so the notice bar must follow the shorter height or a gap opens between the two. */ .header-scrolled .notice-bar{top:var(--header-h-scrolled)} .notice-inner{ display:flex;align-items:stretch; max-width:100%; } .notice-tag{ flex:0 0 auto;display:inline-flex;align-items:center;gap:9px; background:var(--gold);color:#fff; border-right:1px solid rgb(var(--gold-rgb) / .4); font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase; padding:0 20px;white-space:nowrap; position:relative;z-index:2; } .notice-tag .ic{font-size:16px;color:#fff;animation:bell-swing 2.6s var(--ease) infinite} @keyframes bell-swing{ 0%,60%,100%{transform:rotate(0)} 70%{transform:rotate(12deg)} 80%{transform:rotate(-10deg)} 90%{transform:rotate(6deg)} } /* Clipping window for the moving track */ .notice-viewport{flex:1 1 auto;overflow:hidden;position:relative;min-width:0} .notice-track{ display:inline-flex;align-items:center;gap:0; white-space:nowrap;will-change:transform; animation:notice-scroll var(--notice-duration,40s) linear infinite; } .notice-bar.is-paused .notice-track, .notice-bar.is-hover-paused .notice-track{animation-play-state:paused} /* An explicit resume wins over hover, so the button always feels responsive */ .notice-bar.is-user-playing .notice-track{animation-play-state:running} /* Each pass is one full copy of the item list */ .notice-pass{display:inline-flex;align-items:center;flex:0 0 auto} /* The track holds the list twice; shifting by exactly -50% loops seamlessly */ @keyframes notice-scroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} } .notice-item{ display:inline-flex;align-items:center;gap:10px; padding:11px 26px; font-size:14.5px;font-weight:600;color:rgba(255,255,255,.94); } .notice-item .ic{font-size:15px;color:var(--gold-soft);flex:0 0 auto} .notice-item strong{color:var(--gold-soft);font-weight:800} .notice-item a{text-decoration:underline;text-underline-offset:3px;transition:color .25s} .notice-item a:hover{color:var(--gold-soft)} /* Separator dot between items */ .notice-item::after{ content:"";flex:0 0 auto; width:5px;height:5px;border-radius:50%; background:rgb(var(--gold-rgb) / .6); margin-left:26px; } .notice-toggle{ flex:0 0 auto;width:40px;position:relative; background:rgb(var(--dark-rgb) / .45); border-left:1px solid rgba(255,255,255,.12); transition:background .25s var(--ease); } .notice-toggle:hover{background:rgb(var(--dark-rgb) / .75)} /* Pause glyph (two bars) */ .notice-toggle::before,.notice-toggle::after{ content:"";position:absolute;top:50%; width:3px;height:12px;border-radius:1px;background:var(--gold-soft); transform:translateY(-50%);transition:all .25s var(--ease); } .notice-toggle::before{left:15px} .notice-toggle::after{right:15px} /* Play glyph (triangle) when paused */ .notice-bar.is-paused .notice-toggle::before{ left:14px;width:0;height:0;border-radius:0;background:transparent; border-top:6px solid transparent;border-bottom:6px solid transparent; border-left:10px solid var(--gold-soft); } .notice-bar.is-paused .notice-toggle::after{opacity:0} /* ---------- Hero ---------- */ .hero{ margin-top:calc(var(--header-h) + var(--notice-h)); background:var(--bg); } /* Image strip with headline above it */ .hero-strip{padding:0px 0 0px;background:var(--bg)} .hero-strip-head{text-align:center;margin-bottom:20px;max-width:100%} .hero-strip-title{font-size:clamp(22px,2.6vw,30px);font-weight:700;color:var(--brand);overflow-wrap:break-word} .hero-strip-en{font-size:15px;font-weight:700;color:var(--dark);margin-top:2px} .hero-strip-sub{font-size:13px;color:var(--muted);margin-top:4px;overflow-wrap:break-word} .hero-strip-sub-sep{color:var(--line);margin:0 2px} .hero-strip-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px} .hero-strip-item{ display:block;min-width:0;border-radius:var(--r);overflow:hidden;aspect-ratio:8/6; border:1px solid var(--line);background:var(--white); transition:border-color .25s var(--ease); } .hero-strip-item:hover{border-color:var(--brand)} .hero-strip-item img{width:100%;height:100%;object-fit:cover;display:block} .approvalbanner{background: white; text-align: center;} .approvalbanner img{margin: 0 auto;} /* Big green banner beneath the strip */ .hero-banner{ position:relative;overflow:hidden; background:linear-gradient(160deg,#082A66 0%,var(--brand) 55%,#154E96 100%); padding:34px 90px 20px;text-align:center;color:#fff; } .hero-banner-inner{display:flex;flex-direction:column;align-items:center;gap:5px;max-width:100%} .hero-banner-title{font-size:clamp(40px,7vw,50px);font-weight:800;letter-spacing:-.01em;color:#fff;line-height:1.1;max-width:100%;overflow-wrap:break-word} .hero-banner-divider{width:120px;height:2px;background:rgb(var(--gold-rgb) / .7);position:relative} .hero-banner-divider::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;transform:translate(-50%,-50%) rotate(45deg);background:var(--gold-soft)} .hero-banner-tagline{font-size:clamp(18px,2.4vw,17px);font-weight:600;color:rgba(255,255,255,.92)} .hero-banner-caption{margin-top:8px;font-size:12px;color:rgba(255,255,255,.72)} /* ---------- Registration alert ---------- */ .section-alert{ background:var(--white); padding:48px 0 60px; } .reg-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:32px;align-items:start} .reg-details{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden} .reg-details-head{background:var(--brand);color:#fff;font-weight:700;font-size:16px;padding:14px 22px} .reg-table{width:100%;font-size:14.5px} .reg-table tr:nth-child(odd){background:var(--bg)} .reg-table th,.reg-table td{padding:14px 22px;text-align:left;font-weight:400} .reg-table th{color:var(--muted);font-weight:600;width:38%} .reg-table td{color:var(--text);font-weight:700} .reg-verify{ display:flex;align-items:center;gap:16px; padding:18px 22px;border-top:1px solid var(--line);background:var(--bg); } .reg-verify-qr{border-radius:6px;border:1px solid var(--line);background:#fff;flex-shrink:0} .reg-verify-text{display:flex;flex-direction:column;gap:4px} .reg-verify-label{font-weight:700;color:var(--brand);font-size:15px} .reg-verify-line{font-size:13.5px;color:var(--muted)} .reg-verify-site{font-size:14px;color:var(--text)} .reg-side{display:grid;gap:20px} .reg-countdown{border:2px solid var(--gold);border-radius:var(--r-lg);padding:18px 20px;background:#FEF6F5} .reg-countdown-head{text-align:center;background:var(--gold);color:#fff;font-weight:700;font-size:15px;padding:10px 16px;border-radius:var(--r-sm);margin:-18px -20px 16px} .countdown{display:flex;justify-content:center;gap:10px;flex-wrap:wrap} .cd-box{ min-width:64px;flex:1 1 64px;padding:10px 6px;border-radius:var(--r-sm);text-align:center; background:#fff;border:1px solid rgb(var(--gold-rgb) / .3); } .cd-box strong{display:block;font-size:24px;font-weight:800;color:var(--gold);line-height:1;font-variant-numeric:tabular-nums} .cd-box span{display:block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:4px} .reg-countdown-note{text-align:center;font-size:12.5px;color:var(--muted);margin-top:14px} .reg-countdown-note strong{color:var(--text)} .gov-helpline{ display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap; background:var(--bg);border:1px solid var(--line);border-radius:var(--r); padding:14px 20px; } .gov-helpline span{font-weight:700;color:var(--text);font-size:14px} .gov-helpline a{ display:inline-flex;align-items:center;gap:8px; border:1px solid var(--line);color:var(--text);font-weight:700;font-size:14px; padding:8px 16px;border-radius:var(--r-pill); } .reg-approvals-label{ text-align:center;margin:48px 0 24px;font-size:12px;font-weight:700; letter-spacing:.1em;text-transform:uppercase;color:var(--muted); } .alert-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px} .alert-card{ padding:18px 16px;border-radius:var(--r-lg);text-align:left; background:#fff;border:1px solid var(--line);border-top:3px solid var(--brand); transition:border-color .25s var(--ease); } .alert-card:hover{border-color:var(--brand)} .alert-card .ac-ic{ display:inline-flex;align-items:center;justify-content:center; width:34px;height:34px;border-radius:10px;margin-bottom:10px; background:rgb(var(--brand-rgb) / .08);color:var(--brand);font-size:15px; } .alert-card strong{display:block;font-size:18px;font-weight:800;color:var(--dark);line-height:1.25} .alert-card span{display:block;font-size:12px;color:var(--muted);margin-top:4px} /* ---------- Government notice card ---------- */ .gov-notice{ border-radius:var(--r-lg);overflow:hidden; background:#fff;border:1px solid var(--line);box-shadow:var(--sh-sm);color:var(--text); } .gov-notice-head{ background:var(--brand);color:#fff;font-weight:800;font-size:17px; padding:16px 22px; } .gov-notice-body{padding:22px 22px 24px} .gov-notice-list{display:grid;gap:12px;margin-bottom:20px} .gov-notice-list li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;font-weight:600;color:var(--text)} .gov-notice-list .ic{ flex:0 0 auto;width:18px;height:18px;margin-top:1px; color:var(--brand-2); } .gov-notice-cta{ display:flex;align-items:center;justify-content:center; width:100%;padding:16px;border-radius:var(--r); background:linear-gradient(180deg,#E14C43 0%,#C82D24 100%); color:#fff;font-weight:800;font-size:16px;letter-spacing:.01em; box-shadow:0 10px 26px rgb(200 45 36 / .35); transition:transform .3s var(--ease),box-shadow .3s var(--ease); } .gov-notice-cta:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgb(200 45 36 / .42)} .gov-notice-foot{ display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap; background:var(--bg);border-top:1px solid var(--line); padding:16px 22px; } .gov-notice-foot span{font-weight:800;color:var(--brand);font-size:14.5px} .gov-notice-foot a{ display:inline-flex;align-items:center;gap:8px; border:1.5px solid var(--brand);color:var(--brand);font-weight:700;font-size:14.5px; padding:8px 16px;border-radius:var(--r-pill); transition:background .25s,color .25s; } .gov-notice-foot a:hover{background:var(--brand);color:#fff} /* ---------- Scheme detail / stat cards ---------- */ .sec-eyebrow-line{text-align:center;font-size:13.5px;color:var(--muted);padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:32px} .detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .detail-card{ display:flex;align-items:center;gap:14px; background:#fff;border:1px solid var(--line);border-top:3px solid var(--gold-soft);border-radius:var(--r); padding:18px 20px; transition:border-color .3s var(--ease); } .detail-card:hover{border-color:var(--line);border-top-color:var(--brand)} .detail-ic{ display:inline-flex;align-items:center;justify-content:center; flex:0 0 auto;width:40px;height:40px;border-radius:11px; background:rgb(var(--brand-rgb) / .08);color:var(--brand);font-size:17px; } .detail-text{min-width:0} .detail-text p{font-size:20px;font-weight:800;color:var(--dark);line-height:1.2} .detail-text p span.counter{font-weight:inherit} .detail-hi{display:block;font-size:12.5px;color:var(--muted);margin-top:2px} .detail-card h3{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700} .detail-card p{margin-top:5px;font-size:15px;font-weight:700;color:var(--dark);line-height:1.35} /* ---------- Documents + Trust (merged, side by side) ---------- */ .docs-trust-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start} .dt-col-title{font-size:18px;font-weight:800;color:var(--dark);margin-bottom:20px;text-align:center} .trust-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px} .trust-card{ display:flex;align-items:center;gap:14px;text-align:left; padding:16px;border-radius:var(--r); background:#fff;border:1px solid var(--line); transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease); } .trust-card:hover{transform:translateY(-4px);box-shadow:var(--sh-sm);border-color:transparent} .trust-ic{ flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center; width:42px;height:42px;border-radius:13px; background:rgb(var(--brand-rgb) / .08);color:var(--brand);font-size:18px; } .trust-ic-img{background:#fff;border:1px solid var(--line);padding:7px} .trust-ic-img img{width:100%;height:100%;object-fit:contain} .trust-body{min-width:0} .trust-card h3{font-size:14px} .trust-card p{color:var(--muted);margin-top:2px;font-size:12.5px;word-break:break-word} /* ---------- Stats ---------- */ .section-stats{ padding:40px 0; background:var(--brand); } .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .stat{ text-align:center;color:#fff;position:relative;display:flex;flex-direction:column;align-items:center; background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:var(--r-lg); padding:26px 16px; transition:background .25s var(--ease),border-color .25s var(--ease); } .stat:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)} .stat-ic{ display:inline-flex;align-items:center;justify-content:center; width:66px;height:66px;border-radius:50%; background:rgba(255,255,255,.14);color:#fff;font-size:28.5px;margin-bottom:14px; } .stat strong{ font-size:clamp(24px,3vw,34px);font-weight:800;line-height:1.1; letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:#fff; } .stat strong .counter{font-size:inherit;font-weight:inherit;line-height:inherit} .stat span:not(.stat-ic):not(.counter){display:block;margin-top:8px;font-size:14px;color:rgba(255,255,255,.82)} /* ---------- Timeline ---------- */ .timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative} .timeline::before{ content:"";position:absolute;top:34px;left:10%;right:10%;height:2px; background:linear-gradient(90deg,var(--brand),var(--gold));opacity:.28; } .tl-item{position:relative;text-align:center} .tl-step{ display:inline-flex;align-items:center;justify-content:center; width:68px;height:68px;border-radius:50%; background:var(--brand);color:#fff; font-size:22px;font-weight:800;letter-spacing:.02em; border:5px solid var(--bg);box-shadow:0 10px 26px rgb(var(--brand-rgb) / .26); position:relative;z-index:2;transition:transform .35s var(--ease),background .35s var(--ease); } .tl-item:hover .tl-step{transform:translateY(-5px) scale(1.05);background:var(--dark)} .tl-body{ margin-top:20px;background:#fff;border:1px solid var(--line); border-radius:var(--r-lg);padding:28px 22px;box-shadow:var(--sh-xs); transition:transform .35s var(--ease),box-shadow .35s var(--ease); } .tl-item:hover .tl-body{transform:translateY(-5px);box-shadow:var(--sh)} .tl-amount{display:block;font-size:30px;font-weight:800;color:var(--brand);letter-spacing:-.02em} .tl-body h3{font-size:17px;margin-top:8px} .tl-body p{color:var(--muted);font-size:13px;margin-top:6px} /* ---------- Split (about / invest) ---------- */ .split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center} .split-body .sec-title{margin-bottom:18px} .split-body p{color:var(--muted);font-size:17px;margin-bottom:14px} .addr-line{display:flex;gap:10px;align-items:flex-start;color:var(--text) !important} .addr-line .ic{color:var(--gold);font-size:20px;margin-top:3px} .split-body .btn{margin-top:14px} .media-frame{ border-radius:var(--r-xl);overflow:hidden;position:relative; box-shadow:var(--sh-lg);aspect-ratio:4/3;background:var(--bg); } .media-frame img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)} .split-media:hover .media-frame img{transform:scale(1.05)} .split-media{position:relative} .media-badge{ position:absolute;right:-18px;bottom:-22px; background:var(--gold);color:#fff;border-radius:var(--r-lg); padding:20px 26px;text-align:center;box-shadow:var(--sh-gold); } .media-badge strong{display:block;font-size:26px;font-weight:800;letter-spacing:.02em} .media-badge span{display:block;font-size:13px;font-weight:600;margin-top:2px} .tick-list{margin:24px 0 28px;display:grid;gap:12px} .tick-list li{display:flex;align-items:flex-start;gap:12px;font-size:16px;font-weight:500} .tick-list .ic{ flex:0 0 auto;width:22px;height:22px;border-radius:50%; background:var(--brand);color:#fff;font-size:12px; display:inline-flex;align-items:center;justify-content:center;margin-top:3px; -webkit-mask:none;mask:none; } .tick-list .ic::before{ content:"";width:11px;height:11px;background:#fff; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; } /* ---------- Documents ---------- */ .doc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px} .doc-card{ display:flex;align-items:flex-start;gap:12px;text-align:left; background:#fff;border:1px solid var(--line);border-radius:var(--r); padding:16px; transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease); } .doc-card:hover{transform:translateY(-4px);box-shadow:var(--sh-sm);border-color:transparent} .doc-ic{ flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center; width:42px;height:42px;border-radius:13px; background:rgb(var(--gold-rgb) / .14);color:#A87220;font-size:18px; transition:background .35s var(--ease),color .35s var(--ease); } .doc-card:hover .doc-ic{background:var(--gold);color:#fff} .doc-body{min-width:0} .doc-card h3{font-size:14px} .doc-card p{color:var(--muted);font-size:12.5px;margin:2px 0 10px;line-height:1.4} .doc-card .btn-sm{padding:8px 14px;font-size:12px} /* ---------- Highlights ---------- */ .hl-grid{ display:grid;grid-template-columns:repeat(2,1fr);gap:16px; max-width:820px;margin:0 auto; } .hl-tile{ display:flex;align-items:flex-start;gap:14px; background:#fff;border:1px solid var(--line);border-radius:var(--r-lg); padding:20px;box-shadow:var(--sh-xs); transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease); } .hl-tile:hover{transform:translateY(-5px);box-shadow:var(--sh);border-color:rgb(var(--gold-rgb) / .4)} .hl-tile--wide{grid-column:1 / -1} .hl-tile-ic{ flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center; width:46px;height:46px;border-radius:14px; background:linear-gradient(140deg,rgb(var(--brand-rgb) / .12),rgb(var(--gold-rgb) / .2)); color:var(--brand);font-size:20px; } .hl-tile-body h3{font-size:16px;color:var(--dark)} .hl-tile-body p{color:var(--muted);font-size:13.5px;margin-top:5px} /* ---------- Why choose / Why invest ---------- */ .wi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:start} .wi-card{ background:#fff;border-radius:var(--r-lg);border:1px solid var(--line); border-top:3px solid var(--wi-accent,var(--brand)); padding:28px 26px;box-shadow:var(--sh-xs); transition:transform .4s var(--ease),box-shadow .4s var(--ease); } .wi-card:hover{transform:translateY(-6px);box-shadow:var(--sh)} .wi-card--features{--wi-accent:#D9711F} .wi-card--invest{--wi-accent:#D9711F} .wi-card--choose{ --wi-accent:#F08A24; background:#0E2E5A;border-color:#0E2E5A; border-top:3px solid #F08A24; } .wi-card--choose .wi-head{border-bottom-color:rgba(255,255,255,.16)} .wi-card--choose .wi-head h3{color:#F5A63D} .wi-card--choose .wi-tag{color:rgba(255,255,255,.55)} .wi-card--choose .wi-list li{color:#EAF0F8} .wi-head{ display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:10px 16px;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--line-soft); } .wi-head h3{font-size:19px;font-weight:700;color:var(--wi-accent,var(--dark));font-family:var(--ff-hi);line-height:1.4} .wi-tag{ flex:0 0 auto;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase; color:var(--muted); } .wi-list{display:grid;gap:14px} .wi-list li{display:flex;align-items:flex-start;gap:12px;font-size:15.5px;color:var(--text);line-height:1.55} .wi-list .ic{ flex:0 0 auto;margin-top:2px;font-size:15px;color:var(--wi-accent,var(--brand)); } /* ---------- Tabs ---------- */ .tabs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:40px} .tab{ padding:11px 24px;border-radius:var(--r-pill); border:1.5px solid var(--line);background:#fff; font-weight:600;font-size:14.5px;color:var(--muted); transition:all .3s var(--ease); } .tab:hover{border-color:var(--brand);color:var(--brand)} .tab.is-active{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 8px 20px rgb(var(--brand-rgb) / .22)} .tabs-sm{justify-content:flex-start;margin-bottom:24px} .tabs-sm .tab{padding:9px 18px;font-size:13.5px} /* ---------- Amenities ---------- */ /* Feature chips: headline infrastructure callouts above the image cards. */ .amenity-chips{ display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:40px; } .am-chip{ display:flex;align-items:center;gap:12px; background:#fff;border:1px solid var(--line);border-radius:var(--r); padding:16px 20px;box-shadow:var(--sh-xs); font-size:15px;font-weight:700;color:var(--dark); transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease); } .am-chip:hover{border-color:var(--brand);box-shadow:var(--sh-sm);transform:translateY(-2px)} .am-chip .ic{font-size:20px;color:var(--brand)} .amenity-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .am-card{ background:#fff;border:1px solid var(--line);border-radius:var(--r-lg); overflow:hidden;box-shadow:var(--sh-xs); transition:transform .45s var(--ease),box-shadow .45s var(--ease),opacity .35s var(--ease); display:flex;flex-direction:column; } .am-card:hover{transform:translateY(-8px);box-shadow:var(--sh-lg)} .am-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg)} .am-media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)} .am-card:hover .am-media img{transform:scale(1.09)} /* Amber rule separating the photo from the label bar. */ .am-body{ display:flex;align-items:center;gap:10px; padding:14px 16px;border-top:3px solid var(--gold-soft); } .am-body .ic{font-size:18px;color:#1F9254;flex:0 0 auto} .am-body h3{font-size:15.5px;font-weight:700;letter-spacing:-.01em} .am-card.is-hidden{display:none} /* ---------- Pricing table ---------- */ .table-wrap{ background:#fff;border:1px solid var(--line); border-radius:var(--r-lg);box-shadow:var(--sh-sm);overflow:hidden; } .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} .price-table{min-width:1560px;font-size:14px} .price-table thead th{ background:var(--brand); color:#fff;font-weight:700;font-size:13px;letter-spacing:.03em; padding:14px 12px;text-align:center;white-space:nowrap;vertical-align:middle;line-height:1.35; } .price-table thead th:first-child{width:72px} .price-table tbody td{ padding:14px 12px;border-bottom:1px solid var(--line-soft); white-space:nowrap;color:var(--text);text-align:center; } .price-table tbody tr{transition:background .25s var(--ease)} .price-table tbody tr:hover{background:rgb(var(--brand-rgb) / .035)} .price-table tbody tr:last-child td{border-bottom:0} .price-table .td-idx{text-align:center;color:var(--muted);font-weight:700} .price-table .td-size{font-weight:800;color:var(--dark);font-size:15px} .price-table .td-total{font-weight:800;color:var(--brand);font-size:15px} .price-table .td-reg{color:#A87220;font-weight:700} .price-table .td-status{padding:10px 12px} .btn-apply-row{ display:inline-block;padding:9px 18px;border-radius:999px; background:var(--gold);color:#fff; font-size:13px;font-weight:800;letter-spacing:.02em;white-space:nowrap; border:1px solid rgba(0,0,0,.06); transition:transform .2s var(--ease),box-shadow .2s var(--ease),filter .2s var(--ease); } .btn-apply-row:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 6px 16px rgb(0 0 0 / .14)} .btn-apply-row:focus-visible{outline:2px solid var(--brand);outline-offset:2px} .scroll-hint{ display:none;padding:12px 16px;font-size:13px;color:var(--muted); border-top:1px solid var(--line-soft);background:var(--bg);text-align:center; } .table-note{margin-top:20px;text-align:center;font-size:14px;color:var(--muted)} /* ---------- Gallery (slider) ---------- */ .g-slider{position:relative;padding:0 0px} .g-track{ display:flex;gap:18px;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory; padding-bottom:8px;-webkit-overflow-scrolling:touch; } .g-track::-webkit-scrollbar{display:none} .g-track{scrollbar-width:none} .g-item{ flex:0 0 calc(25% - 13.5px);aspect-ratio:1/1;scroll-snap-align:start;border-radius:var(--r); overflow:hidden;position:relative;cursor:pointer;display:block; box-shadow:var(--sh-xs);background:var(--bg); transition:transform .4s var(--ease),box-shadow .4s var(--ease); } .g-item:hover{transform:translateY(-5px);box-shadow:var(--sh)} .g-item img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease);display:block} .g-nav{ position:absolute;top:50%;translate:0 -50%;width:44px;height:44px;border-radius:50%; background:var(--bg);box-shadow:var(--sh-xs);border:1px solid var(--line-soft);color:var(--dark); display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:3; transition:background .3s var(--ease),box-shadow .3s var(--ease),color .3s var(--ease); } .g-nav svg{display:block} .g-nav:hover{background:var(--brand);box-shadow:var(--sh);color:#fff} .g-nav-prev{left:10px} .g-nav-next{right:10px} .g-dots{display:flex;gap:8px;justify-content:center;margin-top:20px} .g-dot{width:8px;height:8px;border-radius:50%;background:var(--line-soft);cursor:pointer;padding:0;border:0;transition:background .3s var(--ease),transform .3s var(--ease)} .g-dot.active{background:var(--brand);transform:scale(1.25)} .g-item:hover img{transform:scale(1.07)} .g-item::after{ content:"";position:absolute;inset:0; background:linear-gradient(to top,rgb(var(--dark-rgb) / .72),transparent 55%); opacity:0;transition:opacity .4s var(--ease); } .g-item:hover::after{opacity:1} .g-zoom{ position:absolute;top:14px;right:14px;z-index:2; width:38px;height:38px;border-radius:50%; background:rgba(255,255,255,.9); display:flex;align-items:center;justify-content:center; opacity:0;transform:scale(.7); transition:opacity .35s var(--ease),transform .35s var(--ease); } .g-item:hover .g-zoom{opacity:1;transform:scale(1)} .g-zoom::before,.g-zoom::after{content:"";position:absolute;background:var(--brand);border-radius:2px} .g-zoom::before{width:14px;height:2px} .g-zoom::after{width:2px;height:14px} /* ---------- Location ---------- */ .loc-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:start} .map-frame{ border-radius:var(--r-lg);overflow:hidden;height:440px; box-shadow:var(--sh);border:1px solid var(--line);background:var(--bg); margin-bottom: 30px; } .map-frame iframe{display:block;width:100%;height:100%;border:0} .map-addr{ display:flex;gap:16px;align-items:flex-start;margin-top:20px; background:#fff;border:1px solid var(--line);border-radius:var(--r); padding:22px 24px;box-shadow:var(--sh-xs); } .map-addr h3{font-size:16px} .map-addr p{color:var(--muted);font-size:15px;margin-top:4px} .dist-list{display:grid;gap:12px} .dist-item{ display:flex;align-items:center;gap:16px; background:#fff;border:1px solid var(--line);border-radius:var(--r); padding:16px 20px; transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease); } .dist-item:hover{transform:translateX(6px);border-color:var(--brand);box-shadow:var(--sh-xs)} .dist-ic{ flex:0 0 auto;width:40px;height:40px;border-radius:13px; background:rgb(var(--brand-rgb) / .08);color:var(--brand);font-size:18px; display:inline-flex;align-items:center;justify-content:center; } .dist-name{flex:1;font-weight:600;font-size:15.5px} .dist-val{ font-weight:800;font-size:14px;color:#8A5E10; background:rgb(var(--gold-rgb) / .16);padding:6px 14px;border-radius:var(--r-pill);white-space:nowrap; } /* ---------- Enquiry ---------- */ .section-enquiry{position:relative;overflow:hidden;padding:104px 0;color:#fff} .enquiry-bg{position:absolute;inset:0} .enquiry-bg img{width:100%;height:100%;object-fit:cover} .enquiry-bg::after{ content:"";position:absolute;inset:0; background:linear-gradient(105deg,rgb(var(--dark-rgb) / .96) 0%,rgb(var(--brand-rgb) / .9) 52%,rgb(var(--dark-rgb) / .86) 100%); } .enquiry-inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr .85fr;gap:60px;align-items:center} .enquiry-copy .sec-title,.enquiry-copy .sec-sub{color:#fff} .enquiry-copy .sec-sub{color:rgba(255,255,255,.82)} .enq-points{display:grid;gap:12px;margin:26px 0 30px} .enq-points li{display:flex;align-items:center;gap:12px;font-size:16px;color:rgba(255,255,255,.92)} .enq-points .ic{color:var(--gold-soft);font-size:17px} .enq-phone{ display:inline-flex;align-items:center;gap:12px; font-size:24px;font-weight:800;color:var(--gold-soft); transition:color .25s; } .enq-phone:hover{color:#fff} .enquiry-card{ background:#fff;border-radius:var(--r-xl);padding:40px 36px; box-shadow:var(--sh-lg);color:var(--text); } .form-title{font-size:26px} .form-sub{color:var(--muted);font-size:15px;margin:8px 0 26px} .lead-form{display:grid;gap:18px} .field{display:grid;gap:8px} .field label{font-size:14px;font-weight:700;color:var(--dark)} .req{color:#C0392B} .field input,.field select{ width:100%;padding:14px 16px;border-radius:var(--r-sm); border:1.5px solid var(--line);background:var(--bg); font-size:15.5px;transition:border-color .25s,background .25s,box-shadow .25s; } .field select{ appearance:none;-webkit-appearance:none;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6E7E' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 14px center;background-size:18px; padding-right:44px; } .field input:focus,.field select:focus{ outline:none;border-color:var(--brand);background:#fff; box-shadow:0 0 0 4px rgb(var(--brand-rgb) / .1); } .field.has-error input,.field.has-error select{border-color:#C0392B;background:#FEF5F4} .err{font-size:13px;color:#C0392B;min-height:0;display:none} .field.has-error .err{display:block} .form-note{font-size:12.5px;color:var(--muted);text-align:center; margin-top: 16px;} .form-success{ display:none;align-items:center;gap:12px; background:rgb(var(--brand-2-rgb) / .1);border:1px solid rgb(var(--brand-2-rgb) / .3); border-radius:var(--r-sm);padding:16px 18px;color:var(--brand); } .form-success.show{display:flex} .form-success .ic{font-size:20px;flex:0 0 auto} .form-success p{font-size:14.5px;font-weight:600;margin:0} /* ---------- Contact ---------- */ .contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} .contact-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px} .contact-card{ display:flex;gap:16px;align-items:flex-start; background:#fff;border:1px solid var(--line);border-radius:var(--r-lg); padding:26px 24px; transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease); } .contact-card:hover{transform:translateY(-5px);box-shadow:var(--sh);border-color:transparent} .contact-card .detail-ic{margin-bottom:0;width:46px;height:46px;font-size:20px;border-radius:14px} .contact-card h3{font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700} .contact-card p{margin-top:6px;font-size:15.5px;font-weight:600;color:var(--dark);word-break:break-word;line-height:1.5} /* ---------- Footer ---------- */ .site-footer{background:var(--dark);color:rgba(255,255,255,.72);padding-top:76px;position:relative} .site-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--brand-2),var(--gold),var(--brand-2))} .footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:44px;padding-bottom:52px} .foot-logo{height:50px;width:auto;object-fit:contain;background:#fff;border-radius:12px;padding:8px 12px} .foot-name{margin-top:18px;color:#fff;font-size:17px;line-height:1.5} .foot-name strong{font-weight:800} .foot-rera{margin-top:10px;font-size:13.5px;letter-spacing:.06em} .foot-rera strong{color:var(--gold-soft)} .foot-desc{margin-top:14px;font-size:14.5px;line-height:1.7;max-width:330px} .foot-col h3{color:#fff;font-size:15px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:20px} .foot-col ul{display:grid;gap:11px} .foot-col a{font-size:15px;transition:color .25s var(--ease),padding-left .25s var(--ease)} .foot-col a:hover{color:var(--gold-soft);padding-left:5px} .foot-contact li{display:flex;align-items:flex-start;gap:11px;font-size:14.5px;line-height:1.6} .foot-contact .ic{color:var(--gold);font-size:16px;margin-top:3px;flex:0 0 auto} .foot-contact a{display:flex;align-items:flex-start;gap:11px;word-break:break-word} .foot-contact a:hover{padding-left:0} .footer-bottom{ display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center; border-top:1px solid rgba(255,255,255,.1);padding-block:24px;font-size:13.5px; } .foot-legal-note{opacity:.65} /* ---------- Floating CTA ---------- */ .float-cta{ position:fixed;right:22px;bottom:26px;z-index:850; display:flex;flex-direction:column;gap:12px;align-items:flex-end; } .fc-btn{ display:inline-flex;align-items:center;gap:0; height:54px;padding:0 17px;border-radius:var(--r-pill); color:#fff;font-weight:700;font-size:15px;box-shadow:var(--sh); transition:gap .35s var(--ease),padding .35s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease); } .fc-btn .ic{font-size:22px;flex:0 0 auto} .fc-btn span{max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .35s var(--ease)} .fc-btn:hover{gap:10px;padding:0 22px;transform:translateY(-3px);box-shadow:var(--sh-lg)} .fc-btn:hover span{max-width:140px} .fc-call{background:var(--brand)} .fc-wa{background:#25D366} .fc-apply{background:var(--gold);color:#fff} .mobile-bar{display:none} .to-top{ position:fixed;left:22px;bottom:26px;z-index:840; width:48px;height:48px;border-radius:50%; background:var(--dark);box-shadow:var(--sh); opacity:0;visibility:hidden;transform:translateY(12px); transition:opacity .35s var(--ease),visibility .35s,transform .35s var(--ease),background .3s; } .to-top.show{opacity:1;visibility:visible;transform:translateY(0)} .to-top:hover{background:var(--brand)} .to-top::before{ content:"";position:absolute;top:53%;left:50%;width:11px;height:11px; border-top:2px solid #fff;border-left:2px solid #fff; transform:translate(-50%,-50%) rotate(45deg); } /* ---------- Lightbox ---------- */ .lightbox{ position:fixed;inset:0;z-index:1000; background:rgb(var(--dark-rgb) / .95); display:flex;align-items:center;justify-content:center;padding:70px 80px; opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s; } .lightbox.open{opacity:1;visibility:visible} .lb-stage{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:16px} .lb-stage img{ max-width:100%;max-height:78vh;object-fit:contain; border-radius:var(--r);box-shadow:0 30px 80px rgba(0,0,0,.5); transform:scale(.94);opacity:0;transition:transform .4s var(--ease),opacity .4s var(--ease); } .lightbox.open .lb-stage img{transform:scale(1);opacity:1} .lb-close,.lb-nav{ position:absolute;z-index:2;border-radius:50%; background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22); transition:background .3s var(--ease),transform .3s var(--ease); } .lb-close:hover,.lb-nav:hover{background:var(--gold);border-color:var(--gold)} .lb-close{top:22px;right:24px;width:48px;height:48px} .lb-close::before,.lb-close::after{ content:"";position:absolute;top:50%;left:50%;width:18px;height:2px;background:#fff;border-radius:2px; } .lb-close::before{transform:translate(-50%,-50%) rotate(45deg)} .lb-close::after{transform:translate(-50%,-50%) rotate(-45deg)} .lb-nav{top:50%;transform:translateY(-50%);width:52px;height:52px} .lb-nav::before{content:"";position:absolute;top:50%;left:50%;width:12px;height:12px;border-top:2px solid #fff;border-right:2px solid #fff} .lb-prev{left:22px} .lb-prev::before{transform:translate(-30%,-50%) rotate(-135deg)} .lb-next{right:22px} .lb-next::before{transform:translate(-70%,-50%) rotate(45deg)} .lb-count{ position:absolute;bottom:26px;left:50%;transform:translateX(-50%); color:rgba(255,255,255,.72);font-size:14px;font-weight:600;letter-spacing:.06em; } /* ---------- Modal ---------- */ .modal{ position:fixed;inset:0;z-index:1010; background:rgb(var(--dark-rgb) / .62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px); display:flex;align-items:center;justify-content:center;padding:24px; opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s; } .modal.open{opacity:1;visibility:visible} .modal-panel{ background:#fff;border-radius:var(--r-lg);padding:38px 36px; max-width:620px;width:100%;max-height:82vh;overflow-y:auto; box-shadow:var(--sh-lg);position:relative; transform:translateY(18px) scale(.98);transition:transform .35s var(--ease); } .modal.open .modal-panel{transform:translateY(0) scale(1)} .modal-close{ position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%; background:var(--bg);transition:background .25s; } .modal-close:hover{background:var(--line)} .modal-close::before,.modal-close::after{ content:"";position:absolute;top:50%;left:50%;width:15px;height:2px;background:var(--dark);border-radius:2px; } .modal-close::before{transform:translate(-50%,-50%) rotate(45deg)} .modal-close::after{transform:translate(-50%,-50%) rotate(-45deg)} .modal-title{font-size:24px;margin-bottom:16px;padding-right:40px} .modal-body{color:var(--muted);font-size:15.5px;line-height:1.75} .modal-body p{margin-bottom:12px} .modal-body h4{color:var(--dark);font-size:16px;font-weight:700;margin:18px 0 8px} .modal-body ul{display:grid;gap:8px;margin:10px 0 14px;padding-left:2px} .modal-body li{display:flex;gap:10px} .modal-body li::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--gold);margin-top:9px} .modal-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px} /* ---------- Inline CTA banner (light blue) ---------- */ .inline-cta{ display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap; background:rgb(var(--brand-rgb) / .06);border:1px solid rgb(var(--brand-rgb) / .25);border-radius:var(--r-lg); padding:20px 28px;margin-top:44px; } .inline-cta--wide{margin-top:36px} .inline-cta p{font-size:16px;font-weight:700;color:var(--brand);display:flex;align-items:center;gap:8px} .inline-cta-sub{display:block;font-size:13px;font-weight:500;color:var(--muted);margin-top:2px} .inline-cta-actions{display:flex;gap:12px;flex-wrap:wrap} /* ---------- Download documents box ---------- */ .download-box{margin-top:24px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px} .download-box h3{font-size:14px;font-weight:700;color:var(--text);margin-bottom:14px} .download-btn{ display:flex;align-items:center;gap:10px;width:100%; padding:13px 18px;border-radius:var(--r-sm);margin-bottom:10px; font-weight:700;font-size:14.5px;border:1.5px solid transparent; transition:opacity .25s var(--ease); } .download-btn:hover{opacity:.85} .download-btn--solid{background:#1A2B6B;color:#fff} .download-btn--brand{background:transparent;border-color:#1A2B6B;color:#1A2B6B} .download-btn--green{background:transparent;border-color:var(--brand);color:var(--brand)} .download-btn--amber{background:transparent;border-color:var(--gold-soft);color:var(--gold-soft)} .download-note{font-size:12px;color:var(--muted);margin-top:4px} /* ---------- About grid ---------- */ .about-head{margin-bottom:28px} .about-head .sec-sub{color:var(--muted);font-size:14.5px} .about-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:start;padding-top:24px;border-top:1px solid var(--line)} .about-copy p{color:var(--text);font-size:15.5px;line-height:1.75} .about-highlights{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden} .about-highlights-head{background:var(--dark);color:#fff;font-weight:700;font-size:16px;padding:14px 22px} .about-highlights-list{display:grid} .about-highlights-list li{ display:flex;flex-direction:column;gap:4px;padding:16px 22px; border-bottom:1px solid var(--line-soft); } .about-highlights-list li:nth-child(even){background:var(--bg)} .about-highlights-list li:last-child{border-bottom:0} .about-highlights-list li strong{display:flex;align-items:center;gap:8px;font-size:14.5px;color:var(--text)} .about-highlights-list li strong .ic{color:var(--brand);font-size:13px} .about-highlights-list li span:last-child{font-size:13px;color:var(--muted);padding-left:21px} /* ---------- Government pill (enquiry section) ---------- */ .gov-pill{ display:inline-flex;align-items:center;gap:8px; background:var(--brand);color:#fff;font-weight:700;font-size:14.5px; padding:10px 22px;border-radius:var(--r-pill);margin-bottom:18px; } /* ---------- Enquiry info panel ---------- */ .enquiry-inner{display:grid;grid-template-columns:1fr .9fr;gap:32px;align-items:start} .enquiry-info{border:2px solid var(--brand);border-radius:var(--r-lg);padding:24px;display:grid;gap:20px} .enquiry-info-item{display:flex;align-items:flex-start;gap:14px} .enquiry-info-ic{ flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center; width:42px;height:42px;border-radius:11px;background:var(--dark);color:#fff;font-size:17px; } .enquiry-info-item h3{font-size:15px;font-weight:700;color:var(--text)} .enquiry-info-item p{font-size:13px;color:var(--muted);margin-top:2px} .detail-ic--amber{background:rgb(var(--gold-soft-rgb) / .12);color:var(--gold-soft)} .support-hours{margin-top:24px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 24px} .support-hours h3{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--text);margin-bottom:14px} .support-hours-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} .support-hours-grid span{display:block;font-size:12.5px;color:var(--muted)} .support-hours-grid strong{display:block;font-size:14px;color:var(--text);margin-top:3px} /* ---------- Approval grid ---------- */ .approval-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:48px} .approval-tile{ display:flex;flex-direction:column;gap:4px; border:1px solid var(--line);border-radius:var(--r);padding:16px 18px; font-weight:700;font-size:14px;color:var(--text); } .approval-tile .ic{color:var(--brand);margin-right:6px} .approval-tile span{font-weight:500;font-size:12.5px;color:var(--muted)} .approval-tile--green{background:rgb(var(--brand-rgb) / .08);border-color:rgb(var(--brand-rgb) / .3);color:var(--brand)} .approval-tile--green-soft{background:rgb(var(--brand-rgb) / .04);border-color:rgb(var(--brand-rgb) / .18);color:var(--brand)} .approval-tile--amber{background:#FDF3E9;border-color:rgb(var(--gold-soft-rgb) / .3);color:var(--gold-soft)} /* ---------- Final CTA band ---------- */ .section-final-cta{background:var(--brand);padding:56px 0;text-align:center;color:#fff} .section-final-cta h2{font-size:clamp(24px,3vw,32px);font-weight:800;color:#fff} .section-final-cta p{margin-top:10px;font-size:15px;color:rgba(255,255,255,.85)} .final-cta-actions{display:flex;gap:14px;justify-content:center;margin-top:24px;flex-wrap:wrap} .btn-final-primary{background:#fff;color:var(--brand)} .btn-final-primary:hover{background:var(--dark);color:#fff} .btn-final-outline{border:1.5px solid rgba(255,255,255,.5);color:#fff} .btn-final-outline:hover{background:rgba(255,255,255,.12)} /* ---------- Location distance table ---------- */ .dist-table{margin-top:24px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden} .dist-table-head{background:var(--dark);color:#fff;font-weight:700;font-size:15px;padding:14px 22px} .dist-list{display:grid;padding: 10px;} .dist-item{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:14px 22px;border-bottom:1px solid var(--line-soft); background:#fff; } .dist-item:nth-child(even){background:var(--bg)} .dist-item:last-child{border-bottom:0} .dist-ic{display:none} .dist-name{font-size:14.5px;color:var(--text)} .dist-val{font-size:14px;font-weight:700;color:var(--brand)} /* ---------- Gallery header ---------- */ .gallery-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap} /* ---------- Footer government row ---------- */ .footer-gov-row{ display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap; padding:20px 0; } .footer-gov-row p{font-size:13px;color:rgba(255,255,255,.75);line-height:1.6} .footer-gov-row p strong{color:#fff} .footer-gov-badges{display:flex;gap:10px;flex-wrap:wrap} .footer-gov-badges span{ border:1px solid rgba(255,255,255,.25);border-radius:var(--r-sm); padding:7px 14px;font-size:12px;font-weight:600;color:rgba(255,255,255,.85); } .foot-apply-link{color:var(--gold-soft) !important;font-weight:700} .footer-tricolor{height:5px;background:linear-gradient(90deg,#FF9933 0 33%,#fff 33% 66%,#138808 66% 100%)} /* ---------- Scroll animations ---------- */ .reveal{opacity:0;transition:opacity .8s var(--ease),transform .8s var(--ease);will-change:opacity,transform} .reveal[data-anim="fade-up"]{transform:translateY(38px)} .reveal[data-anim="fade-left"]{transform:translateX(44px)} .reveal[data-anim="fade-right"]{transform:translateX(-44px)} .reveal.in-view{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important} .reveal{opacity:1;transform:none} .notice-track{animation:none !important} .notice-tag .ic{animation:none !important} } /* ========================================================= Property Registration page ========================================================= */ .reg-hero{ padding:calc(var(--header-h) + 56px) 0 64px; background: radial-gradient(900px 420px at 12% -10%, rgb(var(--brand-rgb) / .10), transparent 60%), radial-gradient(700px 380px at 100% 0%, rgb(var(--gold-rgb) / .08), transparent 55%), var(--bg); border-bottom:1px solid var(--line-soft); } .reg-hero-tag{ display:inline-flex;align-items:center;gap:8px; font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--brand-2);background:rgb(var(--brand-2-rgb) / .08); padding:7px 16px;border-radius:var(--r-pill);margin-bottom:18px; } .reg-hero-title{font-size:clamp(30px,4.4vw,30px);margin-bottom:14px} .reg-hero-sub{max-width:640px;margin-inline:auto;color:var(--muted);font-size:16.5px} .reg-hero-stats{ display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:34px; } .reg-hero-stats > div{ background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-lg); box-shadow:var(--sh-xs);padding:16px 28px;min-width:170px; } .reg-hero-stats strong{display:block;font-size:22px;font-weight:800;color:var(--brand)} .reg-hero-stats span{display:block;font-size:12.5px;color:var(--muted);margin-top:4px} .reg-form-section{padding-top:64px} .reg-layout{display:grid;grid-template-columns:300px 1fr;gap:32px;align-items:start} .reg-aside{display:grid;gap:20px;position:sticky;top:calc(var(--header-h) + 24px)} .reg-aside-card{ background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-xl); box-shadow:var(--sh-xs);padding:26px 24px; } .reg-aside-card h3{ display:flex;align-items:center;gap:10px;font-size:15.5px;margin-bottom:16px;color:var(--dark); } .reg-aside-card h3 .ic{color:var(--brand)} .reg-aside-card ul{display:grid;gap:12px} .reg-aside-card ul li{ position:relative;padding-left:20px;font-size:14px;color:var(--muted);line-height:1.55; } .reg-aside-card ul li::before{ content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:50%;background:var(--gold); } .reg-aside-help p{font-size:13.5px;color:var(--muted);margin-bottom:16px} .reg-aside-help h3 .ic{color:var(--gold)} .reg-panel{ background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-xl); box-shadow:var(--sh-sm);padding:38px 40px; } .reg-panel-head{display:flex;align-items:center;gap:16px;margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid var(--line-soft)} .reg-panel-head .ic{ width:46px;height:46px;flex:0 0 auto;padding:12px;box-sizing:border-box; background:rgb(var(--brand-rgb) / .08);color:var(--brand);border-radius:var(--r-lg); } .reg-panel-head h2{font-size:21px;margin-bottom:4px} .reg-panel-head p{font-size:13px;color:var(--muted)} .reg-panel-head p .req{margin-left:2px} .reg-alert{ display:none;background:#FEF5F4;border:1px solid rgb(var(--gold-rgb) / .3);color:var(--gold); border-radius:var(--r);padding:14px 18px;font-size:14px;font-weight:600;margin-bottom:24px; } .reg-alert.show{display:block} .form-fieldset{margin-bottom:34px} .form-fieldset:last-child{margin-bottom:0} .form-fieldset-title{ font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase; color:var(--brand);margin-bottom:20px;padding-bottom:10px;border-bottom:1px solid var(--line-soft); } .form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px} .form-row:last-child{margin-bottom:0} .form-fieldset .field textarea{ width:100%;min-height:52px;resize:vertical; background:var(--bg);border:1.5px solid var(--line);border-radius:var(--r); padding:13px 16px;font-size:15px;transition:border-color .25s var(--ease),background .25s var(--ease); } .form-fieldset .field textarea:focus{border-color:var(--brand);background:#fff;outline:none} .field.has-error input, .field.has-error select, .field.has-error textarea{border-color:#C0392B;background:#FEF5F4} .field.has-error .err{display:block} .plot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .plot-card input{position:absolute;opacity:0;pointer-events:none} .plot-card label{ display:flex;align-items:center;gap:12px;cursor:pointer; border:1.5px solid var(--line);border-radius:var(--r-lg);padding:16px; transition:border-color .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease); } .plot-card label:hover{border-color:var(--brand-2)} .plot-card input:checked + label{ border-color:var(--brand);background:rgb(var(--brand-rgb) / .05);box-shadow:0 0 0 3px rgb(var(--brand-rgb) / .10); } .radio-dot{ flex:0 0 auto;width:19px;height:19px;border-radius:50%;border:2px solid var(--line); position:relative;transition:border-color .25s var(--ease); } .plot-card input:checked + label .radio-dot{border-color:var(--brand)} .plot-card input:checked + label .radio-dot::after{ content:"";position:absolute;inset:3px;border-radius:50%;background:var(--brand); } .plot-info{display:flex;flex-direction:column;gap:4px;min-width:0} .plot-size{font-size:14.5px;font-weight:700;color:var(--dark)} .plot-price{font-size:12.5px;color:var(--muted)} .plot-price strong{font-weight:600;color:var(--muted);margin-left:2px} .category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .category-card input{position:absolute;opacity:0;pointer-events:none} .category-card label{ position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px; cursor:pointer;border:1.5px solid var(--line);border-radius:var(--r-lg);padding:24px 16px; transition:border-color .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease); } .category-card label:hover{border-color:var(--brand-2)} .category-card input:checked + label{ border-color:var(--brand);background:rgb(var(--brand-rgb) / .05);box-shadow:0 0 0 3px rgb(var(--brand-rgb) / .10); } .cat-check{ position:absolute;top:10px;right:10px;width:20px;height:20px;border-radius:50%; background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center; opacity:0;transform:scale(.6);transition:opacity .2s var(--ease),transform .2s var(--ease); } .cat-check svg{width:12px;height:12px} .category-card input:checked + label .cat-check{opacity:1;transform:scale(1)} .cat-icon{ width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center; background:rgb(var(--brand-rgb) / .08);color:var(--brand); } .cat-icon svg{width:22px;height:22px} .cat-label{font-size:14.5px;font-weight:700;color:var(--dark)} .cat-sub{font-size:12px;color:var(--muted);line-height:1.4} .reg-summary{ background:var(--bg);border:1px solid var(--line-soft);border-radius:var(--r-lg); padding:20px 22px;margin-bottom:20px; } .reg-summary-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;font-size:14px} .reg-summary-row span{color:var(--muted)} .reg-summary-row strong{color:var(--dark);font-weight:700;max-width:60%;text-align:right} .reg-summary-fee{ display:flex;align-items:center;justify-content:space-between; margin-top:8px;padding-top:14px;border-top:1px dashed var(--line); font-size:14.5px;font-weight:700;color:var(--dark); } .reg-summary-fee .amt{font-size:19px;color:var(--gold)} .confirm-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:22px} .confirm-row input{margin-top:3px;width:16px;height:16px;accent-color:var(--brand);flex:0 0 auto} .confirm-row label{font-size:13.5px;color:var(--muted);line-height:1.5; text-transform: capitalize;} @media (max-width:960px){ .reg-layout{grid-template-columns:1fr} .reg-aside{position:static;grid-template-columns:1fr 1fr} .reg-panel{padding:28px 22px} .form-row{grid-template-columns:1fr} .plot-grid,.category-grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:640px){ .reg-aside{grid-template-columns:1fr} .plot-grid,.category-grid{grid-template-columns:1fr} .reg-hero-stats > div{min-width:140px;padding:14px 18px} } /* Thank You page */ .ty-hero{padding:calc(var(--header-h) + 76px) 0 96px} .ty-card{ max-width:720px;margin:0 auto;text-align:center; background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r-xl); box-shadow:var(--sh);padding:56px 48px; } .ty-icon{ width:84px;height:84px;border-radius:50%; background:rgb(34 158 92 / .12); display:flex;align-items:center;justify-content:center; margin:0 auto 22px; } .ty-icon .ic{width:38px;height:38px;background-color:#229E5C} .ty-tag{ display:inline-flex;align-items:center;gap:7px; background:rgb(var(--brand-rgb) / .08);color:var(--brand); border-radius:999px;padding:7px 16px;font-size:12.5px;font-weight:800; letter-spacing:.06em;text-transform:uppercase;margin-bottom:18px; } .ty-tag .ic{width:14px;height:14px;background-color:var(--brand)} .ty-title{font-family:var(--ff-head);font-size:clamp(28px,4vw,38px);font-weight:800;color:var(--dark);margin-bottom:14px} .ty-sub{font-size:16px;color:var(--muted);line-height:1.7;max-width:560px;margin:0 auto 30px} .ty-sub strong{color:var(--dark)} .ty-meta{ display:grid;grid-template-columns:repeat(3,1fr);gap:14px; margin-bottom:36px; } .ty-meta-item{ background:var(--bg);border:1px solid var(--line-soft);border-radius:var(--r-lg); padding:16px 14px;text-align:center; } .ty-meta-item .ic{width:20px;height:20px;background-color:var(--brand);margin:0 auto 8px} .ty-meta-item span{display:block;font-size:12px;color:var(--muted);margin-bottom:4px} .ty-meta-item strong{display:block;font-size:14.5px;color:var(--dark);font-weight:800} .ty-steps{text-align:left;margin-bottom:36px} .ty-steps h2{font-size:18px;font-weight:800;color:var(--dark);margin-bottom:16px;text-align:center} .ty-steps ol{list-style:none;display:flex;flex-direction:column;gap:14px} .ty-steps li{display:flex;align-items:flex-start;gap:14px;font-size:14.5px;color:var(--text);line-height:1.6} .ty-step-num{ flex:0 0 auto;width:28px;height:28px;border-radius:50%; background:var(--brand);color:#fff;font-size:13px;font-weight:800; display:flex;align-items:center;justify-content:center; } .ty-actions{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:26px} .ty-actions .ic{width:15px;height:15px;background-color:currentColor;margin-right:6px} .ty-help{font-size:13.5px;color:var(--muted)} .ty-help a{color:var(--brand);font-weight:700;text-decoration:underline;text-underline-offset:3px} @media (max-width:640px){ .ty-card{padding:36px 22px} .ty-meta{grid-template-columns:1fr} .ty-actions{flex-direction:column;width:100%} .ty-actions .btn{width:100%} } /* ---------- Bank loan facility ---------- */ .section-loan{background:var(--white);border-top:1px solid var(--line-soft)} .loan-grid{ display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center; } .loan-media{ border:1px solid var(--line);border-radius:var(--r-xl); background:var(--white);box-shadow:var(--sh-sm); overflow:hidden; } .loan-media img{display:block;width:100%;height:auto} .loan-copy .eyebrow{margin-bottom:16px} .loan-copy .sec-sub{max-width:520px} .loan-actions{margin-top:30px} .loan-note{margin-top:18px;font-size:13px;color:var(--muted)} @media (max-width:900px){ .loan-grid{grid-template-columns:1fr;gap:34px} .loan-copy .sec-sub{max-width:none} } @media (max-width:560px){ .loan-actions .btn{width:100%;white-space:normal;text-align:center} }