/* ============================================================ The Noble — nb-* component styles (child of cc-venue-base) Skins the SHARED layout (header, footer, inquiry form) in the Noble brand and provides the nb-* page-section components used in Noble page content (authored as wp:html blocks). Brand values resolve from this venue's theme.json (the --wp--preset--* vars), with Noble fallbacks. Move this file into cc-venue-base unchanged and each venue's theme.json reskins it. Source of truth: Design Systems/The Noble/design-system/. Lighter than Barnett: Floral White ground; Smoke (warm near-black, never #000) only for hero scrim + footer; Teal Smoke for the capacity band. Header/footer here only REPAINT the shared parts. ============================================================ */ :root { --nb-bg: var(--wp--preset--color--background, #fbf8ec); /* Floral White */ --nb-text: var(--wp--preset--color--foreground, #17201e); /* Smoke */ --nb-gold: var(--wp--preset--color--accent, #c8ab7f); /* Gilded */ --nb-gold-d: #b89a6d; /* Gilded hover */ --nb-teal: var(--wp--preset--color--secondary, #3b514d); /* Teal Smoke */ --nb-white: #ffffff; /* on dark only */ --nb-fh: var(--wp--preset--font-family--heading, 'Poiret One', 'Century Gothic', system-ui, sans-serif); --nb-fb: var(--wp--preset--font-family--body, 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif); --nb-fa: var(--wp--preset--font-family--accent, 'Cormorant Garamond', Georgia, 'Times New Roman', serif); /* layered-type "answer" — italic serif under Poiret One */ --nb-pad: clamp(48px, 7vw, 84px); --nb-max: 1200px; --nb-gut: clamp(20px, 5vw, 56px); --nb-radius: 4px; --nb-transition: 150ms ease; } /* ---- Global ground + type ------------------------------------------------ */ body.wp-child-theme-cc-venue-noble { background-color: var(--nb-bg); color: var(--nb-text); font-family: var(--nb-fb); font-weight: 300; line-height: 1.7; } body.wp-child-theme-cc-venue-noble h1, body.wp-child-theme-cc-venue-noble h2, body.wp-child-theme-cc-venue-noble h3, body.wp-child-theme-cc-venue-noble .wp-block-heading { font-family: var(--nb-fh); font-weight: 400; /* Poiret One has one weight; never synthesize bold */ letter-spacing: 0.04em; line-height: 1.14; } body.wp-child-theme-cc-venue-noble p { font-weight: 300; } /* ---- Shared bits used in content ----------------------------------------- */ .nb-overline { font-family: var(--nb-fb); font-weight: 400; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--nb-gold); margin: 0 0 12px; } .nb-h-layer { display: block; font-family: var(--nb-fb); font-style: italic; font-weight: 300; font-size: 0.55em; opacity: 0.92; margin-top: 0.4em; } .nb-btn { display: inline-block; font-family: var(--nb-fb); font-weight: 400; font-size: 15px; letter-spacing: 0.08em; padding: 14px 32px; border-radius: var(--nb-radius); border: 1px solid transparent; text-decoration: none; cursor: pointer; transition: background-color var(--nb-transition), color var(--nb-transition); } .nb-btn--primary { background: var(--nb-gold); color: var(--nb-text); } .nb-btn--primary:hover { background: var(--nb-gold-d); } .nb-btn--ghost { background: transparent; border-color: var(--nb-gold); color: var(--nb-gold); } .nb-btn--ghost:hover { background: var(--nb-gold); color: var(--nb-text); } .nb-section { padding: var(--nb-pad) var(--nb-gut); } .nb-wrap { max-width: var(--nb-max); margin-inline: auto; } .nb-prose { max-width: 720px; margin-inline: auto; } .nb-center { text-align: center; } /* ---- HEADER — Noble custom nav (overrides base header.html) --------------- */ /* Matches Barnett's nav STRUCTURE (logo, Events dropdown, CTA button, mobile drawer) in Noble's LIGHT brand. Tracking still lives in the base (unaffected by overriding the header part); the footer stays the shared block. */ body.wp-child-theme-cc-venue-noble header.wp-block-template-part, body.wp-child-theme-cc-venue-noble header { padding: 0 !important; background: transparent; } .nb-nav { position: sticky; top: 0; z-index: 60; background: var(--nb-gold); border-bottom: 1px solid rgba(23, 32, 30, 0.18); } .nb-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; max-width: var(--nb-max); margin-inline: auto; padding: 14px var(--nb-gut); } .nb-nav__logo { display: inline-flex; align-items: center; } .nb-nav__logo img { height: 52px; width: auto; display: block; } .nb-nav__links { display: flex; gap: 28px; align-items: center; } .nb-nav__link { position: relative; font-family: var(--nb-fb); font-weight: 400; font-size: 14px; letter-spacing: 0.07em; color: var(--nb-text); text-decoration: none; white-space: nowrap; padding: 6px 0; cursor: pointer; background: none; border: 0; } .nb-nav__link:hover { color: var(--nb-teal); } .nb-nav__group { position: relative; display: inline-flex; align-items: center; } .nb-nav__drop { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(6px); min-width: 200px; background: var(--nb-bg); border: 1px solid var(--nb-gold); border-radius: 8px; box-shadow: 0 8px 28px rgba(23, 32, 30, 0.16); padding: 8px; opacity: 0; visibility: hidden; transition: opacity var(--nb-transition), transform var(--nb-transition); z-index: 5; } .nb-nav__drop::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } .nb-nav__group:hover .nb-nav__drop, .nb-nav__group[aria-expanded="true"] .nb-nav__drop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .nb-nav__drop a { display: block; font-family: var(--nb-fb); font-weight: 400; font-size: 13px; letter-spacing: 0.05em; color: var(--nb-text); padding: 10px 14px; border-radius: 4px; text-decoration: none; } .nb-nav__drop a:hover { background: rgba(200, 171, 127, 0.16); color: var(--nb-gold); } .nb-nav__cta.nb-btn { margin-left: 4px; padding: 11px 22px; font-size: 13px; background: var(--nb-text); color: var(--nb-bg); } .nb-nav__cta.nb-btn:hover { background: var(--nb-teal); color: var(--nb-bg); } .nb-nav__burger { display: none; background: none; border: 0; cursor: pointer; color: var(--nb-text); font-size: 26px; line-height: 1; padding: 4px; } /* Mobile drawer (dark Smoke, white wordmark — white logo only on dark) */ .nb-drawer { position: fixed; inset: 0; z-index: 80; background: var(--nb-text); color: var(--nb-white); transform: translateX(100%); transition: transform 300ms ease; display: flex; flex-direction: column; padding: 24px 28px 40px; overflow-y: auto; } .nb-drawer.is-open { transform: translateX(0); } .nb-drawer__top { display: flex; align-items: center; justify-content: space-between; } .nb-drawer__logo { height: 28px; width: auto; } .nb-drawer__close { background: none; border: 0; color: var(--nb-white); cursor: pointer; font-size: 30px; line-height: 1; padding: 4px; } .nb-drawer__links { display: flex; flex-direction: column; gap: 4px; margin-top: 28px; } .nb-drawer__links a, .nb-drawer__sub-h { font-family: var(--nb-fh); font-weight: 400; font-size: 28px; color: var(--nb-white); padding: 10px 0; border-bottom: 1px solid rgba(200, 171, 127, 0.18); text-decoration: none; } .nb-drawer__sub { display: flex; flex-direction: column; padding: 6px 0 6px 18px; } .nb-drawer__sub a { font-size: 20px; border-bottom: 0; padding: 7px 0; color: rgba(251, 248, 236, 0.85); } .nb-drawer__cta { margin-top: 28px; } @media (max-width: 860px) { .nb-nav__links { display: none; } .nb-nav__burger { display: inline-flex; } } /* ---- SHARED FOOTER repaint (markup stays cc-venue-base) ------------------ */ body.wp-child-theme-cc-venue-noble footer.wp-block-group { background-color: var(--nb-text) !important; color: var(--nb-white) !important; } body.wp-child-theme-cc-venue-noble footer.wp-block-group a { color: var(--nb-gold); text-decoration: none; } body.wp-child-theme-cc-venue-noble footer.wp-block-group a:hover { text-decoration: underline; } /* ---- 1. Hero ------------------------------------------------------------- */ .nb-hero { position: relative; min-height: 84vh; display: flex; align-items: flex-end; background-size: cover; background-position: center; color: var(--nb-white); } .nb-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(23,32,30,.72), rgba(23,32,30,.25) 38%, rgba(23,32,30,0) 66%); } .nb-hero__in { position: relative; z-index: 1; max-width: var(--nb-max); margin-inline: auto; width: 100%; padding: 0 var(--nb-gut) clamp(40px, 6vw, 72px); } .nb-hero h1 { color: var(--nb-white); font-size: clamp(40px, 6vw, 62px); line-height: 1.1; } .nb-hero .nb-overline { color: var(--nb-gold); } .nb-hero .nb-btn { margin-top: 1.6rem; } /* ---- 2. Statement -------------------------------------------------------- */ .nb-statement h2 { font-size: clamp(31px, 4vw, 46px); } .nb-statement h2 em { display: block; font-family: var(--nb-fa); font-style: italic; font-weight: 400; font-size: 0.66em; opacity: 0.85; margin-top: 0.35em; } .nb-statement__body { max-width: 720px; margin: 1.1rem auto 0; font-size: clamp(18px, 1.6vw, 21px); } /* ---- 3. Capacity band (teal, multi-column) ------------------------------- */ .nb-cap { background: var(--nb-teal); color: var(--nb-white); } .nb-cap h2 { color: var(--nb-white); font-size: clamp(31px, 4vw, 46px); } .nb-cap__grid { display: grid; grid-template-columns: repeat(4, 1fr); max-width: var(--nb-max); margin: 1.8rem auto 0; } .nb-cap__item { padding: 28px 18px; } .nb-cap__n { font-family: var(--nb-fh); font-size: clamp(40px, 5.5vw, 68px); line-height: 1; color: var(--nb-gold); } .nb-cap__l { font-family: var(--nb-fb); font-weight: 400; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 0.5rem; } /* ---- 4. Event types (white panel + tabs) --------------------------------- */ .nb-events { background: var(--nb-white); } .nb-tabs { display: flex; gap: 2rem; justify-content: center; border-bottom: 1px solid rgba(23,32,30,.12); margin: 1.5rem auto 2rem; max-width: var(--nb-max); } .nb-tab { font-family: var(--nb-fb); font-weight: 400; font-size: 15px; letter-spacing: 0.08em; padding: 0 0 0.75rem; border: none; background: none; border-bottom: 2px solid transparent; color: var(--nb-text); cursor: pointer; } .nb-tab.is-active { border-bottom-color: var(--nb-gold); } .nb-panel { display: none; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; max-width: var(--nb-max); margin-inline: auto; text-align: left; } .nb-panel.is-active { display: grid; animation: nb-fade 200ms ease-out; } @keyframes nb-fade { from { opacity: 0; transform: translateY(8px);} to { opacity: 1; transform: translateY(0);} } .nb-panel img { width: 100%; height: 360px; object-fit: cover; border-radius: 8px; } .nb-panel h3 { font-size: clamp(20px, 2.4vw, 26px); } .nb-panel a { color: var(--nb-gold); text-decoration: none; font-weight: 400; } .nb-wbadges { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; margin-top: 1.7rem; } .nb-wbadges img { height: 80px; width: auto; } /* ---- 5. Photo carousel (full-width, gold arrows under) ------------------- */ .nb-reel-section { padding: 15px 0 clamp(14px, 2vw, 22px); } .nb-reel { display: flex; gap: 8px; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; padding: 0 8px; scrollbar-width: none; -ms-overflow-style: none; } .nb-reel::-webkit-scrollbar { display: none; } .nb-reel img { height: clamp(260px, 38vw, 440px); width: auto; flex: 0 0 auto; border-radius: 6px; object-fit: cover; scroll-snap-align: center; display: block; } .nb-reel-nav { display: flex; gap: 14px; justify-content: center; margin-top: 22px; } .nb-reel-btn { width: 48px; height: 48px; border-radius: 50%; background: var(--nb-gold); color: var(--nb-text); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 24px; line-height: 1; box-shadow: 0 2px 10px rgba(23,32,30,.22); } .nb-reel-btn:hover { background: var(--nb-gold-d); } /* ---- 6. Culinary Canvas catering strip (logo left, text right) ----------- */ .nb-cc { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(32px, 5vw, 56px); align-items: center; max-width: var(--nb-max); margin-inline: auto; } .nb-cc .nb-overline { color: var(--nb-gold); } .nb-cc__logo { max-width: 340px; width: 100%; height: auto; display: block; } .nb-cc__body { font-size: clamp(17px, 1.5vw, 20px); margin: 0; } .nb-menulink { display: inline-block; margin-top: 1.1rem; font-family: var(--nb-fb); font-weight: 600; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nb-teal); text-decoration: none; } .nb-menulink:hover { color: var(--nb-gold); } /* ---- 7. CTA rail (warm GOLD band — mirrors Barnett's terra band, not black) */ .nb-cta { background: var(--nb-gold); } .nb-cta__inner { display: grid; grid-template-columns: 1fr auto; gap: clamp(24px, 4vw, 56px); align-items: center; max-width: var(--nb-max); margin-inline: auto; } .nb-cta__inner h2 { color: var(--nb-text); margin: 0; font-size: clamp(31px, 4vw, 46px); max-width: 16ch; } .nb-cta__actions { display: flex; flex-wrap: wrap; gap: 14px; } .nb-cta .nb-btn--primary { background: var(--nb-text); color: var(--nb-bg); } .nb-cta .nb-btn--primary:hover { background: var(--nb-teal); } .nb-cta .nb-btn--ghost { border-color: var(--nb-text); color: var(--nb-text); } .nb-cta .nb-btn--ghost:hover { background: var(--nb-text); color: var(--nb-bg); } /* ---- Award badges (shared cc/venue-badges block, if used inline) --------- */ .cc-venue-badges { display: flex; flex-wrap: wrap; gap: 26px; align-items: center; } .cc-venue-badges .cc-badge { margin: 0; } .cc-venue-badges .cc-badge-img { height: 80px; width: auto; display: block; } /* ============================================================ INTERIOR PAGE SECTIONS (About, Spaces, event pages, Gallery) Ported from Barnett's bn-* layout, rebranded to Noble tokens. ============================================================ */ .nb-section--alt { background: var(--nb-white); } .nb-rule { display: block; width: 48px; height: 3px; background: var(--nb-gold); border: 0; margin: 0 0 20px; } .nb-rule--center { margin-inline: auto; } .nb-sec-head { max-width: 720px; margin: 0 auto 48px; } .nb-sec-head .nb-overline { margin-bottom: 14px; } .nb-sec-head h2 { margin: 0 0 16px; } .nb-muted { color: rgba(23, 32, 30, 0.7); } .nb-twocol h2 em, .nb-sec-head h2 em { display: block; font-family: var(--nb-fa); font-style: italic; font-weight: 400; font-size: 0.66em; opacity: 0.85; margin-top: 0.3em; } /* Compact page hero (teal band) for interior pages */ .nb-pagehero { background: var(--nb-teal); color: var(--nb-white); padding: clamp(56px, 7vw, 76px) var(--nb-gut); } .nb-pagehero__in { max-width: var(--nb-max); margin-inline: auto; } .nb-pagehero__crumb { font-family: var(--nb-fb); font-weight: 600; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--nb-gold); margin: 0 0 18px; } .nb-pagehero h1 { font-family: var(--nb-fh); font-weight: 400; font-size: clamp(40px, 4.6vw, 58px); line-height: 1.12; color: var(--nb-white); max-width: 18ch; } .nb-pagehero h1 em { display: block; font-family: var(--nb-fa); font-style: italic; font-weight: 400; font-size: 0.6em; margin-top: 0.15em; color: var(--nb-gold); } .nb-pagehero__sub { font-family: var(--nb-fb); font-weight: 300; font-size: 17px; line-height: 1.65; color: rgba(251, 248, 236, 0.85); max-width: 54ch; margin: 20px 0 0; } /* Two-column (photo + text) */ .nb-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; max-width: var(--nb-max); margin-inline: auto; } .nb-twocol img { width: 100%; height: 100%; min-height: 340px; object-fit: cover; border-radius: 8px; display: block; } /* Logos inside a two-column (e.g. the CC management mark) render at natural size — not cover-cropped like photos. */ .nb-twocol .nb-cc__logo { width: auto; max-width: 260px; height: auto; min-height: 0; object-fit: contain; border-radius: 0; } .nb-twocol h2 { font-size: clamp(28px, 3.4vw, 40px); } /* Timeline */ .nb-timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; max-width: var(--nb-max); margin-inline: auto; } .nb-tl { padding-top: 22px; border-top: 2px solid var(--nb-gold); } .nb-tl__yr { font-family: var(--nb-fb); font-weight: 600; font-size: 22px; color: var(--nb-teal); } .nb-tl__txt { font-family: var(--nb-fb); font-weight: 300; font-size: 15px; line-height: 1.5; color: rgba(23, 32, 30, 0.7); margin-top: 8px; } /* Find us (map + facts) */ .nb-find { display: grid; grid-template-columns: 1.5fr 1fr; gap: 36px; align-items: stretch; max-width: var(--nb-max); margin-inline: auto; } .nb-find iframe { width: 100%; min-height: 420px; border: 1px solid var(--nb-gold); border-radius: 8px; display: block; } .nb-addr-side { display: grid; gap: 18px; align-content: start; } .nb-fact { border-top: 1px solid var(--nb-gold); padding-top: 10px; } .nb-fact__lbl { font-family: var(--nb-fb); font-weight: 600; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--nb-teal); } .nb-fact__val { font-size: 17px; line-height: 1.4; margin-top: 4px; } /* Room blocks (Spaces, event pages) */ .nb-room { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; max-width: var(--nb-max); margin-inline: auto; } .nb-room + .nb-room { margin-top: clamp(56px, 8vw, 96px); } .nb-room--reverse .nb-room__media { order: 2; } .nb-room img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: 8px; display: block; } .nb-room h3 { font-size: clamp(28px, 3vw, 36px); margin: 14px 0 0; } .nb-room h3 em { font-family: var(--nb-fa); color: var(--nb-gold); font-style: italic; } .nb-room__body { margin: 18px 0 0; color: rgba(23, 32, 30, 0.7); max-width: 46ch; } .nb-room__stats { display: flex; gap: 36px; margin: 26px 0; } .nb-room__stats div { display: flex; flex-direction: column; gap: 4px; } .nb-room__stats b { font-family: var(--nb-fh); font-size: 34px; line-height: 1; color: var(--nb-gold); } .nb-room__stats span { font-family: var(--nb-fb); font-weight: 400; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(23, 32, 30, 0.6); } .nb-room__feats { display: grid; gap: 10px; margin: 0 0 26px; } .nb-room__feats div { padding-left: 24px; position: relative; font-size: 15px; line-height: 1.5; } .nb-room__feats div::before { content: ""; position: absolute; left: 0; top: 11px; width: 14px; height: 1px; background: var(--nb-gold); } /* Menu cards (event pages) */ .nb-menus { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: var(--nb-max); margin-inline: auto; } .nb-menu { background: var(--nb-white); border: 1px solid var(--nb-gold); border-radius: 8px; padding: 28px 24px; } .nb-menu h3 { font-size: clamp(20px, 2.2vw, 24px); margin: 0 0 0.5rem; } .nb-menu p { font-size: 15px; color: rgba(23, 32, 30, 0.7); margin: 0; } /* Gallery grid + filter chips */ .nb-filter { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; max-width: var(--nb-max); margin: 0 auto 28px; } .nb-filter__chip { font-family: var(--nb-fb); font-weight: 400; font-size: 13px; letter-spacing: 0.06em; padding: 8px 20px; border: 1px solid var(--nb-gold); border-radius: 9999px; background: transparent; color: var(--nb-text); cursor: pointer; transition: background var(--nb-transition), color var(--nb-transition); } .nb-filter__chip:hover { background: rgba(200, 171, 127, 0.16); } .nb-filter__chip.is-active { background: var(--nb-gold); color: var(--nb-text); } .nb-gallery { column-count: 3; column-gap: 10px; max-width: var(--nb-max); margin-inline: auto; } .nb-gallery img { width: 100%; height: auto; border-radius: 6px; display: block; margin: 0 0 10px; break-inside: avoid; -webkit-column-break-inside: avoid; } /* Event-page brochure hero (2-col: copy + pricing card) */ .nb-brochure-hero .nb-pagehero__in { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; } .nb-brochure-card { background: var(--nb-bg); color: var(--nb-text); border: 1px solid var(--nb-gold); border-radius: 8px; padding: 28px 26px; } .nb-brochure-card .nb-overline { color: var(--nb-gold); } .nb-brochure-card h3 { font-size: clamp(22px, 2.4vw, 28px); margin: 0.3rem 0 0.6rem; } .nb-brochure-card p { font-size: 15px; color: rgba(23, 32, 30, 0.7); margin: 0 0 1.1rem; } /* Menu cards (event pages) */ .nb-menu-card { background: var(--nb-white); border: 1px solid var(--nb-gold); border-radius: 8px; padding: 28px 24px; } .nb-menu-card__knd { font-family: var(--nb-fb); font-weight: 600; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--nb-teal); margin-bottom: 8px; } .nb-menu-card h4 { font-family: var(--nb-fh); font-weight: 400; font-size: 22px; margin: 0 0 14px; } .nb-course { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid rgba(23, 32, 30, 0.12); font-size: 14px; } .nb-course b { font-weight: 600; } .nb-course span { color: rgba(23, 32, 30, 0.7); text-align: right; } /* Inquiry-form gate (shared cc/venue-inquiry-form block) — Barnett-style, Noble skin. Teal band (not black), centered head + form panel. The 2-step gated brochure FLOW + couple's-names fields come from the registry inquirySchema=v2 flip (Will). */ .nb-gate { background: var(--nb-teal); color: var(--nb-white); } .nb-gate__head { max-width: 680px; margin: 0 auto 28px; text-align: center; } .nb-gate__head .nb-overline { color: var(--nb-gold); } .nb-gate__head h2 { color: var(--nb-white); } .nb-gate__head h2 em { display: block; font-family: var(--nb-fa); font-style: italic; font-weight: 400; font-size: 0.66em; opacity: 0.9; margin-top: 0.3em; color: var(--nb-gold); } .nb-gate__intro { color: rgba(251, 248, 236, 0.82); max-width: 56ch; margin: 12px auto 0; } .nb-gate .cc-inquiry-form { max-width: 640px; margin: 0 auto; background: rgba(251, 248, 236, 0.05); border: 1px solid rgba(200, 171, 127, 0.4); border-radius: 10px; padding: clamp(24px, 4vw, 40px); } .cc-inquiry-form .cif-field { margin-bottom: 16px; } .cc-inquiry-form .cif-row.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .cc-inquiry-form .cif-group-label { font-family: var(--nb-fb); color: rgba(251, 248, 236, 0.9); font-size: 14px; margin: 0 0 8px; } .cc-inquiry-form label { display: block; font-family: var(--nb-fb); font-weight: 600; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(251, 248, 236, 0.8); margin-bottom: 6px; } .cc-inquiry-form input, .cc-inquiry-form select, .cc-inquiry-form textarea { width: 100%; box-sizing: border-box; font-family: var(--nb-fb); font-weight: 300; font-size: 15px; padding: 12px 14px; background: var(--nb-bg); color: var(--nb-text); border: 1px solid rgba(200, 171, 127, 0.5); border-radius: 4px; } .cc-inquiry-form input:focus, .cc-inquiry-form select:focus, .cc-inquiry-form textarea:focus { outline: 2px solid var(--nb-gold); outline-offset: 1px; border-color: var(--nb-gold); } .cc-inquiry-form .cif-checkbox { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; } .cc-inquiry-form .cif-checkbox input { width: auto; margin-top: 3px; } .cc-inquiry-form .cif-checkbox label { text-transform: none; letter-spacing: 0; font-weight: 300; font-size: 14px; color: rgba(251, 248, 236, 0.85); margin: 0; } .cc-inquiry-form .cif-disclosure { font-size: 12px; line-height: 1.5; color: rgba(251, 248, 236, 0.6); font-style: italic; } .cc-inquiry-form .cif-disclosure a { color: var(--nb-gold); } .cc-inquiry-form .cif-submit, .cc-inquiry-form .cif-submit-1 { width: 100%; background: var(--nb-gold); color: var(--nb-text); font-family: var(--nb-fb); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 14px; padding: 15px; border: 0; border-radius: 4px; cursor: pointer; } .cc-inquiry-form .cif-submit:hover, .cc-inquiry-form .cif-submit-1:hover { background: var(--nb-gold-d); } .cc-inquiry-form .cif-status { text-align: center; margin-top: 12px; color: rgba(251, 248, 236, 0.85); } @media (max-width: 760px) { .nb-brochure-hero .nb-pagehero__in { grid-template-columns: 1fr; } .cc-inquiry-form .cif-row.two-col { grid-template-columns: 1fr; } .nb-section { padding: 48px 1.5rem; } .nb-cap__grid { grid-template-columns: 1fr 1fr; } .nb-panel { grid-template-columns: 1fr; } .nb-cc, .nb-cta__inner { grid-template-columns: 1fr; text-align: center; } .nb-cc__logo { margin-inline: auto; } .nb-cta__actions { justify-content: center; } .nb-reel-btn { width: 40px; height: 40px; font-size: 20px; } .nb-wbadges img { height: 64px; } .nb-twocol, .nb-find, .nb-room, .nb-menus, .nb-timeline { grid-template-columns: 1fr; } .nb-gallery { column-count: 2; } .nb-room--reverse .nb-room__media { order: 0; } }