/* ============================================================ NOVO Hotels Collection — Design System (production bundle) Single source of truth for tokens shared by every page. Generated from /novohotelswebsite (tokens/colors · typography · spacing · effects). Link THIS file from each HTML page. Two themes over one dark chrome: · Boutique — default :root, warm gold accent (#D4AF37) · Studio — class="theme-studio", sage green accent (#A8C09A) Legacy aliases (--bg-dark, --card-bg, --text-light, --text-muted, --accent-gold, --accent-silver) map the original page variables onto the semantic tokens so existing page CSS keeps working and re-themes automatically inside .theme-studio. ============================================================ */ /* Fonts are loaded via a in each page's (with preconnect) — no @import here, to avoid a duplicate render-blocking request. */ :root { /* ---- Raw palette : neutrals (Boutique chrome) ---- */ --novo-ink-900: #0F1115; --novo-ink-850: #12151B; --novo-ink-800: #161920; --novo-ink-700: #232733; --novo-white: #F3F4F6; --novo-gray-300: #D1D5DB; --novo-gray-400: #9CA3AF; /* ---- Raw palette : accents ---- */ --novo-gold: #D4AF37; --novo-gold-300: #E3C766; --novo-silver: #E5E7EB; --novo-sage: #A8C09A; --novo-sage-300: #BFD3B3; /* ---- Raw palette : forest neutrals (Studio chrome) ---- */ --novo-forest-900:#0E120F; --novo-forest-850:#11160F; --novo-forest-800:#151B15; --novo-forest-mute:#9EAA9B; --novo-forest-text:#F2F5F0; /* ---- Semantic feedback ---- */ --novo-danger: #FF8A8A; /* ---- Semantic aliases — DEFAULT = Boutique (gold) ---- */ --surface-base: var(--novo-ink-900); --surface-raised: var(--novo-ink-850); --surface-card: var(--novo-ink-800); --surface-inset: rgba(255, 255, 255, 0.03); --surface-placeholder: var(--novo-ink-700); --text-primary: var(--novo-white); --text-secondary: var(--novo-gray-400); --text-lead: var(--novo-gray-300); --accent: var(--novo-gold); --accent-bright: var(--novo-gold-300); --accent-contrast: var(--novo-ink-900); --accent-soft: rgba(212, 175, 55, 0.12); --accent-ring: rgba(212, 175, 55, 0.30); --border-subtle: rgba(255, 255, 255, 0.05); --border-hairline: rgba(255, 255, 255, 0.08); --border-faint: rgba(255, 255, 255, 0.03); --border-accent: var(--accent-ring); --overlay-hero: linear-gradient(90deg, rgba(15,17,21,0.92) 0%, rgba(15,17,21,0.65) 55%, rgba(15,17,21,0.40) 100%); --overlay-scrim: linear-gradient(to top, rgba(15,17,21,0.45), transparent 55%); --glow-ambient: radial-gradient(circle at center, #1a1f2c 0%, var(--surface-base) 70%); /* ---- Typography ---- */ --font-display: 'Marcellus', 'Cormorant Garamond', Georgia, serif; --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, sans-serif; --weight-light: 300; --weight-regular: 400; --weight-semibold: 600; --text-display-xl: clamp(2.5rem, 6vw, 4.5rem); --text-display-lg: clamp(1.8rem, 4vw, 2.8rem); --text-display-md: 1.8rem; --text-display-sm: 1.4rem; --text-display-xs: 1.25rem; --text-lead-size: 1.1rem; --text-base: 1rem; --text-sm: 0.95rem; --text-xs: 0.85rem; --text-2xs: 0.75rem; --leading-tight: 1.1; --leading-display: 1.2; --leading-body: 1.6; --tracking-logo: 4px; --tracking-eyebrow: 3px; --tracking-tag: 2px; --tracking-button: 1.5px; --tracking-display: 1px; /* ---- Spacing, radii & layout ---- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-10: 4rem; --space-12: 6rem; --pad-card: 2.2rem; --pad-card-lg: 2.5rem; --pad-button: 0.9rem 1.8rem; --pad-chip: 0.35rem 0.9rem; --gap-grid: 1.8rem; --gap-tight: 1rem; --gap-loose: 2.5rem; --container-max: 1300px; --container-prose: 720px; --page-gutter: 8%; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 16px; --radius-pill: 50px; --radius-full: 9999px; --control-h: 44px; /* ---- Motion ---- */ --ease-novo: cubic-bezier(0.16, 1, 0.3, 1); --dur-base: 0.4s; --dur-fast: 0.3s; --dur-slow: 0.6s; --transition: all var(--dur-base) var(--ease-novo); --lift-card: -6px; --lift-hero: -10px; --lift-button: -2px; --zoom-image: 1.06; --zoom-gallery:1.08; /* ---- Elevation (outer shadows) ---- */ --shadow-card: 0 20px 40px rgba(0, 0, 0, 0.30); --shadow-hover: 0 30px 60px rgba(212, 175, 55, 0.05); --shadow-lift: 0 12px 30px rgba(212, 175, 55, 0.30); --shadow-lift-sm: 0 10px 25px rgba(212, 175, 55, 0.25); --shadow-lightbox:0 30px 80px rgba(0, 0, 0, 0.60); /* ---- Blur (glass chrome) ---- */ --blur-header: blur(10px); --blur-glass: blur(5px); --blur-lightbox:blur(6px); --scrim-header: rgba(15, 17, 21, 0.85); --scrim-modal: rgba(8, 9, 12, 0.92); /* ============================================================ Legacy aliases — keep the original page CSS working. Re-declared under .theme-studio so they re-resolve to sage. ============================================================ */ --bg-dark: var(--surface-base); --card-bg: var(--surface-card); --text-light: var(--text-primary); --text-muted: var(--text-secondary); --accent-gold: var(--accent); --accent-silver: var(--novo-silver); } /* ============================================================ Studio theme — sage accent + forest-tinted chrome. Apply class="theme-studio" on . ============================================================ */ .theme-studio { --surface-base: var(--novo-forest-900); --surface-raised: var(--novo-forest-850); --surface-card: var(--novo-forest-800); --text-primary: var(--novo-forest-text); --text-secondary: var(--novo-forest-mute); --accent: var(--novo-sage); --accent-bright: var(--novo-sage-300); --accent-contrast: var(--novo-forest-900); --accent-soft: rgba(168, 192, 154, 0.12); --accent-ring: rgba(168, 192, 154, 0.30); --overlay-hero: linear-gradient(90deg, rgba(14,18,15,0.92) 0%, rgba(14,18,15,0.65) 55%, rgba(14,18,15,0.40) 100%); --overlay-scrim: linear-gradient(to top, rgba(14,18,15,0.45), transparent 55%); --glow-ambient: radial-gradient(circle at center, #16211a 0%, var(--surface-base) 75%); /* Studio casts a sage-tinted lift instead of gold */ --shadow-hover: 0 30px 60px rgba(168, 192, 154, 0.05); --shadow-lift: 0 12px 30px rgba(168, 192, 154, 0.30); --shadow-lift-sm: 0 10px 25px rgba(168, 192, 154, 0.25); --scrim-header: rgba(14, 18, 15, 0.85); /* Legacy aliases re-resolve to the Studio palette */ --bg-dark: var(--surface-base); --card-bg: var(--surface-card); --text-light: var(--text-primary); --text-muted: var(--text-secondary); --accent-gold: var(--accent); } @media (prefers-reduced-motion: reduce) { :root { --transition: none; } } /* ---- Minimal base reset shared by every NOVO surface ---- */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); font-weight: var(--weight-light); background-color: var(--surface-base); color: var(--text-primary); line-height: var(--leading-body); overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; } /* ============================================================ VISUAL ELEVATION PASS — progressive enhancement Paired with assets/novo-enhance.js. Every hidden/animated state gates behind body.novo-anim (JS-set only when IntersectionObserver exists) or has a visible resting default, so JS-off degrades to full static content. One easing (--ease-novo) for all gestures; `linear` only for the ambient Ken-Burns pan. All guards respect prefers-reduced-motion. ============================================================ */ /* ---- Scroll reveal + staggered card cascade ---- */ body.novo-anim [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity var(--dur-slow) var(--ease-novo), transform var(--dur-slow) var(--ease-novo); transition-delay: var(--reveal-delay, 0s); } body.novo-anim [data-reveal].is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { body.novo-anim [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ---- Eyebrow accent line (resting = visible; draws in under section eyebrows) ---- */ .eyebrow { position: relative; } .eyebrow::after { content: ''; position: absolute; left: 0; bottom: -10px; height: 1px; width: 40px; background: var(--accent); transform: scaleX(1); transform-origin: left; } body.novo-anim .section-head .eyebrow::after, body.novo-anim .about-text .eyebrow::after, body.novo-anim .concept .eyebrow::after { transform: scaleX(0); transition: transform var(--dur-base) var(--ease-novo) 0.15s; } body.novo-anim [data-reveal].is-in .eyebrow::after { transform: scaleX(1); } @media (prefers-reduced-motion: reduce) { .eyebrow::after { transform: scaleX(1) !important; transition: none; } } /* ---- Slow Ken-Burns drift on property hero photo ---- */ @keyframes novo-kenburns { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.08) translate3d(-1.2%, -1.2%, 0); } } .hero-bg { transform-origin: 60% 40%; animation: novo-kenburns 24s linear forwards; } @media (prefers-reduced-motion: reduce) { .hero-bg { animation: none; } } /* ---- Hero scroll-cue (photo heroes) ---- */ .novo-scrollcue { position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%); width: 1px; height: 54px; background: linear-gradient(to bottom, transparent, var(--accent)); opacity: 0; z-index: 2; pointer-events: none; transition: opacity var(--dur-base) var(--ease-novo); } body.novo-anim .novo-scrollcue { opacity: 0.55; } .novo-scrollcue span { position: absolute; left: 50%; top: 0; width: 4px; height: 4px; margin-left: -2px; border-radius: var(--radius-full); background: var(--accent); animation: novoCue 2.4s var(--ease-novo) infinite; } @keyframes novoCue { 0% { transform: translateY(0); opacity: 1; } 70% { opacity: 1; } 100% { transform: translateY(46px); opacity: 0; } } .novo-scrollcue.is-hidden { opacity: 0 !important; } @media (prefers-reduced-motion: reduce) { .novo-scrollcue span { animation: none; top: auto; bottom: 0; } } @media (max-width: 860px) { .novo-scrollcue { display: none; } } /* ---- Scroll-progress hairline ---- */ .novo-progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: var(--accent); z-index: 60; pointer-events: none; } /* ---- Back-to-top floating pill ---- */ #novo-top { position: fixed; left: 20px; bottom: 20px; z-index: 55; width: 46px; height: 46px; display: grid; place-items: center; border-radius: var(--radius-pill); background: var(--scrim-header); backdrop-filter: var(--blur-glass); -webkit-backdrop-filter: var(--blur-glass); border: 1px solid var(--border-hairline); color: var(--accent); box-shadow: var(--shadow-card); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--dur-base) var(--ease-novo), transform var(--dur-base) var(--ease-novo), border-color var(--dur-base) var(--ease-novo); } #novo-top svg { width: 20px; height: 20px; } #novo-top.show { opacity: 1; visibility: visible; transform: none; } #novo-top:hover { border-color: var(--accent-ring); transform: translateY(var(--lift-button)); } #novo-top:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent-ring), var(--shadow-card); } @media (prefers-reduced-motion: reduce) { #novo-top { transition: none; } } @media (max-width: 860px) { #novo-top { left: 12px; bottom: 12px; } } /* ---- Gallery hover: zoom affordance ---- */ .gallery-zoom { position: absolute; left: 14px; bottom: 14px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--radius-pill); background: var(--scrim-header); border: 1px solid var(--accent-ring); color: var(--accent); opacity: 0; transform: translateY(8px) scale(0.9); z-index: 2; pointer-events: none; transition: opacity var(--dur-base) var(--ease-novo), transform var(--dur-base) var(--ease-novo); } .gallery-zoom svg { width: 18px; height: 18px; } .gallery-item:hover .gallery-zoom, .gallery-item:focus-within .gallery-zoom { opacity: 1; transform: translateY(0) scale(1); } @media (prefers-reduced-motion: reduce) { .gallery-zoom { transition: opacity var(--dur-base) var(--ease-novo); transform: none; } .gallery-item:hover .gallery-zoom, .gallery-item:focus-within .gallery-zoom { transform: none; } } @media (max-width: 860px) { .gallery-zoom { width: 28px; height: 28px; } .gallery-zoom svg { width: 15px; height: 15px; } } /* ---- Stat tiles gain the shared lift; editorial accent baseline ---- */ .stat { transition: var(--transition); } .stat:hover { transform: translateY(var(--lift-card)); border-color: var(--accent-ring); box-shadow: var(--shadow-card), var(--shadow-hover); } .stat .num { position: relative; padding-bottom: var(--space-2); } .stat .num::after { content: ''; position: absolute; left: 0; bottom: 0; width: 24px; height: 2px; background: var(--accent); border-radius: var(--radius-full); } /* ---- Hairline dividers between stacked sections ---- */ section.block + section.block { position: relative; } section.block + section.block::before { content: ''; position: absolute; top: 0; left: 8%; right: 8%; height: 1px; background: var(--border-hairline); } .concept { position: relative; } .concept::before { content: ''; position: absolute; top: 0; left: 2rem; right: 2rem; height: 1px; background: var(--border-hairline); } @media (max-width: 860px) { section.block + section.block::before { left: 6%; right: 6%; } } /* ---- Solid-button sheen sweep on hover ---- */ .btn-solid, .btn-book { position: relative; overflow: hidden; } .btn-solid::after, .btn-book::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%); transform: translateX(-120%); transition: transform var(--dur-base) var(--ease-novo); } .btn-solid:hover::after, .btn-book:hover::after { transform: translateX(120%); } @media (prefers-reduced-motion: reduce) { .btn-solid::after, .btn-book::after { display: none; } } /* ---- Wipe-in underline for internal text links ---- */ footer a, .contact-row a, .nav-back { background-image: linear-gradient(var(--accent), var(--accent)); background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat; text-decoration: none; transition: background-size var(--dur-base) var(--ease-novo), color var(--dur-base) var(--ease-novo); } footer a:hover, .contact-row a:hover, .nav-back:hover { background-size: 100% 1px; color: var(--accent); } @media (prefers-reduced-motion: reduce) { footer a, .contact-row a, .nav-back { transition: none; } } /* ---- Shared scrolled-header glass (so the home page condenses too) ---- */ #site-header.scrolled { background: var(--scrim-header); backdrop-filter: var(--blur-header); -webkit-backdrop-filter: var(--blur-header); border-bottom: 1px solid var(--border-subtle); padding: 1rem 4%; } /* ---- Global keyboard focus ring (zero specificity; never overrides input borders) ---- */ :where(a, button, input, select, textarea, .gallery-item):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-sm); } /* ---- Skip-to-content link (visible on keyboard focus) ---- */ .skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--accent); color: var(--accent-contrast); padding: 0.6rem 1rem; border-radius: 0 0 var(--radius-sm) 0; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-decoration: none; letter-spacing: var(--tracking-button); } .skip:focus { left: 0; } /* ---- In-page category shortcuts in the property-page header ---- */ .nav-link { font-size: 0.8rem; text-transform: uppercase; letter-spacing: var(--tracking-button); color: var(--text-secondary); text-decoration: none; white-space: nowrap; transition: var(--transition); } .nav-link:hover { color: var(--accent); } header .nav-actions { gap: 1.15rem; } @media (max-width: 980px) { .nav-link { display: none; } } /* ---- Smarter spacing: anchored sections clear the fixed header on jump ---- */ section[id] { scroll-margin-top: 88px; } /* ---- Bold accent rule under the hero headline (visible on load, no JS/scroll) ---- */ .hero h1 { position: relative; } .hero h1::after { content: ''; display: block; height: 3px; width: 90px; margin-top: 1.4rem; background: var(--accent); border-radius: var(--radius-full); } /* Home hero is centred → centre the rule too */ main.hero { /* property heroes are left-aligned; rule stays left */ }