/* ============================================================ 灯火珈琲 -TOMOSHIBI- | tokens.css The shared CSS foundation for every page. Concept: 深夜の焙煎所 — 墨夜と琥珀火だけの寡黙な紙面。 Pages link ONLY this file for shared styles. Fonts loaded by the page : Fraunces (欧文ディスプレイ / serif) , Shippori Mincho (和文見出し / mincho) , Zen Kaku Gothic New (本文 / gothic) ============================================================ */ /* ------------------------------------------------------------ a. DESIGN TOKENS ------------------------------------------------------------ */ :root { /* --- palette (raw named colors) --- */ --sumiyo: #12100d; /* 墨夜 — 温かい近黒 */ --kinari: #ece2cf; /* 生成り — 紙の白 */ --houjitsuchi: #231c14; /* 焙じ土 — 面色の焦げ茶 */ --haikemuri: #8b7d68; /* 灰煙 — 補助・罫線 */ --kohakubi: #dd8a2a; /* 琥珀火 — 唯一の差し色 */ /* --- palette (semantic roles) --- */ --color-bg: var(--sumiyo); --color-fg: var(--kinari); --color-surface: var(--houjitsuchi); --color-muted: var(--haikemuri); --color-accent: var(--kohakubi); /* derived tints (built only from the palette, no ad-hoc hex) */ --color-bg-deep: #0d0b09; /* 墨夜より一段沈めた底 */ --hairline: rgba(236, 226, 207, 0.10); /* 生成り 10% ヘアライン */ --hairline-strong: rgba(236, 226, 207, 0.14); --ghost-word: rgba(236, 226, 207, 0.04); /* 背後の巨大欧文語 */ --accent-glow: rgba(221, 138, 42, 0.42); --surface-2: #2c2318; /* 焙じ土のホバー面 */ /* --- fluid type scale --- */ --step--1: clamp(0.8rem, 0.76rem + 0.2vw, 0.92rem); --step-0: clamp(1rem, 0.94rem + 0.3vw, 1.12rem); --step-1: clamp(1.3rem, 1.05rem + 1vw, 1.9rem); --step-2: clamp(2rem, 1.4rem + 2.4vw, 3.4rem); --step-3: clamp(3rem, 1.6rem + 5vw, 6.2rem); --step-display: clamp(3.2rem, 9vw, 11rem); /* --- font stacks --- */ --font-display: "Fraunces", "Shippori Mincho", "Times New Roman", serif; --font-mincho: "Shippori Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif; --font-body: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif; /* --- spacing scale (fluid where useful) --- */ --space-1: clamp(0.5rem, 0.4rem + 0.4vw, 0.75rem); --space-2: clamp(0.75rem, 0.6rem + 0.6vw, 1.1rem); --space-3: clamp(1.1rem, 0.9rem + 1vw, 1.75rem); --space-4: clamp(1.75rem, 1.3rem + 2vw, 3rem); --space-5: clamp(2.75rem, 2rem + 3.4vw, 5rem); --space-6: clamp(4rem, 3rem + 5vw, 8rem); --space-7: clamp(6rem, 4.5rem + 8vw, 13rem); --space-8: clamp(9rem, 6rem + 14vw, 22rem); --gutter: clamp(1rem, 0.6rem + 1.8vw, 2.4rem); --page-inline: clamp(1.25rem, 5vw, 6rem); --silence: clamp(14vh, 20vh, 34vh); /* 章間の「間」 */ /* --- motion tokens --- */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-out-quart: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1); --ease-power4-out: cubic-bezier(0.15, 1, 0.3, 1); --dur-1: 0.4s; --dur-2: 0.8s; --dur-3: 1.2s; --nav-h: clamp(3.5rem, 4vw, 5rem); --z-grain: 60; --z-nav: 80; --z-cursor: 90; --z-preloader: 120; color-scheme: dark; } /* ------------------------------------------------------------ b. RESET (hand-written, no @import) ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } html, body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; } ul[role="list"], ol[role="list"] { list-style: none; padding: 0; } body { min-height: 100vh; line-height: 1.5; text-rendering: optimizeLegibility; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { text-wrap: balance; } p { text-wrap: pretty; } :where(ul, ol) { padding-left: 0; list-style: none; } /* ------------------------------------------------------------ c. BASE ELEMENTS ------------------------------------------------------------ */ html { scroll-behavior: auto; /* Lenis drives scrolling; no native smooth */ } body { background-color: var(--color-bg); color: var(--color-fg); font-family: var(--font-body); font-weight: 400; font-size: var(--step-0); line-height: 1.95; /* 本文和文の呼吸 */ font-feature-settings: normal; /* 本文は全角メトリクス既定 */ letter-spacing: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; position: relative; } /* while the preloader runs, freeze scroll */ body.is-loading { overflow: hidden; height: 100vh; } /* --- headings on the type scale, sculptural leading --- */ h1, h2, h3 { font-family: var(--font-mincho); font-weight: 600; line-height: 0.98; letter-spacing: 0; font-feature-settings: "palt" 1; /* 和文見出しを詰める */ color: var(--color-fg); word-break: keep-all; /* 機械改行を避け、文節境界で折る */ overflow-wrap: anywhere; /* それでも溢れる時だけ折り返す */ } h1 { font-size: var(--step-3); line-height: 0.94; font-weight: 700; } h2 { font-size: var(--step-2); } h3 { font-size: var(--step-1); font-weight: 500; } h4, h5, h6 { font-family: var(--font-body); font-weight: 500; line-height: 1.3; } h4 { font-size: var(--step-0); } /* Latin display face for graphic words / numerals */ .font-display, .display { font-family: var(--font-display); font-optical-sizing: auto; letter-spacing: -0.025em; line-height: 0.9; } p { max-width: 62ch; word-break: keep-all; overflow-wrap: anywhere; } strong, b { font-weight: 700; } /* accent used on exactly one word — .ember */ .ember { color: var(--color-accent); } /* small ALL-CAPS labels — Fraunces 400, tracked, muted */ .label { font-family: var(--font-display); font-weight: 400; font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-muted); font-optical-sizing: auto; } /* --- links: underline drawn in from the left --- */ a:not([class]), .link { position: relative; color: inherit; background-image: linear-gradient(var(--color-accent), var(--color-accent)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px; transition: background-size var(--dur-1) var(--ease-out-quart), color var(--dur-1) var(--ease-out-quart); } a:not([class]):hover, .link:hover, a:not([class]):focus-visible, .link:focus-visible { background-size: 100% 1px; color: var(--color-fg); } /* --- selection --- */ ::selection { background: var(--color-accent); color: var(--color-bg); text-shadow: none; } /* --- focus-visible: designed accent outline --- */ :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 1px; } /* --- themed thin scrollbar --- */ html { scrollbar-width: thin; scrollbar-color: var(--color-muted) transparent; } ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--color-muted) 70%, var(--color-bg)); border-radius: 10px; border: 2px solid var(--color-bg); } ::-webkit-scrollbar-thumb:hover { background: var(--color-muted); } /* ------------------------------------------------------------ d. GRAIN OVERLAY (body::after, inline SVG feTurbulence) ------------------------------------------------------------ */ body::after { content: ""; position: fixed; inset: 0; z-index: var(--z-grain); pointer-events: none; opacity: 0.06; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E"); background-size: 240px 240px; } /* ------------------------------------------------------------ e. UTILITIES + COMPONENTS ------------------------------------------------------------ */ /* container / inset */ .container { width: 100%; padding-inline: var(--page-inline); margin-inline: auto; max-width: 100rem; } .container--narrow { max-width: 68rem; } /* full-bleed band */ .bleed { width: 100%; padding-inline: var(--page-inline); } .bleed--surface { background: var(--color-surface); } .bleed--deep { background: var(--color-bg-deep); } /* 12-column grid, used asymmetrically by pages */ .grid12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); } @media (max-width: 720px) { .grid12 { grid-template-columns: repeat(6, 1fr); } } /* column span helpers (desktop) */ .col-1-7 { grid-column: 1 / 8; } .col-8-12 { grid-column: 8 / 13; } .col-1-6 { grid-column: 1 / 7; } .col-7-12 { grid-column: 7 / 13; } .col-full { grid-column: 1 / -1; } @media (max-width: 720px) { .col-1-7, .col-8-12, .col-1-6, .col-7-12 { grid-column: 1 / -1; } } /* designed silence */ .silence { height: var(--silence); } .section { padding-block: var(--space-7); } /* hairline rule */ .hairline { border: 0; border-top: 1px solid var(--hairline); width: 100%; margin: 0; } .hairline--strong { border-top-color: var(--hairline-strong); } /* index list (table-like editorial rows) */ .index-row { display: grid; grid-template-columns: auto 1fr auto; gap: var(--gutter); align-items: baseline; padding-block: var(--space-3); border-top: 1px solid var(--hairline); } .index-row:last-child { border-bottom: 1px solid var(--hairline); } /* oversized index number */ .index-num { font-family: var(--font-display); font-optical-sizing: auto; font-weight: 300; font-size: var(--step-2); line-height: 0.8; color: var(--color-muted); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .index-num--giant { font-size: clamp(3.5rem, 12vw, 9rem); color: var(--color-muted); opacity: 0.55; } /* tabular numerals (prices, times, phone) */ .tnum { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-optical-sizing: auto; letter-spacing: -0.01em; } /* giant ghost word behind composition */ .ghost-word { position: absolute; font-family: var(--font-display); font-weight: 900; font-optical-sizing: auto; color: var(--ghost-word); letter-spacing: -0.04em; line-height: 0.8; pointer-events: none; user-select: none; z-index: 0; text-transform: uppercase; } /* vertical-writing accent (章ラベル・日付・詩片) */ .vertical { writing-mode: vertical-rl; text-orientation: upright; font-feature-settings: "vpal" 1; line-height: 1.1; letter-spacing: 0.05em; } .vertical--mincho { writing-mode: vertical-rl; font-family: var(--font-mincho); font-feature-settings: "vpal" 1, "palt" 1; line-height: 1.05; } /* surface panel (where a photo would be) */ .panel { position: relative; background: var(--color-surface); padding: var(--space-4); overflow: hidden; } .panel__caption { font-size: var(--step--1); color: var(--color-muted); } /* magnetic / accent button */ .btn { --btn-fg: var(--color-accent); display: inline-flex; align-items: center; gap: 0.6em; font-family: var(--font-body); font-weight: 500; font-size: var(--step-0); color: var(--btn-fg); padding: 0.7em 1.4em; border: 1px solid currentColor; border-radius: 100px; position: relative; will-change: transform; transition: color var(--dur-1) var(--ease-out-quart), background-color var(--dur-1) var(--ease-out-quart); } .btn:hover, .btn:focus-visible { background: var(--color-accent); color: var(--color-bg); } .btn__arrow { transition: transform var(--dur-1) var(--ease-out-quart); } .btn:hover .btn__arrow { transform: translateX(0.3em); } /* --- marquee (CSS only) --- */ .marquee { --marquee-dur: 32s; display: flex; overflow: hidden; width: 100%; user-select: none; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee-track { display: flex; flex-shrink: 0; gap: var(--space-5); padding-right: var(--space-5); align-items: center; white-space: nowrap; animation: marquee-scroll var(--marquee-dur) linear infinite; } .marquee-track > * { font-family: var(--font-display); font-optical-sizing: auto; font-weight: 300; font-size: var(--step-1); letter-spacing: 0.02em; color: var(--color-muted); flex-shrink: 0; } @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* --- reveal initial states (JS flips them) --- */ [data-reveal] { opacity: 0; transform: translateY(24px); will-change: transform, opacity; } [data-reveal].is-visible { opacity: 1; transform: none; } /* char reveal wrappers created by splitText */ .split-line { display: block; overflow: hidden; } .split-word { display: inline-block; overflow: hidden; vertical-align: top; } .split-char { display: inline-block; will-change: transform; } /* clip reveal for vertical headlines / panels */ [data-clip] { clip-path: inset(0 0 100% 0); will-change: clip-path; } [data-clip].is-visible { clip-path: inset(0 0 0% 0); } /* --- visually hidden --- */ .visually-hidden, .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* --- fixed nav in difference blend --- */ .site-nav { position: fixed; top: 0; left: 0; width: 100%; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; padding-inline: var(--page-inline); z-index: var(--z-nav); mix-blend-mode: difference; color: var(--color-fg); transition: transform var(--dur-2) var(--ease-out-quart); } .site-nav__brand { font-family: var(--font-mincho); font-weight: 600; font-size: var(--step-0); letter-spacing: 0.04em; } .site-nav__links { display: flex; gap: var(--space-4); align-items: center; } .site-nav__link { font-size: var(--step--1); letter-spacing: 0.04em; position: relative; padding-block: 0.3em; } .site-nav__link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--dur-1) var(--ease-out-quart); } .site-nav__link:hover::after, .site-nav__link[aria-current="page"]::after { transform: scaleX(1); } .site-nav__link[aria-current="page"] { color: var(--color-accent); } .site-nav.scrolled { /* hook for pages; blend keeps it legible */ } .nav-toggle { display: none; width: 2.2rem; height: 2.2rem; position: relative; } @media (max-width: 720px) { .site-nav__links { position: fixed; inset: 0; background: var(--color-bg); flex-direction: column; justify-content: center; mix-blend-mode: normal; transform: translateY(-100%); transition: transform var(--dur-2) var(--ease-in-out-quart); gap: var(--space-4); } .site-nav.nav-open .site-nav__links { transform: translateY(0); } .nav-toggle { display: block; } } /* --- custom cursor --- */ .cursor, .cursor-ring { position: fixed; top: 0; left: 0; border-radius: 50%; pointer-events: none; z-index: var(--z-cursor); transform: translate3d(-50%, -50%, 0); mix-blend-mode: normal; opacity: 0; transition: opacity var(--dur-1) ease; } .cursor { width: 7px; height: 7px; background: var(--color-accent); box-shadow: 0 0 10px var(--accent-glow); } .cursor-ring { width: 34px; height: 34px; border: 1px solid var(--color-accent); transition: width var(--dur-1) var(--ease-out-quart), height var(--dur-1) var(--ease-out-quart), opacity var(--dur-1) ease, background-color var(--dur-1) var(--ease-out-quart); } body.cursor-ready .cursor, body.cursor-ready .cursor-ring { opacity: 1; } .cursor-ring.is-hover { width: 56px; height: 56px; background: var(--accent-glow); border-color: transparent; } @media (pointer: coarse) { .cursor, .cursor-ring { display: none !important; } } /* --- preloader --- */ #preloader { position: fixed; inset: 0; z-index: var(--z-preloader); background: var(--color-bg); display: flex; align-items: flex-end; justify-content: flex-end; padding: var(--page-inline); will-change: transform; } #preloader .preloader__inner { display: flex; align-items: baseline; gap: 0.5rem; } #preloader .preloader__dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 18px var(--accent-glow); align-self: center; } #preloader .preloader__count { font-family: var(--font-display); font-optical-sizing: auto; font-variant-numeric: tabular-nums; font-weight: 300; font-size: clamp(3rem, 10vw, 8rem); line-height: 0.8; color: var(--color-fg); letter-spacing: -0.03em; } #preloader .preloader__label { font-family: var(--font-mincho); font-size: var(--step--1); color: var(--color-muted); writing-mode: vertical-rl; margin-left: var(--space-3); letter-spacing: 0.1em; } /* ------------------------------------------------------------ SIGNATURE: 香りの立ちのぼり canvas layer Pages mount ; this fixes it behind content. ------------------------------------------------------------ */ .smoke-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; } main, .site-nav, footer { position: relative; z-index: 2; } /* background warming gradient (home) — JS shifts --warm 0..1 */ .warm-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; --warm: 0; background: radial-gradient(120% 80% at 50% 118%, rgba(221, 138, 42, calc(0.10 + 0.22 * var(--warm))) 0%, rgba(221, 138, 42, 0) 55%), conic-gradient(from 210deg at 50% 130%, rgba(44, 35, 24, 0.5), rgba(18, 16, 13, 0) 40%), linear-gradient(180deg, var(--color-bg-deep) 0%, var(--color-surface) 160%); } /* reduced-motion static smoke line */ .smoke-static { position: fixed; left: 50%; bottom: 0; width: 1px; height: 60vh; background: linear-gradient(to top, var(--color-accent), transparent); opacity: 0.35; z-index: 1; pointer-events: none; display: none; } /* ------------------------------------------------------------ f. REDUCED MOTION ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .marquee-track { animation: none !important; transform: none !important; } [data-reveal] { opacity: 1 !important; transform: none !important; } [data-clip] { clip-path: none !important; } .split-char { transform: none !important; } .smoke-canvas { display: none !important; } .smoke-static { display: block !important; } .warm-bg { --warm: 0.5 !important; } #preloader { display: none !important; } }