/* * HotelsNearPOI brand layer. * * Loaded last, so it repoints the design tokens the rest of the CSS already * reads rather than editing them. base.css is 161KB of minified inherited * styles that reference var(--col-*) throughout, and home.css/hubs.css derive * their own --hx- and --dx- families from those, so redefining the roots here * carries the new palette through the whole site from one place — and dropping * this one file reverts the rebrand. * * Palette and type per Color-Palette-Typography-HotelsnearPOI.png: * Midnight Navy #101828 text, key surfaces * Location Blue #2563EB links, interactive states * Destination Coral #F97066 primary CTAs, highlights * Sky Tint #EAF2FF soft backgrounds, muted sections * Cloud White #F9FAFB surfaces, cards * Slate Grey #667085 muted text, icons, borders (20–30% for borders) */ /* * Four of the six brand colours are Customizer settings, written into a :root * block by nearstay_dynamic_css() just above this file. Those are DERIVED here * rather than restated, so changing a colour in the Customizer still works and * this file does not silently override the admin UI. Only the tokens the * Customizer has no setting for are given literal values. */ :root { --brand-navy: var(--col-primary, #101828); --brand-sky: var(--col-secondary, #EAF2FF); --brand-cloud: var(--col-beige, #F9FAFB); --brand-coral: var(--col-red, #F97066); /* Primary CTAs are Destination Coral, per the reference screens — Search * Hotels, Sign up, Read more, Check availability are all coral there, and * only the home page's "View all" is blue (that one is .btn.light below). * Kept as its own token rather than reusing --brand-coral because prices and * badges use the softer coral and should not move with the buttons. * (Superseded the earlier Midnight Navy buttons.) */ --brand-cta: #FE514A; --brand-cta-dark: #E8443D; --brand-blue: #2563EB; --brand-blue-dark: #1D4FD7; --brand-coral-dark: #E85A50; --brand-coral-soft: #FEE4E2; --brand-slate: #667085; --brand-border: rgba(102, 112, 133, .25); --brand-green: #ECFDF3; --brand-green-ink: #027A48; --brand-radius: 16px; --brand-radius-sm: 10px; --brand-shadow: 0 2px 8px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .08); --font-heading: "Manrope", "DM Sans", Helvetica, Arial, sans-serif; /* Neutrals base.css uses that have no Customizer setting. */ --col-offwhite: var(--brand-cloud); --col-dark-grey: var(--brand-slate); --col-mid-grey: var(--brand-border); --col-light-grey: var(--brand-sky); } body { background: var(--brand-cloud); color: var(--brand-navy); font-family: var(--font-family); } /* Type scale — Manrope for headings, Inter for everything else. */ h1, h2, h3, h4, h5, h6, .hnp-logo-text, .dx-cat-h, .ns-style-h { font-family: var(--font-heading); color: var(--brand-navy); letter-spacing: -.01em; } h1 { font-weight: 700; } h2, h3 { font-weight: 600; } /* ---------------------------------------------------------------- header -- * The brand header is a light surface with navy type, not the inherited navy * band, so the flip has to be explicit — the token swap alone cannot do it. */ /* No rule under the header: the white header meets the page's own first band * (the Sky Tint hero, a hub's search band, a listing's white page) and the * change of surface separates them on its own. The border was also drawn TWICE * — once on the header and once on .header-container one pixel above it — which * read as a single thick grey line rather than a hairline. */ header.header, header.header .header-container { background: #fff; } /* base.css's hamburger is a WHITE-stroked SVG, drawn for the inherited navy * band. On the white brand header it rendered invisible — the button was there * the whole time, 16x16 and clickable, with nothing to see. Same three lines in * navy, and 24px so it is a thumb-sized target rather than a 16px one. * The colour is literal because a data: URI cannot read var(--brand-navy); if * the navy token changes, change it here too. */ header.header .toggle-button { width: 24px; height: 24px; background-size: 24px 24px; background-position: center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23101828' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 6h18M3 12h18M3 18h18'/%3E%3C/svg%3E"); } /* The inherited header was one navy band, so the menu carried its own dark * fill that only blended because everything behind it was navy too. On a white * header that fill becomes a black strip with navy links inside it — invisible. * Clear it, and the row below it, at every level. */ header.header .content, header.header .menu_container, header.header #menu-list, header.header #menu-list > li { background: transparent; } header.header #menu-list > li > a, header.header .currency-pretty__trigger, header.header .hnp-logo-text { color: var(--brand-navy); background: transparent; } header.header #menu-list > li > a:hover, header.header #menu-list > li.current-menu-item > a { color: var(--brand-blue); background: transparent; } header.header .toggle-button span, header.header .toggle-button span::before, header.header .toggle-button span::after { background: var(--brand-navy); } header.header .currency-pretty__dropdown { border: 1px solid var(--brand-border); border-radius: var(--brand-radius-sm); box-shadow: var(--brand-shadow); } /* ----------------------------------------------------- header, inner pages -- * Only the home page keeps the white header: it opens on a full-bleed hero * photo that the white band sits cleanly above. Every other page opens on light * content with nothing to separate it from a white header, so those take the * navy band — which is the footer panel's colour, so the page is bracketed by * the same surface top and bottom. * * `body.ns-dark-header` is added in functions.php (nearstay_body_classes); it is * the ONLY thing that decides which pages, so the rule below stays a pure flip * of the block above it. Each selector here carries one more class than its * white counterpart, which is what makes it win. */ body.ns-dark-header header.header, body.ns-dark-header header.header .header-container { background: var(--brand-navy); } body.ns-dark-header header.header .hnp-logo-text, body.ns-dark-header header.header .currency-pretty__trigger { color: #fff; } /* Slightly held back from pure white so the logo stays the brightest thing in * the band, then full white on hover / for the page you are on. */ body.ns-dark-header header.header #menu-list > li > a { color: rgba(255, 255, 255, .86); } body.ns-dark-header header.header #menu-list > li > a:hover, body.ns-dark-header header.header #menu-list > li.current-menu-item > a { color: #fff; } /* The navy-stroked hamburger above is invisible on navy — same three lines in * white. Literal colour for the same reason as the other one: a data: URI * cannot read var(--brand-navy). */ body.ns-dark-header header.header .toggle-button { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 6h18M3 12h18M3 18h18'/%3E%3C/svg%3E"); } body.ns-dark-header header.header .toggle-button span, body.ns-dark-header header.header .toggle-button span::before, body.ns-dark-header header.header .toggle-button span::after { background: #fff; } /* The open mobile drawer is a white panel hanging under the header (theme.css, * "MOBILE NAV"). Under a navy header it has to be navy too, or the links — * which are white here — land on white. */ @media (max-width: 1023.98px) { body.ns-dark-header .header .menu_container.show #menu-list { background: var(--brand-navy); border-top-color: rgba(255, 255, 255, .18); box-shadow: 0 14px 28px rgba(16, 24, 40, .28); } body.ns-dark-header .header .menu_container.show #menu-list > li > a { border-bottom-color: rgba(255, 255, 255, .18); } } /* ------------------------------------------------------------------ links -- */ a { color: var(--brand-blue); } a:hover { color: var(--brand-blue-dark); } /* ---------------------------------------------------------------- buttons -- * Coral is the primary call to action; blue is the secondary/interactive one. */ /* base.css scopes its button rule as `body .btn`, and home.css/hubs.css set the * search buttons from their own --hx-/--dx- navy. Both out-specify a bare * `.btn`, so the brand CTA has to match that weight to win. */ body .btn, body button.btn, body a.btn, .dx-btn-search, .hx-btn-search, /* .hx-btn — the home page's "View all" — is deliberately NOT here: it is the one * blue button in the reference. It is styled in home.css. */ .dx-btn, #side_bcom_button, .hf-book-btn, .wp-block-button__link { background: var(--brand-cta); border: 1px solid var(--brand-cta); color: #fff; border-radius: var(--brand-radius-sm); font-family: var(--font-family); font-weight: 500; transition: background .15s ease, border-color .15s ease; } body .btn:hover, body button.btn:hover, body a.btn:hover, .dx-btn-search:hover, .hx-btn-search:hover, .dx-btn:hover, #side_bcom_button:hover, .hf-book-btn:hover, .wp-block-button__link:hover { background: var(--brand-cta-dark); border-color: var(--brand-cta-dark); color: #fff; } body .btn.light, body .btn.btn-secondary, body .btn--secondary { background: var(--brand-blue); border-color: var(--brand-blue); } body .btn.light:hover, body .btn.btn-secondary:hover, body .btn--secondary:hover { background: var(--brand-blue-dark); border-color: var(--brand-blue-dark); } /* ------------------------------------------------------------------ hero -- * Sky Tint band behind the headline and search, per the header/hero sheet. */ .hx-hero, .dx-search, .hx-search { background: var(--brand-sky); } .dx-search, .hx-search { border-bottom: 1px solid var(--brand-border); } /* -------------------------------------------------------- search band card -- * On the templates that carry base.css's search band (hotel pages, hubs), the * reference floats the fields AND the Booking toggle together inside one white * rounded card on the Sky Tint. They used to sit straight on the tint, which * left the toggle looking detached from the form it belongs to. */ .search_form_container { background: var(--brand-sky); } .search_form_container .search_form form, .search_form_container form.search_form { background: #fff; border-radius: 14px; padding: 10px 12px; box-shadow: 0 6px 20px rgba(2, 12, 30, .10); box-sizing: border-box; } /* The tick is Location Blue here — the same control as the home hero's, which * is why it is not the navy base.css gives it. */ .search_form .toggle input:checked, .search_form_container .search_form .toggle input:checked { border-color: var(--brand-blue); background-color: var(--brand-blue); } .search_form_container .btn-search, .search_form_container .search_form .btn-search { border-radius: 8px; } .hx-hero h1, .dx-search h1, .ns-wts-head h1 { color: var(--brand-navy); } /* The page-title bands carry NO fill. They used to take the Sky Tint, but the * block is sized to the heading alone, so a two-line standfirst spilled out of * a coloured box that stopped mid-sentence. Owner's call: keep them clean. */ .ns-wts-head, .ns-best-hotels-head { background: transparent; } /* ------------------------------------------------------------ hotel cards -- * 16px radius, 24px padding, two-layer shadow — Hotel-Card-Component sheet. */ .hotel_card, .ns-hotel-card { background: #fff; border: 1px solid var(--brand-border); border-radius: var(--brand-radius); box-shadow: var(--brand-shadow); overflow: hidden; } .hotel_card:hover, .ns-hotel-card:hover { box-shadow: 0 4px 12px rgba(16, 24, 40, .10), 0 12px 32px rgba(16, 24, 40, .10); } /* Editorial tiles are a bare holding an image and a title with no inner * padding of their own, so boxing them pushes the title onto the border and * overflow:hidden clips it. They get the brand's rounding on the image and * keep their open, caption-under-picture layout. */ .hx-card img, .dx-card img, .article_card img { border-radius: var(--brand-radius); box-shadow: 0 1px 3px rgba(16, 24, 40, .08); } .hx-card, .dx-card, .article_card { background: transparent; border: 0; box-shadow: none; } .hx-card:hover img, .dx-card:hover img, .article_card:hover img { box-shadow: 0 4px 12px rgba(16, 24, 40, .12); } .hotel_card .price, .ns-price, .hf-price { color: var(--brand-coral); font-weight: 700; } .hotel_card .score, .ns-score { color: var(--brand-blue); font-weight: 600; } /* ------------------------------------------------------- pills and badges -- * THE "BROWSE BY STYLE" RAIL IS DEFINED ONCE — HERE, AS TOKENS. * * Three templates render that one menu with three different markups: * .dx-cats hub pages (hubs.css markup) * .ns-style-pills destination taxonomy + /best-hotels-in/ * .categories_menu .menu_list li a the Destinations browse menu (base.css) * They used to carry three copies of these values kept in step by hand, and * drifted apart three separate times — each fix caught one markup and missed * the others, because a class grep does not find a rail whose markup belongs * to base.css. So the values live here and the single rule that consumes them * lives in theme.css (search "STYLES RAIL"), which every template loads. * Change a value here and all three menus move together. * * --brand-navy derives from the Customizer's primary colour (see the :root * block at the top), so an admin recolour still reaches all three rails. */ :root { --ns-rail-bg: #fff; --ns-rail-fg: var(--brand-navy); --ns-rail-border: 1px solid var(--brand-border); --ns-rail-radius: 999px; --ns-rail-pad: 12px 14px; /* 14px, not 15: at 15 the label and its count did not fit one line in the rail the reference draws, and the count dropped onto a second row. */ --ns-rail-size: 14px; --ns-rail-weight: 600; --ns-rail-gap: 9px; --ns-rail-count: #8a90a3; --ns-rail-hover-bg: #e7e7e2; --ns-rail-hover-fg: var(--brand-blue); --ns-rail-hover-border: var(--brand-blue); --ns-rail-active-bg: var(--brand-navy); --ns-rail-active-fg: #fff; --ns-rail-active-count: #dfe5f1; --ns-rail-head-size: 22px; --ns-rail-head-space: 16px; } /* The other pill-shaped chips share the skin but are not the rail, so they take * the tokens without joining the rail's rule. */ .ns-tag-pill, .hx-chip, .dx-chip { background: var(--ns-rail-bg); border: var(--ns-rail-border); border-radius: var(--ns-rail-radius); color: var(--ns-rail-fg); } .ns-tag-pill:hover, .hx-chip:hover, .dx-chip:hover { border-color: var(--ns-rail-hover-border); color: var(--ns-rail-hover-fg); } .ns-badge-deal { background: var(--brand-coral-soft); color: #B42318; } .ns-badge-popular{ background: var(--brand-sky); color: var(--brand-blue); } .ns-badge-new, .ns-badge-free { background: var(--brand-green); color: var(--brand-green-ink); } /* ----------------------------------------------------------------- footer -- * A dark surface, Midnight Navy — but an inset rounded PANEL sitting on the * page background rather than the full-bleed band it was, which is the home * page's treatment and now every page's. * * The fill moves off