/* --------------------------------------------- Japacinky / brand styles Colors: #FF0007 / #361714 / #F7E5D3 / #FFFFFF Type: Sora (400/600/800) + Noto Sans JP ---------------------------------------------- */ :root { --red: #FF0007; --brown: #361714; --cream: #F7E5D3; --white: #FFFFFF; --bg: #361714; --bg-deep: #170E0D; --bg-grad: linear-gradient(180deg, #361714 0%, #170E0D 100%); --maxw: 1160px; --pad: clamp(1.5rem, 5vw, 4rem); } * { box-sizing: border-box; } /* The gradient lives on so it also fills the iOS rubber-band area and the space behind the Safari toolbars (no white edges). */ html { -webkit-text-size-adjust: 100%; color-scheme: dark; min-height: 100%; background: var(--bg-grad) fixed; background-color: var(--bg-deep); overscroll-behavior-y: none; } body { margin: 0; min-height: 100vh; min-height: 100svh; background: transparent; overscroll-behavior-y: none; color: var(--cream); font-family: 'Sora', system-ui, -apple-system, sans-serif; font-weight: 400; font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); line-height: 1.65; -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; overflow-x: hidden; } a { color: inherit; } .jp { font-family: 'Noto Sans JP', 'Sora', sans-serif; font-weight: 400; } /* ---------- background motif: Mt. Fuji ---------- */ .fuji { position: fixed; left: 62%; bottom: 0; transform: translateX(-50%); width: max(112%, 1200px); aspect-ratio: 2496 / 507; max-height: 46vh; background: url('/assets/fuji.svg') no-repeat bottom center; background-size: 100% 100%; z-index: 0; pointer-events: none; } /* Haze that keeps the copy readable over the mountain. Lives on .site so it always covers the whole viewport — the .fuji element itself is wider than the screen and offset to the right. */ .site::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient( ellipse 60% 70% at 0% 100%, rgba(23, 14, 13, 0.95) 0%, rgba(23, 14, 13, 0.7) 45%, rgba(23, 14, 13, 0) 80% ); } /* ---------- layout ---------- */ .site { position: relative; z-index: 1; flex: 1 0 auto; display: flex; flex-direction: column; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); } .header { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: clamp(1.5rem, 4vw, 2.5rem) 0; } .logo { display: inline-block; line-height: 0; } .logo img { width: clamp(140px, 18vw, 200px); height: auto; display: block; } .nav { display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 2.25rem); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } .nav a { text-decoration: none; color: var(--cream); opacity: 0.72; padding-bottom: 3px; border-bottom: 2px solid transparent; transition: opacity 0.2s ease, border-color 0.2s ease; } .nav a:hover { opacity: 1; } .nav a[aria-current='page'] { opacity: 1; border-bottom-color: var(--red); } .main { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; padding: clamp(2.5rem, 8vh, 6rem) 0; } .wrap { max-width: 46rem; } /* ---------- type ---------- */ .eyebrow { margin: 0 0 1.5rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cream); opacity: 0.6; } h1 { margin: 0; font-weight: 800; font-size: clamp(2.4rem, 7.5vw, 4.75rem); line-height: 1.02; letter-spacing: -0.03em; text-transform: uppercase; color: var(--white); } h1 .accent { color: var(--red); } .lead { margin: 1.5rem 0 0; font-size: clamp(1.25rem, 2.2vw, 1.75rem); font-weight: 600; line-height: 1.3; color: var(--white); } .body { margin: 1.25rem 0 0; max-width: 34rem; color: var(--cream); opacity: 0.82; } /* ---------- button ---------- */ a.btn, button.btn { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem; margin: 2.5rem 0 0; padding: 1.05rem 2.1rem; border: 0; border-radius: 999px; background: var(--red); color: var(--white); font-family: 'Sora', system-ui, -apple-system, sans-serif; font-size: 0.875rem; font-weight: 800; line-height: 1.2; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; box-shadow: 0 10px 30px rgba(255, 0, 7, 0.22); } a.btn:hover, button.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 38px rgba(255, 0, 7, 0.32); } a.btn:active, button.btn:active { transform: translateY(0); } a.btn:focus-visible, button.btn:focus-visible { outline: 3px solid var(--cream); outline-offset: 3px; } .btn .arrow { font-size: 1.1em; line-height: 1; transition: transform 0.18s ease; } .btn:hover .arrow { transform: translateX(4px); } /* ---------- form ---------- */ .form { margin-top: 2.5rem; max-width: 30rem; } .form label { display: block; margin-bottom: 0.6rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.65; } .form input { width: 100%; padding: 1rem 1.25rem; border: 2px solid rgba(247, 229, 211, 0.22); border-radius: 14px; background: rgba(247, 229, 211, 0.05); color: var(--white); font-family: inherit; font-size: 1rem; transition: border-color 0.2s ease, background 0.2s ease; } .form input::placeholder { color: rgba(247, 229, 211, 0.4); } .form input:focus { outline: none; border-color: var(--red); background: rgba(247, 229, 211, 0.08); } .form .btn { margin-top: 1.25rem; } .form .btn[disabled] { opacity: 0.6; pointer-events: none; } /* honeypot pre botov */ .hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .note { margin: 2rem 0 0; max-width: 32rem; font-size: 0.9375rem; line-height: 1.6; opacity: 0.7; } .note strong { font-weight: 600; opacity: 1; } .note a { color: var(--red); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .note a:hover { color: var(--white); } /* ---------- footer ---------- */ .footer { position: relative; z-index: 1; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 2rem var(--pad) 2.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.8125rem; letter-spacing: 0.06em; opacity: 0.6; } .footer a { text-decoration: none; } .footer a:hover { color: var(--white); opacity: 1; } .footer .social { display: flex; gap: 1.5rem; } /* ---------- motion ---------- */ .rise { animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; } .rise:nth-child(2) { animation-delay: 0.06s; } .rise:nth-child(3) { animation-delay: 0.12s; } .rise:nth-child(4) { animation-delay: 0.18s; } .rise:nth-child(5) { animation-delay: 0.24s; } @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* Buttons fade in only — the keyframe transform would otherwise override the hover lift. */ .btn.rise { animation-name: fadein; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } @media (max-width: 760px) { .fuji { left: 50%; width: max(100%, 720px); max-height: 30vh; } .site::before { background: linear-gradient(to bottom, rgba(23, 14, 13, 0) 30%, rgba(23, 14, 13, 0.55) 62%, rgba(23, 14, 13, 0.82) 100%); } .main { padding-bottom: clamp(6rem, 22vh, 12rem); } } @media (max-width: 600px) { .footer { flex-direction: column; align-items: flex-start; } .btn { width: 100%; justify-content: center; } }