/* Prime Academy marketing site — shared styles. Prestige editorial: serif display type, ivory/navy palette, hairline rules, generous whitespace. */ :root { --ink: #1c1b19; --navy: #15233c; --navy-deep: #0e1830; --muted: #6f6c63; /* slightly darker than before for AA contrast */ --line: #e7e3d9; --bg: #fbfaf7; --serif: "Playfair Display", "Noto Serif KR", Georgia, "Times New Roman", serif; --sans: "Inter", "Noto Sans KR", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Spacing scale — one source of truth for vertical rhythm. */ --space-section: 88px; /* default block padding (top & bottom) */ --space-flow: 56px; /* gap between a hero and the first bordered block */ --maxw: 1080px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--bg); line-height: 1.6; -webkit-font-smoothing: antialiased; font-variant-numeric: lining-nums proportional-nums; /* fix Playfair old-style digits */ /* Korean: break lines at word boundaries (spaces), never between syllables, so words like 온라인 / 준비합니다 never split mid-word (which reads as broken, near-vertical text in narrow columns). Inherits to all text; Latin unaffected. overflow-wrap is the safety valve for a long unspaced run in a tight box. */ word-break: keep-all; overflow-wrap: break-word; } a { color: inherit; } /* Visible keyboard focus everywhere (was missing). */ :focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 2px; } :focus:not(:focus-visible) { outline: none; } /* Skip link for keyboard / screen-reader users. */ .skip-link { position: absolute; left: 16px; top: -48px; z-index: 20; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 3px; font-size: 13px; text-decoration: none; transition: top 0.15s ease; } .skip-link:focus { top: 16px; } /* Language toggle: show only the active language. data-lang set on . English is the fallback for ANY value other than "ko" — a stale/invalid data-lang (e.g. "kr", empty, missing) shows English only, never both. */ .ko { display: none; } html[data-lang="ko"] .en { display: none; } html[data-lang="ko"] .ko { display: revert; } /* Horizontal only — vertical padding is owned by section/.hero (longhand, so a shared `.wrap` class never zeroes out a section's vertical padding). */ .wrap { max-width: var(--maxw); margin: 0 auto; padding-left: 32px; padding-right: 32px; } .eyebrow { font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); margin: 0; } h1, h2, h3, .statement, .lead { word-break: keep-all; text-wrap: balance; } /* Header */ header { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; border-bottom: 1px solid var(--line); gap: 16px; } .brand { font-family: var(--serif); font-weight: 700; font-size: 21px; letter-spacing: 0.04em; text-decoration: none; color: var(--ink); white-space: nowrap; display: inline-flex; align-items: center; gap: 11px; } .brand-mark { width: 32px; height: 32px; flex: none; } .brand small { font-family: var(--sans); color: var(--muted); font-weight: 500; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; margin-left: 0; } nav { display: flex; align-items: center; gap: 26px; } nav a { text-decoration: none; color: var(--muted); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; padding-bottom: 3px; border-bottom: 1px solid transparent; white-space: nowrap; } nav a:hover { color: var(--ink); } nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--navy); } #lang-toggle { border: none; background: none; cursor: pointer; color: var(--navy); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; padding: 0 0 3px; border-bottom: 1px solid transparent; font-family: inherit; } #lang-toggle:hover { border-bottom-color: var(--navy); } /* Mobile menu toggle — hidden on desktop. */ .nav-toggle { display: none; } /* Hero (home) + page hero (subpages) */ .hero { text-align: center; padding-top: 92px; padding-bottom: var(--space-flow); } .hero .eyebrow { margin-bottom: 20px; } .hero h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(38px, 5.2vw, 58px); line-height: 1.12; letter-spacing: -0.015em; color: var(--navy); margin: 0 auto 26px; max-width: 18ch; } .hero p { font-size: 18px; color: var(--muted); max-width: 600px; margin: 0 auto 36px; } /* CTAs */ .cta { display: flex; align-items: baseline; justify-content: center; gap: 8px 28px; flex-wrap: wrap; } .btn { display: inline-block; background: var(--navy); color: #fff; text-decoration: none; padding: 14px 28px; border-radius: 3px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; transition: background 0.15s ease; } .btn:hover { background: var(--navy-deep); } .btn-text { text-decoration: none; font-size: 14px; color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 2px; transition: color 0.15s ease, border-color 0.15s ease; } .btn-text:hover { color: var(--navy); border-bottom-color: var(--navy); } /* Sections */ section { padding-top: var(--space-section); padding-bottom: var(--space-section); } .bordered { border-top: 1px solid var(--line); } .section-head { margin-bottom: 44px; } /* Subpage: two-column editorial layout — sticky title rail + body. Replaces the old left-hugging single column that left the right half empty. */ .entry { padding-top: 72px; padding-bottom: var(--space-section); display: grid; grid-template-columns: 300px minmax(0, 1fr); column-gap: 80px; align-items: start; } .entry-head { position: sticky; top: 32px; } .entry-head .eyebrow { margin-bottom: 18px; } .entry-head h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 3vw, 40px); line-height: 1.16; letter-spacing: -0.015em; color: var(--navy); margin: 0; } .entry-head .lead { font-size: 16px; color: var(--muted); line-height: 1.65; margin: 20px 0 0; } .entry-cta { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); display: flex; flex-direction: column; align-items: flex-start; gap: 14px; } .entry-meta { margin: 18px 0 0; font-size: 13px; letter-spacing: 0.04em; color: var(--muted); } /* Legal/long-form prose extras */ .prose h2 { font-family: var(--serif); font-weight: 600; font-size: 21px; margin: 40px 0 12px; color: var(--navy); } .prose h2:first-of-type { margin-top: 0; } .prose a { color: var(--navy); text-underline-offset: 2px; } /* Prose (subpage body) */ .prose { max-width: 660px; } .prose > p:first-child { margin-top: 0; } .prose p { font-size: 17px; color: #35332e; margin: 0 0 20px; line-height: 1.7; } .prose h3 { font-family: var(--serif); font-weight: 600; font-size: 22px; margin: 44px 0 14px; } .prose ul { margin: 0; padding: 0; list-style: none; } .prose li { position: relative; padding: 15px 0 15px 28px; border-top: 1px solid var(--line); color: #35332e; font-size: 16px; line-height: 1.6; } .prose li:before { content: "—"; position: absolute; left: 0; color: var(--navy); } .prose li strong { font-weight: 600; } /* Home: program index */ .programs-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 72px; row-gap: 0; } .prog { padding: 34px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; align-items: flex-start; text-decoration: none; color: inherit; } .prog:hover h3 { color: var(--navy); } .prog .num { font-family: var(--serif); color: var(--navy); font-size: 14px; letter-spacing: 0.1em; opacity: 0.7; } .prog h3 { font-family: var(--serif); font-weight: 600; font-size: 22px; margin: 10px 0 12px; transition: color 0.15s ease; } .prog p { margin: 0 0 18px; color: var(--muted); font-size: 15px; line-height: 1.65; } .prog .more { margin-top: auto; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy); } .prog:hover .more { text-decoration: underline; text-underline-offset: 3px; } /* Approach / mission */ .approach { text-align: center; } .approach .statement { font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 2.4vw, 26px); line-height: 1.5; color: var(--ink); max-width: 760px; margin: 0 auto; letter-spacing: -0.01em; } /* CTA strip */ .cta-strip { text-align: center; } .cta-strip h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(26px, 3vw, 32px); margin: 0 0 26px; color: var(--navy); } /* Contact */ .contact { text-align: center; } .contact .eyebrow { margin-bottom: 16px; } .contact h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(34px, 4.6vw, 50px); line-height: 1.14; letter-spacing: -0.015em; color: var(--navy); margin: 0 0 18px; } .contact .lead { font-size: 18px; color: var(--muted); max-width: 520px; margin: 0 auto 52px; } .contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .contact-grid > div { padding: 40px 24px; border-right: 1px solid var(--line); } .contact-grid > div:last-child { border-right: none; } .contact .label { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .contact .value { font-family: var(--serif); font-size: 19px; margin-top: 14px; line-height: 1.5; } .contact .value a { text-decoration: none; } .contact .value a:hover { color: var(--navy); } .contact .note { color: var(--muted); font-size: 14px; margin-top: 32px; } footer { border-top: 1px solid var(--line); padding: 34px 0 40px; color: var(--muted); font-size: 12.5px; text-align: center; } footer p { margin: 0; } footer .foot-line + .foot-line { margin-top: 8px; } footer a { text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 1px; } footer a:hover { color: var(--ink); border-bottom-color: var(--line); } .foot-fine { max-width: 760px; margin: 18px auto 0; font-size: 11px; line-height: 1.65; opacity: 0.85; } /* ---- Responsive ---- */ @media (max-width: 860px) { .entry { grid-template-columns: 1fr; row-gap: 8px; padding-top: 56px; } .entry-head { position: static; } .entry-head h1 { font-size: clamp(32px, 7vw, 44px); } .entry-head .lead { font-size: 18px; max-width: 60ch; } .entry-cta { margin-top: 28px; } } @media (max-width: 680px) { .wrap { padding-left: 22px; padding-right: 22px; } .programs-grid, .contact-grid { grid-template-columns: 1fr; } .contact-grid > div { border-right: none; border-bottom: 1px solid var(--line); } .contact-grid > div:last-child { border-bottom: none; } .hero { padding-top: 60px; padding-bottom: 40px; } section { padding-top: 64px; padding-bottom: 64px; } .entry { padding-bottom: 64px; } /* Collapse nav into a toggled menu. */ header { flex-wrap: wrap; } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: -8px -8px -8px 0; padding: 0; border: none; background: none; cursor: pointer; color: var(--ink); } .nav-toggle-bar, .nav-toggle-bar::before, .nav-toggle-bar::after { content: ""; display: block; width: 22px; height: 1.5px; background: currentColor; transition: transform 0.2s ease, opacity 0.2s ease; } .nav-toggle-bar::before { transform: translateY(-7px); } .nav-toggle-bar::after { transform: translateY(5.5px); } /* 7 - 1.5 */ .nav-toggle[aria-expanded="true"] .nav-toggle-bar { background: transparent; } .nav-toggle[aria-expanded="true"] .nav-toggle-bar::before { transform: translateY(0) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle-bar::after { transform: translateY(-1.5px) rotate(-45deg); } nav { flex-basis: 100%; flex-direction: column; align-items: flex-start; gap: 0; max-height: 0; overflow: hidden; transition: max-height 0.25s ease; } nav[data-open] { max-height: 420px; } nav a { width: 100%; padding: 14px 0; font-size: 13px; border-bottom: 1px solid var(--line); } nav a[aria-current="page"] { border-bottom-color: var(--line); color: var(--navy); } #lang-toggle { padding: 16px 0 4px; } } @media (prefers-reduced-motion: reduce) { * { transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }