/* ========================================================================== Premium design system (loaded site-wide) Luxury boutique-hotel styling: sticky nav, parallax hero, glassmorphism, scroll reveals. Page components are scoped under .la-page; the sticky nav and reveal/scale utilities below are global. ========================================================================== */ /* ---------- Global sticky navigation ---------- */ #sitelayout{ overflow-x:clip; } .navigation_bar{ position:-webkit-sticky; position:sticky; top:0; z-index:99990; transition:box-shadow .35s ease, background-color .35s ease; } .navigation_bar.is-scrolled{ box-shadow:0 8px 26px rgba(0,0,0,.28); } /* ---------- Global scroll-reveal utility (home page + anywhere) ---------- */ /* Hidden state is gated behind .fl-anim-ready (added to by JS) so content is never hidden if scripting is unavailable. */ .fl-anim-ready .fl-animate{ opacity:0; transform:translateY(34px); transition:opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); will-change:opacity, transform; } .fl-anim-ready .fl-animate.fl-left{ transform:translateX(-44px); } .fl-anim-ready .fl-animate.fl-right{ transform:translateX(44px); } .fl-anim-ready .fl-animate.fl-scale{ transform:scale(.92); } .fl-anim-ready .fl-animate.is-visible{ opacity:1; transform:none; } @media (prefers-reduced-motion:reduce){ .fl-anim-ready .fl-animate{ opacity:1 !important; transform:none !important; transition:none !important; } } .la-page{ --do-accent:#e96300; --do-ink:#1c1c20; --do-muted:#6d6d75; --do-radius:20px; color:var(--do-ink); background:#fff; overflow-x:hidden; } .la-page *{ box-sizing:border-box; } .la-page .do-wrap{ max-width:1200px; margin:0 auto; padding:0 24px; } /* ---------- Scroll reveal ---------- */ .la-page .reveal{ opacity:0; transform:translateY(34px); transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); will-change:opacity, transform; } .la-page .reveal.is-visible{ opacity:1; transform:none; } @media (prefers-reduced-motion:reduce){ .la-page .reveal{ opacity:1; transform:none; transition:none; } } /* ---------- Hero ---------- */ .do-hero{ position:relative; min-height:650px; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; } .do-hero-bg{ position:absolute; top:-8%; left:0; right:0; height:116%; background-size:cover; background-position:center center; background-repeat:no-repeat; will-change:transform; z-index:1; } .do-hero-inner{ position:relative; z-index:2; max-width:860px; padding:140px 24px 120px; color:#fff; } .do-breadcrumb{ display:inline-flex; align-items:center; flex-wrap:wrap; justify-content:center; gap:10px; margin:0 0 26px; font-size:13px; letter-spacing:.12em; text-transform:uppercase; padding:9px 18px; border-radius:999px; background:rgba(255,255,255,.12); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.22); animation:doFadeDown .9s ease both; } .do-breadcrumb a{ color:rgba(255,255,255,.85); text-decoration:none; transition:color .25s ease; } .do-breadcrumb a:hover{ color:#fff; } .do-breadcrumb span[aria-hidden]{ color:rgba(255,255,255,.55); } .do-breadcrumb .is-current{ color:var(--do-accent); font-weight:600; } .do-hero-title{ font-size:clamp(40px, 5.2vw, 68px); line-height:1.06; font-weight:700; margin:0 0 22px; color:#fff; letter-spacing:-.5px; animation:doHeroTitle 1.05s cubic-bezier(.2,.7,.25,1) .12s both; } .do-hero-sub{ font-size:19px; line-height:1.65; margin:0 auto; max-width:660px; color:rgba(255,255,255,.9); animation:doFadeUp 1s ease .4s both; } .do-hero-scroll{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); width:26px; height:44px; border:2px solid rgba(255,255,255,.6); border-radius:14px; z-index:2; } .do-hero-scroll:before{ content:""; position:absolute; left:50%; top:8px; width:4px; height:8px; border-radius:2px; background:#fff; transform:translateX(-50%); animation:doScroll 1.6s ease-in-out infinite; } @keyframes doHeroTitle{ from{ opacity:0; transform:translateY(40px); letter-spacing:4px; } to{ opacity:1; transform:none; letter-spacing:-.5px; } } @keyframes doFadeUp{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } } @keyframes doFadeDown{ from{ opacity:0; transform:translateY(-18px); } to{ opacity:1; transform:none; } } @keyframes doScroll{ 0%{ opacity:0; transform:translate(-50%,0); } 40%{ opacity:1; } 80%{ opacity:0; transform:translate(-50%,14px); } 100%{ opacity:0; } } /* ---------- Intro ---------- */ .do-intro{ padding:96px 0 40px; text-align:center; } .do-eyebrow{ display:inline-block; font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:var(--do-accent); font-weight:700; margin:0 0 18px; } .do-intro-title{ font-size:42px; line-height:1.15; font-weight:700; margin:0 auto 26px; max-width:720px; } .do-intro-lead{ font-size:20px; line-height:1.75; color:#3c3c44; max-width:820px; margin:0 auto 20px; } .do-intro-body{ font-size:17px; line-height:1.8; color:var(--do-muted); max-width:760px; margin:0 auto; } /* ---------- Section heads ---------- */ .do-section{ padding:70px 0; } .do-lightbites{ background:linear-gradient(180deg,#faf8f6 0%, #f4f1ee 100%); } .do-section-head{ text-align:center; max-width:680px; margin:0 auto 54px; } .do-section-kicker{ display:inline-flex; align-items:center; gap:8px; font-size:13px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:var(--do-accent); margin-bottom:14px; } .do-section-title{ font-size:40px; line-height:1.12; font-weight:700; margin:0 0 14px; } .do-section-intro{ font-size:17px; line-height:1.7; color:var(--do-muted); margin:0; } /* ---------- Town grouping ---------- */ .do-town{ margin:0 0 56px; } .do-town:last-child{ margin-bottom:0; } .do-town-name{ font-size:15px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--do-ink); margin:0 0 26px; display:flex; align-items:center; gap:16px; } .do-town-name span{ position:relative; padding-left:0; } .do-town-name:after{ content:""; flex:1; height:1px; background:linear-gradient(90deg, rgba(233,99,0,.55), rgba(0,0,0,0)); } /* ---------- Responsive card grid (3 / 2 / 1) ---------- */ .do-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; } /* ---------- Luxury venue cards (shared: Eating In uses the image variant) ---------- */ .do-card{ background:#fff; border-radius:var(--do-radius); overflow:hidden; box-shadow:0 14px 34px rgba(20,20,30,.08); border:1px solid rgba(20,20,30,.05); display:flex; flex-direction:column; transition:transform .45s cubic-bezier(.2,.7,.25,1), box-shadow .45s ease; } .do-card:hover{ transform:translateY(-8px); box-shadow:0 26px 56px rgba(20,20,30,.16); } .do-card-media{ position:relative; aspect-ratio:3/2; overflow:hidden; } .do-card-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s cubic-bezier(.2,.7,.25,1); } .do-card:hover .do-card-media img{ transform:scale(1.08); } .do-card-media:after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.45) 100%); } .do-card-loc{ position:absolute; top:14px; left:14px; z-index:2; display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; letter-spacing:.04em; color:#fff; padding:7px 13px; border-radius:999px; background:rgba(20,20,28,.32); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.25); } .do-card-loc i{ color:var(--do-accent); } .do-card-icon{ position:absolute; right:16px; bottom:-22px; z-index:2; width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--do-accent); color:#fff; font-size:18px; box-shadow:0 10px 22px rgba(233,99,0,.45); transition:transform .45s ease; } .do-card:hover .do-card-icon{ transform:translateY(-4px) rotate(-8deg); } .do-card-body{ padding:30px 26px 28px; flex:1; } .do-card-name{ font-size:20px; font-weight:700; line-height:1.3; margin:0 0 10px; color:var(--do-ink); } .do-card-tag{ display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--do-accent); background:rgba(233,99,0,.1); padding:5px 12px; border-radius:999px; margin:0 0 12px; } .do-card-desc{ font-size:15px; line-height:1.65; color:var(--do-muted); margin:0; } /* ---------- Image-free linked cards (.do-card--link) ---------- Used on Dining Out and Eating In: each card is an that opens a venue's website in a new tab. No imagery — a medallion icon, location pill, name, description and a "Visit website" affordance carry the design. The shared image-card rules above stay intact for any template still using the photo variant. */ .do-card--link{ position:relative; padding:28px 28px 24px; overflow:hidden; text-decoration:none; color:inherit; cursor:pointer; border-color:rgba(20,20,30,.06); transition:transform .45s cubic-bezier(.2,.7,.25,1), box-shadow .45s ease, border-color .45s ease; } .do-card--link:before{ content:""; position:absolute; left:0; top:0; width:100%; height:4px; background:linear-gradient(90deg, var(--do-accent), #ff9d4d); transform:scaleX(0); transform-origin:left; transition:transform .55s cubic-bezier(.2,.7,.25,1); } .do-card--link:hover{ border-color:rgba(233,99,0,.28); } .do-card--link:hover:before{ transform:scaleX(1); } .do-card--link:focus-visible{ outline:3px solid var(--do-accent); outline-offset:3px; } .do-card--link .do-card-top{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin:0 0 20px; } .do-card--link .do-card-medallion{ flex:none; width:54px; height:54px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:22px; color:var(--do-accent); background:rgba(233,99,0,.1); transition:background .4s ease, color .4s ease, transform .4s ease; } .do-card--link:hover .do-card-medallion{ background:var(--do-accent); color:#fff; transform:rotate(-6deg); } .do-card--link .do-card-loc{ position:static; display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; letter-spacing:.04em; color:var(--do-muted); padding:6px 12px; border-radius:999px; background:rgba(20,20,30,.05); border:0; backdrop-filter:none; -webkit-backdrop-filter:none; } .do-card--link .do-card-body{ padding:0; flex:1; } .do-card--link .do-card-name{ transition:color .35s ease; } .do-card--link:hover .do-card-name{ color:var(--do-accent); } .do-card--link .do-card-tag{ margin-top:12px; } .do-card--link .do-card-cta{ display:inline-flex; align-items:center; gap:9px; margin-top:20px; padding-top:18px; border-top:1px solid rgba(20,20,30,.07); font-size:13.5px; font-weight:700; letter-spacing:.02em; color:var(--do-accent); } .do-card--link .do-card-cta i{ transition:transform .35s ease; } .do-card--link:hover .do-card-cta i{ transform:translate(4px,-4px); } /* Subtle tonal cue so a second card grid reads distinctly from the first */ .do-card--evening{ background:#fffdfb; } /* ---------- Evening alternating blocks ---------- */ .do-evening{ background:#fff; } .do-eblock{ display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center; margin:0 0 80px; } .do-eblock:last-child{ margin-bottom:0; } .do-eblock.is-reversed .do-eblock-media{ order:2; } .do-eblock-media{ position:relative; border-radius:var(--do-radius); overflow:hidden; box-shadow:0 24px 50px rgba(20,20,30,.18); } .do-eblock-media img{ width:100%; height:100%; min-height:380px; object-fit:cover; display:block; transition:transform .9s cubic-bezier(.2,.7,.25,1); } .do-eblock:hover .do-eblock-media img{ transform:scale(1.05); } .do-eblock-badge{ position:absolute; left:20px; bottom:20px; z-index:2; font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#fff; padding:10px 18px; border-radius:999px; background:rgba(20,20,28,.34); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.28); } .do-eblock-kicker{ display:inline-flex; align-items:center; gap:8px; font-size:13px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:var(--do-accent); margin-bottom:12px; } .do-eblock-town{ font-size:34px; font-weight:700; line-height:1.1; margin:0 0 26px; position:relative; padding-bottom:18px; } .do-eblock-town:after{ content:""; position:absolute; left:0; bottom:0; width:56px; height:3px; border-radius:3px; background:var(--do-accent); } .do-venue-list{ list-style:none; margin:0; padding:0; } .do-venue{ position:relative; padding:20px 22px; margin:0 0 16px; border-radius:16px; background:rgba(250,248,246,.85); border:1px solid rgba(20,20,30,.06); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition:transform .35s ease, box-shadow .35s ease, background .35s ease; } .do-venue:last-child{ margin-bottom:0; } .do-venue:hover{ transform:translateX(6px); background:#fff; box-shadow:0 14px 30px rgba(20,20,30,.1); } .do-venue-name{ font-size:18px; font-weight:700; margin:0 0 6px; color:var(--do-ink); } .do-venue-desc{ font-size:14.5px; line-height:1.6; color:var(--do-muted); margin:0; } /* ---------- Featured "Perfect Night In" ---------- */ .do-featured{ background:linear-gradient(180deg,#faf8f6 0%, #f4f1ee 100%); } .do-highlights{ list-style:none; margin:24px 0 30px; padding:0; } .do-highlights li{ position:relative; padding:0 0 14px 34px; font-size:15.5px; line-height:1.55; color:#3c3c44; } .do-highlights li:last-child{ padding-bottom:0; } .do-highlights li i{ position:absolute; left:0; top:3px; width:20px; text-align:center; color:var(--do-accent); font-size:16px; } .do-featured .do-eblock-content p{ font-size:16.5px; line-height:1.75; color:var(--do-muted); margin:0 0 8px; } /* ---------- Destination guide ---------- */ .do-destinations{ background:#fff; } .do-dest{ margin-bottom:96px; } .do-dest:last-child{ margin-bottom:0; } .do-dest .do-eblock-media{ animation:doFloat 7s ease-in-out infinite; } .do-dest .do-eblock-media img{ min-height:460px; } .do-dest .do-eblock-media:after{ content:""; position:absolute; right:-18px; bottom:-18px; width:62%; height:58%; border:3px solid rgba(233,99,0,.6); border-radius:var(--do-radius); z-index:-1; } .do-dest.is-reversed .do-eblock-media:after{ right:auto; left:-18px; } @keyframes doFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } } @media (prefers-reduced-motion:reduce){ .do-dest .do-eblock-media{ animation:none; } } .do-overview{ font-size:16.5px; line-height:1.8; color:var(--do-muted); margin:0 0 24px; } .do-why{ display:flex; gap:14px; align-items:flex-start; padding:18px 20px; border-radius:16px; background:rgba(233,99,0,.07); border:1px solid rgba(233,99,0,.18); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); margin:0 0 28px; } .do-why i{ color:var(--do-accent); font-size:20px; margin-top:2px; } .do-why span{ font-size:15px; line-height:1.55; color:#3c3c44; } .do-why strong{ display:block; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--do-accent); margin-bottom:4px; } .do-subhead{ font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--do-ink); margin:0 0 13px; display:flex; align-items:center; gap:9px; } .do-subhead i{ color:var(--do-accent); } .do-iconblocks{ display:flex; flex-wrap:wrap; gap:11px; margin:0 0 26px; } .do-iconblocks:last-child{ margin-bottom:0; } .do-iconchip{ display:inline-flex; align-items:center; gap:9px; padding:10px 16px; border-radius:999px; background:#fff; border:1px solid rgba(20,20,30,.08); box-shadow:0 6px 16px rgba(20,20,30,.05); font-size:14px; font-weight:600; color:var(--do-ink); transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .do-iconchip:hover{ transform:translateY(-3px); box-shadow:0 12px 24px rgba(20,20,30,.1); border-color:rgba(233,99,0,.45); } .do-iconchip i{ color:var(--do-accent); font-size:15px; } /* ---------- Wave separator ---------- */ .do-wave{ line-height:0; margin:0; } .do-wave svg{ display:block; width:100%; height:72px; } .do-wave-dark{ background:#fff; } .do-wave-dark svg path{ fill:#16161a; } .do-wave-light{ background:#16161a; } .do-wave-light svg path{ fill:#fff; } /* ---------- Explore Lincolnshire Your Way ---------- */ .do-explore{ background:linear-gradient(180deg,#16161a 0%, #0e0e12 100%); color:#fff; padding:88px 0 96px; } .do-explore .do-section-title{ color:#fff; } .do-explore .do-section-intro{ color:rgba(255,255,255,.72); } .do-explore .do-section-kicker{ color:#ffae6b; } .do-explore-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:8px; } .do-explore-card{ position:relative; padding:34px 28px; border-radius:var(--do-radius); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:transform .4s cubic-bezier(.2,.7,.25,1), background .4s ease, border-color .4s ease; } .do-explore-card:hover{ transform:translateY(-8px); background:rgba(255,255,255,.09); border-color:rgba(233,99,0,.5); } .do-explore-icon{ width:58px; height:58px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:23px; color:#fff; background:linear-gradient(135deg,#e96300,#ff8a3d); box-shadow:0 12px 26px rgba(233,99,0,.4); margin:0 0 20px; } .do-explore-card h4{ font-size:19px; font-weight:700; margin:0 0 9px; color:#fff; } .do-explore-card p{ font-size:14.5px; line-height:1.6; color:rgba(255,255,255,.7); margin:0; } /* ---------- CTA ---------- */ .do-cta{ position:relative; background-size:cover; background-position:center center; background-attachment:fixed; text-align:center; padding:120px 24px; } .do-cta-inner{ max-width:720px; margin:0 auto; color:#fff; } .do-cta-title{ font-size:46px; line-height:1.1; font-weight:700; margin:0 0 18px; color:#fff; } .do-cta-text{ font-size:18px; line-height:1.7; color:rgba(255,255,255,.9); margin:0 0 34px; } .do-cta-actions{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; } .do-btn{ display:inline-flex; align-items:center; justify-content:center; padding:16px 34px; border-radius:999px; font-size:15px; font-weight:700; letter-spacing:.03em; text-decoration:none; transition:transform .3s ease, box-shadow .3s ease, background .3s ease, color .3s ease; } .do-btn-primary{ background:var(--do-accent); color:#fff; box-shadow:0 14px 30px rgba(233,99,0,.4); } .do-btn-primary:hover{ transform:translateY(-3px); box-shadow:0 20px 40px rgba(233,99,0,.55); color:#fff; } .do-btn-ghost{ background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.5); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } .do-btn-ghost:hover{ background:#fff; color:var(--do-ink); transform:translateY(-3px); } /* ---------- "Book Now" CTA — modern accent pill with sheen ---------- */ .do-btn-book{ position:relative; overflow:hidden; gap:10px; padding:17px 40px; color:#fff; background:linear-gradient(135deg, #ff7a18 0%, var(--do-accent, #e96300) 55%, #c94f00 100%); box-shadow:0 14px 30px rgba(233,99,0,.42); z-index:0; } .do-btn-book i{ font-size:1.05em; transition:transform .35s ease; } .do-btn-book:before{ content:""; position:absolute; top:0; left:-130%; width:60%; height:100%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform:skewX(-22deg); transition:left .65s ease; z-index:-1; } .do-btn-book:hover{ color:#fff; transform:translateY(-3px); box-shadow:0 22px 44px rgba(233,99,0,.58); } .do-btn-book:hover:before{ left:130%; } .do-btn-book:hover i{ transform:scale(1.12) rotate(-4deg); } /* Top-of-page hero booking action */ .do-hero-actions{ margin-top:34px; display:flex; flex-wrap:wrap; gap:14px; justify-content:center; animation:doFadeUp 1s ease .55s both; } /* ---------- Editorial content (default pages) ---------- */ .do-hero-eyebrow{ display:inline-block; font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:#ffae6b; font-weight:700; margin:0 0 14px; } .la-page-content{ padding:80px 0; } .la-content{ max-width:860px; margin:0 auto; font-size:17px; line-height:1.8; color:#3c3c44; } .la-content > *:first-child{ margin-top:0; } .la-content h2{ font-size:32px; font-weight:700; line-height:1.2; color:var(--do-ink); margin:46px 0 18px; } .la-content h3{ font-size:24px; font-weight:700; line-height:1.25; color:var(--do-ink); margin:38px 0 14px; } .la-content h4{ font-size:19px; font-weight:700; color:var(--do-ink); margin:28px 0 12px; } .la-content p{ margin:0 0 22px; } .la-content a{ color:var(--do-accent); text-decoration:underline; text-underline-offset:3px; } .la-content a:hover{ color:#111; } .la-content ul, .la-content ol{ margin:0 0 22px; padding-left:22px; } .la-content li{ margin:0 0 10px; line-height:1.7; } .la-content ul{ padding-left:0; } .la-content ul li{ list-style:none; position:relative; padding-left:26px; } .la-content ul li:before{ content:""; position:absolute; left:0; top:11px; width:8px; height:8px; border-radius:2px; background:var(--do-accent); } .la-content img{ max-width:100%; height:auto; border-radius:var(--do-radius); margin:18px 0; } .la-content blockquote{ margin:28px 0; padding:18px 26px; border-left:4px solid var(--do-accent); background:#faf8f6; border-radius:0 12px 12px 0; font-size:18px; font-style:italic; color:#444; } .la-content table{ width:100%; border-collapse:collapse; margin:0 0 22px; } .la-content th, .la-content td{ border:1px solid #e6e6e6; padding:12px 14px; text-align:left; } .la-comments{ max-width:860px; margin:54px auto 0; } /* ---------- Property: overview stat cards ---------- */ .prop-overview{ background:#fff; } .prop-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; } .prop-stat{ text-align:center; padding:40px 22px; border-radius:var(--do-radius); background:#fff; border:1px solid rgba(20,20,30,.07); box-shadow:0 14px 34px rgba(20,20,30,.07); transition:transform .4s cubic-bezier(.2,.7,.25,1), box-shadow .4s ease; } .prop-stat:hover{ transform:translateY(-8px); box-shadow:0 24px 50px rgba(20,20,30,.13); } .prop-stat-icon{ display:inline-flex; align-items:center; justify-content:center; width:66px; height:66px; border-radius:18px; font-size:26px; color:#fff; background:linear-gradient(135deg,#e96300,#ff8a3d); box-shadow:0 12px 26px rgba(233,99,0,.36); margin:0 0 18px; } .prop-stat-num{ display:block; font-size:42px; font-weight:700; line-height:1; color:var(--do-ink); } .prop-stat-label{ display:block; margin-top:8px; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--do-muted); font-weight:600; } /* ---------- Property: amenities ---------- */ .prop-amenities{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .prop-amenity{ position:relative; display:flex; align-items:center; gap:16px; padding:20px 22px; border-radius:16px; background:#fff; border:1px solid rgba(20,20,30,.07); box-shadow:0 8px 22px rgba(20,20,30,.05); transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .prop-amenity:hover{ transform:translateY(-4px); box-shadow:0 16px 32px rgba(20,20,30,.1); border-color:rgba(233,99,0,.35); } .prop-amenity-icon{ flex:0 0 46px; width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:19px; color:var(--do-accent); background:rgba(233,99,0,.1); } .prop-amenity-label{ flex:1; font-size:15.5px; font-weight:600; color:var(--do-ink); } .prop-amenity-check{ color:#37b24d; font-size:15px; } /* ---------- Property: masonry gallery ---------- */ .property_gallery{ display:block; column-count:3; column-gap:16px; } .property_gallery .photo_gallery_item{ break-inside:avoid; -webkit-column-break-inside:avoid; margin:0 0 16px; border-radius:16px; } .property_gallery .photo_gallery_item a{ border-radius:16px; } .property_gallery .photo_gallery_item img{ height:auto; } /* ---------- Property: lifestyle block ---------- */ .prop-love .do-eblock-content .la-content{ max-width:none; } .prop-love .do-eblock-media img{ min-height:380px; border-radius:var(--do-radius); } /* ---------- Tablet (2 columns) ---------- */ @media screen and (max-width:980px){ .do-hero{ min-height:520px; } .do-intro{ padding:70px 0 30px; } .do-intro-title{ font-size:34px; } .do-grid{ grid-template-columns:repeat(2,1fr); gap:22px; } .do-eblock{ grid-template-columns:1fr; gap:30px; margin-bottom:56px; } .do-eblock.is-reversed .do-eblock-media{ order:0; } .do-eblock-media img{ min-height:300px; } .do-dest .do-eblock-media img{ min-height:340px; } .do-dest{ margin-bottom:64px; } .do-explore-grid{ grid-template-columns:repeat(2,1fr); gap:18px; } .prop-stats{ grid-template-columns:repeat(2,1fr); } .prop-amenities{ grid-template-columns:repeat(2,1fr); } .property_gallery{ column-count:2; } .do-cta{ background-attachment:scroll; padding:90px 24px; } } /* ---------- Mobile (1 column) ---------- */ @media screen and (max-width:600px){ .do-hero{ min-height:440px; } .do-hero-inner{ padding:110px 20px 80px; } .do-hero-sub{ font-size:16px; } .do-section{ padding:54px 0; } .do-section-title{ font-size:30px; } .do-intro-title{ font-size:28px; } .do-intro-lead{ font-size:18px; } .do-grid{ grid-template-columns:1fr; gap:22px; } .do-eblock-town{ font-size:28px; } .do-explore-grid{ grid-template-columns:1fr; } .prop-stats{ grid-template-columns:repeat(2,1fr); gap:14px; } .prop-stat{ padding:28px 14px; } .prop-stat-num{ font-size:34px; } .prop-amenities{ grid-template-columns:1fr; } .property_gallery{ column-count:1; } .do-wave svg{ height:42px; } .do-cta-title{ font-size:32px; } .do-btn{ width:100%; } }