/* ============================================================ 학우너 (HAKWOONER) — Landing redesign Design tokens + base styles Aesthetic: trustworthy education/fintech — clean, restrained Dominant emerald green + warm amber accent on warm off-white ============================================================ */ /* ---------- Fonts ---------- */ /* Pretendard loaded via globals.css in Next.js */ :root { /* Palette — set defaults; Tweaks override --brand / --accent at :root */ --brand: #0E7A52; /* emerald */ --brand-700: #0A5E3F; --brand-900: #073D29; --brand-300: #5BB98C; --brand-tint: #E6F2EC; /* mint surface */ --brand-tint-2: #D3E9DD; --accent: #E8964A; /* warm amber */ --accent-soft: #FBEAD6; /* Neutrals — warm off-white system */ --paper: #FAF8F3; /* page background */ --surface: #FFFFFF; /* cards */ --surface-2:#F2EEE5; /* sunken / alt */ --ink: #14211B; /* near-black, green-tinted */ --ink-2: #3D4943; /* secondary text */ --ink-3: #6B756F; /* tertiary / captions */ --line: #E5E0D5; /* hairlines */ --line-2: #D8D2C4; /* Typography --font-mono 는 의도적으로 재정의하지 않음 → 루트 layout.tsx 의 next/font (self-host Space Grotesk)가 에 설정한 --font-mono 를 그대로 상속. 외부 Google Fonts 요청 없이 동일한 모노 폰트(숫자·eyebrow) 유지. */ --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", sans-serif; --fs: 1; /* Tweaks font scale multiplier */ /* Radii */ --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px; /* Shadows — soft, premium */ --sh-sm: 0 1px 2px rgba(20,33,27,.05), 0 1px 1px rgba(20,33,27,.04); --sh-md: 0 4px 16px rgba(20,33,27,.07), 0 1px 3px rgba(20,33,27,.05); --sh-lg: 0 18px 50px -16px rgba(11,62,41,.22), 0 6px 18px rgba(20,33,27,.06); --sh-brand: 0 14px 34px -10px rgba(14,122,82,.42); --maxw: 1200px; --ease: cubic-bezier(.22,.61,.36,1); } /* Dark theme (Tweaks) */ [data-theme="dark"] { --paper: #0C1611; --surface: #12211A; --surface-2:#0E1B15; --ink: #EAF2ED; --ink-2: #AFC0B7; --ink-3: #7E8F86; --line: #20332A; --line-2: #2A4035; --brand-tint: #133527; --brand-tint-2: #16402F; --accent-soft: #2E2415; } /* Radius scale variants (Tweaks) */ [data-round="sharp"] { --r-sm:4px; --r-md:6px; --r-lg:10px; --r-xl:12px; } [data-round="pill"] { --r-sm:14px; --r-md:22px; --r-lg:30px; --r-xl:40px; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-sans); background: var(--paper); color: var(--ink); font-size: calc(17px * var(--fs)); line-height: 1.6; letter-spacing: -0.011em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; border: none; background: none; } a { color: inherit; text-decoration: none; } ul { list-style: none; padding: 0; } :focus-visible { outline: 2.5px solid var(--brand); outline-offset: 3px; border-radius: 4px; } /* ---------- Texture backgrounds (Tweaks) ---------- */ body[data-bg="dots"] { background-image: radial-gradient(rgba(14,122,82,.10) 1.1px, transparent 1.1px); background-size: 26px 26px; } body[data-bg="grid"] { background-image: linear-gradient(rgba(20,33,27,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(20,33,27,.045) 1px, transparent 1px); background-size: 40px 40px; } body[data-bg="mesh"]::before { content:""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(60% 50% at 12% 0%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 70%), radial-gradient(50% 45% at 95% 8%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%); } /* ---------- Layout helpers ---------- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 28px; } @media (max-width: 540px){ .wrap { padding-inline: 18px; } } .section { position: relative; padding: clamp(72px, 9vw, 132px) 0; z-index: 1; } .section--tight { padding: clamp(54px, 6vw, 90px) 0; } .center { text-align: center; } /* Eyebrow label */ .eyebrow { font-family: var(--font-mono); font-size: calc(13px * var(--fs)); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand); display: inline-flex; align-items: center; gap: 9px; } .eyebrow::before { content:""; width: 22px; height: 2px; background: currentColor; border-radius: 2px; } .eyebrow.is-center::after { content:""; width: 22px; height: 2px; background: currentColor; border-radius: 2px; } /* Headings */ h1,h2,h3 { line-height: 1.16; letter-spacing: -0.03em; font-weight: 800; word-break: keep-all; text-wrap: balance; } .h-display { font-size: clamp(34px, 5.4vw, 62px); font-weight: 850; letter-spacing: -0.04em; line-height: 1.2; } .h-section { font-size: clamp(28px, 3.6vw, 44px); } .h-sub { font-size: clamp(21px, 2.4vw, 28px); font-weight: 750; } .lead { font-size: calc(19px * var(--fs)); color: var(--ink-2); line-height: 1.62; word-break: keep-all; text-wrap: pretty; } .muted { color: var(--ink-3); } .accentword { color: var(--brand); } mark.hl { background: linear-gradient(transparent 58%, color-mix(in srgb, var(--accent) 42%, transparent) 0); color: inherit; padding: 0 .04em; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-weight: 700; font-size: calc(16px * var(--fs)); letter-spacing: -.01em; padding: 15px 26px; border-radius: var(--r-pill); transition: transform .18s var(--ease), box-shadow .25s var(--ease), background .2s, color .2s; white-space: nowrap; line-height: 1; } .btn svg { width: 1.15em; height: 1.15em; } .btn-primary { background: var(--brand); color: #fff; box-shadow: var(--sh-brand); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 20px 42px -10px rgba(14,122,82,.55); } .btn-dark { background: var(--ink); color: var(--paper); } .btn-dark:hover { transform: translateY(-2px); box-shadow: var(--sh-lg); } .btn-ghost { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2); } .btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--brand); color: var(--brand); transform: translateY(-2px); } .btn-soft { background: var(--brand-tint); color: var(--brand-700); } .btn-soft:hover { background: var(--brand-tint-2); transform: translateY(-2px); } .btn-lg { padding: 18px 32px; font-size: calc(17px * var(--fs)); } .btn-block { width: 100%; } /* Button style variant: outline (Tweaks) */ [data-btn="outline"] .btn-primary { background: transparent; color: var(--brand); box-shadow: inset 0 0 0 2px var(--brand); } [data-btn="outline"] .btn-primary:hover { background: var(--brand); color: #fff; } /* Store badge button */ .store { display: inline-flex; align-items: center; gap: 12px; background: var(--ink); color: var(--paper); padding: 12px 22px 12px 18px; border-radius: var(--r-md); transition: transform .18s var(--ease), box-shadow .25s; box-shadow: var(--sh-md); } .store:hover { transform: translateY(-2px); box-shadow: var(--sh-lg); } .store .si { width: 26px; height: 26px; flex: none; } .store small { display: block; font-size: 11px; opacity: .72; font-weight: 500; line-height: 1.2; letter-spacing: .02em; } .store b { display: block; font-size: 16px; font-weight: 700; line-height: 1.15; } .store .badge-soon { font-family: var(--font-mono); font-size: 10px; font-weight: 600; background: var(--accent); color: #1a1205; padding: 2px 7px; border-radius: var(--r-pill); margin-left: 2px; letter-spacing: .04em; } /* Pills / chips */ .chip { display: inline-flex; align-items: center; gap: 7px; font-size: calc(13.5px * var(--fs)); font-weight: 600; color: var(--ink-2); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); padding: 8px 14px; border-radius: var(--r-pill); } .chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); } /* Card */ .card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-md); border: 1px solid var(--line); } /* ---------- Reveal on scroll ---------- */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal.in { opacity: 1; transform: none; } .reveal[data-d="1"]{transition-delay:.07s} .reveal[data-d="2"]{transition-delay:.14s} .reveal[data-d="3"]{transition-delay:.21s} .reveal[data-d="4"]{transition-delay:.28s} @media (prefers-reduced-motion: reduce){ .reveal{opacity:1;transform:none;transition:none} html{scroll-behavior:auto} }