/* Theme Name: Warwick RV Park Description: Custom one-page block theme for Warwick RV Park (Southern Downs Steam Railway). A pixel-faithful port of the approved HTML mockup (green v2_55). Content is editable with native WordPress blocks; layout and styling are locked. Built by Ivory Websites. Author: Ivory Websites Version: 1.0.1 Requires at least: 6.6 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: warwick-rv-park */ /* ============================================================ PART 1: ORIGINAL MOCKUP CSS Ported verbatim from warwick-rv-park-green-v2_55, in the same cascade order as the source file. Do not edit this part; all WordPress adaptations live in Part 2 at the bottom. ============================================================ */ :root{ --green-900:#0B3120; --green-800:#0E3B27; --green-700:#134A31; --green-600:#1C6B46; --green-500:#22885A; --brass:#1C6B46; --brass-2:#FFFFFF; --brass-soft:#0E3B27; --ink:#15271E; --ink-2:#44584D; --ink-3:#6C7D72; --paper:#F6F5F1; --paper-2:#EEEDE6; --card:#FFFFFF; --cream:#F1EFE9; --line:#E3E1DA; --line-2:#D4D2CA; --on-dark:#F1F2EC; --on-dark-2:#C7CBC3; --line-dark:rgba(241,242,236,.14); --display:'Zilla Slab',Georgia,serif; --body:'Inter',system-ui,-apple-system,Segoe UI,sans-serif; --container:1200px; --gutter:clamp(20px,5vw,60px); --section:clamp(60px,8vw,110px); --ease:cubic-bezier(.3,.7,.3,1); --nav-h:88px; } *{box-sizing:border-box;} html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px;} body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden;} h1,h2,h3,h4{font-family:var(--display); font-weight:600; line-height:1.08; letter-spacing:-.005em; color:var(--ink); margin:0;} p{margin:0 0 1em;} img{max-width:100%; display:block;} a{color:var(--green-600); text-decoration:none;} .wrap{max-width:var(--container); margin:0 auto; padding-inline:var(--gutter);} .ic{width:1em; height:1em; flex:0 0 auto; stroke:currentColor; stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round;} /* kicker with small brass rail tick */ .kicker{font-family:var(--body); font-size:12px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--brass); display:inline-flex; align-items:center; gap:11px;} .kicker::before{content:""; width:24px; height:24px; background-color:var(--brass); -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2272%22%20height%3D%2272%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%230E3B27%22%20d%3D%22M18%2018v31.758C38.244%2053.855%2059.076%2055.953%2080%2056a318%20318%200%200%200%2050.658-4.27C143.375%20100.622%20200.964%20135.96%20268%20136c15.1-.044%2030.093-1.903%2044.395-5.504c3.702%2025.632%2027.322%2044.78%2055.275%2044.813q.713-.016%201.424-.048c4.215%2014.473%2020.33%2024.72%2038.906%2024.738c22.09%200%2040-14.327%2040-32c-.022-13.555-10.718-25.63-26.697-30.137a48%2048%200%200%200%202.203-14.21c-.02-19.245-11.602-36.886-30.057-45.772C402.962%2063.617%20407.94%2047.92%20408%2032c-.033-7.4-1.128-6.774-3.268-14zm-2%20205v18h23v48H25v94h142v-94h-14v-48h23v-18zm360%200v18h17v46h46v-46h17v-18zM57%20241h14v48H57zm32%200h46v48H89zm231%2020c-7.25%200-14.577%201.013-19.154%202.54c-2.077.69-3.287%201.444-3.846%201.855V287h46v-21.605c-.56-.41-1.77-1.164-3.846-1.856C334.577%20262.012%20327.25%20261%20320%20261m-135%2044v30h247v18H185v30h279c36%200%2036-78%200-78zM25%20401v37.22L75.67%20401zm416%200v78h53.906c-4.965-9.187-9.113-19.953-12.734-31.557c-4.94-15.833-8.498-32.39-10.227-46.443zm-289%201.49c-10.72%200-20.57%203.55-28.455%209.533L164.325%20463h32.714a47.4%2047.4%200%200%200%201.96-13.51c0-26.064-20.936-47-47-47zm112%200c-8.46%200-16.374%202.217-23.213%206.088L284.327%20463h24.712a47.4%2047.4%200%200%200%201.96-13.51c0-26.064-20.936-47-47-47zm112%200c-8.46%200-16.374%202.217-23.213%206.088L396.327%20463c1.68%202.254%201.69%201.93%201.673%204.2V481h-56.945c8.586%209.524%2021.034%2015.49%2034.945%2015.49c26.064%200%2047-20.936%2047-47s-20.936-47-47-47m-278.994%205.174L43.456%20447H87.06c.512-13.423%205.137-25.816%2012.633-35.975zm130.105%2012.633C220.78%20428.302%20217%20438.43%20217%20449.49c0%204.703.69%209.234%201.96%2013.51h42.313zm112%200C332.78%20428.302%20329%20438.43%20329%20449.49c0%204.703.69%209.234%201.96%2013.51h42.313zm-227.684%205.392c-4.08%206.97-6.426%2015.096-6.426%2023.8c0%2026.064%2020.936%2047%2047%2047c13.91%200%2026.36-5.966%2034.945-15.49h-31.27zM25.023%20465c.522%2016.756%2014.085%2030%2030.977%2030s30.455-13.244%2030.977-30zm204.032%2016c8.586%209.524%2021.034%2015.49%2034.945%2015.49c13.91%200%2026.36-5.966%2034.945-15.49z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2272%22%20height%3D%2272%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%230E3B27%22%20d%3D%22M18%2018v31.758C38.244%2053.855%2059.076%2055.953%2080%2056a318%20318%200%200%200%2050.658-4.27C143.375%20100.622%20200.964%20135.96%20268%20136c15.1-.044%2030.093-1.903%2044.395-5.504c3.702%2025.632%2027.322%2044.78%2055.275%2044.813q.713-.016%201.424-.048c4.215%2014.473%2020.33%2024.72%2038.906%2024.738c22.09%200%2040-14.327%2040-32c-.022-13.555-10.718-25.63-26.697-30.137a48%2048%200%200%200%202.203-14.21c-.02-19.245-11.602-36.886-30.057-45.772C402.962%2063.617%20407.94%2047.92%20408%2032c-.033-7.4-1.128-6.774-3.268-14zm-2%20205v18h23v48H25v94h142v-94h-14v-48h23v-18zm360%200v18h17v46h46v-46h17v-18zM57%20241h14v48H57zm32%200h46v48H89zm231%2020c-7.25%200-14.577%201.013-19.154%202.54c-2.077.69-3.287%201.444-3.846%201.855V287h46v-21.605c-.56-.41-1.77-1.164-3.846-1.856C334.577%20262.012%20327.25%20261%20320%20261m-135%2044v30h247v18H185v30h279c36%200%2036-78%200-78zM25%20401v37.22L75.67%20401zm416%200v78h53.906c-4.965-9.187-9.113-19.953-12.734-31.557c-4.94-15.833-8.498-32.39-10.227-46.443zm-289%201.49c-10.72%200-20.57%203.55-28.455%209.533L164.325%20463h32.714a47.4%2047.4%200%200%200%201.96-13.51c0-26.064-20.936-47-47-47zm112%200c-8.46%200-16.374%202.217-23.213%206.088L284.327%20463h24.712a47.4%2047.4%200%200%200%201.96-13.51c0-26.064-20.936-47-47-47zm112%200c-8.46%200-16.374%202.217-23.213%206.088L396.327%20463c1.68%202.254%201.69%201.93%201.673%204.2V481h-56.945c8.586%209.524%2021.034%2015.49%2034.945%2015.49c26.064%200%2047-20.936%2047-47s-20.936-47-47-47m-278.994%205.174L43.456%20447H87.06c.512-13.423%205.137-25.816%2012.633-35.975zm130.105%2012.633C220.78%20428.302%20217%20438.43%20217%20449.49c0%204.703.69%209.234%201.96%2013.51h42.313zm112%200C332.78%20428.302%20329%20438.43%20329%20449.49c0%204.703.69%209.234%201.96%2013.51h42.313zm-227.684%205.392c-4.08%206.97-6.426%2015.096-6.426%2023.8c0%2026.064%2020.936%2047%2047%2047c13.91%200%2026.36-5.966%2034.945-15.49h-31.27zM25.023%20465c.522%2016.756%2014.085%2030%2030.977%2030s30.455-13.244%2030.977-30zm204.032%2016c8.586%209.524%2021.034%2015.49%2034.945%2015.49c13.91%200%2026.36-5.966%2034.945-15.49z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;} .kicker.on-dark{color:var(--brass-2);} /* buttons */ .btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--body); font-weight:600; font-size:15.5px; padding:15px 26px; border-radius:10px; border:1px solid transparent; cursor:pointer; transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease); min-height:52px;} .btn:hover{transform:translateY(-1px);} .btn-brass{background:var(--brass); color:#241802; border-color:var(--brass);} .btn-brass:hover{background:var(--brass-2);} .btn-green{background:var(--green-600); color:#fff; border-color:var(--green-600);} .btn-green:hover{background:var(--green-500);} .btn-white{background:#fff; color:var(--green-800); border-color:#fff;} .btn-white:hover{background:#eee9dd;} .btn-ghost{background:transparent; color:var(--on-dark); border-color:rgba(241,242,236,.4);} .btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,.06);} /* header */ header.site{position:sticky; top:0; z-index:60; background:#fff; border-bottom:1px solid var(--line); transition:box-shadow .2s var(--ease);} header.site.scrolled{box-shadow:0 10px 30px -22px rgba(0,0,0,.45);} .head-inner{width:100%; padding-inline:var(--gutter); min-height:104px; display:flex; align-items:center; justify-content:space-between; gap:20px;} .brand{display:inline-flex; align-items:center; gap:14px; color:var(--ink);} .brand-logo{height:78px; width:auto; display:block; flex:none;} .brand .word{font-family:var(--display); font-weight:700; font-size:21px; line-height:1.02; position:relative; top:8px;} .brand .word small{display:block; font-family:var(--body); font-weight:600; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--green-600); margin-top:3px;} nav.main{display:flex; align-items:center; gap:4px;} nav.main a.navlink{color:var(--ink); font-size:14.5px; font-weight:500; padding:9px 14px; opacity:.85; transition:opacity .18s;} nav.main a.navlink:hover{opacity:1;} nav.main .btn{margin-left:12px; padding:11px 22px; min-height:46px; font-size:14.5px;} .burger{display:none; width:46px; height:46px; border:1px solid var(--line-2); border-radius:10px; background:#fff; color:var(--ink); align-items:center; justify-content:center; cursor:pointer;} .burger .ic{width:24px; height:24px;} .mnav{display:none; border-top:1px solid var(--line); background:#fff;} .mnav a{display:block; padding:14px var(--gutter); color:var(--ink); font-weight:500; border-bottom:1px solid var(--line);} .mnav .btn{margin:16px var(--gutter); display:flex;} .mnav.open{display:block;} /* hero: full-bleed photo + green overlay */ .hero{position:relative; color:var(--on-dark); background:var(--green-800); overflow:hidden;} .hero .wrap{position:relative; z-index:2; display:grid; grid-template-columns:.88fr 1.18fr; gap:clamp(30px,5vw,60px); align-items:center; padding-top:clamp(34px,4.5vw,60px); padding-bottom:clamp(64px,8vw,112px);} .hero-copy{max-width:33rem;} .hero-photo{display:flex; justify-content:center;} .hero-collage{width:100%; max-width:820px; height:auto; display:block;} .polaroid{background:#fff; padding:15px 15px 62px; border-radius:3px; box-shadow:0 36px 72px -30px rgba(0,0,0,.72), 0 4px 12px -4px rgba(0,0,0,.35); transform:rotate(-2.4deg); width:100%; max-width:440px; position:relative;} .polaroid img{width:100%; aspect-ratio:4/3.05; object-fit:cover; display:block;} .polaroid figcaption{position:absolute; left:0; right:0; bottom:17px; text-align:center; font-family:'Caveat',cursive; font-weight:700; font-size:26px; color:var(--green-800); letter-spacing:.01em; white-space:nowrap;} .hero .kicker{margin-bottom:20px;} .hero h1{font-size:clamp(2.9rem,6.6vw,5.1rem); font-weight:700; letter-spacing:-.02em; color:#fff; line-height:1.02;} .hero .tagline{font-family:var(--display); font-weight:500; font-size:clamp(1.25rem,2.6vw,1.8rem); color:var(--brass-2); margin:.55em 0 0;} .hero .intro{color:var(--on-dark-2); font-size:clamp(1.02rem,1.5vw,1.14rem); margin:1em 0 0; max-width:33em;} .hero .cta-row{display:flex; flex-wrap:wrap; gap:13px; align-items:center; margin-top:34px;} .price-chip{display:inline-flex; align-items:baseline; gap:7px; margin-top:26px; padding:11px 18px; border:1px solid rgba(216,178,104,.5); border-radius:100px; color:var(--on-dark); font-size:14px; background:rgba(190,143,60,.12);} .price-chip b{font-family:var(--display); font-size:20px; color:var(--brass-2); font-weight:700;} /* stats strip overlapping hero */ .stats-wrap{position:relative; z-index:5; margin-top:-46px;} .stats{background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:0 30px 60px -40px rgba(20,38,29,.5); display:grid; grid-template-columns:repeat(4,1fr);} .stat{padding:clamp(22px,2.3vw,30px) clamp(20px,2.4vw,34px); border-right:1px solid var(--line); display:flex; flex-direction:column; justify-content:center;} .stat:last-child{border-right:0;} .stat .n{font-family:var(--display); font-weight:700; font-size:clamp(2.3rem,3.6vw,3.1rem); color:var(--green-700); line-height:1; letter-spacing:-.01em;} .stat .n span{color:var(--brass);} .stat .n .n2{font-size:.6em; font-weight:700;} .stat .l{color:var(--ink-2); font-size:15px; font-weight:500; margin-top:10px;} /* sections */ main{position:relative; z-index:2;} section.band{padding-block:var(--section);} .sec-head{max-width:44rem;} .sec-head h2{font-size:clamp(1.8rem,3.4vw,2.7rem); margin-top:.5em;} .sec-head .lead{color:var(--ink-2); font-size:clamp(1.02rem,1.5vw,1.14rem); margin-top:.8em;} /* booking: two balanced cards */ #booking{background:var(--paper);} .book-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:clamp(28px,4vw,44px);} .bcard{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:clamp(26px,3vw,36px); display:flex; gap:18px; align-items:flex-start;} .bcard .bi{width:46px; height:46px; border-radius:12px; background:var(--brass-soft); color:var(--green-700); display:grid; place-items:center; flex:none;} .bcard .bi .ic{width:23px; height:23px;} .bcard h3{font-size:1.15rem; margin-bottom:.35em;} .bcard p{color:var(--ink-2); font-size:15.5px; margin:0;} .book-note{margin-top:22px; display:inline-flex; align-items:center; gap:10px; color:var(--ink-3); font-size:15px;} .book-note .ic{width:18px; height:18px; color:var(--green-600);} /* charges + rules */ #charges{background:var(--paper-2);} .rates-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(20px,3vw,40px); align-items:stretch; margin-top:clamp(28px,4vw,44px);} .rateboard{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:clamp(26px,3vw,38px);} .rb-top{display:flex; align-items:baseline; justify-content:space-between; padding-bottom:16px; border-bottom:1px solid var(--line); margin-bottom:4px;} .rb-top h3{font-size:1.4rem;} .rb-top span{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--brass); font-weight:700;} .rb-row{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 0; border-bottom:1px solid var(--line);} .rb-row:last-child{border-bottom:0;} .rb-name{display:flex; align-items:center; gap:12px; font-size:1.12rem; font-weight:500;} .rb-name .ic{width:22px; height:22px; color:var(--green-600);} .rb-price{font-family:var(--display); font-weight:700; font-size:2.4rem; line-height:1; white-space:nowrap;} .rb-price sup{font-size:.44em; top:-.9em; color:var(--brass);} .rb-price small{font-family:var(--body); font-size:.86rem; font-weight:400; color:var(--ink-2); margin-left:5px;} .rules{background:var(--green-800); color:var(--on-dark); border-radius:18px; padding:clamp(26px,3vw,38px);} .rules h3{color:#fff; font-size:1.35rem; margin-bottom:6px;} .rules ul{list-style:none; margin:6px 0 0; padding:0;} .rules li{display:flex; align-items:center; gap:13px; padding:14px 0; border-bottom:1px solid var(--line-dark); font-size:16px;} .rules li:last-child{border-bottom:0;} .rules li .ic{width:21px; height:21px; color:var(--brass-2); flex:none;} .rules li b{color:#fff; font-weight:600;} /* precinct story */ #precinct{background:var(--paper);} .story{display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(30px,5vw,64px); align-items:center;} .story-media img{width:100%; height:clamp(320px,44vw,500px); object-fit:cover; border-radius:18px; box-shadow:0 30px 56px -34px rgba(20,38,29,.45);} .story-copy h2{font-size:clamp(1.9rem,3.4vw,2.7rem);} .story-copy p{color:var(--ink-2); margin-top:1em;} .story-copy .lead{color:var(--ink); font-size:1.16rem; font-family:var(--display); font-weight:500; line-height:1.42; margin-top:.8em;} /* membership feature band */ .members{background:var(--green-800); color:var(--on-dark); position:relative; overflow:hidden;} .members .wrap{position:relative; z-index:1; display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(30px,5vw,64px); align-items:center; padding-block:var(--section);} .members-media img{width:100%; height:clamp(300px,40vw,440px); object-fit:cover; border-radius:18px; box-shadow:0 30px 60px -34px rgba(0,0,0,.5);} .members h2{color:#fff; font-size:clamp(1.9rem,3.4vw,2.6rem); margin-top:.45em;} .members p{color:var(--on-dark-2); margin-top:1em; max-width:40em;} .members a.inline{color:var(--brass-2); border-bottom:1px solid rgba(216,178,104,.5); font-weight:600;} .members .btn{margin-top:22px;} /* facilities */ #facilities{background:var(--paper-2);} .facil-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:clamp(26px,3vw,40px);} .facil{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:24px 22px; transition:transform .2s var(--ease),box-shadow .2s var(--ease);} .facil:hover{transform:translateY(-3px); box-shadow:0 18px 36px -28px rgba(20,38,29,.4);} .facil .fi{width:44px; height:44px; border-radius:11px; background:var(--brass-soft); color:var(--green-700); display:grid; place-items:center; margin-bottom:15px;} .facil .fi .ic{width:23px; height:23px;} .facil .fn{font-family:var(--display); font-weight:700; font-size:1.5rem; line-height:1; color:var(--ink);} .facil .fl{color:var(--ink-2); font-size:14px; margin-top:6px;} .facil.text .fn{font-size:1.1rem; margin-top:2px;} .facil-note{margin-top:22px; color:var(--ink-3); font-size:15px;} /* location + map + nearby */ #location{background:var(--paper);} .loc-grid{display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(22px,3vw,40px); align-items:stretch; margin-top:clamp(26px,3vw,42px);} .loc-card{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:clamp(28px,3vw,40px); text-align:center;} .loc-card h3{font-size:1.5rem; margin-top:.4em;} .loc-card .loc-title{font-family:var(--display); font-weight:700; font-size:2rem; line-height:1.05; color:var(--ink); margin:0 0 20px;} .addr{display:flex; align-items:flex-start; justify-content:center; gap:12px; margin:16px 0 20px; font-size:1.08rem;} .addr .ic{width:22px; height:22px; color:var(--green-600); margin-top:3px; flex:none;} .nearby{display:flex; flex-wrap:wrap; justify-content:center; gap:9px; margin:2px 0 22px;} .chip{display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border:1px solid var(--line-2); border-radius:100px; font-size:13.5px; color:var(--ink-2); background:var(--cream);} .chip .ic{width:15px; height:15px; color:var(--brass);} .conv{list-style:none; padding:0; margin:0;} .conv li{display:flex; align-items:baseline; gap:11px; padding:7px 0; color:var(--ink-2); font-size:15.5px;} .conv li::before{content:""; width:7px; height:7px; margin-top:7px; border-radius:50%; background:var(--brass); flex:none;} .map{position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--line); min-height:340px; background:var(--cream);} .map img{width:100%; height:100%; min-height:340px; object-fit:cover; display:block;} .map iframe{width:100%; height:100%; min-height:340px; border:0; display:block;} .maplink{position:absolute; left:16px; bottom:16px; display:inline-flex; align-items:center; gap:8px; background:#fff; color:var(--green-700); font-weight:600; font-size:14px; padding:11px 17px; border-radius:100px; box-shadow:0 10px 24px -12px rgba(0,0,0,.55);} .maplink .ic{width:16px; height:16px; color:var(--brass);} .maplink:hover{background:#f3efe6;} /* final cta */ .final{background:var(--green-800); color:var(--on-dark); position:relative; overflow:hidden;} .final .wrap{position:relative; z-index:1; text-align:center; padding-block:clamp(64px,9vw,120px);} .final h2{color:#fff; font-size:clamp(2.1rem,4.4vw,3.2rem); max-width:18ch; margin-inline:auto;} .final p{color:var(--on-dark-2); margin-top:1em; font-size:1.08rem;} .final .cta-row{display:flex; justify-content:center; gap:13px; margin-top:30px;} .final .email{display:inline-flex; align-items:center; gap:9px; color:var(--brass-2); font-weight:500; margin-top:26px; font-size:15px;} .final .email .ic{width:17px; height:17px;} .final .ph-note{color:var(--on-dark-2); font-style:italic; font-size:13px; margin-top:16px; display:flex; justify-content:center; gap:8px; align-items:center;} .final .ph-note .ic{width:15px; height:15px;} /* footer */ footer.site{background:var(--green-900); color:var(--on-dark-2); padding-block:clamp(46px,5vw,68px) 30px;} footer.site .wrap{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:34px;} footer.site .fword{font-family:var(--display); font-weight:700; font-size:23px; color:#fff;} footer.site .fword small{display:block; font-family:var(--body); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--brass-2); margin-top:5px; font-weight:600;} footer.site .about{max-width:34ch; font-size:14.5px; line-height:1.6; margin-top:14px;} footer.site h4{color:var(--brass-2); font-family:var(--body); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; margin-bottom:15px;} footer.site .fcol p, footer.site .fcol a{color:var(--on-dark-2); font-size:14.5px; margin:0 0 9px;} footer.site .fcol a{display:block;} footer.site .fcol a:hover{color:#fff;} footer.site .legal{grid-column:1/-1; margin-top:34px; padding-top:22px; border-top:1px solid var(--line-dark); display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:space-between; font-size:13px; color:#7f9587;} /* sticky mobile book bar */ .bookbar{position:fixed; left:0; right:0; bottom:0; z-index:70; background:#fff; border-top:1px solid var(--line); box-shadow:0 -10px 30px -20px rgba(0,0,0,.4); padding:12px var(--gutter); display:none; align-items:center; justify-content:space-between; gap:14px; transform:translateY(110%); transition:transform .3s var(--ease);} .bookbar.show{transform:none;} .bookbar .bp{font-size:13px; color:var(--ink-3);} .bookbar .bp b{font-family:var(--display); font-size:18px; color:var(--green-700); display:block;} .bookbar .btn{min-height:46px; padding:12px 22px;} /* back to top */ .to-top{position:fixed; right:20px; bottom:20px; z-index:65; width:50px; height:50px; border-radius:12px; border:1px solid var(--line-dark); background:var(--green-600); color:#fff; display:grid; place-items:center; cursor:pointer; box-shadow:0 12px 26px -12px rgba(0,0,0,.5); opacity:0; transform:translateY(10px); pointer-events:none; transition:opacity .3s,transform .3s,background .18s;} .to-top.show{opacity:1; transform:none; pointer-events:auto;} .to-top:hover{background:var(--green-500);} .to-top .ic{width:22px; height:22px; stroke-width:1.9;} .reveal{opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease),transform .6s var(--ease);} .reveal.in{opacity:1; transform:none;} @media (max-width:980px){ nav.main{display:none;} .burger{display:inline-flex;} .stats{grid-template-columns:repeat(2,1fr);} .stat:nth-child(2){border-right:0;} .stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--line);} .book-grid{grid-template-columns:1fr;} .rates-grid{grid-template-columns:1fr;} .story{grid-template-columns:1fr;} .story-media{order:-1;} .members .wrap{grid-template-columns:1fr;} .members-media{order:-1;} .facil-grid{grid-template-columns:repeat(2,1fr);} .loc-grid{grid-template-columns:1fr;} footer.site .wrap{grid-template-columns:1fr 1fr;} footer.site .about{grid-column:1/-1;} } @media (max-width:680px){ .brand .word{display:none;} .brand-logo{height:60px;} .stats{grid-template-columns:1fr 1fr;} .facil-grid{grid-template-columns:1fr 1fr;} footer.site .wrap{grid-template-columns:1fr;} .bookbar{display:flex;} .to-top{display:none;} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} .reveal{opacity:1; transform:none; transition:none;} .btn:hover{transform:none;} } /* ---- WHITE / BLACK / GREEN ONLY + SPLIT HERO ---- */ .btn-brass{background:#fff; color:var(--green-800); border-color:#fff;} .btn-brass:hover{background:#e9ece7;} .bcard .bi{background:var(--green-800); color:#fff;} .facil .fi{background:var(--green-800); color:#fff;} .price-chip{border-color:rgba(255,255,255,.32); background:rgba(255,255,255,.07);} .kicker.on-dark::before{background-color:var(--brass-2);} @media (max-width:980px){ .hero .wrap{grid-template-columns:1fr; gap:38px;} .hero-photo{order:-1;} .polaroid{transform:rotate(-1.6deg); max-width:400px;} .polaroid figcaption{font-size:22px; bottom:15px;} } .hero-train{position:absolute; right:0; bottom:0; width:min(1150px,82%); z-index:0; opacity:.16; pointer-events:none; user-select:none;} @media (max-width:980px){ .hero-train{display:none;} } /* ---- HERO COLLAGE ---- */ .collage{position:relative; width:100%; max-width:560px; margin-inline:auto; aspect-ratio:1/0.9;} .collage::before{content:""; position:absolute; inset:-4%; z-index:0; transform:rotate(-1.2deg); border-radius:12px; background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px); background-size:30px 30px;} .collage>*{position:absolute;} .collage figure{margin:0;} /* polaroids: tight white border */ .c-pol{background:#fff; padding:4% 4% 11%; box-shadow:0 22px 40px -18px rgba(0,0,0,.6);} .c-pol img{width:100%; display:block; object-fit:cover;} .c-pol figcaption{text-align:center; font-family:'Caveat',cursive; font-weight:700; color:var(--green-800); margin-top:4%; font-size:clamp(15px,2.7vw,23px); line-height:1; white-space:nowrap;} .c-station{width:57%; left:3%; top:15%; transform:rotate(-4deg); z-index:5;} .c-station img{aspect-ratio:4/3;} .c-aerial{width:45%; right:1%; top:48%; transform:rotate(4.5deg); z-index:6;} .c-aerial img{aspect-ratio:4/3;} /* stamp: printed green face, minimal white edge */ .c-stamp{width:25%; right:4%; top:0; transform:rotate(7deg); z-index:7; background:#fff; padding:5.5%; box-shadow:0 14px 26px -12px rgba(0,0,0,.55);} .c-stamp .face{background:var(--green-800); padding:7%;} .c-stamp img{width:100%; aspect-ratio:1/1; object-fit:cover; display:block; border:1px solid rgba(255,255,255,.45);} .c-stamp .sl{text-align:center; font-family:var(--body); font-size:7.5px; font-weight:800; letter-spacing:.12em; color:#F1F1EC; margin-top:6%;} /* kraft luggage tag */ .c-tag{width:31%; left:-4%; top:2%; transform:rotate(-9deg); z-index:8; background:linear-gradient(158deg,#DABE8C,#C4A268); border:1px solid rgba(90,64,26,.28); border-radius:8px; padding:13% 5% 9%; text-align:center; box-shadow:0 13px 26px -12px rgba(0,0,0,.55);} .c-tag::before{content:""; position:absolute; top:10%; left:50%; transform:translateX(-50%); width:9%; aspect-ratio:1; border-radius:50%; background:var(--green-800); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5);} .c-tag .l1{font-family:'Caveat',cursive; font-weight:700; font-size:clamp(16px,2.6vw,22px); line-height:1.02; color:#43320F;} .c-tag .l2{font-family:var(--body); font-weight:700; font-size:8.5px; letter-spacing:.03em; margin-top:5px; color:#5A4526; white-space:nowrap;} /* rust postmark */ .c-postmark{width:27%; left:46%; top:5%; transform:rotate(-13deg); z-index:9; overflow:visible; opacity:.82;} /* blueprint sketch card grounds the loco drawing */ .c-blueprint{width:52%; left:0; bottom:0; z-index:4; transform:rotate(-2deg); background:#0A2C1B; border:1px solid rgba(255,255,255,.16); border-radius:9px; padding:6% 6% 5%; box-shadow:0 16px 30px -16px rgba(0,0,0,.5); overflow:hidden;} .c-blueprint::before{content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px); background-size:15px 15px;} .c-blueprint img{width:100%; display:block; position:relative; opacity:.95;} .c-blueprint .cap{position:relative; text-align:right; font-family:var(--body); font-size:7.5px; letter-spacing:.16em; font-weight:700; color:rgba(241,242,236,.65); margin-top:3%;} /* washi tapes */ .c-tape{height:4.2%; z-index:8; box-shadow:0 4px 9px rgba(0,0,0,.16);} .c-tape1{width:20%; left:14%; top:11%; transform:rotate(-9deg); background:repeating-linear-gradient(45deg, rgba(34,136,90,.6) 0 5px, rgba(34,136,90,.38) 5px 11px);} .c-tape2{width:18%; right:9%; top:46%; transform:rotate(12deg); z-index:9; background:repeating-linear-gradient(45deg, rgba(196,162,104,.82) 0 5px, rgba(196,162,104,.55) 5px 11px);} .stat-price{gap:0;} .stat-price .pr{display:flex; align-items:baseline; gap:9px; margin-bottom:2px;} .stat-price .pn{font-family:var(--display); font-weight:700; font-size:clamp(1.55rem,2.4vw,2.05rem); color:var(--green-700); line-height:1.2;} .stat-price .pl{font-size:13px; font-weight:600; color:var(--ink-2);} .stat-price .l{margin-top:8px;} #booking .sec-head{margin-inline:auto; text-align:center;} #booking .book-note{display:flex; justify-content:center; align-items:center; text-align:center; font-size:17px; margin-top:30px; color:var(--ink-2);} #booking .book-note .ic{width:20px; height:20px;} #charges .sec-head{text-align:center; margin-inline:auto;} .rateboard{display:flex; flex-direction:column; justify-content:center;} .rb-row{padding:32px 4px;} .rb-row:last-of-type{border-bottom:0;} .rb-name{font-size:1.45rem;} .rb-name .ic{width:27px; height:27px;} .rb-price{font-size:3.1rem;} .rb-foot{margin-top:22px; text-align:center; color:var(--ink-3); font-size:14px; letter-spacing:.02em;} .loc-maps{margin-top:26px;} /* batch tweaks */ .hero .tagline{font-size:clamp(1.02rem,1.85vw,1.4rem); white-space:nowrap;} .rules{display:flex; flex-direction:column;} .rules ul{flex:1; display:flex; flex-direction:column; justify-content:space-between; margin-top:14px;} #facilities .sec-head{text-align:center; margin-inline:auto;} #facilities .facil-note{text-align:center;} .facil{background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; padding:0;} .facil-band{background:var(--green-700); display:flex; align-items:center; padding:15px 18px;} .facil-band .fi{width:auto; height:auto; background:none; margin:0; border-radius:0; color:#fff; display:flex;} .facil-band .fi .ic{width:28px; height:28px;} .facil-body{padding:16px 18px 20px;} .facil .fn{font-family:var(--display); font-weight:700; font-size:1.15rem; line-height:1.15; color:var(--ink); margin:0;} .facil .fl{color:var(--ink-2); font-size:14px; margin-top:5px;} .nearby{flex-wrap:nowrap;} .chip{white-space:nowrap; padding:7px 11px; font-size:12.5px;} .chip .ic{width:14px; height:14px;} .flogo{height:58px; width:auto; margin-bottom:16px; display:block;} @media (max-width:680px){ .hero .tagline{white-space:normal; font-size:1.18rem;} .bookbar{justify-content:center;} .bookbar .bp{display:none;} .bookbar .btn{flex:1; justify-content:center;} .nearby{flex-wrap:wrap;} } /* clean number font + single-tone green */ .stat .n{font-family:var(--body); font-weight:800; letter-spacing:-.02em;} .stat .n span{color:inherit; font-size:.72em; font-weight:800;} .rb-price{font-family:var(--body); font-weight:800; letter-spacing:-.02em;} .rb-price sup{color:inherit;} .kicker-pin::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill-rule%3D%27evenodd%27%3E%3Cpath%20d%3D%27M12%202a7%207%200%200%200-7%207c0%205.25%207%2013%207%2013s7-7.75%207-13a7%207%200%200%200-7-7Zm0%209.5A2.5%202.5%200%201%201%2012%206.5a2.5%202.5%200%200%201%200%205Z%27%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill-rule%3D%27evenodd%27%3E%3Cpath%20d%3D%27M12%202a7%207%200%200%200-7%207c0%205.25%207%2013%207%2013s7-7.75%207-13a7%207%200%200%200-7-7Zm0%209.5A2.5%202.5%200%201%201%2012%206.5a2.5%202.5%200%200%201%200%205Z%27%2F%3E%3C%2Fsvg%3E"); width:20px;} /* facility capsule cards */ .facil-grid{grid-template-columns:repeat(2,1fr); gap:24px 26px;} .facil{display:flex; align-items:stretch; background:transparent; border:0; border-radius:0; overflow:visible; padding:0;} .facil:hover{transform:translateY(-3px);} .facil .fi{flex:0 0 80px; min-height:94px; background:var(--green-700); border-radius:18px; display:flex; align-items:center; justify-content:center; color:#fff; z-index:1; box-shadow:0 12px 24px -12px rgba(0,0,0,.4); margin:0;} .facil .fi .ic{width:33px; height:33px;} .facil .facil-body{flex:1; background:#fff; border:1px solid var(--line); border-radius:18px; margin-left:-26px; padding:16px 22px 16px 42px; display:flex; flex-direction:column; justify-content:center; box-shadow:0 18px 36px -20px rgba(20,38,29,.42); z-index:2;} .facil .fn{font-family:var(--display); font-weight:700; font-size:1.12rem; line-height:1.15; color:var(--ink); margin:0;} .facil .fl{color:var(--ink-2); font-size:14px; margin-top:4px;} @media (max-width:680px){ .facil-grid{grid-template-columns:1fr;} } /* facility cards: angled coloured segment (v2 reference) */ .facil{position:relative; display:block; min-height:98px; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 16px 34px -18px rgba(20,38,29,.42); overflow:hidden; padding:0;} .facil:hover{transform:translateY(-3px);} .facil .fi{position:absolute; left:0; top:0; bottom:0; height:auto; width:114px; min-height:0; margin:0; border-radius:0; box-shadow:none; background:linear-gradient(105deg,var(--green-700) 68%,var(--green-800) 100%); clip-path:polygon(0 0,100% 0,calc(100% - 30px) 100%,0 100%); display:flex; align-items:center; justify-content:center; padding-right:28px; color:#fff; z-index:1;} .facil .fi .ic{width:34px; height:34px;} .facil .facil-body{margin-left:114px; min-height:98px; background:transparent; border:0; border-radius:0; box-shadow:none; padding:16px 24px; display:flex; flex-direction:column; justify-content:center; z-index:1;} .facil .fn{font-family:var(--display); font-weight:700; font-size:1.12rem; line-height:1.15; color:var(--ink); margin:0;} .facil .fl{color:var(--ink-2); font-size:14px; margin-top:4px;} .facil .facil-body{align-items:center; text-align:center; padding:16px 26px;} .facil .fn{font-size:1.2rem;} .facil .fl{font-size:15px; margin-top:5px;} .facil .facil-body{align-items:flex-start; text-align:left; padding:14px 30px 14px 34px;} .facil .fn{font-size:1.42rem; line-height:1.12;} .facil .fl{font-size:16px; margin-top:6px;} img,iframe{max-width:100%} .rates-grid>*,.journey-grid>*,.steps>*,.facil-grid>*,.story>*,.rateboard,.rules{min-width:0} .rateboard,.rules{max-width:100%} @media (max-width:520px){ .rateboard,.rules{padding:20px} } html{overflow-x:clip} #layout-plan{background:var(--paper)} #layout-plan .lp-figure{margin:clamp(22px,3vw,38px) auto 0;max-width:1000px} #layout-plan .lp-map{width:100%;height:auto;display:block;border-radius:12px;cursor:zoom-in;box-shadow:0 18px 48px -28px rgba(7,24,44,.45)} #layout-plan .lp-actions{text-align:center;margin-top:18px} #layout-plan .lp-cap{text-align:center;font-family:var(--body);font-size:13px;color:#6b7a83;margin-top:12px} #layout-plan .sec-head{text-align:center;margin-inline:auto} #layout-plan .sec-head .kicker{justify-content:center} .lp-lightbox{position:fixed;inset:0;background:rgba(6,18,30,.9);display:none;align-items:center;justify-content:center;z-index:200;padding:16px;cursor:zoom-out} .lp-lightbox.on{display:flex} .lp-lightbox img{max-width:100%;max-height:100%;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.5)} .members-media img{object-position:70% center} #layout-plan .lp-mapwrap{position:relative;line-height:0} #layout-plan .lp-zoom{position:absolute;top:14px;right:14px;display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.94);color:#12503a;border:none;border-radius:999px;padding:9px 15px;font-family:var(--body);font-weight:700;font-size:13px;line-height:1;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.28);transition:background .2s,transform .15s} #layout-plan .lp-zoom:hover{background:#fff;transform:translateY(-1px)} #layout-plan .lp-zoom svg{width:16px;height:16px} #whatson{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-block:clamp(30px,4.2vw,50px)} #whatson .wo-bar{display:flex;align-items:center;gap:clamp(18px,3vw,32px);max-width:980px;margin:0 auto} #whatson .wo-doc{flex:none;width:62px;height:62px;border-radius:50%;background:#E7EFE7;color:var(--green-600);display:grid;place-items:center} #whatson .wo-doc .ic{width:28px;height:28px} #whatson .wo-text{flex:1;min-width:0} #whatson .wo-text h2{font-size:clamp(1.3rem,2.3vw,1.7rem);color:var(--ink);line-height:1.12} #whatson .wo-text p{color:var(--ink-2);font-size:1rem;margin:.3em 0 0} #whatson .wo-dl{flex:none} #whatson .wo-dl .ic{width:18px;height:18px} @media (max-width:720px){ #whatson .wo-bar{flex-direction:column;text-align:center;gap:16px} #whatson .wo-text p{margin-top:.4em} } footer.site .wrap{grid-template-columns:1fr 1.3fr 1fr;align-items:center;column-gap:40px} footer.site .fbrand{display:flex;align-items:center;justify-content:flex-start} footer.site .flogo{height:clamp(92px,9vw,124px);width:auto;margin:0} footer.site .fabout{text-align:center;align-self:center} footer.site .fabout .about{max-width:40ch;margin-left:auto;margin-right:auto;margin-top:14px} footer.site .fcontact{align-self:center} footer.site .fcontact .fvisit{margin-top:24px} @media (max-width:820px){ footer.site .wrap{grid-template-columns:1fr;text-align:center;justify-items:center;row-gap:26px} footer.site .fbrand{justify-content:center} footer.site .fabout .about{margin-inline:auto} } /* ============================================================ PART 2: WORDPRESS BLOCK COMPATIBILITY LAYER Ivory Websites. Everything above is the mockup's own CSS, untouched. The rules below only exist to make WordPress core block markup render as the mockup's markup did. Core's own block styles are written with :where(), which carries zero specificity, so ordinary class selectors here always win. Nothing below changes the design. If a value here differs from the mockup it is a bug, not a decision. ============================================================ */ /* ---------- 1. Neutralise WordPress wrappers ---------- */ /* Template parts wrap their contents in an extra element. Removing it from the box tree keeps the sticky header sticking to the page, not to its own wrapper. */ .wp-block-template-part{display:contents;} .wp-site-blocks{margin:0; padding:0;} .wp-block-post-content{margin:0; padding:0;} figure.wp-block-image{margin:0;} .wp-block-image img{max-width:100%; display:block;} .wp-block-group{min-width:0;} /* Block gap is switched off in theme.json. These belt-and-braces rules sit at exactly one class of specificity: enough to beat core's :where() layout margins, low enough that any real rule from the mockup above still wins. */ .is-layout-flow > *{margin-block-start:0;} .is-layout-constrained > *{margin-block-start:0;} .wp-site-blocks > *{margin-block-start:0;} .wp-block-post-content > *{margin-block-start:0;} /* The four rules above sit at one class of specificity, which ties with the mockup's own single-class top margins. Ties go to whichever rule comes last, so every tied value from the mockup is restated here at a higher specificity. Values are copied straight from the CSS above; if one is edited up there it must be edited here too. */ .stats-wrap{margin-top:-46px;} .wrap > .book-grid{margin-top:clamp(28px,4vw,44px);} .wrap > .rates-grid{margin-top:clamp(28px,4vw,44px);} .wrap > .facil-grid{margin-top:clamp(26px,3vw,40px);} .wrap > .loc-grid{margin-top:clamp(26px,3vw,42px);} .wrap > .facil-note{margin-top:22px;} .rateboard > .rb-foot{margin-top:22px;} .loc-card > .addr{margin:16px 0 20px;} .loc-card > .nearby{margin:2px 0 22px;} /* With block gap enabled, core also zeroes the bottom margin of the last child of every flow container. These four paragraphs are last children and the mockup's spacing depends on their 1em bottom margin, so they are restated at a specificity core cannot reach. */ .wrap > p.book-note:last-child{margin-bottom:1em;} .wrap > p.facil-note:last-child{margin-bottom:1em;} /* ---------- 2. Paragraph blocks standing in for the mockup's spans and divs ---------- Only the elements that were NOT paragraphs in the mockup are listed here. Anything the mockup already wrote as a

keeps the base 1em bottom margin and is deliberately absent: .book-note, .facil-note, .addr, .about, .tagline, .intro. */ /* The kicker was a , so descendant paragraph rules such as .story-copy p and .members p never reached it. As a paragraph block it now matches them and picks up a 1em top margin it never had. */ p.kicker{margin-top:0;} p.kicker, .stat p.n, .stat p.l, p.rb-name, p.rb-price, .rb-foot p, p.chip, .facil p.fn, .facil p.fl, .final p.email, footer.site .legal p{margin-bottom:0;} /* ---------- 3. Prices: currency sign and unit drawn in CSS ---------- The mockup wrapped these in , and , none of which survive a round trip through the block editor's rich text. Drawing them here keeps the type sizes exact and leaves the client a plain, safely editable number to type over. */ .stat .n-money::before{content:"$"; font-size:.72em; font-weight:800;} .rb-price::before{content:"$"; font-size:.44em; vertical-align:super;} .rb-price::after{content:"/ night"; font-family:var(--body); font-size:.86rem; font-weight:400; color:var(--ink-2); margin-left:5px;} /* ---------- 4. Buttons ---------- core/button puts custom classes on the wrapper div, not the anchor, so .btn lands one level too high. Strip the box off the wrapper and rebuild it on the anchor, with the mockup's exact values. */ .wp-block-buttons{margin:0;} .wp-block-button.btn{display:inline-flex; padding:0; border:0; min-height:0; border-radius:0; background:none; transition:none;} .wp-block-button.btn:hover{transform:none;} .wp-block-button__link.wp-element-button{background:none; border:none; border-radius:0; padding:0; color:inherit; font-family:inherit; font-size:inherit; line-height:inherit; text-decoration:none; box-shadow:none;} .wp-block-button.btn > .wp-block-button__link{display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--body); font-weight:600; font-size:15.5px; padding:15px 26px; border-radius:10px; border:1px solid transparent; cursor:pointer; transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease); min-height:52px;} .wp-block-button.btn > .wp-block-button__link:hover{transform:translateY(-1px);} .wp-block-button.btn-brass > .wp-block-button__link{background:#fff; color:var(--green-800); border-color:#fff;} .wp-block-button.btn-brass > .wp-block-button__link:hover{background:#e9ece7;} .wp-block-button.btn-green > .wp-block-button__link{background:var(--green-600); color:#fff; border-color:var(--green-600);} .wp-block-button.btn-green > .wp-block-button__link:hover{background:var(--green-500);} .wp-block-button.btn-ghost > .wp-block-button__link{background:transparent; color:var(--on-dark); border-color:rgba(241,242,236,.4);} .wp-block-button.btn-ghost > .wp-block-button__link:hover{border-color:#fff; background:rgba(255,255,255,.06);} /* Button icons. A block button cannot hold inline SVG, so the mockup's icon is drawn as a mask on the anchor's ::before, at the same size. */ .wp-block-button.btn-ico > .wp-block-button__link::before{content:""; flex:0 0 auto; background:currentColor; -webkit-mask:var(--ico) center/contain no-repeat; mask:var(--ico) center/contain no-repeat;} .wp-block-button.btn-ico-pin > .wp-block-button__link::before{width:1em; height:1em;} .wp-block-button.btn-ico-dl > .wp-block-button__link::before{width:18px; height:18px;} /* Buttons wrappers standing in for the mockup's flex rows. The mockup's .cta-row was already a block-level flex container, so these map across one to one. */ .wp-block-buttons.cta-row{display:flex; flex-wrap:wrap; gap:13px; align-items:center; margin-top:34px;} .final .wp-block-buttons.cta-row{justify-content:center; gap:13px; margin-top:30px;} .lp-actions .wp-block-buttons{justify-content:center;} /* Two buttons in the mockup were lone inline-flex anchors sitting in a line box, not block-level rows: the train ride link and Open in Google Maps. A block-level flex wrapper lays their top margin out differently (an inline box's vertical margin is resolved against the line box's baseline, a block's is not), which cost 10px and 11px respectively. Making the wrapper inline-flex and moving the margin onto it restores the mockup's box tree exactly. */ .members-copy .wp-block-buttons{display:inline-flex; margin-top:22px;} .members-copy .wp-block-buttons > .wp-block-button{margin:0;} .loc-card .wp-block-buttons{display:inline-flex; margin-top:26px;} .loc-card .wp-block-buttons > .wp-block-button{margin:0;} /* ---------- 5. Section-specific stand-ins ---------- */ /* Booking cards: the icon tile was a holding an . */ .bcard .bi.ico::before{width:23px; height:23px;} .book-note.ico::before{width:20px; height:20px; background:var(--green-600);} /* Rate board */ .rb-name.ico::before{width:27px; height:27px; background:var(--green-600);} .rb-foot p{margin:0;} /* Important rules list. A flex container turns every child element into its own flex item, so the mockup's

  • text
    • could not become a list block: the inside each rule would break out of the text and pick up the 13px flex gap. Each rule is therefore a group holding one paragraph, which keeps the text in a single flex item. These rules mirror .rules ul and .rules li above, value for value. */ .rules .rules-list{list-style:none; margin:14px 0 0; padding:0; flex:1; display:flex; flex-direction:column; justify-content:space-between;} .rules .rli{display:flex; align-items:center; gap:13px; padding:14px 0; border-bottom:1px solid var(--line-dark); font-size:16px;} .rules .rli:last-child{border-bottom:0;} .rules .rli.ico::before{width:21px; height:21px; background:var(--brass-2);} .rules .rli > p{margin:0;} .rules .rli strong{color:#fff; font-weight:600;} /* What's on */ #whatson .wo-doc.ico::before{width:28px; height:28px;} #whatson .wo-dl{flex:none;} /* Facilities */ .facil .fi.ico::before{width:34px; height:34px;} /* Location. Same flex-item split as the rules list: the mockup wrapped the address in a so the bold street name and the
    stayed in one flex item. That wrapper is now a paragraph inside a group. */ .addr.ico::before{width:22px; height:22px; background:var(--green-600); margin-top:3px;} .addr > p{margin:0;} .chip.ico::before{width:14px; height:14px; background:var(--brass);} /* Final call to action: the mockup's