{} *{} #IE-warning { display: none; position: fixed; width: 100%; height: 100%; z-index: 9999; background: white; } .IE-warning-message { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; } /* ============================================================ HAIKU HOMES — DEALS PAGE (complete self-contained styles) ============================================================ */ :root{ --navy:#0B1A2E; --navy-mid:#14284A; --gold:#C8A55A; --gold-lt:#DFC088; --cream:#F6F3EE; --cream-dk:#EAE6DD; --text-dk:#111827; --text-md:#4B5563; --text-lt:#9CA3AF; --white:#FFFFFF; --bdr:rgba(11,26,46,.09); --red:#DC2626; } *,*::before,*::after{box-sizing:border-box} body{margin:0;background:var(--cream);color:var(--text-dk);font-family:'DM Sans',sans-serif;line-height:1.6} /* ============= NAV ============= */ nav{position:fixed;top:0;left:0;right:0;z-index:200;height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;background:rgba(11,26,46,.97);backdrop-filter:blur(12px);border-bottom:1px solid rgba(200,165,90,.18);font-family:'DM Sans',sans-serif} nav .nav-brand{display:flex;align-items:center;gap:10px;text-decoration:none} nav .nav-mark{width:32px;height:32px;background:var(--gold);display:flex;align-items:center;justify-content:center;font-family:'Cormorant Garamond',serif;font-size:16px;font-weight:600;color:var(--navy)} nav .nav-name{font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:400;color:var(--white);letter-spacing:.3px} nav .nav-name span{color:var(--gold)} nav .nav-links{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0} nav .nav-links li a{font-size:12px;font-weight:400;letter-spacing:.9px;text-transform:uppercase;color:rgba(255,255,255,.68);padding:6px 11px;transition:color .2s;white-space:nowrap;text-decoration:none;display:inline-block} nav .nav-links li a:hover, nav .nav-links li a.active{color:var(--gold)} nav .nav-cta-li a{background:var(--gold) !important;color:var(--navy) !important;padding:8px 18px !important} nav .nav-cta-li a:hover{background:var(--gold-lt) !important} nav .nav-hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:6px} nav .nav-hamburger span{width:22px;height:1.5px;background:var(--white);display:block} .nav-mobile{display:none;position:fixed;top:66px;left:0;right:0;background:rgba(11,26,46,.98);z-index:190;padding:16px 5vw 24px;border-bottom:1px solid rgba(200,165,90,.18)} .nav-mobile.open{display:block} .nav-mobile a{display:block;padding:12px 0;font-size:13px;letter-spacing:.8px;text-transform:uppercase;color:rgba(255,255,255,.7);border-bottom:1px solid rgba(255,255,255,.06);text-decoration:none} .nav-mobile a:hover, .nav-mobile a.active{color:var(--gold)} .nav-mobile .mob-cta{display:inline-block !important;margin-top:16px;background:var(--gold);color:var(--navy) !important;padding:10px 24px;font-size:11px;letter-spacing:1.2px;font-weight:500;border-bottom:none !important} /* ============= ROOT WRAPPER ============= */ .haiku-root{padding-top:66px;background:var(--cream)} /* ============= HERO ============= */ .haiku-hero{position:relative;min-height:420px;display:flex;align-items:center;overflow:hidden} .haiku-hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .haiku-hero-tint{position:absolute;inset:0;background:linear-gradient(120deg,rgba(11,26,46,.86) 0%,rgba(11,26,46,.55) 100%)} .haiku-hero-inner{position:relative;z-index:2;padding:80px 5vw;max-width:900px;color:var(--white)} .haiku-hero-inner .eyebrow{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:rgba(200,165,90,.85);margin-bottom:18px;font-weight:500} .haiku-hero-inner h1{font-family:'Cormorant Garamond',serif;font-size:clamp(44px,7vw,82px);font-weight:300;line-height:1.05;margin:0 0 22px;letter-spacing:-.5px} .haiku-hero-inner h1 em{font-style:italic;color:var(--gold);font-weight:400} .haiku-hero-inner p{font-size:16px;line-height:1.75;color:rgba(255,255,255,.78);max-width:620px;margin:0;font-weight:300} /* ============= SECTION ============= */ .haiku-section{padding:90px 5vw;max-width:1280px;margin:0 auto} .haiku-section .eyebrow{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:18px;font-weight:500} .haiku-section .section-h{font-family:'Cormorant Garamond',serif;font-size:clamp(32px,4.5vw,52px);font-weight:300;margin:0 0 18px;color:var(--navy);letter-spacing:-.3px;line-height:1.1} .haiku-section .section-h em{font-style:italic;color:var(--gold);font-weight:400} .haiku-section .section-sub{font-size:15px;color:var(--text-md);max-width:620px;margin:0 0 56px;line-height:1.8;font-weight:300} /* ============= DEALS GRID + CARDS ============= */ .deals-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(440px,1fr));gap:36px} .empty-state{grid-column:1/-1;padding:80px 20px;text-align:center;color:var(--text-lt);font-size:14px;letter-spacing:.4px} .deal-card{background:var(--white);overflow:hidden;box-shadow:0 2px 12px rgba(11,26,46,.05);transition:transform .35s ease,box-shadow .35s ease;display:flex;flex-direction:column;opacity:0;transform:translateY(18px);transition-property:opacity,transform,box-shadow} .deal-card.v{opacity:1;transform:translateY(0)} .deal-card:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(11,26,46,.13)} /* Carousel */ .carousel{position:relative;background:var(--navy)} .carousel-track{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden} .car-arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(11,26,46,.7);color:var(--white);border:none;width:38px;height:38px;font-size:22px;cursor:pointer;z-index:6;display:flex;align-items:center;justify-content:center;transition:background .2s} .car-arrow:hover{background:var(--navy)} .car-arrow.prev{left:10px} .car-arrow.next{right:10px} .car-dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:6} .car-dot{width:8px;height:8px;border-radius:50%;border:none;background:rgba(255,255,255,.45);cursor:pointer;padding:0;transition:background .2s,transform .2s} .car-dot.on{background:var(--gold);transform:scale(1.3)} .pair-label{position:absolute;top:12px;left:12px;background:rgba(11,26,46,.85);color:var(--white);padding:5px 12px;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;font-weight:500;z-index:5} /* Before/After slider */ .ba-wrap{position:relative;width:100%;height:100%;cursor:ew-resize;user-select:none;overflow:hidden;background:#000} .ba-img-before,.ba-clip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none} .ba-clip{position:absolute;inset:0;width:50%;overflow:hidden} .ba-clip img{width:200%;left:0} .ba-line{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--white);box-shadow:0 0 0 1px rgba(11,26,46,.25);pointer-events:none} .ba-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--white);color:var(--navy);width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;letter-spacing:.5px;box-shadow:0 4px 14px rgba(0,0,0,.3);pointer-events:none} .ba-labels{position:absolute;top:12px;left:0;right:0;display:flex;justify-content:space-between;padding:0 16px;pointer-events:none;z-index:4} .ba-lbl{background:rgba(11,26,46,.78);color:var(--white);padding:5px 11px;font-size:10px;letter-spacing:1.8px;font-weight:500;text-transform:uppercase} .ba-lbl.aft{background:rgba(200,165,90,.92);color:var(--navy)} .ba-nophoto{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:rgba(255,255,255,.4);font-size:12px;letter-spacing:.5px} .deal-badge{position:absolute;top:14px;right:14px;background:rgba(255,255,255,.95);color:var(--navy);padding:5px 14px;font-size:10px;letter-spacing:1.6px;font-weight:600;text-transform:uppercase;z-index:5} .deal-badge.pip{background:var(--gold);color:var(--navy)} .expand-btn{position:absolute;top:14px;left:14px;background:rgba(11,26,46,.7);color:var(--white);border:none;width:32px;height:32px;font-size:14px;cursor:pointer;z-index:7;display:flex;align-items:center;justify-content:center;transition:background .2s} .expand-btn:hover{background:var(--navy)} /* Card body */ .deal-body{padding:26px 28px 28px;flex:1;display:flex;flex-direction:column} .deal-body h3{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:400;margin:0 0 4px;color:var(--navy);letter-spacing:-.2px} .deal-addr{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--text-lt);margin-bottom:22px;font-weight:400} .deal-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 18px;padding:18px 0;border-top:1px solid var(--bdr);border-bottom:1px solid var(--bdr);margin-bottom:14px} .deal-num .v{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:400;color:var(--navy);line-height:1.1;letter-spacing:-.3px} .deal-num .v.gold{color:var(--gold);font-weight:600} .deal-num .k{font-size:9.5px;letter-spacing:1.3px;text-transform:uppercase;color:var(--text-lt);margin-top:5px;font-weight:500} .deal-note{font-size:12px;color:var(--text-md);font-style:italic;line-height:1.6;padding-top:8px} .admin-ctrl{display:none;gap:10px;padding:0 28px 22px} .admin-ctrl.show{display:flex} .btn-edit-card,.btn-del-card{flex:1;padding:9px 14px;border:none;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;font-weight:500;cursor:pointer;font-family:'DM Sans',sans-serif;transition:opacity .2s} .btn-edit-card{background:var(--navy);color:var(--white)} .btn-del-card{background:var(--red);color:var(--white)} .btn-edit-card:hover,.btn-del-card:hover{opacity:.85} /* ============= CTA BAND ============= */ .haiku-cta{background:var(--navy);padding:80px 5vw;text-align:center;color:var(--white)} .haiku-cta h2{font-family:'Cormorant Garamond',serif;font-size:clamp(34px,4.5vw,52px);font-weight:300;margin:0 0 32px;line-height:1.15} .haiku-cta h2 em{font-style:italic;color:var(--gold);font-weight:400} .haiku-cta-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap} .haiku-btn-gold,.haiku-btn-outline{padding:14px 36px;font-size:11px;letter-spacing:1.8px;text-transform:uppercase;font-weight:500;text-decoration:none;transition:all .25s;display:inline-block} .haiku-btn-gold{background:var(--gold);color:var(--navy)} .haiku-btn-gold:hover{background:var(--gold-lt)} .haiku-btn-outline{border:1px solid rgba(255,255,255,.4);color:var(--white)} .haiku-btn-outline:hover{background:rgba(255,255,255,.08);border-color:var(--white)} /* ============= FOOTER ============= */ footer{background:var(--navy);padding:60px 5vw 28px;font-family:'DM Sans',sans-serif;border-top:1px solid rgba(200,165,90,.12)} footer .footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:48px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.07);max-width:1280px;margin:0 auto} footer .footer-brand h3{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:300;color:var(--white);margin:0 0 12px} footer .footer-brand h3 span{color:var(--gold)} footer .footer-brand p{font-size:13px;line-height:1.8;color:rgba(255,255,255,.38);margin:0 0 18px} footer .footer-tagline{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:15px;color:rgba(200,165,90,.45)} footer .footer-col h4{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin:0 0 18px;font-weight:500} footer .footer-col ul{list-style:none;margin:0;padding:0} footer .footer-col li{margin-bottom:9px} footer .footer-col a{font-size:13px;color:rgba(255,255,255,.38);transition:color .2s;text-decoration:none} footer .footer-col a:hover{color:var(--white)} footer .footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:22px;flex-wrap:wrap;gap:8px;max-width:1280px;margin:0 auto} footer .footer-bottom p{font-size:11px;color:rgba(255,255,255,.22);margin:0} /* ============= ADMIN BANNER + FAB ============= */ .admin-banner{display:none;position:fixed;top:66px;left:0;right:0;background:var(--gold);color:var(--navy);text-align:center;padding:10px 20px;font-size:12px;letter-spacing:1.4px;text-transform:uppercase;font-weight:500;z-index:150} .admin-banner.show{display:flex;align-items:center;justify-content:center;gap:18px} .admin-banner button{background:var(--navy);color:var(--white);border:none;padding:5px 14px;font-size:10px;letter-spacing:1.2px;text-transform:uppercase;cursor:pointer;font-family:'DM Sans',sans-serif;font-weight:500} .fab{position:fixed;bottom:30px;right:30px;width:58px;height:58px;border-radius:50%;background:var(--gold);color:var(--navy);border:none;font-size:32px;font-weight:300;cursor:pointer;box-shadow:0 8px 26px rgba(200,165,90,.5);z-index:160;display:flex;align-items:center;justify-content:center;transition:transform .2s,background .2s} .fab:hover{transform:scale(1.08);background:var(--gold-lt)} .fab-tip{position:absolute;right:70px;top:50%;transform:translateY(-50%);background:var(--navy);color:var(--white);padding:7px 14px;font-size:11px;letter-spacing:1px;text-transform:uppercase;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s;font-weight:500} .fab:hover .fab-tip{opacity:1} /* ============= MODALS ============= */ .modal-bd{display:none;position:fixed;inset:0;background:rgba(11,26,46,.7);z-index:300;align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto;backdrop-filter:blur(4px)} .modal-bd.open{display:flex} .modal{background:var(--white);width:100%;max-width:680px;max-height:calc(100vh - 80px);overflow-y:auto;box-shadow:0 24px 60px rgba(11,26,46,.4)} .modal-hd{padding:24px 32px;border-bottom:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--white);z-index:2} .modal-hd h3{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:300;margin:0;color:var(--navy)} .modal-hd h3 em{font-style:italic;color:var(--gold);font-weight:400} .modal-x{background:none;border:none;font-size:28px;color:var(--text-lt);cursor:pointer;padding:0;line-height:1;width:32px;height:32px} .modal-x:hover{color:var(--navy)} .modal-body{padding:28px 32px} .modal-ft{padding:18px 32px;border-top:1px solid var(--bdr);display:flex;gap:12px;justify-content:flex-end;position:sticky;bottom:0;background:var(--white)} .frow{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:16px} .fg{display:flex;flex-direction:column} .fg label{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-md);margin-bottom:7px;font-weight:500} .fg input,.fg select{padding:10px 12px;border:1px solid var(--bdr);background:var(--cream);font-size:14px;font-family:'DM Sans',sans-serif;color:var(--text-dk)} .fg input:focus,.fg select:focus{outline:none;border-color:var(--gold);background:var(--white)} .fsec{font-family:'Cormorant Garamond',serif;font-size:18px;font-style:italic;color:var(--navy);margin:24px 0 14px;padding-bottom:8px;border-bottom:1px solid var(--bdr);font-weight:400} .calc-help{font-size:12px;color:var(--text-md);margin:0 0 14px;line-height:1.6} .pair-block{background:var(--cream);padding:18px;margin-bottom:14px;border-left:3px solid var(--gold)} .pair-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px} .pair-num{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--navy);font-weight:600} .pair-hd-btns{display:flex;gap:8px} .pair-swap,.pair-rm{background:none;border:1px solid var(--bdr);padding:5px 10px;font-size:10px;letter-spacing:1px;text-transform:uppercase;cursor:pointer;color:var(--text-md);font-family:'DM Sans',sans-serif} .pair-swap:hover{background:var(--gold);color:var(--navy);border-color:var(--gold)} .pair-rm:hover{background:var(--red);color:var(--white);border-color:var(--red)} .upload-row{display:flex;align-items:center;gap:10px;margin-top:6px;flex-wrap:wrap} .btn-upload{background:var(--navy);color:var(--white);border:none;padding:7px 14px;font-size:11px;letter-spacing:.8px;cursor:pointer;font-family:'DM Sans',sans-serif} .btn-upload:hover{background:var(--navy-mid)} .btn-upload:disabled{opacity:.6;cursor:wait} .upload-hint{font-size:11px;color:var(--text-lt)} .img-prev{display:none;max-width:100%;max-height:140px;margin-top:8px;border:1px solid var(--bdr)} .img-prev.on{display:block} .btn-add-pair{width:100%;background:none;border:1px dashed var(--gold);color:var(--gold);padding:12px;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;font-family:'DM Sans',sans-serif;font-weight:500;margin-top:6px} .btn-add-pair:hover{background:var(--gold);color:var(--navy)} .calc-box{background:var(--navy);color:var(--white);padding:18px 22px;margin-top:18px} .calc-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;font-size:13px} .calc-row.hi{padding:10px 0;border-top:1px solid rgba(255,255,255,.1);margin-top:6px} .calc-row.hi:first-of-type{border-top:1px solid rgba(255,255,255,.18)} .calc-k{color:rgba(255,255,255,.7);letter-spacing:.5px} .calc-v{font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:400} .calc-v.gold{color:var(--gold);font-weight:600} .btn-sub,.btn-can{padding:11px 28px;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;font-weight:500;border:none;cursor:pointer;font-family:'DM Sans',sans-serif;transition:opacity .2s} .btn-sub{background:var(--gold);color:var(--navy)} .btn-sub:hover{background:var(--gold-lt)} .btn-sub:disabled{opacity:.5;cursor:wait} .btn-can{background:none;color:var(--text-md);border:1px solid var(--bdr)} .btn-can:hover{background:var(--cream)} /* Password modal */ .pw-wrap{padding:24px 32px 32px;text-align:center} .pw-icon{font-size:38px;margin-bottom:16px} .pw-wrap h3{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:300;color:var(--navy);margin:0 0 8px} .pw-wrap p{color:var(--text-md);font-size:13px;margin:0 0 22px} .pw-row{display:flex;gap:10px;margin-bottom:10px} .pw-row input{flex:1;padding:11px 14px;border:1px solid var(--bdr);font-size:14px;font-family:'DM Sans',sans-serif;background:var(--cream)} .pw-row input:focus{outline:none;border-color:var(--gold);background:var(--white)} .pw-err{color:var(--red);font-size:12px;margin-top:6px;min-height:18px} /* Lightbox */ .lb-bd{display:none;position:fixed;inset:0;background:rgba(11,26,46,.96);z-index:400;align-items:center;justify-content:center} .lb-bd.open{display:flex} .lb-close{position:absolute;top:24px;right:30px;background:none;border:none;color:var(--white);font-size:38px;cursor:pointer;z-index:5;width:44px;height:44px;display:flex;align-items:center;justify-content:center} .lb-arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.1);border:none;color:var(--white);width:54px;height:54px;font-size:32px;cursor:pointer;z-index:5;display:flex;align-items:center;justify-content:center} .lb-arrow:disabled{opacity:.25;cursor:default} .lb-arrow.prev{left:30px} .lb-arrow.next{right:30px} .lb-stage{width:90vw;max-width:1200px;height:78vh;display:flex;align-items:center;justify-content:center} .lb-stage .ba-wrap{width:100%;height:100%} .lb-info{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);text-align:center;color:var(--white);max-width:80vw} .lb-info-label{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);margin-bottom:6px;font-weight:500;min-height:14px} .lb-info-addr{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:300;margin-bottom:4px} .lb-info-pair{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.5)} /* ============= RESPONSIVE ============= */ @media(max-width:900px){ nav .nav-links{display:none} nav .nav-hamburger{display:flex} footer .footer-grid{grid-template-columns:1fr;gap:36px} .deals-grid{grid-template-columns:1fr;gap:24px} .deal-nums{grid-template-columns:repeat(2,1fr)} .frow{grid-template-columns:1fr} .haiku-section{padding:60px 5vw} .lb-arrow.prev{left:10px}.lb-arrow.next{right:10px} }