/* ============================================================ kaguya.bar — Styles Art Deco × Ma negative space × Scholarly-intellectual ============================================================ */ /* --- Google Fonts import (already in HTML ) --- DM Serif Display — Display/Headings Jost — Body/Prose/Utility Cormorant — Accent/Pull-quotes ============================================================ */ /* ============================================================ CSS Custom Properties (Design Tokens) ============================================================ */ :root { /* Colour Palette */ --burnt-lacquer: #C4521A; /* primary accent */ --deep-ink: #1A1208; /* primary text, dark backgrounds */ --antique-cream: #F5EBD8; /* primary light background */ --aged-vellum: #E8D5B0; /* secondary light surface */ --umber: #7A4A2A; /* secondary warm; watercolour mid-values */ --gilded-ochre: #C8A96E; /* tertiary accent; ornament highlights */ --sable: #3A2A1A; /* deep contrast; heavy text, borders */ --moon-mist: #F0E8D5; /* near-white; large negative-space sections */ /* Typography */ --font-display: 'DM Serif Display', Georgia, serif; --font-body: 'Jost', 'Futura', sans-serif; --font-accent: 'Cormorant', Georgia, serif; /* Grid — 12-column. Left 4 cols = breathing corridor (~33.33%) */ --corridor-width: 33.333%; --content-start: 33.333%; /* Hairline rule weight */ --hairline: 0.5px; } /* ============================================================ Reset & Base ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { width: 100%; height: 100%; overflow: hidden; background-color: var(--antique-cream); color: var(--deep-ink); font-family: var(--font-body); font-weight: 300; font-size: 17px; line-height: 1.85; letter-spacing: 0.02em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ============================================================ Scroll Container — Scroll Snap ============================================================ */ .scroll-container { width: 100%; height: 100vh; overflow-y: scroll; scroll-snap-type: y mandatory; scroll-behavior: smooth; } /* ============================================================ Section Base ============================================================ */ .section { width: 100%; height: 100vh; scroll-snap-align: start; position: relative; overflow: hidden; } /* ============================================================ Global Right Hairline Rule ============================================================ */ .hairline-right { position: fixed; top: 0; right: 2.5rem; width: 1px; height: 100vh; background-color: rgba(196, 82, 26, 0.30); z-index: 100; pointer-events: none; } .hairline-diamond { display: none; /* shown only in Owari via JS/CSS */ } /* ============================================================ Section I — Tōkō (Arrival) ============================================================ */ .section-arrival { background-color: var(--antique-cream); } /* Breathing corridor — left 4 cols, empty by design */ .breathing-corridor { position: absolute; top: 0; left: 0; width: var(--corridor-width); height: 100%; border-right: 1px solid rgba(196, 82, 26, 0.30); pointer-events: none; z-index: 2; } /* --- Amber Watercolour Washes --- */ .amber-wash { position: absolute; pointer-events: none; z-index: 1; border-radius: 50%; mix-blend-mode: multiply; } .amber-wash-1 { width: 420px; height: 280px; background: radial-gradient(ellipse, rgba(196, 82, 26, 0.13) 0%, transparent 70%); filter: blur(80px); right: -40px; top: 20%; } .amber-wash-2 { width: 320px; height: 380px; background: radial-gradient(ellipse, rgba(196, 82, 26, 0.09) 0%, transparent 70%); filter: blur(100px); right: 60px; top: 10%; } .amber-wash-3 { width: 260px; height: 200px; background: radial-gradient(ellipse, rgba(200, 169, 110, 0.12) 0%, transparent 70%); filter: blur(120px); right: 80px; bottom: 20%; } /* --- Sunburst Fan (lower-right quadrant) --- */ .sunburst-container { position: absolute; bottom: -80px; right: -80px; width: 600px; height: 600px; z-index: 1; pointer-events: none; overflow: hidden; } .sunburst { width: 600px; height: 600px; border-radius: 50%; background: conic-gradient( from 0deg, rgba(196, 82, 26, 0.12) 0deg, transparent 5deg, rgba(196, 82, 26, 0.12) 10deg, transparent 15deg, rgba(196, 82, 26, 0.12) 20deg, transparent 25deg, rgba(196, 82, 26, 0.12) 30deg, transparent 35deg, rgba(196, 82, 26, 0.12) 40deg, transparent 45deg, rgba(196, 82, 26, 0.12) 50deg, transparent 55deg, rgba(196, 82, 26, 0.12) 60deg, transparent 65deg, rgba(196, 82, 26, 0.12) 70deg, transparent 75deg, rgba(196, 82, 26, 0.12) 80deg, transparent 85deg, rgba(196, 82, 26, 0.12) 90deg, transparent 95deg, rgba(196, 82, 26, 0.12) 100deg, transparent 105deg, rgba(196, 82, 26, 0.12) 110deg, transparent 115deg, rgba(196, 82, 26, 0.12) 120deg, transparent 125deg, rgba(196, 82, 26, 0.12) 130deg, transparent 135deg, rgba(196, 82, 26, 0.12) 140deg, transparent 145deg, rgba(196, 82, 26, 0.12) 150deg, transparent 155deg, rgba(196, 82, 26, 0.12) 160deg, transparent 165deg, rgba(196, 82, 26, 0.12) 170deg, transparent 175deg, rgba(196, 82, 26, 0.12) 180deg, transparent 185deg, rgba(196, 82, 26, 0.12) 190deg, transparent 195deg, rgba(196, 82, 26, 0.12) 200deg, transparent 205deg, rgba(196, 82, 26, 0.12) 210deg, transparent 215deg, rgba(196, 82, 26, 0.12) 220deg, transparent 225deg, rgba(196, 82, 26, 0.12) 230deg, transparent 235deg, rgba(196, 82, 26, 0.12) 240deg, transparent 245deg, rgba(196, 82, 26, 0.12) 250deg, transparent 255deg, rgba(196, 82, 26, 0.12) 260deg, transparent 265deg, rgba(196, 82, 26, 0.12) 270deg, transparent 275deg, rgba(196, 82, 26, 0.12) 280deg, transparent 285deg, rgba(196, 82, 26, 0.12) 290deg, transparent 295deg, rgba(196, 82, 26, 0.12) 300deg, transparent 305deg, rgba(196, 82, 26, 0.12) 310deg, transparent 315deg, rgba(196, 82, 26, 0.12) 320deg, transparent 325deg, rgba(196, 82, 26, 0.12) 330deg, transparent 335deg, rgba(196, 82, 26, 0.12) 340deg, transparent 345deg, rgba(196, 82, 26, 0.12) 350deg, transparent 355deg, rgba(196, 82, 26, 0.12) 360deg ); animation: fan-rotate 120s linear infinite; } @keyframes fan-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* --- Arrival Content Area (cols 5-12) --- */ .arrival-content { position: absolute; top: 0; left: var(--content-start); right: 4rem; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 4rem 2rem; z-index: 3; } .wordmark { font-family: var(--font-body); font-weight: 200; font-size: 13px; font-variant: small-caps; letter-spacing: 0.3em; color: var(--umber); text-transform: lowercase; margin-bottom: 0.5rem; } .wordmark-sub { margin-bottom: 4rem; } .caption-utility { font-family: var(--font-body); font-weight: 200; font-size: 12px; letter-spacing: 0.12em; text-transform: lowercase; font-variant: small-caps; color: var(--umber); opacity: 0.65; } .arrival-tagline { max-width: 42ch; } .arrival-tagline p { font-family: var(--font-body); font-weight: 300; font-size: 17px; line-height: 1.85; color: var(--sable); letter-spacing: 0.02em; } /* ============================================================ Section II — Ma (Interval) ============================================================ */ .section-ma { background-color: var(--moon-mist); } /* --- Stepped Art Deco Arch (at 30% from top) --- */ .arch-container { position: absolute; top: 30%; left: 50%; transform: translateX(-50%); width: 240px; height: 120px; pointer-events: none; z-index: 2; } .arch { position: absolute; bottom: 0; border-radius: 50% 50% 0 0; border: var(--hairline) solid var(--burnt-lacquer); border-bottom: none; } .arch-outer { width: 240px; height: 120px; left: 0; } .arch-middle { width: 200px; height: 100px; left: 20px; } .arch-inner { width: 160px; height: 80px; left: 40px; } /* --- Haiku Blockquote (at 60% from top) --- */ .haiku { position: absolute; top: 60%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 3; width: min(480px, 85vw); } .haiku p { font-family: var(--font-accent); font-style: italic; font-size: 32px; line-height: 1.7; color: var(--burnt-lacquer); letter-spacing: 0.01em; } .haiku-cite { display: block; margin-top: 1.5rem; font-family: var(--font-body); font-weight: 200; font-size: 12px; letter-spacing: 0.18em; color: var(--umber); font-style: normal; text-transform: lowercase; font-variant: small-caps; } /* --- Chevron Rule Below Haiku --- */ .chevron-rule { position: absolute; top: 78%; left: 50%; transform: translateX(-50%); z-index: 2; } .chevron-ornament { display: block; font-size: 8px; letter-spacing: 0.5em; color: rgba(196, 82, 26, 0.45); text-align: center; } /* ============================================================ Section III — Kōan (The Question) ============================================================ */ .section-koan { background-color: var(--antique-cream); display: grid; grid-template-columns: var(--corridor-width) 1fr 1fr; } /* Left prose column (cols 5-8) */ .koan-prose { grid-column: 2; padding: 0 3rem 0 2rem; padding-top: 20%; max-width: 100%; z-index: 2; position: relative; } .section-heading { font-family: var(--font-display); font-style: italic; font-size: 64px; font-weight: 400; color: var(--deep-ink); line-height: 1.1; margin-bottom: 2rem; letter-spacing: -0.01em; } .prose-body { font-family: var(--font-body); font-weight: 300; font-size: 16px; color: var(--deep-ink); line-height: 2; max-width: 42ch; margin-bottom: 1.5em; letter-spacing: 0.02em; } .koan-ornament { margin-top: 2rem; } .chevron-ornament-small { font-size: 7px; letter-spacing: 0.45em; color: rgba(196, 82, 26, 0.50); } /* Right bamboo blur panel (cols 9-12) */ .bamboo-panel { grid-column: 3; position: relative; height: 100%; background: linear-gradient( to bottom, var(--aged-vellum) 0%, var(--gilded-ochre) 50%, var(--umber) 100% ); overflow: hidden; } /* Bamboo stalk stripes via pseudo-element */ .bamboo-stripes { position: absolute; inset: 0; background: repeating-linear-gradient( to right, rgba(26, 18, 8, 0.06) 0px, rgba(26, 18, 8, 0.06) 1px, transparent 1px, transparent 13px ); filter: blur(3px); } /* ============================================================ Section IV — Tsuki (Moon) ============================================================ */ .section-tsuki { background-color: var(--deep-ink); } /* --- Cloud Arcs SVG --- */ .cloud-arcs { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } .cloud-arc { opacity: 0.20; filter: blur(8px); } /* --- Moon Circle --- */ .moon { position: absolute; top: 35%; left: 58%; width: 200px; height: 200px; background: radial-gradient(circle, var(--burnt-lacquer) 0%, var(--umber) 100%); border-radius: 50%; transform: translate(-50%, -50%); z-index: 3; animation: moon-drift 60s ease-in-out infinite alternate; } @keyframes moon-drift { from { transform: translate(-50%, -50%) translateY(0); } to { transform: translate(-50%, -50%) translateY(4px); } } /* Moon ring divs (concentric, Art Deco phases) */ .moon-ring { position: absolute; border-radius: 50%; border: 0.5px solid rgba(245, 235, 216, 0.30); top: 50%; left: 50%; transform: translate(-50%, -50%); } .moon-ring-1 { width: 160px; height: 160px; } .moon-ring-2 { width: 120px; height: 120px; } .moon-ring-3 { width: 80px; height: 80px; } .moon-ring-4 { width: 40px; height: 40px; } /* --- Tsuki Text (top-left, starting from corridor edge) --- */ .tsuki-text { position: absolute; top: 10%; left: var(--content-start); padding-left: 2rem; z-index: 4; } .section-heading-light { color: var(--antique-cream); } .tsuki-subtitle { font-family: var(--font-body); font-weight: 200; font-size: 12px; letter-spacing: 0.25em; color: rgba(245, 235, 216, 0.55); text-transform: lowercase; font-variant: small-caps; margin-top: 0.3rem; } /* ============================================================ Section V — Owari (The End) ============================================================ */ .section-owari { background-color: var(--antique-cream); } /* Content anchored to bottom 28% */ .owari-content { position: absolute; bottom: 28%; left: var(--content-start); right: 4rem; padding-left: 2rem; z-index: 2; } .owari-line { font-family: var(--font-body); font-weight: 300; font-size: 15px; letter-spacing: 0.08em; color: var(--sable); line-height: 3; } .owari-chevrons { margin-top: 1rem; } .owari-chevrons span { font-size: 10px; letter-spacing: 0.5em; color: rgba(196, 82, 26, 0.40); display: block; } /* Diamond terminal for vertical hairline (bottom-right) */ .hairline-terminal-diamond { position: absolute; right: calc(2.5rem - 5px); bottom: 1rem; z-index: 200; pointer-events: none; } /* ============================================================ Shared Typography ============================================================ */ blockquote { border: none; } /* ============================================================ Scroll Indicator (optional subtle cue) ============================================================ */ .section-arrival::after { content: '↓'; position: absolute; bottom: 2rem; left: calc(var(--content-start) + 2rem); font-family: var(--font-body); font-weight: 200; font-size: 11px; letter-spacing: 0.2em; color: rgba(196, 82, 26, 0.35); z-index: 5; animation: scroll-cue 3s ease-in-out infinite; } @keyframes scroll-cue { 0%, 100% { opacity: 0.35; transform: translateY(0); } 50% { opacity: 0.70; transform: translateY(4px); } }