/* ======================================================== V&M Terrace — brand stylesheet Typeface : DM Sans (loaded from Google Fonts in each page ) Palette : black #000000 · cream #FFF9F0 · amber #E27830 ======================================================== */ :root{ --black:#000000; --paper:#FFF9F0; --paper-soft:#FFFFFF; --amber:#E27830; --mute:rgba(0,0,0,.56); --mute-on-dark:rgba(255,249,240,.66); --line:rgba(0,0,0,.13); --line-dark:rgba(255,249,240,.2); --radius:14px; --radius-sm:10px; --maxw:1080px; --font:"DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--paper); color:var(--black); font-family:var(--font); font-size:17px; line-height:1.62; font-optical-sizing:auto; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block;} a{color:inherit;} .container{max-width:var(--maxw);margin:0 auto;padding:0 24px;} /* ---------------- header / nav ---------------- */ .site-header{ position:sticky;top:0;z-index:60; background:rgba(255,249,240,.94); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--line); } .nav{ display:flex;align-items:center;justify-content:space-between;gap:20px; padding:14px 24px;max-width:var(--maxw);margin:0 auto; } .brand{ display:flex;align-items:center;gap:11px; text-decoration:none;color:var(--black); } .brand img{height:38px;width:auto;} .brand span{ font-weight:700;font-size:21px;letter-spacing:-.01em;color:var(--black); white-space:nowrap; } .nav-links{display:flex;gap:30px;list-style:none;margin:0;padding:0;} .nav-links a{ text-decoration:none;color:var(--black); font-size:14px;font-weight:500;letter-spacing:.03em; padding-bottom:3px;border-bottom:1.5px solid transparent; } .nav-links a:hover,.nav-links a.active{border-bottom-color:var(--amber);} .nav-cta{ font-size:14px;font-weight:500; background:var(--black);color:var(--paper); padding:11px 20px;border-radius:999px;text-decoration:none;white-space:nowrap; transition:background .15s ease; } .nav-cta:hover{background:var(--amber);color:var(--black);} .nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;} .nav-toggle span{display:block;width:24px;height:2px;background:var(--black);margin:5px 0;border-radius:2px;} @media (max-width:820px){ .nav-links{ position:absolute;top:100%;left:0;right:0; background:var(--paper);border-bottom:1px solid var(--line); flex-direction:column;gap:0;display:none;padding:6px 24px 16px; } .nav-links.open{display:flex;} .nav-links a{display:block;padding:13px 0;border-bottom:1px solid var(--line);} .nav-toggle{display:block;} .nav-cta{display:none;} } /* ---------------- hero ---------------- */ .hero{ position:relative;isolation:isolate; background:var(--black);color:var(--paper); padding:104px 0 92px;overflow:hidden; } .hero-bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center 58%;} .hero-bg::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.74) 50%,rgba(0,0,0,.92) 100%); } .hero.hero-plain{padding:64px 0 56px;} /* ---------------- hero photo slider ---------------- */ .hs-bg{position:absolute;inset:0;z-index:-2;overflow:hidden;touch-action:pan-y;} .hs-bg::after{ content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.74) 50%,rgba(0,0,0,.92) 100%); } .hs-track{display:flex;width:100%;height:100%;transition:transform .6s cubic-bezier(.4,0,.2,1);} .hs-slide{flex:0 0 100%;height:100%;background-size:cover;background-position:center 58%;} .hs-nav{ position:absolute;top:50%;transform:translateY(-50%);z-index:3; width:40px;height:40px;border-radius:50%;border:none;cursor:pointer; background:rgba(255,249,240,.85);color:var(--black); font-size:22px;line-height:1;font-family:inherit; display:flex;align-items:center;justify-content:center; transition:opacity .15s ease,background .15s ease; } .hs-nav:hover{background:var(--amber);} .hs-prev{left:16px;} .hs-next{right:16px;} .hs-dots{ position:absolute;left:0;right:0;bottom:16px;z-index:3; display:flex;gap:7px;justify-content:center; } .hs-dot{ width:7px;height:7px;padding:0;border:none;border-radius:50%;cursor:pointer; background:rgba(255,249,240,.42);transition:background .15s ease,width .15s ease; } .hs-dot.active{background:var(--amber);width:20px;border-radius:999px;} @media (max-width:820px){ .hs-nav{display:none;} } .hero .eyebrow{ font-size:13px;font-weight:500;letter-spacing:.2em;text-transform:uppercase; color:var(--amber);margin-bottom:16px; } .hero h1{ font-weight:700;font-size:clamp(33px,5vw,56px);line-height:1.06; letter-spacing:-.02em;margin:0 0 20px;max-width:19ch; } .hero.hero-plain h1{max-width:24ch;font-size:clamp(29px,4vw,44px);} .hero p.lede{max-width:56ch;font-size:19px;color:rgba(255,249,240,.87);margin:0 0 32px;} .hero-actions{display:flex;gap:13px;flex-wrap:wrap;} /* ---------------- buttons ---------------- */ .btn{ display:inline-flex;align-items:center;gap:8px; font-size:15px;font-weight:500;font-family:inherit; padding:14px 26px;border-radius:999px;text-decoration:none; border:1.5px solid transparent;cursor:pointer;transition:opacity .15s ease,background .15s ease; } .btn:hover{opacity:.86;} .btn-amber{background:var(--amber);color:var(--black);} .btn-cream{background:var(--paper);color:var(--black);} .btn-black{background:var(--black);color:var(--paper);} .btn-outline{background:transparent;color:var(--paper);border-color:rgba(255,249,240,.45);} .btn-outline-black{background:transparent;color:var(--black);border-color:rgba(0,0,0,.28);} /* ---------------- sections ---------------- */ section{padding:68px 0;} .section-tight{padding:40px 0;} .section-label{ display:inline-block;font-size:12.5px;font-weight:600; letter-spacing:.18em;text-transform:uppercase;color:var(--amber);margin-bottom:14px; } h2{font-weight:700;font-size:clamp(27px,4vw,38px);line-height:1.14;letter-spacing:-.02em;margin:0 0 18px;} h3{font-weight:700;font-size:21px;letter-spacing:-.01em;margin:0 0 10px;} p{margin:0 0 16px;} .lead{font-size:19px;color:rgba(0,0,0,.72);max-width:62ch;} .muted{color:var(--mute);} .on-dark{background:var(--black);color:var(--paper);} .on-dark .muted{color:var(--mute-on-dark);} .on-dark h2,.on-dark h3{color:var(--paper);} /* ---------------- feature cards ---------------- */ .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;} @media (max-width:860px){.grid-3{grid-template-columns:1fr;}} .card{ background:var(--paper-soft);border:1px solid var(--line); border-radius:var(--radius);padding:30px; } .card .num{ display:block;font-size:12.5px;font-weight:600;letter-spacing:.12em; text-transform:uppercase;color:var(--amber);margin-bottom:14px; } /* ---------------- scrolling photo gallery ---------------- */ .gallery{position:relative;background:var(--black);overflow:hidden;height:100%;min-height:340px;} .g-track{ position:relative;display:flex;height:100%; overflow-x:auto;scroll-snap-type:x mandatory; scrollbar-width:none;-ms-overflow-style:none; scroll-behavior:smooth; } .g-track::-webkit-scrollbar{display:none;} .g-slide{ position:relative;flex:0 0 100%;margin:0;scroll-snap-align:start; min-height:340px; } .g-slide img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in;} .g-zoom{ position:absolute;top:12px;right:12px;z-index:2;pointer-events:none; display:flex;align-items:center;gap:6px; background:rgba(0,0,0,.6);color:var(--paper); font-size:11.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase; padding:6px 11px;border-radius:999px;backdrop-filter:blur(4px); } .g-slide figcaption{ position:absolute;left:14px;bottom:58px; background:rgba(0,0,0,.72);color:var(--paper); font-size:12.5px;font-weight:500;letter-spacing:.04em; padding:6px 12px;border-radius:999px;backdrop-filter:blur(4px); } .g-nav{ position:absolute;top:50%;transform:translateY(-50%);z-index:3; width:40px;height:40px;border-radius:50%;border:none;cursor:pointer; background:rgba(255,249,240,.9);color:var(--black); font-size:22px;line-height:1;font-family:inherit; display:flex;align-items:center;justify-content:center; transition:opacity .15s ease; } .g-nav:hover{background:var(--amber);} .g-nav:disabled{opacity:0;pointer-events:none;} .g-prev{left:12px;} .g-next{right:12px;} .g-bar{ position:absolute;left:0;right:0;bottom:0;z-index:3; display:flex;align-items:center;justify-content:space-between;gap:12px; padding:12px 16px; background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 100%); } .g-dots{display:flex;gap:7px;flex-wrap:wrap;} .g-dot{ width:7px;height:7px;padding:0;border:none;border-radius:50%;cursor:pointer; background:rgba(255,249,240,.42);transition:background .15s ease,width .15s ease; } .g-dot.active{background:var(--amber);width:20px;border-radius:999px;} .g-count{ font-size:12px;font-weight:500;letter-spacing:.06em;color:rgba(255,249,240,.9); white-space:nowrap; } /* ---------------- lightbox (full uncropped photo) ---------------- */ .lb{ position:fixed;inset:0;z-index:200;display:none; background:rgba(0,0,0,.985); align-items:center;justify-content:center; } .lb.open{display:flex;} .lb-stage{ max-width:94vw;max-height:100vh; display:flex;align-items:center;justify-content:center; } .lb-stage img{ max-width:94vw;max-height:82vh;width:auto;height:auto; object-fit:contain;display:block; } .lb-close,.lb-nav{ position:absolute;z-index:3;border:none;cursor:pointer; background:rgba(255,249,240,.92);color:var(--black); font-family:inherit;line-height:1; display:flex;align-items:center;justify-content:center; transition:background .15s ease; } .lb-close:hover,.lb-nav:hover{background:var(--amber);} .lb-close{top:20px;right:22px;width:44px;height:44px;border-radius:50%;font-size:24px;} .lb-nav{top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;font-size:26px;} .lb-prev{left:22px;} .lb-next{right:22px;} .lb-nav:disabled{opacity:0;pointer-events:none;} .lb-bar{ position:absolute;left:0;right:0;bottom:0;z-index:3; display:flex;align-items:center;justify-content:center;gap:14px; padding:20px 24px;color:var(--paper); } .lb-cap{font-size:15px;font-weight:500;} .lb-count{font-size:13px;color:var(--mute-on-dark);} body.lb-lock{overflow:hidden;} @media (max-width:620px){ .lb-stage img{max-width:100vw;max-height:72vh;} .lb-close{top:14px;right:14px;width:40px;height:40px;} .lb-nav{width:40px;height:40px;font-size:22px;} .lb-prev{left:10px;} .lb-next{right:10px;} } /* ---------------- room cards ---------------- */ .room-card{ border:1px solid var(--line);border-radius:var(--radius);overflow:hidden; background:var(--paper-soft); display:grid;grid-template-columns:1.05fr 1fr;margin-bottom:30px; } @media (max-width:820px){ .room-card{grid-template-columns:1fr;} .gallery{min-height:0;} .g-slide{min-height:0;aspect-ratio:5/4;} } .room-info{padding:34px;} .price-row{ display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:14px; border-top:1px solid var(--line);padding-top:18px;margin-top:20px; } .price{font-size:27px;font-weight:700;letter-spacing:-.02em;} .price small{font-size:13px;font-weight:400;color:var(--mute);letter-spacing:0;} .tag{ display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase; background:var(--black);color:var(--paper);padding:6px 13px;border-radius:999px;margin-bottom:15px; } ul.check{list-style:none;padding:0;margin:16px 0;} ul.check li{padding-left:24px;position:relative;margin-bottom:8px;color:rgba(0,0,0,.75);} ul.check li::before{content:"✓";position:absolute;left:0;color:var(--amber);font-weight:700;} ul.cross li{color:var(--mute);} ul.cross li::before{content:"–";color:var(--mute);} /* ---------------- walk-to-everything panel ---------------- */ .walk-panel{ background:var(--black);color:var(--paper); border-radius:var(--radius);padding:44px 44px 38px; } .walk-panel .wp-eyebrow{ font-size:12.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase; color:var(--amber);margin-bottom:14px; } .walk-panel h2{color:var(--paper);font-size:clamp(30px,4.4vw,44px);margin-bottom:8px;} .walk-panel .wp-sub{color:var(--mute-on-dark);font-size:16px;margin:0 0 26px;} .wp-row{ display:flex;align-items:baseline;gap:16px; padding:14px 0;border-top:1px solid var(--line-dark); } .wp-row .wp-place{flex:1;font-size:17px;} .wp-row .wp-time{font-weight:700;font-size:17px;white-space:nowrap;color:var(--amber);} .wp-row .wp-mode{ width:96px;text-align:right;flex:none; font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute-on-dark); } @media (max-width:620px){ .walk-panel{padding:32px 24px 26px;} .wp-row .wp-mode{width:62px;font-size:11px;} } /* ---------------- home: location grid (walk-panel + map) ---------------- */ .location-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:24px;align-items:stretch;} .map-card{display:flex;flex-direction:column;} .map-card .map-embed{flex:1;min-height:260px;} .map-card .map-embed iframe{height:100%;min-height:260px;} @media (max-width:860px){ .location-grid{grid-template-columns:1fr;} .map-card .map-embed{min-height:220px;} .map-card .map-embed iframe{min-height:220px;} } /* ---------------- distance tables ---------------- */ table.dist{width:100%;border-collapse:collapse;margin:8px 0 30px;} table.dist th,table.dist td{text-align:left;padding:13px 10px;border-bottom:1px solid var(--line);} table.dist th{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);} table.dist td.time{font-weight:700;white-space:nowrap;color:var(--amber);} table.dist td.note{color:var(--mute);font-size:15px;} .callout{ background:var(--black);color:var(--paper); border-radius:var(--radius);padding:26px 30px;margin:26px 0; } .callout strong{color:var(--amber);} /* ---------------- contact ---------------- */ .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;} @media (max-width:860px){.contact-grid{grid-template-columns:1fr;}} .contact-method{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--line);} .contact-method:last-child{border-bottom:none;} .contact-method .icon{ width:36px;height:36px;flex:none;border-radius:50%; background:var(--black);color:var(--paper); display:flex;align-items:center;justify-content:center; font-size:13px;font-weight:600; } .map-embed{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);min-height:300px;} .map-embed iframe{width:100%;height:100%;min-height:300px;border:0;display:block;} /* ---------------- footer ---------------- */ footer{background:var(--black);color:var(--mute-on-dark);padding:44px 0;} footer .foot-row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;align-items:flex-end;} footer a{color:var(--paper);text-decoration:none;} footer a:hover{color:var(--amber);} .foot-brand{display:flex;align-items:center;gap:11px;margin-bottom:8px;} .foot-brand img{height:40px;width:auto;} .foot-brand span{font-weight:700;font-size:20px;color:var(--paper);letter-spacing:-.01em;} footer .fine{font-size:13px;} /* ---------------- utility ---------------- */ .center{text-align:center;} .small{font-size:14px;}