/* ============ BONIN BLUE — Ogasawara Marine Adventure Park ============ */ :root { /* Bonin Blue palette — casual/cheerful day mode */ --ink: #0a1a2a; --ink-2: #13283d; --deep: #062036; --abyss: #02101f; --bonin: #0b6fb0; --bonin-bright: #2fa0dc; --lagoon: #5ac8cc; --shallow: #b8ead9; --sand: #fde9b8; --cream: #fff5de; --paper: #fffcf3; --coral: #ff7a52; --sunrise: #ffc94a; --pink: #ff93b0; --white: #ffffff; --accent: var(--coral); /* type — rounder & friendlier */ --serif: "Zen Maru Gothic", "Shippori Mincho", "Noto Serif JP", ui-serif, serif; --sans: "Zen Maru Gothic", "Noto Sans JP", system-ui, sans-serif; --display: "Zen Maru Gothic", "M PLUS Rounded 1c", "Noto Sans JP", sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace; /* rhythm */ --maxw: 1400px; --gutter: clamp(20px, 4vw, 56px); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--sans); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "palt"; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; } /* Mode variants applied on */ html[data-mode="night"] { --paper: #04131f; --cream: #07233b; --sand: #0a2d49; --ink: #eaf3ff; --ink-2: #b9d2ea; --bonin: #6bb4e3; --bonin-bright: #9cd3f5; --lagoon: #2f91a3; --coral: #ffb08a; } html[data-mode="abyss"] { --paper: #020812; --cream: #050f1c; --sand: #071428; --ink: #dfeaff; --ink-2: #8fb0d4; --bonin: #2e7cb5; --bonin-bright: #54a8e3; --lagoon: #17546b; --coral: #ff7a4a; --sunrise: #ffd27a; } /* ========== utilities ========== */ .container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); } .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; } .serif { font-family: var(--serif); } .eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bonin); font-weight: 500; } .tick::before { content: ""; display: inline-block; width: 22px; height: 1px; background: currentColor; vertical-align: middle; margin-right: 10px; opacity: .6; } .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; font-family: var(--sans); font-weight: 600; font-size: 13px; letter-spacing: 0.04em; transition: transform .2s ease, background .2s; white-space: nowrap; } .btn-primary { background: var(--coral); color: #fff; } .btn-primary:hover { transform: translateY(-1px); background: #d85636; } .btn-ghost { border: 1px solid currentColor; } .btn-dark { background: var(--ink); color: var(--paper); } /* ========== Top announcement bar ========== */ .ticker { background: var(--abyss); color: var(--shallow); font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; padding: 9px 0; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.06); } .ticker-track { display: flex; gap: 60px; white-space: nowrap; animation: ticker 60s linear infinite; } .ticker-item { display: flex; align-items: center; gap: 12px; } .ticker-item .dot { width: 6px; height: 6px; background: var(--coral); border-radius: 50%; } @keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ========== Nav ========== */ .nav { position: sticky; top: 0; z-index: 50; background: rgba(251,247,236,.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(10,26,42,.08); } html[data-mode="night"] .nav, html[data-mode="abyss"] .nav { background: rgba(4,19,31,.82); border-bottom-color: rgba(255,255,255,.08); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; } .brand { display: flex; align-items: center; gap: 14px; font-family: var(--serif); } .brand-mark { width: 42px; height: 42px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--lagoon), var(--bonin) 45%, var(--abyss) 100%); position: relative; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 6px 18px rgba(11,79,122,.35); } .brand-mark::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: radial-gradient(circle at 60% 70%, rgba(255,255,255,.35), transparent 50%); } .brand-name { display: flex; flex-direction: column; line-height: 1.05; } .brand-name .jp { font-size: 11px; letter-spacing: .4em; color: var(--bonin); font-family: var(--sans); font-weight: 500; } .brand-name .en { font-size: 20px; letter-spacing: 0.08em; font-weight: 500; } .nav-links { display: flex; gap: 32px; align-items: center; } .nav-links a { font-size: 13px; font-weight: 500; position: relative; } .nav-links a:hover { color: var(--bonin); } .nav-links a.has-sub::after { content: " ▾"; opacity: .4; font-size: 9px; } .nav-right { display: flex; gap: 12px; align-items: center; } .nav-lang { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; opacity: .7; } @media (max-width: 960px) { .nav-links { display: none; } } /* ========== Hero ========== */ .hero { position: relative; min-height: 92vh; background: radial-gradient(ellipse at 50% 0%, rgba(90,200,204,.3), transparent 60%), linear-gradient(180deg, #0f4a75 0%, #062036 60%, #02101f 100%); overflow: hidden; color: #eaf3ff; display: flex; flex-direction: column; padding-top: 80px; padding-bottom: 120px; } html[data-mode="night"] .hero { background: radial-gradient(ellipse at 50% -10%, rgba(70,130,200,.35), transparent 70%), linear-gradient(180deg, #041830 0%, #02101f 50%, #01070f 100%); } html[data-mode="abyss"] .hero { background: linear-gradient(180deg, #021229 0%, #010812 50%, #000408 100%); } /* Animated sun rays & light shafts */ .hero-lights { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .light-shaft { position: absolute; top: -20%; width: 180px; height: 140%; background: linear-gradient(180deg, rgba(180,230,255,.22), rgba(180,230,255,0) 70%); filter: blur(24px); transform-origin: top center; animation: shaft 14s ease-in-out infinite; mix-blend-mode: screen; } .light-shaft:nth-child(1) { left: 8%; transform: rotate(-6deg); animation-delay: 0s; } .light-shaft:nth-child(2) { left: 32%; transform: rotate(4deg); animation-delay: 3s; width: 240px; opacity: .6; } .light-shaft:nth-child(3) { left: 62%; transform: rotate(-3deg); animation-delay: 6s; width: 160px; } .light-shaft:nth-child(4) { left: 82%; transform: rotate(7deg); animation-delay: 9s; width: 220px; opacity: .5; } @keyframes shaft { 0%, 100% { opacity: .5; transform: translateX(0) rotate(var(--r, 0deg)); } 50% { opacity: .85; transform: translateX(20px) rotate(var(--r, 0deg)); } } /* Floating particles (plankton) */ .particles { position: absolute; inset: 0; pointer-events: none; } .particles span { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: rgba(180, 230, 255, .7); box-shadow: 0 0 6px rgba(180, 230, 255, .5); animation: drift linear infinite; } @keyframes drift { from { transform: translate(0, 100vh); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } to { transform: translate(60px, -20vh); opacity: 0; } } /* Hero content */ .hero-inner { position: relative; z-index: 2; flex: 1; display: grid; grid-template-rows: auto 1fr auto; gap: 40px; max-width: var(--maxw); width: 100%; margin: 0 auto; padding: 0 var(--gutter); } .hero-meta { display: flex; justify-content: space-between; align-items: flex-start; font-family: var(--mono); font-size: 11px; letter-spacing: .15em; opacity: .85; padding-top: 8px; } .hero-meta .col { display: flex; flex-direction: column; gap: 4px; } .hero-meta .col .label { opacity: .6; font-size: 10px; } .hero-center { display: flex; flex-direction: column; justify-content: center; gap: 28px; } .hero-title-jp { font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 6.2vw, 96px); line-height: 1.12; letter-spacing: 0.02em; margin: 0; text-wrap: balance; } .hero-title-jp .accent { color: var(--lagoon); font-style: italic; } .hero-title-en { font-family: var(--mono); font-size: 12px; letter-spacing: 0.35em; color: var(--lagoon); text-transform: uppercase; } .hero-sub { max-width: 560px; font-size: 15px; line-height: 1.9; color: #cfe0f2; font-weight: 400; } .hero-cta-row { display: flex; gap: 14px; flex-wrap: wrap; } .hero-foot { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.12); } .hero-foot .stat { display: flex; flex-direction: column; gap: 6px; } .hero-foot .stat .v { font-family: var(--serif); font-size: clamp(28px, 3.4vw, 44px); color: #fff; line-height: 1; } .hero-foot .stat .l { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; opacity: .6; text-transform: uppercase; } @media (max-width: 720px) { .hero-foot { grid-template-columns: repeat(2, 1fr); } .hero-meta { flex-direction: column; gap: 16px; } } /* Depth meter on right edge */ .depth-meter { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); z-index: 3; font-family: var(--mono); font-size: 9px; letter-spacing: .2em; color: rgba(255,255,255,.45); display: flex; flex-direction: column; gap: 22px; align-items: flex-end; } .depth-meter .tick { display: flex; align-items: center; gap: 8px; } .depth-meter .tick::before { content: ""; width: 20px; height: 1px; background: rgba(255,255,255,.25); margin-right: 0; } .depth-meter .tick.active { color: var(--lagoon); } .depth-meter .tick.active::before { background: var(--lagoon); } @media (max-width: 960px) { .depth-meter { display: none; } } /* ========== Today Strip (today's info) ========== */ .today { background: var(--ink); color: var(--paper); padding: 24px 0; border-top: 4px solid var(--coral); } .today-inner { display: grid; grid-template-columns: auto repeat(5, 1fr) auto; gap: 28px; align-items: center; } .today .label-block { display: flex; flex-direction: column; gap: 4px; } .today .lbl { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; opacity: .6; text-transform: uppercase; } .today .val { font-family: var(--serif); font-size: 22px; line-height: 1.1; } .today .val.time { font-family: var(--mono); letter-spacing: .02em; } .crowd-chip { display: inline-flex; align-items: center; gap: 8px; padding: 3px 10px; border-radius: 999px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; background: rgba(255,255,255,.08); } .crowd-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: #3ad48a; } .crowd-chip.med .dot { background: var(--sunrise); } .crowd-chip.hi .dot { background: var(--coral); } @media (max-width: 960px) { .today-inner { grid-template-columns: repeat(3, 1fr); } .today-inner > *:last-child { grid-column: 1 / -1; } } @media (max-width: 560px) { .today-inner { grid-template-columns: repeat(2, 1fr); } } /* ========== Sections ========== */ .section { padding: 120px 0; position: relative; } .section-head { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; margin-bottom: 64px; } .section-head h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 4.4vw, 64px); line-height: 1.1; margin: 16px 0 0; text-wrap: balance; } .section-head .en { font-family: var(--mono); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--bonin); } .section-head .desc { max-width: 420px; font-size: 14px; line-height: 1.8; color: var(--ink-2); } /* Areas grid (5 themed areas) */ .areas { background: var(--cream); position: relative; overflow: hidden; } .areas-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: 360px 360px; gap: 14px; } .area-card { position: relative; border-radius: 4px; overflow: hidden; cursor: pointer; transition: transform .5s cubic-bezier(.2,.8,.2,1); } .area-card:nth-child(1) { grid-row: span 2; } .area-card .art { position: absolute; inset: 0; transition: transform .8s cubic-bezier(.2,.8,.2,1); } .area-card:hover .art { transform: scale(1.06); } .area-card .shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(2,16,31,.85) 100%); } .area-card .meta { position: absolute; left: 28px; right: 28px; bottom: 26px; color: #fff; z-index: 2; } .area-card .num { font-family: var(--mono); font-size: 10px; letter-spacing: .25em; opacity: .7; margin-bottom: 10px; display: block; } .area-card h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2.4vw, 34px); line-height: 1.15; margin: 0 0 6px; } .area-card .area-en { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; opacity: .8; margin-bottom: 14px; } .area-card .desc { font-size: 12px; line-height: 1.7; opacity: .85; max-width: 340px; transform: translateY(10px); opacity: 0; transition: transform .4s, opacity .4s; } .area-card:hover .desc { transform: translateY(0); opacity: .9; } .area-card .coord { position: absolute; top: 20px; right: 24px; font-family: var(--mono); font-size: 9px; letter-spacing: .2em; color: rgba(255,255,255,.7); } .area-card .tag-row { position: absolute; top: 20px; left: 24px; display: flex; gap: 6px; } .area-card .tag { font-family: var(--mono); font-size: 9px; letter-spacing: .15em; padding: 4px 9px; border-radius: 999px; background: rgba(255,255,255,.15); color: #fff; backdrop-filter: blur(8px); } @media (max-width: 900px) { .areas-grid { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 280px); } .area-card:nth-child(1) { grid-row: auto; grid-column: span 2; } } @media (max-width: 540px) { .areas-grid { grid-template-columns: 1fr; grid-template-rows: repeat(5, 260px); } .area-card:nth-child(1) { grid-column: auto; } } /* ========== Attractions ========== */ .attractions { background: var(--paper); } .attract-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; } .attract-card { position: relative; cursor: pointer; } .attract-card:nth-child(1) { grid-column: span 7; } .attract-card:nth-child(2) { grid-column: span 5; } .attract-card:nth-child(3) { grid-column: span 4; } .attract-card:nth-child(4) { grid-column: span 4; } .attract-card:nth-child(5) { grid-column: span 4; } .attract-art { position: relative; aspect-ratio: 4 / 3; border-radius: 4px; overflow: hidden; margin-bottom: 18px; background: var(--ink); } .attract-card:nth-child(1) .attract-art { aspect-ratio: 16/10; } .attract-card:nth-child(2) .attract-art { aspect-ratio: 10/13; } .attract-art .art { position: absolute; inset: 0; transition: transform 1s cubic-bezier(.2,.8,.2,1); } .attract-card:hover .attract-art .art { transform: scale(1.05); } .attract-badge { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.9); backdrop-filter: blur(8px); font-family: var(--mono); font-size: 10px; letter-spacing: .15em; color: var(--ink); } .attract-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--coral); } .attract-badge.new { background: var(--coral); color: #fff; } .attract-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 6px; } .attract-meta .cat { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--bonin); text-transform: uppercase; } .attract-meta .wait { font-family: var(--mono); font-size: 11px; color: var(--ink-2); } .attract-card h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(20px, 2vw, 28px); line-height: 1.2; margin: 4px 0 6px; letter-spacing: 0.01em; } .attract-card .sub { font-family: var(--mono); font-size: 10px; letter-spacing: .15em; color: var(--ink-2); margin-bottom: 10px; text-transform: uppercase; } .attract-card .desc { font-size: 13px; line-height: 1.8; color: var(--ink-2); max-width: 480px; } .attract-card .specs { display: flex; gap: 18px; margin-top: 14px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--ink-2); opacity: .7; } .attract-card .specs span::before { content: "◇ "; color: var(--bonin); } @media (max-width: 960px) { .attract-grid { grid-template-columns: repeat(6, 1fr); } .attract-card:nth-child(1), .attract-card:nth-child(2) { grid-column: span 6; } .attract-card:nth-child(3), .attract-card:nth-child(4), .attract-card:nth-child(5) { grid-column: span 3; } } @media (max-width: 560px) { .attract-card { grid-column: span 6 !important; } } /* ========== Schedule ========== */ .schedule { background: var(--ink); color: var(--paper); position: relative; overflow: hidden; } .schedule::before { content: ""; position: absolute; top: -50%; right: -20%; width: 800px; height: 800px; border-radius: 50%; background: radial-gradient(circle, rgba(91,200,204,.1), transparent 60%); pointer-events: none; } .schedule .section-head h2 { color: var(--paper); } .schedule .section-head .desc { color: rgba(255,255,255,.7); } .sch-tabs { display: flex; gap: 4px; margin-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.1); } .sch-tab { padding: 14px 24px; font-family: var(--mono); font-size: 11px; letter-spacing: .18em; border-bottom: 2px solid transparent; margin-bottom: -1px; color: rgba(255,255,255,.5); text-transform: uppercase; transition: color .2s, border-color .2s; } .sch-tab.active { color: var(--coral); border-bottom-color: var(--coral); } .sch-tab:hover { color: var(--paper); } .sch-row { display: grid; grid-template-columns: 110px 1fr 1fr 160px; gap: 32px; padding: 28px 0; border-bottom: 1px solid rgba(255,255,255,.08); align-items: center; transition: background .2s; } .sch-row:hover { background: rgba(255,255,255,.02); } .sch-time { font-family: var(--mono); font-size: 20px; letter-spacing: .04em; color: var(--lagoon); } .sch-title { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.2; } .sch-title .en { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-top: 4px; } .sch-loc { font-family: var(--sans); font-size: 12px; color: rgba(255,255,255,.7); } .sch-loc::before { content: "◇ "; color: var(--lagoon); } .sch-dur { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: rgba(255,255,255,.6); text-align: right; } .sch-dur .remaining { display: block; color: var(--coral); font-size: 10px; margin-top: 4px; } @media (max-width: 720px) { .sch-row { grid-template-columns: 80px 1fr; gap: 16px; } .sch-loc, .sch-dur { grid-column: 2; text-align: left; } } /* ========== Tickets ========== */ .tickets { background: var(--cream); } .tickets-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .ticket-card { background: var(--paper); padding: 36px 32px 28px; border-radius: 6px; position: relative; overflow: hidden; border: 1px solid rgba(11,79,122,.1); display: flex; flex-direction: column; transition: transform .3s, box-shadow .3s; } .ticket-card:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(11,79,122,.15); } .ticket-card.featured { background: var(--ink); color: var(--paper); border-color: transparent; } .ticket-card .band { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--bonin); } .ticket-card.featured .band { background: var(--coral); } .ticket-card .t-cat { font-family: var(--mono); font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: var(--bonin); margin-bottom: 18px; } .ticket-card.featured .t-cat { color: var(--coral); } .ticket-card h3 { font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.15; margin: 0 0 8px; } .ticket-card .t-sub { font-size: 13px; line-height: 1.7; color: var(--ink-2); margin-bottom: 28px; } .ticket-card.featured .t-sub { color: rgba(255,255,255,.7); } .ticket-card .price { font-family: var(--serif); font-size: 48px; line-height: 1; margin-bottom: 6px; } .ticket-card .price .yen { font-size: 18px; opacity: .6; margin-right: 4px; } .ticket-card .price .unit { font-size: 14px; font-family: var(--sans); opacity: .5; margin-left: 6px; } .ticket-card ul { list-style: none; padding: 0; margin: 24px 0; font-size: 13px; line-height: 1.6; flex: 1; } .ticket-card ul li { padding: 10px 0; border-top: 1px solid rgba(11,79,122,.12); display: flex; align-items: center; gap: 10px; } .ticket-card.featured ul li { border-color: rgba(255,255,255,.1); } .ticket-card ul li::before { content: "✓"; color: var(--bonin); font-size: 12px; } .ticket-card.featured ul li::before { color: var(--lagoon); } .ticket-card .t-btn { padding: 14px 0; text-align: center; border-radius: 999px; font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; background: var(--ink); color: var(--paper); margin-top: 8px; } .ticket-card.featured .t-btn { background: var(--coral); color: #fff; } @media (max-width: 800px) { .tickets-grid { grid-template-columns: 1fr; } } /* ========== Creatures (marine life showcase) ========== */ .creatures { background: var(--paper); padding: 140px 0; } .cr-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .cr-card { background: var(--cream); padding: 24px 20px; border-radius: 4px; transition: background .3s, transform .3s; cursor: pointer; border: 1px solid transparent; } .cr-card:hover { background: var(--ink); color: var(--paper); transform: translateY(-3px); } .cr-card:hover .cr-lat { color: var(--lagoon); } .cr-card .cr-svg { aspect-ratio: 1; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; } .cr-card h4 { font-family: var(--serif); font-weight: 400; font-size: 22px; margin: 0 0 4px; } .cr-lat { font-family: var(--serif); font-style: italic; font-size: 12px; color: var(--bonin); margin-bottom: 12px; } .cr-facts { display: flex; gap: 16px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; opacity: .7; margin-top: 10px; } .cr-facts div .fl { display: block; font-size: 9px; opacity: .6; margin-bottom: 2px; } @media (max-width: 900px) { .cr-grid { grid-template-columns: repeat(2, 1fr); } } /* ========== News ========== */ .news { background: var(--cream); } .news-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; } .news-list { display: flex; flex-direction: column; } .news-item { display: grid; grid-template-columns: 100px 80px 1fr; gap: 24px; padding: 22px 0; border-top: 1px solid rgba(11,79,122,.15); align-items: center; transition: padding .2s; } .news-item:hover { padding-left: 8px; } .news-item:last-child { border-bottom: 1px solid rgba(11,79,122,.15); } .news-date { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--ink-2); } .news-cat { font-family: var(--mono); font-size: 9px; letter-spacing: .15em; text-transform: uppercase; padding: 3px 8px; background: var(--ink); color: var(--paper); border-radius: 2px; display: inline-block; text-align: center; } .news-cat.evt { background: var(--coral); } .news-cat.svc { background: var(--bonin); } .news-title { font-family: var(--serif); font-size: 16px; line-height: 1.5; } .news-feature { background: var(--ink); color: var(--paper); padding: 48px 40px; border-radius: 4px; display: flex; flex-direction: column; justify-content: space-between; min-height: 500px; position: relative; overflow: hidden; } .news-feature .eyebrow { color: var(--lagoon); } .news-feature h3 { font-family: var(--serif); font-weight: 400; font-size: 36px; line-height: 1.2; margin: 16px 0; } .news-feature p { font-size: 14px; line-height: 1.9; color: rgba(255,255,255,.75); max-width: 420px; } .news-feature .meta-row { display: flex; gap: 20px; font-family: var(--mono); font-size: 10px; letter-spacing: .15em; color: rgba(255,255,255,.5); margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); } @media (max-width: 900px) { .news-grid { grid-template-columns: 1fr; } } /* ========== Access ========== */ .access { background: var(--ink); color: var(--paper); padding: 140px 0; } .access .section-head h2 { color: var(--paper); } .access-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: start; } .access-routes .route { padding: 24px 0; border-top: 1px solid rgba(255,255,255,.1); display: grid; grid-template-columns: 70px 1fr auto; gap: 24px; align-items: center; } .access-routes .route:last-child { border-bottom: 1px solid rgba(255,255,255,.1); } .route-icon { width: 52px; height: 52px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--lagoon); } .route-meta .t { font-family: var(--serif); font-size: 20px; } .route-meta .s { font-family: var(--mono); font-size: 10px; letter-spacing: .15em; color: rgba(255,255,255,.6); text-transform: uppercase; margin-top: 4px; } .route-dur { font-family: var(--mono); font-size: 13px; color: var(--lagoon); text-align: right; } .route-dur .l { display: block; font-size: 9px; color: rgba(255,255,255,.4); letter-spacing: .2em; margin-top: 4px; } .access-map { position: relative; background: var(--abyss); border: 1px solid rgba(255,255,255,.1); border-radius: 4px; padding: 32px; min-height: 420px; overflow: hidden; } .map-coord { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: rgba(255,255,255,.4); margin-bottom: 24px; } /* ========== Footer ========== */ .footer { background: var(--abyss); color: rgba(255,255,255,.7); padding: 80px 0 40px; } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 56px; } .footer h5 { font-family: var(--mono); font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: var(--lagoon); margin: 0 0 18px; font-weight: 500; } .footer ul { list-style: none; padding: 0; margin: 0; } .footer ul li { padding: 6px 0; font-size: 13px; } .footer ul li a:hover { color: var(--lagoon); } .footer .brand { color: #fff; margin-bottom: 20px; } .footer .tagline { font-family: var(--serif); font-size: 16px; line-height: 1.6; max-width: 320px; margin-bottom: 24px; color: rgba(255,255,255,.85); } .footer-bottom { display: flex; justify-content: space-between; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.08); font-family: var(--mono); font-size: 10px; letter-spacing: .15em; color: rgba(255,255,255,.4); } @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } } /* ========== Tweaks panel ========== */ .tweaks { position: fixed; right: 20px; bottom: 20px; z-index: 100; background: rgba(10,26,42,.96); color: #fff; border-radius: 12px; padding: 18px 20px; width: 260px; box-shadow: 0 20px 60px rgba(0,0,0,.3); font-family: var(--sans); display: none; border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(20px); } .tweaks.active { display: block; } .tweaks h6 { font-family: var(--mono); font-size: 10px; letter-spacing: .25em; margin: 0 0 14px; color: var(--lagoon); text-transform: uppercase; } .tweaks .row { margin-bottom: 16px; } .tweaks .row:last-child { margin-bottom: 0; } .tweaks .lbl { display: block; font-size: 11px; opacity: .7; margin-bottom: 8px; letter-spacing: .05em; } .tweaks .mode-row { display: flex; gap: 6px; } .tweaks .mode-btn { flex: 1; padding: 10px 0; border-radius: 6px; background: rgba(255,255,255,.08); font-size: 11px; letter-spacing: .1em; transition: background .2s; } .tweaks .mode-btn.active { background: var(--coral); color: #fff; } .tweaks .mode-btn:hover:not(.active) { background: rgba(255,255,255,.14); } /* scroll reveal */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; } .reveal.in { opacity: 1; transform: none; } /* ============ CASUAL + ANIMATIONS ============ */ /* rounder cards + buttons */ .btn { border-radius: 999px; font-weight: 700; } .btn-primary { box-shadow: 0 8px 20px rgba(255,122,82,.35); } .btn-primary:hover { background: #ff6a3f; transform: translateY(-2px) scale(1.02); } .ticket-card { border-radius: 20px; } .attract-art { border-radius: 18px; } .area-card { border-radius: 18px; } .news-feature { border-radius: 20px; } .access-map { border-radius: 18px; } .brand-mark { animation: bobbrand 3.5s ease-in-out infinite; } @keyframes bobbrand { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-3px) rotate(-6deg); } } .brand-name .en { font-family: var(--display); font-weight: 700; letter-spacing: .06em; } .brand-name .jp { letter-spacing: .25em; } /* friendly wavy underline on nav hover */ .nav-links a { transition: color .2s; padding-bottom: 3px; } .nav-links a::before { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 6px; background: url("data:image/svg+xml;utf8,") repeat-x center; background-size: 24px 6px; opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s; } .nav-links a:hover::before { opacity: 1; transform: translateY(0); } /* hero — original serif restored, no wiggle */ .hero-title-jp .accent { color: var(--coral); font-style: italic; } /* Hero: swimming fish layer */ .swim-layer { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; } .fish { position: absolute; animation: swim linear infinite; } @keyframes swim { from { transform: translateX(-20vw); } to { transform: translateX(120vw); } } .fish.rev { animation-name: swim-rev; } @keyframes swim-rev { from { transform: translateX(120vw) scaleX(-1); } to { transform: translateX(-20vw) scaleX(-1); } } .fish.bob svg { animation: bob 1.6s ease-in-out infinite; display: block; } @keyframes bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(3deg); } } /* jelly float (big translucent jellyfish in hero) */ .jelly { position: absolute; animation: jelly 8s ease-in-out infinite; opacity: .85; } @keyframes jelly { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-40px) scale(1.06); } } /* bubbles rising */ .bubble-layer { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; } .bubble { position: absolute; bottom: -30px; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,.3) 50%, rgba(255,255,255,0)); border: 1px solid rgba(255,255,255,.3); animation: rise linear infinite; } @keyframes rise { from { transform: translateY(0) translateX(0); opacity: 0; } 10% { opacity: .9; } 90% { opacity: .9; } to { transform: translateY(-110vh) translateX(30px); opacity: 0; } } /* WAVE bottom of hero */ .hero-waves { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 3; pointer-events: none; height: 90px; } .hero-waves svg { width: 200%; height: 100%; display: block; animation: waveshift 12s linear infinite; } @keyframes waveshift { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* today — playful chips */ .crowd-chip { font-weight: 600; } .today { border-top-width: 6px; } .today .val { font-family: var(--display); font-weight: 700; } /* section heads — casual */ .section-head h2 { font-family: var(--display); font-weight: 700; } .eyebrow { color: var(--coral); font-weight: 700; } /* area cards pop on hover */ .area-card { transition: transform .4s cubic-bezier(.3,1.4,.4,1); } .area-card:hover { transform: translateY(-6px) scale(1.015); } .area-card h3 { font-family: var(--display); font-weight: 700; } /* floating badge on area cards */ .area-card .float-badge { position: absolute; top: 20px; right: 20px; background: var(--sunrise); color: var(--ink); font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: .05em; padding: 8px 14px; border-radius: 999px; box-shadow: 0 6px 14px rgba(0,0,0,.2); animation: badgefloat 2.4s ease-in-out infinite; z-index: 3; } @keyframes badgefloat { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-6px) rotate(4deg); } } /* attract cards animate in on hover */ .attract-card h3 { font-family: var(--display); font-weight: 700; } .attract-card:hover h3 { color: var(--coral); transition: color .3s; } /* cute wait-time chip */ .attract-meta .wait { background: var(--cream); padding: 4px 12px; border-radius: 999px; font-weight: 600; color: var(--bonin); } /* tickets — playful tilt */ .ticket-card:nth-child(1) { transform: rotate(-.6deg); } .ticket-card:nth-child(3) { transform: rotate(.6deg); } .ticket-card:hover { transform: translateY(-6px) rotate(0) scale(1.02); } .ticket-card h3 { font-family: var(--display); font-weight: 700; } .ticket-card .price { font-family: var(--display); font-weight: 800; color: var(--coral); } .ticket-card.featured .price { color: var(--sunrise); } /* schedule — friendly */ .sch-title { font-family: var(--display); font-weight: 700; } .sch-row:hover { background: rgba(255,255,255,.06); transform: translateX(6px); transition: transform .3s, background .2s; } .sch-time { font-weight: 700; } /* creatures — bounce on hover */ .cr-card { border-radius: 16px; transition: transform .3s cubic-bezier(.3,1.4,.4,1), background .3s; } .cr-card:hover { transform: translateY(-8px) rotate(-1deg); } .cr-card:hover .cr-svg svg { animation: wobble .7s ease-in-out; } @keyframes wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } } .cr-card h4 { font-family: var(--display); font-weight: 700; } .cr-svg { color: var(--bonin); } .cr-card:hover .cr-svg { color: var(--coral); } /* news feature rounded */ .news-item:hover { background: var(--paper); border-radius: 8px; } /* footer friendlier */ .footer .tagline { font-family: var(--display); font-weight: 500; } /* wavy divider between sections */ .wavy-divider { display: block; width: 100%; height: 40px; background: var(--paper); position: relative; } /* scroll-to-top fish */ .back-top { position: fixed; right: 20px; bottom: 100px; width: 56px; height: 56px; background: var(--coral); border-radius: 50%; box-shadow: 0 10px 24px rgba(255,122,82,.4); display: flex; align-items: center; justify-content: center; color: #fff; z-index: 99; opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; animation: bobbrand 3s ease-in-out infinite; } .back-top.show { opacity: 1; pointer-events: auto; } .back-top:hover { transform: scale(1.1); } /* mascot cursor follower — small floating penguin/seal */ .mascot { position: fixed; width: 72px; height: 72px; pointer-events: none; z-index: 98; transition: transform .1s ease-out; display: none; } /* count-up stats */ .hero-foot .stat .v { font-family: var(--display); font-weight: 800; } /* area num & area-en */ .area-card .num { font-family: var(--display); font-weight: 700; } .area-card .desc { opacity: .85 !important; transform: none !important; } /* ticker — more playful */ .ticker { background: var(--ink); } .ticker-item { font-weight: 500; } .ticker-item .dot { animation: pulse 1.4s ease-in-out infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .5; } } /* hero CTA emoji */ .btn-primary::after { content: ""; display: inline-block; width: 12px; height: 12px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; } .btn-primary:hover::after { transform: rotate(45deg) translate(3px, -3px); } /* ========================================================= JUNGLIA-STYLE ANIMATIONS (applied everywhere except .hero) ========================================================= */ /* 1) Reveal on scroll (rise + fade). Overrides prior .reveal behavior. */ .hero ~ * .reveal, section.reveal, .reveal { opacity: 0; transform: translateY(48px); transition: opacity 1.1s cubic-bezier(.2,.7,.2,1), transform 1.1s cubic-bezier(.2,.7,.2,1); will-change: transform, opacity; } .reveal.in { opacity: 1; transform: translateY(0); } /* Staggered children inside a revealed group */ .reveal.stagger > * { opacity: 0; transform: translateY(32px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); } .reveal.stagger.in > *:nth-child(1) { transition-delay: .05s; } .reveal.stagger.in > *:nth-child(2) { transition-delay: .15s; } .reveal.stagger.in > *:nth-child(3) { transition-delay: .25s; } .reveal.stagger.in > *:nth-child(4) { transition-delay: .35s; } .reveal.stagger.in > *:nth-child(5) { transition-delay: .45s; } .reveal.stagger.in > *:nth-child(6) { transition-delay: .55s; } .reveal.stagger.in > * { opacity: 1; transform: translateY(0); } /* Text mask reveal (lines rise from a clipped container) */ .jr-mask { overflow: hidden; display: inline-block; } .jr-mask > * { display: inline-block; transform: translateY(120%); transition: transform 1.1s cubic-bezier(.2,.8,.2,1); } .reveal.in .jr-mask > * { transform: translateY(0); } .reveal.in .jr-mask:nth-child(2) > * { transition-delay: .12s; } .reveal.in .jr-mask:nth-child(3) > * { transition-delay: .24s; } /* 2) Card image zoom on hover — JUNGLIA signature */ .area-card, .attract-card, .ticket-card, .cr-card { transition: transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .6s cubic-bezier(.2,.7,.2,1); } .area-card:hover, .attract-card:hover { transform: translateY(-6px); } .area-card .art, .attract-card .attract-art .art, .area-card svg, .attract-card .attract-art svg { transition: transform 1.6s cubic-bezier(.2,.7,.2,1); transform-origin: center center; } .area-card:hover .art, .area-card:hover svg, .attract-card:hover .attract-art .art, .attract-card:hover .attract-art svg { transform: scale(1.08); } /* Headings slide a touch on hover */ .area-card h3, .attract-card h3 { transition: transform .5s cubic-bezier(.2,.7,.2,1); } .area-card:hover h3, .attract-card:hover h3 { transform: translateX(6px); } /* Ticket card lift */ .ticket-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 30px 60px rgba(11,79,122,.22); } /* Creature card subtle float on hover */ .cr-card:hover { transform: translateY(-6px); } .cr-card svg { transition: transform .8s cubic-bezier(.2,.7,.2,1); } .cr-card:hover svg { transform: translateY(-4px) scale(1.05); } /* 3) News item — arrow slide + padding shift */ .news-item { position: relative; transition: padding-left .4s cubic-bezier(.2,.7,.2,1), background-color .3s; } .news-item::after { content: "→"; position: absolute; right: 6px; top: 50%; transform: translate(-14px, -50%); opacity: 0; color: var(--coral, #e86a4e); font-family: var(--mono, monospace); transition: opacity .3s, transform .45s cubic-bezier(.2,.7,.2,1); pointer-events: none; } .news-item:hover { padding-left: 14px; } .news-item:hover::after { opacity: 1; transform: translate(0, -50%); } /* 4) Section-head eyebrow slide-in */ .section-head .eyebrow { display: inline-block; position: relative; padding-left: 28px; } .section-head .eyebrow::before { content: ""; position: absolute; left: 0; top: 50%; width: 20px; height: 1px; background: currentColor; transform-origin: left; transform: scaleX(0); transition: transform 1s cubic-bezier(.2,.7,.2,1) .1s; } .reveal.in .section-head .eyebrow::before, .section-head.reveal.in .eyebrow::before, .reveal.in.section-head .eyebrow::before { transform: scaleX(1); } /* 5) Route rows — slide-in highlight */ .route { transition: background-color .3s, transform .4s cubic-bezier(.2,.7,.2,1); } .route:hover { transform: translateX(6px); } /* 6) Marquee band (JUNGLIA-like giant stroked text) */ .jr-marquee { overflow: hidden; border-top: 1px solid rgba(10,26,42,.08); border-bottom: 1px solid rgba(10,26,42,.08); padding: 28px 0; background: var(--cream, #fbf7ef); margin: 80px 0; } .jr-marquee-track { display: inline-flex; white-space: nowrap; animation: jrMarquee 36s linear infinite; font-family: var(--display, serif); font-weight: 800; font-size: clamp(60px, 9vw, 132px); line-height: 1; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1.5px var(--ink, #0a1a2a); } .jr-marquee-track > span { padding-right: 56px; display: inline-block; } .jr-marquee-track > span.fill { -webkit-text-stroke: 0; color: var(--coral, #e86a4e); } .jr-marquee-track > span.sep { -webkit-text-stroke: 0; color: var(--coral, #e86a4e); opacity: .55; font-size: .55em; padding-right: 56px; transform: translateY(-.12em); } @keyframes jrMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* 7) Sticky parallax band (pin text while image scrolls) */ .jr-pinned { position: relative; margin: 80px 0; } .jr-pinned .jr-pinned-inner { position: sticky; top: 12vh; padding: 80px 0; } /* PHOTO OVERLAYS — Unsplash images on cards */ .photo { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; transition: transform 1.6s cubic-bezier(.2,.7,.2,1), filter .6s; } .area-card .photo { filter: saturate(1.05) contrast(1.02); } .area-card:hover .photo { transform: scale(1.08); } .attract-card .attract-art .photo, .attract-card:hover .attract-art .photo { transition: transform 1.4s cubic-bezier(.2,.7,.2,1); } .attract-card:hover .attract-art .photo { transform: scale(1.08); } /* gentle overlay for legibility */ .area-card .photo::after, .attract-card .photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.55) 100%); } /* news feature background image support */ .news-feature.has-photo { position: relative; overflow: hidden; color: #fff; background: #0b4f7a; } .news-feature.has-photo .photo { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; transition: transform 10s ease; } .news-feature.has-photo:hover .photo { transform: scale(1.06); } .news-feature.has-photo .photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(6,32,54,.75) 0%, rgba(2,16,31,.55) 100%); } .news-feature.has-photo > * { position: relative; z-index: 1; } /* ticket featured photo band */ .ticket-card.has-photo .band { height: 120px; background-size: cover; background-position: center; border-radius: 20px 20px 0 0; position: relative; overflow: hidden; } .ticket-card.has-photo .band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.3) 100%); } /* photo gallery strip between sections */ .photo-strip { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.4fr; gap: 12px; margin: 80px auto; max-width: var(--maxw); padding: 0 var(--gutter); height: 360px; } .photo-strip .ps-tile { position: relative; overflow: hidden; border-radius: 18px; background-size: cover; background-position: center; transition: transform .7s cubic-bezier(.2,.7,.2,1); } .photo-strip .ps-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.55) 100%); } .photo-strip .ps-tile .cap { position: absolute; left: 20px; bottom: 16px; color: #fff; z-index: 2; font-family: var(--display, sans-serif); font-weight: 700; font-size: 18px; letter-spacing: .04em; } .photo-strip .ps-tile .cap small { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .2em; opacity: .75; font-weight: 400; margin-bottom: 4px; } .photo-strip .ps-tile:hover { transform: translateY(-4px); } .photo-strip .ps-tile .photo-inner { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); } .photo-strip .ps-tile:hover .photo-inner { transform: scale(1.08); } @media (max-width: 900px) { .photo-strip { grid-template-columns: 1fr 1fr; height: auto; } .photo-strip .ps-tile { aspect-ratio: 4/3; } } /* access map photo companion */ .access-photo { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 4/3; background-size: cover; background-position: center; } .access-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(6,32,54,.35), rgba(0,0,0,0) 50%); } /* 8) Respect reduced motion */ @media (prefers-reduced-motion: reduce) { .reveal, .reveal.stagger > *, .jr-mask > * { transition: none !important; opacity: 1 !important; transform: none !important; } .jr-marquee-track { animation: none; } .area-card:hover .art, .attract-card:hover .attract-art .art { transform: none; } }