/* ============================================================ HHDealer — NEW DESIGN system (namespaced: .nd / nd-* / --nd-*) Everything is scoped under .nd so it never collides with the old stylesheets. Load this only on migrated pages. ============================================================ */ .nd{ --nd-cyan:#22a2c4; --nd-cyan-a:#00adee; --nd-cyan-b:#0078a5; --nd-blue:#4B86C2; --nd-navy:#3d5d7d; --nd-navy-deep:#002750; --nd-orange:#f78d1d; --nd-orange-deep:#FB7600; --nd-red:#C0180C; --nd-ink:#1d1d1d; --nd-muted:#5f6f7c; --nd-line:#d9d9d9; --nd-font:"PT Sans","Roboto",sans-serif; font-family:var(--nd-font); color:var(--nd-ink); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; background:#fff; } body{ margin:0px; } .nd *{box-sizing:border-box; margin:0; padding:0} .nd img{display:block; max-width:100%} .nd a{color:var(--nd-cyan); text-decoration:none} .nd .nd-wrap{width:min(1110px, 100% - 40px); margin:0 auto} .nd .nd-eyebrow{font:700 12px/1 var(--nd-font); letter-spacing:.22em; text-transform:uppercase; color:var(--nd-cyan)} .nd .nd-center{text-align:center} /* ---- top bar ---- */ .nd .nd-topbar{background:#fff; border-bottom:2px solid #ccc; font-size:13px; color:#333} .nd .nd-topbar .nd-row{max-width:1110px; margin:0 auto; display:flex; align-items:center; height:38px; padding:0 20px} .nd .nd-topbar .nd-soc a{display:inline-flex; width:24px; height:24px; border-radius:6px; background:var(--nd-blue); color:#fff; align-items:center; justify-content:center; margin-right:7px; font-weight:700; transition:.2s} .nd .nd-topbar .nd-soc a:hover{background:var(--nd-navy-deep)} .nd .nd-topbar .nd-right{margin-left:auto; display:flex; gap:18px; font-size:1.3em} .nd .nd-topbar .nd-right a{color:#000; font-weight:700} .nd .nd-topbar .nd-right a:hover{color:var(--nd-blue)} /* Account / Log In: the one top-bar link that changes with sign-in state, so it is tinted to read as an action rather than another site link. */ .nd .nd-topbar .nd-right a.nd-acct{color:var(--nd-cyan-b)} .nd .nd-topbar .nd-right a.nd-acct:hover{color:var(--nd-navy-deep)} /* ---- header banner + nav share one continuous suit pattern ---- */ .nd .nd-pattern{background:#d7d7d7 url("/images/backg3.jpg")} .nd .nd-headstack{position:relative} .nd .nd-headwrap{position:relative} .nd .nd-banner{display:block; width:100%; max-width:1110px; margin:0 auto} /* ---- grey gradient nav: now a direct child of .nd, so position:sticky;top:0 pins it across the whole page. The full-width bar carries the same grey gradient as .nd-nav-inner, so the strips beside the centered menu match edge-to-edge. ---- */ .nd .nd-nav{position:sticky; top:0; z-index:50; height:64px; background:linear-gradient(180deg,#434345 0%,#565659 20%,#6a6a6e 38%,#7a7b7f 54%,#7e7f83 70%,#7e7f83 100%); border-bottom:4px solid var(--nd-blue); box-shadow:0 6px 16px -8px rgba(0,0,0,.5)} .nd .nd-nav-inner{max-width:1110px; margin:0 auto; height:100%; display:flex; align-items:stretch; background:linear-gradient(180deg,#434345 0%,#565659 20%,#6a6a6e 38%,#7a7b7f 54%,#7e7f83 70%,#7e7f83 100%)} .nd .nd-menu{flex:1; display:flex; align-items:stretch; list-style:none} .nd .nd-menu>li{position:relative; display:flex; align-items:stretch; flex:1 0 auto} .nd .nd-menu>li:not(:first-child){border-left:1px solid grey} .nd .nd-item{flex:1; display:flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap; color:#fff; font-weight:600; font-size:18.5px; letter-spacing:.02em; text-shadow:0 1px 2px rgba(0,0,0,.95); border-left:1px solid transparent; padding:0 16px; transition:background .15s; position:relative} .nd .nd-menu>li:hover>.nd-item{background:var(--nd-blue); border-left:1px solid #fff} .nd .nd-item.nd-buy{color:var(--nd-orange)} .nd .nd-menu>li:hover>.nd-buy{color:#fff} /* active/current page (legacy #menu .first) */ .nd .nd-menu>li>.nd-item.is-current{background:var(--nd-blue); color:#fff; border-left:1px solid #fff} .nd .nd-subnav a.is-current{background:var(--nd-blue)} .nd .nd-caret{font-size:24px; line-height:1; opacity:.92; text-shadow:0 1px 1px rgba(0,0,0,.6); transition:transform .2s} .nd .nd-menu>li:hover .nd-caret{transform:rotate(180deg)} .nd .nd-newstar{position:absolute; top:-13px; right:-7px; height:40px; width:auto; pointer-events:none; z-index:4; filter:drop-shadow(0 2px 3px rgba(0,0,0,.45))} .nd .nd-subnav{position:absolute; top:100%; left:0; min-width:100%; width:max-content; list-style:none; background:#666; border:1px solid var(--nd-blue); border-top:0; box-shadow:0 16px 32px -12px rgba(0,0,0,.55); opacity:0; visibility:hidden; transform:translateY(7px); transition:.18s ease; z-index:60} .nd .nd-menu>li:hover .nd-subnav{opacity:1; visibility:visible; transform:none} .nd .nd-subnav a{display:block; text-align:center; color:#fff; font-weight:500; font-size:18px; padding:12px 22px; border-top:1px solid rgba(255,255,255,.85); text-shadow:0 1px 1px rgba(0,0,0,.8); transition:background .15s} .nd .nd-subnav a:hover{background:var(--nd-blue)} /* mobile hamburger (hidden on desktop; shown in the <=860px block below) */ .nd .nd-navtoggle{position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; clip:rect(0 0 0 0)} .nd .nd-burger{display:none; cursor:pointer; flex-direction:column; justify-content:center; gap:5px; width:48px; height:44px; padding:0 12px; margin-left:auto} .nd .nd-burger span{display:block; height:3px; border-radius:2px; background:#fff; box-shadow:0 1px 1px rgba(0,0,0,.5); transition:transform .2s,opacity .2s} .nd .nd-navtoggle:checked ~ .nd-burger span:nth-child(1){transform:translateY(8px) rotate(45deg)} .nd .nd-navtoggle:checked ~ .nd-burger span:nth-child(2){opacity:0} .nd .nd-navtoggle:checked ~ .nd-burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)} /* ---- top announcement slider (legacy #splidevert): thin bar above the nav, opt-in via $nd_topslider; rotated by newdesign.js. Both slides are stacked in one grid cell so the bar height stays fixed (= tallest slide) and rotating never reflows the page; switching is an opacity crossfade. ---- */ .nd .nd-topslider{max-width:1110px; margin:0 auto; border-top:5px solid var(--nd-blue); display:grid} .nd .nd-ts-slide{grid-area:1 / 1; opacity:0; visibility:hidden; transition:opacity .5s ease; padding:11px 22px 13px; text-align:center; font-size:17px; line-height:1.4} .nd .nd-ts-slide.is-active{opacity:1; visibility:visible} .nd .nd-ts-dark{background:aliceblue; color:#000} .nd .nd-ts-dark strong{color:var(--nd-orange)} .nd .nd-ts-light{background:#ddd; color:var(--nd-ink); text-align:left; display:flex; align-items:center; justify-content:center; gap:18px} .nd .nd-ts-img{height:64px; width:auto; flex:none} .nd .nd-ts-h{font-weight:700; color:var(--nd-orange); font-size:21px; margin-bottom:2px} .nd .nd-ts-light .nd-ts-h{text-shadow:1px 1px 0 #000} .nd .nd-ts-light a{color:var(--nd-orange); font-weight:700; text-shadow:1px 1px 0 #000} @media(max-width:640px){.nd .nd-ts-slide{font-size:14px} .nd .nd-ts-h{font-size:17px} .nd .nd-ts-img{height:46px}} /* ---- buttons ---- */ .nd .nd-btn{display:inline-flex; align-items:center; gap:9px; cursor:pointer; border:0; font-weight:700; font-size:16px; padding:13px 26px; border-radius:8px; transition:.2s; white-space:nowrap; font-family:var(--nd-font)} .nd .nd-btn-blue{color:#d9eef7; border:1px solid #0076a3; text-shadow:1px 2px 1px rgba(0,0,0,.5); background:linear-gradient(180deg,var(--nd-cyan-a),var(--nd-cyan-b)); box-shadow:0 2px 2px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.3)} .nd .nd-btn-blue:hover{color:#fff; background:linear-gradient(180deg,#0095cc,#00678e); transform:translateY(-1px)} .nd .nd-btn-orange{color:#fff; border:1px solid #da7c0c; text-shadow:1px 1px 2px rgba(0,0,0,.4); background:linear-gradient(180deg,#faa51a,#f47a20); box-shadow:0 2px 2px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.35)} .nd .nd-btn-orange:hover{transform:translateY(-1px); background:linear-gradient(180deg,#f88e11,#f06015)} .nd .nd-btn-ghost{color:var(--nd-navy); background:#fff; border:1.5px solid var(--nd-line)} .nd .nd-btn-ghost:hover{border-color:var(--nd-blue); color:var(--nd-blue)} .nd .nd-btn-lg{font-size:18px; padding:15px 30px} /* ---- section scaffolding ---- */ .nd .nd-section{padding:54px 0} .nd .nd-section-sm{padding:38px 0} .nd .nd-band{background:aliceblue; border-top:2px solid #ccc; border-bottom:2px solid #ccc} .nd .nd-band-cyan{position:relative; background:radial-gradient(720px 320px at 82% -12%,rgba(255,255,255,.18),transparent 60%),linear-gradient(120deg,var(--nd-cyan),#1b87a6 55%,var(--nd-blue)); color:#fff} .nd .nd-section-head{text-align:center; max-width:720px; margin:0 auto 36px} .nd .nd-section-head h2{font-weight:700; text-transform:uppercase; color:var(--nd-navy); font-size:clamp(26px,3.2vw,34px); line-height:1.1} .nd .nd-band-cyan .nd-section-head h2{color:#fff} .nd .nd-ul{width:74px; height:3px; background:var(--nd-blue); margin:14px auto 0; border-radius:2px} .nd .nd-section-head p{color:var(--nd-muted); font-size:16.5px; margin-top:14px} .nd .nd-actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:24px} .nd .nd-center .nd-actions{justify-content:center} /* ---- hero (background-video capable) ---- */ .nd .nd-hero{padding:48px 0 40px} .nd .nd-hero h1{font-weight:700; line-height:1.06; color:var(--nd-navy); font-size:clamp(32px,5vw,52px); letter-spacing:-.01em} .nd .nd-hero .nd-lead{font-size:19px; color:#41525e; margin-top:18px; max-width:560px} .nd .nd-hero-video{position:relative; overflow:hidden; background:#fff; min-height:500px; display:flex; align-items:center; padding:48px 0} .nd .nd-hero-bgvid{position:absolute; top:0; bottom:0; right:0; height:100%; width:auto; object-fit:cover; z-index:0} /* very wide screens: stop the hero video docking to the far right edge — pin its right edge to a centered max band so it stays close to the left-aligned copy */ @media (min-width:2100px){ .nd .nd-hero-bgvid{right:calc((100% - 2100px) / 2)} } .nd .nd-hero-scrim{position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg,#fff 0%,#fff 50%,rgba(255,255,255,.72) 60%,rgba(255,255,255,0) 80%),linear-gradient(180deg,rgba(255,255,255,0) 64%,#fff 100%)} .nd .nd-hero-video .nd-wrap{position:relative; z-index:2} .nd .nd-hero-copy{max-width:600px} .nd .nd-hero-quote{margin:20px 0 4px; padding:12px 18px; border-left:4px solid var(--nd-cyan); background:#eaf3fb; border-radius:0 8px 8px 0; font-style:italic; font-size:17px; line-height:1.5; color:var(--nd-navy-deep); max-width:540px} .nd .nd-pill{display:inline-flex; align-items:center; gap:9px; font:700 12.5px/1 var(--nd-font); letter-spacing:.04em; color:#1b7d99; background:rgba(34,162,196,.1); border:1px solid rgba(34,162,196,.32); padding:9px 15px; border-radius:100px; margin-bottom:16px} .nd .nd-pill .nd-dot{width:8px; height:8px; border-radius:50%; background:#46c08a; box-shadow:0 0 0 4px rgba(70,192,138,.2)} .nd .nd-stats{display:flex; gap:34px; flex-wrap:wrap} .nd .nd-stat .nd-n{font-weight:700; font-size:34px; color:var(--nd-navy); line-height:1} .nd .nd-stat .nd-n span{color:var(--nd-cyan)} .nd .nd-stat .nd-l{font-size:13px; color:var(--nd-muted); margin-top:6px} /* ---- generic grids + benefit cards ---- */ .nd .nd-grid{display:grid; gap:18px} .nd .nd-g2{grid-template-columns:repeat(2,1fr)} .nd .nd-g3{grid-template-columns:repeat(3,1fr)} .nd .nd-g4{grid-template-columns:repeat(4,1fr)} .nd .nd-bcard{position:relative; background:#fff; border:1px solid #e6edf3; border-radius:18px; overflow:hidden; display:flex; flex-direction:column; text-align:center; transition:transform .28s,box-shadow .28s,border-color .28s} .nd .nd-bcard::after{content:""; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--nd-cyan),var(--nd-blue)); transform:scaleX(0); transition:transform .3s} .nd .nd-bcard:hover{transform:translateY(-7px); box-shadow:0 26px 50px -26px rgba(0,39,80,.5); border-color:#d2e1ee} .nd .nd-bcard:hover::after{transform:scaleX(1)} .nd .nd-bcard .nd-bhead{color:var(--nd-navy); font-weight:700; text-transform:uppercase; font-size:16.5px; letter-spacing:.03em; padding:30px 22px 0} .nd .nd-bcard .nd-bhead::after{content:""; display:block; width:34px; height:3px; border-radius:2px; background:var(--nd-cyan); margin:12px auto 0} .nd .nd-bcard .nd-bbody{display:flex; flex-direction:column; align-items:center; padding:18px 24px 28px} .nd .nd-bcard .nd-bbody img{height:148px; width:auto; margin-bottom:14px; filter:drop-shadow(0 10px 16px rgba(0,39,80,.12))} .nd .nd-bcard .nd-bbody p{font-size:14.5px; color:#56656f; line-height:1.6} .nd .nd-bcard .nd-bbody p b{color:var(--nd-navy-deep)} .nd .nd-bcard.nd-cta{border:0; background:linear-gradient(160deg,var(--nd-cyan),#1b87a6 60%,var(--nd-blue)); color:#fff; box-shadow:0 20px 40px -22px rgba(34,162,196,.7)} .nd .nd-bcard.nd-cta::after{display:none} .nd .nd-bcard.nd-cta:hover{box-shadow:0 28px 52px -22px rgba(34,162,196,.85)} .nd .nd-bcard.nd-cta .nd-bhead{color:#fff} .nd .nd-bcard.nd-cta .nd-bhead::after{background:rgba(255,255,255,.75)} .nd .nd-bcard.nd-cta .nd-bbody{gap:14px; padding:20px 24px 28px} .nd .nd-bcard.nd-cta .nd-bbody p{color:#eafbff} .nd .nd-qbadge{width:84px; height:84px; border-radius:50%; background:rgba(255,255,255,.16); border:2px solid rgba(255,255,255,.75); display:grid; place-items:center; font-weight:700; font-size:42px; color:#fff; text-shadow:0 2px 4px rgba(0,39,80,.4)} .nd .nd-qbtn{display:inline-block; margin-top:6px; background:#fff; color:#0e6a85; font-weight:700; font-size:14px; padding:10px 22px; border-radius:8px; box-shadow:0 8px 16px -8px rgba(0,39,80,.5); transition:.2s} .nd .nd-qbtn:hover{transform:translateY(-2px); box-shadow:0 12px 22px -8px rgba(0,39,80,.6)} /* ---- products ---- */ .nd .nd-prod{background:#fff; border:1px solid #cfd6dc; border-radius:10px; overflow:hidden; display:flex; flex-direction:column; transition:.25s; position:relative} .nd .nd-prod:hover{transform:translateY(-5px); box-shadow:0 20px 40px -22px rgba(0,39,80,.5)} .nd .nd-prod .nd-phead{background:linear-gradient(#e3e3e3,#cccccc); color:#5a5a5a; border-bottom:3px solid var(--nd-blue); padding:11px 14px; font-weight:700; font-size:16px; text-transform:uppercase; text-shadow:1px 1px 1px #fff; display:flex; align-items:center; gap:8px} .nd .nd-prod .nd-phead .nd-dot{width:9px; height:9px; border-radius:50%; background:var(--nd-cyan)} .nd .nd-prod .nd-ppad{padding:18px; flex:1; display:flex; flex-direction:column} .nd .nd-prod .nd-ppic{height:150px; display:grid; place-items:center; margin-bottom:8px} .nd .nd-prod .nd-ppic img{max-height:144px} .nd .nd-prod p{font-size:14px; color:#3a4a56; margin-bottom:16px} .nd .nd-prod .nd-btn{width:100%; justify-content:center; margin-top:auto} .nd .nd-prod.nd-pop{border:2px solid var(--nd-cyan)} .nd .nd-ribbon{position:absolute; top:14px; right:-32px; transform:rotate(45deg); background:var(--nd-orange-deep); color:#fff; font:700 9px/1 var(--nd-font); letter-spacing:.1em; padding:5px 36px; z-index:2} /* ---- rooms marquee / grid ---- */ .nd .nd-rooms{background:#f6f8fa; border:1px solid var(--nd-line); border-radius:12px; padding:20px 18px} .nd .nd-rooms .nd-lbl{text-align:center; font:700 11px/1 var(--nd-font); letter-spacing:.2em; text-transform:uppercase; color:var(--nd-muted); margin-bottom:16px} .nd .nd-marquee{overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)} .nd .nd-mtrack{display:flex; gap:56px; align-items:center; width:max-content; animation:nd-scroll 30s linear infinite} .nd .nd-marquee:hover .nd-mtrack{animation-play-state:paused} .nd .nd-mtrack img{height:38px; opacity:.7; filter:grayscale(1); transition:.3s} .nd .nd-mtrack img:hover{opacity:1; filter:none} @keyframes nd-scroll{to{transform:translateX(-50%)}} /* ---- steps / compare / faq ---- */ .nd .nd-steps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; counter-reset:nd-s} .nd .nd-step{background:#fff; border:1px solid var(--nd-line); border-radius:12px; padding:24px; position:relative} .nd .nd-step::before{counter-increment:nd-s; content:counter(nd-s); position:absolute; top:-16px; left:22px; width:36px; height:36px; border-radius:50%; background:linear-gradient(180deg,var(--nd-cyan-a),var(--nd-cyan-b)); color:#fff; font-weight:700; display:grid; place-items:center; box-shadow:0 6px 14px -6px rgba(34,162,196,.7)} .nd .nd-step h3{color:var(--nd-navy); font-size:18px; margin:8px 0 7px} .nd .nd-step p{font-size:14.5px; color:var(--nd-muted)} .nd .nd-compare{display:grid; grid-template-columns:1fr 1fr; gap:18px} .nd .nd-compare .nd-col{border-radius:12px; padding:24px; border:1px solid var(--nd-line)} .nd .nd-compare .nd-bad{background:#fbf1f1; border-color:#f0d6d6} .nd .nd-compare .nd-good{background:#eaf3fb; border-color:#cfe0f1} .nd .nd-compare h3{font-size:18px; margin-bottom:12px; text-transform:uppercase; letter-spacing:.03em} .nd .nd-compare .nd-bad h3{color:#a8403a} .nd .nd-compare .nd-good h3{color:#2c6aa0} .nd .nd-compare li{list-style:none; padding:7px 0 7px 26px; position:relative; font-size:15px} .nd .nd-compare .nd-bad li::before{content:"\2715"; position:absolute; left:0; color:#c0564f; font-weight:700} .nd .nd-compare .nd-good li::before{content:"\2713"; position:absolute; left:0; color:#3b86c2; font-weight:700} .nd .nd-faq details{background:#fff; border:1px solid var(--nd-line); border-radius:10px; margin-bottom:10px; overflow:hidden} .nd .nd-faq summary{cursor:pointer; padding:16px 20px; font-weight:700; color:var(--nd-navy); list-style:none; display:flex; justify-content:space-between; align-items:center} .nd .nd-faq summary::after{content:"+"; color:var(--nd-cyan); font-size:22px; font-weight:700} .nd .nd-faq details[open] summary::after{content:"\2013"} .nd .nd-faq .nd-a{padding:0 20px 18px; color:#475560; font-size:15px} /* ---- quote / callout ---- */ .nd .nd-quote{border-left:5px solid var(--nd-cyan); background:#f2f2f2; padding:18px 22px; font-weight:700; color:var(--nd-navy-deep); font-size:17px; border-radius:0 8px 8px 0} /* ---- "imports into" tracker chips ---- */ .nd .nd-integr{display:flex; flex-wrap:wrap; gap:14px; justify-content:center} .nd .nd-integr span{display:inline-flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--nd-line); border-radius:100px; padding:10px 18px; font-weight:700; color:var(--nd-navy); font-size:14px} .nd .nd-integr span::before{content:""; width:9px; height:9px; border-radius:50%; background:var(--nd-cyan)} /* ---- editorial feature rows (alternating image / text) ---- */ .nd .nd-frow{display:grid; grid-template-columns:300px 1fr; gap:40px; align-items:center; padding:34px 0; border-bottom:1px solid var(--nd-line)} .nd .nd-frow.nd-rev{grid-template-columns:1fr 300px} .nd .nd-frow.nd-rev .nd-frow-art{order:2} .nd .nd-frow-art{display:flex; justify-content:center} .nd .nd-frow-art img{max-height:185px; width:auto; filter:drop-shadow(0 16px 26px rgba(0,39,80,.16))} .nd .nd-frow h3{color:var(--nd-navy); font-weight:700; font-size:clamp(20px,2.3vw,26px); line-height:1.15; margin-bottom:12px} .nd .nd-frow p{color:#41525e; font-size:17px; line-height:1.7} .nd .nd-frow p + p{margin-top:14px} .nd .nd-frow p b{color:var(--nd-navy-deep)} .nd .nd-frow a{color:var(--nd-cyan); font-weight:700} @media(max-width:760px){.nd .nd-frow,.nd .nd-frow.nd-rev{grid-template-columns:1fr; gap:18px} .nd .nd-frow.nd-rev .nd-frow-art{order:0}} /* ---- punchy benefit checklist ---- */ .nd .nd-biglist{list-style:none} .nd .nd-biglist li{padding:13px 0 13px 40px; position:relative; font-size:16.5px; border-bottom:1px solid var(--nd-line)} .nd .nd-biglist li::before{content:"\2713"; position:absolute; left:6px; top:12px; width:24px; height:24px; border-radius:50%; background:var(--nd-cyan); color:#fff; font-size:13px; font-weight:700; display:grid; place-items:center} /* ---- newsletter ---- */ .nd .nd-news{background:#fff; border-top:1px solid var(--nd-line); border-bottom:1px solid var(--nd-line)} .nd .nd-nl{max-width:1010px; margin:0 auto; padding:48px 34px; display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center} .nd .nd-nl-copy h2{font-weight:700; text-transform:uppercase; color:var(--nd-navy); font-size:28px; border-bottom:3px solid var(--nd-blue); display:inline-block; padding-bottom:10px} .nd .nd-nl-copy h2 span{color:var(--nd-cyan)} .nd .nd-nl-copy p{color:var(--nd-muted); margin:16px 0 18px; font-size:16px; max-width:480px} .nd .nd-nl-field{display:flex; gap:10px; max-width:520px} .nd .nd-nl-field input{flex:1; min-width:0; background:#fff; border:1.5px solid #cdd8e1; border-radius:9px; padding:13px 15px; font-size:15px} .nd .nd-nl-field input:focus{outline:none; border-color:var(--nd-cyan); box-shadow:0 0 0 3px rgba(34,162,196,.15)} .nd .nd-nl-perks{display:flex; gap:18px; flex-wrap:wrap; margin-top:14px; font-size:13.5px; color:#2c6aa0; font-weight:700} .nd .nd-nl-art{display:flex; justify-content:center} .nd .nd-nl-art img{width:100%; max-width:430px; mix-blend-mode:multiply} /* ---- CTA band text ---- */ .nd .nd-ctaband{padding:70px 0; text-align:center} .nd .nd-ctaband h2{color:#fff; font-size:clamp(28px,3.6vw,40px); text-transform:uppercase; margin-bottom:14px} .nd .nd-ctaband p{color:#eafaff; font-size:18px; max-width:560px; margin:0 auto 26px} /* ---- news / blog cards ---- */ .nd .nd-newsgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px} .nd .nd-np{position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--nd-line); border-radius:14px; overflow:hidden; transition:.25s} .nd .nd-np:hover{transform:translateY(-5px); box-shadow:0 22px 44px -26px rgba(0,39,80,.45)} .nd .nd-np .nd-np-img{aspect-ratio:16/9; overflow:hidden; background:#eef3f7; display:block} .nd .nd-np .nd-np-img img{width:100%; height:100%; object-fit:cover; transition:.4s} .nd .nd-np:hover .nd-np-img img{transform:scale(1.06)} .nd .nd-np .nd-np-date{align-self:flex-start; background:var(--nd-cyan); color:#fff; font-weight:700; font-size:13px; padding:6px 14px; margin:14px 0 0 18px; border-radius:7px} .nd .nd-np .nd-np-body{padding:8px 20px 22px} .nd .nd-np h3{font-weight:700; color:var(--nd-navy); font-size:18px; margin:8px 0; line-height:1.25} .nd .nd-np h3 a{color:inherit} .nd .nd-np h3 a:hover{color:var(--nd-cyan)} .nd .nd-np p{font-size:14px; color:var(--nd-muted)} .nd .nd-np .nd-np-more{display:inline-block; margin-top:12px; color:var(--nd-cyan); font-weight:700; font-size:14px} .nd .nd-np .nd-np-flag{position:absolute; top:12px; right:12px; z-index:2; height:46px} /* ---- continuous (infinite) slider — transform-based, seamless loop ---- */ .nd .nd-slider{position:relative; overflow:hidden} .nd .nd-slider-track{display:flex; gap:22px; transition:transform .55s cubic-bezier(.4,0,.2,1); will-change:transform} .nd .nd-slider-track > *{flex:0 0 calc((100% - 44px)/3)} .nd .nd-slider-btn{position:absolute; top:34%; width:46px; height:46px; border-radius:50%; border:1px solid var(--nd-line); background:#fff; color:var(--nd-navy); display:grid; place-items:center; cursor:pointer; box-shadow:0 12px 26px -12px rgba(0,39,80,.45); z-index:6; transition:background .2s,color .2s,border-color .2s,transform .2s; font-size:24px; line-height:1; font-family:var(--nd-font)} .nd .nd-slider-btn:hover{background:var(--nd-cyan); color:#fff; border-color:var(--nd-cyan); transform:scale(1.06)} .nd .nd-slider-prev{left:10px} .nd .nd-slider-next{right:10px} @media(max-width:980px){.nd .nd-slider-track > *{flex-basis:calc((100% - 22px)/2)}} @media(max-width:640px){.nd .nd-slider-track > *{flex-basis:100%}} /* ============ FOOTER (light) ============ */ .nd .nd-footer{position:relative; overflow:hidden; color:#3a4a56; border-top:4px solid var(--nd-cyan); background:radial-gradient(900px 380px at 82% -10%,rgba(34,162,196,.10),transparent 60%),linear-gradient(180deg,#f4f8fc,#e9f1f8)} .nd .nd-footer::before{content:""; position:absolute; inset:0; opacity:.7; background-image:linear-gradient(rgba(60,93,125,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(60,93,125,.07) 1px,transparent 1px); background-size:44px 44px; -webkit-mask:radial-gradient(95% 120% at 50% 0,#000,transparent); mask:radial-gradient(95% 120% at 50% 0,#000,transparent)} .nd .nd-foot-inner{position:relative; max-width:1110px; margin:0 auto; padding:52px 34px 0} .nd .nd-foot-top{display:grid; grid-template-columns:1.5fr 1.05fr 1fr; gap:44px; padding-bottom:30px} .nd .nd-foot-brand .nd-b{font-weight:700; font-size:28px; color:var(--nd-navy-deep); text-transform:uppercase; letter-spacing:.01em} .nd .nd-foot-brand .nd-b span{color:var(--nd-cyan)} .nd .nd-foot-brand p{font-size:16px; color:#5f6f7c; max-width:400px; margin:14px 0 18px; line-height:1.65} .nd .nd-foot-track{font-size:13px; color:#7a8a97; font-weight:700; letter-spacing:.02em; display:flex; align-items:center; flex-wrap:wrap; gap:8px} .nd .nd-foot-track b{color:var(--nd-navy)} .nd .nd-foot-col h4,.nd .nd-foot-brand h4{color:var(--nd-navy-deep); font-size:14px; text-transform:uppercase; letter-spacing:.1em; margin-bottom:18px} .nd .nd-foot-links{list-style:none} .nd .nd-foot-links li{display:flex; align-items:center; gap:12px; margin-bottom:14px; font-size:15.5px; color:#51606b} .nd .nd-foot-links .nd-ic{width:22px; height:22px; color:var(--nd-cyan); flex:none} .nd .nd-foot-links a{color:var(--nd-navy-deep); font-weight:700} .nd .nd-foot-links a:hover{color:var(--nd-cyan)} .nd .nd-foot-follow{display:flex; gap:12px; margin-top:4px} .nd .nd-foot-follow a{width:40px; height:40px; border-radius:10px; border:1px solid #cdd8e1; background:#fff; display:grid; place-items:center; color:#4a5d6b; transition:.2s} .nd .nd-foot-follow a:hover{border-color:var(--nd-cyan); color:var(--nd-cyan); transform:translateY(-2px); box-shadow:0 8px 16px -8px rgba(0,39,80,.3)} .nd .nd-foot-follow a svg{width:18px; height:18px} .nd .nd-foot-pay{display:flex; flex-wrap:wrap; gap:8px} .nd .nd-chip{background:#fff; border:1px solid #dde6ee; border-radius:8px; height:42px; min-width:72px; padding:6px 10px; display:flex; align-items:center; justify-content:center; transition:.2s} .nd .nd-chip:hover{transform:translateY(-2px); box-shadow:0 10px 20px -10px rgba(0,39,80,.3); border-color:#bcd} .nd .nd-chip img{max-height:30px; max-width:108px; width:auto} .nd .nd-chip.nd-txt{font-weight:700; color:var(--nd-navy); font-size:13px; letter-spacing:.02em} .nd .nd-foot-rooms{margin-top:8px; padding:22px 0; border-top:1px solid rgba(60,93,125,.15); border-bottom:1px solid rgba(60,93,125,.15); display:flex; align-items:center; gap:24px; flex-wrap:wrap} .nd .nd-foot-rooms .nd-lbl{font-size:12.5px; text-transform:uppercase; letter-spacing:.16em; color:#7a8a97; font-weight:700; white-space:nowrap} .nd .nd-foot-roomlist{display:flex; flex-wrap:wrap; gap:8px; flex:1} .nd .nd-foot-bottom{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; padding:18px 0; font-size:14px; color:#6a7a87} .nd .nd-foot-bottom b{color:var(--nd-navy)} .nd .nd-foot-bottom .nd-lnks a{color:#5f6f7c; margin-left:18px} .nd .nd-foot-bottom .nd-lnks a:hover{color:var(--nd-navy-deep)} /* ---- reveal-on-scroll ---- */ .nd .nd-reveal{opacity:0; transform:translateY(22px); transition:.6s cubic-bezier(.2,.7,.2,1)} .nd .nd-reveal.nd-in{opacity:1; transform:none} /* ---- responsive ---- */ @media(max-width:920px){.nd .nd-item{font-size:15px; padding:0 14px}} /* mobile hamburger nav kicks in at 760px */ @media(max-width:760px){ /* hamburger menu: burger on the bar, items drop down as a vertical list */ .nd .nd-nav{height:auto} .nd .nd-nav-inner{flex-wrap:wrap; align-items:center; min-height:64px} .nd .nd-burger{display:flex} .nd .nd-menu{flex-basis:100%; flex-direction:column; display:none} .nd .nd-navtoggle:checked ~ .nd-menu{display:flex} .nd .nd-menu>li{flex:0 0 auto; flex-direction:column; width:100%; border-left:0; border-top:1px solid rgba(255,255,255,.18)} .nd .nd-item{flex:0 0 auto; justify-content:flex-start; height:50px; font-size:16px; border-left:0} .nd .nd-menu>li:hover>.nd-item{border-left:0} .nd .nd-caret{display:none} .nd .nd-newstar{display:none} /* flatten dropdown items into the same single-level list as the top-level items */ .nd .nd-subnav{position:static; opacity:1; visibility:visible; transform:none; width:auto; min-width:0; border:0; box-shadow:none; background:transparent} .nd .nd-subnav a{display:flex; align-items:center; height:50px; padding:0 16px; text-align:left; font-size:16px; font-weight:600; color:#fff; border-top:1px solid rgba(255,255,255,.18)} } @media(max-width:860px){ .nd .nd-g2,.nd .nd-g3,.nd .nd-g4,.nd .nd-steps,.nd .nd-compare,.nd .nd-newsgrid{grid-template-columns:1fr} .nd .nd-hero-bgvid,.nd .nd-hero-scrim{display:none} .nd .nd-hero-copy{max-width:100%} .nd .nd-nl{grid-template-columns:1fr; gap:26px} .nd .nd-nl-art{order:-1} .nd .nd-nl-art img{object-fit:cover; width:100%; max-width:400px; height:200px} .nd .nd-foot-top{grid-template-columns:1fr; gap:30px} .nd .nd-foot-rooms{flex-direction:column; align-items:flex-start} .nd .nd-foot-bottom{flex-direction:column; text-align:center} .nd .nd-foot-bottom .nd-lnks a{margin:0 9px} } /* ---- payment option tiles ---- Shared by buy.php and the sng_mtt_hands*.php pages: 3 per row, crypto taking two of them. They were floated width:32% siblings in the legacy style.css with no common parent, so the new layout left one per row. DELIBERATELY NOT SCOPED UNDER .nd, unlike everything else in this file. These tiles sit at the end of a table-based page whose div nesting is not balanced, so there is no guarantee the browser still considers them inside the .nd wrapper by the time it reaches them - and a rule that silently does not apply is worse than one that might collide. Nothing here can leak: .po-grid is a class name no other stylesheet uses, and every tile rule hangs off it, so only boxes inside this grid are touched. For the same reason the colours are literals, not var(--nd-*): those custom properties are declared on .nd and would not resolve outside it. width and float are RESET, not merely unset: style.css has .po{width:32%;float:left}. A grid item ignores the float, but the 32% is honoured - 32% OF THE CELL - so every tile rendered at a third of its column and the row looked half empty. .po-grid > .po is (0,2,0) against that rule s (0,1,0), so declaring them here is enough. */ .po-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px;align-items:stretch;margin:8px 0 4px} .po-grid > .btcpo{grid-column:span 2} .po-grid > .po,.po-grid > .btcpo{box-sizing:border-box;background:#fff; border:1px solid #d9d9d9;border-radius:14px;padding:18px 16px;margin:0; min-width:0;width:auto;float:none;box-shadow:0 14px 30px -24px rgba(0,39,80,.4)} .po-grid > .po{display:flex;flex-direction:column;align-items:center; justify-content:flex-start;gap:8px} .po-grid > .po img,.po-grid > .btcpo img{max-width:100%;height:auto} .po-grid > .po h3,.po-grid > .btcpo h3,.po-grid > .btcpo h2{color:#3d5d7d;margin:0 0 4px} .po-grid > .po h3{font-size:17px} /* Crypto tile: logo beside the copy, since it has two columns to fill. */ .po-grid > .btcpo{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:22px} .po-grid > .btcpo .btc-logo{flex:0 0 auto;text-align:center} .po-grid > .btcpo .btc-copy{flex:1 1 260px;min-width:0;text-align:left;line-height:1.6} .po-grid > .btcpo .btc-copy .button{margin-top:10px} @media(max-width:900px){ .po-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .po-grid > .btcpo{grid-column:span 2} } @media(max-width:560px){ .po-grid{grid-template-columns:1fr} .po-grid > .btcpo{grid-column:span 1} .po-grid > .btcpo .btc-copy{text-align:center;flex-basis:100%} } /* ---- text inputs ---- NOT scoped under .nd, for the same reason as the payment tiles above: on the sng_mtt_hands*.php pages these fields are not reliably inside the .nd wrapper, and a focus ring that silently does not apply is the bug this is fixing. newdesign.css is only loaded on migrated pages, so an unscoped .btnb rule cannot reach the old ones. Colours are literals because the --nd-* custom properties are declared on .nd. The legacy style.css has .btnhov{border-color:Orange}, added on mouseover by an inline hov() handler that is still on most fields. Neutralised here for text fields only - the 10