/* Shared chrome for the static pages (privacy, 404). The home page carries its own copy of this palette inline, because it is rendered from a design document that has to stay self-contained. */ /* Same palette as the home page. Dark is the default; light arrives either from the system preference or from the toggle, which stamps data-theme on . */ :root { --bg: #000; --fg: #fff; --muted: #b3b3b3; --line: rgba(255,255,255,0.14); --vline: rgba(255,255,255,0.24); --nav-bg: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)); --nav-border: rgba(255,255,255,0.12); --nav-shadow: 0 12px 40px rgba(0,0,0,0.6), inset 0 1px 1px rgba(255,255,255,0.3); --panel-bg: linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.01)), #0f0f0f; --panel-border: rgba(255,255,255,0.12); --panel-shadow: inset 0 1px 1px rgba(255,255,255,0.25), inset 0 -1px 2px rgba(0,0,0,0.5), 0 20px 50px -10px rgba(0,0,0,0.7); --ctrl-bg: rgba(0,0,0,0.55); --code-bg: rgba(255,255,255,0.08); --logo-invert: none; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: #f6f6f4; --fg: #0a0a0a; --muted: #565656; --line: rgba(0,0,0,0.09); --vline: rgba(0,0,0,0.15); --nav-bg: linear-gradient(135deg, rgba(255,255,255,0.75), rgba(255,255,255,0.45)); --nav-border: rgba(0,0,0,0.1); --nav-shadow: 0 12px 40px rgba(0,0,0,0.12), inset 0 1px 1px rgba(255,255,255,0.9); --panel-bg: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(255,255,255,0.5)), #e9e9e6; --panel-border: rgba(0,0,0,0.1); --panel-shadow: inset 0 1px 1px rgba(255,255,255,0.7), 0 20px 50px -10px rgba(0,0,0,0.18); --ctrl-bg: rgba(255,255,255,0.75); --code-bg: rgba(0,0,0,0.06); --logo-invert: invert(1); } } :root[data-theme="light"] { --bg: #f6f6f4; --fg: #0a0a0a; --muted: #565656; --line: rgba(0,0,0,0.09); --vline: rgba(0,0,0,0.15); --nav-bg: linear-gradient(135deg, rgba(255,255,255,0.75), rgba(255,255,255,0.45)); --nav-border: rgba(0,0,0,0.1); --nav-shadow: 0 12px 40px rgba(0,0,0,0.12), inset 0 1px 1px rgba(255,255,255,0.9); --panel-bg: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(255,255,255,0.5)), #e9e9e6; --panel-border: rgba(0,0,0,0.1); --panel-shadow: inset 0 1px 1px rgba(255,255,255,0.7), 0 20px 50px -10px rgba(0,0,0,0.18); --ctrl-bg: rgba(255,255,255,0.75); --code-bg: rgba(0,0,0,0.06); --logo-invert: invert(1); } html, body { margin: 0; padding: 0; } html { background: var(--bg); } html, body { overflow-x: clip; } body { background: var(--bg); color: var(--fg); min-height: 100vh; position: relative; font-family: 'Plus Jakarta Sans', sans-serif; transition: background 0.3s, color 0.3s; } a { color: inherit; } a:hover { opacity: 0.8; } .frame { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .frame span { position: absolute; top: 0; bottom: 0; width: 1px; background: linear-gradient(to bottom, transparent, var(--vline) 10%, var(--vline) 90%, transparent); } .frame .l { left: max(10px, calc(50vw - 712px)); } .frame .r { right: max(10px, calc(50vw - 712px)); } .page { position: relative; z-index: 1; } .navwrap { position: sticky; top: 20px; z-index: 50; padding: 20px 32px 0; } nav { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 28px; border-radius: 999px; background: var(--nav-bg); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); border: 1px solid var(--nav-border); box-shadow: var(--nav-shadow); transition: background 0.3s, border-color 0.3s; } nav .brand { display: flex; align-items: center; } nav .brand img { height: 22px; display: block; filter: var(--logo-invert); } nav .right { display: flex; align-items: center; gap: 20px; } nav .contact { color: var(--fg); font-size: 17px; font-weight: 800; text-decoration: none; } .tgl { width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--ctrl-bg); color: var(--fg); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; } .tgl:hover { filter: brightness(1.25); } .tgl .sun { display: none; } :root[data-theme="light"] .tgl .sun { display: block; } :root[data-theme="light"] .tgl .moon { display: none; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .tgl .sun { display: block; } :root:not([data-theme="dark"]) .tgl .moon { display: none; } } .wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; } .hero { padding: 120px 32px 110px; } .hero h1 { margin: 0; font-size: clamp(38px, 5.3vw, 74px); font-weight: 800; letter-spacing: -0.045em; line-height: 1.08; } .hero .sub { margin: 20px 0 0; color: var(--muted); font-size: 18px; line-height: 26px; max-width: 620px; } .rule { height: 1px; background: var(--line); } .body { max-width: 1280px; margin: 60px auto 0; padding: 0 32px; } .sec { display: flex; flex-wrap: wrap; gap: 48px; padding: 34px 0; border-top: 1px solid var(--line); } .sec:first-child { border-top: none; padding-top: 0; } .sec h2 { flex: 0 0 240px; margin: 0; font-size: 13px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); line-height: 1.5; } .sec .prose { flex: 1 1 420px; min-width: 0; } .prose p { margin: 0 0 16px; color: var(--muted); font-size: 18px; line-height: 28px; text-wrap: pretty; } .prose p:last-child { margin-bottom: 0; } .prose ul { margin: 0 0 16px; padding-left: 22px; } .prose li { color: var(--muted); font-size: 18px; line-height: 28px; margin-bottom: 10px; } .prose li:last-child { margin-bottom: 0; } .prose strong { color: var(--fg); font-weight: 800; } .prose a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; } .prose code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 15px; padding: 2px 7px; border-radius: 6px; background: var(--code-bg); color: var(--fg); } .panel { max-width: 1280px; margin: 70px auto 0; padding: 0 32px; } .panel .inner { border-radius: 30px; background: var(--panel-bg); border: 1px solid var(--panel-border); box-shadow: var(--panel-shadow); padding: 48px; transition: background 0.3s; } .panel h2 { margin: 0; font-size: clamp(28px, 3vw, 38px); font-weight: 800; letter-spacing: -1.4px; line-height: 1.15; } .panel p { margin: 14px 0 0; color: var(--muted); font-size: 18px; line-height: 28px; } .panel a.mail { display: inline-block; margin-top: 18px; color: var(--fg); font-size: clamp(20px, 2.6vw, 30px); font-weight: 800; text-decoration: none; } .mark { max-width: 1280px; margin: 80px auto; padding: 0 32px; } .mark img { width: 100%; height: auto; display: block; opacity: 0.14; user-select: none; pointer-events: none; filter: var(--logo-invert); } .foot { max-width: 1280px; margin: 0 auto; padding: 0 32px 80px; display: flex; align-items: center; gap: 24px; font-size: 14px; } @media (max-width: 767px) { .navwrap { padding: 20px 16px 0; } nav { padding: 18px 18px 18px 20px; } nav .brand img { height: min(19.5px, 5.2vw); } nav .contact { display: none; } .hero { padding: 80px 32px 70px; } .sec { gap: 16px; } .sec h2 { flex-basis: 100%; } .panel .inner { padding: 36px 28px; } nav .right { gap: 10px; } }