:root {
--navy: #1d3b5a;
--text: #1a1a1a;
--muted: #626871;
--blue: linear-gradient(360deg, #d9e2ec85 0%, #e5d9ec87 42%, #d9e9ec6e 100%, #d9e2ec75 61%);
--pale: #f2f5f8;
--border: #dce2e8;
--sans: 'Manrope', Arial, sans-serif;
--serif: 'Playfair Display', Georgia, serif;
--pad: clamp(22px, 5.5vw, 84px)
}
* {
box-sizing: border-box
}
html {
scroll-behavior: smooth;
scroll-padding-top: 100px
}
body {
margin: 0;
color: var(--text);
background: #fff;
font: 400 16px/1.75 var(--sans);
-webkit-font-smoothing: antialiased
}
body.locked {
overflow: hidden
}
h1,
h2,
h3,
p,
figure,
blockquote {
margin: 0
}
h1,
h2,
h3 {
font-weight: 500;
line-height: 1.15
}
a {
color: inherit;
text-decoration: none
}
button,
input {
font: inherit
}
button {
cursor: pointer;
color: inherit
}
img {
display: block;
max-width: 100%
}
button,
a {
-webkit-tap-highlight-color: transparent
}
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--navy);
outline-offset: 5px
}
button {
border-radius: 0
}
p {
color: var(--muted)
}
em {
font-family: var(--serif);
font-weight: 400
}
.wrap {
max-width: 1440px;
position: relative;
margin: auto;
padding-inline: var(--pad);
}
.section {
padding-block: 60px;
}
.label {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 13px;
border: 1px solid #bfcbd7;
border-radius: 30px;
font-size: 12px;
color: var(--navy);
text-transform: uppercase;
letter-spacing: .14em;
margin-bottom: 19px;
font-weight: 600;
line-height: 1.6;
}
.label:before {
content: '';
width: 5px;
height: 5px;
background: var(--navy);
border-radius: 50%
}
.heading {
font-size: clamp(35px, 4.4vw, 60px);
letter-spacing: -.04em;
line-height: 1.12;
color: #1d3b5a;
}
.section-head {
margin: 0 auto 47px;
text-align: center
}
.section-head p {
font-size: 16px;
max-width: 630px;
margin: 22px auto 0
}
.button {
display: inline-flex;
justify-content: center;
align-items: center;
gap: 22px;
padding: 13px 22px;
min-height: 48px;
background: var(--navy);
color: #fff;
border: 1px solid var(--navy);
border-radius: 12px;
font-size: 14px;
line-height: 1.5;
transition: background .25s, transform .25s, box-shadow .25s
}
.button:hover {
background: #2d5277;
transform: translateY(-2px);
box-shadow: 0 5px 14px #1d3b5a20
}
.button.white {
background: #fff;
border-color: #fff;
color: var(--navy)
}
.button.outline {
background: transparent;
color: var(--navy)
}
.text-link {
display: inline-flex;
align-items: center;
gap: 24px;
border-bottom: 1px solid #a5b4c2;
padding: 7px 0;
font-size: 14px;
transition: gap .25s, color .25s
}
.text-link:hover {
gap: 31px;
color: var(--navy)
}
.skip {
position: fixed;
top: -100px;
left: 15px;
background: white;
padding: 10px;
z-index: 200
}
.skip:focus {
top: 10px
}
.site-header {
position: sticky;
top: 0;
background: #fffffffa;
z-index: 60;
border-bottom: 1px solid #f1f3f6
}
.nav-inner {
height: 80px;
display: flex;
padding: 0 10px;
align-items: center;
justify-content: space-between;
gap: 28px;
}
.brand {
width: 225px;
flex: none
}
.brand img {
width: 100%;
height: 50px;
object-fit: contain
}
.desktop-nav {
display: flex;
align-items: center;
gap: 27px;
font-size: 13px;
text-transform: uppercase;
letter-spacing: .025em
}
.desktop-nav a {
position: relative;
color: #1d3b5a;
font-weight: 600;
}
.desktop-nav a:after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 1px;
background: var(--navy);
transition: width .25s
}
.desktop-nav a:hover:after {
width: 100%
}
.nav-end {
display: flex;
gap: 16px;
align-items: center
}
.nav-end .nora-bottom-actions__icon {
width: 35px;
height: 35px;
border: 1px solid #1d3b5a;
color: #d92027;
background: none;
font-size: 17px;
transition: background .25s, transform .25s, box-shadow .25s;
}
.nav-end .nora-bottom-actions__icon:hover {
transform: translateY(-2px);
box-shadow: 0 5px 14px #1d3b5a20;
}
.nav-end .button {
padding: 9px 18px;
min-height: 40px;
font-size: 13px;
gap: 10px;
}
.menu-button {
display: none;
background: none;
border: 0;
width: 44px;
height: 44px;
padding: 10px
}
.menu-button span {
display: block;
width: 24px;
height: 1px;
background: var(--navy);
margin: 6px 0
}
.drawer {
position: fixed;
inset: 0 0 0 auto;
margin: 0;
width: min(430px, 100%);
height: 100dvh;
max-height: 100%;
border: 0;
background: white;
padding: 28px;
color: var(--navy);
overflow: auto
}
.drawer::backdrop {
background: #142d46a3
}
.drawer-top {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 25px;
border-bottom: 1px solid var(--border)
}
.mobile-book-consultation {
background: var(--navy);
color: #fff;
font-family: Arial, Helvetica, sans-serif;
border-radius: 12px;
min-height: 47px;
text-transform: uppercase;
font-size: 14px;
line-height: 27px;
margin: 20px 0 20px;
text-align: center;
display: block;
width: 100%;
padding: 10px 0;
}
span.mobile-banner-text h4 {
margin: 13px 0 10px;
}
span.mobile-banner-text {
margin: 0 0 30px;
display: block;
}
.drawer-top img {
width: 190px
}
.close-button {
display: grid;
place-items: center;
width: 42px;
height: 42px;
line-height: 36px;
border: 1px solid var(--border);
background: white;
border-radius: 50%;
font-size: 25px;
}
.drawer nav {
display: grid;
gap: 8px;
margin: 30px 0
}
.drawer nav a {
font-size:15px;
padding: 5px 0
}
.drawer-contact {
margin-top: 32px;
font-size: 14px;
border-top: 1px solid var(--border);
padding-top: 25px
}
.drawer-contact>a {
display: block;
overflow-wrap: anywhere
}
.drawer-contact p {
margin: 16px 0
}
.hero {
position: relative;
margin: 0 auto;
min-height: 710px;
overflow: hidden;
background: var(--blue);
isolation: isolate;
}
.hero-inner {
position: relative;
z-index: 2;
min-height: 710px;
display: flex;
align-items: flex-end;
padding: 85px 4.2vw 62px;
max-width: 1440px;
margin: auto
}
.hero-content {
margin: 0 auto;
text-align: center;
}
.hero h1 {
font-size: 50px;
letter-spacing: -.045em;
color: var(--navy);
text-shadow: 0 0 17px #fff;
line-height: 1.04;
margin-bottom: 25px;
}
.hero-content>p {
font-size: 16px;
max-width: 555px;
margin: 0 auto 40px;
text-shadow: 0 0 10px #fff;
line-height: 1.8;
color: #46576a;
}
.hero-image {
position: absolute;
right: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 53% center;
z-index: -2;
}
.hero:after {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(360deg, #d9e2ec 0%, #e5d9ecc2 42%, #e7d9ec9e 47%, #d9e2ec00 61%);
}
.avatar-stack {
display: flex;
padding-left: 0
}
.avatar-stack img {
width: 43px;
height: 43px;
object-fit: cover;
border-radius: 50%;
border: 2px solid var(--blue);
margin-right: -10px
}
.avatar-stack img:last-child {
margin-right: 0
}
.manifesto {
display: grid;
grid-template-columns: 280px 1fr 280px;
gap: 45px;
align-items: center;
padding-block: 95px
}
.manifesto img {
height: auto;
width: 100%;
object-fit: cover;
}
.manifesto blockquote {
text-align: center;
font-size: clamp(23px, 2.3vw, 33px);
line-height: 1.65;
font-weight: 400;
letter-spacing: -.04em;
color: #59616b
}
.manifesto blockquote strong {
font-weight: 500;
color: var(--text)
}
.manifesto cite {
display: block;
font-style: normal;
font-size: 13px;
letter-spacing: 0;
color: var(--navy);
margin-top: 25px
}
.about {
margin: 0 20px;
border-radius: 30px
}
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 65px;
align-items: center
}
.about-photo {
width: 100%;
height: 320px;
object-fit: cover;
border-radius: 24px;
}
.about-intro {
margin-bottom: 25px
}
.accordion details {
border-bottom: 1px solid #b7c5d4;
padding: 20px 0
}
.accordion summary {
list-style: none;
font-size: 23px;
letter-spacing: -.03em;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px
}
.accordion summary::-webkit-details-marker {
display: none
}
.accordion summary:after {
content: '+';
font-size: 25px;
font-weight: 400;
color: var(--navy)
}
.accordion details[open] summary:after {
content: '−'
}
.accordion details p {
font-size: 15px;
line-height: 1.8;
text-align: left;
margin-top: 15px;
}
.accordion details[open] p {
animation: fadeUp .35s ease
}
.amenities-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 25px
}
.amenity {
padding: 28px;
border: 1px solid var(--border);
border-radius: 20px;
text-align: center;
transition: background .3s, transform .3s, border-color .3s;
}
.amenity svg {
width: 35px;
height: 35px;
fill: none;
stroke: var(--navy);
stroke-width: 1.3;
margin-bottom: 20px
}
.amenity h3 {
font-size: 20px;
letter-spacing: -.03em;
margin-bottom: 12px
}
.amenity p {
font-size: 14px;
line-height: 1.8
}
.amenity:hover {
background: var(--navy);
border-color: #b5c5d6;
transform: translateY(-4px);
color: #fff;
}
.amenity:hover svg {
stroke: #ccc;
}
.amenity:hover p {
color: #ccc;
}
.pale {
background: var(--pale)
}
.head-row {
display: flex;
align-items: center;
justify-content: center;
gap: 35px;
text-align: center;
margin-bottom: 50px;
flex-direction: column;
align-content: center;
}
.head-row p {
margin-top: 20px;
font-size: 16px
}
.arrows {
display: inline-table;
top: 356px;
z-index: 9;
position: absolute;
width: 100%;
}
.arrows button {
width: 46px;
position: absolute;
height: 46px;
border: 1px solid #626871;
border-radius: 50%;
left: 40px;
background: white;
color: var(--navy);
font-size: 22px;
transition: background .25s, color .25s;
}
.arrows button + button {
left: unset;
right: 40px;
}
.arrows button:hover {
background: var(--navy);
color: white
}
.rail {
display: flex;
gap: 24px;
overflow: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
padding: 10px 0 10px;
}
.rail::-webkit-scrollbar {
display: none
}
.rail>* {
scroll-snap-align: start;
flex: 0 0 calc((100% - 48px)/3);
min-width: 0
}
.suite-card {
border: 1px solid var(--border);
border-radius: 24px;
background: white;
overflow: hidden
}
.suite-img {
position: relative;
overflow: hidden;
aspect-ratio: 1.23;
background: #e6e3df
}
.suite-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .6s
}
.suite-index {
position: absolute;
left: 20px;
top: 18px;
display: grid;
place-items: center;
height: 28px;
padding: 0 20px;
letter-spacing: 0.8px;
border-radius: 30px;
background: #43c43f;
color: #fff;
font-size: 13px;
}
.suite-card:hover .suite-img img {
transform: scale(1.035)
}
.suite-copy {
padding: 26px;
text-align: left;
}
.suite-copy h3 {
font-size: 25px;
letter-spacing: -.035em;
margin-bottom: 14px
}
.suite-copy p {
font-size: 14px;
line-height: 1.8;
min-height: 76px
}
.suite-base {
display: flex;
justify-content: space-between;
align-items: center;
gap: 15px;
border-top: 1px solid var(--border);
margin-top: 20px;
padding-top: 20px;
font-size: 12px;
color: var(--muted)
}
.suite-base strong {
display: block;
font-size: 28px;
font-weight: 500;
color: var(--navy)
}
.suite-base a {
display: grid;
place-items: center;
height: 39px;
background: var(--navy);
border-radius: 10px;
border: 1px solid var(--border);
color: white;
font-size: 15px;
padding: 0 20px;
}
.suite-base a:hover {
background: #2f68a3;
color: white;
}
.section-note {
font-size: 12px;
margin-top: 21px;
text-align: center;
color: var(--muted);
}
.process {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 28px
}
.process article {
border-top: 1px solid var(--border);
padding-top: 25px
}
.process .number {
font-size: 35px;
font-weight: 400;
color: #99aabc;
margin-bottom: 23px
}
.process h3 {
font-size: 19px;
letter-spacing: -.03em;
margin-bottom: 12px
}
.process p {
font-size: 14px
}
.community-banner {
display: grid;
grid-template-columns: 1fr 1fr;
background: var(--blue);
border-radius: 28px;
overflow: hidden
}
.community-banner img {
width: 100%;
height: 100%;
min-height: 410px;
object-fit: cover
}
.community-banner .copy {
align-self: center;
padding: 55px;
text-align: left;
}
.community-banner .heading {
font-size: 43px
}
.community-banner p {
margin: 20px 0 28px;
font-size: 15px
}
.gallery-grid {
display: grid;
grid-template-columns: 1.15fr 1fr 1fr;
gap: 22px
}
.gallery-button {
border: 0;
padding: 0;
background: var(--blue);
border-radius: 22px;
overflow: hidden;
position: relative;
height: 365px
}
.gallery-button img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .7s
}
.gallery-button:hover img {
transform: scale(1.04)
}
.gallery-button span {
position: absolute;
bottom: 18px;
right: 18px;
background: white;
border-radius: 50%;
width: 40px;
height: 40px;
display: grid;
place-items: center;
font-size: 22px;
color: var(--navy)
}
.gallery-caption {
display: flex;
justify-content: space-between;
gap: 20px;
align-items: center;
margin-top: 26px
}
.gallery-caption p {
font-size: 14px
}
.reviews-section {
background: var(--blue);
margin: 0 auto;
padding-block: 40px;
}
.review-card {
border-radius: 20px;
background: white;
padding: 28px
}
article.review-card.reveal.visible {
text-align: left;
}
.review-person {
display: flex;
gap: 12px;
align-items: center;
position: relative
}
.review-person>img {
width: 53px;
height: 53px;
border-radius: 50%;
object-fit: cover;
flex: none
}
.review-person h3 {
font-size: 15px;
font-weight: 600;
line-height: 1.4
}
.review-person p {
font-size: 11px;
margin-top: 3px;
line-height: 1.6
}
.review-quote {
font: 45px Georgia, serif;
color: #9cabb9;
margin-left: auto;
align-self: start;
line-height: 1
}
.review-card blockquote {
font-size: 15px;
line-height: 1.85;
margin-top: 22px;
color: #515b66
}
.review-controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-top: 25px
}
.review-controls p {
font-size: 12px
}
.review-controls button.pause {
border: 0;
border-bottom: 1px solid #9dabb9;
background: none;
color: var(--navy);
font-size: 12px;
min-height: 44px
}
.events .rail>* {
display: flex;
flex-direction: column
}
.event-card {
border: 1px solid var(--border);
border-radius: 22px;
overflow: hidden
}
.event-photo {
aspect-ratio: 1.45;
position: relative;
overflow: hidden
}
.event-photo img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .6s
}
.event-card:hover img {
transform: scale(1.04)
}
.event-photo>span {
position: absolute;
left: 18px;
top: 18px;
background: white;
border-radius: 10px;
padding: 9px 14px;
font-size: 25px;
color: var(--navy);
line-height: 1.2
}
.event-photo small {
display: block;
text-align: center;
font-size: 10px;
letter-spacing: .1em
}
.event-text {
padding: 25px;
display: flex;
flex-direction: column;
flex: 1
}
.event-meta {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 10px;
letter-spacing: .04em;
color: #7c8996;
margin-bottom: 16px
}
.event-text h3 {
font-size: 24px;
letter-spacing: -.03em;
line-height: 1.2;
margin-bottom: 15px
}
.event-text>p:not(.event-meta) {
font-size: 14px;
margin-bottom: 20px;
flex: 1
}
.event-text .text-link {
align-self: flex-start
}
.partners {
padding: 65px 0;
border-top: 1px solid var(--border)
}
.partner-heading {
display: flex;
justify-content: space-between;
align-items: center;
gap: 25px;
margin-bottom: 25px
}
.partner-heading h2 {
font-size: 24px;
letter-spacing: -.035em
}
.partner-heading button {
border: 0;
background: none;
font-size: 12px;
color: var(--muted);
border-bottom: 1px solid var(--border);
min-height: 40px
}
.partner-window {
overflow: hidden
}
.partner-track {
display: flex;
width: max-content;
animation: marquee 45s linear infinite
}
.partner-group {
display: flex;
gap: 25px;
padding-right: 25px;
flex: none
}
.partner-logo {
width: 210px;
height: 110px;
display: flex;
align-items: center;
justify-content: center;
padding: 23px;
background: white
}
.partner-logo img {
width: 100%;
height: 100%;
object-fit: contain;
transition: transform .3s
}
.partner-logo:hover img {
transform: scale(1.04)
}
.partner-window:hover .partner-track,
.partners.paused .partner-track {
animation-play-state: paused
}
.partner-window:focus-within {
overflow: auto
}
.partner-window:focus-within .partner-track {
animation: none
}
.partner-window:focus-within [data-repeat] {
display: none
}
.contact {
background: var(--pale)
}
.contact-grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 80px
}
.contact-grid .heading {
margin-bottom: 25px
}
.motion .contact-grid .reveal.visible {
text-align: left;
}
.contact-grid p {
font-size: 16px;
max-width: 510px;
margin-bottom: 28px
}
.contact-info {
border-top: 1px solid var(--border)
}
.contact-info>div {
padding: 20px 0;
border-bottom: 1px solid var(--border);
display: grid;
grid-template-columns: 80px 1fr;
gap: 20px
}
.contact-info span {
font-size: 12px;
color: var(--muted)
}
.contact-info a {
font-size: 16px;
color: var(--navy);
overflow-wrap: anywhere
}
.contact-info address {
font-style: normal
}
.booking-box {
border-radius: 24px;
background: var(--blue);
padding: 44px;
align-self: center
}
.booking-box h3 {
font-size: 28px;
letter-spacing: -.04em;
margin-bottom: 20px
}
.booking-box p {
font-size: 15px;
margin-bottom: 25px
}
.booking-box .button {
width: 100%
}
.booking-box small {
display: block;
margin-top: 18px;
font-size: 12px;
line-height: 1.7;
color: #53667a
}
.site-footer {
background: var(--navy);
color: white;
padding: 60px 0 25px
}
.footer-top {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: 70px;
padding-bottom: 50px
}
.motion .footer-top.reveal.visible {
text-align: left;
}
.footer-logo {
width: 200px;
height: auto;
margin-bottom: 20px;
}
.footer-top p {
font-size: 14px;
color: #c0ccd9;
max-width: 320px
}
.footer-top h3 {
font-size: 15px;
margin: 9px 0 22px
}
.footer-top nav {
display: flex;
flex-direction: column;
gap: 10px;
color: #dce4eb;
font-size: 13px
}
.footer-top a:hover {
color: white;
text-decoration: underline
}
.footer-bottom {
display: flex;
justify-content: space-between;
gap: 25px;
border-top: 1px solid #ffffff30;
padding-top: 23px;
font-size: 11px;
color: #b5c6d6
}
.footer-bottom>div {
display: flex;
gap: 20px
}
.lightbox {
border: 0;
background: #fff;
border-radius: 20px;
padding: 60px 20px 20px;
width: min(1050px, 94vw);
max-height: 94dvh
}
.lightbox::backdrop {
background: #10283bda
}
.lightbox .close-button {
position: absolute;
top: 10px;
right: 12px
}
.lightbox img {
max-height: 72dvh;
object-fit: contain;
margin: auto
}
.lightbox p {
text-align: center;
font-size: 13px;
margin-top: 12px
}
.reveal {
opacity: 1
}
.motion .reveal {
opacity: 0;
transform: translateY(18px);
transition: opacity .7s, transform .7s
}
.motion .reveal.visible {
opacity: 1;
transform: none;
}
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(10px)
}
to {
opacity: 1;
transform: none
}
}
@keyframes marquee {
to {
transform: translateX(-50%)
}
}
body .onetap-container-toggle .onetap-toggle {
margin-right: 23px !important;
margin-bottom: 82px !important;
}
@media(max-width:1150px) {
.desktop-nav {
gap: 17px;
font-size: 11px
}
.brand {
width: 180px
}
.nav-inner {
gap: 18px
}
.hero-content {
width: 52%
}
.hero-image {
width: 55%
}
.hero h1 {
font-size: 62px
}
.hero-inner,
.hero {
min-height: 670px
}
.manifesto {
grid-template-columns: 150px 1fr 150px;
gap: 30px
}
.about-grid {
gap: 35px
}
.suite-copy {
padding: 22px
}
.contact-grid {
gap: 45px
}
.footer-top {
gap: 40px
}
.review-card {
padding: 23px
}
}
@media(max-width:950px) {
.desktop-nav {
display: none
}
.menu-button {
display: block
}
.section {
padding-block: 60px;
}
.hero h1 {
font-size: 54px
}
.hero-content {
width: 54%
}
.hero-content>p {
font-size: 15px
}
.hero-image {
object-position: 55% center
}
.hero:after {
background: linear-gradient(90deg, var(--blue) 0%, var(--blue) 37%, #d9e2ecdd 47%, #d9e2ec00 66%)
}
.manifesto {
grid-template-columns: 115px 1fr 115px;
padding-block: 70px;
gap: 25px
}
.manifesto img {
height: 215px
}
.manifesto blockquote {
font-size: 24px
}
.amenities-grid {
grid-template-columns: 1fr 1fr
}
.rail>* {
flex-basis: calc((100% - 24px)/2)
}
.about-photo {
height: 470px
}
.accordion summary {
font-size: 21px
}
.community-banner .copy {
padding: 35px
}
.community-banner .heading {
font-size: 34px
}
.gallery-button {
height: 290px
}
.process {
grid-template-columns: 1fr 1fr;
gap: 30px
}
.contact-grid {
gap: 30px
}
.booking-box {
padding: 30px
}
}
@media(max-width:700px) {
:root {
--pad: 24px
}
.nav-inner {
height: 74px;
padding: 0 10px;
}
.brand {
width: 170px
}
.brand img {
height: 40px;
}
.nav-end .button, .nav-end .nora-bottom-actions__icon  {
display: none
}
.drawer-top img {
width: 140px;
height: auto;
}
.hero {
margin: 0 12px;
border-radius: 23px;
min-height: 0
}
.hero-inner {
min-height: 0;
display: block;
padding: 39px 24px 28px
}
.hero-content {
width: 100%;
max-width: none
}
.hero h1 {
font-size: 45px;
line-height: 1.08;
margin-bottom: 22px
}
.hero h1 em {
display: inline
}
.hero-content>p {
font-size: 15px;
line-height: 1.85
}
.hero-image {
position: relative;
right: auto;
top: auto;
width: 100%;
height: 220px;
object-position: 50% 33%;
z-index: 0;
order: 2;
}
.arrows button + button {
left: unset;
right: -18px;
}
.hero:after {
display: none
}
.hero {
display: flex;
flex-direction: column
}
.hero-inner {
order: 1
}
.hero .button {
min-width: 180px
}
.section {
padding-block: 62px
}
.heading {
font-size: 37px;
letter-spacing: -.045em
}
section#blogs {
overflow: hidden;
}
.onetap-container-toggle .onetap-toggle {
margin-bottom: 80px !important;
margin-right: 15px !important;
}
.nora-bottom-actions {
display: grid !important;
}
.label {
font-size: 11px;
margin-bottom: 16px
}
.section-head {
margin-bottom: 33px
}
.section-head p {
font-size: 15px;
margin-top: 18px
}
.manifesto {
grid-template-columns: 1fr 1fr;
gap: 20px;
padding-block: 55px
}
.manifesto blockquote {
grid-column: 1/-1;
grid-row: 1;
font-size: 24px
}
.manifesto img {
height: auto;
width: 100%;
border-radius: 18px;
object-position: 50% 30%;
}
.manifesto img:last-child {
margin-top: 0
}
.manifesto cite {
font-size: 12px;
margin-top: 20px
}
.about {
margin: 0 12px;
border-radius: 23px
}
.about-grid {
grid-template-columns: 1fr;
gap: 26px
}
.about-photo {
height: 300px;
border-radius: 18px
}
.accordion summary {
font-size: 22px
}
.accordion details {
padding: 18px 0
}
.accordion details p {
font-size: 14px
}
.amenities-grid {
gap: 14px
}
.amenity {
padding: 22px 18px;
border-radius: 16px
}
.amenity h3 {
font-size: 18px
}
.amenity p {
font-size: 13px
}
.amenity svg {
width: 30px;
height: 30px;
margin-bottom: 16px
}
.head-row {
align-items: flex-end;
gap: 18px;
margin-bottom: 30px
}
.head-row .heading {
font-size: 34px
}
.head-row p {
font-size: 14px
}
.arrows {
gap: 7px
}
.arrows button {
width: 39px;
height: 39px;
font-size: 21px;
left: 28px;
}
.nora-blog-arrows button {
left: -16px !important;
}
.rail>* {
flex-basis: 100%
}
.rail {
gap: 18px
}
.suite-img {
aspect-ratio: 1.28
}
.suite-copy h3 {
font-size: 25px
}
.suite-copy p {
min-height: 0
}
.suite-base {
margin-top: 18px;
padding-top: 16px
}
.section-note {
font-size: 11px
}
.process {
gap: 30px 22px
}
.process .number {
font-size: 30px;
margin-bottom: 19px
}
.process h3 {
font-size: 18px
}
.process p {
font-size: 13px
}
.community-banner {
grid-template-columns: 1fr;
border-radius: 22px
}
.community-banner img {
min-height: 0;
height: 290px
}
.community-banner .copy {
padding: 30px;
text-align: center;
}
.community-banner .heading {
font-size: 34px
}
.gallery-grid {
grid-template-columns: 1fr 1fr;
gap: 14px
}
.gallery-button {
height: 240px;
border-radius: 17px
}
.gallery-button:first-child {
grid-column: 1/-1;
height: 290px
}
.gallery-caption {
align-items: center;
flex-direction: column;
gap: 15px
}
.event-text .text-link {
margin: 0 auto;
}
article.reveal.visible {
text-align: center !important;
}
.nora-blog-card .nora-blog-meta {
justify-content: center;
}
.motion .contact-grid .reveal.visible {
text-align: center;
}
.gallery-caption p {
font-size: 13px
}
.reviews-section {
margin: 0 12px;
border-radius: 23px
}
.review-card {
padding: 26px
}
.review-card blockquote {
font-size: 15px
}
.event-text h3 {
font-size: 25px
}
.event-meta {
font-size: 10px
}
.partners {
padding: 40px 0
}
.partner-heading h2 {
font-size: 21px
}
.partner-logo {
width: 165px;
height: 95px;
padding: 18px
}
.partner-group {
gap: 16px;
padding-right: 16px
}
.contact-grid {
grid-template-columns: 1fr;
gap: 30px
}
.contact-grid .heading {
font-size: 38px
}
.contact-info a {
font-size: 14px
}
.contact-info>div {
gap: 15px;
grid-template-columns: 65px 1fr;
text-align: left;
}
.site-footer .footer-socials {
justify-content: center;
}
.footer-top p {
max-width: unset;
}
.booking-box {
padding: 28px;
border-radius: 20px
}
.footer-top {
grid-template-columns: 1fr 1fr;
gap: 35px 25px
}
.footer-about {
grid-column: 1/-1
}
.footer-logo {
width: 198px;
margin: 0 auto 20px;
}
.footer-top h3 {
margin-top: 0
}
.footer-bottom {
flex-direction: column;
gap: 15px
}
.site-footer {
padding: 45px 0 20px;
text-align: center;
}
.footer-bottom>div {
justify-content: center;
}
.lightbox {
padding-top: 60px
}
}
@media(max-width:370px) {
:root {
--pad: 19px
}
.hero h1 {
font-size: 40px
}
.hero-inner {
padding-inline: 21px
}
.heading {
font-size: 33px
}
.head-row .heading {
font-size: 30px
}
.amenity {
padding: 19px 14px
}
.amenity h3 {
font-size: 16px
}
.arrows button {
width: 34px;
height: 34px
}
.gallery-button {
height: 210px
}
}
@media(prefers-reduced-motion:reduce) {
html {
scroll-behavior: auto
}
*,
*:before,
*:after {
animation: none !important;
transition: none !important
}
.motion .reveal {
opacity: 1;
transform: none
}
.partner-window {
overflow: auto
}
[data-repeat] {
display: none
}
.partner-track {
transform: none
}
.partner-heading button {
display: none
}
} .nora-step-media {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 23px;
min-width: 0;
justify-content: flex-start;
}
.process .nora-step-media .number {
flex: none;
margin: 0;
font-size: 32px
}
.nora-step-media img {
min-width: 0;
width: calc(100% - 58px);
height: 110px;
object-fit: cover;
border-radius: 12px;
transition: transform .4s, box-shadow .4s
}
.process article:hover .nora-step-media img {
transform: translateY(-4px);
box-shadow: 0 10px 24px #1d3b5a18
}
section#blogs {
background: linear-gradient(360deg, #d9e2ec85 0%, #e5d9ec87 42%, #d9e9ec6e 100%, #d9e2ec75 61%);
}
span.read-label {
font-weight: 500;
}
.nora-blog-eyebrow {
display: block;
font-size: 12px;
letter-spacing: .065em;
color: var(--navy);
margin-bottom: 18px
}
.nora-blog .head-row .heading {
font-size: clamp(34px, 4.2vw, 58px);
max-width: 950px
}
.nora-blog .head-row p {
max-width: 650px;
margin-top: 18px
}
.nora-blog-arrows button {
left: 40px;
border: 1px solid;
box-shadow: 0 5px 25px #1d3b5a0c;
position: absolute;
}
.nora-blog-arrows button+button {
right: 40px !important;
position: absolute;
left: unset !important;
}
.nora-blog-rail {
align-items: flex-start;
padding-bottom: 15px
}
.nora-blog-image {
overflow: hidden;
border-radius: 18px;
aspect-ratio: 4/3;
background: var(--pale);
margin-bottom: 18px
}
.nora-blog-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .6s
}
.nora-blog-card:hover .nora-blog-image img {
transform: scale(1.045)
}
.nora-blog-card:hover{ box-shadow: none;}
article.nora-blog-card.reveal.visible {
text-align: left;
}
.nora-blog-category {
display: inline-block;
background: var(--blue);
border-radius: 25px;
color: var(--navy);
padding: 4px 15px;
font-size: 12px;
line-height: 1.5;
margin-bottom: 17px
}
.nora-blog-card h3 {
font-size: 19px;
line-height: 1.55;
letter-spacing: -.025em;
margin-bottom: 14px
}
.nora-blog-card>p {
font-size: 14px;
line-height: 1.65
}
.nora-blog-card .nora-blog-meta {
font-size: 12px;
color: #667789;
margin-bottom: 16px;
display: flex;
gap: 12px
}
.nora-blog-story {
margin-top: 16px
}
.nora-blog-story summary {
list-style: none;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 10px;
text-transform: uppercase;
color: var(--navy);
font-size: 12px;
letter-spacing: .06em;
min-height: 44px
}
.nora-blog-story summary::-webkit-details-marker {
display: none
}
.nora-blog-story summary>span:last-child {
transition: transform .25s
}
.nora-blog-story summary:hover>span:last-child {
transform: translateX(5px)
}
.nora-blog-story .close-label,
.nora-blog-story[open] .read-label {
display: none
}
.nora-blog-story[open] .close-label {
display: inline
}
.nora-blog-story>div {
padding: 16px;
border-left: 2px solid var(--blue);
background: var(--pale);
border-radius: 0 10px 10px 0
}
.nora-blog-story p {
font-size: 14px;
line-height: 1.75
}
.nora-blog-story p+p {
margin-top: 12px
}
.nora-blog-footer {
text-align: center;
margin-top: 35px
}
.nora-blog-rail.show-all {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
overflow: visible;
gap: 35px 24px
}
@media(max-width:950px) {
.nora-blog-rail>* {
flex-basis: calc((100% - 24px)/2)
}
.nora-blog-rail.show-all {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
}
@media(max-width:600px) {
.nora-step-media img {
height: 115px;
width: 100%;
}
article.reveal.visible {
text-align: center;
}
.nora-blog .head-row {
align-items: flex-start;
flex-wrap: wrap;
gap: 22px
}
.nora-blog-rail>* {
flex-basis: 100%
}
.nora-blog-rail.show-all {
grid-template-columns: 1fr
}
.nora-blog-card h3 {
font-size: 20px
}
}
@media(prefers-reduced-motion:reduce) {
.nora-step-media img,
.nora-blog-image img,
.nora-blog-story summary>span:last-child {
transition: none
}
.process article:hover .nora-step-media img,
.nora-blog-card:hover img {
transform: none
}
} .nora-video-section{ background: var(--blue);}
.nora-video-rail{gap:22px;padding:8px 0 20px;overscroll-behavior-x:contain}
.nora-video-rail>.nora-video-card{flex:0 0 calc((100% - 66px)/4);position:relative;aspect-ratio:9/16;background:#172c40;border:1px solid var(--border);border-radius:20px;overflow:hidden;transition:box-shadow .3s,border-color .3s}
.nora-video-card:hover,.nora-video-card:focus-within{border-color:#9aafc2;box-shadow:0 8px 18px #1d3b5a20}
.nora-video-card video{display:block;width:100%;height:100%;aspect-ratio:9/16;object-fit:contain;background:#172c40}
.nora-video-card video:focus-visible{outline:3px solid #a5c8d6;outline-offset:-4px}
.nora-video-error{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;background:#172c40;color:#fff;font-size:14px;pointer-events:none}
.nora-video-error[hidden]{display:none}
@media(max-width:1050px){.nora-video-rail>.nora-video-card{flex-basis:calc((100% - 22px)/2)}}
@media(max-width:600px){.nora-video-section .head-row{flex-wrap:wrap;gap:20px}.nora-video-rail{gap:16px}.nora-video-rail>.nora-video-card{flex-basis:88%;border-radius:16px}}
@media(prefers-reduced-motion:reduce){.nora-video-card{transition:none}} .nora-professionals{background:#f7f8fa}
.nora-professionals-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;max-width:1120px;margin:auto}
.nora-professional{padding:32px 15px 28px;background:#fff;border:1px solid var(--border);border-radius:18px;text-align:center;box-shadow:0 8px 28px #1d3b5a07}
.nora-professional-icon{display:grid;place-items:center;width:72px;height:72px;margin:0 auto 22px;border-radius:50%;background:#edf2f7;color:var(--navy);font-size:28px;transition:background .35s,color .35s,transform .35s}
.nora-professional h3{font-size:17px;font-weight:600;line-height:1.4}
.nora-faq-list{max-width:960px;margin:auto;display:grid;gap:14px}
.nora-faq-item{background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden}
.nora-faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:23px 26px;cursor:pointer;list-style:none;font-size:17px;font-weight:600;color:var(--navy);transition:background .25s}
.nora-faq-item summary::-webkit-details-marker{display:none}
.nora-faq-item summary i{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#edf2f7;font-size:13px;transition:transform .3s,background .3s,color .3s}
.nora-faq-item[open] summary i{transform:rotate(45deg);background:var(--navy);color:#fff}
.nora-faq-item[open]{border-color:#b6c6d5;background:#fafbfd}
.nora-faq-answer {
padding: 24px 26px 24px;
font-size: 15px;
text-align: left;
line-height: 1.85;
}
.nora-faq-item[open] .nora-faq-answer{animation:fadeUp .3s ease both}
.nora-faq-answer a,.nora-faq-contact a{color:var(--navy);text-decoration:underline;text-underline-offset:4px}
.nora-faq-contact{text-align:center;margin-top:30px;font-size:15px}
.nora-faq-contact i{margin-left:7px;font-size:12px} :is(.suite-card,.review-card,.event-card,.nora-professional,.booking-box,.nora-blog-card,.amenity){transition:translate .35s,box-shadow .35s,border-color .35s}
.about-photo,.manifesto img,.community-banner img{transition:filter .5s}
.motion .reveal{transition:opacity .7s ease,transform .7s ease;transition-delay:var(--nora-reveal-delay,0ms)}
.hero-content>*,.hero-tag{animation:noraEntrance .8s ease both}
.hero-content>p{animation-delay:.12s}.hero-community{animation-delay:.22s}.hero-content>.button{animation-delay:.32s}.hero-tag{animation-delay:.4s}
@keyframes noraEntrance{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@media(hover:hover) and (pointer:fine){
:is(.suite-card,.review-card,.event-card,.nora-professional,.booking-box,.amenity):hover{translate:0 -5px;box-shadow:0 12px 28px #1d3b5a14;border-color:#a8bccf}
.nora-professional:hover .nora-professional-icon{transform:rotate(-7deg) scale(1.08);background:var(--navy);color:#fff}
.nora-faq-item summary:hover{background:#f2f5f8}
.about-photo:hover,.manifesto img:hover,.community-banner:hover img{filter:brightness(1.04)}
.contact-info a:hover{color:#476c91}.partner-logo:hover img{transform:scale(1.09)}
}
@media(max-width:900px){.nora-professionals-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.nora-professionals-grid{gap:12px}.nora-professional{padding:25px 10px}.nora-professional h3{font-size:15px}.nora-professional-icon{width:62px;height:62px;font-size:25px}  
.nora-faq-item summary {
padding: 19px 17px;
font-size: 16px;
text-align: left;
}
.motion .footer-top.reveal.visible {
text-align: center;
}
.nora-faq-answer{padding:0 17px 20px}
}
@media(max-width:360px){.nora-professionals-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.motion .reveal{opacity:1;transform:none}:is(.suite-card,.review-card,.event-card,.nora-professional,.booking-box,.nora-blog-card,.amenity):hover{translate:none}}
.site-footer .footer-socials {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin-top: 22px;
}
.site-footer .footer-socials a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
border: 1px solid currentColor;
border-radius: 50%;
color: inherit;
background: transparent;
text-decoration: none;
font-size: 19px;
line-height: 1;
transition:
transform 0.3s ease,
background-color 0.3s ease,
border-color 0.3s ease,
color 0.3s ease;
}
.site-footer .footer-socials a:hover,
.site-footer .footer-socials a:focus-visible {
color: #1b2631;
background-color: #a5c8d6;
border-color: #a5c8d6;
transform: translateY(-4px);
}
.site-footer .footer-socials a:focus-visible {
outline: 2px solid #a5c8d6;
outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
.site-footer .footer-socials a {
transition: none;
}
.site-footer .footer-socials a:hover,
.site-footer .footer-socials a:focus-visible {
transform: none;
}
}
.footer-bottom a {
color: #ffffff;
} .nora-professionals-photo {
--professionals-ink: #1b2631;
--professionals-muted: #3f4e4f;
--professionals-blue: #a5c8d6;
--professionals-light: #f0f4f8;
padding-block: clamp(64px, 7vw, 110px);
background: var(--professionals-light);
color: var(--professionals-ink);
}
.nora-professionals-photo,
.nora-professionals-photo * {
box-sizing: border-box;
}
.nora-professionals-photo .wrap {
width: min(1320px, calc(100% - 48px));
margin-inline: auto;
}
.nora-professionals-photo .section-head {
max-width: 760px;
margin: 0 auto clamp(32px, 4vw, 56px);
text-align: center;
}
.nora-professionals-photo .nora-section-kicker {
display: inline-block;
margin-bottom: 18px;
color: var(--professionals-muted);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.nora-professionals-photo .heading {
margin: 0;
font-size: clamp(32px, 4.2vw, 58px);
line-height: 1.12;
letter-spacing: -0.045em;
}
.nora-professionals-photo .heading em {
font-family: "Playfair Display", Georgia, serif;
font-weight: 400;
}
.nora-professionals-photo .section-head p {
max-width: 640px;
margin: 22px auto 0;
color: var(--professionals-muted);
font-size: 16px;
line-height: 1.85;
}
.nora-professionals-photo__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 26px;
}
.nora-professionals-photo__item {
min-width: 0;
}
.nora-professionals-photo__card {
height: 100%;
position: relative;
border-radius: 0 30px 0 30px;
overflow: hidden;
background: #fff;
border: 1px solid rgba(27, 38, 49, 0.09);
transition: transform 400ms ease, box-shadow 400ms ease, border-radius 400ms ease, border-color 400ms ease;
}
.nora-professionals-photo__media {
position: relative;
overflow: hidden;
aspect-ratio: 4 / 5;
background: #d9e4e0;
}
.nora-professionals-photo__media::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: rgba(27, 38, 49, 0.06);
transition: background 500ms ease;
}
.nora-professionals-photo__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 800ms cubic-bezier(0.2, 0.65, 0.3, 1);
}
.nora-professionals-photo__caption {
display: flex;
align-items: center;
gap: 14px;
position: absolute;
background: linear-gradient(#00000000, #000000);
min-height: 104px;
width: 100%;
bottom: 0;
padding: 40px 20px 20px;
}
.nora-professionals-photo__number {
flex-shrink: 0;
color: var(--pale);
font-size: 12px;
letter-spacing: 0.08em;
}
.nora-professionals-photo__caption h3 {
margin: 0;
backdrop-filter: blur(10px);
padding: 7px 10px 10px 23px;
border-left: 3px solid #ffd543;
color: var(--pale);
border-radius: 0 30px 0 30px;
font-family: inherit;
font-size: clamp(16px, 1.35vw, 19px);
font-weight: 600;
width: 100%;
line-height: 1.4;
transition: transform 400ms ease, box-shadow 400ms ease, border-radius 400ms ease, border-color 400ms ease;
letter-spacing: -0.025em;
}
.nora-professionals-photo__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-top: 38px;
padding-top: 28px;
border-top: 1px solid rgba(27, 38, 49, 0.13);
}
.nora-professionals-photo__footer p {
margin: 0;
color: var(--professionals-muted);
font-size: 16px;
line-height: 1.6;
}
.nora-professionals-photo__button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 26px;
min-height: 30px;
padding: 5px 24px;
border: 1px solid var(--professionals-ink);
border-radius: 6px;
background: var(--professionals-ink);
color: #fff;
font-size: 14px;
font-weight: 600;
line-height: 1.4;
text-decoration: none;
transition: background 300ms ease, color 300ms ease, transform 300ms ease;
}
.nora-professionals-photo__button span {
font-size: 20px;
transition: transform 300ms ease;
}
.nora-professionals-photo__button:focus-visible {
outline: 3px solid var(--professionals-muted);
outline-offset: 5px;
}
@media (hover: hover) and (pointer: fine) {
.nora-professionals-photo__card:hover {
transform: translateY(-7px);
border-color: var(--professionals-blue);
box-shadow: 0 18px 38px rgba(27, 38, 49, 0.1);
transition: transform 400ms ease, box-shadow 400ms ease, border-radius 400ms ease, border-color 400ms ease;
border-radius: 0;
}
.nora-professionals-photo__card:hover .nora-professionals-photo__caption h3 {
border-radius: 0;
transition: transform 400ms ease, box-shadow 400ms ease, border-radius 400ms ease, border-color 400ms ease;
}
.nora-professionals-photo__card:hover img {
transform: scale(1.065);
}
.nora-professionals-photo__card:hover
.nora-professionals-photo__media::after {
background: transparent;
}
.nora-professionals-photo__button:hover {
background: var(--professionals-blue);
color: var(--professionals-ink);
transform: translateY(-2px);
}
.nora-professionals-photo__button:hover span {
transform: translate(3px, -3px);
}
}
@media (max-width: 1024px) {
.nora-professionals-photo__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px;
}
.nora-professionals-photo__media {
aspect-ratio: 5 / 4;
}
}
@media (max-width: 700px) {
.nora-professionals-photo .wrap {
width: calc(100% - 32px);
}
.nora-professionals-photo__grid {
gap: 18px 12px;
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.nora-professionals-photo__media {
aspect-ratio: 4 / 2;
}
.nora-professionals-photo__card {
border-radius: 10px;
}
.nora-professionals-photo__caption {
align-items: center;
min-height: 100%;
bottom: 0;
justify-content: center;
background: linear-gradient(#00000000, #000000ad);
padding: 15px 12px;
}
.nora-professionals-photo__number {
display: none;
}
.nora-professionals-photo__caption h3 {
padding: 3px 10px;
font-size: 16px;
width: auto;
backdrop-filter: blur(10px);
border-radius: 0 10px 0 10px;
border: 1px solid #ccc;
}
.nora-professionals-photo__footer {
flex-direction: column;
text-align: center;
}
.nora-professionals-photo__button {
width: 100%;
}
}
@media (max-width: 359px) {
.nora-professionals-photo__grid {
grid-template-columns: 1fr;
}
.nora-professionals-photo__media {
aspect-ratio: 5 / 4;
}
}
@media (prefers-reduced-motion: reduce) {
.nora-professionals-photo *,
.nora-professionals-photo *::after {
animation: none !important;
transition: none !important;
}
.nora-professionals-photo .reveal {
opacity: 1 !important;
transform: none !important;
visibility: visible !important;
}
}
.nora-professionals-photo__footer span i {
font-size: 14px;
} .nora-platforms {
padding: 30px 0;
background: #f0f4f8;
border-block: 1px solid rgba(27, 38, 49, 0.09);
color: #1b2631;
}
.nora-platforms,
.nora-platforms * {
box-sizing: border-box;
}
.nora-platforms__inner {
width: min(1200px, calc(100% - 40px));
margin-inline: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
}
.nora-platforms__intro {
flex-shrink: 0;
}
.nora-platforms__eyebrow {
display: block;
margin-bottom: 7px;
color: #3f4e4f;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.nora-platforms__intro h2 {
margin: 0;
font-family: inherit;
font-size: clamp(20px, 2vw, 26px);
font-weight: 500;
line-height: 1.3;
letter-spacing: -0.04em;
}
.nora-platforms__brands {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: center;
width: min(100%, 660px);
}
.nora-platforms__brand {
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
min-height: 50px;
padding: 8px 24px;
color: #3f4e4f;
font-size: clamp(23px, 2.4vw, 32px);
font-weight: 600;
line-height: 1;
letter-spacing: -0.055em;
transition: color 250ms ease, transform 250ms ease;
}
.nora-platforms__brand + .nora-platforms__brand {
border-left: 1px solid rgba(27, 38, 49, 0.13);
}
.nora-platforms__vagaro span {
color: #3f4e4f;
}
.nora-platforms__google {
font-family: Arial, sans-serif;
font-weight: 500;
}
.nora-platforms__meta {
font-family: Arial, sans-serif;
font-weight: 600;
}
@media (hover: hover) and (pointer: fine) {
.nora-platforms__brand:hover {
color: #1b2631;
transform: translateY(-3px);
}
}
@media (max-width: 700px) {
.nora-platforms {
padding: 25px 0;
}
.nora-platforms__inner {
flex-direction: column;
gap: 20px;
text-align: center;
}
.nora-platforms__brands {
width: 100%;
max-width: 460px;
}
.nora-platforms__brand {
min-height: 40px;
padding: 6px 10px;
font-size: clamp(21px, 5vw, 27px);
}
}
@media (prefers-reduced-motion: reduce) {
.nora-platforms__brand {
transition: none;
transform: none !important;
}
}
span.nora-platforms__brand.nora-platforms__google img {
height: 41px;
filter: grayscale(0.5);
}
span.nora-platforms__brand.nora-platforms__vagaro img {
height: 36px;
}
span.nora-platforms__brand.nora-platforms__meta img {
height: 26px;
}
span.nora-platforms__brand  img {
filter: grayscale(0.5);
}
span.nora-platforms__brand:hover  img {
filter: grayscale(0);
} .nora-bottom-actions {
position: fixed;
left: 50%;
bottom: calc(16px + env(safe-area-inset-bottom, 0px));
transform: translateX(-50%);
z-index: 900;
display: grid;
grid-template-columns: 1fr 1.25fr;
gap: 8px;
width: min(430px, calc(100% - 28px));
padding: 7px;
box-sizing: border-box;
background: #fff;
border: 1px solid rgba(27, 38, 49, 0.1);
border-radius: 18px;
box-shadow:
0 12px 36px rgba(27, 38, 49, 0.17),
0 2px 6px rgba(27, 38, 49, 0.04);
animation: noraActionsEnter 600ms ease both;
}
.nora-bottom-actions a {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
min-width: 0;
min-height: 40px;
padding: 5px 14px;
box-sizing: border-box;
border-radius: 12px;
font-family: inherit;
font-size: 14px;
font-weight: 600;
line-height: 1.3;
text-decoration: none;
white-space: nowrap;
transition: background 250ms ease, color 250ms ease, box-shadow 250ms ease;
}
.nora-bottom-actions {
display: none;
}
.nora-bottom-actions__call {
background: #f0f4f8;
color: #1b2631;
}
.nora-bottom-actions__icon {
display: grid;
place-items: center;
flex-shrink: 0;
width: 30px;
height: 30px;
border-radius: 50%;
background: #d9e4e0;
font-size: 12px;
}
.nora-bottom-actions__tour {
background: #1b2631;
color: #fff;
}
.nora-bottom-actions__tour > i:first-child {
font-size: 16px;
color: #a5c8d6;
}
.nora-bottom-actions__tour > i:last-child {
margin-left: 3px;
font-size: 11px;
transition: transform 250ms ease;
}
.nora-bottom-actions a:focus-visible {
outline: 3px solid #3f4e4f;
outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
.nora-bottom-actions__call:hover {
background: #d9e4e0;
}
.nora-bottom-actions__tour:hover {
background: #3f4e4f;
color: #fff;
}
.nora-bottom-actions__tour:hover > i:last-child {
transform: translate(2px, -2px);
}
} body {
padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px));
} body.locked .nora-bottom-actions {
visibility: hidden;
pointer-events: none;
}
@media (max-width: 380px) {
.nora-bottom-actions {
gap: 6px;
padding: 6px;
border-radius: 15px;
}
.nora-bottom-actions a {
gap: 7px;
padding-inline: 9px;
font-size: 13px;
}
.nora-bottom-actions__tour > i:last-child {
display: none;
}
}
@keyframes noraActionsEnter {
from {
opacity: 0;
transform: translate(-50%, 18px);
}
to {
opacity: 1;
transform: translate(-50%, 0);
}
}
@media (prefers-reduced-motion: reduce) {
.nora-bottom-actions,
.nora-bottom-actions a,
.nora-bottom-actions i {
animation: none;
transition: none;
}
}.nc-page {
--ink: #1b2631;
--muted: #3f4e4f;
--blue: #a5c8d6;
--light: #f0f4f8;
--sage: #d9e4e0;
background: #fff;
color: var(--ink);
font-family: Manrope, sans-serif;
line-height: 1.7;
}
.nc-page * {
box-sizing: border-box;
}
.nc-page a {
color: inherit;
text-decoration: none;
}
.nc-page button {
font: inherit;
cursor: pointer;
}
.nc-wrap {
width: min(1240px, calc(100% - 80px));
margin-inline: auto;
}
.nc-page h1,
.nc-page h2,
.nc-page h3,
.nc-page p {
margin: 0;
}
.nc-page h1,
.nc-page h2 {
font-weight: 500;
line-height: 1.12;
letter-spacing: -0.055em;
}
.nc-page h2 {
font-size: clamp(36px, 4.3vw, 58px);
}
.nc-page em {
font-family: "Playfair Display", serif;
font-weight: 400;
}
.nc-page p {
font-size: 15px;
color: var(--muted);
}
.nc-eyebrow {
display: block;
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 18px;
}
.nc-hero {
text-align: center;
background: url(//norasalonsuitessa.com/nora/wp-content/themes/nora-salon-suites/assets/images/bg.webp);
padding: 60px 0 65px;
color: #fff;
text-align: center;
background-position: center;
background-size: cover;
}
.nc-breadcrumb {
display: flex;
justify-content: center;
gap: 12px;
font-size: 11px;
color: var(--muted);
margin-bottom: 40px;
}
.nc-hero h1 {
font-size: clamp(46px, 4.2vw, 83px);
margin-bottom: 24px;
}
.nc-actions {
display: flex;
justify-content: center;
align-items: center;
gap: 26px;
flex-wrap: wrap;
margin-top: 30px;
}
.nc-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 26px;
padding: 15px 24px;
background: var(--ink);
color: #fff !important;
font-size: 12px;
font-weight: 600;
border-radius: 4px;
transition:
transform 0.3s,
background 0.3s;
}
.nc-button:hover {
background: var(--muted);
transform: translateY(-3px);
}
.nc-text-link {
display: inline-flex;
align-items: center;
gap: 15px;
font-size: 12px;
font-weight: 600;
border-bottom: 1px solid #a0b3ba;
padding-block: 6px;
}
.nc-page a i {
transition: transform 0.3s;
}
.nc-page a:hover > i {
transform: translateX(4px);
}
.nc-hero .nc-eyebrow {
animation: nc-rise 0.7s 0.1s both;
}
.nc-hero h1 {
animation: nc-rise 0.9s 0.2s both;
}
.nc-hero p {
animation: nc-rise 0.9s 0.3s both;
color: #ccc;
}
.nc-hero .nc-actions {
animation: nc-rise 0.9s 0.4s both;
}
.nc-contact-cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
padding-block: 50px;
}
.nc-contact-card {
border: 1px solid #dbe3e7;
border-radius: 7px;
padding: 30px 25px;
display: flex;
align-items: flex-start;
flex-direction: column;
transition:
transform 0.35s,
box-shadow 0.35s,
border-color 0.35s;
}
.nc-icon {
display: grid;
place-items: center;
width: 48px;
height: 48px;
flex: 0 0 48px;
border-radius: 50%;
background: var(--sage);
font-size: 18px;
}
.nc-contact-card > .nc-icon {
margin-bottom: 28px;
}
.nc-contact-card > .nc-eyebrow {
font-size: 9px;
margin-bottom: 12px;
}
.nc-contact-card h2 {
font-size: 27px;
margin-bottom: 16px;
}
.nc-contact-card p,
.nc-contact-card address {
font-size: 12px;
line-height: 1.8;
margin-bottom: 22px;
color: var(--muted);
font-style: normal;
}
.nc-contact-card > a {
font-size: 12px;
font-weight: 600;
display: flex;
gap: 12px;
align-items: center;
justify-content: space-between;
width: 100%;
margin-top: auto;
overflow-wrap: anywhere;
border-top: 1px solid #dbe3e7;
padding-top: 18px;
}
.nc-contact-card > a > i {
flex-shrink: 0;
}
.nc-tour {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 75px;
align-items: center;
padding-block: 25px 80px;
}
.nc-tour-image {
position: relative;
aspect-ratio: 4/5;
overflow: hidden;
border-radius: 7px;
background: var(--sage);
}
.nc-tour-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.8s;
}
.nc-tour-image > span {
position: absolute;
left: 20px;
right: 20px;
bottom: 20px;
background: #fffffff2;
border-radius: 4px;
padding: 16px 20px;
font-size: 15px;
}
.nc-tour-image small {
display: block;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-top: 3px;
}
.nc-tour-copy h2 {
margin-bottom: 24px;
}
.nc-tour-copy > p {
font-size: 14px;
}
.nc-tour-steps {
list-style: none;
padding: 0;
margin: 28px 0;
}
.nc-tour-steps li {
display: flex;
gap: 18px;
border-top: 1px solid #dbe3e7;
padding: 17px 0;
}
.nc-tour-steps li > span {
font-size: 13px;
color: #79939d;
padding-top: 3px;
}
.nc-tour-steps h3 {
font-size: 15px;
font-weight: 600;
margin-bottom: 6px;
}
.nc-tour-steps p {
font-size: 12px;
}
.nc-page .nc-small {
font-size: 10px;
margin-top: 14px;
}
.nc-message {
padding-block: 70px;
background: var(--light);
}
.nc-message-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 75px;
align-items: center;
}
.nc-message-grid h2 {
margin-bottom: 25px;
}
.nc-message-grid > div > p {
font-size: 14px;
max-width: 430px;
}
.nc-message-grid .nc-text-link {
margin-top: 24px;
}
.nc-enquiry-list {
display: grid;
gap: 16px;
}
.nc-enquiry {
display: flex;
align-items: center;
gap: 17px;
background: #fff;
border: 1px solid #dbe3e7;
border-radius: 6px;
padding: 23px;
transition:
transform 0.3s,
border-color 0.3s;
}
.nc-enquiry > span:nth-child(2) {
flex: 1;
min-width: 0;
}
.nc-enquiry strong {
display: block;
font-size: 14px;
font-weight: 600;
}
.nc-enquiry small {
display: block;
font-size: 11px;
color: var(--muted);
margin-top: 7px;
}
.nc-enquiry > i {
font-size: 12px;
}
.nc-location {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 75px;
align-items: center;
padding-block: 80px;
}
.nc-location address {
font-style: normal;
font-size: 17px;
margin: 25px 0 18px;
}
.nc-location > div > p {
font-size: 13px;
max-width: 390px;
}
.nc-location .nc-actions {
justify-content: flex-start;
}
.nc-location-panel {
padding: 50px 25px;
text-align: center;
background: var(--sage);
border-radius: 7px;
}
.nc-pin {
width: 64px;
height: 64px;
display: grid;
place-items: center;
margin: 0 auto 28px;
border: 1px solid #9db6aa;
border-radius: 50%;
font-size: 23px;
}
.nc-location-panel strong {
font-size: 56px;
line-height: 1.1;
font-weight: 500;
letter-spacing: -0.05em;
display: block;
margin-bottom: 18px;
}
.nc-location-panel strong em {
display: block;
font-size: 42px;
}
.nc-location-panel > p {
margin-inline: auto;
}
.nc-location-panel > a {
display: flex;
justify-content: center;
align-items: center;
gap: 18px;
border-top: 1px solid #a7bfb3;
padding-top: 24px;
margin-top: 25px;
font-size: 12px;
font-weight: 600;
}
.nc-faq {
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: 80px;
padding-block: 0 85px;
}
.nc-faq-list details {
border-bottom: 1px solid #dbe3e7;
}
.nc-faq-list details:first-child {
border-top: 1px solid #dbe3e7;
}
.nc-faq-list summary {
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
cursor: pointer;
font-size: 14px;
padding: 23px 0;
}
.nc-faq-list summary::-webkit-details-marker {
display: none;
}
.nc-faq-list summary i {
font-size: 12px;
transition: transform 0.3s;
}
.nc-faq-list details[open] summary i {
transform: rotate(45deg);
}
.nc-faq-list details p {
font-size: 13px;
padding: 0 0 24px;
animation: nc-rise 0.35s;
}
.nc-cta {
background: var(--ink);
color: white;
text-align: center;
padding-block: 70px;
}
.nc-button-light {
background: var(--blue);
color: var(--ink) !important;
}
.nc-button-light:hover {
background: var(--sage);
}
.nc-socials {
display: flex;
justify-content: center;
gap: 12px;
margin-top: 32px;
}
.nc-socials a {
display: grid;
place-items: center;
width: 42px;
height: 42px;
border: 1px solid #81939d;
border-radius: 50%;
font-size: 17px;
transition:
background 0.3s,
color 0.3s,
transform 0.3s;
}
.nc-socials a:hover {
background: var(--blue);
color: var(--ink);
transform: translateY(-4px);
}
.nc-page a:focus-visible,
.nc-page summary:focus-visible {
outline: 2px solid #698893;
outline-offset: 5px;
}
@keyframes nc-rise {
from {
opacity: 0;
transform: translateY(24px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (hover: hover) {
.nc-contact-card:hover {
transform: translateY(-5px);
border-color: var(--blue);
box-shadow: 0 12px 35px #1b26310b;
}
.nc-tour-image:hover img {
transform: scale(1.035);
}
.nc-enquiry:hover {
transform: translateX(4px);
border-color: var(--blue);
}
}
@media (max-width: 1050px) {
.nc-contact-cards {
gap: 16px;
}
.nc-contact-card {
padding: 25px 18px;
}
.nc-contact-card h2 {
font-size: 24px;
}
.nc-contact-card > a {
font-size: 11px;
}
.nc-tour,
.nc-message-grid,
.nc-location {
gap: 40px;
}
.nc-faq {
gap: 40px;
}
}
@media (max-width: 800px) {
.nc-wrap {
width: calc(100% - 36px);
}
.nc-hero {
padding-bottom: 45px;
}
.nc-hero h1 {
font-size: clamp(44px, 8.5vw, 65px);
}
.nc-contact-cards {
grid-template-columns: 1fr;
padding-block: 35px;
gap: 18px;
}
.nc-contact-card {
padding: 26px;
text-align: center;
align-items: center;
}
.nc-form-intro.nc-reveal, .nc-reveal {
text-align: center;
}
.nc-location .nc-actions {
justify-content: center;
text-align: center;
}
.nc-tour-steps li, .nc-form-box.nc-reveal {
text-align: left;
}
.nc-contact-card > .nc-icon {
margin-bottom: 20px;
}
.nc-contact-card > a {
font-size: 13px;
}
.nc-contact-card h2 {
font-size: 28px;
}
.nc-tour,
.nc-message-grid,
.nc-location {
grid-template-columns: 1fr;
gap: 35px;
}
.nc-tour {
padding-block: 15px 50px;
}
.nc-tour-image {
aspect-ratio: 4/3;
}
.nc-message {
padding-block: 50px;
}
.nc-page h2 {
font-size: 39px;
}
.nc-contact-card h2 {
font-size: 28px;
}
.nc-location {
padding-block: 50px;
}
.nc-faq {
grid-template-columns: 1fr;
gap: 25px;
padding-bottom: 50px;
}
.nc-cta {
padding-block: 50px;
}
}
@media (max-width: 420px) {
.nc-hero h1 {
font-size: 43px;
}
.nc-page h2 {
font-size: 34px;
}
.nc-contact-card h2 {
font-size: 27px;
}
.nc-hero p {
font-size: 13px;
}
.nc-hero p br {
display: none;
}
.nc-actions {
gap: 18px;
}
.nc-enquiry {
padding: 18px;
gap: 12px;
}
.nc-enquiry .nc-icon {
width: 38px;
height: 38px;
flex-basis: 38px;
font-size: 15px;
}
.nc-enquiry strong {
font-size: 13px;
}
.nc-location-panel {
padding: 35px 20px;
}
.nc-location-panel strong {
font-size: 48px;
}
.nc-location-panel strong em {
font-size: 36px;
}
}
@media (prefers-reduced-motion: reduce) {
.nc-page * {
animation: none !important;
transition: none !important;
scroll-behavior: auto !important;
}
}
.nc-form-section {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 65px;
padding-block: 10px 80px;
scroll-margin-top: 110px;
}
.nc-form-intro h2 {
margin-bottom: 25px;
}
.nc-form-intro > p {
max-width: 370px;
font-size: 14px;
}
.nc-form-intro > .nc-text-link {
margin-top: 24px;
}
.nc-page .nc-form-help {
font-size: 12px;
margin-top: 28px;
}
.nc-form-help a {
text-decoration: underline;
}
.nc-form-box {
padding: 32px;
background: var(--light);
border: 1px solid #dbe3e7;
border-radius: 8px;
}
.nc-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 21px 18px;
}
.nc-form label {
display: block;
font-size: 12px;
font-weight: 600;
min-width: 0;
}
.nc-form input,
.nc-form select,
.nc-form textarea {
display: block;
width: 100%;
min-width: 0;
box-sizing: border-box;
margin-top: 9px;
padding: 13px 14px;
font: inherit;
font-weight: 400;
font-size: 14px;
color: var(--ink);
background: #fff;
border: 1px solid #bacbd2;
border-radius: 4px;
transition:
border-color 0.2s,
box-shadow 0.2s;
}
.nc-form textarea {
resize: vertical;
min-height: 155px;
}
.nc-form input:focus,
.nc-form select:focus,
.nc-form textarea:focus {
outline: 2px solid #658997;
outline-offset: 2px;
border-color: #658997;
}
.nc-form .nc-field-wide {
grid-column: 1/-1;
}
.nc-optional {
font-weight: 400;
color: var(--muted);
font-size: 10px;
}
.nc-form .nc-button {
border: 0;
cursor: pointer;
margin-top: 22px;
min-height: 48px;
}
.nc-page .nc-form-note {
font-size: 11px;
margin-top: 20px;
}
.nc-form-note a {
text-decoration: underline;
}
.nc-honeypot {
position: absolute !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
clip-path: inset(50%);
white-space: nowrap;
}
.nc-form-status {
padding: 15px 17px;
border-left: 3px solid var(--muted);
background: var(--sage);
font-size: 13px;
line-height: 1.7;
margin-bottom: 23px;
}
.nc-form-status.is-error {
background: #fff0ed;
border-color: #a1422c;
color: #742e1e;
}
.nc-page .nc-button:focus-visible {
outline: 2px solid #658997;
outline-offset: 5px;
}
@media (max-width: 1000px) {
.nc-form-section {
gap: 35px;
}
.nc-form-box {
padding: 25px;
}
}
@media (max-width: 800px) {
.nc-form-section {
grid-template-columns: 1fr;
padding-bottom: 50px;
gap: 28px;
}
.nc-form-intro > p {
max-width: none;
}
}
@media (max-width: 500px) {
.nc-form-grid {
grid-template-columns: 1fr;
}
.nc-form-box {
padding: 22px 18px;
}
.nc-form input,
.nc-form select,
.nc-form textarea {
font-size: 16px;
}
.nc-form .nc-button {
width: 100%;
}
}