/* ======================================================================= bada.coffee — Victorian Maritime Herbarium Parchment-to-ocean immersive scroll Interpolate the `` background-color from `#F0E6D3` (parchment using IntersectionObserver IntersectionObserver` as the user scrolls. IntersectionObserver` with `threshold: 0.15` adds the `.visible` class when elements enter the viewport. Each sibling receives an incrementing `--stagger-index` value. ======================================================================= */ :root { /* Chrome-Metallic Maritime palette */ --parchment: #F0E6D3; --deep-ocean: #0A1628; --tarnished-silver: #8A9BAE; --verdigris: #5B8C7E; --copper: #B87333; --ink: #1C1A17; --cream: #FAF6EF; --bioluminescent: #1A4D5C; --photo-base: #8A7B6B; --photo-warm: #D4A574; --photo-shadow: #6B4E37; /* Typefaces */ --font-display: "Cormorant Garamond", "Lora", Georgia, serif; --font-sc: "Cormorant SC", "Cormorant Garamond", Georgia, serif; --font-body: "Libre Baskerville", "Lora", Georgia, serif; --font-kr: "Noto Serif KR", "Cormorant Garamond", serif; /* Active color state (JS-driven scroll transition) */ --bg-current: var(--parchment); --text-current: var(--ink); --accent-current: var(--copper); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: auto; } body { font-family: var(--font-body); font-size: clamp(1rem, 1.2vw, 1.25rem); line-height: 1.9; letter-spacing: 0.01em; color: var(--text-current); background-color: var(--bg-current); overflow-x: hidden; position: relative; transition: background-color 80ms linear, color 80ms linear; } /* Paper grain overlay across the entire page */ body::after { content: ""; position: fixed; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml;utf8,"); opacity: 0.22; mix-blend-mode: multiply; z-index: 9999; } .journal { position: relative; width: 100%; overflow-x: hidden; } /* ======================================================================= Shared Chapter Shell ======================================================================= */ .chapter { position: relative; width: 100%; padding: 0 clamp(24px, 5vw, 80px); } .chapter-heading { text-align: center; max-width: 680px; margin: 0 auto 80px; padding-top: 160px; } .chapter-label { font-family: var(--font-sc); font-size: 0.85rem; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--copper); margin-bottom: 24px; } .chapter-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.8rem, 4vw, 3.5rem); letter-spacing: 0.04em; line-height: 1.1; margin-bottom: 32px; } .chapter-flourish { font-style: italic; font-size: clamp(0.95rem, 1.1vw, 1.1rem); opacity: 0.85; max-width: 560px; margin: 0 auto; line-height: 1.75; } /* ======================================================================= Chapter I — The Surface ======================================================================= */ .chapter-surface { min-height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: clamp(80px, 12vh, 160px) clamp(24px, 5vw, 80px); position: relative; background: radial-gradient(ellipse at center, rgba(240, 230, 211, 0.6) 0%, rgba(240, 230, 211, 0.1) 80%), repeating-linear-gradient(180deg, rgba(28, 26, 23, 0.02) 0 2px, transparent 2px 8px); } .surface-inner { position: relative; width: min(880px, 92vw); padding: clamp(40px, 8vh, 96px) clamp(24px, 6vw, 80px); text-align: center; isolation: isolate; } .filigree-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; } .filigree-path { stroke-dasharray: 4000; stroke-dashoffset: 4000; animation: filigree-draw 2.5s cubic-bezier(0.65, 0, 0.35, 1) 0.5s forwards; } @keyframes filigree-draw { to { stroke-dashoffset: 0; } } .wordmark { font-family: var(--font-display); font-weight: 700; font-size: clamp(3rem, 12vw, 8rem); line-height: 1; letter-spacing: 0.08em; color: var(--ink); margin-bottom: 20px; background: linear-gradient(180deg, var(--ink) 0%, #3a322b 60%, var(--ink) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0; animation: fade-rise 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.2s forwards; } .wordmark-kr { font-family: var(--font-kr); font-weight: 500; font-size: clamp(1.2rem, 2.4vw, 1.8rem); letter-spacing: 0.3em; color: var(--copper); margin-bottom: 40px; opacity: 0; animation: fade-rise 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.6s forwards; } .hero-rule { color: var(--copper); opacity: 0; animation: fade-rise 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 2s forwards; max-width: 360px; margin: 0 auto 32px; } .hero-legend { font-family: var(--font-sc); font-size: 0.85rem; letter-spacing: 0.22em; line-height: 2; color: var(--ink); opacity: 0; animation: fade-rise 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 2.2s forwards; } .hero-legend-sc { font-style: italic; letter-spacing: 0.15em; color: var(--verdigris); } @keyframes fade-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .scroll-hint { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); font-family: var(--font-sc); font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--copper); display: flex; flex-direction: column; align-items: center; gap: 10px; opacity: 0; animation: fade-rise 1.4s ease 2.8s forwards, scroll-bob 2.4s ease-in-out 4s infinite; } @keyframes scroll-bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } } /* ======================================================================= Stagger system ======================================================================= */ .stagger-item { opacity: 0; transform: translateY(40px); transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-delay: calc(var(--stagger-index, 0) * 200ms); will-change: transform, opacity; } .stagger-item.visible { opacity: 1; transform: translateY(0); } .stagger-item.from-left { transform: translateX(-60px) translateY(20px); } .stagger-item.from-right { transform: translateX(60px) translateY(20px); } .stagger-item.from-bottom{ transform: translateY(80px); } .stagger-item.from-left.visible, .stagger-item.from-right.visible, .stagger-item.from-bottom.visible { transform: translate(0, 0); } /* Reveal-line for Chapter III */ .reveal-line { opacity: 0; transform: translateY(24px); transition: opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: transform, opacity; } .reveal-line.visible { opacity: 1; transform: translateY(0); } /* ======================================================================= Chapter II — The Voyage ======================================================================= */ .chapter-voyage { padding-bottom: 160px; } .specimen-field { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: clamp(48px, 6vw, 112px); max-width: 1200px; margin: 0 auto; padding: 40px 0 80px; } .specimen-card { position: relative; width: 280px; min-height: 520px; background: rgba(250, 246, 239, 0.55); padding: 24px 22px 32px; border: 1px solid rgba(184, 115, 51, 0.35); box-shadow: 0 1px 0 rgba(184, 115, 51, 0.3) inset, 0 0 0 4px rgba(240, 230, 211, 0.6), 0 0 0 5px rgba(138, 155, 174, 0.35), 0 18px 40px -24px rgba(10, 22, 40, 0.4); } .specimen-card:nth-child(2) { transform: translateY(60px); } .specimen-card:nth-child(2).visible { transform: translateY(60px); } .corner-ornament { position: absolute; width: 22px; height: 22px; border: 1px solid var(--copper); opacity: 0.85; pointer-events: none; } .corner-ornament.tl { top: -6px; left: -6px; border-right: none; border-bottom: none; } .corner-ornament.tr { top: -6px; right: -6px; border-left: none; border-bottom: none; } .corner-ornament.bl { bottom: -6px; left: -6px; border-right: none; border-top: none; } .corner-ornament.br { bottom: -6px; right: -6px; border-left: none; border-top: none; } .corner-ornament::before { content: ""; position: absolute; inset: 4px; border: 0.5px solid var(--verdigris); opacity: 0.6; } .corner-ornament.tl::before { border-right: none; border-bottom: none; } .corner-ornament.tr::before { border-left: none; border-bottom: none; } .corner-ornament.bl::before { border-right: none; border-top: none; } .corner-ornament.br::before { border-left: none; border-top: none; } .vintage-photo { width: 100%; aspect-ratio: 3 / 4; position: relative; background: url("data:image/svg+xml;utf8,"), linear-gradient(to bottom, var(--photo-warm), var(--photo-shadow)); background-blend-mode: multiply, normal; background-size: 200px 200px, cover; box-shadow: inset 0 0 80px rgba(10, 22, 40, 0.55), inset 0 0 12px rgba(10, 22, 40, 0.3); filter: contrast(0.9) brightness(0.95) sepia(0.15); border-radius: 2px; margin-bottom: 24px; overflow: hidden; } .vintage-photo.variant-b { background: url("data:image/svg+xml;utf8,"), linear-gradient(to bottom, #C89A68, #5D3E2A); background-blend-mode: multiply, normal; background-size: 200px 200px, cover; } .vintage-photo.variant-c { background: url("data:image/svg+xml;utf8,"), linear-gradient(to bottom, #D8B084, #6B4E37); background-blend-mode: multiply, normal; background-size: 200px 200px, cover; } /* Vignette via pseudo */ .vintage-photo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 40%, rgba(10, 22, 40, 0.55) 100%); pointer-events: none; } /* Scratches via pseudo */ .vintage-photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(92deg, transparent 40%, rgba(250, 246, 239, 0.18) 40.2%, transparent 40.5%), linear-gradient(88deg, transparent 70%, rgba(250, 246, 239, 0.12) 70.15%, transparent 70.4%), linear-gradient(95deg, transparent 20%, rgba(250, 246, 239, 0.08) 20.1%, transparent 20.3%); pointer-events: none; mix-blend-mode: screen; } .botanical { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.92; } .specimen-index { font-family: var(--font-sc); font-size: 0.75rem; letter-spacing: 0.3em; color: var(--copper); margin-bottom: 8px; } .specimen-name { font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; line-height: 1.2; letter-spacing: 0.04em; color: var(--ink); margin-bottom: 6px; } .specimen-origin { font-family: var(--font-sc); font-size: 0.8rem; letter-spacing: 0.22em; color: var(--verdigris); margin-bottom: 14px; } .mini-rule { width: 100%; height: 14px; color: var(--tarnished-silver); display: block; margin-bottom: 14px; } .specimen-notes { font-family: var(--font-body); font-style: italic; font-size: 0.92rem; line-height: 1.7; color: var(--ink); opacity: 0.88; } /* ======================================================================= Chapter III — The Depths ======================================================================= */ .chapter-depths { position: relative; padding-top: 120px; padding-bottom: 220px; min-height: 160vh; overflow: hidden; } .depths-heading { margin-bottom: 120px; } .depths-column { max-width: 680px; margin: 0 auto; text-align: center; position: relative; z-index: 2; display: flex; flex-direction: column; gap: 56px; padding: 0 16px; } .depth-verse { font-family: var(--font-body); font-size: 1.4rem; line-height: 1.9; letter-spacing: 0.01em; color: currentColor; } .depth-verse.italic { font-family: var(--font-display); font-style: italic; font-size: 1.7rem; color: var(--copper); } .depths-column .ornamental-rule { align-self: center; color: var(--tarnished-silver); width: min(400px, 80%); height: auto; } .seaweed { position: absolute; top: 0; height: 100%; width: clamp(60px, 8vw, 140px); pointer-events: none; z-index: 1; opacity: 0.6; } .seaweed-left { left: 0; } .seaweed-right { right: 0; transform: scaleX(-1); } .seaweed-path { stroke-dasharray: 2000; stroke-dashoffset: 2000; transition: stroke-dashoffset 2.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .seaweed.drawn .seaweed-path { stroke-dashoffset: 0; } /* ======================================================================= Chapter IV — The Collection ======================================================================= */ .chapter-collection { padding: 120px 0 200px; position: relative; } .collection-heading { margin-bottom: 120px; padding: 0 clamp(24px, 5vw, 80px); } .apothecary-label { position: relative; width: 100%; min-height: 70vh; display: grid; grid-template-columns: 1fr; place-items: center; padding: clamp(40px, 6vh, 96px) clamp(24px, 5vw, 80px); margin-bottom: 100px; isolation: isolate; background: radial-gradient(ellipse at center, rgba(26, 77, 92, 0.35) 0%, rgba(10, 22, 40, 0) 70%), radial-gradient(ellipse at 20% 80%, rgba(91, 140, 126, 0.15) 0%, transparent 60%); } .cartouche { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(960px, 92vw); height: min(560px, 78vh); pointer-events: none; z-index: 1; filter: drop-shadow(0 0 24px rgba(184, 115, 51, 0.15)); } .label-content { position: relative; z-index: 2; text-align: center; max-width: 560px; padding: 40px 28px; color: var(--cream); } .label-kicker { font-family: var(--font-sc); font-size: 0.8rem; letter-spacing: 0.3em; color: var(--copper); margin-bottom: 18px; } .label-name { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1.1; letter-spacing: 0.04em; color: var(--cream); margin-bottom: 28px; } .medallion { width: clamp(110px, 14vw, 160px); height: clamp(110px, 14vw, 160px); margin: 0 auto 28px; animation: medallion-rotate 90s linear infinite; } .medallion svg { width: 100%; height: 100%; display: block; } @keyframes medallion-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .label-notes { font-family: var(--font-body); font-size: 1rem; line-height: 1.85; color: var(--cream); opacity: 0.92; margin-bottom: 20px; } .label-notes em { font-style: italic; color: var(--verdigris); letter-spacing: 0.05em; } .label-meta { font-family: var(--font-sc); font-size: 0.78rem; letter-spacing: 0.24em; color: var(--tarnished-silver); } /* ======================================================================= Chapter V — The Harbor ======================================================================= */ .chapter-harbor { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 160px clamp(24px, 5vw, 80px) 120px; background: radial-gradient(ellipse at center, rgba(240, 230, 211, 0.8) 0%, rgba(240, 230, 211, 0.2) 70%), repeating-linear-gradient(180deg, rgba(28, 26, 23, 0.02) 0 2px, transparent 2px 8px); } .harbor-inner { max-width: 680px; text-align: center; } .harbor-rule-top, .harbor-rule-bottom { color: var(--copper); width: min(400px, 80%); height: auto; margin: 0 auto 48px; display: block; } .harbor-rule-bottom { margin: 56px auto 48px; } .harbor-kicker { font-family: var(--font-sc); font-size: 0.82rem; letter-spacing: 0.3em; color: var(--verdigris); margin-bottom: 24px; } .harbor-wordmark { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 7vw, 5rem); letter-spacing: 0.08em; line-height: 1; color: var(--ink); margin-bottom: 28px; } .harbor-invite { font-family: var(--font-display); font-style: italic; font-size: clamp(1.15rem, 1.6vw, 1.5rem); letter-spacing: 0.04em; color: var(--ink); margin-bottom: 18px; } .harbor-kr { font-family: var(--font-kr); font-weight: 500; font-size: 1.05rem; letter-spacing: 0.12em; color: var(--copper); } .harbor-colophon { font-family: var(--font-sc); font-size: 0.75rem; letter-spacing: 0.32em; color: var(--tarnished-silver); } /* ======================================================================= Responsive refinements ======================================================================= */ @media (max-width: 820px) { .specimen-field { flex-direction: column; align-items: center; gap: 72px; padding: 24px 0 48px; } .specimen-card:nth-child(2) { transform: none; } .specimen-card:nth-child(2).visible { transform: none; } .depth-verse { font-size: 1.15rem; line-height: 1.85; } .seaweed { width: 40px; opacity: 0.35; } .apothecary-label { min-height: auto; padding: 64px 24px; } .cartouche { width: 96vw; height: 96%; } .chapter-heading { padding-top: 120px; margin-bottom: 56px; } } @media (max-width: 520px) { .wordmark { letter-spacing: 0.05em; } .filigree-frame { display: none; } .scroll-hint { font-size: 0.62rem; } .depths-column { gap: 40px; } .chapter-depths { padding-bottom: 140px; } .seaweed { display: none; } } /* reduce motion */ @media (prefers-reduced-motion: reduce) { .filigree-path { animation: none; stroke-dashoffset: 0; } .medallion { animation: none; } .scroll-hint { animation: none; } .stagger-item, .reveal-line { transition: none; } }