/* ==========================================================================
Gran Éa — NAIL SALON
Static prototype stylesheet
--------------------------------------------------------------------------
0. Tokens (custom properties)
1. Reset / base
2. Utilities (container, media, reveal, links)
3. Header / drawer
4. TOP: hero
5. TOP: philosophy
6. TOP: experience
7. TOP: menu entry banner
8. TOP: instagram (editorial collage)
10. Reservation
10b. ACCESS
11. Footer
11b. TOP → MENU page-turn transition
12. MENU page
13. Reduced motion
========================================================================== */
/* ==========================================================================
0. Tokens
========================================================================== */
:root {
/* color */
--ivory: #F7F4EF;
--ivory-rgb: 247, 244, 239; /* same colour as --ivory, for rgba() fades */
--ivory-deep: #EFEAE3;
--greige-1: #D6D0C9;
--greige-2: #B7AEA6;
--greige-3: #8E857D;
--ink: #3E3935;
--ink-soft: #675f58;
--line: rgba(142, 133, 125, .34);
--white: #fff;
/* typography */
--font-en: "Cormorant Garamond", "Cormorant", "Times New Roman", serif;
--font-ja: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
--font-script: "Italianno", "Great Vibes", cursive;
/* layout */
--container: 1240px;
--gutter: clamp(20px, 4.2vw, 60px);
--header-h: 84px;
--section-space: clamp(88px, 11vw, 176px);
/* PC共通CONTENT RAIL: .containerが実際に着地する左右インセットと同じ式。
フルブリード背景の中で文字・画像の基準位置だけを揃えたいときに使う
（.reservation__banner・.site-footer__inner は素の.containerのままで
既にこのレールに乗っているため変更不要）。 */
--rail-inset-pc: max(var(--gutter), calc((100vw - var(--container)) / 2));
/* motion */
--ease: cubic-bezier(.22, .61, .36, 1);
--dur-reveal: 1.2s;
--dur-hover: 1.3s;
}
@media (max-width: 900px) {
:root { --header-h: 64px; }
}
/* ==========================================================================
1. Reset / base
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
margin: 0;
background: var(--ivory);
color: var(--ink);
font-family: var(--font-ja);
font-size: 15px;
font-weight: 400;
line-height: 2;
letter-spacing: .08em;
overflow-x: clip;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
figure, ul, ol, p, h1, h2, h3, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3 { font-weight: 400; }
:focus-visible { outline: 1px solid var(--greige-3); outline-offset: 4px; }
::selection { background: var(--greige-1); color: var(--ink); }
/* ==========================================================================
2. Utilities
========================================================================== */
.container {
width: min(100% - var(--gutter) * 2, var(--container));
margin-inline: auto;
}
.section-label {
font-family: var(--font-en);
font-size: clamp(21px, 1.75vw, 26px);
font-weight: 400;
letter-spacing: .07em;
line-height: 1.4;
color: var(--ink);
}
/* media frame — object-fit: cover, calm placeholder tone when the image is missing */
.media {
position: relative;
overflow: hidden;
background: linear-gradient(160deg, var(--greige-1), #c4bcb3 60%, var(--greige-2));
}
.media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--dur-hover) var(--ease), opacity var(--dur-hover) var(--ease);
}
/* layer that receives the slight scroll parallax (see main.js) */
.media__layer {
position: absolute;
inset: -6% 0;
will-change: transform;
}
/* scroll reveal: opacity 0→1 / translateY 30px→0, slow */
.js .reveal {
opacity: 0;
transform: translate3d(0, var(--rise, 30px), 0);
transition: opacity var(--dur-reveal) var(--ease-reveal, var(--ease)) var(--d, 0s),
transform var(--dur-reveal) var(--ease-reveal, var(--ease)) var(--d, 0s);
}
.js .reveal--slow { --dur-reveal: 1.6s; }
.js .reveal.is-in {
opacity: 1;
transform: none;
}
/* text link with a hairline arrow ( → ) */
.link-arrow {
display: inline-flex;
align-items: center;
gap: 16px;
font-family: var(--font-en);
font-size: 15px;
font-weight: 500;
letter-spacing: .14em;
line-height: 1;
color: var(--ink);
}
.link-arrow__icon {
position: relative;
display: block;
width: 38px;
height: 9px;
background: linear-gradient(currentColor, currentColor) 0 50% / 100% 1px no-repeat;
transition: transform 1s var(--ease), width 1s var(--ease);
}
.link-arrow__icon::after {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 6px;
height: 6px;
border-top: 1px solid currentColor;
border-right: 1px solid currentColor;
transform: translateY(-50%) rotate(45deg);
transform-origin: 70% 30%;
}
a:hover > .link-arrow__icon,
a.link-arrow:hover .link-arrow__icon { transform: translateX(8px); }
.link-arrow--underline .link-arrow__label {
padding-bottom: 6px;
border-bottom: 1px solid currentColor;
}
/* ==========================================================================
3. Header / drawer
========================================================================== */
.site-header {
position: fixed;
inset: 0 0 auto 0;
z-index: 100;
height: var(--header-h);
color: var(--white);
transition: background-color 1s var(--ease), color 1s var(--ease), box-shadow 1s var(--ease);
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
height: 100%;
padding-inline: clamp(20px, 4.6vw, 68px);
}
/* Logo images (gran-ea-logo*.png) are 1080×1080 with transparent padding: the drawn
logo is ~66% of the width and 50% of the height. Each placement sets --v = the
width the *visible* logo should have; the image is sized to 1.507 × --v and its
transparent top/bottom padding (0.377 × --v) is pulled back with negative margins.
Aspect ratio is never touched (width only, height:auto). */
.site-header__brand {
--v: clamp(70px, 5.4vw, 84px);
display: grid;
flex: 0 0 auto;
width: calc(var(--v) * 1.507);
margin-block: calc(var(--v) * -.377);
margin-left: calc(var(--v) * -.262);
line-height: 0;
}
.site-header__logo {
grid-area: 1 / 1;
width: 100%;
height: auto;
transition: opacity 1s var(--ease);
}
/* white logo over the hero, dark logo on ivory */
.site-header__logo--light { filter: drop-shadow(0 0 14px rgba(62, 50, 44, .28)); }
.site-header__logo--dark { opacity: 0; }
.site-header.is-scrolled .site-header__logo--light,
.site-header--static .site-header__logo--light,
body.is-drawer-open .site-header .site-header__logo--light { opacity: 0; }
.site-header.is-scrolled .site-header__logo--dark,
.site-header--static .site-header__logo--dark,
body.is-drawer-open .site-header .site-header__logo--dark { opacity: 1; }
/* Hero shows only the one big centered logo; the small header mark returns once scrolled
past it (nav and the hamburger stay visible throughout — only the logo mark is hidden). */
.site-header:not(.is-scrolled):not(.site-header--static) .site-header__brand { visibility: hidden; }
.site-nav { margin-left: auto; }
.site-nav__list {
display: flex;
align-items: center;
gap: clamp(22px, 2.9vw, 42px);
}
.site-nav__list a {
position: relative;
display: block;
padding: 8px 0;
font-family: var(--font-en);
font-size: clamp(14px, 1.2vw, 17px);
font-weight: 500;
letter-spacing: .06em;
line-height: 1;
}
.site-nav__list a::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: left;
transition: transform .9s var(--ease);
}
.site-nav__list a:hover::after,
.site-nav__list a[aria-current="page"]::after { transform: scaleX(1); }
.nav-toggle {
position: relative;
flex: 0 0 auto;
width: 44px;
height: 44px;
margin-right: -6px;
}
.nav-toggle span {
position: absolute;
left: 7px;
right: 7px;
height: 1px;
background: currentColor;
transition: transform .9s var(--ease), opacity .6s var(--ease);
}
.nav-toggle span:nth-child(1) { top: 14px; }
.nav-toggle span:nth-child(2) { top: 22px; }
.nav-toggle span:nth-child(3) { top: 30px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(25deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-25deg); }
/* TOP: header floats on the hero, then turns ivory */
.site-header.is-scrolled {
background: rgba(247, 244, 239, .9);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
color: var(--ink);
box-shadow: 0 1px 0 var(--line);
}
.site-header:not(.is-scrolled):not(.site-header--static) .site-nav__list a {
text-shadow: 0 0 22px rgba(62, 50, 44, .35);
}
/* MENU: header sits on ivory and scrolls away */
.site-header--static {
position: relative;
background: var(--ivory);
color: var(--ink);
}
body.is-drawer-open .site-header { color: var(--ink); background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.is-drawer-open .site-header .site-nav { opacity: 0; pointer-events: none; }
.site-nav { transition: opacity .6s var(--ease); }
@media (max-width: 900px) {
.site-nav { display: none; }
.site-header__brand { --v: 66px; }
}
/* drawer */
.drawer {
position: fixed;
inset: 0;
z-index: 90;
display: grid;
place-items: center;
background: rgba(247, 244, 239, .98);
opacity: 0;
visibility: hidden;
transition: opacity 1s var(--ease), visibility 0s linear 1s;
}
.drawer.is-open {
opacity: 1;
visibility: visible;
transition: opacity 1s var(--ease), visibility 0s;
}
body.is-drawer-open { overflow: hidden; }
.drawer__nav { text-align: center; }
.drawer__nav li { overflow: hidden; }
.drawer__nav a {
display: inline-block;
padding: 10px 0;
font-family: var(--font-en);
font-size: clamp(26px, 3.4vw, 38px);
font-weight: 400;
letter-spacing: .22em;
line-height: 1.3;
opacity: 0;
transform: translateY(16px);
transition: opacity 1s var(--ease), transform 1s var(--ease), color .6s;
}
.drawer.is-open .drawer__nav a { opacity: 1; transform: none; }
.drawer.is-open .drawer__nav li:nth-child(1) a { transition-delay: .15s; }
.drawer.is-open .drawer__nav li:nth-child(2) a { transition-delay: .22s; }
.drawer.is-open .drawer__nav li:nth-child(3) a { transition-delay: .29s; }
.drawer.is-open .drawer__nav li:nth-child(4) a { transition-delay: .36s; }
.drawer.is-open .drawer__nav li:nth-child(5) a { transition-delay: .43s; }
.drawer.is-open .drawer__nav li:nth-child(6) a { transition-delay: .5s; }
.drawer__nav a:hover { color: var(--greige-3); }
.drawer__sub {
margin-top: 40px;
font-family: var(--font-en);
font-size: 12px;
letter-spacing: .32em;
color: var(--greige-3);
}
/* ==========================================================================
4. TOP — hero
Everything moves slowly (8–22s). "It looks still, but it is alive."
========================================================================== */
.hero {
position: relative;
height: 100vh;
height: 100svh;
min-height: 600px;
overflow: hidden;
isolation: isolate;
background: #6d6159;
color: var(--white);
--hero-fade: clamp(160px, 21vw, 320px); /* height of the light that melts the hero into PHILOSOPHY */
}
/* The hero has no hard bottom edge: its lower part dissolves into the page colour (--ivory),
which is also PHILOSOPHY's background, so the two read as one continuous world. */
.hero::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: calc(var(--hero-fade) + 1px);
z-index: 2;
pointer-events: none;
background: linear-gradient(
to bottom,
rgba(var(--ivory-rgb), 0) 0%,
rgba(var(--ivory-rgb), .06) 15%,
rgba(var(--ivory-rgb), .15) 35%,
rgba(var(--ivory-rgb), .32) 53%,
rgba(var(--ivory-rgb), .6) 70%,
rgba(var(--ivory-rgb), .86) 86%,
var(--ivory) 100%
);
}
.hero__media {
position: absolute;
inset: -4% 0;
will-change: transform;
}
/* Real footage (gran-ea-hero.mp4): the woman, her hand, the light and the curtain sway are
all baked into the video itself, so the old CSS-driven .hero__bg / __sway / __light / __shadow
layers are gone — keeping them would have animated the same thing twice. */
.hero__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 64% 42%;
background: #6d6159; /* shows briefly if the poster itself is still loading */
/* deeper grade — the raw footage reads quite pale/high-key on its own; this pulls it
into the same greige/brown depth as FV-reference.png without flattening it */
filter: saturate(.72) contrast(.96) brightness(.82);
}
/* darker greige–brown tone + vignette + fine grain */
.hero__tone {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(60, 49, 43, .4) 0%, rgba(60, 49, 43, .16) 38%, rgba(60, 49, 43, .2) 66%, rgba(52, 42, 36, .58) 100%),
radial-gradient(120% 92% at 50% 46%, transparent 42%, rgba(38, 30, 26, .4) 100%),
rgba(112, 96, 84, .2);
}
.hero__tone::after {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: .1;
mix-blend-mode: soft-light;
}
.hero__content {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
padding-bottom: 5vh;
--v: clamp(250px, 33vw, 620px); /* visible width of the logo (FV-reference: ~29–33% of the viewport) */
}
.hero__logo {
width: calc(var(--v) * 1.507);
margin-block: calc(var(--v) * -.377);
line-height: 0;
}
.hero__logo img,
.hero__logo svg {
display: block;
width: 100%;
height: auto;
filter: drop-shadow(0 4px 36px rgba(60, 48, 42, .28));
/* The logo draws itself (assets/images/gran-ea-logo-animated.svg, 0.5–4.5s, once).
The slow float only starts after it has settled so the two never compete. */
animation: hero-float 15s ease-in-out 5s infinite alternate;
}
/* While main.js swaps the PNG for the self-drawing SVG the PNG stays hidden, so the finished logo
never flashes before it is written. If anything goes wrong it reappears by itself after 2.5s. */
.js .hero__logo[data-logo-state="pending"] img {
visibility: hidden;
animation: logo-fallback 0s linear 2.5s forwards;
}
@keyframes logo-fallback { to { visibility: visible; } }
.hero__tagline {
margin-top: clamp(14px, 2vw, 30px);
font-family: var(--font-en);
font-size: clamp(13px, calc(var(--v) * .042), 23px);
font-weight: 500;
letter-spacing: .26em;
padding-left: .26em; /* balances the trailing letter-space so the line centres optically */
line-height: 1;
text-shadow: 0 0 24px rgba(62, 50, 44, .35);
animation: hero-fade 1.8s var(--ease) 3.2s both; /* appears once the logo is written */
}
.hero__scroll {
position: absolute;
left: 50%;
bottom: calc(var(--hero-fade) * .6); /* sits above the fade so the white cue stays legible */
z-index: 3;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
font-family: var(--font-en);
font-size: 14px;
font-weight: 500;
letter-spacing: .16em;
line-height: 1;
animation: hero-fade 2.4s var(--ease) 1.4s both;
}
/* fades out over the first 80px of scrolling (--scroll-fade is set from main.js) */
.hero__scroll-label,
.hero__scroll-line {
opacity: var(--scroll-fade, 1);
transition: opacity .5s var(--ease);
}
.hero__scroll-line {
position: relative;
display: block;
width: 1px;
height: 48px;
margin-top: 14px;
overflow: hidden;
background: rgba(255, 255, 255, .34);
}
.hero__scroll-line::after {
content: "";
position: absolute;
inset: 0;
background: #fff;
transform: translateY(-100%);
animation: scroll-line 3.8s ease-in-out infinite;
}
.site-header { animation: hero-fade 2s var(--ease) .6s both; }
.site-header--static { animation: none; }
/* still used by .menu-hero__bg (MENU page) — the TOP hero now animates via its own video instead */
@keyframes hero-zoom {
from { transform: scale(1.02) translate3d(0, 0, 0); }
to { transform: scale(1.09) translate3d(-1.2%, -.6%, 0); }
}
@keyframes hero-float {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(0, -7px, 0); }
}
@keyframes hero-fade {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes scroll-line {
0% { transform: translateY(-100%); }
55% { transform: translateY(0); }
100% { transform: translateY(100%); }
}
@media (max-width: 720px) {
.hero { min-height: 560px; --hero-fade: clamp(100px, 30vw, 170px); }
/* gran-ea-hero-sp.mp4 (縦長・SP専用素材): 顔は上寄り、手は中央〜左寄りに構図されているため、
cover のクロップは右上寄りに軸を置いて顔・手・ネイルが欠けないようにしている */
.hero__video { object-position: 62% 38%; }
.hero__content { --v: min(72vw, 330px); }
.hero__content { padding-bottom: 8vh; }
}
/* ==========================================================================
5. TOP — philosophy
========================================================================== */
.philosophy {
/* starts slightly under the hero's fade. The extra padding equals the overlap, so the content
stays exactly where it was — only the section's top edge moves up into the light. */
--overlap: clamp(56px, 6vw, 110px);
position: relative;
z-index: 3;
margin-top: calc(var(--overlap) * -1);
padding-top: calc(var(--section-space) + var(--overlap));
/* narrower than --section-space on purpose: PHILOSOPHY and Éa EXPERIENCE read as one
continuous editorial spread, not two separate sections — the real pause comes after both. */
padding-bottom: clamp(36px, 4.5vw, 72px);
}
/* photo large (~72% of the content width) + a plain text margin — no card, no border */
.philosophy__inner {
display: grid;
grid-template-columns: minmax(0, 2.9fr) minmax(0, 1.15fr);
align-items: center;
gap: clamp(32px, 5vw, 72px);
}
.philosophy__photo {
position: relative;
aspect-ratio: 16 / 10;
}
/* The rectangle itself dissolves — no border/shape is added, the image's own alpha is
shaped by mask-image so its outline softens into the page's ivory. The ellipse is
anchored upper-left (where the window light sits, so that corner and its two near
edges stay solid) and sized unevenly on purpose: a narrower horizontal radius so the
far (right) edge dissolves well into the background, a taller vertical radius so the
bottom only fades slightly, keeping the photo reading as a real, large photograph. */
.philosophy__photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
-webkit-mask-image: radial-gradient(85% 115% at 26% 30%, #000 40%, transparent 95%);
mask-image: radial-gradient(85% 115% at 26% 30%, #000 40%, transparent 95%);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
.philosophy__body { padding-block: 8px; }
.philosophy__lead {
margin-top: clamp(28px, 3.2vw, 48px);
font-size: clamp(19px, 1.7vw, 25px);
line-height: 2.05;
letter-spacing: .14em;
}
.philosophy__lead-indent { display: inline-block; margin-left: 1.1em; }
.philosophy__text {
margin-top: clamp(24px, 2.4vw, 36px);
font-size: 14px;
line-height: 2.2;
letter-spacing: .12em;
color: var(--ink-soft);
}
@media (max-width: 900px) {
.philosophy { --overlap: 44px; }
.philosophy__inner { grid-template-columns: 1fr; gap: 28px; }
.philosophy__photo { aspect-ratio: 4 / 3; }
.philosophy__body { padding-inline: 4px; }
}
/* ==========================================================================
6. TOP — Éa EXPERIENCE (mirror of PHILOSOPHY: text left, big photo right)
========================================================================== */
.experience { padding-bottom: var(--section-space); }
.experience__inner {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 2.9fr);
align-items: center;
gap: clamp(32px, 5vw, 72px);
}
.experience__lead {
margin-top: clamp(24px, 2.6vw, 40px);
font-size: clamp(17px, 1.45vw, 21px);
line-height: 2.1;
letter-spacing: .14em;
}
.experience__photo {
position: relative;
aspect-ratio: 16 / 10;
}
/* mirrored anchor: the hand sits lower-right, so that corner and its two near edges
stay solid; the narrower horizontal radius lets the far (left) edge dissolve well
into the background, the taller vertical radius keeps the top fade slight. */
.experience__photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
-webkit-mask-image: radial-gradient(85% 115% at 78% 74%, #000 40%, transparent 95%);
mask-image: radial-gradient(85% 115% at 78% 74%, #000 40%, transparent 95%);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
@media (max-width: 900px) {
.experience__inner { grid-template-columns: 1fr; gap: 28px; }
.experience__photo { aspect-ratio: 4 / 3; }
}
/* ==========================================================================
7. TOP — MENU entrance banner (single link → menu.html)
========================================================================== */
.menu-entry-section { padding-bottom: var(--section-space); }
.menu-entry {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: 1920 / 880; /* matches menu_pc.png natively — no unwanted cropping */
color: var(--ink);
background: transparent;
}
.menu-entry__bg-wrap { position: absolute; inset: 0; z-index: 0; }
.menu-entry__bg {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.4s var(--ease);
}
.menu-entry:hover .menu-entry__bg { transform: scale(1.015); }
/* very light, localized fade so the text stays legible without whitening the whole photo —
the images already carry a pale area on the left, this only reinforces it slightly */
.menu-entry__scrim {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(90deg, rgba(247, 244, 239, .38) 0%, rgba(247, 244, 239, .16) 40%, transparent 62%);
}
.menu-entry__content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
height: 100%;
max-width: 420px;
padding: clamp(24px, 5vw, 56px) clamp(24px, 6vw, 72px);
}
.menu-entry__title {
font-family: var(--font-en);
font-weight: 400;
font-size: clamp(33px, 4.1vw, 52px);
letter-spacing: .13em;
line-height: 1;
color: var(--ink-soft);
}
.menu-entry__list {
margin: clamp(18px, 2.6vw, 30px) 0 clamp(22px, 3vw, 36px);
font-family: var(--font-en);
font-size: clamp(13px, 1.05vw, 16px);
font-weight: 500;
letter-spacing: .18em;
line-height: 2;
color: var(--ink-soft);
}
/* hairline + chevron, built with CSS (no image) */
.menu-entry__arrow {
position: relative;
display: block;
width: clamp(96px, 9vw, 140px);
height: 1px;
background: currentColor;
color: var(--ink-soft);
transition: transform .6s var(--ease);
}
.menu-entry__arrow::after {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 7px;
height: 7px;
border-top: 1px solid currentColor;
border-right: 1px solid currentColor;
transform: translateY(-50%) rotate(45deg);
}
.menu-entry:hover .menu-entry__arrow { transform: translateX(8px); }
@media (max-width: 720px) {
.menu-entry { aspect-ratio: 1080 / 1350; } /* matches menu_sp.png */
.menu-entry__scrim {
background: linear-gradient(180deg, rgba(247, 244, 239, .4) 0%, rgba(247, 244, 239, .2) 32%, transparent 55%);
}
.menu-entry__content { justify-content: flex-start; padding-top: clamp(48px, 12vw, 80px); }
.menu-entry__list { line-height: 1.9; }
}
/* ==========================================================================
8. TOP — INSTAGRAM (editorial collage; replaces the former GALLERY)
----------------------------------------------------------------------
PC : 12-column grid whose row height equals one column width, so
"3 cols × 3 rows" is a true square. Sizes vary via grid-column /
grid-row on .instagram-item--a … --j. Empty cells are intentional.
SP : two columns; only a / g / h span the full width.
In WordPress, output one
![]()
per post and keep the modifier classes as a layout pattern.
========================================================================== */
.instagram { padding-bottom: var(--section-space); }
.instagram__inner {
--gap: clamp(15px, 1.9vw, 26px);
--cw: calc((100cqw - var(--gap) * 11) / 12); /* one column width */
container-type: inline-size;
position: relative;
}
.instagram__head {
position: absolute;
top: 0;
left: calc((var(--cw) + var(--gap)) * 5); /* sits in the empty cell beside the big photo */
z-index: 2;
}
.instagram__handle {
display: inline-block;
margin-top: 6px;
font-family: var(--font-en);
font-size: 17px;
font-weight: 500;
letter-spacing: .08em;
line-height: 1.4;
color: var(--ink-soft);
transition: color .8s var(--ease);
}
.instagram__handle:hover { color: var(--ink); }
.instagram__grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-auto-rows: var(--cw);
gap: var(--gap);
}
.instagram-item { min-width: 0; min-height: 0; }
.instagram-item .media { display: block; width: 100%; height: 100%; }
.instagram-item .media img { object-position: 50% 32%; } /* nails sit in the upper part of most posts */
/* Colour grading — Instagram photos only (the rest of the site is untouched).
Posts arrive bright, cool-white and "raw"; measured against the other site photos they were
far lighter (L .75–.86 vs .43–.64) and colder. This quietly settles them into the greige world:
1. filter — a little less saturation / contrast, a touch of warmth
2. tint — the photo is multiplied onto a pale greige, so paper-white becomes soft greige
(faint soot, never yellow)
3. veil + grain — a thin ivory fade and the faintest grain on top
The image files themselves are never edited. Tune the variables. */
.instagram {
--ig-saturate: .72;
--ig-contrast: .92;
--ig-brightness: .99;
--ig-warm: .10; /* sepia amount */
--ig-tint: rgb(226, 219, 210); /* multiply colour (pale greige) */
--ig-veil: .06; /* opacity of the ivory veil */
}
.instagram-item .media {
isolation: isolate;
background: var(--ig-tint); /* the photo multiplies onto this */
}
.instagram-item .media img {
mix-blend-mode: multiply;
filter: saturate(var(--ig-saturate)) contrast(var(--ig-contrast)) brightness(var(--ig-brightness)) sepia(var(--ig-warm));
}
.instagram-item .media::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
url("data:image/svg+xml;utf8,") 0 0 / 180px 180px,
rgba(var(--ivory-rgb), var(--ig-veil));
background-blend-mode: soft-light, normal;
}
/* Size / position pattern — 12 cols × 14 rows. Assigned by post order (newest = a),
never by the photo itself; see SLOTS in assets/js/instagram-feed.js. */
.instagram-item--a { grid-column: 1 / span 5; grid-row: 1 / span 5; } /* large square */
.instagram-item--b { grid-column: 7 / span 2; grid-row: 2 / span 2; } /* small square */
.instagram-item--c { grid-column: 10 / span 3; grid-row: 1 / span 4; } /* portrait */
.instagram-item--d { grid-column: 6 / span 4; grid-row: 4 / span 2; } /* landscape */
.instagram-item--e { grid-column: 1 / span 2; grid-row: 7 / span 2; } /* small square */
.instagram-item--f { grid-column: 4 / span 2; grid-row: 7 / span 3; } /* tall portrait */
.instagram-item--g { grid-column: 8 / span 5; grid-row: 6 / span 5; } /* large square */
.instagram-item--h { grid-column: 1 / span 5; grid-row: 11 / span 3; } /* landscape */
.instagram-item--i { grid-column: 8 / span 2; grid-row: 12 / span 2; } /* small square */
.instagram-item--j { grid-column: 11 / span 2; grid-row: 12 / span 3; } /* tall portrait */
/* feed states (set on the section by instagram-feed.js) */
.instagram[data-state="loading"] .instagram__grid { min-height: calc(var(--cw) * var(--feed-rows, 5) + var(--gap) * (var(--feed-rows, 5) - 1)); }
@media (max-width: 900px) { .instagram[data-state="loading"] .instagram__grid { min-height: 60vh; } }
.instagram[data-state="error"] .instagram__grid { display: none; }
.instagram[data-state="error"] .instagram__follow { margin-top: clamp(40px, 5vw, 72px); }
.instagram__noscript {
margin-top: 40px;
text-align: center;
font-size: 14px;
color: var(--ink-soft);
}
/* hover (pointer devices only): slow 1.03× zoom, faint veil, small icon */
.instagram-item a { position: relative; color: var(--white); }
.instagram-item a::after {
content: "";
position: absolute;
inset: 0;
background: rgba(62, 53, 47, .24);
opacity: 0;
z-index: 2;
transition: opacity 1.3s var(--ease);
pointer-events: none;
}
.instagram-item__icon {
position: absolute;
left: 50%;
top: 50%;
z-index: 3;
translate: -50% -50%;
z-index: 3;
line-height: 0;
opacity: 0;
transition: opacity 1.3s var(--ease);
pointer-events: none;
}
@media (hover: hover) {
.instagram-item a:hover img { transform: scale(1.03); }
.instagram-item a:hover::after,
.instagram-item a:hover .instagram-item__icon { opacity: 1; }
}
.instagram__follow {
margin-top: clamp(56px, 7vw, 104px);
text-align: center;
}
.instagram__follow .link-arrow { font-size: 14px; }
/* SP: two columns, an occasional full-width photo */
@media (max-width: 900px) {
.instagram__inner { --gap: 10px; }
.instagram__head {
position: static;
margin-bottom: 30px;
}
.instagram__grid {
display: block;
columns: 2;
column-gap: var(--gap);
}
.instagram-item {
display: block;
break-inside: avoid;
margin: 0 0 var(--gap);
grid-area: auto;
}
.instagram-item .media { height: auto; }
.instagram-item--a, .instagram-item--g, .instagram-item--h { column-span: all; }
.instagram-item--a .media { aspect-ratio: 4 / 5; }
.instagram-item--b .media { aspect-ratio: 1 / 1; }
.instagram-item--c .media { aspect-ratio: 4 / 5; }
.instagram-item--d .media { aspect-ratio: 1 / 1; }
.instagram-item--e .media { aspect-ratio: 2 / 3; }
.instagram-item--f .media { aspect-ratio: 3 / 4.6; }
.instagram-item--g .media { aspect-ratio: 4 / 3; }
.instagram-item--h .media { aspect-ratio: 3 / 2; }
.instagram-item--i .media { aspect-ratio: 4 / 5; }
.instagram-item--j .media { aspect-ratio: 3 / 4; }
/* exactly 4 posts: a full width · b + c side by side (same height) · d full width */
.instagram[data-count="4"] .instagram-item--b .media { aspect-ratio: 4 / 5; }
.instagram[data-count="4"] .instagram-item--d { column-span: all; }
.instagram[data-count="4"] .instagram-item--d .media { aspect-ratio: 3 / 2; }
.instagram__follow { margin-top: 44px; }
}
/* ==========================================================================
10. Reservation
========================================================================== */
.reservation { padding-bottom: clamp(72px, 9vw, 130px); }
.reservation__banner {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: center;
min-height: clamp(300px, 27vw, 400px);
padding: clamp(32px, 4vw, 60px) clamp(28px, 5.4vw, 80px);
overflow: hidden;
background: var(--greige-1);
}
.reservation__bg {
background: url("../images/reservation.jpg") 60% 60% / cover no-repeat;
}
.reservation__shade {
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(240, 235, 228, .9) 0%, rgba(240, 235, 228, .66) 34%, rgba(240, 235, 228, .12) 66%, transparent 100%);
}
.reservation__body,
.reservation__cta { position: relative; z-index: 1; }
.reservation__lead {
margin-top: clamp(20px, 2.2vw, 32px);
font-size: clamp(19px, 1.7vw, 25px);
line-height: 2.05;
letter-spacing: .14em;
}
.reservation__cta {
justify-self: start;
margin-left: clamp(0px, 6vw, 90px);
font-size: 15px;
padding: 12px 0;
}
.reservation__cta .link-arrow__label { border-bottom: 1px solid currentColor; padding-bottom: 6px; }
@media (max-width: 720px) {
.reservation__banner {
grid-template-columns: 1fr;
align-content: space-between;
gap: 30px;
min-height: 340px;
padding: 34px 26px 30px;
}
.reservation__bg { background-position: 78% 60%; }
.reservation__shade { background: linear-gradient(180deg, rgba(240, 235, 228, .9) 0%, rgba(240, 235, 228, .62) 44%, rgba(240, 235, 228, .1) 100%); }
.reservation__cta { margin-left: 0; }
}
/* ==========================================================================
10b. ACCESS — tennai image + address block
========================================================================== */
.access { padding-bottom: var(--section-space); }
.access__inner {
max-width: min(100%, 760px);
margin: 0 auto;
}
.access__body {
max-width: 520px;
}
.access__address {
margin-top: clamp(18px, 2vw, 28px);
font-family: var(--font-ja);
font-size: 15px;
line-height: 1.95;
letter-spacing: .04em;
color: var(--ink);
}
.access__info {
margin-top: clamp(18px, 2.1vw, 28px);
font-size: 13px;
line-height: 2.05;
letter-spacing: .05em;
color: var(--ink-soft);
}
.access__note {
margin-top: clamp(28px, 3vw, 44px);
font-size: 13px;
line-height: 2.1;
letter-spacing: .05em;
color: var(--ink-soft);
}
.access__media {
margin-top: clamp(34px, 4vw, 56px);
}
.access__image {
display: block;
width: 100%;
height: auto;
}
.access__map-link {
margin-top: clamp(24px, 2.8vw, 36px);
font-size: 14px;
}
@media (max-width: 720px) {
.access__inner {
max-width: 100%;
}
.access__body {
max-width: none;
}
.access__media {
margin-top: 30px;
}
.access__map-link {
margin-top: 24px;
}
}
/* ==========================================================================
11. Footer
========================================================================== */
.site-footer {
padding-top: clamp(28px, 4vw, 48px);
}
.site-footer__inner {
display: grid;
grid-template-columns: minmax(0, .8fr) minmax(0, 2.3fr) minmax(0, .8fr);
align-items: center;
gap: 32px;
padding-block: 20px;
}
.site-footer__brand { --v: clamp(150px, 13vw, 190px); }
.site-footer__logo {
display: block;
width: calc(var(--v) * 1.507);
height: auto;
margin-block: calc(var(--v) * -.377);
margin-left: calc(var(--v) * -.262);
}
.site-footer__tagline {
width: var(--v);
margin-top: 20px;
font-family: var(--font-en);
font-size: 11px;
font-weight: 500;
letter-spacing: .26em;
line-height: 1.3;
text-align: center;
color: rgba(255, 255, 255, .65);
}
.site-footer__center { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.site-footer__nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px clamp(18px, 2.4vw, 34px);
}
.site-footer__nav a {
display: block;
padding: 4px 0;
font-family: var(--font-en);
font-size: 14px;
font-weight: 500;
letter-spacing: .1em;
line-height: 1.2;
color: rgba(255, 255, 255, .90);
transition: color .8s var(--ease);
}
.site-footer__nav a:hover { color: rgba(255, 255, 255, 1); }
.site-footer__nav a[aria-current="page"] { border-bottom: 1px solid currentColor; }
.site-footer__sister { justify-self: end; text-align: right; }
.site-footer__sister-label {
font-family: var(--font-en);
font-size: 12px;
font-weight: 500;
letter-spacing: .24em;
color: rgba(255, 255, 255, .65);
line-height: 1.6;
}
.site-footer__sister-name {
display: inline-block;
margin-top: 4px;
font-family: var(--font-en);
font-size: clamp(19px, 1.7vw, 23px);
letter-spacing: .06em;
line-height: 1.4;
color: rgba(255, 255, 255, .90);
}
.site-footer__copy {
padding: 22px var(--gutter) 30px;
text-align: center;
font-family: var(--font-en);
font-size: 12px;
letter-spacing: .12em;
line-height: 1.6;
color: rgba(255, 255, 255, .45);
}
@media (max-width: 900px) {
.site-footer__inner {
grid-template-columns: 1fr;
justify-items: center;
gap: 26px;
padding-block: 28px 8px;
}
.site-footer__center { order: 2; }
.site-footer__sister { order: 3; justify-self: center; text-align: center; }
.site-footer__brand { --v: 170px; }
.site-footer__logo { margin-inline: auto; }
.site-footer__tagline { margin-inline: auto; }
}
/* ==========================================================================
11b. TOP → MENU page-turn transition
A single fixed layer, styled entirely through ::before so no extra DOM is needed
beyond the empty