/* ========================================================================= SRIKI · Brand layer (Korean homepage) Layered on top of colors_and_type.css (the inherited Claude/SRIKI tokens). Reasons for every override are documented in the design spec §0.2. ========================================================================= */ /* Inter Variable — the closest free substitute for Stripe's licensed Söhne. Loaded from rsms.me (official Inter distribution; ~10kb, swap behaviour). Pretendard Variable handles Korean glyphs (sohne/Inter have none). Noto Sans KR is the legacy fallback for older browsers. */ @import url("https://rsms.me/inter/inter.css"); @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"); @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600&display=swap"); /* Jua — the rounded brand wordmark face used by the SRIKI game app's ConstellationLogo. Loaded directly from index.html (not @import) so the request fires during HTML parse instead of after this stylesheet parses; eliminates the FOUT flash on the SRIKI nav wordmark. */ :root { /* Glyph-routed stack. Browsers pick a font per glyph, so: Latin glyphs → Söhne / Inter (the Stripe-style face the user wants) Korean glyphs → Pretendard Variable (closest tonal match to Inter) Pretendard was designed specifically to harmonise with Inter/SF Pro — same x-height ratio, same geometric DNA, same Variable axis. The `:lang(ko)` override below pins KR runs to Pretendard explicitly so no other font can intercept them. */ --font-sans: "Pretendard Variable", "Pretendard", "sohne-var", "Söhne", "Inter var", "Inter Variable", "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Helvetica Neue", Arial, sans-serif; --font-display: "Pretendard Variable", "Pretendard", "sohne-var", "Söhne", "Inter var", "Inter Variable", "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Helvetica Neue", Arial, sans-serif; --font-ko: "Pretendard Variable", "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif; /* Three-track palette — already used by Hero planets, now exposed as tokens so curriculum bars + earnings badges can reuse them. */ --track-math: #A78BFA; --track-thinking: #3B82F6; --track-finance: #FCD34D; --track-math-deep: #5B21B6; --track-thinking-deep: #1E3A8A; --track-finance-deep: #92400E; } /* Korean text rule — pin KR runs to Pretendard explicitly so no other font in the stack can intercept Hangul glyphs. Zero letter-spacing for body, loose tracking for headlines since negative tracking reads tight on Korean. */ :lang(ko), [lang="ko"] { font-family: var(--font-ko); letter-spacing: 0 !important; } /* Within KR text, keep tabular numerals tight (financial figures) */ :lang(ko) .tnum, :lang(ko) [data-tnum] { letter-spacing: -0.01em !important; } /* Pretendard's display weights need bumping for parity with Inter at the same numeric value. KR headlines look hollow at weight 300/400; lift them to 600/700 so the visual hierarchy actually reads. */ html[lang="ko"] h1, html[lang="ko"] .t-display, html[lang="ko"] .t-display-hero { font-weight: 700; } html[lang="ko"] h2, html[lang="ko"] .t-section { font-weight: 700; } html[lang="ko"] h3, html[lang="ko"] .t-subhead-lg { font-weight: 600; } html[lang="ko"] h4, html[lang="ko"] .t-subhead { font-weight: 600; } html[lang="ko"] body, html[lang="ko"] p, html[lang="ko"] .t-body, html[lang="ko"] .t-body-lg { font-weight: 400; } /* Bilingual eyebrow — mono uppercase 11px, used as section markers. Restricted usage now; KR-only sections use .label-ko instead. */ .eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.10em; color: var(--color-body); } .eyebrow-purple { color: var(--color-primary); } .eyebrow-light { color: #C4B5FD; } /* Korean-friendly section label — replaces mono eyebrow when KR is primary */ .label-ko { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-ko); font-size: 13px; font-weight: 600; color: var(--color-primary); letter-spacing: 0 !important; } .label-ko::before { content: ""; width: 18px; height: 2px; background: var(--color-primary); border-radius: 2px; } /* Bilingual headline pattern — KR primary, EN as subtle sub */ .headline-ko { font-family: var(--font-sans); font-feature-settings: "ss01"; font-weight: 700; color: var(--color-heading); line-height: 1.18; } .headline-en { font-family: var(--font-sans); font-feature-settings: "ss01"; font-weight: 400; color: var(--color-body); letter-spacing: -0.4px; line-height: 1.20; } /* Track badges — used on curriculum + earnings breakdown */ .track-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 9999px; font-family: var(--font-mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; } .track-math { background: rgba(167,139,250,0.16); color: var(--track-math-deep); } .track-thinking { background: rgba(59,130,246,0.14); color: var(--track-thinking-deep); } .track-finance { background: rgba(252,211,77,0.28); color: var(--track-finance-deep); } /* Star rating — gold from Hero finance planet. The only non-purple accent we keep on body content (rationale: review stars are a universal pattern; using purple would over-claim the brand color). */ .star-gold { color: #F59E0B; letter-spacing: 0.05em; } /* Bilingual toggle (KO|EN) — pill with thin divider */ .lang-toggle { display: inline-flex; align-items: center; border: 1px solid var(--color-border); border-radius: 6px; overflow: hidden; height: 30px; background: #fff; } .lang-toggle button { border: 0; background: transparent; padding: 0 12px; height: 100%; font-family: var(--font-sans); font-feature-settings: "ss01"; font-size: 12px; font-weight: 600; color: var(--color-body); cursor: pointer; transition: all 160ms cubic-bezier(0.25,0.1,0.25,1); } .lang-toggle button:hover { color: var(--color-heading); } .lang-toggle button[aria-pressed="true"] { background: var(--color-heading); color: #fff; } /* Section spacing — desktop 96px / mobile 64px. More generous than before so each block has room to breathe (KR copy is dense; whitespace helps). */ .section { padding: 96px 24px; } .section-tight { padding: 56px 24px; } @media (max-width: 720px) { .section { padding: 64px 20px; } .section-tight { padding: 40px 20px; } } .section-inner { max-width: 1080px; margin: 0 auto; } /* Card — refined shadow, slightly softer border, more confident hover */ .card { background: #fff; border: 1px solid var(--color-border); border-radius: 10px; transition: box-shadow 220ms cubic-bezier(0.25,0.1,0.25,1), border-color 220ms cubic-bezier(0.25,0.1,0.25,1), transform 220ms cubic-bezier(0.25,0.1,0.25,1); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.04); } .card:hover { border-color: var(--color-primary-soft); box-shadow: 0 4px 8px rgba(15, 23, 42, 0.04), 0 24px 48px -16px rgba(109, 40, 217, 0.18), 0 12px 24px -12px rgba(15, 23, 42, 0.10); transform: translateY(-2px); } /* Dashed divider — used by book ↔ class mapping diagram */ .dashed-line { border-top: 1px dashed var(--color-border-dashed); } /* Accordion (FAQ) — larger touch target, softer styling */ .accordion-head { width: 100%; text-align: left; display: flex; align-items: center; gap: 14px; padding: 22px 4px; background: transparent; border: 0; cursor: pointer; border-bottom: 1px solid var(--color-border); font-family: var(--font-ko); font-feature-settings: "ss01"; font-size: 16px; font-weight: 600; color: var(--color-heading); transition: color 120ms ease; } .accordion-head:hover { color: var(--color-primary); } .accordion-head > .chev { margin-left: auto; transition: transform 220ms cubic-bezier(0.2,0.6,0.25,1); color: var(--color-body); } .accordion-head[aria-expanded="true"] > .chev { transform: rotate(180deg); color: var(--color-primary); } .accordion-body { font-family: var(--font-ko); font-size: 14px; font-weight: 400; line-height: 1.70; color: var(--color-body); padding: 6px 4px 24px; border-bottom: 1px solid var(--color-border); } /* Chip filter row — more breathable, clearer pressed state */ .chip { padding: 8px 14px; border-radius: 9999px; border: 1px solid var(--color-border); background: #fff; font-family: var(--font-sans); font-feature-settings: "ss01"; font-size: 13px; font-weight: 600; color: var(--color-label); cursor: pointer; transition: all 160ms cubic-bezier(0.25,0.1,0.25,1); line-height: 1.0; } .chip:hover { border-color: var(--color-primary-soft); color: var(--color-primary); } .chip[aria-pressed="true"] { background: var(--color-heading); color: #fff; border-color: var(--color-heading); } /* Stepper dots — bigger, more visible active state for mobile thumbs */ .step-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--color-border); transition: all 200ms cubic-bezier(0.2,0.6,0.25,1); } .step-dot.is-done { background: var(--color-primary); } .step-dot.is-active { background: var(--color-primary); box-shadow: 0 0 0 5px rgba(109, 40, 217, 0.16); } /* Disabled button — accessible muted state instead of opacity hack */ button[disabled], [data-disabled="true"] { background: #F1F5F9 !important; color: #94A3B8 !important; border-color: #E2E8F0 !important; cursor: not-allowed !important; pointer-events: none; } /* Smooth scroll for in-page anchors */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Anchor offset — leave room for the sticky nav (~72px) when scrolling to a section. This keeps section headings visible instead of being covered by the nav bar. */ section[id] { scroll-margin-top: 80px; } /* ───────────────────────────────────────────────────────────────────────── Mobile retrofit layer (≤767px) — desktop layout untouched above this line ───────────────────────────────────────────────────────────────────────── */ /* Korean text — break on whole words instead of mid-syllable on narrow widths */ :lang(ko), [lang="ko"] { word-break: keep-all; overflow-wrap: break-word; } /* Force every section h2 to the SAME size on mobile, one line, no wrap. Exempts .dark-h2 (DarkSection intentionally uses pre-line for its 2-line headline). Higher specificity (.section h2) so per-component @media .prog-h2 / .assess-h2 overrides can't beat us. clamp picks the largest size that still keeps the longest h2 ("2분이면 자녀의 현재를 확인할 수 있습니다", 20글자) on one line down to iPhone SE width 375px. */ @media (max-width: 767px) { .section h2:not(.dark-h2), section h2:not(.dark-h2), .sriki-sub-h2 { white-space: nowrap !important; font-size: clamp(14px, 4.6vw, 22px) !important; letter-spacing: -0.3px !important; line-height: 1.30 !important; word-break: normal !important; overflow-wrap: normal !important; max-width: none !important; text-overflow: clip !important; overflow: visible !important; } /* English mode — let headlines wrap naturally. English sentences are much longer than their Korean counterparts (esp. "Math, thinking, and finance education — all in one place." vs. its KO 15-char form), so nowrap forces the text far past the viewport. Allow normal wrap and keep a sensible font size. dark-h2 still excluded. */ html[lang="en"] .section h2:not(.dark-h2), html[lang="en"] section h2:not(.dark-h2), html[lang="en"] .sriki-sub-h2 { white-space: normal !important; font-size: clamp(18px, 5vw, 26px) !important; line-height: 1.25 !important; letter-spacing: -0.4px !important; } } /* Global no horizontal scroll on mobile + iOS safe-area on body. NOTE: must use `overflow-x: clip` (not `hidden`) — `hidden` creates a scroll container on / and kills `position: sticky` on the marketing nav. `clip` clips overflow without becoming a scroll container, so sticky still works. */ html, body { max-width: 100vw; overflow-x: clip; } body { padding-left: env(safe-area-inset-left, 0); padding-right: env(safe-area-inset-right, 0); } /* Images/SVGs default responsive */ img, svg { max-width: 100%; height: auto; } @media (max-width: 767px) { /* Tighter section padding for small phones */ .section { padding: 56px 16px; } .section-tight { padding: 36px 16px; } /* Touch target floor — accordion head, chip, nav links */ .accordion-head { min-height: 44px; padding: 18px 4px; font-size: 15px; } .chip { min-height: 36px; padding: 10px 14px; } /* Section eyebrow + KR label spacing */ .label-ko { font-size: 12px; } }