/* ========================================================================== Island Investments homepage Hero, featured villas, the three step plan, the guide note and the route through to the sales site. Structure follows the Booklium homepage for the first two sections; the sales hand-off follows islreal.com. ========================================================================== */ .home.page .site-content .ast-container{max-width:100%;padding:0;} /* Scope this to the page header only. MotoPress gives every accommodation card title the class entry-title as well, so the unscoped version hid all four villa names on the homepage. */ .home .ast-article-single>.entry-header,.home .ast-single-post-order,.home .ast-article-single>.entry-header .entry-title{display:none;} .home .site-content,.home .ast-article-single,.home .entry-content{background:transparent;box-shadow:none;padding:0;margin:0;} .home{background:var(--isl-ground);} .home .entry-content>*{font-family:Montserrat,-apple-system,sans-serif;} /* --- hero --- */ /* The largest scenic file held is 1024px, so a full width hero is carried by a heavy overlay rather than by the photograph's own detail. Revisit when higher resolution originals arrive. */ .islrd-hero{min-height:clamp(440px,58vh,560px) !important;padding:64px 24px;} .islrd-hero .wp-block-cover__inner-container{max-width:820px;text-align:center;} .islrd-hero .islrd-eyebrow{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.75);margin:0 0 14px;font-weight:600;} .islrd-hero .islrd-hero-title{font-size:clamp(32px,5vw,52px);line-height:1.12;font-weight:600;letter-spacing:-.03em;color:#fff;margin:0 0 16px;} .islrd-hero .islrd-hero-sub{font-size:clamp(15.5px,2vw,18px);line-height:1.65;color:rgba(255,255,255,.9);margin:0 auto 30px;max-width:620px;} .islrd-hero .islrd-hero-alt{margin:18px 0 0;font-size:14px;} .islrd-hero .islrd-hero-alt a{color:#fff;text-decoration:underline;text-underline-offset:3px;} .islrd-hero .islrd-hero-alt a:hover{color:#fff;opacity:.8;} /* the search form, sitting on the hero */ .islrd-hero .mphb_sc_search-wrapper{background:rgba(255,255,255,.96);border-radius:6px;padding:16px;box-shadow:0 10px 40px rgba(0,0,0,.22);} .islrd-hero .mphb_sc_search-form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:12px;align-items:end;margin:0;} .islrd-hero .mphb_sc_search-form>p,.islrd-hero .mphb_sc_search-form>div{margin:0;min-width:0;text-align:left;} .islrd-hero .mphb_sc_search-form label{display:block;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--isl-muted);margin:0 0 6px;} .islrd-hero .mphb_sc_search-form input[type=text],.islrd-hero .mphb_sc_search-form select{width:100%;height:46px;padding:0 12px;border:1px solid var(--isl-line);border-radius:4px;background:#fff;font-family:Montserrat,sans-serif;font-size:14.5px;color:var(--isl-ink);} .islrd-hero .mphb_sc_search-form input:focus,.islrd-hero .mphb_sc_search-form select:focus{outline:none;border-color:var(--isl-accent);box-shadow:0 0 0 3px rgba(228,60,72,.12);} .islrd-hero .mphb_sc_search-form button,.islrd-hero .mphb_sc_search-form input[type=submit]{height:46px;padding:0 26px;border:0;border-radius:4px;background:var(--isl-accent);color:#fff;font-family:Montserrat,sans-serif;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;} .islrd-hero .mphb_sc_search-form button:hover{background:var(--isl-accent-dp);} @media (max-width:860px){.islrd-hero .mphb_sc_search-form{grid-template-columns:repeat(2,minmax(0,1fr));}.islrd-hero .mphb_sc_search-submit-button-wrapper{grid-column:1 / -1;}.islrd-hero .mphb_sc_search-form button{width:100%;}} @media (max-width:520px){.islrd-hero .mphb_sc_search-form{grid-template-columns:1fr;}} /* --- sections --- */ .islrd-sec{max-width:1180px;margin:0 auto;padding:76px 24px;} .islrd-sec>h2{font-size:clamp(24px,3.2vw,34px);font-weight:600;letter-spacing:-.025em;color:var(--isl-ink);margin:0 0 12px;text-align:center;line-height:1.2;} .islrd-sec .islrd-sec-sub{text-align:center;color:var(--isl-muted);font-size:16.5px;line-height:1.7;max-width:640px;margin:0 auto 40px;} .islrd-sec-more{text-align:center;margin:36px 0 0;} .islrd-textlink{display:inline-block;font-size:14px;font-weight:600;color:var(--isl-ink);border:1px solid var(--isl-line);border-radius:4px;padding:12px 26px;text-decoration:none;background:#fff;} .islrd-textlink:hover{border-color:var(--isl-green);color:var(--isl-green);} /* --- featured villas: four across, not the list layout --- */ .mphb_sc_rooms-wrapper.islrd-featured{display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;max-width:none;} .islrd-featured .islrd-lrow{grid-template-columns:1fr !important;padding:0;overflow:hidden;border-radius:6px;} .islrd-featured .islrd-lrow-media{border-radius:0;} .islrd-featured .islrd-lrow-media img{height:210px !important;} .islrd-featured .islrd-lrow-body{padding:18px 18px 0;gap:4px;} .islrd-featured .islrd-lrow-body .mphb-room-type-title{font-size:17px;} .islrd-featured .islrd-lrow-aside{border-left:0;padding:12px 18px 18px;flex-direction:column;align-items:stretch;gap:10px;} .islrd-featured .islrd-lrow-aside .mphb-regular-price{text-align:left;font-size:11.5px;} .islrd-featured .islrd-lrow-aside .mphb-price{font-size:19px;} @media (max-width:1024px){.mphb_sc_rooms-wrapper.islrd-featured{grid-template-columns:repeat(2,minmax(0,1fr));}} @media (max-width:560px){.mphb_sc_rooms-wrapper.islrd-featured{grid-template-columns:1fr;}} /* --- three step plan --- */ .islrd-sec--plan{background:#fff;max-width:none;} .islrd-sec--plan>h2,.islrd-sec--plan .islrd-steps{max-width:1180px;margin-left:auto;margin-right:auto;} .islrd-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:44px;} .islrd-step{position:relative;padding-left:0;} .islrd-step-n{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--isl-green-tint);color:var(--isl-green);font-size:14px;font-weight:700;margin-bottom:14px;} .islrd-step h3{font-size:17px;font-weight:600;color:var(--isl-ink);margin:0 0 8px;letter-spacing:-.01em;} .islrd-step p{font-size:14.5px;line-height:1.7;color:var(--isl-body);margin:0;} @media (max-width:820px){.islrd-steps{grid-template-columns:1fr;gap:28px;}} /* --- guide --- */ .islrd-sec--guide{max-width:760px;text-align:center;padding-bottom:56px;} .islrd-sec--guide p{font-size:16.5px;line-height:1.8;color:var(--isl-body);margin:0;} /* --- route through to the sales site --- */ .islrd-sec--buy{background:var(--isl-green);max-width:none;text-align:center;padding-top:64px;padding-bottom:64px;} .islrd-sec--buy>h2{color:#fff;} .islrd-sec--buy p{color:rgba(255,255,255,.9);font-size:16.5px;line-height:1.75;max-width:640px;margin:0 auto 28px;} .islrd-sec--buy .wp-block-buttons{justify-content:center;} .islrd-sec--buy .wp-block-button__link{background:#fff !important;color:var(--isl-green) !important;border-radius:4px;font-family:Montserrat,sans-serif;font-size:14px;font-weight:600;padding:14px 30px;} .islrd-sec--buy .wp-block-button__link:hover{background:rgba(255,255,255,.88) !important;} /* --- corrections ---------------------------------------------------------- */ /* Astra constrains the content container to 1240px. The hero is broken out to the full viewport rather than fighting the container, which keeps this working whatever the theme's content width is set to. */ .home .islrd-hero{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);} /* theme.json sets a body colour that outranked the hero rules on anything but the heading, so the eyebrow and standfirst were rendering slate on a dark photograph. */ .home .islrd-hero .islrd-eyebrow{color:rgba(255,255,255,.78) !important;} .home .islrd-hero .islrd-hero-sub{color:rgba(255,255,255,.92) !important;} .home .islrd-hero .islrd-hero-title{color:#fff !important;} .home .islrd-hero .islrd-hero-alt a{color:#fff !important;} /* MotoPress puts a 'required fields' note and two hidden inputs inside the form, which took grid cells and pushed the button to the wrong place. */ .islrd-hero .mphb_sc_search-form .mphb-required-fields-tip{display:none !important;} .islrd-hero .mphb_sc_search-form>input[type=hidden],.islrd-hero .mphb_sc_search-form>input:not([type=text]):not([type=submit]){display:none !important;} .islrd-hero .mphb_sc_search-form{grid-template-columns:1.2fr 1.2fr .8fr .8fr auto;} .islrd-hero .mphb_sc_search-check-in-date{grid-column:1;} .islrd-hero .mphb_sc_search-check-out-date{grid-column:2;} .islrd-hero .mphb_sc_search-adults{grid-column:3;} .islrd-hero .mphb_sc_search-children{grid-column:4;} .islrd-hero .mphb_sc_search-submit-button-wrapper{grid-column:5;} /* the homepage also carries the mphb_rooms shortcode, so it picks up the listing body class; the featured grid must not inherit the list width */ .home .mphb_sc_rooms-wrapper.islrd-featured{max-width:none !important;} .home .islrd-sec--featured{padding-top:64px;} /* the featured strip is a taster; the route to the rest is the button below it, not pagination */ .islrd-sec--featured .mphb-pagination,.islrd-sec--featured .page-numbers, .islrd-sec--featured nav.navigation,.islrd-sec--featured .nav-links{display:none !important;} .islrd-featured .islrd-lrow-media img{height:210px !important;object-fit:cover;} .islrd-featured .islrd-lrow{align-content:start;} .islrd-featured .islrd-lrow-body .mphb-room-type-title{display:block !important;margin:0;} .islrd-featured .islrd-lrow-body .mphb-room-type-title a{color:var(--isl-ink);text-decoration:none;} .islrd-featured .islrd-lrow-body .mphb-room-type-title a:hover{color:var(--isl-accent);} /* --- featured section header, heading left and the route to the rest on the right, as on the Booklium homepage. The grid shows every property rather than a fixed number, so adding or removing a villa needs no change here. --- */ .islrd-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:36px;} .islrd-sec-head-text{flex:1 1 auto;min-width:0;} .islrd-sec--featured .islrd-sec-head h2{text-align:left;margin:0 0 10px;} .islrd-sec--featured .islrd-sec-head .islrd-sec-sub{text-align:left;margin:0;max-width:560px;} .islrd-sec-cta{flex:0 0 auto;margin:0;} @media (max-width:720px){.islrd-sec-head{flex-direction:column;align-items:flex-start;gap:18px;}} /* featured-equal-height: one card was resolving taller than the rest, which left the others bottom aligned in the row. Cards are forced to fill their cell so the grid reads as a grid whatever any single card contains. */ .mphb_sc_rooms-wrapper.islrd-featured{align-items:stretch !important;} .islrd-featured .islrd-lrow{align-self:stretch !important;height:100% !important;grid-template-rows:auto auto 1fr !important;} .islrd-featured .islrd-lrow-aside{justify-content:flex-start;} /* --- stakes: the cost of doing nothing, stated plainly and without scaremongering --- */ .islrd-stakes{max-width:820px;margin:0 auto;padding:52px 24px 0;text-align:center;} .islrd-stakes p{margin:0;font-size:16.5px;line-height:1.75;color:var(--isl-body);border-left:3px solid var(--isl-accent);padding-left:22px;text-align:left;} @media (max-width:600px){.islrd-stakes p{font-size:15.5px;padding-left:16px;}} /* --- what is on your doorstep --- */ .islrd-sec--near{background:#fff;max-width:none;} .islrd-sec--near>h2,.islrd-sec--near>.islrd-sec-sub,.islrd-near-grid{max-width:1180px;margin-left:auto;margin-right:auto;} .islrd-near-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:8px;} .islrd-near{background:var(--isl-ground);border:1px solid var(--isl-line);border-radius:var(--isl-radius);padding:26px 28px;position:relative;} .islrd-near-title{font-size:17px;font-weight:600;color:var(--isl-ink);margin:0 0 10px;padding-left:24px;position:relative;letter-spacing:-.01em;} .islrd-near-title::before{content:'';position:absolute;left:0;top:3px;width:16px;height:16px;background-color:var(--isl-green);-webkit-mask-image:url(icons/location.svg);mask-image:url(icons/location.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;} .islrd-near-text{font-size:14.5px;line-height:1.7;color:var(--isl-body);margin:0 0 14px;} .islrd-near-links{margin:0;display:flex;flex-wrap:wrap;gap:8px;} .islrd-near-links a{font-size:13px;font-weight:500;color:var(--isl-green);background:#fff;border:1px solid var(--isl-line);border-radius:100px;padding:6px 14px;text-decoration:none;} .islrd-near-links a:hover{border-color:var(--isl-green);background:var(--isl-green-tint);} @media (max-width:760px){.islrd-near-grid{grid-template-columns:1fr;gap:18px;}} /* --- hero search, responsive ---------------------------------------------- The explicit column assignments above were written after the media queries and so beat them at every width, leaving five columns on a phone. These come last deliberately: source order is the fix, not more specificity. */ @media (max-width:900px){ .islrd-hero .mphb_sc_search-form{grid-template-columns:1fr 1fr;gap:14px;} .islrd-hero .mphb_sc_search-check-in-date, .islrd-hero .mphb_sc_search-check-out-date, .islrd-hero .mphb_sc_search-adults, .islrd-hero .mphb_sc_search-children{grid-column:auto;} .islrd-hero .mphb_sc_search-submit-button-wrapper{grid-column:1 / -1;} .islrd-hero .mphb_sc_search-form button{width:100%;height:50px;} } @media (max-width:560px){ .islrd-hero .mphb_sc_search-form{grid-template-columns:1fr;gap:12px;} .islrd-hero .mphb_sc_search-wrapper{padding:14px;} .islrd-hero .mphb_sc_search-form label{font-size:10.5px;letter-spacing:.04em;} } /* MotoPress renders the submit as