/* ========================================================================== Opal & Ivy — Components: eyebrows, buttons, wordmark, header, menu, masks, frames, cursor ========================================================================== */ /* ---- Eyebrow / micro label ---------------------------------------------- */ .eyebrow { display: inline-flex; align-items: center; gap: 0.7em; font-family: var(--font-sans); font-size: var(--fs-micro); font-weight: 500; line-height: 1; letter-spacing: var(--track); text-transform: uppercase; color: var(--ink-soft); } .eyebrow__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); flex: none; } /* ---- Logo lockup: the horizontal mark, traced from the brand artwork ------ The sprite at the top of holds the paths; each instance is an that references them. Colours flow in through custom properties. -------- */ .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .lockup-link { display: inline-block; line-height: 0; } .lockup { --lockup-h: 3rem; --logo-ink: var(--ink); --logo-amp: var(--accent); --logo-sprig: var(--accent); --logo-gold: var(--gold); --logo-est: var(--ink-soft); display: block; height: var(--lockup-h); width: calc(var(--lockup-h) * 3.282); overflow: visible; } .lockup__sprig { transform-box: fill-box; transform-origin: 96% 96%; } .lockup-link:hover .lockup__sprig, .lockup-link:focus-visible .lockup__sprig { animation: sprig-sway 1.8s var(--ease-soft); } .lockup--header { --lockup-h: 2.9rem; } @media (min-width: 64em) { .lockup--header { --lockup-h: 3.4rem; } } .lockup--footer { --lockup-h: clamp(4rem, 3rem + 4vw, 6rem); --logo-ink: var(--on-dark); --logo-amp: var(--gold-soft); --logo-sprig: color-mix(in srgb, var(--cream) 82%, transparent); --logo-gold: var(--gold-soft); --logo-est: var(--on-dark-soft); } .lockup--intro { --lockup-h: clamp(4.5rem, 2rem + 11vw, 10rem); } /* ---- Buttons ------------------------------------------------------------ */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; min-height: 3.25rem; padding: 0 1.9rem; border-radius: var(--pill); border: 1px solid transparent; font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1; white-space: nowrap; overflow: hidden; isolation: isolate; cursor: pointer; transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-spring); } .btn > span { position: relative; z-index: 1; display: inline-block; transition: transform var(--dur-base) var(--ease-spring); } /* Liquid fill that rises on hover */ .btn::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: var(--btn-fill, var(--accent-2)); transform: translateY(101%); transition: transform 0.7s var(--ease-soft); z-index: 0; } .btn:hover::before, .btn:focus-visible::before { transform: translateY(0); } .btn--small { min-height: 2.6rem; padding: 0 1.3rem; font-size: 0.6875rem; } .btn--primary { background: var(--accent); color: var(--cream); --btn-fill: var(--accent-2); } .btn--line { background: transparent; color: var(--ink); border-color: var(--ink); --btn-fill: var(--ink); } .btn--line:hover, .btn--line:focus-visible { color: var(--cream); } .btn--cream { background: var(--cream); color: var(--espresso); --btn-fill: var(--gold-soft); } /* Magnetic transition states (JS toggles .is-magnet while hovering) */ [data-magnetic] { will-change: transform; } [data-magnetic].is-magnet, [data-magnetic].is-magnet > span { transition-duration: 0.22s; transition-timing-function: var(--ease-out); } /* ---- Section heads ------------------------------------------------------ */ .section__head { display: grid; gap: 1.5rem; max-width: 48rem; margin-bottom: clamp(2.5rem, 2rem + 3vw, 5rem); } .section__head--center { margin-inline: auto; text-align: center; justify-items: center; } .section__title { font-size: var(--fs-h2); line-height: 0.98; } .section__title em { color: var(--accent-2); } .section__lede { font-size: var(--fs-lede); line-height: 1.45; color: var(--ink-soft); max-width: 34ch; } .section__head--center .section__lede { max-width: 40ch; } /* ---- Mask reveal wrapper (line-by-line headline entrances) --------------- */ .mask { display: block; clip-path: inset(-0.12em 0 -0.32em 0); } .mask__inner { display: inline-block; transform-origin: 0 100%; } /* ---- Image frame reveal ------------------------------------------------- */ .frame { position: relative; overflow: hidden; background: var(--surface); } .frame img { width: 100%; height: 100%; object-fit: cover; } /* ---- Header ------------------------------------------------------------- */ .site-header { position: fixed; inset-inline: 0; top: 0; z-index: 60; height: var(--header-h); display: flex; align-items: center; padding-inline: var(--gutter); color: var(--ink); transition: transform 0.7s var(--ease-soft), background-color 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out); } .site-header::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px; background: var(--line); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.9s var(--ease-soft); } .site-header.is-scrolled { background: color-mix(in srgb, var(--cream) 84%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); } .site-header.is-scrolled::after { transform: scaleX(1); } .site-header.is-hidden { transform: translateY(-100%); } .site-header__inner { width: min(var(--max), 100%); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 2rem; } .site-header__logo { flex: none; } .site-nav { display: none; } .site-nav__list { display: flex; gap: 2.25rem; } .site-nav__link { position: relative; display: inline-block; padding: 0.5rem 0; font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--track); text-transform: uppercase; } .site-nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.2rem; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: 100% 50%; transition: transform 0.6s var(--ease-soft); } .site-nav__link:hover::after, .site-nav__link:focus-visible::after { transform: scaleX(1); transform-origin: 0 50%; } .site-header__actions { display: flex; align-items: center; gap: 1rem; } .site-header__cta { display: none; } .nav-toggle { display: inline-flex; align-items: center; gap: 0.75rem; min-height: 2.6rem; padding: 0 0.25rem 0 0.75rem; } .nav-toggle__label { font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--track); text-transform: uppercase; } .nav-toggle__lines { position: relative; width: 2.25rem; height: 2.25rem; border: 1px solid var(--ink); border-radius: 50%; } .nav-toggle__lines i { position: absolute; left: 50%; top: 50%; width: 14px; height: 1px; background: var(--ink); transform: translate(-50%, calc(-50% - 3px)); transition: transform 0.6s var(--ease-spring); } .nav-toggle__lines i:last-child { transform: translate(-50%, calc(-50% + 3px)); } .nav-toggle[aria-expanded="true"] .nav-toggle__lines i { transform: translate(-50%, -50%) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__lines i:last-child { transform: translate(-50%, -50%) rotate(-45deg); } /* ---- Full-screen menu (small screens) ----------------------------------- */ .menu { position: fixed; inset: 0; z-index: 55; display: grid; grid-template-rows: minmax(min-content, 1fr) auto; overflow-y: auto; padding: calc(var(--header-h) + 1.5rem) var(--gutter) 2rem; background: var(--surface); color: var(--ink); visibility: hidden; clip-path: inset(0 0 100% 0); transition: clip-path 0.9s var(--ease-soft), visibility 0s 0.9s; } .menu.is-open { visibility: visible; clip-path: inset(0); transition-delay: 0s; } .menu__nav { display: grid; align-content: center; } .menu__list { display: grid; gap: 0.25rem; } .menu__link { display: flex; align-items: flex-start; gap: 1rem; padding: 0.35rem 0; font-family: var(--font-serif); font-weight: 300; font-size: clamp(2.75rem, 2rem + 6vw, 5rem); line-height: 1.05; letter-spacing: -0.015em; } .menu__num { padding-top: 1em; font-family: var(--font-sans); font-size: var(--fs-micro); letter-spacing: var(--track); color: var(--gold); } .menu__link .mask__inner { transform: translateY(130%) rotate(3deg); transition: transform 0.9s var(--ease-out); } .menu.is-open .menu__link .mask__inner { transform: none; } .menu.is-open .menu__item:nth-child(1) .mask__inner { transition-delay: 0.15s; } .menu.is-open .menu__item:nth-child(2) .mask__inner { transition-delay: 0.22s; } .menu.is-open .menu__item:nth-child(3) .mask__inner { transition-delay: 0.29s; } .menu.is-open .menu__item:nth-child(4) .mask__inner { transition-delay: 0.36s; } .menu__meta { display: grid; gap: 0.75rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: var(--fs-small); } .menu__meta a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 0.2em; } /* ---- Cursor ring (fine pointers only, added by JS) ---------------------- */ .cursor { position: fixed; top: 0; left: 0; z-index: 90; width: 1.75rem; height: 1.75rem; margin: -0.875rem 0 0 -0.875rem; border: 1px solid var(--accent); border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity 0.4s var(--ease-out); will-change: transform; } .cursor::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--accent); opacity: 0; transform: scale(0.4); transition: transform 0.7s var(--ease-spring), opacity 0.4s var(--ease-out); } .cursor.is-visible { opacity: 1; } .cursor.is-hover::after { opacity: 0.14; transform: scale(2.4); } /* ---- Desktop header ------------------------------------------------------ */ @media (min-width: 64em) { .site-nav { display: block; } .site-header__cta { display: inline-flex; } .nav-toggle { display: none; } .menu { display: none; } } /* Keep a working booking link when scripts are unavailable. */ html.no-js .nav-toggle, html.no-js .menu { display: none; } html.no-js .site-header__cta { display: inline-flex; } html.no-js .site-header { background: var(--cream); transform: none; }