/* ========================================================= youngha.rho — Global Stylesheet Cloudflare Pages static deploy (no build step) ========================================================= */ /* --- Google Fonts --- */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=swap'); /* --- CSS Variables --- */ :root { --bg: #FFFFFF; --text: #000000; --accent: #FF6200; --secondary: #666666; --font-body: 'DM Sans', sans-serif; /* heading = Regular (400), body = Bold (700) per brief */ --page-padding-x: clamp(32px, 5vw, 80px); --page-padding-y: clamp(32px, 4vw, 60px); --header-height: 120px; --nav-gap: 8px; --transition-fast: 0.18s ease; --transition-mid: 0.35s ease; } /* --- Reset --- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-weight: 700; /* body = Bold */ font-size: clamp(14px, 1.4vw, 16px); line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img { display: block; width: 100%; } ul, ol { list-style: none; } /* --- Text selection --- */ ::selection { background: var(--accent); color: #FFFFFF; } /* ========================================================= HEADER (common across all pages) ========================================================= */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: flex-start; justify-content: space-between; padding: var(--page-padding-y) var(--page-padding-x) 0; background: var(--bg); /* Scroll-fade interaction applied via JS */ transition: opacity 0.4s ease; } /* Logo */ .site-logo { font-weight: 700; font-size: clamp(14px, 1.4vw, 16px); letter-spacing: -0.01em; line-height: 1; cursor: pointer; transition: opacity var(--transition-fast); } .site-logo a { display: block; } /* Nav */ .site-nav { display: flex; flex-direction: column; align-items: flex-end; gap: var(--nav-gap); } .site-nav a { font-weight: 400; /* heading = Regular */ font-size: clamp(14px, 1.4vw, 16px); line-height: 1.2; position: relative; display: inline-block; padding: 2px 6px; transition: transform var(--transition-fast); } /* Active state: black box, white text, bold */ .site-nav a.active { background: var(--text); color: var(--bg); font-weight: 700; } /* Hover magnetic effect — applied via JS, but fallback */ .site-nav a:not(.active):hover { opacity: 0.6; } /* ========================================================= SCROLL-FADE (JS reads .is-scrolling on ) ========================================================= */ body.is-scrolling .site-header { opacity: 0.3; } /* ========================================================= MAIN CONTENT ========================================================= */ .site-main { padding-top: var(--header-height); } /* ========================================================= FOOTER (common) ========================================================= */ .site-footer { padding: 40px var(--page-padding-x); color: var(--secondary); font-size: 12px; font-weight: 400; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #e8e8e8; margin-top: 80px; } /* ========================================================= UTILITIES ========================================================= */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 768px) { :root { --header-height: 80px; } .site-header { padding: 24px 24px; align-items: flex-start; } .site-nav { flex-direction: row; flex-wrap: wrap; /* 토글이 넘칠 때 아래로 내려오도록 */ justify-content: flex-end; gap: 12px; } .site-nav a { font-size: 13px; } /* 토글은 항상 contact 아래 — 단독으로 한 줄 차지 */ .view-toggle { flex-basis: 100%; /* 전체 너비를 차지해 다음 줄로 강제 */ justify-content: flex-end; margin-top: 0; } }